IBX-7999: Checkbox and ThreeStateCheckbox

packages/assets/src/scss/inputs/_checkbox.scss

@@ -0,0 +1,57 @@
+@use '../functions' as *;
+@use '../variables' as *;
+
+@mixin checkbox-active-state {
+    border-color: $color-primary-80;
+    background-color: $color-primary-80;
+
+    &::after {
+        border-color: $color-neutral-10;
+    }
+
+    &:disabled {
+        border-color: $color-primary-60;
+        background-color: $color-primary-60;
+    }
+
+    &.ids-input--error {
+        border-color: $color-error-80;
+        background-color: $color-error-80;
+
+        &::after {
+            border-color: $color-neutral-10;
+        }
+    }
+}
+
+.ids-checkbox {
+    .ids-input--checkbox {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        width: calculateRem(16px);
+        height: calculateRem(16px);
+        border-radius: calculateRem(2px);
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        position: relative;
+
+        &::after {
+            content: ' ';
+            position: absolute;
+            top: calculateRem(2px);
+            left: calculateRem(2px);
+            display: block;
+            width: calculateRem(8px);
+            height: calculateRem(5px);
+            border-left: calculateRem(2px) solid transparent;
+            border-bottom: calculateRem(2px) solid transparent;
+            transform: rotate(-45deg);
+        }
+
+        &:checked {
+            @include checkbox-active-state;
+        }
+    }
+}

packages/assets/src/scss/inputs/_three-state-checkbox.scss

@@ -0,0 +1,24 @@
+@use '../functions' as *;
+@use '../variables' as *;
+@use './checkbox' as checkbox-mixins;
+
+.ids-three-state-checkbox {
+    @extend .ids-checkbox;
+
+    .ids-input--checkbox:indeterminate {
+        @include checkbox-mixins.checkbox-active-state;
+
+        &::after {
+            background-color: $color-neutral-10;
+            height: calculateRem(2px);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &.ids-input--error {
+            &::after {
+                background-color: $color-neutral-10;
+            }
+        }
+    }
+}

packages/assets/src/scss/styles.scss

@@ -12,6 +12,8 @@
 @use 'input';
 @use 'label';
 
+@use 'inputs/checkbox';
 @use 'inputs/input-text';
+@use 'inputs/three-state-checkbox';
 
 @use 'ui/clear-btn';

packages/components/src/inputs/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import { CheckboxStateful } from './Checkbox';
+
+const meta: Meta<typeof CheckboxStateful> = {
+    component: CheckboxStateful,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs', 'foundation', 'inputs'],
+    argTypes: {
+        className: {
+            control: 'text',
+        },
+        title: {
+            control: 'text',
+        },
+        checked: {
+            control: 'boolean',
+        },
+    },
+    args: {
+        onBlur: action('on-blur'),
+        onChange: action('on-change'),
+        onFocus: action('on-focus'),
+        onInput: action('on-input'),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxStateful>;
+
+export const Empty: Story = {
+    name: 'Empty',
+    args: {
+        name: 'default-input',
+    },
+};
+
+export const EmptyDisabled: Story = {
+    name: 'Empty (Disabled)',
+    args: {
+        name: 'default-input',
+        disabled: true,
+    },
+};
+
+export const EmptyError: Story = {
+    name: 'Empty (Error)',
+    args: {
+        name: 'default-input',
+        error: true,
+    },
+};
+
+export const Checked: Story = {
+    name: 'Checked',
+    args: {
+        name: 'default-input',
+        checked: true,
+    },
+};
+
+export const CheckedDisabled: Story = {
+    name: 'Checked (Disabled)',
+    args: {
+        name: 'default-input',
+        disabled: true,
+        checked: true,
+    },
+};
+
+export const CheckedError: Story = {
+    name: 'Checked (Error)',
+    args: {
+        name: 'default-input',
+        error: true,
+        checked: true,
+    },
+};

packages/components/src/inputs/Checkbox/Checkbox.test.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { CheckboxStateful } from './Checkbox';
+
+const meta: Meta<typeof CheckboxStateful> = {
+    component: CheckboxStateful,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['!dev'],
+    args: {
+        name: 'default-input',
+        onBlur: fn(),
+        onChange: fn(),
+        onFocus: fn(),
+        onInput: fn(),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxStateful>;
+
+const NUMBER_OF_CLICKS_FOCUS = 2;
+
+export const Default: Story = {
+    name: 'Default',
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByRole('checkbox');
+
+        await step('Checkbox handles focus event', async () => {
+            await expect(args.onFocus).not.toHaveBeenCalled();
+
+            await userEvent.click(input);
+
+            await expect(args.onFocus).toHaveBeenCalledOnce();
+
+            await userEvent.click(input);
+
+            await expect(args.onFocus).toHaveBeenCalledOnce();
+            await expect(args.onChange).toHaveBeenCalledTimes(NUMBER_OF_CLICKS_FOCUS);
+            await expect(args.onInput).toHaveBeenCalledTimes(NUMBER_OF_CLICKS_FOCUS);
+        });
+
+        await step('Checkbox handles blur event', async () => {
+            await expect(args.onBlur).not.toHaveBeenCalled();
+
+            await userEvent.click(canvasElement);
+
+            await expect(args.onBlur).toHaveBeenCalledOnce();
+        });
+    },
+};

packages/components/src/inputs/Checkbox/Checkbox.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import BaseCheckbox from '@ids-internal/partials/BaseCheckbox';
+import { createCssClassNames } from '@ibexa/ids-core/helpers/cssClassNames';
+import withStateChecked from '@ids-internal/hoc/withStateChecked';
+
+import { CheckboxProps } from './Checkbox.types';
+
+const Checkbox = ({ className = '', ...restProps }: CheckboxProps) => {
+    const checkboxClassName = createCssClassNames({
+        'ids-checkbox': true,
+        [className]: true,
+    });
+
+    return <BaseCheckbox {...restProps} className={checkboxClassName} />;
+};
+
+export default Checkbox;
+
+export const CheckboxStateful = withStateChecked(Checkbox);

packages/components/src/inputs/Checkbox/Checkbox.types.ts

@@ -0,0 +1,3 @@
+import { BaseCheckboxProps } from '@ids-internal/partials/BaseCheckbox';
+
+export type CheckboxProps = BaseCheckboxProps;

packages/components/src/inputs/Checkbox/index.ts

@@ -0,0 +1,6 @@
+import Checkbox, { CheckboxStateful } from './Checkbox';
+import { CheckboxProps } from './Checkbox.types';
+
+export default Checkbox;
+export { CheckboxStateful };
+export type { CheckboxProps };

packages/components/src/inputs/ThreeStateCheckbox/ThreeStateCheckbox.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import { ThreeStateCheckboxStateful } from './ThreeStateCheckbox';
+
+const meta: Meta<typeof ThreeStateCheckboxStateful> = {
+    component: ThreeStateCheckboxStateful,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs', 'foundation', 'inputs'],
+    argTypes: {
+        className: {
+            control: 'text',
+        },
+        title: {
+            control: 'text',
+        },
+        checked: {
+            control: 'boolean',
+        },
+    },
+    args: {
+        onBlur: action('on-blur'),
+        onChange: action('on-change'),
+        onFocus: action('on-focus'),
+        onInput: action('on-input'),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ThreeStateCheckboxStateful>;
+
+export const Empty: Story = {
+    name: 'Empty',
+    args: {
+        name: 'default-input',
+    },
+};
+
+export const EmptyDisabled: Story = {
+    name: 'Empty (Disabled)',
+    args: {
+        name: 'default-input',
+        disabled: true,
+    },
+};
+
+export const EmptyError: Story = {
+    name: 'Empty (Error)',
+    args: {
+        name: 'default-input',
+        error: true,
+    },
+};
+
+export const Indeterminate: Story = {
+    name: 'Indeterminate',
+    args: {
+        name: 'default-input',
+        indeterminate: true,
+    },
+};
+
+export const IndeterminateDisabled: Story = {
+    name: 'Indeterminate (Disabled)',
+    args: {
+        name: 'default-input',
+        indeterminate: true,
+        disabled: true,
+    },
+};
+
+export const IndeterminateError: Story = {
+    name: 'Indeterminate (Error)',
+    args: {
+        name: 'default-input',
+        indeterminate: true,
+        error: true,
+    },
+};
+
+export const Checked: Story = {
+    name: 'Checked',
+    args: {
+        name: 'default-input',
+        checked: true,
+    },
+};
+
+export const CheckedDisabled: Story = {
+    name: 'Checked (Disabled)',
+    args: {
+        name: 'default-input',
+        disabled: true,
+        checked: true,
+    },
+};
+
+export const CheckedError: Story = {
+    name: 'Checked (Error)',
+    args: {
+        name: 'default-input',
+        error: true,
+        checked: true,
+    },
+};