@wordpress/components 19.11.0 → 19.14.0

package/src/focal-point-picker/media.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,8 @@ import { useRef, useLayoutEffect } from '@wordpress/element';
 import { MediaPlaceholder } from './styles/focal-point-picker-style';
 import { isVideoType } from './utils';
 
+const noop = () => {};
+
 export default function Media( {
 	alt,
 	autoPlay,

package/src/font-size-picker/index.js

@@ -103,9 +103,11 @@ function FontSizePicker(
 		return hint;
 	}, [
 		showCustomValueControl,
-		selectedOption?.slug,
+		selectedOption?.name,
+		selectedOption?.size,
 		value,
 		isCustomValue,
+		shouldUseSelectControl,
 		fontSizesContainComplexValues,
 	] );
 

package/src/form-toggle/README.md

@@ -60,10 +60,12 @@ 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 ) }
+		/>
+	);
 };
 ```
 
@@ -71,26 +73,23 @@ const MyFormToggle = () => {
 
 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

package/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;

package/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 = {};

package/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"
+      />
+`;

package/src/form-toggle/test/index.tsx

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormToggle, { noop } from '..';
+import type { FormToggleProps } from '../types';
+
+const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
+
+const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {
+	const [ isChecked, setChecked ] = useState( false );
+	return (
+		<FormToggle
+			checked={ isChecked }
+			onChange={ ( value ) => {
+				setChecked( ( state ) => ! state );
+				onChange( value );
+			} }
+		/>
+	);
+};
+
+describe( 'FormToggle', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render a span element with an unchecked checkbox', () => {
+			const { container } = render( <FormToggle onChange={ noop } /> );
+
+			expect( getInput() ).not.toBeChecked();
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
+
+		it( 'should render a checked checkbox when providing checked prop', () => {
+			render( <FormToggle onChange={ noop } checked /> );
+
+			expect( getInput() ).toBeChecked();
+		} );
+
+		it( 'should render with an additional className', () => {
+			const { container: containerDefault } = render(
+				<FormToggle onChange={ noop } />
+			);
+
+			const { container: containerWithClassName } = render(
+				<FormToggle onChange={ noop } className="testing" />
+			);
+
+			// Expect the diff snapshot to be mostly about the className.
+			expect( containerDefault ).toMatchDiffSnapshot(
+				containerWithClassName
+			);
+		} );
+
+		it( 'should render an id prop for the input checkbox', () => {
+			const { container: containerDefault } = render(
+				<FormToggle onChange={ noop } />
+			);
+
+			const { container: containerWithID } = render(
+				// Disabled because of our rule restricting literal IDs, preferring
+				// `withInstanceId`. In this case, it's fine to use literal IDs.
+				// eslint-disable-next-line no-restricted-syntax
+				<FormToggle onChange={ noop } id="test" />
+			);
+
+			// Expect the diff snapshot to be mostly about the ID.
+			expect( containerDefault ).toMatchDiffSnapshot( containerWithID );
+		} );
+	} );
+
+	describe( 'Value', () => {
+		it( 'should flip the checked property when clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const onChange = jest.fn();
+			render( <ControlledFormToggle onChange={ onChange } /> );
+
+			const input = getInput();
+
+			await user.click( input );
+			expect( onChange.mock.calls[ 0 ][ 0 ].target ).toBeInTheDocument();
+			expect( input ).toBeChecked();
+
+			await user.click( input );
+			expect( onChange.mock.calls[ 1 ][ 0 ].target ).toBeInTheDocument();
+			expect( input ).not.toBeChecked();
+
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+} );

package/src/form-toggle/types.ts

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
+export type FormToggleProps = {
+	/**
+	 * 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.
+	 */
+	checked?: boolean;
+	/**
+	 * If disabled is true the toggle will be disabled and apply the appropriate
+	 * styles.
+	 */
+	disabled?: boolean;
+	/**
+	 * A callback function invoked when the toggle is clicked.
+	 */
+	onChange: ( event: ChangeEvent< HTMLInputElement > ) => void;
+};