diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx index 8a20d82b318e3..1d75c044f1e27 100644 --- a/packages/components/src/card/stories/index.story.tsx +++ b/packages/components/src/card/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * Internal dependencies @@ -41,51 +41,52 @@ const meta: Meta< typeof Card > = { export default meta; -const Template: StoryFn< typeof Card > = ( args ) => ; - -export const Default = Template.bind( {} ); -Default.args = { - children: ( - <> - - CardHeader - - - CardBody - - - CardBody (before CardDivider) - - - - CardBody (after CardDivider) - - - Card Media - - - CardFooter - - - - ), +export const Default: StoryObj< typeof Card > = { + args: { + children: ( + <> + + CardHeader + + + CardBody + + + CardBody (before CardDivider) + + + + CardBody (after CardDivider) + + + Card Media + + + CardFooter + + + + ), + }, }; /** * `CardMedia` provides a container for full-bleed content within a `Card`, * such as images, video, or even just a background color. The corners will be rounded if necessary. */ -export const FullBleedContent = Template.bind( {} ); -FullBleedContent.args = { - ...Default.args, - children: ( - -
- Some full bleed content -
- - ), +export const FullBleedContent: StoryObj< typeof Card > = { + ...Default, + args: { + ...Default.args, + children: ( + +
+ Some full bleed content +
+ + ), + }, }; diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx index 81500c1558822..9f2198515db1e 100644 --- a/packages/components/src/color-picker/stories/index.story.tsx +++ b/packages/components/src/color-picker/stories/index.story.tsx @@ -1,12 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; - -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; +import type { Meta, StoryObj } from '@storybook/react'; /** * Internal dependencies @@ -30,19 +25,4 @@ const meta: Meta< typeof ColorPicker > = { }; export default meta; -const Template: StoryFn< typeof ColorPicker > = ( { onChange, ...props } ) => { - const [ color, setColor ] = useState< string | undefined >(); - - return ( - { - onChange?.( ...changeArgs ); - setColor( ...changeArgs ); - } } - /> - ); -}; - -export const Default = Template.bind( {} ); +export const Default: StoryObj< typeof ColorPicker > = {}; diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx index d4b856380db92..63ddc76ede990 100644 --- a/packages/components/src/dropdown-menu/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * Internal dependencies @@ -43,39 +43,42 @@ const meta: Meta< typeof DropdownMenu > = { }; export default meta; -const Template: StoryFn< typeof DropdownMenu > = ( props ) => ( -
- -
-); - -export const Default = Template.bind( {} ); -Default.args = { - label: 'Select a direction.', - icon: menu, - controls: [ - { - title: 'First Menu Item Label', - icon: arrowUp, - // eslint-disable-next-line no-console - onClick: () => console.log( 'up!' ), - }, - { - title: 'Second Menu Item Label', - icon: arrowDown, - // eslint-disable-next-line no-console - onClick: () => console.log( 'down!' ), - }, +export const Default: StoryObj< typeof DropdownMenu > = { + decorators: [ + ( Story ) => ( +
+ +
+ ), ], + args: { + label: 'Select a direction.', + icon: menu, + controls: [ + { + title: 'First Menu Item Label', + icon: arrowUp, + // eslint-disable-next-line no-console + onClick: () => console.log( 'up!' ), + }, + { + title: 'Second Menu Item Label', + icon: arrowDown, + // eslint-disable-next-line no-console + onClick: () => console.log( 'down!' ), + }, + ], + }, }; -export const WithChildren = Template.bind( {} ); -// Adding custom source because Storybook is not able to show the contents of -// the `children` prop correctly in the code snippet. -WithChildren.parameters = { - docs: { - source: { - code: ` +export const WithChildren: StoryObj< typeof DropdownMenu > = { + ...Default, + // Adding custom source because Storybook is not able to show the contents of + // the `children` prop correctly in the code snippet. + parameters: { + docs: { + source: { + code: ` Move Up @@ -90,29 +93,30 @@ WithChildren.parameters = { `, - language: 'jsx', - type: 'auto', + language: 'jsx', + type: 'auto', + }, }, }, -}; -WithChildren.args = { - label: 'Select a direction.', - icon: more, - children: ( { onClose } ) => ( - <> - - - Move Up - - - Move Down - - - - - Remove - - - - ), + args: { + label: 'Select a direction.', + icon: more, + children: ( { onClose } ) => ( + <> + + + Move Up + + + Move Down + + + + + Remove + + + + ), + }, }; diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index 3df2f78345066..b9d143ee1aa57 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * Internal dependencies @@ -41,36 +41,44 @@ const meta: Meta< typeof Dropdown > = { }; export default meta; -const Template: StoryFn< typeof Dropdown > = ( args ) => ( -
- -
-); - -export const Default = Template.bind( {} ); -Default.args = { - renderToggle: ( { isOpen, onToggle } ) => ( - - ), - renderContent: () =>
This is the dropdown content.
, +export const Default: StoryObj< typeof Dropdown > = { + decorators: [ + ( Story ) => ( +
+ +
+ ), + ], + args: { + renderToggle: ( { isOpen, onToggle } ) => ( + + ), + renderContent: () =>
This is the dropdown content.
, + }, }; /** * To apply more padding to the dropdown content, use the provided `` * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`). */ -export const WithMorePadding = Template.bind( {} ); -WithMorePadding.args = { - ...Default.args, - renderContent: () => ( - - { /* eslint-disable react/no-unescaped-entities */ } - Content wrapped with paddingSize="medium". - { /* eslint-enable react/no-unescaped-entities */ } - - ), +export const WithMorePadding: StoryObj< typeof Dropdown > = { + ...Default, + args: { + ...Default.args, + renderContent: () => ( + + { /* eslint-disable react/no-unescaped-entities */ } + Content wrapped with paddingSize="medium". + { /* eslint-enable react/no-unescaped-entities */ } + + ), + }, }; /** @@ -78,31 +86,35 @@ WithMorePadding.args = { * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary * paddings, for example when child components already have padding on their own. */ -export const WithNoPadding = Template.bind( {} ); -WithNoPadding.args = { - ...Default.args, - renderContent: () => ( - - { /* eslint-disable react/no-unescaped-entities */ } - Content wrapped with paddingSize="none". - { /* eslint-enable react/no-unescaped-entities */ } - - ), +export const WithNoPadding: StoryObj< typeof Dropdown > = { + ...Default, + args: { + ...Default.args, + renderContent: () => ( + + { /* eslint-disable react/no-unescaped-entities */ } + Content wrapped with paddingSize="none". + { /* eslint-enable react/no-unescaped-entities */ } + + ), + }, }; -export const WithMenuItems = Template.bind( {} ); -WithMenuItems.args = { - ...Default.args, - renderContent: () => ( - <> - - Item 1 - Item 2 - - - Item 1 - Item 2 - - - ), +export const WithMenuItems: StoryObj< typeof Dropdown > = { + ...Default, + args: { + ...Default.args, + renderContent: () => ( + <> + + Item 1 + Item 2 + + + Item 1 + Item 2 + + + ), + }, }; diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 5adeadcf7ac1d..218580a4cc3ba 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * Internal dependencies @@ -36,153 +36,157 @@ const meta: Meta< typeof NavigatorProvider > = { }; export default meta; -const Template: StoryFn< typeof NavigatorProvider > = ( { - style, - ...props -} ) => ( - - - - -

This is the home screen.

- - - - Navigate to child screen. - +export const Default: StoryObj< typeof NavigatorProvider > = { + args: { + initialPath: '/', + style: { height: '100vh', maxHeight: '450px' }, + children: ( + <> + + + +

This is the home screen.

- - Navigate to screen with horizontal overflow. - + + + Navigate to child screen. + - - Navigate to screen with sticky content. - + + Navigate to screen with horizontal overflow. + - - Navigate to product screen with id 1. - + + Navigate to screen with sticky content. + - void; - } ) => ( - - ) } - renderContent={ () => ( - - Go - Stuff - - ) } - /> - - - - + Navigate to product screen with id 1. + - - - -

This is the child screen.

- - Go back - - - - + void; + } ) => ( + + ) } + renderContent={ () => ( + + Go + Stuff + + ) } + /> + + + + - - - - - Go back - -
- - ¯\_(ツ)_/¯ - -
- - - + + + +

This is the child screen.

+ + Go back + + + + - - - - - Go back - - - -
-

A wild sticky element appears

-
- - - -
-

Another wild sticky element appears

-
- - - - - - - + + + + + Go back + +
+ + ¯\_(ツ)_/¯ + +
+ + + - - - - -); + + + + + Go back + + + +
+

A wild sticky element appears

+
+ + + +
+

Another wild sticky element appears

+
+ + + + + + + -export const Default: StoryFn< typeof NavigatorProvider > = Template.bind( {} ); -Default.args = { - initialPath: '/', + + + + + ), + }, }; function getStickyStyles( { @@ -234,69 +238,64 @@ function ProductDetails() { ); } -const NestedNavigatorTemplate: StoryFn< typeof NavigatorProvider > = ( { - style, - ...props -} ) => ( - - - - - - Go to first child. - - - Go to second child. - - - - - - - - This is the first child - - Go back to parent - - - - - - - - This is the second child - - Go back to parent - - - Go to grand child. - - - - - - - - This is the grand child - - Go back to parent - - - - - -); - -export const NestedNavigator: StoryFn< typeof NavigatorProvider > = - NestedNavigatorTemplate.bind( {} ); -NestedNavigator.args = { - initialPath: '/child2/grandchild', +export const NestedNavigator: StoryObj< typeof NavigatorProvider > = { + ...Default, + args: { + ...Default.args, + initialPath: '/child2/grandchild', + children: ( + <> + + + + + Go to first child. + + + Go to second child. + + + + + + + + This is the first child + + Go back to parent + + + + + + + + This is the second child + + Go back to parent + + + Go to grand child. + + + + + + + + This is the grand child + + Go back to parent + + + + + + ), + }, }; const NavigatorButtonWithSkipFocus = ( { @@ -317,50 +316,49 @@ const NavigatorButtonWithSkipFocus = ( { ); }; -export const SkipFocus: StoryFn< typeof NavigatorProvider > = ( args ) => { - return ; -}; -SkipFocus.args = { - initialPath: '/', - children: ( - <> -
- = { + args: { + initialPath: '/', + children: ( + <> +
-

Home screen

- - Go to child screen. - - - +

Home screen

+ + Go to child screen. + + + +

Child screen

+ + Go to parent screen. + + +
+ + -

Child screen

- - Go to parent screen. - - -
- - - Go to child screen, but keep focus on this button - - - ), + Go to child screen, but keep focus on this button + + + ), + }, }; diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx index e0670ac275afa..dfffaefe802a4 100644 --- a/packages/components/src/popover/stories/index.story.tsx +++ b/packages/components/src/popover/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { StoryFn, Meta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; /** * WordPress dependencies @@ -79,174 +79,176 @@ const PopoverWithAnchor = ( args: PopoverProps ) => { ); }; -const Template: StoryFn< typeof Popover > = ( args ) => { - const [ isVisible, setIsVisible ] = useState( false ); - const toggleVisible = () => { - setIsVisible( ( state ) => ! state ); - }; - const buttonRef = useRef< HTMLButtonElement | undefined >(); - useEffect( () => { - buttonRef.current?.scrollIntoView?.( { - block: 'center', - inline: 'center', - } ); - }, [] ); +export const Default: StoryObj< typeof Popover > = { + decorators: [ + ( Story ) => { + const [ isVisible, setIsVisible ] = useState( false ); + const toggleVisible = () => { + setIsVisible( ( state ) => ! state ); + }; + const buttonRef = useRef< HTMLButtonElement | undefined >(); + useEffect( () => { + buttonRef.current?.scrollIntoView?.( { + block: 'center', + inline: 'center', + } ); + }, [] ); + + return ( +
+ +
+ ); + }, + ], + args: { + children: ( +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. +
+ ), + }, +}; - return ( +export const Unstyled: StoryObj< typeof Popover > = { + ...Default, + args: { + ...Default.args, + + variant: 'unstyled', + }, +}; + +export const AllPlacements: StoryObj< typeof Popover > = { + render: ( { children, ...args } ) => (
- -
- ); -}; - -export const Default: StoryFn< typeof Popover > = Template.bind( {} ); -Default.args = { - children: ( -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. +

+ Resize / scroll the viewport to test the behavior of the + popovers when they reach the viewport boundaries. +

+
+ { AVAILABLE_PLACEMENTS.map( ( p ) => ( + + { children } +
+ (placement: { p }) +
+ + ) ) } +
), + // Excluding placement and position since they all possible values + // are passed directly in code. + parameters: { + controls: { + exclude: [ 'placement', 'position' ], + }, + }, + args: { + ...Default.args, + children: ( +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+ ), + noArrow: false, + offset: 10, + resize: false, + flip: false, + }, }; -export const Unstyled: StoryFn< typeof Popover > = Template.bind( {} ); -Unstyled.args = { - children: ( -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
- ), - variant: 'unstyled', -}; +export const DynamicHeight: StoryObj< typeof Popover > = { + decorators: [ + ( Story ) => { + const [ height, setHeight ] = useState( 200 ); + const increase = () => setHeight( height + 100 ); + const decrease = () => setHeight( height - 100 ); -export const AllPlacements: StoryFn< typeof Popover > = ( { - children, - ...args -} ) => ( -
-

- Resize / scroll the viewport to test the behavior of the popovers - when they reach the viewport boundaries. -

-
- { AVAILABLE_PLACEMENTS.map( ( p ) => ( - - { children } + return ( +
- (placement: { p }) + + +
- - ) ) } -
-
-); -// Excluding placement and position since they all possible values -// are passed directly in code. -AllPlacements.parameters = { - controls: { - exclude: [ 'placement', 'position' ], - }, -}; -AllPlacements.args = { - ...Default.args, - children: ( -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. -
- ), - noArrow: false, - offset: 10, - resize: false, - flip: false, -}; -export const DynamicHeight: StoryFn< typeof Popover > = ( { - children, - ...args -} ) => { - const [ height, setHeight ] = useState( 200 ); - const increase = () => setHeight( height + 100 ); - const decrease = () => setHeight( height - 100 ); - - return ( -
-
- - - -
+

+ When the height of the popover exceeds the available + space in the canvas, a scrollbar inside the popover + should appear. +

-

- When the height of the popover exceeds the available space in - the canvas, a scrollbar inside the popover should appear. -

- -
- -
- { children } +
+ +
- +
+ ); + }, + ], + args: { + ...Default.args, + children: ( +
+ Content with dynamic height
-
- ); -}; -DynamicHeight.args = { - ...Default.args, - children: 'Content with dynamic height', + ), + }, }; -export const WithSlotOutsideIframe: StoryFn< typeof Popover > = ( args ) => { - return ; -}; -WithSlotOutsideIframe.args = { - ...Default.args, +export const WithSlotOutsideIframe: StoryObj< typeof Popover > = { + render: ( args ) => ( + + ), + args: { + ...Default.args, + }, };