docs: improve storybook for embedding

- allow setting attributes from url params
- change button text from "Preview" to "Open Drive Picker"

Author: Justin Poehnelt

.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}/>

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,
 	},

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", () => {