Merge pull request #142 from wpmudev/select-component-documentation

Select Documentation
wpmudev · Oct 16, 2023 · 6a6cffc · 6a6cffc
2 parents 576b33b + 9c3246e
commit 6a6cffc
Show file tree

Hide file tree

Showing 21 changed files with 1,269 additions and 516 deletions.
diff --git a/packages/components/select/stories/ReactSelect.mdx b/packages/components/select/stories/ReactSelect.mdx
@@ -1,26 +1,24 @@
-import { Source } from '@storybook/addon-docs';
-import { Page } from '@wpmudev/storybook';
+import { Page } from "@wpmudev/storybook"
+import { Unstyled } from "@storybook/blocks"
 
-import TabUsage from './tabs/TabUsage.mdx';
-import TabCode from './tabs/TabCode.mdx';
-import TabExamples from './tabs/TabExamples.mdx';
+import TabUsage from "./tabs/TabUsage.mdx"
+import TabCode from "./tabs/TabCode.mdx"
+import TabExamples from "./tabs/TabExamples.mdx"
 
-<Page.Tabs
-	title="Select"
-	subtitle={
-		<>
-			The Select element is use to create a drop-down list. This element is most often used in a form, to collect user input. Select inputs let users select a predefined value from a list of options
-		</>
-	}
-	status="draft"
->
-	<div id="usage" label="Usage">
-		<TabUsage />
-	</div>
-    <div id="code" label="Code">
-		<TabCode />
-	</div>
-	<div id="examples" label="Examples">
-		<TabExamples />
-	</div>
-</Page.Tabs>
+<Unstyled>
+	<Page.Tabs
+		title="Select"
+		subtitle="The Select element is used for a drop-down options. This element is most often used in a form, to collect user input. Select inputs let users select a predefined value from a list of options"
+		status="draft"
+	>
+		<div id="usage" label="Usage">
+			<TabUsage />
+		</div>
+		<div id="code" label="Code">
+			<TabCode />
+		</div>
+		<div id="examples" label="Examples">
+			<TabExamples />
+		</div>
+	</Page.Tabs>
+</Unstyled>
diff --git a/packages/components/select/stories/images/anatomy-expanded.png b/packages/components/select/stories/images/anatomy-expanded.png
diff --git a/packages/components/select/stories/images/anatomy-multiselect.png b/packages/components/select/stories/images/anatomy-multiselect.png
diff --git a/packages/components/select/stories/images/anatomy-select.png b/packages/components/select/stories/images/anatomy-select.png
diff --git a/packages/components/select/stories/images/expanded-anatomy.svg b/packages/components/select/stories/images/expanded-anatomy.svg
diff --git a/packages/components/select/stories/images/expanded-states.svg b/packages/components/select/stories/images/expanded-states.svg
diff --git a/packages/components/select/stories/images/multiselect-anatomy.svg b/packages/components/select/stories/images/multiselect-anatomy.svg
diff --git a/packages/components/select/stories/images/multiselect-states.svg b/packages/components/select/stories/images/multiselect-states.svg
diff --git a/packages/components/select/stories/images/single-anatomy.svg b/packages/components/select/stories/images/single-anatomy.svg