diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx similarity index 92% rename from packages/components/src/custom-select-control-v2/stories/index.story.tsx rename to packages/components/src/custom-select-control-v2/stories/default.story.tsx index 62b03000b493e..fbac571556b27 100644 --- a/packages/components/src/custom-select-control-v2/stories/index.story.tsx +++ b/packages/components/src/custom-select-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 new file mode 100644 index 0000000000000..7aa56d39ec1ed --- /dev/null +++ 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 ) => ( +
+ +
+ ), + ], +}; +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 ; +}; + +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 ( + { + setFontSize( selectedItem ); + } } + value={ options.find( ( option ) => option.key === fontSize.key ) } + /> + ); +};