10267 add cornerstone toggle to sidebar

app/KeywordExample.js

@@ -5,6 +5,7 @@ import styled from "styled-components";
 // Internal dependencies.
 import KeywordInput from "../composites/Plugin/Shared/components/KeywordInput";
 import SynonymsSection from "../composites/Plugin/Synonyms/components/SynonymsSection";
+import CornerstoneToggle from "../composites/Plugin/CornerstoneContent/CornerstoneToggle";
 
 const Container = styled.div`
 	background-color: white;
@@ -32,6 +33,7 @@ export default class KeywordExample extends Component {
 					label={ "Keyword synonyms" }
 					onChange={ synonyms => console.log( 'SynonymsField change event', synonyms ) }
 				/>
+				<CornerstoneToggle />
 			</Container>
 		);
 	}

composites/Plugin/CornerstoneContent/components/CornerstoneToggle.js

@@ -0,0 +1,81 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Styled from "styled-components";
+import noop from "lodash/noop";
+
+import GutenbergToggle from "../../Shared/components/GutenbergToggle";
+
+const Cornerstone = Styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    label { 
+        margin-right: 10px;
+        flex-shrink: 0;
+        max-width: 75%;
+    }
+`;
+
+class CornerstoneToggle extends React.Component {
+
+	/**
+	 * The constructor.
+	 *
+	 * @param {object} props The component props.
+	 *
+	 * @returns {void}
+	 */
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			cornerstoneToggleState: this.props.checked,
+		};
+
+		this.handleChange = this.handleChange.bind( this );
+	}
+
+	/**
+	 * Handles changes on the cornerstoneToggle.
+	 *
+	 * @returns {void}
+	 */
+	handleChange() {
+		this.setState( { cornerstoneToggleState: ! this.state.cornerstoneToggleState } );
+		this.props.onChange();
+	}
+
+	/**
+	 * Renders the CornerstoneToggle component.
+	 *
+	 * @returns {ReactElement} the CornerstoneToggle component.
+	 */
+	render() {
+		return (
+			<Cornerstone>
+				<label htmlFor={this.props.key}>Cornerstone</label>
+				<GutenbergToggle
+					key={this.props.key}
+					checked={this.state.cornerstoneToggleState}
+					onChange={this.handleChange}
+					id={this.props.toggleId}
+				/>
+			</Cornerstone>
+		);
+	}
+}
+
+CornerstoneToggle.propTypes = {
+	key: PropTypes.string,
+	checked: PropTypes.bool,
+	onChange: PropTypes.func.isRequired,
+	toggleId: PropTypes.string,
+};
+
+CornerstoneToggle.defaultProps = {
+	checked: false,
+	onChange: noop,
+};
+
+export default CornerstoneToggle;

composites/Plugin/CornerstoneContent/tests/CornerstoneToggleTest.js

@@ -0,0 +1,12 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import CornerstoneToggle from "../components/CornerstoneToggle";
+
+test( "The CornerstoneToggle matches the snapshot", () => {
+	const component = renderer.create(
+		<CornerstoneToggle onChange={ () => {} } checked={ true } />
+	);
+
+	let tree = component.toJSON();
+	expect( tree ).toMatchSnapshot();
+} );

composites/Plugin/CornerstoneContent/tests/__snapshots__/CornerstoneToggleTest.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The CornerstoneToggle matches the snapshot 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 label {
+  margin-right: 10px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  max-width: 75%;
+}
+
+<div
+  className="c0"
+>
+  <label
+    htmlFor={undefined}
+  >
+    Cornerstone
+  </label>
+  <span
+    className="components-form-toggle is-checked"
+  >
+    <input
+      checked={true}
+      className="components-form-toggle__input"
+      id={undefined}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <span
+      className="components-form-toggle__track"
+    />
+    <span
+      className="components-form-toggle__thumb"
+    />
+    <svg
+      aria-hidden="true"
+      className="components-form-toggle__on"
+      focusable="false"
+      height="6"
+      role="img"
+      viewBox="0 0 2 6"
+      width="2"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 0h2v6H0z"
+      />
+    </svg>
+  </span>
+</div>
+`;

composites/Plugin/Shared/components/GutenbergToggle.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import React from "react";
+import classnames from "classnames";
+import noop from "lodash/noop";
+
+function GutenbergToggle( { className, checked, id, onChange = noop, ...props } ) {
+	const wrapperClasses = classnames(
+		'components-form-toggle',
+		className,
+		{ 'is-checked': checked },
+	);
+
+	return (
+		<span className={ wrapperClasses }>
+			<input
+				className="components-form-toggle__input"
+				id={ id }
+				type="checkbox"
+				checked={ checked }
+				onChange={ onChange }
+				{ ...props }
+				/>
+		<span className="components-form-toggle__track"></span>
+		<span className="components-form-toggle__thumb"></span>
+	{ checked ?
+	<svg className="components-form-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><path d="M0 0h2v6H0z" /></svg> : <svg className="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" /></svg>
+	}
+		</span>
+);
+}
+
+export default GutenbergToggle;

package.json

@@ -46,6 +46,7 @@
     "@wordpress/a11y": "^1.0.7",
     "@wordpress/i18n": "^1.1.0",
     "algoliasearch": "^3.22.3",
+    "classnames": "^2.2.6",
     "debug": "^3.0.0",
     "draft-js": "^0.10.5",
     "draft-js-mention-plugin": "^3.0.4",