From 8b9c87ff27391c9c1320e88fc838a5508eee294e Mon Sep 17 00:00:00 2001
From: Justin Poehnelt <jpoehnelt@google.com>
Date: Mon, 13 Jan 2025 11:01:43 -0800
Subject: [PATCH] docs: improve storybook for embedding (#30)

- allow setting attributes from url params
- change button text from "Preview" to "Open Drive Picker"
---
 .storybook/page.mdx                       |  2 +-
 src/stories/drive-picker.stories.ts       | 10 ++++++++++
 src/stories/utils/lazy-preview-element.ts |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.storybook/page.mdx b/.storybook/page.mdx
index af5575d..b81dd8b 100644
--- a/.storybook/page.mdx
+++ b/.storybook/page.mdx
@@ -5,6 +5,6 @@ import "./page.css";
 
 <Canvas/>
 
-<Controls/>
+{ new URL(window.location.href).searchParams.has("hideControls") ? null :<Controls/> }
 
 <Stories includePrimary={false}/>
\ No newline at end of file
diff --git a/src/stories/drive-picker.stories.ts b/src/stories/drive-picker.stories.ts
index 939b41c..384adbd 100644
--- a/src/stories/drive-picker.stories.ts
+++ b/src/stories/drive-picker.stories.ts
@@ -28,6 +28,15 @@ const elementEventNames = getElementEvents("drive-picker").map(
 	(event) => event.name,
 );
 
+const searchParams = new URL(location.href).searchParams;
+const argsAllowedFromParams = [
+	...Object.keys(elementArgTypes["drive-picker"]),
+	...Object.keys(elementArgTypes["drive-picker-docs-view"]),
+];
+const argValuesFromParams = Object.fromEntries(
+	argsAllowedFromParams.map((arg) => [arg, searchParams.get(arg) || undefined]),
+);
+
 const meta: Meta = {
 	component: "drive-picker",
 	argTypes: {
@@ -35,6 +44,7 @@ const meta: Meta = {
 		...elementArgTypes["drive-picker-docs-view"],
 	},
 	args: {
+		...argValuesFromParams,
 		"app-id": APP_ID,
 		"client-id": CLIENT_ID,
 	},
diff --git a/src/stories/utils/lazy-preview-element.ts b/src/stories/utils/lazy-preview-element.ts
index 3cd78e2..369fee3 100644
--- a/src/stories/utils/lazy-preview-element.ts
+++ b/src/stories/utils/lazy-preview-element.ts
@@ -44,7 +44,7 @@ lazy-preview button:hover {
 		this.appendChild(style);
 
 		const button = document.createElement("button");
-		button.textContent = "Preview";
+		button.textContent = "Open Drive Picker";
 		this.appendChild(button);
 
 		button.addEventListener("click", () => {