@arbor-education/design-system.components 0.1.5 → 0.2.0

package/src/components/formField/inputs/checkbox/CheckboxGroup.test.tsx

@@ -0,0 +1,127 @@
+import { expect, test, describe, vi } from 'vitest';
+import { CheckboxGroup } from './CheckboxGroup';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('CheckboxGroup component', () => {
+  const mockOptions = [
+    { id: 'option1', label: 'Option 1', checked: false, onChange: vi.fn() },
+    { id: 'option2', label: 'Option 2', checked: true, onChange: vi.fn() },
+    { id: 'option3', label: 'Option 3', checked: false, onChange: vi.fn() },
+  ];
+
+  test('renders fieldset with legend', () => {
+    render(
+      <CheckboxGroup legend="Choose options" options={mockOptions} />,
+    );
+    expect(screen.getByText('Choose options')).toBeInTheDocument();
+  });
+
+  test('renders all checkbox options', () => {
+    render(
+      <CheckboxGroup legend="Choose options" options={mockOptions} />,
+    );
+    expect(screen.getByRole('checkbox', { name: 'Option 1' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Option 2' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Option 3' })).toBeInTheDocument();
+  });
+
+  test('applies checked state to checkboxes', () => {
+    render(
+      <CheckboxGroup legend="Choose options" options={mockOptions} />,
+    );
+    const option1 = screen.getByRole('checkbox', { name: 'Option 1' }) as HTMLInputElement;
+    const option2 = screen.getByRole('checkbox', { name: 'Option 2' }) as HTMLInputElement;
+    const option3 = screen.getByRole('checkbox', { name: 'Option 3' }) as HTMLInputElement;
+
+    expect(option1.checked).toBe(false);
+    expect(option2.checked).toBe(true);
+    expect(option3.checked).toBe(false);
+  });
+
+  test('calls onChange when a checkbox is clicked', () => {
+    const handleChange1 = vi.fn();
+    const options = [
+      { id: 'option1', label: 'Option 1', checked: false, onChange: handleChange1, value: 'value1' },
+    ];
+
+    render(
+      <CheckboxGroup legend="Choose options" options={options} />,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: 'Option 1' });
+    fireEvent.click(checkbox);
+    expect(handleChange1).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        target: checkbox,
+      }),
+    );
+  });
+
+  test('renders empty group when options array is empty', () => {
+    render(
+      <CheckboxGroup legend="Choose options" options={[]} />,
+    );
+    expect(screen.getByText('Choose options')).toBeInTheDocument();
+    const checkboxes = screen.queryAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(0);
+  });
+
+  test('passes through fieldset props', () => {
+    render(
+      <CheckboxGroup
+        legend="Choose options"
+        options={mockOptions}
+        className="custom-class"
+        data-testid="test-fieldset"
+      />,
+    );
+    const fieldset = screen.getByTestId('test-fieldset');
+    expect(fieldset).toBeInTheDocument();
+    expect(fieldset).toHaveClass('custom-class');
+  });
+
+  test('renders options without labels', () => {
+    const optionsWithoutLabels = [
+      { id: 'option1', checked: false, onChange: vi.fn() },
+      { id: 'option2', checked: false, onChange: vi.fn() },
+    ];
+    render(
+      <CheckboxGroup legend="Choose options" options={optionsWithoutLabels} />,
+    );
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(2);
+  });
+
+  test('supports disabled fieldset', () => {
+    render(
+      <CheckboxGroup
+        legend="Choose options"
+        options={mockOptions}
+        disabled
+      />,
+    );
+    const fieldset = screen.getByText('Choose options').closest('fieldset');
+    expect(fieldset).toBeDisabled();
+  });
+
+  test('passes additional HTML attributes to checkboxes', () => {
+    const optionsWithAttributes = [
+      {
+        'id': 'option1',
+        'label': 'Option 1',
+        'checked': false,
+        'onChange': vi.fn(),
+        'data-custom': 'value1',
+        'aria-describedby': 'description1',
+      },
+    ];
+    render(
+      <CheckboxGroup legend="Choose options" options={optionsWithAttributes} />,
+    );
+    const checkbox = screen.getByRole('checkbox', { name: 'Option 1' });
+
+    expect(checkbox).toHaveAttribute('data-custom', 'value1');
+    expect(checkbox).toHaveAttribute('aria-describedby', 'description1');
+  });
+});

package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx

@@ -0,0 +1,17 @@
+import { Fieldset, type FieldsetProps } from 'Components/formField/fieldset/Fieldset';
+import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput';
+
+type CheckboxGroupProps = {
+  options: CheckboxInputProps[];
+} & FieldsetProps;
+
+export const CheckboxGroup = (props: CheckboxGroupProps) => {
+  const { options, ...rest } = props;
+  return (
+    <Fieldset {...rest}>
+      {options.map((option: CheckboxInputProps) => (
+        <CheckboxInput key={option.id} {...option} />
+      ))}
+    </Fieldset>
+  );
+};

package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx

@@ -1,11 +1,14 @@
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CheckboxInput } from './CheckboxInput';
+import { CheckboxGroup } from './CheckboxGroup';
 
 const meta: Meta<typeof CheckboxInput> = {
   title: 'Components/FormField/Inputs/Checkbox',
   component: CheckboxInput,
 };
 
+type Story = StoryObj<typeof meta>;
+
 export const Default = {
   parameters: {
     layout: 'centered',
@@ -19,4 +22,12 @@ export const Default = {
   },
 };
 
+export const CheckboxGroupStory: Story = {
+  render: () => {
+    return (
+      <CheckboxGroup legend="Checkbox group" options={[{ id: 'option1', label: 'Option 1' }, { id: 'option2', label: 'Option 2' }, { id: 'option3', label: 'Option 3' }]} />
+    );
+  },
+};
+
 export default meta;

package/src/components/formField/inputs/radio/RadioButtonGroup.test.tsx

@@ -0,0 +1,190 @@
+import { expect, test, describe, vi } from 'vitest';
+import { RadioButtonGroup } from './RadioButtonGroup';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+describe('RadioButtonGroup component', () => {
+  const mockOptions = [
+    { id: 'option1', value: 'value1', label: 'Option 1' },
+    { id: 'option2', value: 'value2', label: 'Option 2' },
+    { id: 'option3', value: 'value3', label: 'Option 3' },
+  ];
+
+  test('renders fieldset with legend', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Choose an option')).toBeInTheDocument();
+  });
+
+  test('renders all radio button options', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole('radio', { name: 'Option 1' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Option 2' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Option 3' })).toBeInTheDocument();
+  });
+
+  test('applies the same name attribute to all radio buttons', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={vi.fn()}
+      />,
+    );
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio) => {
+      expect(radio).toHaveAttribute('name', 'test-group');
+    });
+  });
+
+  test('initially checks the correct radio button based on checkedValue', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value2"
+        onChange={vi.fn()}
+      />,
+    );
+    const option1 = screen.getByRole('radio', { name: 'Option 1' }) as HTMLInputElement;
+    const option2 = screen.getByRole('radio', { name: 'Option 2' }) as HTMLInputElement;
+    const option3 = screen.getByRole('radio', { name: 'Option 3' }) as HTMLInputElement;
+
+    expect(option1.checked).toBe(false);
+    expect(option2.checked).toBe(true);
+    expect(option3.checked).toBe(false);
+  });
+
+  test('calls onChange when a radio button is clicked', () => {
+    const handleChange = vi.fn();
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={handleChange}
+      />,
+    );
+    const option2 = screen.getByRole('radio', { name: 'Option 2' });
+    fireEvent.click(option2);
+    expect(handleChange).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
+      target: expect.objectContaining({
+        value: 'value2',
+      }),
+    }));
+  });
+
+  test('renders with single option', () => {
+    const singleOption = [{ id: 'option1', value: 'value1', label: 'Only Option' }];
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={singleOption}
+        checkedValue="value1"
+        onChange={vi.fn()}
+      />,
+    );
+    const radios = screen.getAllByRole('radio');
+    expect(radios).toHaveLength(1);
+    expect(screen.getByRole('radio', { name: 'Only Option' })).toBeInTheDocument();
+  });
+
+  test('renders empty group when options array is empty', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={[]}
+        checkedValue=""
+        onChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Choose an option')).toBeInTheDocument();
+    const radios = screen.queryAllByRole('radio');
+    expect(radios).toHaveLength(0);
+  });
+
+  test('passes through fieldset props', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={vi.fn()}
+        className="custom-class"
+        data-testid="test-fieldset"
+      />,
+    );
+    const fieldset = screen.getByTestId('test-fieldset');
+    expect(fieldset).toBeInTheDocument();
+    expect(fieldset).toHaveClass('custom-class');
+  });
+
+  test('updates checked state when checkedValue changes', () => {
+    const { rerender } = render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={vi.fn()}
+      />,
+    );
+
+    let option1 = screen.getByRole('radio', { name: 'Option 1' }) as HTMLInputElement;
+    let option2 = screen.getByRole('radio', { name: 'Option 2' }) as HTMLInputElement;
+    expect(option1.checked).toBe(true);
+    expect(option2.checked).toBe(false);
+
+    rerender(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value2"
+        onChange={vi.fn()}
+      />,
+    );
+
+    option1 = screen.getByRole('radio', { name: 'Option 1' }) as HTMLInputElement;
+    option2 = screen.getByRole('radio', { name: 'Option 2' }) as HTMLInputElement;
+    expect(option1.checked).toBe(false);
+    expect(option2.checked).toBe(true);
+  });
+
+  test('supports disabled fieldset', () => {
+    render(
+      <RadioButtonGroup
+        legend="Choose an option"
+        name="test-group"
+        options={mockOptions}
+        checkedValue="value1"
+        onChange={vi.fn()}
+        disabled
+      />,
+    );
+    const fieldset = screen.getByText('Choose an option').closest('fieldset');
+    expect(fieldset).toBeDisabled();
+  });
+});

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -0,0 +1,22 @@
+import type { ChangeEvent } from 'react';
+import { RadioButtonInput, type RadioButtonInputProps } from './RadioButtonInput';
+import { Fieldset, type FieldsetProps } from '../../fieldset/Fieldset';
+
+export type RadioButtonGroupProps = {
+  name: string;
+  options: RadioButtonInputProps[];
+  checkedValue: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+} & Omit<FieldsetProps, 'onChange'>;
+
+export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
+  const { legend, name, options, checkedValue, onChange, ...rest } = props;
+
+  return (
+    <Fieldset legend={legend} {...rest}>
+      {options.map((option: RadioButtonInputProps) => (
+        <RadioButtonInput key={option.id} name={name} value={option.value} label={option.label} checked={checkedValue === option.value} onChange={onChange} />
+      ))}
+    </Fieldset>
+  );
+};

package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 import { RadioButtonInput } from './RadioButtonInput';
+import { RadioButtonGroup } from './RadioButtonGroup';
+import { useState } from 'react';
 
 const meta = {
   title: 'Components/FormField/Inputs/RadioButton',
@@ -87,11 +89,18 @@ export const DisabledChecked: Story = {
 
 // Radio button group example
 export const RadioGroup: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-      <RadioButtonInput name="group" value="option1" label="Option 1" />
-      <RadioButtonInput name="group" value="option2" label="Option 2" checked />
-      <RadioButtonInput name="group" value="option3" label="Option 3" />
-    </div>
-  ),
+  render: () => {
+    const options = [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }];
+    const [checkedValue, setCheckedValue] = useState<string>(options[0]?.value ?? '');
+
+    return (
+      <RadioButtonGroup
+        legend="Radio group"
+        name="group"
+        options={options}
+        checkedValue={checkedValue}
+        onChange={e => setCheckedValue(e.target.value)}
+      />
+    );
+  },
 };

package/src/components/formField/label/label.scss

@@ -1,7 +1,7 @@
 .ds-label {
   font-family: var(--font-family-standard);
   font-size: var(--font-size-2-13);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;
   margin-bottom: var(--form-field-spacing-vertical);

package/src/components/separator/Separator.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/react-vite';
+import { Separator } from './Separator';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+};
+
+export const Default = {
+  args: {
+    title: 'titleValue',
+  },
+};
+
+export default meta;

package/src/components/separator/Separator.test.tsx

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Separator } from './Separator';
+import '@testing-library/jest-dom/vitest';
+
+test('Separator says hello', () => {
+  render(<Separator />);
+
+  expect(screen.getByRole('separator')).toBeInTheDocument();
+});

package/src/components/separator/Separator.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { Separator as RadixSeparator } from 'radix-ui';
+
+type SeparatorProps = {
+  className?: string;
+} & RadixSeparator.SeparatorProps;
+
+export const Separator = (props: SeparatorProps) => {
+  const {
+    className,
+    ...rest
+  } = props;
+
+  return <RadixSeparator.Root className={classNames('ds-separator', className)} {...rest} />;
+};

package/src/components/separator/separator.scss

@@ -0,0 +1,6 @@
+.ds-separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--page-base-color-border);
+  margin: var(--spacing-small) 0;
+}

package/src/components/table/Table.stories.tsx

@@ -9,6 +9,7 @@ import { useState, type ComponentProps } from 'react';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
 import { HideColumnsDropdown } from './HideColumnsDropdown';
+import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -64,7 +65,7 @@ const HeaderContent = [
   </div>,
   <div key={1} style={{ display: 'flex', gap: '1rem' }}>
     <Icon name="download" />
-    <Icon name="settings" />
+    <TableSettingsDropdown />
     <Icon name="circle-help" />
     <Icon name="expand" />
   </div>,
@@ -102,6 +103,12 @@ export const WithHeader: Story = {
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
     headerContent: HeaderContent,
+    onTableSettingsChanged: (newSettings) => {
+      console.log('Settings changed', newSettings);
+    },
+    onTableSettingsReset: () => {
+      console.log('Settings reset');
+    },
   },
 };