From 5f168e9636f788068794356af5a75b58e40a9423 Mon Sep 17 00:00:00 2001
From: Daniele Zurico <daniele.zurico@gmail.com>
Date: Tue, 24 Oct 2023 12:30:01 +0100
Subject: [PATCH 1/9] fix: missing exports (#559)

---
 package.json | 2 +-
 src/index.ts | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8f161137..29e6f4af 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@capgeminiuk/dcx-react-library",
   "author": "Capgemini UK",
   "license": "MIT",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "source": "src/index.ts",
   "main": "dist/dcx-react-library.js",
   "module": "dist/dcx-react-library.module.js",
diff --git a/src/index.ts b/src/index.ts
index bcde09bc..6f206548 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,3 +26,9 @@ export * from './keyBoard';
 export * from './preformattedText';
 export * from './list';
 export * from './breadcrumb';
+export * from './abbreviate';
+export * from './blockquote';
+export * from './heading';
+export * from './paragraph';
+export * from './codesnippet';
+export * from './highlight';

From e26aa81e0658da4f1496f30b32ddf77fca7b736c Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Wed, 13 Dec 2023 15:19:03 +0000
Subject: [PATCH 2/9] feat: {{ Adding isError property for Checkbox

---
 example/src/components/FormCheckboxDemo.tsx   | 17 ++++-
 src/common/components/commonTypes.ts          | 13 ++++
 src/formCheckbox/FormCheckbox.tsx             | 27 +++++--
 .../__test__/FormCheckbox.test.tsx            | 76 ++++++++++++++++++-
 stories/FormCheckbox/Documentation.mdx        |  1 +
 stories/FormCheckbox/UnStyled.stories.js      |  9 ++-
 stories/liveEdit/FormCheckboxLive.tsx         |  5 ++
 7 files changed, 134 insertions(+), 14 deletions(-)

diff --git a/example/src/components/FormCheckboxDemo.tsx b/example/src/components/FormCheckboxDemo.tsx
index 9857f110..1a7ae0d0 100644
--- a/example/src/components/FormCheckboxDemo.tsx
+++ b/example/src/components/FormCheckboxDemo.tsx
@@ -3,7 +3,7 @@ import { FormCheckbox, CheckboxGroup } from '@capgeminiuk/dcx-react-library';
 
 export const FormCheckboxDemo = () => {
   const [value, setValue] = React.useState('');
-  const [checked, setChecked] = React.useState<boolean>(true);
+  const [checked, setChecked] = React.useState<boolean>(false);
   const handleChange = (event: any) => {
     setValue(event.currentTarget.value);
     setChecked(!checked);
@@ -47,6 +47,21 @@ export const FormCheckboxDemo = () => {
         onChange={handleChange}
         disabled={true}
       />
+      <h2 id="checkbox-with-error-tag">Checkbox with Error</h2>
+      <FormCheckbox
+        ariaDescribedBy="checkbox-with-error-tag"
+        id="checkbox-4"
+        name="group4"
+        value={value}
+        label="Checkbox 4 label text"
+        onChange={handleChange}
+        isError={!checked}
+      />
+      {checked && (
+        <div style={{ color: 'red', marginTop: '8px' }}>
+          Error: The checkbox is checked!
+        </div>
+      )}
       <h2>Group</h2>
       <CheckboxGroup
         name="name-of-group"
diff --git a/src/common/components/commonTypes.ts b/src/common/components/commonTypes.ts
index 170d4e92..eb11e6b0 100644
--- a/src/common/components/commonTypes.ts
+++ b/src/common/components/commonTypes.ts
@@ -274,6 +274,19 @@ export type FormRadioCheckboxProps = {
    * specifies an optional className for the item
    */
   itemClassName?: string;
+  /**
+   * specifies whether there is an error with the input.
+   */
+  isError?: boolean;
+  // /**
+  //  * error details including text, class name, ID, and visually hidden text.
+  //  */
+  // error?: {
+  //   text: string;
+  //   className: string;
+  //   id: string;
+  //   visuallyHiddenText: string;
+  // };
 };
 
 export type HintProps = {
diff --git a/src/formCheckbox/FormCheckbox.tsx b/src/formCheckbox/FormCheckbox.tsx
index 5afb370b..071ede0a 100644
--- a/src/formCheckbox/FormCheckbox.tsx
+++ b/src/formCheckbox/FormCheckbox.tsx
@@ -23,10 +23,22 @@ export const FormCheckbox = ({
   inputClassName,
   labelClassName,
   itemClassName,
+  isError
 }: FormRadioCheckboxProps & {
   onChange?: (event: React.ChangeEvent, conditional?: string) => void;
-}) => (
-  <CheckboxRadioBase
+  isError?: boolean;
+}) => {
+  const errorClasses = isError ? {
+    container: 'dcx-checkbox-container--error',
+    checkbox: 'dcx-checkbox-checkbox--error',
+    label: 'dcx-checkbox-label--error'
+  } : {
+    container: '',
+    checkbox: '',
+    label: ''
+  };
+   return (
+      <CheckboxRadioBase
     type="checkbox"
     id={id}
     role={Roles.formCheckbox}
@@ -46,8 +58,9 @@ export const FormCheckbox = ({
     selected={selected}
     hint={hint}
     nested={nested}
-    inputClassName={inputClassName}
-    labelClassName={labelClassName}
-    itemClassName={itemClassName}
-  />
-);
+    itemClassName={`${itemClassName} ${errorClasses.container}`}
+    inputClassName={`${inputClassName} ${errorClasses.checkbox}`}
+    labelClassName={`${labelClassName} ${errorClasses.label}`}
+      />
+    )
+  }
diff --git a/src/formCheckbox/__test__/FormCheckbox.test.tsx b/src/formCheckbox/__test__/FormCheckbox.test.tsx
index 97d2fbe1..c746df27 100644
--- a/src/formCheckbox/__test__/FormCheckbox.test.tsx
+++ b/src/formCheckbox/__test__/FormCheckbox.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 import * as hooks from '../../common/utils/clientOnly';
 
-describe('FormCheckbox', () => {
+describe.only('FormCheckbox', () => {
   it('should render a checkbox', () => {
     const handleChange = jest.fn();
     render(
@@ -429,7 +429,7 @@ describe('FormCheckbox', () => {
 
     const label: any = container.querySelector('#my-label');
 
-    expect(label.className).toBe('my-label-class');
+    expect(label.className.trim()).toBe('my-label-class');
   });
 
   it('should style the checkbox item', () => {
@@ -450,7 +450,7 @@ describe('FormCheckbox', () => {
 
     const checkbox: any = container.querySelector('#checkbox-item');
 
-    expect(checkbox.className).toBe('my-checkbox-class');
+    expect(checkbox.className.trim()).toBe('my-checkbox-class');
   });
 
   it('should style the checkbox input', () => {
@@ -471,7 +471,7 @@ describe('FormCheckbox', () => {
 
     const input: any = container.querySelector('#input-item');
 
-    expect(input.className).toBe('my-input-class');
+    expect(input.className.trim()).toBe('my-input-class');
   });
 
 
@@ -495,4 +495,72 @@ describe('FormCheckbox', () => {
     const firstItemEl: any = screen.getByRole('link');
     expect(firstItemEl.href).toBe('http://localhost/link');
   });
+
+  it('should apply error styling when isError is true', () => {
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <FormCheckbox
+        id="myId"
+        name="group1"
+        value="choice 1"
+        label="my label"
+        onChange={handleChange}
+        isError={true}
+      />
+    );
+
+    console.log("OUTPUT", container.innerHTML); 
+
+    const checkboxContainer = container.querySelector('.dcx-checkbox-container--error');
+    const checkbox = container.querySelector('.dcx-checkbox-checkbox--error');
+    const label = container.querySelector('.dcx-checkbox-label--error');
+    
+    console.log("Checkbox Container", checkboxContainer);
+    console.log("Checkbox", checkbox);
+    console.log("Label", label);
+    
+    expect(checkboxContainer).not.toBeNull();
+    expect(checkbox).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    
+  });
+
+  it('should not apply error styling when isError is false', () => {
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <FormCheckbox
+        id="myId"
+        name="group1"
+        value="choice 1"
+        label="my label"
+        onChange={handleChange}
+        isError={false}
+      />
+    );
+
+    expect(container.querySelector('.dcx-checkbox-container--error')).toBeNull();
+    expect(container.querySelector('.dcx-checkbox-checkbox--error')).toBeNull();
+    expect(container.querySelector('.dcx-checkbox-label--error')).toBeNull();
+  });
+
+  it('should not apply error styling when isError is not provided', () => {
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <FormCheckbox
+        id="myId"
+        name="group1"
+        value="choice 1"
+        label="my label"
+        onChange={handleChange}
+      />
+    );
+
+    expect(container.querySelector('.dcx-checkbox-container--error')).toBeNull();
+    expect(container.querySelector('.dcx-checkbox-checkbox--error')).toBeNull();
+    expect(container.querySelector('.dcx-checkbox-label--error')).toBeNull();
+  });
+
 });
diff --git a/stories/FormCheckbox/Documentation.mdx b/stories/FormCheckbox/Documentation.mdx
index 992c1430..ab426b59 100644
--- a/stories/FormCheckbox/Documentation.mdx
+++ b/stories/FormCheckbox/Documentation.mdx
@@ -66,6 +66,7 @@ An example with all the available properties is:
   inputClassName="inputClassName"
   labelClassName="labelClassName"
   itemClassName="itemClassName"
+  isError={true}
 />
 ```
 
diff --git a/stories/FormCheckbox/UnStyled.stories.js b/stories/FormCheckbox/UnStyled.stories.js
index d322cda2..a3cccc3b 100644
--- a/stories/FormCheckbox/UnStyled.stories.js
+++ b/stories/FormCheckbox/UnStyled.stories.js
@@ -20,7 +20,11 @@ export const Unstyled = {
         console.log(conditional);
         return;
       }
-      setArgs({ value: evt.currentTarget.value, selected:  evt.currentTarget.checked});
+      setArgs({ 
+        value: evt.currentTarget.value, 
+        selected:  evt.currentTarget.checked,
+        isError: true
+      });
       setTimeout(() => setArgs({ isLoading: false }), 2000);
     };
     return <FormCheckbox {...args} onChange={checkboxHandler} />;
@@ -40,7 +44,8 @@ export const Unstyled = {
       type: 'text',
       id: 'checkbox-6',
       inputId: 'input-6',
-    }
+    },
+    isError: false
   },
   argTypes: { onChange: { action: 'changed' } },
 };
diff --git a/stories/liveEdit/FormCheckboxLive.tsx b/stories/liveEdit/FormCheckboxLive.tsx
index 55569beb..840d553a 100644
--- a/stories/liveEdit/FormCheckboxLive.tsx
+++ b/stories/liveEdit/FormCheckboxLive.tsx
@@ -7,6 +7,7 @@ function FormCheckboxDemo() {
    
   const [value, setValue] = React.useState('');
   const [checked, setChecked] = React.useState(false);
+  const [isError, setIsError] = React.useState(false)
   const handleChange = (event, conditional) => {
     if (conditional) {
       console.log(conditional);
@@ -14,6 +15,9 @@ function FormCheckboxDemo() {
     }
     setValue(event.currentTarget.value);
     setChecked(event.currentTarget.checked);
+
+    setIsError(event.currentTarget.checked && event.currentTarget.value === '');
+
   };
   return (
     <FormCheckbox
@@ -53,6 +57,7 @@ function FormCheckboxDemo() {
       }}
       selected={checked}
       nested={false}
+      isError={isError}
       inputClassName="inputClassName"
       labelClassName="labelClassName"
       itemClassName="itemClassName"

From cf67688b959d7fc864b301c52c74b9f611d18c20 Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Wed, 13 Dec 2023 17:06:38 +0000
Subject: [PATCH 3/9] feat: {{ tidy up }}

---
 src/common/components/commonTypes.ts            |  9 ---------
 src/formCheckbox/FormCheckbox.tsx               | 12 +++++++++---
 src/formCheckbox/__test__/FormCheckbox.test.tsx |  4 +---
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/common/components/commonTypes.ts b/src/common/components/commonTypes.ts
index eb11e6b0..68c2034b 100644
--- a/src/common/components/commonTypes.ts
+++ b/src/common/components/commonTypes.ts
@@ -278,15 +278,6 @@ export type FormRadioCheckboxProps = {
    * specifies whether there is an error with the input.
    */
   isError?: boolean;
-  // /**
-  //  * error details including text, class name, ID, and visually hidden text.
-  //  */
-  // error?: {
-  //   text: string;
-  //   className: string;
-  //   id: string;
-  //   visuallyHiddenText: string;
-  // };
 };
 
 export type HintProps = {
diff --git a/src/formCheckbox/FormCheckbox.tsx b/src/formCheckbox/FormCheckbox.tsx
index 071ede0a..6d841f93 100644
--- a/src/formCheckbox/FormCheckbox.tsx
+++ b/src/formCheckbox/FormCheckbox.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormRadioCheckboxProps } from '../common/components/commonTypes';
 import { CheckboxRadioBase, Roles } from '../common';
+import { classNames } from '../common/utils';
 
 export const FormCheckbox = ({
   id,
@@ -37,6 +38,11 @@ export const FormCheckbox = ({
     checkbox: '',
     label: ''
   };
+
+  const containerClasses = classNames([itemClassName, errorClasses.container]);
+  const checkboxClasses = classNames([inputClassName, errorClasses.checkbox]);
+  const labelClasses = classNames([labelClassName, errorClasses.label]);
+  
    return (
       <CheckboxRadioBase
     type="checkbox"
@@ -58,9 +64,9 @@ export const FormCheckbox = ({
     selected={selected}
     hint={hint}
     nested={nested}
-    itemClassName={`${itemClassName} ${errorClasses.container}`}
-    inputClassName={`${inputClassName} ${errorClasses.checkbox}`}
-    labelClassName={`${labelClassName} ${errorClasses.label}`}
+    itemClassName={containerClasses}
+    inputClassName={checkboxClasses}
+    labelClassName={labelClasses}
       />
     )
   }
diff --git a/src/formCheckbox/__test__/FormCheckbox.test.tsx b/src/formCheckbox/__test__/FormCheckbox.test.tsx
index c746df27..f1c0692d 100644
--- a/src/formCheckbox/__test__/FormCheckbox.test.tsx
+++ b/src/formCheckbox/__test__/FormCheckbox.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 import * as hooks from '../../common/utils/clientOnly';
 
-describe.only('FormCheckbox', () => {
+describe('FormCheckbox', () => {
   it('should render a checkbox', () => {
     const handleChange = jest.fn();
     render(
@@ -510,8 +510,6 @@ describe.only('FormCheckbox', () => {
       />
     );
 
-    console.log("OUTPUT", container.innerHTML); 
-
     const checkboxContainer = container.querySelector('.dcx-checkbox-container--error');
     const checkbox = container.querySelector('.dcx-checkbox-checkbox--error');
     const label = container.querySelector('.dcx-checkbox-label--error');

From 3a4b3543017f01badc3c35de4e1d26950a11a365 Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Wed, 13 Dec 2023 17:10:12 +0000
Subject: [PATCH 4/9] feat: {{ tidy up }}

---
 src/formCheckbox/__test__/FormCheckbox.test.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/formCheckbox/__test__/FormCheckbox.test.tsx b/src/formCheckbox/__test__/FormCheckbox.test.tsx
index f1c0692d..6913c545 100644
--- a/src/formCheckbox/__test__/FormCheckbox.test.tsx
+++ b/src/formCheckbox/__test__/FormCheckbox.test.tsx
@@ -514,11 +514,7 @@ describe('FormCheckbox', () => {
     const checkbox = container.querySelector('.dcx-checkbox-checkbox--error');
     const label = container.querySelector('.dcx-checkbox-label--error');
     
-    console.log("Checkbox Container", checkboxContainer);
-    console.log("Checkbox", checkbox);
-    console.log("Label", label);
-    
-    expect(checkboxContainer).not.toBeNull();
+    expect(checkboxContainer).toBeInTheDocument();
     expect(checkbox).toBeInTheDocument();
     expect(label).toBeInTheDocument();
     

From 5717482700612091632ddc2bf9dda9a20e12ccc2 Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Fri, 15 Dec 2023 15:24:51 +0000
Subject: [PATCH 5/9] {{ updating classes using classNames utils }}

---
 src/formCheckbox/FormCheckbox.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/formCheckbox/FormCheckbox.tsx b/src/formCheckbox/FormCheckbox.tsx
index 6d841f93..985d077d 100644
--- a/src/formCheckbox/FormCheckbox.tsx
+++ b/src/formCheckbox/FormCheckbox.tsx
@@ -29,19 +29,20 @@ export const FormCheckbox = ({
   onChange?: (event: React.ChangeEvent, conditional?: string) => void;
   isError?: boolean;
 }) => {
-  const errorClasses = isError ? {
-    container: 'dcx-checkbox-container--error',
-    checkbox: 'dcx-checkbox-checkbox--error',
-    label: 'dcx-checkbox-label--error'
-  } : {
-    container: '',
-    checkbox: '',
-    label: ''
-  };
-
-  const containerClasses = classNames([itemClassName, errorClasses.container]);
-  const checkboxClasses = classNames([inputClassName, errorClasses.checkbox]);
-  const labelClasses = classNames([labelClassName, errorClasses.label]);
+  const containerClasses = classNames([
+    itemClassName,
+    { 'dcx-checkbox-container--error': isError },
+  ]);
+  
+  const checkboxClasses = classNames([
+    inputClassName,
+    { 'dcx-checkbox-checkbox--error': isError },
+  ]);
+  
+  const labelClasses = classNames([
+    labelClassName,
+    { 'dcx-checkbox-label--error': isError },
+  ]);
   
    return (
       <CheckboxRadioBase

From 81e0cb062d5241dd4aed16d9db89c7651bf2de51 Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Mon, 29 Jan 2024 14:42:39 +0000
Subject: [PATCH 6/9] adding an checkbox example with error property for
 classBased

---
 stories/FormCheckbox/ClassBased.stories.js | 43 +++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/stories/FormCheckbox/ClassBased.stories.js b/stories/FormCheckbox/ClassBased.stories.js
index 4b5833f8..a3abcd06 100644
--- a/stories/FormCheckbox/ClassBased.stories.js
+++ b/stories/FormCheckbox/ClassBased.stories.js
@@ -289,4 +289,45 @@ export const SmallCheckbox = {
     defaultChecked:false,
   },
   argTypes: { onChange: { action: 'changed' } },
-};
\ No newline at end of file
+};
+
+export const RedStyledCheckbox = {  
+  name: 'Red Styled Checkbox',
+  render: function ({ onChange, ...args }) {
+    const [args_, setArgs] = useArgs();
+    const checkboxHandler = (evt) => {
+      onChange(evt);
+      setArgs({value: evt.currentTarget.value, defaultChecked: !args.defaultChecked });
+      setChecked(!checked);
+    };
+    return (
+      <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="">
+            <div class="govuk-checkboxes">
+              <FormCheckbox {...args} onChange={checkboxHandler} />
+            </div>
+          </fieldset>
+      </div>
+    );
+  },
+  args: {
+    name: "terms",
+    label: "I accept the Terms and Conditions",
+    value: "termsAccepted",
+    id: "terms-checkbox",
+    inputClassName: 'govuk-checkboxes__input red-checkbox',
+    labelClassName: "govuk-label govuk-checkboxes__label red-label",
+    itemClassName: 'govuk-checkboxes__item',
+    inputProps: {
+      className: 'govuk-checkboxes__input',
+    },
+    itemProps: {
+      className: 'govuk-checkboxes__item',
+    },
+    labelProps: {
+      className: 'govuk-label govuk-checkboxes__label',
+    },
+    defaultChecked: false
+  },
+  argTypes: { onChange: { action: 'changed' } },
+};

From fd7057654d87d2604e79ca820fccc64fdccf07b0 Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Mon, 29 Jan 2024 14:51:25 +0000
Subject: [PATCH 7/9] adding isError property

---
 stories/FormCheckbox/ClassBased.stories.js | 25 +++++-----------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/stories/FormCheckbox/ClassBased.stories.js b/stories/FormCheckbox/ClassBased.stories.js
index a3abcd06..1e2d605a 100644
--- a/stories/FormCheckbox/ClassBased.stories.js
+++ b/stories/FormCheckbox/ClassBased.stories.js
@@ -291,8 +291,8 @@ export const SmallCheckbox = {
   argTypes: { onChange: { action: 'changed' } },
 };
 
-export const RedStyledCheckbox = {  
-  name: 'Red Styled Checkbox',
+export const RedStyledCheckboxWithError = {  
+  name: 'Red Styled Checkbox with Error',
   render: function ({ onChange, ...args }) {
     const [args_, setArgs] = useArgs();
     const checkboxHandler = (evt) => {
@@ -304,30 +304,15 @@ export const RedStyledCheckbox = {
       <div class="govuk-form-group">
           <fieldset class="govuk-fieldset" aria-describedby="">
             <div class="govuk-checkboxes">
-              <FormCheckbox {...args} onChange={checkboxHandler} />
+              <FormCheckbox {...args} isError={true} onChange={checkboxHandler} />
             </div>
           </fieldset>
       </div>
     );
   },
   args: {
-    name: "terms",
-    label: "I accept the Terms and Conditions",
-    value: "termsAccepted",
-    id: "terms-checkbox",
-    inputClassName: 'govuk-checkboxes__input red-checkbox',
-    labelClassName: "govuk-label govuk-checkboxes__label red-label",
-    itemClassName: 'govuk-checkboxes__item',
-    inputProps: {
-      className: 'govuk-checkboxes__input',
-    },
-    itemProps: {
-      className: 'govuk-checkboxes__item',
-    },
-    labelProps: {
-      className: 'govuk-label govuk-checkboxes__label',
-    },
-    defaultChecked: false
+    ...RedStyledCheckbox.args,
+    isError: true,
   },
   argTypes: { onChange: { action: 'changed' } },
 };

From 688e3629249bd1ddc9e22b3b70c2bc5efa4fa073 Mon Sep 17 00:00:00 2001
From: Ahmet-K <ahmet.kio@hotmail.com>
Date: Wed, 31 Jan 2024 17:31:22 +0000
Subject: [PATCH 8/9] adding storybook classBased

---
 stories/FormCheckbox/ClassBased.stories.js | 53 +++++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/stories/FormCheckbox/ClassBased.stories.js b/stories/FormCheckbox/ClassBased.stories.js
index 1e2d605a..f752d9a8 100644
--- a/stories/FormCheckbox/ClassBased.stories.js
+++ b/stories/FormCheckbox/ClassBased.stories.js
@@ -1,5 +1,6 @@
 import { FormCheckbox } from '../../src/formCheckbox/FormCheckbox';
 import { useArgs } from '@storybook/preview-api';
+import '../govUkStyle.css'
 
 /**
  * In this section we're using the checkbox component providing the **GovUk style** passing the relative `className.      
@@ -291,28 +292,56 @@ export const SmallCheckbox = {
   argTypes: { onChange: { action: 'changed' } },
 };
 
-export const RedStyledCheckboxWithError = {  
-  name: 'Red Styled Checkbox with Error',
+export const ErrorStyledCheckbox = {
   render: function ({ onChange, ...args }) {
     const [args_, setArgs] = useArgs();
     const checkboxHandler = (evt) => {
       onChange(evt);
-      setArgs({value: evt.currentTarget.value, defaultChecked: !args.defaultChecked });
-      setChecked(!checked);
+      setArgs({ value: evt.currentTarget.value, defaultChecked: !args.defaultChecked });
+    };
+
+    const errorStyles = {
+      container: {
+        borderColor: '#d4351c', 
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        padding: '5px',
+      },
+      checkbox: {
+        outline: '2px solid #d4351c', 
+      },
+      label: {
+        color: '#d4351c',
+      },
+      errorMessage: {
+        color: '#d4351c', 
+        fontSize: '0.8rem',
+        marginTop: '5px',
+      },
     };
+
     return (
-      <div class="govuk-form-group">
-          <fieldset class="govuk-fieldset" aria-describedby="">
-            <div class="govuk-checkboxes">
-              <FormCheckbox {...args} isError={true} onChange={checkboxHandler} />
+      <div className="govuk-form-group" style={args.isError ? errorStyles.container : {}}>
+        <fieldset className="govuk-fieldset" aria-describedby="">
+          <div className="govuk-checkboxes">
+            <div className="govuk-checkboxes__item">
+              <FormCheckbox {...args} onChange={checkboxHandler} isError={args.isError} />
+              {args.isError && <span style={errorStyles.errorMessage}>Please accept the Terms and Conditions</span>}
             </div>
-          </fieldset>
+          </div>
+        </fieldset>
       </div>
     );
   },
+
   args: {
-    ...RedStyledCheckbox.args,
-    isError: true,
+    id: 'terms-checkbox-error',
+    name: 'termsError',
+    label: 'I accept the Terms and Conditions',
+    isError: true, 
+    defaultChecked: false,
+  },
+  argTypes: {
+    onChange: { action: 'changed' },
   },
-  argTypes: { onChange: { action: 'changed' } },
 };

From aae0318a9c740c9d8265be8d7e6e2e00ad4d566a Mon Sep 17 00:00:00 2001
From: "Zurico.Daniele_DEFRA" <daniele.zurico@gmail.com>
Date: Mon, 5 Feb 2024 12:16:08 +0000
Subject: [PATCH 9/9] feat: add dcx labels

---
 rollup.config-1706545646874.cjs            | 146 +++++++++++++++++++++
 stories/FormCheckbox/ClassBased.stories.js |  53 --------
 2 files changed, 146 insertions(+), 53 deletions(-)
 create mode 100644 rollup.config-1706545646874.cjs

diff --git a/rollup.config-1706545646874.cjs b/rollup.config-1706545646874.cjs
new file mode 100644
index 00000000..857c6f5b
--- /dev/null
+++ b/rollup.config-1706545646874.cjs
@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var postcss = require('rollup-plugin-postcss');
+var postcssFunctions = require('postcss-functions');
+var postcssImport = require('postcss-import');
+var postcssNesting = require('postcss-nesting');
+var cssnano = require('cssnano');
+var cssnanoPreset = require('cssnano-preset-default');
+var fs = require('fs');
+var glob = require('glob');
+var path = require('path');
+
+function token(name) {
+  const tokens = fs.readFileSync('./src/design-system/tokens.json', 'utf8');
+  const parsedTokens = JSON.parse(tokens);
+  const parsedName = name.replace(/('|")/g, '');
+  return `var(--dcx-${parsedName}, ${parsedTokens[parsedName]})`;
+}
+
+var customFunctions = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  token: token
+});
+
+const INPUT_FOLDER = 'src/design-system';
+const OUTPUT_FOLDER = 'dist/design-system';
+
+/**
+ * Cleanup dist folder
+ */
+const distPath = path.join(__dirname, OUTPUT_FOLDER);
+if (fs.existsSync(distPath)) {
+  fs.rmSync(distPath, { recursive: true });
+}
+
+function generateTokens() {
+  const presenters = {
+    color: 'Color'
+  };
+  const getHeading = (name) => {
+    const presenter = presenters[name] ? `\t * @presenter ${presenters[name]}\n` : '';
+    return '\t/**\n' +
+      `\t * @tokens ${name}\n` +
+      presenter +
+      '\t */\n';
+  };
+  return {
+    name: 'copy-file',
+    transform(code, id) {
+      return `export const tokens = ${code};`;
+    },
+    generateBundle(opts, bundle) {
+      const files = new Map();
+      for (const file in bundle) {
+        const bundleEntry = bundle[file];
+        files.set(bundleEntry.fileName, bundleEntry.code);
+      }
+
+      Array.from(files.entries())
+        .forEach(([fileName, code]) => {
+          const tokensJson = code
+            .replace('const tokens = ', '')
+            .replace('export { tokens };', '')
+            .replace(';', '')
+            .trim();
+          const parsedTokens = JSON.parse(tokensJson);
+
+          const tokenKeys = Object.keys(parsedTokens)
+            .sort();
+
+          const tokenKeysByCategory = new Map();
+          tokenKeys.forEach(token => {
+            const parts = token.split('-');
+            if (!tokenKeysByCategory.get(parts[0])) {
+              tokenKeysByCategory.set(parts[0], []);
+            }
+            tokenKeysByCategory.get(parts[0]).push(token);
+          });
+
+          let source = ':root {\n';
+          Array.from(tokenKeysByCategory.entries())
+            .forEach(([category, tokenKeys]) => {
+              const cssTokens = tokenKeys
+                .map((tokenKey) => `\t--dcx-${tokenKey}: ${parsedTokens[tokenKey]};\n`)
+                .join('');
+              source = source +
+                getHeading(category) +
+                cssTokens;
+            });
+          source = source + '};';
+
+          this.emitFile({ type: 'asset', fileName, source });
+        });
+    }
+  };
+}
+
+
+const getBaseConfig = () => ({
+  input: `${INPUT_FOLDER}/input.css.json`,
+  output: {
+    file: `${OUTPUT_FOLDER}/input.css`,
+    format: 'es'
+  },
+  plugins: [
+    postcss({
+      modules: false,
+      extract: true,
+      plugins: [
+        postcssImport(),
+        postcssNesting(),
+        postcssFunctions({
+          functions: {
+            ...customFunctions
+          }
+        }),
+        cssnano(cssnanoPreset())
+      ]
+    })
+  ]
+});
+
+const config = glob.sync(`${INPUT_FOLDER}/*.css`).reduce((acc, file) => {
+  acc.push({
+    ...getBaseConfig(),
+    input: file,
+    output: {
+      file: file.replace(`${INPUT_FOLDER}/`, `${OUTPUT_FOLDER}/`),
+      format: 'es'
+    }
+  });
+  return acc;
+}, [
+  {
+    input: `${INPUT_FOLDER}/tokens.json`,
+    output: {
+      file: `${OUTPUT_FOLDER}/tokens.css`,
+      format: 'es'
+    },
+    plugins: [generateTokens(),]
+  }
+]);
+
+exports.default = config;
diff --git a/stories/FormCheckbox/ClassBased.stories.js b/stories/FormCheckbox/ClassBased.stories.js
index f752d9a8..c73a7826 100644
--- a/stories/FormCheckbox/ClassBased.stories.js
+++ b/stories/FormCheckbox/ClassBased.stories.js
@@ -292,56 +292,3 @@ export const SmallCheckbox = {
   argTypes: { onChange: { action: 'changed' } },
 };
 
-export const ErrorStyledCheckbox = {
-  render: function ({ onChange, ...args }) {
-    const [args_, setArgs] = useArgs();
-    const checkboxHandler = (evt) => {
-      onChange(evt);
-      setArgs({ value: evt.currentTarget.value, defaultChecked: !args.defaultChecked });
-    };
-
-    const errorStyles = {
-      container: {
-        borderColor: '#d4351c', 
-        borderWidth: '2px',
-        borderStyle: 'solid',
-        padding: '5px',
-      },
-      checkbox: {
-        outline: '2px solid #d4351c', 
-      },
-      label: {
-        color: '#d4351c',
-      },
-      errorMessage: {
-        color: '#d4351c', 
-        fontSize: '0.8rem',
-        marginTop: '5px',
-      },
-    };
-
-    return (
-      <div className="govuk-form-group" style={args.isError ? errorStyles.container : {}}>
-        <fieldset className="govuk-fieldset" aria-describedby="">
-          <div className="govuk-checkboxes">
-            <div className="govuk-checkboxes__item">
-              <FormCheckbox {...args} onChange={checkboxHandler} isError={args.isError} />
-              {args.isError && <span style={errorStyles.errorMessage}>Please accept the Terms and Conditions</span>}
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    );
-  },
-
-  args: {
-    id: 'terms-checkbox-error',
-    name: 'termsError',
-    label: 'I accept the Terms and Conditions',
-    isError: true, 
-    defaultChecked: false,
-  },
-  argTypes: {
-    onChange: { action: 'changed' },
-  },
-};