diff --git a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js index ad9bffab762c2..ef3dce2add466 100644 --- a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js +++ b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js @@ -6,59 +6,147 @@ import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build- /** * Internal dependencies */ -import BlockPatternsList from '../'; -import { ExperimentalBlockEditorProvider } from '../../provider'; +import BlockPatternsList from '..'; import patterns from './fixtures'; +import { ExperimentalBlockEditorProvider } from '../../provider'; + +/** + * WordPress dependencies + */ +import { registerCoreBlocks } from '@wordpress/block-library'; +import { __ } from '@wordpress/i18n'; +registerCoreBlocks(); const blockEditorSettings = { styles: [ { css: blockLibraryStyles } ], }; -export default { - component: BlockPatternsList, +/** + * Storybook metadata + */ +const meta = { title: 'BlockEditor/BlockPatternsList', -}; - -export const Default = { - render: function Template( props ) { - return ( - - - - ); - }, - args: { - blockPatterns: patterns, - isDraggable: false, - label: 'Block patterns story', - showTitlesAsTooltip: false, + component: BlockPatternsList, + parameters: { + docs: { + canvas: { + sourceState: 'shown', + }, + description: { + component: + 'The `BlockPatternsList` component renders a list of block patterns.', + }, + }, }, argTypes: { - blockPatterns: { description: 'The patterns to render.' }, + blockPatterns: { + control: { + type: 'object', + }, + description: 'The patterns to render.', + table: { + type: { + summary: 'object', + }, + }, + }, shownPatterns: { + contorl: { type: null }, description: - 'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.', + 'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns.`', + table: { + type: { + summary: 'object', + }, + }, + }, + onClickPattern: { + control: { type: null }, + description: + 'Callback function to handle the click event on a pattern.', + table: { + type: { + summary: 'function', + }, + }, + }, + onHover: { + control: { + type: null, + }, + description: + 'Callback function to handle the hover event on a pattern.', + table: { + type: { + summary: 'function', + }, + }, }, - onClickPattern: { type: 'function' }, - onHover: { type: 'function' }, showTitlesAsTooltip: { + control: { + type: 'boolean', + }, description: 'Whether to render the title of each pattern as a tooltip. If enabled', + table: { + type: { + summary: 'boolean', + }, + }, }, orientation: { + control: { + type: 'string', + }, description: 'Orientation for the underlying composite widget.', table: { - defaultValue: { summary: 'both' }, - type: { summary: 'string' }, + defaultValue: { + summary: 'both', + }, + type: { + summary: 'string', + }, + }, + }, + category: { + control: { + type: 'string', + }, + description: 'The currently selected pattern category.', + table: { + type: { + summary: 'string', + }, }, }, - category: { description: 'The currently selected pattern category.' }, isDraggable: { + control: { + type: 'boolean', + }, description: 'Whether the pattern list item should be draggable.', + table: { + type: { + summary: 'boolean', + }, + }, }, }, - parameters: { - actions: { argTypesRegex: '^on.*' }, - controls: { expanded: true }, +}; + +export default meta; + +export const Default = { + args: { + blockPatterns: patterns, + isDraggable: false, + label: __( 'Block patterns story' ), + showTitlesAsTooltip: false, + }, + render: function Template( args ) { + return ( + + + + ); }, };