Skip to content

Commit

Permalink
Apply cfs2 to vsf3 migration tool, keep named functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@ciampo
ciampo committed Dec 22, 2024
1 parent 7d4921b commit fd4b118
Showing 1 changed file with 139 additions and 120 deletions.
259 changes: 139 additions & 120 deletions packages/components/src/menu/stories/index.story.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import type { Meta, StoryObj } from '@storybook/react';
import type { StoryObj, Meta } from '@storybook/react';
import { css } from '@emotion/react';

/**
Expand All @@ -22,7 +22,7 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
import { ContextSystemProvider } from '../../context';
import type { MenuProps } from '../types';

const meta = {
const meta: Meta< typeof Menu > = {
id: 'components-experimental-menu',
title: 'Components (Experimental)/Actions/Menu',
component: Menu,
Expand Down Expand Up @@ -64,126 +64,120 @@ const meta = {
source: { excludeDecorators: true },
},
},
} satisfies Meta< typeof Menu >;
};
export default meta;

type Story = StoryObj< MenuProps >;

export const Default: Story = {
args: {
children: (
<>
<Menu.TriggerButton
render={
<Button __next40pxDefaultSize variant="secondary" />
}
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
The menu item help text is automatically truncated
when there are more than two lines of text
</Menu.ItemHelpText>
export const Default: StoryObj< typeof Menu > = {
render: ( props: MenuProps ) => (
<Menu { ...props }>
<Menu.TriggerButton
render={ <Button __next40pxDefaultSize variant="secondary" /> }
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
The menu item help text is automatically truncated when
there are more than two lines of text
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item hideOnClick={ false }>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
This item doesn&apos;t close the menu on click
</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item disabled>Disabled item</Menu.Item>
<Menu.Separator />
<Menu.Group>
<Menu.GroupLabel>Group label</Menu.GroupLabel>
<Menu.Item
prefix={ <Icon icon={ customLink } size={ 24 } /> }
>
<Menu.ItemLabel>With prefix</Menu.ItemLabel>
</Menu.Item>
<Menu.Item hideOnClick={ false }>
<Menu.ItemLabel>Label</Menu.ItemLabel>
<Menu.ItemHelpText>
This item doesn&apos;t close the menu on click
</Menu.ItemHelpText>
<Menu.Item suffix="⌘S">With suffix</Menu.Item>
<Menu.Item
disabled
prefix={
<Icon icon={ formatCapitalize } size={ 24 } />
}
suffix="⌥⌘T"
>
<Menu.ItemLabel>
Disabled with prefix and suffix
</Menu.ItemLabel>
<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
</Menu.Item>
<Menu.Item disabled>Disabled item</Menu.Item>
<Menu.Separator />
<Menu.Group>
<Menu.GroupLabel>Group label</Menu.GroupLabel>
<Menu.Item
prefix={ <Icon icon={ customLink } size={ 24 } /> }
>
<Menu.ItemLabel>With prefix</Menu.ItemLabel>
</Menu.Item>
<Menu.Item suffix="⌘S">With suffix</Menu.Item>
<Menu.Item
disabled
prefix={
<Icon icon={ formatCapitalize } size={ 24 } />
}
suffix="⌥⌘T"
>
<Menu.ItemLabel>
Disabled with prefix and suffix
</Menu.ItemLabel>
<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
</Menu.Item>
</Menu.Group>
</Menu.Popover>
</>
),
},
</Menu.Group>
</Menu.Popover>
</Menu>
),

args: {},
};

export const WithSubmenu: Story = {
args: {
children: (
<>
<Menu.TriggerButton
render={
<Button __next40pxDefaultSize variant="secondary" />
}
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>Level 1 item</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem suffix="Suffix">
<Menu.ItemLabel>
Submenu trigger item with a long label
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem>
export const WithSubmenu: StoryObj< typeof Menu > = {
render: ( props: MenuProps ) => (
<Menu { ...props }>
<Menu.TriggerButton
render={ <Button __next40pxDefaultSize variant="secondary" /> }
>
Open menu
</Menu.TriggerButton>
<Menu.Popover>
<Menu.Item>Level 1 item</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem suffix="Suffix">
<Menu.ItemLabel>
Submenu trigger item with a long label
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
</Menu.Item>
<Menu>
<Menu.SubmenuTriggerItem>
<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Submenu trigger
Level 3 item
</Menu.ItemLabel>
</Menu.SubmenuTriggerItem>
<Menu.Popover>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
</Menu.Popover>
</>
),
</Menu.Item>
<Menu.Item>
<Menu.ItemLabel>
Level 3 item
</Menu.ItemLabel>
</Menu.Item>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
</Menu.Popover>
</Menu>
),

args: {
...Default.args,
},
};

export const WithCheckboxes: Story = {
export const WithCheckboxes: StoryObj< typeof Menu > = {
render: function WithCheckboxes( props: MenuProps ) {
const [ isAChecked, setAChecked ] = useState( false );
const [ isBChecked, setBChecked ] = useState( true );
Expand Down Expand Up @@ -327,9 +321,13 @@ export const WithCheckboxes: Story = {
</Menu>
);
},

args: {
...Default.args,
},
};

export const WithRadios: Story = {
export const WithRadios: StoryObj< typeof Menu > = {
render: function WithRadios( props: MenuProps ) {
const [ radioValue, setRadioValue ] = useState( 'two' );
const onRadioChange: React.ComponentProps<
Expand Down Expand Up @@ -395,6 +393,10 @@ export const WithRadios: Story = {
</Menu>
);
},

args: {
...Default.args,
},
};

const modalOnTopOfMenuPopover = css`
Expand All @@ -403,8 +405,7 @@ const modalOnTopOfMenuPopover = css`
}
`;

// For more examples with `Modal`, check https://ariakit.org/examples/menu-wordpress-modal
export const WithModals: Story = {
export const WithModals: StoryObj< typeof Menu > = {
render: function WithModals( props: MenuProps ) {
const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
Expand Down Expand Up @@ -466,6 +467,10 @@ export const WithModals: Story = {
</>
);
},

args: {
...Default.args,
},
};

const ExampleSlotFill = createSlotFill( 'Example' );
Expand Down Expand Up @@ -516,8 +521,8 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
);
};

export const WithSlotFill: Story = {
render: ( props ) => {
export const WithSlotFill: StoryObj< typeof Menu > = {
render: ( props: MenuProps ) => {
return (
<SlotFillProvider>
<Menu { ...props }>
Expand Down Expand Up @@ -556,15 +561,20 @@ export const WithSlotFill: Story = {
</SlotFillProvider>
);
},

args: {
...Default.args,
},
};

const toolbarVariantContextValue = {
Menu: {
variant: 'toolbar',
},
};
export const ToolbarVariant: Story = {
render: ( props ) => (

export const ToolbarVariant: StoryObj< typeof Menu > = {
render: ( props: MenuProps ) => (
// TODO: add toolbar
<ContextSystemProvider value={ toolbarVariantContextValue }>
<Menu { ...props }>
Expand Down Expand Up @@ -597,10 +607,14 @@ export const ToolbarVariant: Story = {
</Menu>
</ContextSystemProvider>
),

args: {
...Default.args,
},
};

export const InsideModal: Story = {
render: function InsideModal( props ) {
export const InsideModal: StoryObj< typeof Menu > = {
render: function InsideModal( props: MenuProps ) {
const [ isModalOpen, setModalOpen ] = useState( false );
return (
<>
Expand Down Expand Up @@ -663,6 +677,11 @@ export const InsideModal: Story = {
</>
);
},

args: {
...Default.args,
},

parameters: {
docs: {
source: { type: 'code' },
Expand Down

0 comments on commit fd4b118

Please sign in to comment.