@arbor-education/design-system.components 0.0.4 → 0.0.5

package/src/components/formField/inputs/checkbox/checkboxInput.scss

@@ -0,0 +1,96 @@
+.ds-checkbox-input__container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--checkbox-spacing-gap-horizontal);
+
+  &:focus-within {
+    outline: var(--focus-border) solid var(--color-brand-500);
+    border-radius: var(--checkbox-radius);
+  }
+
+  .ds-checkbox-input {
+    width: var(--icon-size-small);
+    height: var(--icon-size-small);
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: var(--checkbox-input-control-radius);
+    border: none;
+    box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-default-color-border);
+    background-color: var(--checkbox-input-control-unchecked-default-color-background);
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    display: flex;
+    position: relative;
+
+    .ds-checkbox-input__icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-hover-color-border);
+      background-color: var(--checkbox-input-control-unchecked-hover-color-background);
+    }
+  }
+
+  .ds-checkbox-label__text {
+    flex: 1 0 0;
+    font-size: var(--type-body-p-size);
+    font-weight: var(--type-body-p-weight);
+    color: var(--checkbox-default-color-text);
+    line-height: var(--line-height-default);
+  }
+
+  input:checked + .ds-checkbox-input {
+    background-color: var(--checkbox-input-control-checked-default-color-background);
+    box-shadow: none;
+  }
+
+  input:indeterminate + .ds-checkbox-input {
+    background-color: var(--checkbox-input-control-indeterminate-default-color-background);
+    box-shadow: none;
+  }
+
+  input:disabled + .ds-checkbox-input {
+    background-color: var(--checkbox-input-control-unchecked-disabled-color-background);
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-disabled-color-border);
+  }
+
+  input:checked:disabled + .ds-checkbox-input {
+    background-color: var(--checkbox-input-control-checked-disabled-color-background);
+  }
+
+  input:indeterminate:disabled + .ds-checkbox-input {
+    background-color: var(--checkbox-input-control-indeterminate-disabled-color-background);
+  }
+
+  input:checked:not(:disabled) + .ds-checkbox-input:hover {
+    background-color: var(--checkbox-input-control-checked-hover-color-background);
+  }
+
+  input:indeterminate:not(:disabled) + .ds-checkbox-input:hover {
+    background-color: var(--checkbox-input-control-indeterminate-hover-color-background);
+  }
+
+  &:hover {
+    .ds-checkbox-label__text {
+      color: var(--checkbox-hover-color-text);
+    }
+  }
+
+  /* Hide the native checkbox input */
+  input[type='checkbox'] {
+    clip-path: inset(50%);
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+}

package/src/components/formField/inputs/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,185 @@
+import type { Meta } from '@storybook/react-vite';
+import { Dropdown } from './Dropdown';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+export const Default = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    multiple: false,
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const WithIcon = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1', icon: '3-dot' },
+      { label: 'Option 2', value: 'option2', icon: 'user' },
+      { label: 'Option 3', value: 'option3', icon: 'chart-spline' },
+    ],
+    multiple: true,
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const DefaultWithGroups = {
+  args: {
+    title: 'titleValue',
+    multiple: true,
+    options: [
+      { label: 'Option 5', value: 'option5', group: 'Group 1' },
+      { label: 'Option 6', value: 'option6', group: 'Group 1' },
+      { label: 'Option 7', value: 'option7', group: 'Group 2' },
+      { label: 'Option 8', value: 'option8', group: 'Group 2' },
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+      { label: 'Option 4', value: 'option4' },
+      { label: 'Option 9', value: 'option9' },
+    ],
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const DefaultMultiSelect = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    multiple: true,
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const Placeholder = {
+  args: {
+    placeholder: 'placeholder',
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const EmptyPlaceHolder = {
+  args: {
+    placeholder: '',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    disabled: false,
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const WithError = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    disabled: false,
+    errorText: 'This field is required',
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const Disabled = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    disabled: true,
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const WithGroups = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1', group: 'Group 1' },
+      { label: 'Option 2', value: 'option2', group: 'Group 1' },
+      { label: 'Option 4', value: 'option4', group: 'Group 2' },
+      { label: 'Option 5', value: 'option5', group: 'Group 2' },
+      { label: 'Option 3', value: 'option3' },
+      { label: 'Option 6', value: 'option6' },
+      { label: 'Option 7', value: 'option7' },
+    ],
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const MultilineItems = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1', header: 'header1' },
+      { label: 'Option 2', value: 'option2', header: 'header2' },
+      { label: 'Option 3', value: 'option3', header: 'header3' },
+      { label: 'Option 4', value: 'option4', header: 'header4' },
+    ],
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const MultilineItemsGrouped = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1', header: 'header1' },
+      { label: 'Option 2', value: 'option2', header: 'header2' },
+      { label: 'Option 3', value: 'option3', header: 'header3' },
+      { label: 'Option 4', value: 'option4', header: 'header4' },
+      { label: 'Option 5', value: 'option5', header: 'header5', group: 'Group 1' },
+      { label: 'Option 6', value: 'option6', header: 'header6', group: 'Group 1' },
+      { label: 'Option 7', value: 'option7', header: 'header7', group: 'Group 2' },
+      { label: 'Option 8', value: 'option8', header: 'header8', group: 'Group 2' },
+      { label: 'Option 9', value: 'option9', header: 'header9' },
+    ],
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
+export const MultilineItemsGroupedMultiSelect = {
+  args: {
+    title: 'titleValue',
+    multiple: true,
+    options: [
+      { label: 'Option 5', value: 'option5', header: 'header5', group: 'Group 1' },
+      { label: 'Option 6', value: 'option6', header: 'header6', group: 'Group 1' },
+      { label: 'Option 7', value: 'option7', header: 'header7', group: 'Group 2' },
+      { label: 'Option 8', value: 'option8', header: 'header8', group: 'Group 2' },
+      { label: 'Option 1', value: 'option1', header: 'header1' },
+      { label: 'Option 2', value: 'option2', header: 'header2' },
+      { label: 'Option 3', value: 'option3', header: 'header3' },
+      { label: 'Option 4', value: 'option4', header: 'header4' },
+      { label: 'Option 9', value: 'option9', header: 'header9' },
+    ],
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+export default meta;

package/src/components/formField/inputs/dropdown/Dropdown.test.tsx

@@ -0,0 +1,185 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { Dropdown } from './Dropdown';
+
+describe('Dropdown component', () => {
+  test('renders with default placeholder', () => {
+    render(
+      <Dropdown
+        onSelectionChange={vi.fn()}
+        disabled={false}
+        options={[{ label: 'Label 1', value: 'label1' }]}
+      />,
+    );
+    expect(screen.getByText('Select')).toBeInTheDocument();
+  });
+
+  test('renders custom placeholder', () => {
+    render(
+      <Dropdown
+        onSelectionChange={vi.fn()}
+        placeholder="Hello I'm a Dropdown!"
+        disabled={false}
+        options={[{ label: 'Label 1', value: 'label1' }]}
+      />,
+    );
+    expect(screen.getByText("Hello I'm a Dropdown!")).toBeInTheDocument();
+  });
+
+  test('click opens options', async () => {
+    render(
+      <Dropdown
+        onSelectionChange={vi.fn()}
+        placeholder="Hello I'm a Dropdown!"
+        disabled={false}
+        options={[{ label: 'Label 1', value: 'label1' }]}
+      />,
+    );
+
+    await userEvent.click(screen.getByText("Hello I'm a Dropdown!"));
+    expect(await screen.findByText('Label 1')).toBeInTheDocument();
+  });
+
+  test('does not open options when disabled', async () => {
+    render(
+      <Dropdown
+        onSelectionChange={vi.fn()}
+        placeholder="Disabled Dropdown"
+        disabled={true}
+        options={[{ label: 'Label 1', value: 'label1' }]}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Disabled Dropdown'));
+    expect(screen.queryByText('Label 1')).toBeNull();
+  });
+
+  test('clicking option triggers onSelectionChange', async () => {
+    const onSelectionChange = vi.fn();
+    render(
+      <Dropdown
+        onSelectionChange={onSelectionChange}
+        placeholder="Hello I'm a Dropdown!"
+        disabled={false}
+        options={[{ label: 'Label 1', value: 'label1' }]}
+      />,
+    );
+
+    await userEvent.click(screen.getByText("Hello I'm a Dropdown!"));
+    const option = await screen.findByText('Label 1');
+    await userEvent.click(option);
+
+    expect(onSelectionChange).toHaveBeenCalledWith(['label1']);
+  });
+
+  test('renders multiple options (Default story)', async () => {
+    render(
+      <Dropdown
+        options={[
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
+          { label: 'Option 3', value: 'option3' },
+        ]}
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Select'));
+    expect(await screen.findByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+    expect(screen.getByText('Option 3')).toBeInTheDocument();
+  });
+
+  test('renders icons (WithIcon story)', async () => {
+    render(
+      <Dropdown
+        options={[
+          { label: 'Option 1', value: 'option1', icon: '3-dot' },
+          { label: 'Option 2', value: 'option2', icon: 'user' },
+        ]}
+        multiple
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Select'));
+    expect(await screen.findByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+  });
+
+  test('supports multi-select (DefaultMultiSelect story)', async () => {
+    const onSelectionChange = vi.fn();
+    render(
+      <Dropdown
+        multiple
+        options={[
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
+        ]}
+        onSelectionChange={onSelectionChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Select'));
+    const option1 = await screen.findByText('Option 1');
+    const option2 = screen.getByText('Option 2');
+
+    await userEvent.click(option1);
+    await userEvent.click(option2);
+
+    expect(onSelectionChange).toHaveBeenCalledWith(['option1', 'option2']);
+  });
+
+  test('applies error class when errorText is provided', () => {
+    render(
+      <Dropdown
+        onSelectionChange={vi.fn()}
+        placeholder="Select"
+        disabled={false}
+        errorText="Something went wrong"
+        options={[{ label: 'Label 1', value: 'label1' }]}
+      />,
+    );
+
+    const selectElement = screen.getByRole('button');
+    expect(selectElement).toHaveClass('ds-button--error');
+  });
+
+  test('renders grouped options (WithGroups story)', async () => {
+    render(
+      <Dropdown
+        options={[
+          { label: 'Option 1', value: 'option1', group: 'Group 1' },
+          { label: 'Option 2', value: 'option2', group: 'Group 1' },
+          { label: 'Option 3', value: 'option3' },
+        ]}
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Select'));
+
+    expect(await screen.findByText('Group 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 3')).toBeInTheDocument();
+  });
+
+  test('renders multiline items (MultilineItems story)', async () => {
+    render(
+      <Dropdown
+        options={[
+          { label: 'Option 1', value: 'option1', header: 'header1' },
+          { label: 'Option 2', value: 'option2', header: 'header2' },
+        ]}
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    await userEvent.click(screen.getByText('Select'));
+
+    expect(await screen.findByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('header1')).toBeInTheDocument();
+  });
+});

package/src/components/formField/inputs/dropdown/Dropdown.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { DropdownWrapper } from 'Components/formField/inputs/dropdown/wrapper/DropdownWrapper';
+import {
+  DropdownItemRenderer,
+  type DropdownOptionsProps,
+} from 'Components/formField/inputs/dropdown/items/DropdownItemRenderer';
+
+export type DropdownInputProps = {
+  placeholder?: string;
+  options: DropdownOptionsProps[];
+  multiple?: boolean;
+  disabled?: boolean;
+  errorText?: string;
+  onSelectionChange: (value: string[]) => void;
+};
+
+export const Dropdown = (props: DropdownInputProps) => {
+  const { options, disabled, multiple, placeholder, errorText, onSelectionChange } = props;
+
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [renderedSelectContent, setRenderedSelectContent] = useState('');
+
+  useEffect(() => {
+    onSelectionChange(selectedValues);
+
+    if (selectedValues.length === 0) {
+      setRenderedSelectContent(placeholder ?? 'Select');
+    }
+    else if (selectedValues.length === 1) {
+      const selectedLabel = options.find(option => option.value === selectedValues[0])?.label;
+      if (selectedLabel) setRenderedSelectContent(selectedLabel);
+    }
+    else {
+      setRenderedSelectContent(placeholder ?? `Select (${selectedValues.length})`);
+    }
+  }, [selectedValues, options, placeholder, onSelectionChange]);
+
+  // Flatten grouped options into a single array with headers
+  const UNGROUPED_KEY = 'Ungrouped';
+  const groupedOptions = options.reduce((acc, option) => {
+    const key = option.group ?? UNGROUPED_KEY;
+    if (!acc[key]) acc[key] = [];
+    acc[key].push(option);
+    return acc;
+  }, {} as Record<string, DropdownOptionsProps[]>);
+
+  const flatOptions: (DropdownOptionsProps | { headerLabel: string })[] = [];
+  Object.entries(groupedOptions).forEach(([groupName, groupItems]) => {
+    if (Object.keys(groupedOptions).length > 1) {
+      flatOptions.push({ headerLabel: groupName });
+    }
+    flatOptions.push(...groupItems);
+  });
+
+  return (
+    <DropdownWrapper
+      placeholder={renderedSelectContent}
+      multiple={multiple}
+      errorText={errorText}
+      onSelectionChange={(value: string[]) => setSelectedValues(value)}
+      disabled={disabled}
+    >
+      {flatOptions.map(item =>
+        'headerLabel' in item
+          ? (
+              <h3 key={`${item.headerLabel}-header`} className="ds-dropdown-wrapper--items--header">
+                {item.headerLabel}
+              </h3>
+            )
+          : (
+              <DropdownItemRenderer
+                value={item.value}
+                header={item.header}
+                label={item.label}
+                icon={item.icon}
+                key={item.value}
+              />
+            ),
+      )}
+    </DropdownWrapper>
+  );
+};

package/src/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Icon } from 'Components/icon/Icon';
+import { Button } from 'Components/button/Button';
+
+type DropdownButtonProps = {
+  label: string;
+  disabled?: boolean;
+  error?: boolean;
+  pressed?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+export const DropdownButton: React.FC<DropdownButtonProps> = (props: DropdownButtonProps) => {
+  const {
+    label,
+    disabled,
+    error,
+    pressed,
+    onClick,
+  } = props;
+
+  const classNames = [
+    'ds-dropdown-select',
+    pressed ? 'ds-dropdown-select--pressed' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Button
+      error={error}
+      type="dropdown"
+      className={classNames}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span>{label}</span>
+      <span className="ds-dropdown-select--icon"><Icon name="chevron-down" /></span>
+    </Button>
+  );
+};

package/src/components/formField/inputs/dropdown/buttons/dropdownButton/dropdownButton.scss

@@ -0,0 +1,12 @@
+.ds-dropdown-select {
+  &--pressed {
+    border: 1px solid var(--button-medium-secondary-default-color-border);
+    background: var(--button-medium-secondary-active-color-background);
+  }
+
+  &--icon {
+    margin-left: var(--spacing-small);
+    display: inline-flex;
+    align-items: center;
+  }
+}

package/src/components/formField/inputs/dropdown/dropdown.scss

@@ -0,0 +1,24 @@
+
+.ds-dropdown {
+  select {
+    display: flex;
+    padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-small);
+    background: var(--button-medium-secondary-default-color-background);
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--color-brand-500);
+      background: var(--button-medium-secondary-default-color-background);
+    }
+
+    &:hover {
+      border: 1px solid var(--color-grey-500);
+      background: var(--color-mono-white);
+      cursor: pointer;
+    }
+  }
+}

package/src/components/formField/inputs/dropdown/items/DropdownItemRenderer.tsx

@@ -0,0 +1,38 @@
+// DropdownItemRenderer.tsx
+import { DropdownItem } from './dropdownItem/DropdownItem';
+import { DropdownMultiLineItem } from './dropdownMultiLineItem/DropdownMultiLineItem';
+import { type DropdownItemBaseProps } from '../wrapper/DropdownWrapper';
+import type { allowedIcons } from 'Components/icon/allowedIcons';
+
+export type DropdownOptionsProps = {
+  label: string;
+  header?: string;
+  group?: string;
+  icon?: keyof typeof allowedIcons;
+} & DropdownItemBaseProps;
+
+export const DropdownItemRenderer = (props: DropdownOptionsProps) => {
+  const { value, label, header, icon, selected, onSelection } = props;
+
+  return (
+    header
+      ? (
+          <DropdownMultiLineItem
+            value={value}
+            label={label}
+            header={header}
+            selected={selected}
+            onSelection={onSelection}
+          />
+        )
+      : (
+          <DropdownItem
+            value={value}
+            label={label}
+            icon={icon}
+            selected={selected}
+            onSelection={onSelection}
+          />
+        )
+  );
+};