From 4fb38dfe90eb8e97e9d52bb3e82d84da706861fe Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 28 Nov 2024 11:35:02 +0530 Subject: [PATCH 1/2] Add TextTransformControl stories --- .../stories/index.story.js | 137 +++++++++++++++--- 1 file changed, 120 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js index 96dd8ed479dc4e..dd7853d11be3ae 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js @@ -1,33 +1,136 @@ +/** + * Internal dependencies + */ +import TextTransformControl from '../'; + /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; /** - * Internal dependencies + * Text transform options */ -import TextTransformControl from '../'; +const TRANSFORM_OPTIONS = [ 'none', 'uppercase', 'lowercase', 'capitalize' ]; + +/** + * Demo text component to show text transform effect + */ +const DemoText = ( { transform } ) => ( +

+ This is a sample text to demonstrate the text transformation. +

+); +/** + * TextTransformControl Properties + */ export default { title: 'BlockEditor/TextTransformControl', component: TextTransformControl, argTypes: { - onChange: { action: 'onChange' }, + value: { + control: 'select', + options: TRANSFORM_OPTIONS, + description: 'Currently selected text transform value', + table: { + type: { + summary: 'string', + }, + defaultValue: { summary: 'none' }, + }, + }, + onChange: { + action: 'onChange', + control: { + type: null, + }, + description: 'Callback function when text transform changes', + table: { + type: { + summary: 'function', + }, + }, + }, + className: { + control: 'text', + description: 'Additional CSS class name to apply', + table: { + type: { summary: 'string' }, + }, + }, + }, + render: function Render( { onChange, value, className } ) { + const [ selectedTransform, setSelectedTransform ] = useState( value ); + + useEffect( () => { + setSelectedTransform( value ); + }, [ value ] ); + + const handleTransformChange = ( newValue ) => { + const updatedValue = + newValue === selectedTransform ? undefined : newValue; + setSelectedTransform( updatedValue ); + if ( onChange ) { + onChange( updatedValue ); + } + }; + + return ( +
+ + +
+ ); + }, +}; + +/** + * Story demonstrating TextTransformControl with default settings + */ +export const Default = { + args: { + value: 'none', + }, +}; + +/** + * TextTransformControl with uppercase transform selected + */ +export const WithUppercase = { + args: { + value: 'uppercase', }, }; -const Template = ( { onChange, ...args } ) => { - const [ value, setValue ] = useState(); - return ( - { - onChange( ...changeArgs ); - setValue( ...changeArgs ); - } } - value={ value } - /> - ); +/** + * TextTransformControl with lowercase transform selected + */ +export const WithLowercase = { + args: { + value: 'lowercase', + }, }; -export const Default = Template.bind( {} ); +/** + * TextTransformControl with capitalize transform selected + */ +export const WithCapitalize = { + args: { + value: 'capitalize', + }, +}; + +/** + * TextTransformControl with custom className + */ +export const WithCustomClass = { + args: { + value: 'none', + className: 'custom-text-transform-control', + }, +}; From 6e052fb1f71bf0a094d498473b72c429e68a5d0d Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Thu, 12 Dec 2024 21:10:39 +0530 Subject: [PATCH 2/2] refactor: Removed the sample text, and extra stories and used story pattern --- .../stories/index.story.js | 126 +++++------------- 1 file changed, 32 insertions(+), 94 deletions(-) diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js index dd7853d11be3ae..3ff1dcedabc2e5 100644 --- a/packages/block-editor/src/components/text-transform-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js @@ -6,40 +6,24 @@ import TextTransformControl from '../'; /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** - * Text transform options + * Meta configuration for Storybook */ -const TRANSFORM_OPTIONS = [ 'none', 'uppercase', 'lowercase', 'capitalize' ]; - -/** - * Demo text component to show text transform effect - */ -const DemoText = ( { transform } ) => ( -

- This is a sample text to demonstrate the text transformation. -

-); - -/** - * TextTransformControl Properties - */ -export default { +const meta = { title: 'BlockEditor/TextTransformControl', component: TextTransformControl, - argTypes: { - value: { - control: 'select', - options: TRANSFORM_OPTIONS, - description: 'Currently selected text transform value', - table: { - type: { - summary: 'string', - }, - defaultValue: { summary: 'none' }, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Control to facilitate text transformation selections.', }, }, + }, + argTypes: { onChange: { action: 'onChange', control: { @@ -53,84 +37,38 @@ export default { }, }, className: { - control: 'text', + control: { type: 'text' }, description: 'Additional CSS class name to apply', table: { type: { summary: 'string' }, }, }, - }, - render: function Render( { onChange, value, className } ) { - const [ selectedTransform, setSelectedTransform ] = useState( value ); - - useEffect( () => { - setSelectedTransform( value ); - }, [ value ] ); - - const handleTransformChange = ( newValue ) => { - const updatedValue = - newValue === selectedTransform ? undefined : newValue; - setSelectedTransform( updatedValue ); - if ( onChange ) { - onChange( updatedValue ); - } - }; - - return ( -
- - -
- ); - }, -}; - -/** - * Story demonstrating TextTransformControl with default settings - */ -export const Default = { - args: { - value: 'none', + value: { + control: { type: null }, + description: 'Currently selected writing mode.', + table: { type: { summary: 'string' } }, + }, }, }; -/** - * TextTransformControl with uppercase transform selected - */ -export const WithUppercase = { - args: { - value: 'uppercase', - }, -}; +export default meta; /** - * TextTransformControl with lowercase transform selected + * Default Story Export */ -export const WithLowercase = { - args: { - value: 'lowercase', - }, -}; - -/** - * TextTransformControl with capitalize transform selected - */ -export const WithCapitalize = { - args: { - value: 'capitalize', - }, -}; +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); -/** - * TextTransformControl with custom className - */ -export const WithCustomClass = { - args: { - value: 'none', - className: 'custom-text-transform-control', + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); }, };