Skip to content

Commit

Permalink
Separate stories
Browse files Browse the repository at this point in the history
  • Loading branch information
brookewp committed Jan 18, 2024
1 parent 2deb66e commit 14f9009
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
//@ts-nocheck
/**
* External dependencies
*/
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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 ) }
/>
);
};

0 comments on commit 14f9009

Please sign in to comment.