Adding Form component

src/components/App/__snapshots__/test.js.snap

@@ -1,11 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Message rendering 1`] = `
-<Message
+<React.Fragment>
+  <Translate(Form)
+    downloadUrls={
+      Array [
+        Object {
+          "filename": "image.svg",
+          "label": "Download SVG",
+          "type": "image/svg+xml",
+          "url": "#svg",
+        },
+        Object {
+          "filename": "image.png",
+          "label": "Download PNG",
+          "type": "image/png",
+          "url": "#png",
+        },
+      ]
+    }
+    onSubmit={[Function]}
+    permalinkUrl="#permalink"
+    syntaxes={
+      Object {
+        "js": "JavaScript",
+        "pcre": "PCRE",
+      }
+    }
+  />
+  <Message
     heading="React App"
->
+  >
     <p>
       Placeholder app content
     </p>
-</Message>
+  </Message>
+</React.Fragment>
 `;

src/components/App/index.js

@@ -1,11 +1,29 @@
 import React from 'react';
 
+import Form from 'components/Form';
 import Message from 'components/Message';
 
-const App = () => (
+const syntaxes = {
+  js: 'JavaScript',
+  pcre: 'PCRE'
+};
+
+const downloadUrls = [
+  { url: '#svg', filename: 'image.svg', type: 'image/svg+xml', label: 'Download SVG' },
+  { url: '#png', filename: 'image.png', type: 'image/png', label: 'Download PNG' }
+];
+
+const handleSubmit = ({ expr, syntax}) => console.log(syntax, expr); // eslint-disable-line no-console
+
+const App = () => <React.Fragment>
+  <Form
+    syntaxes={ syntaxes }
+    downloadUrls={ downloadUrls }
+    permalinkUrl="#permalink"
+    onSubmit={ handleSubmit }/>
   <Message heading="React App">
     <p>Placeholder app content</p>
   </Message>
-);
+</React.Fragment>;
 
 export default App;

src/components/Form/__snapshots__/test.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form rendering 1`] = `
+<div
+  className="form"
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <textarea
+      autoFocus={true}
+      onKeyPress={[Function]}
+      placeholder="translate(Enter regular expression to display)"
+    />
+    <button
+      type="submit"
+    >
+      <Trans>
+        Display
+      </Trans>
+    </button>
+    <div
+      className="select"
+    >
+      <select>
+        <option
+          key="js"
+          value="js"
+        >
+          Javascript
+        </option>
+        <option
+          key="pcre"
+          value="pcre"
+        >
+          PCRE
+        </option>
+      </select>
+      <SvgMock />
+    </div>
+    <ul
+      className="inline with-separator actions"
+    />
+  </form>
+</div>
+`;

src/components/Form/index.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate, Trans } from 'react-i18next';
+
+import DownloadIcon from 'feather-icons/dist/icons/download.svg';
+import LinkIcon from 'feather-icons/dist/icons/link.svg';
+import ExpandIcon from 'feather-icons/dist/icons/chevrons-down.svg';
+
+import style from './style.css';
+
+class Form extends React.Component {
+  handleSubmit = event => {
+    event.preventDefault();
+    this.props.onSubmit.call(this, {
+      expr: this.textarea.value,
+      syntax: this.syntax.value
+    });
+  }
+
+  handleKeyPress = event => {
+    if (event.charCode === 13 && event.shiftKey) {
+      this.handleSubmit(event);
+    }
+  }
+
+  textareaRef = textarea => this.textarea = textarea
+
+  syntaxRef = syntax => this.syntax = syntax
+
+  permalinkAction() {
+    const { permalinkUrl } = this.props;
+
+    if (!permalinkUrl) {
+      return;
+    }
+
+    return <li>
+      <a href={ permalinkUrl }><LinkIcon/><Trans>Permalink</Trans></a>
+    </li>;
+  }
+
+  downloadActions() {
+    const { downloadUrls } = this.props;
+
+    if (!downloadUrls) {
+      return;
+    }
+
+    return downloadUrls.map(({ url, filename, type, label }, i) => <li key={ i }>
+      <a href={ url } download={ filename } type={ type }>
+        <DownloadIcon/>{ label }
+      </a>
+    </li>);
+  }
+
+  render() {
+    const { syntaxes, t } = this.props;
+
+    return <div className={ style.form }>
+      <form onSubmit={ this.handleSubmit }>
+        <textarea
+          ref={ this.textareaRef }
+          onKeyPress={ this.handleKeyPress }
+          autoFocus
+          placeholder={ t('Enter regular expression to display') }></textarea>
+        <button type="submit"><Trans>Display</Trans></button>
+        <div className={ style.select }>
+          <select ref={ this.syntaxRef }>
+            { Object.keys(syntaxes).map(id => (
+              <option value={ id } key={ id }>{ syntaxes[id] }</option>
+            )) }
+          </select>
+          <ExpandIcon/>
+        </div>
+        <ul className={ ['inline', 'with-separator', style.actions].join(' ') }>
+          { this.downloadActions() }
+          { this.permalinkAction() }
+        </ul>
+      </form>
+
+    </div>;
+  }
+}
+
+Form.propTypes = {
+  syntaxes: PropTypes.object,
+  onSubmit: PropTypes.func,
+  permalinkUrl: PropTypes.string,
+  downloadUrls: PropTypes.array,
+  t: PropTypes.func
+};
+
+export default translate()(Form);
+export { Form };

src/components/Form/style.css

@@ -0,0 +1,75 @@
+@import url('../../globals.css');
+
+:root {
+  --control-gradient: var(--color-green) var(--gradient-green);
+  --select-height: 2.8rem;
+  --select-width: 12rem;
+}
+
+.form {
+  margin: var(--spacing-margin) 0;
+
+  & textarea {
+    display: block;
+    font-size: inherit;
+    line-height: 1.5em;
+    border: 0 none;
+    outline: none;
+    background: var(--color-tan);
+    padding: 0 1rem;
+    margin-bottom: var(--spacing-margin);
+    width: 100% !important; /* "!important" to prevent user changing width */
+    box-sizing: border-box;
+    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+  }
+
+  & textarea::placeholder {
+    color: var(--color-brown);
+  }
+
+  & button {
+    font-size: inherit;
+    font-weight: bold;
+    line-height: 2.8rem;
+    width: 10rem;
+    border: 0 none;
+    background: var(--control-gradient);
+    cursor: pointer;
+    padding: 0;
+    margin-right: 1rem;
+  }
+}
+
+.actions {
+  float: right;
+
+  & svg {
+    height: 1em;
+    vertical-align: middle;
+  }
+}
+
+.select {
+  position: relative;
+  vertical-align: bottom;
+  display: inline-block;
+  height: var(--select-height);
+  width: var(--select-width);
+  background: var(--control-gradient);
+  overflow: hidden;
+
+  & select {
+    background: transparent;
+    border: 0 none;
+    font-size: inherit;
+    height: var(--select-height);
+    width: calc(var(--select-width) + 2rem);
+  }
+
+  & svg {
+    position: absolute;
+    top: calc((var(--select-height) - 24px) / 2);
+    right: 0;
+    pointer-events: none;
+  }
+}

src/components/Form/test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Form } from 'components/Form';
+import translate from '__mocks__/translate';
+
+const syntaxes = {
+  js: 'Javascript',
+  pcre: 'PCRE'
+};
+
+describe('Form', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <Form t={ translate } syntaxes={ syntaxes }/>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with download URLs');
+
+  test('rendering with permalink URL');
+
+  test('submitting form');
+
+  test('submitting form with Shift+Enter');
+});

src/locales/en/translation.yaml

@@ -1,7 +1,10 @@
 404 Page Not Found: "404: Page Not Found"
 An error has occurred: An error has occurred
 Created by <1>Jeff Avallone</1>: Created by <1>Jeff Avallone</1>
+Display: Display
+Enter regular expression to display: Enter regular expression to display
 Generated images licensed: "Generated images licensed: <1><0></0></1>"
+Permalink: Permalink
 Source on GitHub: Source on GitHub
 The page you have requested could not be found: The page you have requested could not be found
 This error has been logged: This error has been logged. You may also <1>fill out a report</1>.