Merge pull request #30 from NHSDigital/fix/remove-wrapper-from-form

Allow passing formGroupProps and remove wrapper classes

Author: Luke Pearson

src/components/form/Form.tsx

@@ -1,14 +1,13 @@
 import React, { HTMLProps } from 'react';
-import classNames from 'classnames';
 import FormContext from './FormContext';
 
 type FormProps = HTMLProps<HTMLFormElement> & {
   disableErrorFromComponents?: boolean;
 };
 
-const Form: React.FC<FormProps> = ({ className, disableErrorFromComponents, ...rest }) => (
+const Form: React.FC<FormProps> = ({ disableErrorFromComponents, ...rest }) => (
   <FormContext.Provider value={{ disableErrorFromComponents: Boolean(disableErrorFromComponents) }}>
-    <form className={classNames('nhsuk-form-group--wrapper', className)} {...rest} />
+    <form {...rest} />
   </FormContext.Provider>
 );
 

src/util/FormGroup.tsx

@@ -43,6 +43,7 @@ const FormGroup = <T extends BaseFormElementRenderProps>(props: FormGroupProps<T
     error,
     hintProps,
     errorProps,
+    formGroupProps,
     inputType,
     disableErrorLine,
     name,
@@ -79,11 +80,18 @@ const FormGroup = <T extends BaseFormElementRenderProps>(props: FormGroupProps<T
     return () => registerComponent(elementID, true);
   }, []);
 
+  const { className: formGroupClassName, ...formGroupRestProps } = formGroupProps || {};
+
   return (
     <div
-      className={classNames('nhsuk-form-group', {
-        'nhsuk-form-group--error': !disableErrorFromComponents && !disableErrorLine && error,
-      })}
+      className={classNames(
+        'nhsuk-form-group',
+        {
+          'nhsuk-form-group--error': !disableErrorFromComponents && !disableErrorLine && error,
+        },
+        formGroupClassName,
+      )}
+      {...formGroupRestProps}
     >
       {label ? (
         <Label id={labelID} htmlFor={elementID} {...labelProps}>

src/util/types/FormTypes.ts

@@ -1,3 +1,4 @@
+import { HTMLProps } from 'react';
 import { ErrorMessageProps } from '../../components/error-message/ErrorMessage';
 import { HintProps } from '../../components/hint/Hint';
 import { LabelProps } from '../../components/label/Label';
@@ -9,6 +10,7 @@ export interface FormElementProps {
   errorProps?: ErrorMessageProps;
   hint?: string;
   hintProps?: HintProps;
+  formGroupProps?: HTMLProps<HTMLDivElement>;
   disableErrorLine?: boolean;
   id?: string;
   name?: string;