From 7baf4542063b91084f6980f1443ff95e67bac1f7 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 21 Nov 2024 10:16:23 +0530 Subject: [PATCH 1/5] doc: Add BlockIcon Storybook stories - Demonstrate various icon rendering scenarios --- .../block-icon/stories/index.story.js | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 packages/block-editor/src/components/block-icon/stories/index.story.js diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js new file mode 100644 index 00000000000000..0670d4510ab64f --- /dev/null +++ b/packages/block-editor/src/components/block-icon/stories/index.story.js @@ -0,0 +1,112 @@ +/** + * WordPress dependencies + */ +import { registerCoreBlocks } from '@wordpress/block-library'; +import { paragraph, heading, image } from '@wordpress/icons'; +import { Toolbar } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import BlockIcon from '../'; + +// Register core blocks for the story +registerCoreBlocks(); + +/** + * BlockIcon component demonstrates rendering icons for different block types + */ +const meta = { + title: 'BlockEditor/BlockIcon', + component: BlockIcon, + parameters: { + docs: { canvas: { sourceState: 'shown' } }, + }, + decorators: [ + ( Story ) => ( + + + + ), + ], + argTypes: { + icon: { + control: { + type: 'select', + options: { + Paragraph: paragraph, + Heading: heading, + Image: image, + 'Default Block': 'block-default', + }, + }, + description: + 'The icon to display. Can be a custom icon or a predefined WordPress icon.', + }, + showColors: { + control: 'boolean', + description: 'Whether to show background and foreground colors.', + }, + className: { + control: 'text', + description: 'Additional CSS class for the icon.', + }, + context: { + control: 'text', + description: 'Context where the icon is being used.', + }, + }, +}; +export default meta; + +/** + * Default story showing a paragraph icon + */ +export const Default = { + args: { + icon: paragraph, + }, +}; + +/** + * Story showing the default block icon + */ +export const DefaultBlockIcon = { + args: { + icon: { src: 'block-default' }, + }, +}; + +/** + * Story showing an icon with colors + */ +export const WithColors = { + args: { + icon: { + src: image, + background: '#f0f0f0', + foreground: '#333', + }, + showColors: true, + }, +}; + +/** + * Story showing an icon with a custom class + */ +export const WithCustomClass = { + args: { + icon: heading, + className: 'my-custom-block-icon', + }, +}; + +/** + * Story showing an icon with a specific context + */ +export const WithContext = { + args: { + icon: paragraph, + context: 'inserter', + }, +}; From 6c2673bb6566a377d6a5ca516533f43e2e396b5c Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 26 Dec 2024 21:35:34 +0530 Subject: [PATCH 2/5] doc: Fix story with patterns --- .../block-icon/stories/index.story.js | 81 ++----------------- 1 file changed, 8 insertions(+), 73 deletions(-) diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js index 0670d4510ab64f..756409eef18ae2 100644 --- a/packages/block-editor/src/components/block-icon/stories/index.story.js +++ b/packages/block-editor/src/components/block-icon/stories/index.story.js @@ -1,45 +1,22 @@ -/** - * WordPress dependencies - */ -import { registerCoreBlocks } from '@wordpress/block-library'; -import { paragraph, heading, image } from '@wordpress/icons'; -import { Toolbar } from '@wordpress/components'; - /** * Internal dependencies */ import BlockIcon from '../'; -// Register core blocks for the story -registerCoreBlocks(); - /** - * BlockIcon component demonstrates rendering icons for different block types + * WordPress dependencies */ +import { paragraph } from '@wordpress/icons'; + const meta = { title: 'BlockEditor/BlockIcon', component: BlockIcon, parameters: { docs: { canvas: { sourceState: 'shown' } }, }, - decorators: [ - ( Story ) => ( - - - - ), - ], argTypes: { icon: { - control: { - type: 'select', - options: { - Paragraph: paragraph, - Heading: heading, - Image: image, - 'Default Block': 'block-default', - }, - }, + control: 'block', description: 'The icon to display. Can be a custom icon or a predefined WordPress icon.', }, @@ -57,56 +34,14 @@ const meta = { }, }, }; + export default meta; -/** - * Default story showing a paragraph icon - */ export const Default = { args: { icon: paragraph, - }, -}; - -/** - * Story showing the default block icon - */ -export const DefaultBlockIcon = { - args: { - icon: { src: 'block-default' }, - }, -}; - -/** - * Story showing an icon with colors - */ -export const WithColors = { - args: { - icon: { - src: image, - background: '#f0f0f0', - foreground: '#333', - }, - showColors: true, - }, -}; - -/** - * Story showing an icon with a custom class - */ -export const WithCustomClass = { - args: { - icon: heading, - className: 'my-custom-block-icon', - }, -}; - -/** - * Story showing an icon with a specific context - */ -export const WithContext = { - args: { - icon: paragraph, - context: 'inserter', + showColors: false, + className: '', + context: 'default', }, }; From 68cd36ab6fe66aec29adb5818c932fb7f96b362b Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 2 Jan 2025 14:50:01 +0530 Subject: [PATCH 3/5] feat: Add story for block icon component --- .../block-icon/stories/index.story.js | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js index 756409eef18ae2..b1369df0bedf7e 100644 --- a/packages/block-editor/src/components/block-icon/stories/index.story.js +++ b/packages/block-editor/src/components/block-icon/stories/index.story.js @@ -1,24 +1,40 @@ /** - * Internal dependencies + * WordPress dependencies */ -import BlockIcon from '../'; +import { box, button, cog, paragraph } from '@wordpress/icons'; /** - * WordPress dependencies + * Internal dependencies */ -import { paragraph } from '@wordpress/icons'; +import BlockIcon from '../'; const meta = { title: 'BlockEditor/BlockIcon', component: BlockIcon, parameters: { - docs: { canvas: { sourceState: 'shown' } }, + docs: { + description: { + component: + 'The `BlockIcon` component allows to display a icon for a block.', + }, + canvas: { sourceState: 'shown' }, + }, }, argTypes: { icon: { - control: 'block', + control: 'select', + options: [ 'paragraph', 'cog', 'box', 'button' ], + mapping: { + paragraph, + cog, + box, + button, + }, description: - 'The icon to display. Can be a custom icon or a predefined WordPress icon.', + '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' }, + }, }, showColors: { control: 'boolean', From c00a80d1381fb5bcc810349917efb6cad099c2ff Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 2 Jan 2025 14:56:08 +0530 Subject: [PATCH 4/5] feat: Add table.type for each of the argTypes --- .../src/components/block-icon/stories/index.story.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js index b1369df0bedf7e..c5e3866588f737 100644 --- a/packages/block-editor/src/components/block-icon/stories/index.story.js +++ b/packages/block-editor/src/components/block-icon/stories/index.story.js @@ -39,14 +39,23 @@ const meta = { showColors: { control: 'boolean', description: 'Whether to show background and foreground colors.', + table: { + type: { summary: 'boolean' }, + }, }, className: { control: 'text', description: 'Additional CSS class for the icon.', + table: { + type: { summary: 'string' }, + }, }, context: { control: 'text', description: 'Context where the icon is being used.', + table: { + type: { summary: 'string' }, + }, }, }, }; @@ -58,6 +67,6 @@ export const Default = { icon: paragraph, showColors: false, className: '', - context: 'default', + context: '', }, }; From e55c04835e7083049defcaf91015f7fa39d50237 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 8 Jan 2025 17:47:35 +0530 Subject: [PATCH 5/5] fix: Corrected description grammar and default args --- .../src/components/block-icon/stories/index.story.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-icon/stories/index.story.js b/packages/block-editor/src/components/block-icon/stories/index.story.js index c5e3866588f737..e30a347005d774 100644 --- a/packages/block-editor/src/components/block-icon/stories/index.story.js +++ b/packages/block-editor/src/components/block-icon/stories/index.story.js @@ -15,7 +15,7 @@ const meta = { docs: { description: { component: - 'The `BlockIcon` component allows to display a icon for a block.', + 'The `BlockIcon` component allows to display an icon for a block.', }, canvas: { sourceState: 'shown' }, }, @@ -64,9 +64,6 @@ export default meta; export const Default = { args: { - icon: paragraph, - showColors: false, - className: '', - context: '', + icon: 'paragraph', }, };