Implement input field component for keyword

App.js

@@ -12,6 +12,7 @@ import SnippetEditor from "./app/SnippetEditorExample";
 // Required to make Material UI work with touch screens.
 import injectTapEventPlugin from "react-tap-event-plugin";
 import Checkbox from "./composites/Plugin/Shared/components/Checkbox";
+import KeywordInput from "./composites/Plugin/Shared/components/KeywordInput";
 
 const components = [
 	{
@@ -62,6 +63,14 @@ const components = [
 			onChange={ event => console.log( event ) }
 		/>,
 	},
+	{
+		id: "focus-keyword",
+		name: "Keyword",
+		component: <KeywordInput
+			id="focus-keyword"
+			label={ "Focus keyword"}
+		/>,
+	},
 	{
 		id: "sidebar-collapsible",
 		name: "Sidebar Collapsible",

composites/Plugin/Shared/components/KeywordInput.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
+import colors from "../../../../style-guide/colors.json";
+import PropTypes from "prop-types";
+
+let KeywordField = styled.input`
+	margin-right: 0.5em;
+	border-color: ${ props => props.borderColor };
+`;
+
+const ErrorText = styled.div`
+	font-size: 1em;
+	color: ${ colors.$color_red};
+	margin: 1em 0;
+	min-height: 1.8em;
+`;
+
+class KeywordInput extends React.Component {
+	/**
+	 * Constructs a KeywordInput component
+	 *
+	 * @param {Object} props The props for this input field component.
+	 *
+	 * @returns {void}
+	 */
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			showErrorMessage: false,
+			keyword: props.keyword,
+		};
+	}
+
+	/**
+	 * Checks the keyword input for comma-separated words
+	 *
+	 * @param {String} keywordText The text of the input
+	 *
+	 * @returns {void}
+	 */
+	checkKeywordInput( keywordText ) {
+		let separatedWords = keywordText.split( "," );
+		if ( separatedWords.length > 1 ) {
+			this.setState( { showErrorMessage: true } );
+		} else {
+			this.setState( { showErrorMessage: false } );
+		}
+	}
+
+	/**
+	 * Displays the error message
+	 *
+	 * @param {String} input 		 The text of the input
+	 *
+	 * @returns {Element} ErrorText  The error message element
+	 */
+	displayErrorMessage( input = "" ) {
+		if ( this.state.showErrorMessage && input !== "" ) {
+			return (
+				<ErrorText>
+					<FormattedMessage
+						id="KeywordError"
+						defaultMessage= "Are you trying to use multiple keywords? You should add them separately below."
+						role="alert"
+					/>
+				</ErrorText>
+			);
+		}
+		return (
+			<ErrorText />
+		);
+	}
+
+	/**
+	 * Handles changes in the KeywordInput.
+	 *
+	 * @param {Event} event The onChange event.
+	 *
+	 * @returns {void} Calls the checkKeywordInput-function.
+	 */
+	handleChange( event ) {
+		this.setState( { keyword: event.target.value } );
+		this.checkKeywordInput( event.target.value );
+	}
+
+	/**
+	 * Renders an input field, a label, and if the condition is met, an error message.
+	 *
+	 * @returns {ReactElement} The KeywordField react component including its label and eventual error message.
+	 */
+	render() {
+		let color = this.state.showErrorMessage ? "red" : "white";
+		KeywordField[ "border-color" ] = color;
+		return(
+			<React.Fragment>
+				<label htmlFor={ this.props.id }>
+					{ this.props.label }
+				</label>
+				<KeywordField type="text" id={ this.props.id }
+							  onChange={ this.handleChange.bind( this ) }
+							  borderColor={ color }
+				/>
+				{ this.displayErrorMessage( this.state.keyword ) }
+			</React.Fragment>
+		);
+	}
+}
+
+KeywordInput.propTypes = {
+	id: PropTypes.string.isRequired,
+	onChange: PropTypes.func,
+	label: PropTypes.oneOfType( [
+		PropTypes.string,
+		PropTypes.array,
+	] ).isRequired,
+	keyword: PropTypes.string,
+};
+
+KeywordInput.defaultProps = {
+	keyword: "",
+};
+
+export default KeywordInput;
+

composites/Plugin/Shared/tests/KeywordInputTest.js

@@ -0,0 +1,56 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import { mountWithIntl } from "enzyme-react-intl";
+
+import KeywordInput from "../components/KeywordInput";
+
+describe( KeywordInput, () => {
+	it( "matches the snapshot by default", () => {
+		const component = renderer.create(
+			<KeywordInput id="test-id" onChange={ () => {
+			} } label="test label"/>
+		);
+
+		let tree = component.toJSON();
+		expect( tree ).toMatchSnapshot();
+	} );
+
+	it( "does not display the error message for a single keyword", () => {
+		const wrapper = mountWithIntl(
+			<KeywordInput id="test-id" label="test label" />
+		);
+		wrapper.find( "input" ).simulate( "change", {
+			target: {
+				value: "Keyword1",
+			},
+		} );
+		expect( wrapper.state().showErrorMessage ).toEqual( false );
+		expect( wrapper.find( "div" ).text() ).toBeFalsy();
+	} );
+
+	it( "does not display the error message for two words separated by whitespace", () => {
+		const wrapper = mountWithIntl(
+			<KeywordInput id="test-id" label="test label" />
+		);
+		wrapper.find( "input" ).simulate( "change", {
+			target: {
+				value: "Keyword1 Keyword2",
+			},
+		} );
+		expect( wrapper.state().showErrorMessage ).toEqual( false );
+		expect( wrapper.find( "div" ).text() ).toBeFalsy();
+	} );
+
+	it( "displays the error message for comma-separated words", () => {
+		const wrapper = mountWithIntl(
+			<KeywordInput id="test-id" label="test label" />
+		);
+		wrapper.find( "input" ).simulate( "change", {
+			target: {
+				value: "Keyword1, Keyword2",
+			},
+		} );
+		expect( wrapper.state().showErrorMessage ).toEqual( true );
+		expect( wrapper.find( "div" ).text() ).toBeTruthy();
+	} );
+} );

composites/Plugin/Shared/tests/__snapshots__/KeywordInputTest.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KeywordInput matches the snapshot by default 1`] = `
+Array [
+  <label
+    htmlFor="test-id"
+  >
+    test label
+  </label>,
+  .c0 {
+  margin-right: 0.5em;
+  border-color: white;
+}
+
+<input
+    className="c0"
+    id="test-id"
+    onChange={[Function]}
+    type="text"
+  />,
+  .c0 {
+  font-size: 1em;
+  color: #dc3232;
+  margin: 1em 0;
+  min-height: 1.8em;
+}
+
+<div
+    className="c0"
+  />,
+]
+`;

package.json

@@ -80,6 +80,7 @@
     "concurrently": "^3.5.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-react-intl": "^2.0.0",
     "enzyme-to-json": "^3.3.3",
     "eslint": "^4.16.0",
     "eslint-config-yoast": "^3.0.1",