Addressed review feedback

Author: Luke Pearson

stories/Input.stories.tsx

@@ -1,78 +1,74 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useState, SyntheticEvent } from 'react';
+import React, { useState, SyntheticEvent, FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import centered from '@storybook/addon-centered';
 import { Input, Form, Button } from '../src';
 
 const stories = storiesOf('Input', module);
 
-const form = (disableErrorFromComponents: boolean) => (
-  () => {
-    const [firstName, setFirstName] = useState<string>('');
-    const [middleName, setMiddleName] = useState<string>('');
-    const [lastName, setLastName] = useState<string>('');
-    const [firstNameError, setFirstNameError] = useState<string>('');
-    const [middleNameError, setMiddleNameError] = useState<string>('');
-    const [lastNameError, setLastNameError] = useState<string>('');
+interface Props {
+  disableErrorFromComponents?: boolean;
+}
 
-    const onSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      setFirstNameError(firstName.length === 0 ? 'You must enter a first name' : null);
-      setMiddleNameError(middleName.length === 0 ? 'You must enter a middle name' : null);
-      setLastNameError(lastName.length === 0 ? 'You must enter a last name' : null);
-    };
+const ExampleForm: FunctionComponent<Props> = (props: Props) => {
+  const { disableErrorFromComponents } = props;
+  const [firstName, setFirstName] = useState<string>('');
+  const [middleName, setMiddleName] = useState<string>('');
+  const [lastName, setLastName] = useState<string>('');
+  const [firstNameError, setFirstNameError] = useState<string>('');
+  const [middleNameError, setMiddleNameError] = useState<string>('');
+  const [lastNameError, setLastNameError] = useState<string>('');
 
-    return (
-      <Form onSubmit={onSubmit} disableErrorFromComponents={disableErrorFromComponents}>
-        <Input
-          className="nhsuk-u-margin-bottom-3"
-          autoFocus
-          name="first_name"
-          type="string"
-          aria-label="First name input"
-          value={firstName || ''}
-          onChange={e => setFirstName(e.currentTarget.value)}
-          error={firstNameError}
-          autoComplete={process.env.NODE_ENV === 'development' ? '' : undefined}
-          width="10"
-        >
-          First Name
-        </Input>
+  const onSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setFirstNameError(firstName.length === 0 ? 'You must enter a first name' : null);
+    setMiddleNameError(middleName.length === 0 ? 'You must enter a middle name' : null);
+    setLastNameError(lastName.length === 0 ? 'You must enter a last name' : null);
+  };
 
-        <Input
-          className="nhsuk-u-margin-bottom-3"
-          label="middle name"
-          name="middle_name"
-          type="string"
-          aria-label="middle name input"
-          value={middleName || ''}
-          onChange={e => setMiddleName(e.currentTarget.value)}
-          error={middleNameError}
-          autoComplete={process.env.NODE_ENV === 'development' ? '' : undefined}
-          width="10"
-        >
-          Middle name
-        </Input>
+  return (
+    <Form onSubmit={onSubmit} disableErrorFromComponents={disableErrorFromComponents}>
+      <Input
+        className="nhsuk-u-margin-bottom-3"
+        type="text"
+        aria-label="First name input"
+        value={firstName}
+        onChange={e => setFirstName(e.currentTarget.value)}
+        error={firstNameError}
+        width="10"
+      >
+        First Name
+      </Input>
+
+      <Input
+        className="nhsuk-u-margin-bottom-3"
+        label="middle name"
+        type="text"
+        aria-label="middle name input"
+        value={middleName}
+        onChange={e => setMiddleName(e.currentTarget.value)}
+        error={middleNameError}
+        width="10"
+      >
+        Middle name
+      </Input>
 
-        <Input
-          className="nhsuk-u-margin-bottom-3"
-          label="Last name"
-          name="last_name"
-          type="string"
-          aria-label="Last name input"
-          value={lastName || ''}
-          onChange={e => setLastName(e.currentTarget.value)}
-          error={lastNameError}
-          autoComplete={process.env.NODE_ENV === 'development' ? '' : undefined}
-          width="10"
-        >
-          Last name
-        </Input>
-        <Button style={{ display: 'block' }} type="submit">Submit</Button>
-      </Form>
-    );
-  }
-);
+      <Input
+        className="nhsuk-u-margin-bottom-3"
+        label="Last name"
+        type="text"
+        aria-label="Last name input"
+        value={lastName}
+        onChange={e => setLastName(e.currentTarget.value)}
+        error={lastNameError}
+        width="10"
+      >
+        Last name
+      </Input>
+      <Button style={{ display: 'block' }} type="submit">Submit</Button>
+    </Form>
+  );
+};
 
 stories
   .addDecorator(centered)
@@ -127,5 +123,9 @@ stories
       National Insurance Number
     </Input>
   ))
-  .add('Multiple Error States', form(false))
-  .add('Form Error State Disabled', form(true));
+  .add('Multiple Error States', () => (
+    <ExampleForm />
+  ))
+  .add('Form Error State Disabled', () => (
+    <ExampleForm disableErrorFromComponents />
+  ));