FormToggle: Covert component to TypeScript

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 -   `Spinner`: Convert to TypeScript and update storybook ([#41540](https://github.com/WordPress/gutenberg/pull/41540/)).
 -   `InputControl`: Add tests and update to use `@testing-library/user-event` ([#41421](https://github.com/WordPress/gutenberg/pull/41421)).
+-   `FormToggle`: Convert to TypeScript ([#41729](https://github.com/WordPress/gutenberg/pull/41729)).
 -   `ColorIndicator`: Convert to TypeScript ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
 -   `AlignmentMatrixControl`: Refactor away from `_.flattenDeep()` in utils ([#41814](https://github.com/WordPress/gutenberg/pull/41814/)).
 

packages/components/src/form-toggle/README.md

@@ -60,37 +60,36 @@ import { useState } from '@wordpress/element';
 const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );
 
-	<FormToggle
-		checked={ isChecked }
-		onChange={ () => setChecked( ( state ) => ! state ) }
-	/>
+	return (
+		<FormToggle
+			checked={ isChecked }
+			onChange={ () => setChecked( ( state ) => ! state ) }
+		/>
+	);
 };
 ```
 
 ### Props
 
 The component accepts the following props:
 
-#### checked
+#### `checked`: `boolean`
 
 If checked is true the toggle will be checked. If checked is false the toggle will be unchecked.
 If no value is passed the toggle will be unchecked.
 
--   Type: `Boolean`
 -   Required: No
 
-#### disabled
+#### `disabled`: `boolean`
 
 If disabled is true the toggle will be disabled and apply the appropriate styles.
 
--   Type: `Boolean`
 -   Required: No
 
-#### onChange
+#### `onChange`: `( event: ChangeEvent<HTMLInputElement> ) => void`
 
-A function that receives the checked state (boolean) as input.
+A callback function invoked when the toggle is clicked.
 
--   Type: `function`
 -   Required: Yes
 
 ## Related components

packages/components/src/form-toggle/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { FormToggleProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+export const noop = () => {};
+
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function FormToggle(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to FormToggle.
+	props: Omit<
+		WordPressComponentProps< FormToggleProps, 'input', false >,
+		'ref'
+	>
+) {
+	const {
+		className,
+		checked,
+		id,
+		disabled,
+		onChange = noop,
+		...additionalProps
+	} = props;
+	const wrapperClasses = classnames( 'components-form-toggle', className, {
+		'is-checked': checked,
+		'is-disabled': disabled,
+	} );
+
+	return (
+		<span className={ wrapperClasses }>
+			<input
+				className="components-form-toggle__input"
+				id={ id }
+				type="checkbox"
+				checked={ checked }
+				onChange={ onChange }
+				disabled={ disabled }
+				{ ...additionalProps }
+			/>
+			<span className="components-form-toggle__track"></span>
+			<span className="components-form-toggle__thumb"></span>
+		</span>
+	);
+}
+
+export default FormToggle;

packages/components/src/form-toggle/stories/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FormToggle } from '..';
+
+const meta: ComponentMeta< typeof FormToggle > = {
+	component: FormToggle,
+	title: 'Components/FormToggle',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof FormToggle > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<FormToggle
+			{ ...args }
+			checked={ isChecked }
+			onChange={ ( e ) => {
+				setChecked( ( state ) => ! state );
+				onChange( e );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+Default.args = {};

packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
+<span
+  class="components-form-toggle"
+>
+  <input
+    class="components-form-toggle__input"
+    type="checkbox"
+  />
+  <span
+    class="components-form-toggle__track"
+  />
+  <span
+    class="components-form-toggle__thumb"
+  />
+</span>
+`;
+
+exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -2,10 +2,11 @@
+    <span
+      class="components-form-toggle"
+    >
+      <input
+        class="components-form-toggle__input"
++       id="test"
+        type="checkbox"
+      />
+      <span
+        class="components-form-toggle__track"
+      />
+`;
+
+exports[`FormToggle basic rendering should render with an additional className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,8 +1,8 @@
+  <div>
+    <span
+-     class="components-form-toggle"
++     class="components-form-toggle testing"
+    >
+      <input
+        class="components-form-toggle__input"
+        type="checkbox"
+      />
+`;