Separate stories

WordPress · Jan 17, 2024 · d042c2f · d042c2f
1 parent 559e758
commit d042c2f
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 5 deletions.
diff --git a/...select-control-v2/stories/index.story.tsx → ...lect-control-v2/stories/default.story.tsx b/...select-control-v2/stories/index.story.tsx → ...lect-control-v2/stories/default.story.tsx
@@ -1,3 +1,4 @@
+//@ts-nocheck
 /**
  * External dependencies
  */
@@ -11,12 +12,12 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CustomSelect from '../custom-select';
-import { CustomSelectItem } from '..';
+import NewCustomSelect from '../default-component';
+import { CustomSelect, CustomSelectItem } from '..';
 
-const meta: Meta< typeof CustomSelect > = {
-	title: 'Components (Experimental)/CustomSelectControl v2',
-	component: CustomSelect,
+const meta: Meta< typeof NewCustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2/Default',
+	component: NewCustomSelect,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		CustomSelectItem,

diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -0,0 +1,109 @@
+//@ts-nocheck
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import LegacyCustomSelect from '../legacy-component';
+import { CustomSelect, CustomSelectItem } from '..';
+
+const meta: Meta< typeof LegacyCustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	component: LegacyCustomSelect,
+	argTypes: {
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+export const Default: StoryFn = () => {
+	const options = [
+		{
+			key: 'small',
+			name: 'Small',
+			style: { fontSize: '50%' },
+		},
+		{
+			key: 'normal',
+			name: 'Normal',
+			style: { fontSize: '100%' },
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			style: { fontSize: '200%' },
+		},
+		{
+			key: 'huge',
+			name: 'Huge',
+			style: { fontSize: '300%' },
+		},
+	];
+
+	return <CustomSelect label="Font Size" options={ options } />;
+};
+
+export const Controlled: StoryFn = () => {
+	const options = [
+		{
+			key: 'small',
+			name: 'Small',
+			style: { fontSize: '50%' },
+		},
+		{
+			key: 'normal',
+			name: 'Normal',
+			style: { fontSize: '100%' },
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			style: { fontSize: '200%' },
+		},
+		{
+			key: 'huge',
+			name: 'Huge',
+			style: { fontSize: '300%' },
+		},
+	];
+
+	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
+
+	return (
+		<CustomSelect
+			label="Font Size"
+			options={ options }
+			onChange={ ( { selectedItem } ) => {
+				setFontSize( selectedItem );
+			} }
+			value={ options.find( ( option ) => option.key === fontSize.key ) }
+		/>
+	);
+};