Form CheckBox design-system

src/design-system/formcheckbox.css

@@ -0,0 +1,21 @@
+.dcx-checkbox {
+  color: token('color-text-formcontrol_label');
+  font-weight: token('font-weight-formcontrol_label');
+  font-size: token('font-size-formcontrol_label');
+
+  & .dcx-checkbox-container--error {
+    color: token('color-text-formcontrol_label-error');
+  }
+
+  & .dcx-checkbox-checkbox--error {
+    color: token('color-text-formcontrol_label-error');
+  }
+
+  & .dcx-checkbox-label--error {
+    color: token('color-text-formcontrol_label-error');
+  }
+
+  & .focusCheckBox:focus {
+    box-shadow: 0 0 5px #007bff;
+  }
+}

src/design-system/index.css

@@ -16,3 +16,4 @@
 @import './keyboard-input.css';
 @import './preformattedText.css';
 @import './form-input.css';
+@import './formcheckbox.css';

src/formCheckbox/FormCheckbox.tsx

@@ -30,6 +30,7 @@ export const FormCheckbox = ({
   isError?: boolean;
 }) => {
   const containerClasses = classNames([
+    'dcx-checkbox',
     itemClassName,
     { 'dcx-checkbox-container--error': isError },
   ]);

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('dcx-checkbox my-checkbox-class');
   });
 
   it('should style the checkbox input', () => {