@indico-data/design-system 2.6.0 → 2.7.0

package/lib/src/components/forms/checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CheckboxProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    id: string;
+    label: string;
+    name: string;
+    value?: string;
+    isChecked?: boolean | undefined;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+}
+export declare const Checkbox: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const GroupCheckbox: Story;

package/lib/src/components/forms/checkbox/__tests__/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/forms/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/lib/src/components/index.d.ts

@@ -4,3 +4,4 @@ export { Icon } from './icons';
 export { Table } from './table';
 export { Input } from './forms/input';
 export { Radio } from './forms/radio';
+export { Checkbox } from './forms/checkbox';

package/lib/src/index.d.ts

@@ -9,3 +9,4 @@ export { Icon } from './components/icons';
 export { Table } from './components/table';
 export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
+export { Checkbox } from './components/forms/checkbox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/checkbox/Checkbox.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Checkbox from './Checkbox.stories';
+
+<Meta title="Forms/Checkbox" name="Checkbox" />
+
+# Checkbox
+This component may be used on it's on or as part of a group. The source code is an example of how we would use it as part of a group.
+
+<Canvas of={Checkbox.Default} source={{
+    code: `
+<div>
+  <h2 className="mb-2">Checkbox Buttons</h2>
+  <Checkbox
+    onChange={onChange}
+    id={id}
+    label={label}
+    name={name}
+    value={value}
+    isDisabled={isDisabled}
+    isChecked={isChecked}
+  />
+</div>
+    `,
+  }} />
+<Controls of={Checkbox.Default} />
+
+## Handling Required State
+The checkbox component does not have a required state. If you need to enforce a required state, this will be managed in a parent component or wrapper element which handles the state. You will need to verify against a value that matches the value in a state array for the checkbox buttons and make sure it is not null.
+
+
+<Canvas of={Checkbox.GroupCheckbox} source={{
+    code: `
+const checkboxList = [
+  { id: 'one', label: 'Checkbox Label One', name: 'Checkbox', value: 'check1' },
+  { id: 'two', label: 'Checkbox Label Two', name: 'Checkbox', value: 'check2' },
+  { id: 'three', label: 'Checkbox Label Three', name: 'Checkbox', value: 'check3' },
+];
+
+export const CheckboxGroup = {
+    const [selectedCheckboxes, setSelectedCheckboxes] = useState<string[]>([]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { value, checked } = e.target;
+      checked
+        ? setSelectedCheckboxes((prev) => [...prev, value])
+        : setSelectedCheckboxes((prev) => prev.filter((item) => item !== value));
+
+    return (
+      <div>
+        <h2 className="mb-2">Checkbox Buttons</h2>
+        {checkboxList.map((checkbox) => (
+          <Checkbox
+            key={checkbox.id}
+            onChange={handleChange}
+            id={checkbox.id}
+            label={checkbox.label}
+            name={checkbox.name}
+            value={checkbox.value}
+            isDisabled={args.isDisabled}
+            isChecked={selectedCheckboxes.includes(checkbox.value)}
+          />
+        ))}
+      </div>
+    );
+  },
+    `,
+  }} />

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,169 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox, CheckboxProps } from './Checkbox';
+import { SetStateAction, useState } from 'react';
+
+const meta: Meta = {
+  title: 'Forms/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    ref: {
+      table: {
+        disable: true,
+      },
+    },
+    onChange: {
+      control: false,
+      description: 'onChange event handler',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
+        },
+      },
+      action: 'onChange',
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the checkbox field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the checkbox field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    value: {
+      control: 'text',
+      description: 'This holds the value that will be emitted when the checkbox is selected',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    id: {
+      control: 'text',
+      description: 'This explains what button group this checkbox belongs to.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the checkbox field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+    isChecked: {
+      control: 'boolean',
+      description: 'Toggles the checked state of the checkbox field when true',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean | undefined',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+const checkboxList = [
+  { id: 'one', label: 'Checkbox Label One', name: 'Checkbox', value: 'check1' },
+  { id: 'two', label: 'Checkbox Label Two', name: 'Checkbox', value: 'check2' },
+  { id: 'three', label: 'Checkbox Label Three', name: 'Checkbox', value: 'check3' },
+];
+
+export const Default: Story = {
+  args: {
+    id: 'one',
+    label: 'Checkbox Label',
+    name: 'checkbox',
+    value: 'checkbox',
+    isDisabled: false,
+    isChecked: false,
+  },
+  render: (args) => {
+    return (
+      <div>
+        <h2 className="mb-2">Checkbox Buttons</h2>
+        <Checkbox
+          key={args.id}
+          onChange={args.onChange}
+          id={args.id}
+          label={args.label}
+          name={args.name}
+          value={args.value}
+          isDisabled={args.isDisabled}
+          isChecked={args.isChecked}
+        />
+      </div>
+    );
+  },
+};
+
+export const GroupCheckbox: Story = {
+  args: {
+    id: 'one',
+    label: 'Checkbox Label',
+    name: 'checkbox',
+    value: 'checkbox',
+    isDisabled: false,
+    isChecked: false,
+  },
+  render: (args) => {
+    const [selectedCheckboxes, setSelectedCheckboxes] = useState<string[]>([]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { value, checked } = e.target;
+      checked
+        ? setSelectedCheckboxes((prev) => [...prev, value])
+        : setSelectedCheckboxes((prev) => prev.filter((item) => item !== value));
+    };
+
+    return (
+      <div>
+        <h2 className="mb-2">Checkbox Buttons</h2>
+        {checkboxList.map((checkbox) => (
+          <Checkbox
+            key={checkbox.id}
+            onChange={handleChange}
+            id={checkbox.id}
+            label={checkbox.label}
+            name={checkbox.name}
+            value={checkbox.value}
+            isDisabled={args.isDisabled}
+            isChecked={selectedCheckboxes.includes(checkbox.value)}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/forms/checkbox/Checkbox.tsx

@@ -0,0 +1,55 @@
+import { isChecked } from '@indico-data/utils/dist/validators';
+import React from 'react';
+
+export interface CheckboxProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
+  id: string;
+  label: string;
+  name: string;
+  value?: string;
+  isChecked?: boolean | undefined;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+}
+
+export const Checkbox = ({
+  ref,
+  id,
+  label,
+  name,
+  value,
+  onChange,
+  isDisabled,
+  isChecked = false,
+  ...rest
+}: CheckboxProps) => {
+  return (
+    <div className="form-control">
+      <div className="checkbox-wrapper">
+        <input
+          data-testid={`form-checkbox-input-${name}`}
+          {...rest}
+          className="checkbox-input"
+          type="checkbox"
+          id={id}
+          checked={isChecked}
+          name={name}
+          value={value}
+          disabled={isDisabled}
+          ref={ref}
+          onChange={onChange}
+          tabIndex={0}
+          aria-describedby={id}
+          aria-label={label}
+        />
+        <label
+          htmlFor={id}
+          className="checkbox-input-label"
+          data-testid={`label-checkbox-input-${name}`}
+        >
+          {label}
+        </label>
+      </div>
+    </div>
+  );
+};

package/src/components/forms/checkbox/__tests__/Checkbox.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+import userEvent from '@testing-library/user-event';
+
+const handleOnChange = jest.fn();
+
+describe('checkbox', () => {
+  it('renders the checkbox input field', () => {
+    render(
+      <Checkbox
+        label="Option 1"
+        name="name"
+        ref={undefined}
+        onChange={handleOnChange}
+        id={'ButtonGroup'}
+      />,
+    );
+    expect(screen.getByLabelText('Option 1')).toBeInTheDocument();
+  });
+
+  it('calls the onChange function when the checkbox input is clicked', async () => {
+    render(
+      <Checkbox
+        label="Option 1"
+        name="name"
+        ref={undefined}
+        onChange={handleOnChange}
+        id={'ButtonGroup'}
+      />,
+    );
+    expect(handleOnChange).toHaveBeenCalledTimes(0);
+    await userEvent.click(screen.getByLabelText('Option 1'));
+    expect(handleOnChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/forms/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -0,0 +1,98 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-checkbox-background-color: var(--pf-white-color);
+  --pf-checkbox-check-color: var(--pf-primary-color);
+  --pf-checkbox-border-color: var(--pf-gray-color);
+  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-check-color: var(--pf-white-color);
+  --pf-checkbox-border-color: var(--pf-white-color);
+  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
+}
+
+.form-control {
+  .checkbox-wrapper {
+    display: flex;
+    margin-bottom: var(--pf-margin-2);
+    align-items: center;
+  }
+  .checkbox-input {
+    margin: 0;
+    margin-right: var(--pf-margin-2);
+    cursor: pointer;
+  }
+  .checkbox-input-label {
+    cursor: pointer;
+  }
+  [type='checkbox']:checked,
+  [type='checkbox']:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type='checkbox']:checked + label,
+  [type='checkbox']:not(:checked) + label {
+    position: relative;
+    padding-left: var(--pf-padding-7);
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+  }
+  [type='checkbox']:checked + label:before,
+  [type='checkbox']:not(:checked) + label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--pf-checkbox-border-color);
+    border-radius: var(--pf-rounded);
+    background: var(--pf-checkbox-background-color);
+  }
+  [type='checkbox']:checked + label:after,
+  [type='checkbox']:not(:checked) + label:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: var(--pf-checkbox-check-color);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: var(--pf-rounded);
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+  [type='checkbox']:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  [type='checkbox']:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  [type='checkbox']:disabled,
+  [type='checkbox']:disabled + label {
+    cursor: not-allowed;
+  }
+
+  [type='checkbox']:disabled + label {
+    color: var(--pf-checkbox-disabled-color);
+    opacity: 0.5;
+  }
+
+  [type='checkbox']:disabled + label:before {
+    border-color: var(--pf-checkbox-disabled-color);
+  }
+
+  [type='checkbox']:disabled + label:after {
+    background: var(--pf-checkbox-disabled-color);
+  }
+}

package/src/components/index.ts

@@ -4,3 +4,4 @@ export { Icon } from './icons';
 export { Table } from './table';
 export { Input } from './forms/input';
 export { Radio } from './forms/radio';
+export { Checkbox } from './forms/checkbox';

package/src/index.ts

@@ -63,3 +63,4 @@ export { Icon } from './components/icons';
 export { Table } from './components/table';
 export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
+export { Checkbox } from './components/forms/checkbox';

package/src/styles/index.scss

@@ -8,6 +8,7 @@
 @import '../components/table/styles/Table.scss';
 @import '../components/forms/input/styles/Input.scss';
 @import '../components/forms/radio/styles/Radio.scss';
+@import '../components/forms/checkbox/styles/Checkbox.scss';
 
 @import 'typography';
 @import 'colors';