Implement help text in react snippet editor

composites/Plugin/Shared/components/HelpText.js

@@ -0,0 +1,47 @@
+/* External dependencies */
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const YoastHelpText = styled.p`
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 13px;
+`;
+
+/**
+ * Returns the HelpText component.
+ *
+ * @param {Object} props Component props.
+ *
+ * @returns {ReactElement} HelpText component.
+ */
+export default class HelpText extends React.Component {
+ /**
+ * Renders a help text component.
+ *
+ * @returns {ReactElement} The rendered help text component.
+ */
+ render() {
+ const { text } = this.props;
+
+ return (
+ <YoastHelpText>
+ { text }
+ </YoastHelpText>
+ );
+ }
+}
+
+/**
+ * React prop type for the help text.
+ *
+ * Use this in your components to pass along the text.
+ */
+export const HelpTextPropType = PropTypes.oneOfType( [
+ PropTypes.string,
+ PropTypes.array,
+] );
+
+HelpText.propTypes = {
+ text: HelpTextPropType.isRequired,
+};

composites/Plugin/Shared/tests/HelpTextTest.js

@@ -0,0 +1,26 @@
+/* External dependencies */
+import React from "react";
+import renderer from "react-test-renderer";
+
+/* Internal dependencies */
+import HelpText from "../components/HelpText";
+
+describe( "HelpText", () => {
+ it( "matches the snapshot by default", () => {
+ const component = renderer.create(
+ <HelpText text="Some help text." />
+ );
+
+ let tree = component.toJSON();
+ expect( tree ).toMatchSnapshot();
+ } );
+
+ it( "matches the snapshot when an array is provided as text", () => {
+ const component = renderer.create(
+ <HelpText text={ [ "Text ", "<a href=\"https://www.example.com\">with a link</a>", " in the middle." ] } />
+ );
+
+ let tree = component.toJSON();
+ expect( tree ).toMatchSnapshot();
+ } );
+} );

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelpText matches the snapshot by default 1`] = `
+.c0 {
+ font-family: Arial,Helvetica,sans-serif;
+ font-size: 13px;
+}
+
+<p
+ className="c0"
+>
+ Some help text.
+</p>
+`;
+
+exports[`HelpText matches the snapshot when an array is provided as text 1`] = `
+.c0 {
+ font-family: Arial,Helvetica,sans-serif;
+ font-size: 13px;
+}
+
+<p
+ className="c0"
+>
+ Text 
+ &lt;a href="https://www.example.com"&gt;with a link&lt;/a&gt;
+ in the middle.
+</p>
+`;