[Components - ToggleGroupControl]: Update stories to use knobs (#34497)

* [Components - ToggleGroupControl]: Update stories to use knobs * adress feedback * add knobs for changing label in every option * update knobs labels
WordPress · Sep 6, 2021 · bd8da40 · bd8da40
1 parent 5f584c8
commit bd8da40
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 42 deletions.
diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
 /**
  * WordPress dependencies
  */
@@ -6,7 +11,6 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { __experimentalSpacer as Spacer } from '../../';
 import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
 import { View } from '../../view';
 
@@ -16,52 +20,64 @@ export default {
 };
 
 const aligns = [ 'Left', 'Center', 'Right', 'Justify' ];
-const alignOptions = aligns.map( ( key ) => (
-	<ToggleGroupControlOption key={ key } value={ key } label={ key } />
-) );
+const KNOBS_GROUPS = {
+	ToggleGroupControl: 'ToggleGroupControl',
+	ToggleGroupControlOption: 'ToggleGroupControlOption',
+};
 
 export const _default = () => {
 	const [ alignState, setAlignState ] = useState( aligns[ 0 ] );
-	const label = 'Toggle Group Control';
+	const label = text(
+		`${ KNOBS_GROUPS.ToggleGroupControl }: label`,
+		'Toggle Group Control',
+		KNOBS_GROUPS.ToggleGroupControl
+	);
+	const hideLabelFromVision = boolean(
+		`${ KNOBS_GROUPS.ToggleGroupControl }: hideLabelFromVision`,
+		false,
+		KNOBS_GROUPS.ToggleGroupControl
+	);
+	const isBlock = boolean(
+		`${ KNOBS_GROUPS.ToggleGroupControl }: isBlock (render as a css block element)`,
+		false,
+		KNOBS_GROUPS.ToggleGroupControl
+	);
+	const help = text(
+		`${ KNOBS_GROUPS.ToggleGroupControl }: help`,
+		undefined,
+		KNOBS_GROUPS.ToggleGroupControl
+	);
+	const isAdaptiveWidth = boolean(
+		`${ KNOBS_GROUPS.ToggleGroupControl }: isAdaptiveWidth`,
+		false,
+		KNOBS_GROUPS.ToggleGroupControl
+	);
+
+	const alignOptions = aligns.map( ( key, index ) => (
+		<ToggleGroupControlOption
+			key={ key }
+			value={ key }
+			label={ text(
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
+				key,
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
+			) }
+		/>
+	) );
 
 	return (
 		<View>
-			<Spacer>
-				<ToggleGroupControl
-					isBlock
-					onChange={ setAlignState }
-					value={ alignState }
-					label={ label }
-				>
-					{ alignOptions }
-				</ToggleGroupControl>
-			</Spacer>
-			<Spacer>
-				<ToggleGroupControl label={ label } value="horizontal">
-					<ToggleGroupControlOption
-						value="horizontal"
-						label="Horizontal"
-					/>
-					<ToggleGroupControlOption
-						value="vertical"
-						label="Vertical"
-					/>
-				</ToggleGroupControl>
-			</Spacer>
-			<Spacer>
-				<ToggleGroupControl
-					isAdaptiveWidth
-					label={ label }
-					value="long"
-					hideLabelFromVision={ true }
-				>
-					<ToggleGroupControlOption value="short" label="Short" />
-					<ToggleGroupControlOption
-						value="long"
-						label="Looooooooooooong"
-					/>
-				</ToggleGroupControl>
-			</Spacer>
+			<ToggleGroupControl
+				onChange={ setAlignState }
+				value={ alignState }
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
+				help={ help }
+				isBlock={ isBlock }
+				isAdaptiveWidth={ isAdaptiveWidth }
+			>
+				{ alignOptions }
+			</ToggleGroupControl>
 		</View>
 	);
 };
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
@@ -29,7 +29,7 @@ export type ToggleGroupControlProps = Omit<
 	 *
 	 * @default false
 	 */
-	hideLabelFromVision: boolean;
+	hideLabelFromVision?: boolean;
 	/**
 	 * Determines if segments should be rendered with equal widths.
 	 *