From 2cb93fca0a4b12357ad831527a9752397da705a8 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Thu, 21 Nov 2024 13:43:46 +0530 Subject: [PATCH 1/5] Doc: add story file for BlockCard --- .../block-card/stories/index.story.js | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 packages/block-editor/src/components/block-card/stories/index.story.js diff --git a/packages/block-editor/src/components/block-card/stories/index.story.js b/packages/block-editor/src/components/block-card/stories/index.story.js new file mode 100644 index 00000000000000..aaadab97ada545 --- /dev/null +++ b/packages/block-editor/src/components/block-card/stories/index.story.js @@ -0,0 +1,108 @@ +/** + * WordPress dependencies + */ +import { box, button, cog, paragraph } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import BlockCard from '../'; + +/** + * BlockCard component displays information about a block including its icon, title, and description. + */ +const meta = { + title: 'BlockEditor/BlockCard', + component: BlockCard, + parameters: { + docs: { + description: { + component: + 'BlockCard component displays block information, including icon, title, and description.', + }, + canvas: { sourceState: 'shown' }, + }, + }, + decorators: [ ( Story ) => ], + argTypes: { + title: { + control: 'text', + description: 'The title of the block', + }, + description: { + control: 'text', + description: 'A description of the block functionality', + }, + icon: { + control: 'select', + options: [ 'paragraph', 'cog', 'box', 'button' ], + mapping: { + paragraph, + cog, + box, + button, + }, + description: 'The icon to display for the block', + }, + name: { + control: 'text', + description: 'Optional custom name for the block', + }, + className: { + control: 'text', + description: 'Additional CSS class names', + }, + }, +}; + +export default meta; + +/** + * Default story shows the basic BlockCard with title, icon and description. + */ +export const Default = { + args: { + title: 'Paragraph', + icon: paragraph, + description: 'Start with the building block of all narrative.', + }, +}; + +/** + * This story demonstrates the BlockCard with a name. + */ +export const Name = { + args: { + ...Default.args, + name: 'Custom Name', + }, +}; + +/** + * This story demonstrates the BlockCard with a description. + */ +export const Description = { + args: { + ...Default.args, + description: + 'Start with the building block of all narrative. Paragraph is a good block for text-heavy content.', + }, +}; + +/** + * This story demonstrates the BlockCard with a icon + */ +export const Icon = { + args: { + ...Default.args, + icon: box, + title: 'Box Icon', + }, +}; + +export const Title = { + args: { + ...Default.args, + title: 'A Custom Title', + }, +}; From b561fbb21ccebb87152a0efe98326507dceb3cdc Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Fri, 6 Dec 2024 15:12:50 +0530 Subject: [PATCH 2/5] Refactor: Refactor `block-card` storybook --- .../block-card/stories/index.story.js | 59 +++++-------------- 1 file changed, 16 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/components/block-card/stories/index.story.js b/packages/block-editor/src/components/block-card/stories/index.story.js index aaadab97ada545..d96244c215602b 100644 --- a/packages/block-editor/src/components/block-card/stories/index.story.js +++ b/packages/block-editor/src/components/block-card/stories/index.story.js @@ -18,20 +18,25 @@ const meta = { docs: { description: { component: - 'BlockCard component displays block information, including icon, title, and description.', + 'The BlockCard component allows to display a card which contains the title of a block, its icon and its description.', }, canvas: { sourceState: 'shown' }, }, }, - decorators: [ ( Story ) => ], argTypes: { title: { control: 'text', description: 'The title of the block', + table: { + type: { summary: 'string' }, + }, }, description: { control: 'text', description: 'A description of the block functionality', + table: { + type: { summary: 'string' }, + }, }, icon: { control: 'select', @@ -47,10 +52,16 @@ const meta = { name: { control: 'text', description: 'Optional custom name for the block', + table: { + type: { summary: 'string' }, + }, }, className: { control: 'text', description: 'Additional CSS class names', + table: { + type: { summary: 'string' }, + }, }, }, }; @@ -58,51 +69,13 @@ const meta = { export default meta; /** - * Default story shows the basic BlockCard with title, icon and description. + * Default story shows the basic BlockCard with title, icon, name and description. */ export const Default = { args: { title: 'Paragraph', icon: paragraph, - description: 'Start with the building block of all narrative.', - }, -}; - -/** - * This story demonstrates the BlockCard with a name. - */ -export const Name = { - args: { - ...Default.args, - name: 'Custom Name', - }, -}; - -/** - * This story demonstrates the BlockCard with a description. - */ -export const Description = { - args: { - ...Default.args, - description: - 'Start with the building block of all narrative. Paragraph is a good block for text-heavy content.', - }, -}; - -/** - * This story demonstrates the BlockCard with a icon - */ -export const Icon = { - args: { - ...Default.args, - icon: box, - title: 'Box Icon', - }, -}; - -export const Title = { - args: { - ...Default.args, - title: 'A Custom Title', + description: 'This is a paragraph block description.', + name: 'Paragraph Block', }, }; From 0b6e813110fff0f1834f1cf2cb93038c761c7a7b Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Thu, 12 Dec 2024 14:06:09 +0530 Subject: [PATCH 3/5] Refactor: Remove redundant doc comment --- .../src/components/block-card/stories/index.story.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-card/stories/index.story.js b/packages/block-editor/src/components/block-card/stories/index.story.js index d96244c215602b..8a04bcaa8dcd79 100644 --- a/packages/block-editor/src/components/block-card/stories/index.story.js +++ b/packages/block-editor/src/components/block-card/stories/index.story.js @@ -8,17 +8,14 @@ import { box, button, cog, paragraph } from '@wordpress/icons'; */ import BlockCard from '../'; -/** - * BlockCard component displays information about a block including its icon, title, and description. - */ -const meta = { +export default { title: 'BlockEditor/BlockCard', component: BlockCard, parameters: { docs: { description: { component: - 'The BlockCard component allows to display a card which contains the title of a block, its icon and its description.', + 'The `BlockCard` component allows to display a card which contains the title of a block, its icon and its description.', }, canvas: { sourceState: 'shown' }, }, @@ -66,8 +63,6 @@ const meta = { }, }; -export default meta; - /** * Default story shows the basic BlockCard with title, icon, name and description. */ From d2ce81fec29d63c410136bb2e2e79bfebb3933da Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 18 Dec 2024 10:32:34 +0530 Subject: [PATCH 4/5] Refactor: `BlockCard` story docs --- .../block-card/stories/index.story.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-card/stories/index.story.js b/packages/block-editor/src/components/block-card/stories/index.story.js index 8a04bcaa8dcd79..7b9581483a7715 100644 --- a/packages/block-editor/src/components/block-card/stories/index.story.js +++ b/packages/block-editor/src/components/block-card/stories/index.story.js @@ -8,14 +8,14 @@ import { box, button, cog, paragraph } from '@wordpress/icons'; */ import BlockCard from '../'; -export default { +const meta = { title: 'BlockEditor/BlockCard', component: BlockCard, parameters: { docs: { description: { component: - 'The `BlockCard` component allows to display a card which contains the title of a block, its icon and its description.', + 'The `BlockCard` component allows to display a "card" which contains the title of a block, its icon and its description.', }, canvas: { sourceState: 'shown' }, }, @@ -23,14 +23,14 @@ export default { argTypes: { title: { control: 'text', - description: 'The title of the block', + description: 'The title of the block.', table: { type: { summary: 'string' }, }, }, description: { control: 'text', - description: 'A description of the block functionality', + description: 'A description of the block functionality.', table: { type: { summary: 'string' }, }, @@ -44,18 +44,18 @@ export default { box, button, }, - description: 'The icon to display for the block', + description: 'The icon to display for the block.', }, name: { control: 'text', - description: 'Optional custom name for the block', + description: 'Optional custom name for the block.', table: { type: { summary: 'string' }, }, }, className: { control: 'text', - description: 'Additional CSS class names', + description: 'Additional CSS class names.', table: { type: { summary: 'string' }, }, @@ -63,9 +63,8 @@ export default { }, }; -/** - * Default story shows the basic BlockCard with title, icon, name and description. - */ +export default meta; + export const Default = { args: { title: 'Paragraph', From 85506768484949b8962ab7a7788b4d4d29d497c1 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Wed, 18 Dec 2024 16:48:08 +0530 Subject: [PATCH 5/5] Refactor: `BlockCard` story docs --- .../src/components/block-card/stories/index.story.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-card/stories/index.story.js b/packages/block-editor/src/components/block-card/stories/index.story.js index 7b9581483a7715..0fe68e2032d394 100644 --- a/packages/block-editor/src/components/block-card/stories/index.story.js +++ b/packages/block-editor/src/components/block-card/stories/index.story.js @@ -44,7 +44,11 @@ const meta = { box, button, }, - description: 'The icon to display for the block.', + description: + 'The icon of the block. This can be any of [WordPress Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.', + table: { + type: { summary: 'string | object' }, + }, }, name: { control: 'text',