Feat: [OV-44110] Added checkbox completion style

.changeset/nervous-eyes-notice.md

@@ -0,0 +1,5 @@
+---
+'@igloo-ui/checkbox': minor
+---
+
+Added a new appearance called 'completion' to the checkbox component.

packages/Checkbox/src/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Section from '@components/section';
 import readme from '../README.md';
@@ -22,41 +22,81 @@ export default {
   },
 } as Meta<typeof Checkbox>;
 
-export const Overview = {
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Overview: Story = {
   args: {
     htmlFor: 'ids-checkbox',
-    children: 'Label',
-  },
+    children: 'Label'
+  }
+};
+
+export const Checked: Story = {
+  render: () => {
+    return (
+      <Section>
+        <Checkbox htmlFor="ids-checkbox-active" checked>
+          Label
+        </Checkbox>
+      </Section>
+    )
+  }
 };
 
-export const Checked: React.VFC<unknown> = () => (
-  <Checkbox htmlFor="ids-checkbox-active" checked>
-    Label
-  </Checkbox>
-);
-
-export const Indeterminate: React.VFC<unknown> = () => (
-  <Checkbox htmlFor="ids-checkbox-indeterminate" indeterminate>
-    Label
-  </Checkbox>
-);
-
-export const Disabled: React.VFC<unknown> = () => (
-  <Section>
-    <Checkbox htmlFor="ids-checkbox-disabled" disabled>
-      Label
-    </Checkbox>
-
-    <Checkbox htmlFor="ids-checkbox-disabled-active" checked disabled>
-      Label
-    </Checkbox>
-
-    <Checkbox
-      htmlFor="ids-checkbox-disabled-indeterminate"
-      indeterminate
-      disabled
-    >
-      Label
-    </Checkbox>
-  </Section>
-);
+export const Indeterminate: Story = {
+  render: () => {
+    return (
+      <Section>
+        <Checkbox htmlFor="ids-checkbox-indeterminate" indeterminate>
+          Label
+        </Checkbox>
+      </Section>
+    )
+  }
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <Section>
+        <Checkbox htmlFor="ids-checkbox-disabled" disabled>
+          Label
+        </Checkbox>
+
+        <Checkbox htmlFor="ids-checkbox-disabled-active" checked disabled>
+          Label
+        </Checkbox>
+
+        <Checkbox
+          htmlFor="ids-checkbox-disabled-indeterminate"
+          indeterminate
+          disabled
+        >
+          Label
+        </Checkbox>
+      </Section>
+    )
+  }
+};
+
+export const CompletionCheckbox: Story = {
+  render: () => {
+    return (
+      <Section>
+        <Checkbox htmlFor="ids-checkbox-completion-default" appearance="completion">
+          Label
+        </Checkbox>
+        <Checkbox htmlFor="ids-checkbox-completion-active" checked appearance="completion">
+          Label
+        </Checkbox>
+        <Checkbox htmlFor="ids-checkbox-completion-disabled" disabled appearance="completion">
+          Label
+        </Checkbox>
+        <Checkbox htmlFor="ids-checkbox-completion-disabled-active" checked disabled appearance="completion">
+          Label
+        </Checkbox>
+      </Section>
+    )
+  }
+};

packages/Checkbox/src/Checkbox.test.tsx

@@ -35,4 +35,9 @@ describe('Checkbox', () => {
     const { asFragment } = setUp({ indeterminate: true });
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('It should render a completion appearance', () => {
+    setUp({ appearance: "completion" });
+    expect(screen.getByRole('checkbox')).toHaveClass('ids-checkbox--completion');
+  });
 });

packages/Checkbox/src/Checkbox.tsx

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import cx from 'classnames';
 
+import Checkmark from '@igloo-ui/icons/dist/Checkmark';
+
 import './checkbox.scss';
 
+export type CheckboxAppearance = 'default' | 'completion';
+
 export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
+  /** The appearance of the checkbox */
+  appearance?: CheckboxAppearance;
   /** The content to display inside the label */
   children?: React.ReactNode;
   /** Add a specific class to the checkbox */
@@ -25,6 +31,7 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
 const Checkbox: React.FunctionComponent<CheckboxProps> = React.forwardRef(
   (
     {
+      appearance = 'default',
       children,
       className,
       dataTest,
@@ -64,22 +71,43 @@ const Checkbox: React.FunctionComponent<CheckboxProps> = React.forwardRef(
       setStatus(!status);
     };
 
+    const showLabel = appearance === 'completion' || children;
+
     return (
-      <span className={cx('ids-form-control', className)}>
+      <span
+        className={cx(
+          'ids-form-control',
+          className,
+          `ids-form-control--${appearance}`
+        )}
+      >
         <input
           ref={checkRef}
           id={htmlFor}
-          className="ids-checkbox"
+          className={cx('ids-checkbox', `ids-checkbox--${appearance}`)}
           data-test={dataTest}
           checked={status}
           disabled={disabled}
           type="checkbox"
           onChange={handleOnChange}
           {...rest}
         />
-        {children && (
-          <label className="ids-checkbox__label" htmlFor={htmlFor}>
-            {children}
+        {showLabel && (
+          <label
+            className={cx(
+              'ids-checkbox__label',
+              `ids-checkbox__label--${appearance}`
+            )}
+            htmlFor={htmlFor}
+          >
+            {appearance === 'completion' && (
+              <span className="ids-checkbox__box">
+                <Checkmark size="small" className="ids-checkbox__check" />
+              </span>
+            )}
+            {children && (
+              <span className="ids-checkbox__label-text">{children}</span>
+            )}
           </label>
         )}
       </span>

packages/Checkbox/src/__snapshots__/Checkbox.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`Checkbox It should render a checked state 1`] = `
 <DocumentFragment>
   <span
-    class="ids-form-control"
+    class="ids-form-control ids-form-control--default"
   >
     <input
       checked=""
-      class="ids-checkbox"
+      class="ids-checkbox ids-checkbox--default"
       id="checkbox-master"
       type="checkbox"
     />
@@ -18,10 +18,10 @@ exports[`Checkbox It should render a checked state 1`] = `
 exports[`Checkbox It should render a disabled state 1`] = `
 <DocumentFragment>
   <span
-    class="ids-form-control"
+    class="ids-form-control ids-form-control--default"
   >
     <input
-      class="ids-checkbox"
+      class="ids-checkbox ids-checkbox--default"
       disabled=""
       id="checkbox-master"
       type="checkbox"
@@ -33,10 +33,10 @@ exports[`Checkbox It should render a disabled state 1`] = `
 exports[`Checkbox It should render a indeterminate state 1`] = `
 <DocumentFragment>
   <span
-    class="ids-form-control"
+    class="ids-form-control ids-form-control--default"
   >
     <input
-      class="ids-checkbox"
+      class="ids-checkbox ids-checkbox--default"
       id="checkbox-master"
       type="checkbox"
     />