Form CheckBox design-system

src/design-system/formcheckbox.css

@@ -0,0 +1,111 @@
+.dcx-checkbox {
+  column-gap: token('spacing-y-formcontrol');
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & .dcx-hint {
+    flex-basis: 100%;
+    font-size: token('font-formcontrol_hint-size');
+    line-height: token('font-formcontrol_hint-line-height');
+    color: token('color-text-formcontrol_hint');
+    padding-left: calc(
+      token('font-formcontrol_label-line-height') +
+        token('spacing-y-formcontrol')
+    );
+  }
+
+  & label {
+    font-weight: token('font-weight-formcontrol_label');
+    font-size: token('font-size-formcontrol_label');
+    background: token('color-background-formcontrol_label');
+    color: token('color-text-formcontrol_label');
+  }
+
+  & input {
+    appearance: none;
+    background-color: token('color-background-formcontrol');
+    margin: 0;
+    color: currentColor;
+    width: token('font-formcontrol_label-line-height');
+    height: token('font-formcontrol_label-line-height');
+    border-radius: token('border-radius-formcontrol');
+    border-width: token('border-width-formcontrol');
+    border-style: solid;
+    border-color: token('border-color-formcontrol');
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+
+    &:focus {
+      border-color: token('color-outline-formcontrol');
+      border-width: calc(token('border-width-formcontrol') * 2);
+    }
+
+    &:checked {
+      border-color: token('color-outline-formcontrol');
+      background-color: token('color-outline-formcontrol');
+    }
+    &:hover {
+      border-color: token('color-outline-formcontrol');
+      border-width: calc(token('border-width-formcontrol') * 2);
+      opacity: 0.8;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      &:hover {
+        opacity: 0.5;
+        border-radius: token('border-radius-formcontrol');
+        border-width: token('border-width-formcontrol');
+        border-style: solid;
+        border-color: token('border-color-formcontrol');
+      }
+    }
+
+    &:disabled:hover {
+      cursor: not-allowed;
+    }
+
+    &::before {
+      content: '';
+      width: 0.8em;
+      height: 0.8em;
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      transform: scale(0);
+      transform-origin: bottom left;
+      transition: 120ms transform ease-in-out;
+      box-shadow: inset 1em 1em token('color-background-formcontrol_checkmark');
+    }
+    &:checked::before {
+      transform: scale(1);
+    }
+  }
+
+  &.dcx-checkbox--error {
+    & label {
+      color: token('color-text-formcontrol_label-error');
+    }
+    & input {
+      border-color: token('color-text-formcontrol_error');
+
+      &:focus {
+        border-color: token('color-text-formcontrol_error');
+      }
+
+      &:checked {
+        border-color: token('color-text-formcontrol_error');
+        background-color: token('color-text-formcontrol_error');
+      }
+      &:hover {
+        border-color: token('color-text-formcontrol_error');
+      }
+    }
+  }
+
+  &:has(input:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

src/design-system/index.css

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

src/design-system/radio-button-group.css

@@ -23,6 +23,7 @@
 
     & legend {
       padding: token('spacing-x-formcontrol') 0;
+      color: token('color-text-body');
       h1 {
         color: token('color-text-heading-level_1');
         padding: 0;

src/design-system/tokens.json

@@ -48,6 +48,7 @@
   "color-background-formcontrol_label-floating-filled": "#f5f5f5",
   "color-background-formcontrol_suffix": "transparent",
   "color-background-formcontrol_prefix": "transparent",
+  "color-background-formcontrol_checkmark": "white",
   "color-background-highlight_body": "yellow",
   "color-background-pre_box": "transparent",
   "color-chevron-formcontrol": "#000",

src/formCheckbox/FormCheckbox.tsx

@@ -31,17 +31,8 @@ export const FormCheckbox = ({
 }) => {
   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 },
+    'dcx-checkbox',
+    { 'dcx-checkbox--error': isError },
   ]);
 
   return (
@@ -66,8 +57,8 @@ export const FormCheckbox = ({
       hint={hint}
       nested={nested}
       itemClassName={containerClasses}
-      inputClassName={checkboxClasses}
-      labelClassName={labelClasses}
+      inputClassName={inputClassName}
+      labelClassName={labelClassName}
     />
   );
 };

src/formCheckbox/__test__/FormCheckbox.test.tsx

@@ -450,7 +450,7 @@ describe('FormCheckbox', () => {
 
     const checkbox: any = container.querySelector('#checkbox-item');
 
-    expect(checkbox.className.trim()).toBe('my-checkbox-class');
+    expect(checkbox.className.trim()).toBe('my-checkbox-class dcx-checkbox');
   });
 
   it('should style the checkbox input', () => {
@@ -510,13 +510,9 @@ describe('FormCheckbox', () => {
       />
     );
 
-    const checkboxContainer = container.querySelector('.dcx-checkbox-container--error');
-    const checkbox = container.querySelector('.dcx-checkbox-checkbox--error');
-    const label = container.querySelector('.dcx-checkbox-label--error');
+    const checkboxContainer = container.querySelector('.dcx-checkbox--error');
 
     expect(checkboxContainer).toBeInTheDocument();
-    expect(checkbox).toBeInTheDocument();
-    expect(label).toBeInTheDocument();
 
   });
 
@@ -534,9 +530,7 @@ describe('FormCheckbox', () => {
       />
     );
 
-    expect(container.querySelector('.dcx-checkbox-container--error')).toBeNull();
-    expect(container.querySelector('.dcx-checkbox-checkbox--error')).toBeNull();
-    expect(container.querySelector('.dcx-checkbox-label--error')).toBeNull();
+    expect(container.querySelector('.dcx-checkbox--error')).toBeNull();
   });
 
   it('should not apply error styling when isError is not provided', () => {
@@ -552,9 +546,7 @@ describe('FormCheckbox', () => {
       />
     );
 
-    expect(container.querySelector('.dcx-checkbox-container--error')).toBeNull();
-    expect(container.querySelector('.dcx-checkbox-checkbox--error')).toBeNull();
-    expect(container.querySelector('.dcx-checkbox-label--error')).toBeNull();
+    expect(container.querySelector('.dcx-checkbox--error')).toBeNull();
   });
 
 });