@arbor-education/design-system.components 0.0.7 → 0.1.0

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

@@ -0,0 +1,368 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { Dropdown } from './Dropdown';
+import { Button } from 'Components/button/Button';
+
+describe('Dropdown component', () => {
+  test('renders dropdown with trigger and content', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    expect(screen.getByText('Open Menu')).toBeInTheDocument();
+  });
+
+  test('opens dropdown when trigger is clicked', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    expect(await screen.findByText('Item 1')).toBeInTheDocument();
+  });
+
+  test('renders multiple dropdown items', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+          <Dropdown.Item>Item 3</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    expect(await screen.findByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+  });
+
+  test('calls onSelect when item is clicked', async () => {
+    const onClick = vi.fn();
+
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item onClick={onClick}>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    const item = await screen.findByText('Item 1');
+    await userEvent.click(item);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  test('closes dropdown after item selection', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    const item = await screen.findByText('Item 1');
+    await userEvent.click(item);
+
+    // Wait for dropdown to close
+    await waitFor(() => expect(screen.queryByText('Item 1')).not.toBeInTheDocument());
+  });
+
+  test('passes through props to Menu.Root', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Dropdown onOpenChange={onOpenChange}>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    expect(trigger).toBeInTheDocument();
+  });
+
+  test('renders dropdown with disabled item', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item disabled>Disabled Item</Dropdown.Item>
+          <Dropdown.Item>Enabled Item</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    const disabledItem = await screen.findByText('Disabled Item');
+    const enabledItem = screen.getByText('Enabled Item');
+
+    expect(disabledItem).toBeInTheDocument();
+    expect(enabledItem).toBeInTheDocument();
+  });
+
+  test('renders dropdown content with custom className', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content contentProps={{ className: 'custom-dropdown-content' }}>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    const content = await screen.findByText('Item 1');
+    expect(content.closest('.ds-dropdown__content')).toBeInTheDocument();
+  });
+
+  test('renders dropdown item with custom className', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item className="custom-item">Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    const item = await screen.findByText('Item 1');
+    expect(item).toHaveClass('ds-dropdown__item', 'custom-item');
+  });
+
+  test('renders complex content inside dropdown', async () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <div>
+            <Dropdown.Item>Item 1</Dropdown.Item>
+            <div>Separator</div>
+            <Dropdown.Item>Item 2</Dropdown.Item>
+          </div>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    const trigger = screen.getByText('Open Menu');
+    await userEvent.click(trigger);
+
+    expect(await screen.findByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Separator')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  test('handles controlled open state', async () => {
+    const { rerender } = render(
+      <Dropdown open={false}>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+
+    rerender(
+      <Dropdown open={true}>
+        <Dropdown.Trigger>
+          <Button>Open Menu</Button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown>,
+    );
+
+    expect(await screen.findByText('Item 1')).toBeInTheDocument();
+  });
+
+  describe('Dropdown.SelectItem', () => {
+    test('renders select item with selected state', async () => {
+      render(
+        <Dropdown>
+          <Dropdown.Trigger>
+            <Button>Open Menu</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.SelectItem selected={true} onSelectChange={vi.fn()}>
+              Item 1
+            </Dropdown.SelectItem>
+          </Dropdown.Content>
+        </Dropdown>,
+      );
+
+      const trigger = screen.getByText('Open Menu');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('Item 1');
+      expect(item).toBeInTheDocument();
+      expect(item).toHaveClass('ds-dropdown__item', 'ds-dropdown__item--select');
+      const checkIcon = item.querySelector('.ds-dropdown__item--check-icon');
+      expect(checkIcon).toBeInTheDocument();
+    });
+
+    test('renders select item with unselected state', async () => {
+      render(
+        <Dropdown>
+          <Dropdown.Trigger>
+            <Button>Open Menu</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.SelectItem selected={false} onSelectChange={vi.fn()}>
+              Item 1
+            </Dropdown.SelectItem>
+          </Dropdown.Content>
+        </Dropdown>,
+      );
+
+      const trigger = screen.getByText('Open Menu');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('Item 1');
+      expect(item).toBeInTheDocument();
+      expect(item).toHaveClass('ds-dropdown__item', 'ds-dropdown__item--select');
+      const checkIcon = item.querySelector('.ds-dropdown__item--check-icon');
+      expect(checkIcon).not.toBeInTheDocument();
+    });
+
+    test('calls onSelectChange when clicked', async () => {
+      const onSelectChange = vi.fn();
+
+      render(
+        <Dropdown>
+          <Dropdown.Trigger>
+            <Button>Open Menu</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.SelectItem selected={false} onSelectChange={onSelectChange}>
+              Item 1
+            </Dropdown.SelectItem>
+          </Dropdown.Content>
+        </Dropdown>,
+      );
+
+      const trigger = screen.getByText('Open Menu');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('Item 1');
+      await userEvent.click(item);
+
+      expect(onSelectChange).toHaveBeenCalled();
+    });
+
+    test('renders multiple select items', async () => {
+      render(
+        <Dropdown>
+          <Dropdown.Trigger>
+            <Button>Open Menu</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.SelectItem selected={true} onSelectChange={vi.fn()}>
+              Item 1
+            </Dropdown.SelectItem>
+            <Dropdown.SelectItem selected={false} onSelectChange={vi.fn()}>
+              Item 2
+            </Dropdown.SelectItem>
+            <Dropdown.SelectItem selected={true} onSelectChange={vi.fn()}>
+              Item 3
+            </Dropdown.SelectItem>
+          </Dropdown.Content>
+        </Dropdown>,
+      );
+
+      const trigger = screen.getByText('Open Menu');
+      await userEvent.click(trigger);
+
+      expect(await screen.findByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+      expect(screen.getByText('Item 3')).toBeInTheDocument();
+    });
+
+    test('handles disabled select item', async () => {
+      const onSelectChange = vi.fn();
+
+      render(
+        <Dropdown>
+          <Dropdown.Trigger>
+            <Button>Open Menu</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Dropdown.SelectItem
+              selected={false}
+              onSelectChange={onSelectChange}
+              disabled
+            >
+              Disabled Item
+            </Dropdown.SelectItem>
+          </Dropdown.Content>
+        </Dropdown>,
+      );
+
+      const trigger = screen.getByText('Open Menu');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('Disabled Item');
+      expect(item).toBeInTheDocument();
+    });
+  });
+});

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,19 @@
+import { DropdownMenu } from 'radix-ui';
+import { DropdownTrigger } from './DropdownTrigger';
+import { DropdownContent } from './DropdownContent';
+import { DropdownItem } from './items/DropdownItem';
+import { DropdownSelectItem } from './items/DropdownSelectItem';
+
+export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => {
+  const { children, ...rest } = props;
+  return (
+    <DropdownMenu.Root {...rest}>
+      {children}
+    </DropdownMenu.Root>
+  );
+};
+
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Content = DropdownContent;
+Dropdown.Item = DropdownItem;
+Dropdown.SelectItem = DropdownSelectItem;

package/src/components/dropdown/DropdownContent.tsx

@@ -0,0 +1,22 @@
+import { DropdownMenu } from 'radix-ui';
+import { useContext } from 'react';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+type DropdownContentProps = {
+  children: React.ReactNode;
+  portalProps?: DropdownMenu.DropdownMenuPortalProps;
+  contentProps?: DropdownMenu.DropdownMenuContentProps;
+};
+
+export const DropdownContent = (props: DropdownContentProps) => {
+  const { children, portalProps, contentProps } = props;
+  const popupParentRef = useContext(PopupParentContext);
+
+  return (
+    <DropdownMenu.Portal {...portalProps} container={popupParentRef.current}>
+      <DropdownMenu.Content align="start" {...contentProps} className="ds-dropdown__content">
+        {children}
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  );
+};

package/src/components/dropdown/DropdownTrigger.tsx

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'radix-ui';
+
+export const DropdownTrigger = (props: DropdownMenu.DropdownMenuTriggerProps & { children: React.ReactElement }) => {
+  const { children, ...rest } = props;
+  return (
+    <DropdownMenu.Trigger asChild {...rest}>
+      {children}
+    </DropdownMenu.Trigger>
+  );
+};

package/src/components/dropdown/dropdown.scss

@@ -0,0 +1,48 @@
+.ds-dropdown__content {
+    padding: var(--form-dropdown-spacing-vertical) var(--form-dropdown-spacing-horizontal);
+    box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
+    border-radius: var(--banner-radius);
+    background-color: var(--form-dropdown-color-background);
+    min-width: 200px;
+    border: 1px solid var(--color-grey-200);
+    font-family: var(--type-body-p-family);
+    font-size: var(--type-body-p-size);
+    font-style: normal;
+    font-weight: var(--type-body-p-weight);
+    line-height: 150%;
+}
+
+.ds-dropdown__item {
+    padding: var(--form-dropdown-form-drop-item-spacing-vertical) var(--form-dropdown-form-drop-item-spacing-horizontal);
+    border-radius: var(--form-dropdown-form-drop-item-radius, 8px);
+    display: flex;
+    align-items: center;
+    background: var(--form-dropdown-form-drop-item-default-color-background);
+    color: var(--form-dropdown-form-drop-item-default-color-text);
+    gap: var(--form-dropdown-form-drop-item-spacing-gap-horizontal);
+    cursor: pointer;
+
+    &:hover {
+        background: var(--form-dropdown-form-drop-item-hover-color-background);
+        outline: none;
+    }
+
+    &:focus-visible:not(:hover) {
+        background: var(--form-dropdown-form-drop-item-focus-default-color-background);
+        outline: var(--focus-border) solid var(--form-dropdown-form-drop-item-focus-default-color-focus);
+    }
+
+    &[aria-checked="true"] {
+        background: var(--form-dropdown-form-drop-item-active-color-background);
+        color: var(--form-dropdown-form-drop-item-active-color-text);
+    }
+
+    &[aria-disabled="true"]  {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    .ds-dropdown__item--check-icon {
+        margin-left: auto;
+    }
+}

package/src/components/dropdown/items/DropdownItem.tsx

@@ -0,0 +1,11 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+
+export const DropdownItem = (props: DropdownMenu.DropdownMenuItemProps) => {
+  const { children, className = '', ...rest } = props;
+  return (
+    <DropdownMenu.Item className={classNames('ds-dropdown__item', className)} {...rest}>
+      {children}
+    </DropdownMenu.Item>
+  );
+};

package/src/components/dropdown/items/DropdownSelectItem.tsx

@@ -0,0 +1,28 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+
+export type DropdowSelectItemProps = {
+  selected: boolean;
+  onSelectChange: (selected: boolean) => void;
+  closeAfterSelection?: boolean;
+} & DropdownMenu.DropdownMenuCheckboxItemProps;
+
+export const DropdownSelectItem = (props: DropdowSelectItemProps) => {
+  const { children, selected, onSelectChange, closeAfterSelection = true, className = '', ...rest } = props;
+  return (
+    <DropdownMenu.CheckboxItem
+      checked={selected}
+      onCheckedChange={onSelectChange}
+      className={classNames('ds-dropdown__item ds-dropdown__item--select', className)}
+      // prevent default stops the dropdown from closing
+      onSelect={!closeAfterSelection ? e => e.preventDefault() : undefined}
+      {...rest}
+    >
+      {children}
+      <DropdownMenu.ItemIndicator className="ds-dropdown__item--check-icon">
+        <Icon name="check" size={16} />
+      </DropdownMenu.ItemIndicator>
+    </DropdownMenu.CheckboxItem>
+  );
+};

package/src/components/formField/inputs/{dropdown/Dropdown.stories.tsx → selectDropdown/SelectDropdown.stories.tsx}

@@ -1,9 +1,9 @@
 import type { Meta } from '@storybook/react-vite';
-import { Dropdown } from './Dropdown';
+import { SelectDropdown } from './SelectDropdown';
 
-const meta: Meta<typeof Dropdown> = {
-  title: 'Components/Dropdown',
-  component: Dropdown,
+const meta: Meta<typeof SelectDropdown> = {
+  title: 'Components/FormField/Inputs/SelectDropdown',
+  component: SelectDropdown,
 };
 
 export const Default = {

package/src/components/formField/inputs/{dropdown/Dropdown.test.tsx → selectDropdown/SelectDropdown.test.tsx}

@@ -2,12 +2,12 @@ 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';
+import { SelectDropdown } from './SelectDropdown';
 
-describe('Dropdown component', () => {
+describe('SelectDropdown component', () => {
   test('renders with default placeholder', () => {
     render(
-      <Dropdown
+      <SelectDropdown
         onSelectionChange={vi.fn()}
         disabled={false}
         options={[{ label: 'Label 1', value: 'label1' }]}
@@ -18,7 +18,7 @@ describe('Dropdown component', () => {
 
   test('renders custom placeholder', () => {
     render(
-      <Dropdown
+      <SelectDropdown
         onSelectionChange={vi.fn()}
         placeholder="Hello I'm a Dropdown!"
         disabled={false}
@@ -30,7 +30,7 @@ describe('Dropdown component', () => {
 
   test('click opens options', async () => {
     render(
-      <Dropdown
+      <SelectDropdown
         onSelectionChange={vi.fn()}
         placeholder="Hello I'm a Dropdown!"
         disabled={false}
@@ -44,7 +44,7 @@ describe('Dropdown component', () => {
 
   test('does not open options when disabled', async () => {
     render(
-      <Dropdown
+      <SelectDropdown
         onSelectionChange={vi.fn()}
         placeholder="Disabled Dropdown"
         disabled={true}
@@ -59,7 +59,7 @@ describe('Dropdown component', () => {
   test('clicking option triggers onSelectionChange', async () => {
     const onSelectionChange = vi.fn();
     render(
-      <Dropdown
+      <SelectDropdown
         onSelectionChange={onSelectionChange}
         placeholder="Hello I'm a Dropdown!"
         disabled={false}
@@ -76,7 +76,7 @@ describe('Dropdown component', () => {
 
   test('renders multiple options (Default story)', async () => {
     render(
-      <Dropdown
+      <SelectDropdown
         options={[
           { label: 'Option 1', value: 'option1' },
           { label: 'Option 2', value: 'option2' },
@@ -94,7 +94,7 @@ describe('Dropdown component', () => {
 
   test('renders icons (WithIcon story)', async () => {
     render(
-      <Dropdown
+      <SelectDropdown
         options={[
           { label: 'Option 1', value: 'option1', icon: '3-dot' },
           { label: 'Option 2', value: 'option2', icon: 'user' },
@@ -112,7 +112,7 @@ describe('Dropdown component', () => {
   test('supports multi-select (DefaultMultiSelect story)', async () => {
     const onSelectionChange = vi.fn();
     render(
-      <Dropdown
+      <SelectDropdown
         multiple
         options={[
           { label: 'Option 1', value: 'option1' },
@@ -134,7 +134,7 @@ describe('Dropdown component', () => {
 
   test('applies error class when errorText is provided', () => {
     render(
-      <Dropdown
+      <SelectDropdown
         onSelectionChange={vi.fn()}
         placeholder="Select"
         disabled={false}
@@ -149,7 +149,7 @@ describe('Dropdown component', () => {
 
   test('renders grouped options (WithGroups story)', async () => {
     render(
-      <Dropdown
+      <SelectDropdown
         options={[
           { label: 'Option 1', value: 'option1', group: 'Group 1' },
           { label: 'Option 2', value: 'option2', group: 'Group 1' },
@@ -168,7 +168,7 @@ describe('Dropdown component', () => {
 
   test('renders multiline items (MultilineItems story)', async () => {
     render(
-      <Dropdown
+      <SelectDropdown
         options={[
           { label: 'Option 1', value: 'option1', header: 'header1' },
           { label: 'Option 2', value: 'option2', header: 'header2' },