Skip to content

Commit

Permalink
MenuGroup: Add Storybook stories (#53090)
Browse files Browse the repository at this point in the history
  • Loading branch information
bangank36 authored Aug 4, 2023
1 parent 60670d7 commit 904fd24
Showing 1 changed file with 83 additions and 0 deletions.
83 changes: 83 additions & 0 deletions packages/components/src/menu-group/stories/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import MenuGroup from '..';
import MenuItem from '../../menu-item';
import MenuItemsChoice from '../../menu-items-choice';

/**
* External dependencies
*/
import type { ComponentMeta, ComponentStory } from '@storybook/react';

const meta: ComponentMeta< typeof MenuGroup > = {
title: 'Components/MenuGroup',
component: MenuGroup,
argTypes: {
children: { control: { type: null } },
},
parameters: {
controls: { expanded: true },
docs: { source: { state: 'open' } },
},
};
export default meta;

const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
return (
<MenuGroup { ...args }>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</MenuGroup>
);
};

export const Default: ComponentStory< typeof MenuGroup > = Template.bind( {} );

const MultiGroupsTemplate: ComponentStory< typeof MenuGroup > = ( args ) => {
const [ mode, setMode ] = useState( 'visual' );
const choices = [
{
value: 'visual',
label: 'Visual editor',
},
{
value: 'text',
label: 'Code editor',
},
];

return (
<>
<MenuGroup label={ 'View' }>
<MenuItem>Top Toolbar</MenuItem>
<MenuItem>Spotlight Mode</MenuItem>
<MenuItem>Distraction Free</MenuItem>
</MenuGroup>
<MenuGroup { ...args }>
<MenuItemsChoice
choices={ choices }
value={ mode }
onSelect={ ( newMode: string ) => setMode( newMode ) }
onHover={ () => {} }
/>
</MenuGroup>
</>
);
};

/**
* When other menu items exist above or below a MenuGroup, the group
* should have a divider line between it and the adjacent item.
*/
export const WithSeperator = MultiGroupsTemplate.bind( {} );
WithSeperator.args = {
...Default.args,
hideSeparator: false,
label: 'Editor',
};

0 comments on commit 904fd24

Please sign in to comment.