NumberControl: Convert knobs to controls in Storybook (#41849)

WordPress · Jun 23, 2022 · d3a599f · d3a599f
1 parent caba4dc
commit d3a599f
Showing 1 changed file with 17 additions and 24 deletions.
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,29 +11,15 @@ import NumberControl from '../';
 export default {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		onChange: { action: 'onChange' },
 	},
 };
 
-function Example() {
+function Template( { onChange, ...props } ) {
 	const [ value, setValue ] = useState( '0' );
 	const [ isValidValue, setIsValidValue ] = useState( true );
 
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
-		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
-		label: text( 'label', 'Number' ),
-		min: number( 'min', 0 ),
-		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', '0' ),
-		required: boolean( 'required', false ),
-		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', '1' ),
-	};
-
 	return (
 		<>
 			<NumberControl
@@ -47,13 +28,25 @@ function Example() {
 				onChange={ ( v, extra ) => {
 					setValue( v );
 					setIsValidValue( extra.event.target.validity.valid );
+					onChange( v, extra );
 				} }
 			/>
 			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
 		</>
 	);
 }
 
-export const _default = () => {
-	return <Example />;
+export const Default = Template.bind( {} );
+Default.args = {
+	disabled: false,
+	hideLabelFromVision: false,
+	isPressEnterToChange: false,
+	isShiftStepEnabled: true,
+	label: 'Number',
+	min: 0,
+	max: 100,
+	placeholder: '0',
+	required: false,
+	shiftStep: 10,
+	step: '1',
 };