Uplift MaskedInput to use FormGroup

Author: Tomdango

package.json

@@ -47,7 +47,7 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "jest": "^24.9.0",
     "nhsuk-frontend": "^3.0.2",
-    "nhsuk-react-components": "^1.0.1",
+    "nhsuk-react-components": "^1.1.4-test.1",
     "node-sass": "^4.12.0",
     "node-sass-tilde-importer": "^1.0.2",
     "prettier": "^1.18.2",
@@ -67,7 +67,7 @@
     "typescript": "^3.6.3"
   },
   "peerDependencies": {
-    "nhsuk-react-components": "^1.0.1",
+    "nhsuk-react-components": "^1.1.4-test.1",
     "react": "^16.9.3",
     "react-dom": "^16.9.3"
   },

src/components/masked-input/MaskedInput.tsx

@@ -1,71 +1,42 @@
-import React, { HTMLProps, useState, useEffect, RefObject } from 'react';
-import { useFormContext, Label, ErrorMessage, Hint } from 'nhsuk-react-components';
+import React, { HTMLProps } from 'react';
+import FormGroup from 'nhsuk-react-components/lib/util/FormGroup';
+import { FormElementProps } from 'nhsuk-react-components/lib/util/types/FormTypes';
+import { InputWidth } from 'nhsuk-react-components/lib/util/types/NHSUKTypes';
 import InputMask, { ReactInputMask } from 'react-input-mask';
 import classNames from 'classnames';
 
-type MaskedInputProps = HTMLProps<HTMLInputElement> & {
-  labelProps?: HTMLProps<HTMLLabelElement>;
-  hint?: string;
-  error?: boolean | string;
-  width?: '2' | '3' | '4' | '5' | '10';
-  mask: string;
-  maskChar?: string;
-  formatChars?: { [character: string]: string };
-  alwaysShowMask?: boolean;
-  inputRef?: (instance: HTMLInputElement | null) => any;
-  ref?: string | ((instance: ReactInputMask | null) => void) | RefObject<ReactInputMask> | null;
-};
-
-const MaskedInput: React.FC<MaskedInputProps> = ({
-  className,
-  children,
-  id,
-  labelProps,
-  hint,
-  width,
-  error,
-  ...rest
-}) => {
-  const { isForm, setError } = useFormContext();
-  const [name] = useState<string>(
-    rest.name || `masked-input_${(Math.random() + 1).toString(36).substring(2, 7)}`,
-  );
+type InputMaskRef =
+  | string
+  | ((instance: ReactInputMask | null) => void)
+  | React.RefObject<ReactInputMask>
+  | null;
 
-  useEffect(() => {
-    if (isForm) {
-      setError(name, Boolean(error));
-    }
-  }, [error, name, isForm]);
+type MaskedInputProps = HTMLProps<HTMLInputElement> &
+  FormElementProps & {
+    width?: InputWidth;
+    mask: string;
+    maskChar?: string;
+    formatChars?: { [character: string]: string };
+    alwaysShowMask?: boolean;
+    inputRef?: (instance: HTMLInputElement | null) => any;
+    ref?: InputMaskRef;
+  };
 
-  return (
-    <>
-      {children ? (
-        <Label
-          className={labelProps ? labelProps.className : undefined}
-          htmlFor={id}
-          id={id ? `${id}-label` : undefined}
-        >
-          {children}
-        </Label>
-      ) : null}
-      {hint ? <Hint id={id ? `${id}-hint` : undefined}>{hint}</Hint> : null}
-      {error && typeof error === 'string' ? (
-        <ErrorMessage id={id ? `${id}-error` : undefined}>{error}</ErrorMessage>
-      ) : null}
+const MaskedInput: React.FC<MaskedInputProps> = props => (
+  <FormGroup<MaskedInputProps> inputType="input" {...props}>
+    {({ className, width, error, ref, ...rest }) => (
       <InputMask
         className={classNames(
           'nhsuk-input',
           { [`nhsuk-input--width-${width}`]: width },
           { 'nhsuk-input--error': error },
           className,
         )}
-        id={id}
-        aria-describedby={children && id ? `${id}-label` : undefined}
         {...rest}
       />
-    </>
-  );
-};
+    )}
+  </FormGroup>
+);
 
 MaskedInput.defaultProps = {
   type: 'text',

src/components/masked-input/__tests__/MaskedInput.test.tsx

@@ -4,7 +4,7 @@ import MaskedInput from '../MaskedInput';
 
 describe('MaskedInput', () => {
   it('matches snapshot', () => {
-    const component = mount(<MaskedInput mask="999 999 9999">NHS Number</MaskedInput>);
+    const component = mount(<MaskedInput mask="999 999 9999" label="NHS Number" />);
     expect(component).toMatchSnapshot();
     expect(component.text()).toBe('NHS Number');
     component.unmount();

src/components/masked-input/__tests__/__snapshots__/MaskedInput.test.tsx.snap

@@ -2,32 +2,58 @@
 
 exports[`MaskedInput matches snapshot 1`] = `
 <MaskedInput
+  label="NHS Number"
   mask="999 999 9999"
   type="text"
 >
-  <Label>
-    <BaseLabel>
-      <label
-        className="nhsuk-label"
-      >
-        NHS Number
-      </label>
-    </BaseLabel>
-  </Label>
-  <InputElement
-    className="nhsuk-input"
+  <FormGroup
+    inputType="input"
+    label="NHS Number"
     mask="999 999 9999"
     type="text"
   >
-    <input
-      className="nhsuk-input"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onPaste={[Function]}
-      type="text"
-    />
-  </InputElement>
+    <div
+      className="nhsuk-form-group"
+    >
+      <Label
+        htmlFor="input_x82ib"
+        id="input_x82ib--label"
+      >
+        <BaseLabel
+          htmlFor="input_x82ib"
+          id="input_x82ib--label"
+        >
+          <label
+            className="nhsuk-label"
+            htmlFor="input_x82ib"
+            id="input_x82ib--label"
+          >
+            NHS Number
+          </label>
+        </BaseLabel>
+      </Label>
+      <InputElement
+        aria-labelledby="input_x82ib--label"
+        className="nhsuk-input"
+        id="input_x82ib"
+        mask="999 999 9999"
+        name="input_x82ib"
+        type="text"
+      >
+        <input
+          aria-labelledby="input_x82ib--label"
+          className="nhsuk-input"
+          id="input_x82ib"
+          name="input_x82ib"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onPaste={[Function]}
+          type="text"
+        />
+      </InputElement>
+    </div>
+  </FormGroup>
 </MaskedInput>
 `;

stories/MaskedInput.stories.tsx

@@ -11,6 +11,7 @@ stories
       <MaskedInput
         name="ni-number"
         hint="It's on your National Insurance card, benefit letter, payslip or P60. For example, QQ 12 34 56 C"
+        label="National Insurance Number"
         width="10"
         mask="AA 99 99 99 A"
         formatChars={{
@@ -19,23 +20,20 @@ stories
         }}
         maskChar=""
         alwaysShowMask={false}
-      >
-        National Insurance Number
-      </MaskedInput>
+      />
     </div>
   ))
   .add('NHS Number Mask', () => (
     <div className="masked-input-demo">
       <MaskedInput
         name="ni-number"
         hint="Your 10 Digit NHS Number"
+        label="NHS Number"
         width="10"
         mask="999 999 9999"
         maskChar=""
         autoComplete="off"
         alwaysShowMask={false}
-      >
-        NHS Number
-      </MaskedInput>
+      />
     </div>
   ));