Feature/checkbox group design system

src/checkboxGroup/CheckboxGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormRadioCheckboxBaseProps } from '../common/components/commonTypes';
 import { FormRadioCheckboxBase } from '../common/components/FormRadioCheckboxBase';
+import { classNames } from '../common/utils';
 
 export const CheckboxGroup = ({
   name,
@@ -20,27 +21,40 @@ export const CheckboxGroup = ({
   labelProps,
   legend,
   onChange,
-}: Omit<FormRadioCheckboxBaseProps, 'type'>) => (
-  <FormRadioCheckboxBase
-    {...{
-      type: 'checkbox',
-      name,
-      items,
-      ariaDescribedBy,
-      groupClasses,
-      error,
-      fieldsetClasses,
-      hint,
-      id,
-      inputProps,
-      itemProps,
-      itemsClasses,
-      inputClassName,
-      itemClassName,
-      labelClassName,
-      labelProps,
-      legend,
-      onChange,
-    }}
-  />
-);
+}: Omit<FormRadioCheckboxBaseProps, 'type'>) => {
+  const containerClasses = classNames([
+    groupClasses,
+    { 'dcx-checkbox-group': true },
+    { 'dcx-checkbox-group--error': !!error },
+  ]);
+
+  const containerCheckboxesClasses = classNames([
+    itemsClasses,
+    'dcx-checkbox-group-checkboxes',
+  ]);
+
+  return (
+    <FormRadioCheckboxBase
+      {...{
+        type: 'checkbox',
+        name,
+        items,
+        ariaDescribedBy,
+        groupClasses: containerClasses,
+        error,
+        fieldsetClasses,
+        hint,
+        id,
+        inputProps,
+        itemProps,
+        itemsClasses: containerCheckboxesClasses,
+        inputClassName,
+        itemClassName,
+        labelClassName,
+        labelProps,
+        legend,
+        onChange,
+      }}
+    />
+  );
+};

src/common/components/Conditional.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ConditionalInputProps } from './commonTypes';
+import { classNames } from '../utils';
 
 export const Conditional = ({
   name,
@@ -19,8 +20,10 @@ export const Conditional = ({
       if (onChange) onChange(event);
     };
 
+  const containerClasses = classNames([className, 'dcx-conditional-input']);
+
   return (
-    <div className={className} id={id}>
+    <div className={containerClasses} id={id}>
       <div className={groupClassName}>
         <label className={labelClassName} htmlFor={inputId}>
           {label}

src/common/components/FormRadioCheckboxBase.tsx

@@ -6,6 +6,7 @@ import {
   HintProps,
   LegendProps,
 } from '../components/commonTypes';
+import { FormCheckbox } from '../../formCheckbox';
 
 type DividerProps = {
   /**
@@ -222,7 +223,7 @@ export const FormRadioCheckboxBase = ({
       );
     }
 
-    if (type === 'radio' || type === 'checkbox') {
+    if (type === 'radio') {
       return (
         <CheckboxRadioBase
           type={type}
@@ -251,6 +252,34 @@ export const FormRadioCheckboxBase = ({
       );
     }
 
+    if (type === 'checkbox') {
+      return (
+        <FormCheckbox
+          key={`${id}_${index.toString()}`}
+          {...item}
+          name={name}
+          inputProps={{ ...inputProps, ...item.inputProps }}
+          itemProps={{ ...itemProps, ...item.itemProps }}
+          labelProps={{ ...labelProps, ...item.labelProps }}
+          inputClassName={inputClassName}
+          labelClassName={labelClassName}
+          itemClassName={itemClassName}
+          selected={isSelected(item)}
+          onChange={(
+            event: React.ChangeEvent<HTMLInputElement>,
+            conditionalInput?: string
+          ) => {
+            if (conditionalInput && onChange) {
+              onChange(event, conditionalInput);
+              return;
+            }
+
+            handleChange(item, event);
+          }}
+        />
+      );
+    }
+
     return null;
   });
 

src/common/components/__tests__/FormRadioCheckboxBase.test.tsx

@@ -827,7 +827,7 @@ describe('FormRadioCheckboxBase', () => {
     expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
   });
 
-  it('should call on change of an item if a conditional input has changed', async () => {
+  it('should call on change of an item if a conditional input type radio has changed', async () => {
     const handleChange = jest.fn();
     const user = userEvent.setup();
     render(
@@ -887,6 +887,66 @@ describe('FormRadioCheckboxBase', () => {
 
     expect(handleChange).toHaveBeenCalledTimes(2);
   });
+  it('should call on change of an item if a conditional input type checkbox has changed', async () => {
+    const handleChange = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <FormRadioCheckboxBase
+        type="checkbox"
+        groupClasses=""
+        id=""
+        name="group1"
+        legend={{
+          text: 'Have you changed your name?',
+          heading: {
+            priority: 1,
+          },
+        }}
+        items={[
+          {
+            value: 'yes',
+            label: 'Yes',
+            id: 'first',
+            selected: true,
+            conditional: {
+              value: '',
+              name: '',
+              label: '',
+              type: 'text',
+              className: '',
+              groupClassName: '',
+              id: 'conditional-1',
+              inputClassName: '',
+              inputId: '',
+              labelClassName: '',
+            },
+          },
+          {
+            value: 'no',
+            label: 'No',
+            id: 'second',
+            conditional: {
+              value: '',
+              name: '',
+              label: '',
+              type: 'text',
+              className: '',
+              groupClassName: '',
+              id: 'conditional-2',
+              inputClassName: '',
+              inputId: '',
+              labelClassName: '',
+            },
+          },
+        ]}
+        onChange={handleChange}
+      />
+    );
+    const input: Element = screen.getByRole('textbox');
+    await user.type(input, 'mo');
+
+    expect(handleChange).toHaveBeenCalledTimes(2);
+  });
 
   it('should render a form group of radio buttons with onChange param ommitted', () => {
     render(

src/design-system/checkbox-group.css

@@ -0,0 +1,71 @@
+.dcx-checkbox-group {
+  &.dcx-checkbox-group--error {
+    & .dcx-error-message {
+      color: token('color-text-formcontrol_error');
+      line-height: token('font-formcontrol_error-line-height');
+      font-size: token('font-formcontrol_error-size');
+    }
+  }
+
+  & .dcx-hint {
+    font-size: token('font-formcontrol_hint-size');
+    line-height: token('font-formcontrol_hint-line-height');
+    color: token('color-text-formcontrol_hint');
+  }
+
+  & fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    row-gap: token('spacing-x-formcontrol');
+
+    & legend {
+      padding: token('spacing-x-formcontrol') 0;
+      color: token('color-text-body');
+      h1 {
+        color: token('color-text-heading-level_1');
+        padding: 0;
+        margin: 0;
+      }
+
+      h2 {
+        color: token('color-text-heading-level_2');
+        padding: 0;
+        margin: 0;
+      }
+
+      h3 {
+        color: token('color-text-heading-level_3');
+        padding: 0;
+        margin: 0;
+      }
+
+      h4 {
+        color: token('color-text-heading-level_4');
+        padding: 0;
+        margin: 0;
+      }
+
+      h5 {
+        color: token('color-text-heading-level_5');
+        padding: 0;
+        margin: 0;
+      }
+
+      h6 {
+        color: token('color-text-heading-level_6');
+        padding: 0;
+        margin: 0;
+      }
+    }
+
+    & .dcx-checkbox-group-checkboxes {
+      display: flex;
+      flex-direction: column;
+      row-gap: token('spacing-x-formcontrol');
+      color: token('color-text-body');
+    }
+  }
+}

src/design-system/formcheckbox.css

@@ -22,7 +22,7 @@
     color: token('color-text-formcontrol_label');
   }
 
-  & input {
+  & input[type='checkbox'] {
     appearance: none;
     background-color: token('color-background-formcontrol');
     margin: 0;
@@ -108,4 +108,35 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  & .dcx-conditional-input {
+    flex-basis: 100%;
+    & div {
+      display: flex;
+      flex-direction: column;
+      padding-left: calc(
+        token('font-formcontrol_label-line-height') +
+          token('spacing-y-formcontrol') * 2
+      );
+      & label {
+        font-size: token('font-size-formcontrol_label');
+        line-height: token('font-formcontrol_label-line-height');
+        background: token('color-background-formcontrol_label');
+        color: token('color-text-formcontrol_label');
+      }
+
+      & input {
+        background: token('color-background-formcontrol');
+        box-sizing: border-box;
+        color: token('color-text-formcontrol');
+        font-size: token('font-formcontrol-size');
+        line-height: token('font-formcontrol-line-height');
+        margin: token('color-outline-formcontrol');
+        padding-left: token('spacing-x-formcontrol');
+        padding-right: token('spacing-x-formcontrol');
+        border-radius: token('border-radius-formcontrol');
+        max-width: 400px;
+      }
+    }
+  }
 }

src/design-system/index.css

@@ -16,5 +16,6 @@
 @import './keyboard-input.css';
 @import './preformattedText.css';
 @import './form-input.css';
+@import './checkbox-group.css';
 @import './formcheckbox.css';
 @import './radio-button-group.css';