docs: combine components

Author: jpoehnelt

.storybook/page.css

@@ -0,0 +1,4 @@
+.docblock-argstable-head th:nth-child(3),
+.docblock-argstable-body td:nth-child(3) {
+    display: none;
+}

.storybook/page.mdx

@@ -1,4 +1,5 @@
 import { Meta, Canvas, Controls, Stories } from "@storybook/blocks";
+import "./page.css";
 
 <Meta isTemplate />
 

src/stories/drive-picker-docs-view.stories.ts

@@ -32,7 +32,10 @@ const elementEventNames = getElementEvents("drive-picker").map(
 
 const meta: Meta = {
 	component: "drive-picker",
-	argTypes,
+	argTypes: {
+		...elementArgTypes["drive-picker"],
+		...elementArgTypes["drive-picker-docs-view"],
+	},
 	args: {
 		"app-id": APP_ID,
 		"client-id": CLIENT_ID,
@@ -45,8 +48,27 @@ export default meta;
 
 const render = ({ ...args }) => {
 	const drivePicker = document.createElement("drive-picker");
-
-	setAttributes(drivePicker, args);
+	const drivePickerDocsView = document.createElement("drive-picker-docs-view");
+
+	setAttributes(
+		drivePicker,
+		Object.fromEntries(
+			Object.entries(args).filter(
+				([key]) => elementArgTypes["drive-picker"][key],
+			),
+		),
+	);
+
+	setAttributes(
+		drivePickerDocsView,
+		Object.fromEntries(
+			Object.entries(args).filter(
+				([key]) => elementArgTypes["drive-picker-docs-view"][key],
+			),
+		),
+	);
+
+	drivePicker.appendChild(drivePickerDocsView);
 
 	for (const eventName of elementEventNames) {
 		drivePicker.addEventListener(eventName, (e) => {
@@ -74,12 +96,3 @@ export const Default: Story = {
 	render,
 	args: {},
 };
-
-export const ExplicitScope: Story = {
-	name: "With explicit scope",
-	render,
-	args: {
-		scope:
-			"https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/drive.file",
-	},
-};

src/stories/drive-picker.stories.ts

@@ -53,7 +53,7 @@ export const elementArgTypes: {
 				const inputType: StrictInputType = {
 					name: attr.name,
 					description: attr.description,
-					table: { type: { summary: attr.type?.text }, category: "Attributes" },
+					table: { type: { summary: attr.type?.text }, category: tagName },
 					control: {},
 				};