From f79dd0a077dc49fab29ce733cb60b97e5c71c841 Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Mon, 23 Dec 2024 14:41:01 +0530
Subject: [PATCH] fix: Removed extra stories and addedparameters in meta

---
 .../unit-control/stories/index.story.js       | 69 ++++++-------------
 1 file changed, 20 insertions(+), 49 deletions(-)

diff --git a/packages/block-editor/src/components/unit-control/stories/index.story.js b/packages/block-editor/src/components/unit-control/stories/index.story.js
index 981ab99dd8026..a6c51d02703a2 100644
--- a/packages/block-editor/src/components/unit-control/stories/index.story.js
+++ b/packages/block-editor/src/components/unit-control/stories/index.story.js
@@ -8,18 +8,18 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import UnitControl from '../';
 
-const CUSTOM_UNITS = [
-	{ value: 'px', label: 'px', default: 0 },
-	{ value: 'em', label: 'em', default: 0 },
-	{ value: 'rem', label: 'rem', default: 0 },
-];
-
-/**
- * UnitControl Properties
- */
-export default {
+const meta = {
 	title: 'BlockEditor/UnitControl',
 	component: UnitControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'UnitControl allows the user to set a numeric quantity as well as a unit ',
+			},
+		},
+	},
 	argTypes: {
 		onChange: {
 			action: 'onChange',
@@ -36,7 +36,7 @@ export default {
 			},
 		},
 		labelPosition: {
-			control: 'select',
+			control: 'radio',
 			options: [ 'top', 'side', 'bottom' ],
 			description: 'The position of the label.',
 			table: {
@@ -59,12 +59,12 @@ export default {
 			},
 		},
 		size: {
-			control: 'select',
-			options: [ 'small', 'medium' ],
+			control: 'radio',
+			options: [ 'default', 'small' ],
 			description: 'The size of the control.',
 			table: {
 				type: { summary: 'string' },
-				defaultValue: { summary: 'medium' },
+				defaultValue: { summary: 'default' },
 			},
 		},
 		disabled: {
@@ -76,7 +76,12 @@ export default {
 			},
 		},
 	},
-	render: function Render( { onChange, onUnitChange, value, ...args } ) {
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, onUnitChange, value, ...args } ) {
 		const [ componentValue, setComponentValue ] = useState( value || '' );
 
 		useEffect( () => {
@@ -100,37 +105,3 @@ export default {
 		);
 	},
 };
-
-/**
- * Story demonstrating UnitControl with default settings
- */
-export const Default = {
-	args: {
-		label: 'Default Unit Control',
-		value: '10',
-		size: 'medium',
-		labelPosition: 'top',
-	},
-};
-
-/**
- * Story demonstrating UnitControl with custom units
- */
-export const CustomUnits = {
-	args: {
-		...Default.args,
-		label: 'Custom Units',
-		units: CUSTOM_UNITS,
-	},
-};
-
-/**
- * Story demonstrating UnitControl in disabled state
- */
-export const Disabled = {
-	args: {
-		...Default.args,
-		label: 'Disabled Unit Control',
-		disabled: true,
-	},
-};