From d3a599fa46d170d5a5ed4d148e658cecc09b846b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 24 Jun 2022 05:52:06 +0900
Subject: [PATCH] NumberControl: Convert knobs to controls in Storybook
 (#41849)

---
 .../src/number-control/stories/index.js       | 41 ++++++++-----------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
index 9c8496cc908c2b..fd969ce0f7ecfd 100644
--- 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,6 +28,7 @@ function Example() {
 				onChange={ ( v, extra ) => {
 					setValue( v );
 					setIsValidValue( extra.event.target.validity.valid );
+					onChange( v, extra );
 				} }
 			/>
 			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
@@ -54,6 +36,17 @@ function Example() {
 	);
 }
 
-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',
 };