Correct error handling behaviour for DateInput

Author: Tomdango

src/components/checkboxes/Checkboxes.tsx

@@ -80,7 +80,12 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
           hintProps={hintProps}
         />
         <CheckboxContext.Provider value={{ isCheckbox: true, name, getBoxId: this.getBoxId }}>
-          <div className={classNames('nhsuk-checkboxes', className)} id={id} {...rest}>
+          <div
+            className={classNames('nhsuk-checkboxes', className)}
+            id={id}
+            aria-describedby={hint ? `${id}--hint` : undefined}
+            {...rest}
+          >
             {children}
           </div>
         </CheckboxContext.Provider>

src/components/date-input/DateInput.tsx

@@ -11,10 +11,12 @@ import classNames from 'classnames';
 import { FormElementProps } from '../../util/types/FormTypes';
 import { generateRandomName } from '../../util/RandomName';
 import LabelBlock from '../../util/LabelBlock';
+import FormContext, { IFormContext } from '../form/FormContext';
 
 interface IDateInputContext {
   isDateInput: boolean;
   registerRef: (type: DateInputType, ref: HTMLInputElement | null) => void;
+  registerError: (type: DateInputType, error: boolean | undefined) => void;
   name: string;
   autoCompletePrefix: string | undefined;
   error?: string | boolean;
@@ -23,6 +25,7 @@ interface IDateInputContext {
 const DateInputContext = createContext<IDateInputContext>({
   isDateInput: false,
   registerRef: () => undefined,
+  registerError: () => undefined,
   name: '',
   autoCompletePrefix: '',
   error: '',
@@ -41,7 +44,7 @@ const DateInputInput: React.FC<DateInputInputProps> = ({
   autoComplete,
   ...rest
 }) => {
-  const { isDateInput, registerRef, name, autoCompletePrefix, error } = useContext<
+  const { isDateInput, registerRef, name, autoCompletePrefix, registerError, error } = useContext<
     IDateInputContext
   >(DateInputContext);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -52,6 +55,12 @@ const DateInputInput: React.FC<DateInputInputProps> = ({
     }
   }, [inputRef.current]);
 
+  useEffect(() => {
+    if (isDateInput) {
+      registerError(dateInputType, rest.error);
+    }
+  }, [rest.error]);
+
   return (
     <div className="nhsuk-date-input__item">
       <div className="nhsuk-form-group">
@@ -123,6 +132,12 @@ type DateInputValue = {
   year: string;
 };
 
+type DateInputErrors = {
+  day: boolean | undefined;
+  month: boolean | undefined;
+  year: boolean | undefined;
+};
+
 interface DateInputProps
   extends Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'value' | 'defaultValue'>,
     FormElementProps {
@@ -133,11 +148,16 @@ interface DateInputProps
   defaultValue?: DateInputValue;
 }
 
-type DateInputState = {
+export type DateInputState = {
   name: string;
   value: DateInputValue;
+  errors: DateInputErrors;
 };
 
+interface DateInput extends PureComponent<DateInputProps, DateInputState> {
+  context: IFormContext;
+}
+
 interface DateInput extends PureComponent<DateInputProps, DateInputState> {
   monthRef: HTMLInputElement | null;
   yearRef: HTMLInputElement | null;
@@ -149,11 +169,33 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
     this.state = {
       name: props.name || generateRandomName('dateinput'),
       value: { day: '', month: '', year: '' },
+      errors: { day: undefined, month: undefined, year: undefined },
     };
     this.monthRef = null;
     this.yearRef = null;
   }
 
+  componentDidUpdate() {
+    if (!this.context.isForm) return;
+    if (this.props.error !== undefined) {
+      this.context.setError(this.state.name, Boolean(this.props.error));
+    } else {
+      const { day, month, year } = this.state.errors;
+      const errorInChild = day || month || year;
+      this.context.setError(this.state.name, Boolean(errorInChild));
+    }
+  }
+
+  registerError = (type: DateInputType, error: boolean | undefined) => {
+    this.setState(state => ({
+      ...state,
+      errors: {
+        ...state.errors,
+        [type]: error,
+      },
+    }));
+  };
+
   registerRef = (type: DateInputType, ref: HTMLInputElement | null) => {
     if (ref !== null) {
       if (type === 'Month') {
@@ -166,7 +208,6 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
 
   onChange = (e: SyntheticEvent<HTMLInputElement>) => {
     e.stopPropagation();
-
     const target = e.target as HTMLInputElement;
     const { value, name } = this.state;
     if (target && target.name) {
@@ -188,6 +229,7 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
       currentTarget: { ...target, name, value },
     };
 
+    this.setState({ value });
     if (this.props.onChange) {
       this.props.onChange(newEvent);
     }
@@ -202,6 +244,8 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
     }
   };
 
+  static contextType = FormContext;
+
   static Day = DateInputDay;
 
   static Month = DateInputMonth;
@@ -227,8 +271,10 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
       ...rest
     } = this.props;
     const { name } = this.state;
+
     const contextValue = {
       isDateInput: true,
+      registerError: this.registerError,
       registerRef: this.registerRef,
       name,
       autoCompletePrefix,

src/components/header/components/NHSLogo.tsx

@@ -27,12 +27,12 @@ const NHSLogo: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, alt, ...re
           aria-labelledby="nhsuk-logo_title"
         >
           <title id="nhsuk-logo_title">{alt}</title>
-          <path className="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
+          <path className="nhsuk-logo__background" d="M0 0h40v16H0z" />
           <path
             className="nhsuk-logo__text"
             d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"
-          ></path>
-          <img src="https://assets.nhs.uk/images/nhs-logo.png" alt={alt}/>
+          />
+          <img src="https://assets.nhs.uk/images/nhs-logo.png" alt={alt} />
         </svg>
         {serviceName ? <span className="nhsuk-header__service-name">{serviceName}</span> : null}
       </a>
@@ -42,7 +42,7 @@ const NHSLogo: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, alt, ...re
 
 NHSLogo.defaultProps = {
   'aria-label': 'NHS homepage',
-  'alt': 'NHS Logo',
+  alt: 'NHS Logo',
 };
 
 export default NHSLogo;