Add group and separator storybook example

WordPress · Jul 25, 2022 · 43e9559 · 43e9559
1 parent ac9fa8c
commit 43e9559
Showing 1 changed file with 61 additions and 22 deletions.
diff --git a/packages/components/src/custom-select-control-new/stories/index.tsx b/packages/components/src/custom-select-control-new/stories/index.tsx
@@ -11,7 +11,13 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import { CustomSelectControl, CustomSelectControlItem } from '../';
+import {
+	CustomSelectControl,
+	CustomSelectControlItem,
+	CustomSelectControlGroup,
+	CustomSelectControlGroupLabel,
+	CustomSelectControlSeparator,
+} from '../';
 
 const meta: ComponentMeta< typeof CustomSelectControl > = {
 	component: CustomSelectControl,
@@ -27,32 +33,65 @@ const meta: ComponentMeta< typeof CustomSelectControl > = {
 export default meta;
 
 // TODO:
-// - with options prop
+// - with `options` prop
 // - controlled vs uncontrolled
-// - with HTML "options"?
+// - with HTML `<options />` (and related vanilla elements)?
 // - example with custom author dropdown
 
-const DefaultTemplate: ComponentStory< typeof CustomSelectControl > = ( {
+export const Default: ComponentStory< typeof CustomSelectControl > = ( {
 	onChange,
 	...args
-} ) => {
-	// const [ value, setValue ] = useState< string | undefined >( '10px' );
-
-	return (
-		<CustomSelectControl { ...args }>
-			<CustomSelectControlItem value="Venus" />
-			<CustomSelectControlItem value="Earth">
-				Planet Earth
-			</CustomSelectControlItem>
-			<CustomSelectControlItem value="Mars" />
-			<CustomSelectControlItem value="Jupiter" disabled />
-			<CustomSelectControlItem value="Neptune" />
-		</CustomSelectControl>
-	);
+} ) => (
+	<CustomSelectControl { ...args }>
+		<CustomSelectControlItem value="Venus" />
+		<CustomSelectControlItem value="Earth">
+			{ /* Custom item label */ }
+			Planet Earth
+		</CustomSelectControlItem>
+		<CustomSelectControlItem value="Mars" />
+		<CustomSelectControlItem value="Jupiter" disabled />
+		<CustomSelectControlItem value="Neptune" />
+	</CustomSelectControl>
+);
+Default.args = {
+	label: 'Choose a planet',
 };
 
-export const Default: ComponentStory< typeof CustomSelectControl > =
-	DefaultTemplate.bind( {} );
-Default.args = {
-	label: 'With `CustomSelectControlItem` children',
+export const WithGroupsAndSeparators: ComponentStory<
+	typeof CustomSelectControl
+> = ( { onChange, ...args } ) => (
+	<CustomSelectControl { ...args }>
+		<CustomSelectControlGroup>
+			<CustomSelectControlGroupLabel>
+				Primary
+			</CustomSelectControlGroupLabel>
+			<CustomSelectControlItem value="Red" />
+			<CustomSelectControlItem value="Yellow" />
+			<CustomSelectControlItem value="Blue" />
+		</CustomSelectControlGroup>
+		<CustomSelectControlSeparator />
+		<CustomSelectControlGroup>
+			<CustomSelectControlGroupLabel>
+				Secondary
+			</CustomSelectControlGroupLabel>
+			<CustomSelectControlItem value="Orange" />
+			<CustomSelectControlItem value="Green" />
+			<CustomSelectControlItem value="Purple" />
+		</CustomSelectControlGroup>
+		<CustomSelectControlSeparator />
+		<CustomSelectControlGroup>
+			<CustomSelectControlGroupLabel>
+				Tertiary
+			</CustomSelectControlGroupLabel>
+			<CustomSelectControlItem value="Amber" />
+			<CustomSelectControlItem value="Vermilion" />
+			<CustomSelectControlItem value="Magenta" />
+			<CustomSelectControlItem value="Violet" />
+			<CustomSelectControlItem value="Teal" />
+			<CustomSelectControlItem value="Chartreuse" />
+		</CustomSelectControlGroup>
+	</CustomSelectControl>
+);
+WithGroupsAndSeparators.args = {
+	label: 'Pick a color',
 };