From 4fb38dfe90eb8e97e9d52bb3e82d84da706861fe Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Thu, 28 Nov 2024 11:35:02 +0530
Subject: [PATCH] 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 } ) => (
+	<p style={ { textTransform: transform } }>
+		This is a sample text to demonstrate the text transformation.
+	</p>
+);
 
+/**
+ * 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 (
+			<div>
+				<TextTransformControl
+					value={ selectedTransform }
+					onChange={ handleTransformChange }
+					className={ className }
+				/>
+				<DemoText transform={ selectedTransform } />
+			</div>
+		);
+	},
+};
+
+/**
+ * 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 (
-		<TextTransformControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				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',
+	},
+};