Components: Add mirror prop support to CheckboxControl

WordPress · Mar 12, 2019 · 9297f8d · 9297f8d
1 parent fc978e5
commit 9297f8d
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 14 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 7.2.0 (Unreleased)
+
+### New Features
+
+- The `<CheckboxControl>` component now accepts an optional `mirror` prop.
+
 ## 7.1.0 (2019-03-06)
 
 ### New Features

diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
@@ -66,3 +66,12 @@ A function that receives the checked state (boolean) as input.
 
 - Type: `function`
 - Required: Yes
+
+### mirror
+
+Optional boolean value to reverse the order of the label, input pair. By default, the checkbox is shown first.
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -8,25 +13,52 @@ import { withInstanceId } from '@wordpress/compose';
  */
 import BaseControl from '../base-control';
 
-function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
+function CheckboxControl( {
+	label,
+	className,
+	heading,
+	checked,
+	help,
+	instanceId,
+	onChange,
+	mirror,
+	...props
+} ) {
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
+	className = classnames( className, {
+		'is-mirrored': mirror,
+	} );
+
+	const children = [
+		<input
+			key="input"
+			id={ id }
+			className="components-checkbox-control__input"
+			type="checkbox"
+			value="1"
+			onChange={ onChangeValue }
+			checked={ checked }
+			aria-describedby={ !! help ? id + '__help' : undefined }
+			{ ...props }
+		/>,
+		<label
+			key="label"
+			className="components-checkbox-control__label"
+			htmlFor={ id }
+		>
+			{ label }
+		</label>,
+	];
+
+	if ( mirror ) {
+		children.reverse();
+	}
+
 	return (
 		<BaseControl label={ heading } id={ id } help={ help } className={ className }>
-			<input
-				id={ id }
-				className="components-checkbox-control__input"
-				type="checkbox"
-				value="1"
-				onChange={ onChangeValue }
-				checked={ checked }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-				{ ...props }
-			/>
-			<label className="components-checkbox-control__label" htmlFor={ id }>
-				{ label }
-			</label>
+			{ children }
 		</BaseControl>
 	);
 }