docs: improve storybook for embedding (#30)

- allow setting attributes from url params - change button text from "Preview" to "Open Drive Picker"
googleworkspace · Jan 13, 2025 · 8b9c87f · 8b9c87f
1 parent 3c8e640
commit 8b9c87f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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}/>
diff --git a/src/stories/drive-picker.stories.ts b/src/stories/drive-picker.stories.ts
@@ -28,13 +28,23 @@ 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: {
 		...elementArgTypes["drive-picker"],
 		...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
@@ -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", () => {