From 24ae15ba29ba4d8544e7692189db172d1bc18863 Mon Sep 17 00:00:00 2001
From: benazeer1909 <benazircpra@gmail.com>
Date: Wed, 11 Dec 2024 22:39:18 +0530
Subject: [PATCH] Adding story for color-pallete-control

---
 .../color-palette/stories/index.story.js      | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/block-editor/src/components/color-palette/stories/index.story.js

diff --git a/packages/block-editor/src/components/color-palette/stories/index.story.js b/packages/block-editor/src/components/color-palette/stories/index.story.js
new file mode 100644
index 00000000000000..01c8af28c8215b
--- /dev/null
+++ b/packages/block-editor/src/components/color-palette/stories/index.story.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPalette } from '@wordpress/block-editor';
+
+export default {
+	title: 'Components/ColorPaletteControl',
+	component: ColorPalette,
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+};
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ color, setColor ] = useState( null );
+
+		return (
+			<div style={ { padding: '20px', background: '#f4f4f4' } }>
+				<ColorPalette
+					{ ...args }
+					value={ color }
+					onChange={ ( newColor ) => {
+						setColor( newColor );
+						onChange( newColor );
+					} }
+				/>
+				<div style={ { marginTop: '10px' } }>
+					<strong>Selected Color:</strong> { color || 'None' }
+				</div>
+			</div>
+		);
+	},
+	args: {
+		colors: [
+			{ name: 'Red', color: '#f00' },
+			{ name: 'Green', color: '#0f0' },
+			{ name: 'Blue', color: '#00f' },
+			{ name: 'Yellow', color: '#ff0' },
+		],
+		disableCustomColors: false,
+	},
+};