Storybook: Add WritingModeControl story

[Sukhendu2002]

Part of #67165

What?

This PR will add stories for WritingModeControl component in the Storybook.

Testing Instructions

1. Run npm run storybook:dev
2. Open the storybook on http://localhost:50240/
3. Check the WritingModeControl stories.

Screenshots or screencast

Screen.Recording.2024-11-27.at.4.10.10.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Sukhendu2002 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

In order to move this PR forward, I would like to suggest two points that I think are particularly important.

1 - Only one story is needed: I think the only difference between the Default and Vertical stories is the default value. In this case, I think an additional story (Vertical) is unnecessary.

2 - Don't make the value prop controllable: In the current implementation, nothing happens when you press the component's button after changing the value prop.

b67d787f2e6b0d17f55218fbc36fe20e.mp4

How about implementing it in control mode as follows?

export const Default = {
	render: function Template( { onChange, ...args } ) {
		const [ value, setValue ] = useState();
		return (
			<WritingModeControl
				{ ...args }
				onChange={ ( ...changeArgs ) => {
					onChange( ...changeArgs );
					setValue( ...changeArgs );
				} }
				value={ value }
			/>
		);
	},
};

[Sukhendu2002]

Hi @t-hamano, Thanks for the detailed feedback!

I’ve updated the story:

• The Default and Vertical stories have been combined into a single story, as the difference was only the default value.
• The component now manages the value internally using useState.

Please let me know if there’s anything else that needs adjustment!

[t-hamano]

Thanks for the update! Overall it looks good, but I'd like to suggest two additional illustrations at the end.

[Sukhendu2002]

Hi @t-hamano, Thanks for the feedback! I’ve addressed both points.

[t-hamano]

LGTM! Works as expected 👍

8a3b9f256639d65386dad23e24632256.mp4