Merge pull request #15 from NHSDigital/form-disable-error-state

Added story to show disableErrorFromComponents on form

Author: Tomdango

stories/Input.stories.tsx

@@ -1,11 +1,75 @@
 /* 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);
 
+interface Props {
+  disableErrorFromComponents?: boolean;
+}
+
+const ExampleForm: FunctionComponent<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>('');
+
+  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);
+  };
+
+  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"
+        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)
   .add('Standard', () => (
@@ -59,58 +123,9 @@ stories
       National Insurance Number
     </Input>
   ))
-  .add('Multiple Error States', () => {
-    const [firstName, setFirstName] = useState<string>('');
-    const [lastName, setLastName] = useState<string>('');
-    const [firstNameError, setFirstNameError] = useState<string>('');
-    const [lastNameError, setLastNameError] = useState<string>('');
-
-    const onSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
-      e.preventDefault();
-
-      if (firstNameError) {
-        setFirstNameError('');
-        setLastNameError('');
-      } else {
-        setFirstNameError('Error');
-        setLastNameError('Error');
-      }
-    };
-
-    return (
-      <Form onSubmit={onSubmit}>
-        <Input
-          id="FirstnameX"
-          style={{ marginBottom: 10 }}
-          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>
-        <Input
-          style={{ marginBottom: 10 }}
-          autoFocus
-          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 type="submit">Submit</Button>
-      </Form>
-    );
-  });
+  .add('Multiple Error States', () => (
+    <ExampleForm />
+  ))
+  .add('Form Error State Disabled', () => (
+    <ExampleForm disableErrorFromComponents />
+  ));