Storybook: Add stories for the ContrastChecker component

[himanshupathak95]

Part of #67165

What?

This PR adds the Storybook stories for the ContrastChecker component in the block editor. It includes comprehensive stories demonstrating different text alignment states.

Testing Instructions

• Start Storybook by running npm run storybook:dev
• Open Storybook at http://localhost:50240/
• Navigate to "BlockEditor/ContrastChecker" in the Storybook sidebar
• Test the stories

Screencast

Screen.Recording.2024-12-19.at.13.22.09.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: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

[himanshupathak95]

Hi @t-hamano,
I've created a story for the ContrastChecker component, following the patterns in README.md. Would you mind taking a look at my pull request and sharing your thoughts?

Thanks!

[t-hamano]

Thanks for the PR!

This component is a bit special in that it doesn't render anything if the contrast is sufficient. This may confuse developers seeing this component for the first time.

How about setting a default value to intentionally cause insufficient contrast?

export const Default = {
	args: {
		backgroundColor: ...,
		textColor: ...,
	},
};

[himanshupathak95]

Thanks, @t-hamano for the wonderful suggestions.

I have addressed all your comments. Please let me know if it tests well for you.

[t-hamano]

LGTM! Works as expected.

d6887a6f4eee9592e69715b2bef89f87.mp4