@arbor-education/design-system.components 0.4.0 → 0.4.2

package/src/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large'],
+    },
+  },
+};
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    size: 'medium',
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'User avatar',
+  },
+};
+
+export const WithInitials: Story = {
+  args: {
+    size: 'medium',
+    initials: 'CM',
+    alt: 'Christine Montgomery',
+  },
+};
+
+export const Placeholder: Story = {
+  args: {
+    size: 'medium',
+    alt: 'User avatar',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    src: 'https://i.pravatar.cc/150?img=2',
+    alt: 'User avatar',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+    src: 'https://i.pravatar.cc/150?img=3',
+    alt: 'User avatar',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    src: 'https://i.pravatar.cc/150?img=4',
+    alt: 'User avatar',
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: 'extra-large',
+    src: 'https://i.pravatar.cc/150?img=5',
+    alt: 'User avatar',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Avatar size="small" src="https://i.pravatar.cc/150?img=6" alt="Small avatar" />
+      <Avatar size="medium" src="https://i.pravatar.cc/150?img=7" alt="Medium avatar" />
+      <Avatar size="large" src="https://i.pravatar.cc/150?img=8" alt="Large avatar" />
+      <Avatar size="extra-large" src="https://i.pravatar.cc/150?img=9" alt="Extra large avatar" />
+    </div>
+  ),
+};
+
+export default meta;

package/src/components/avatar/Avatar.test.tsx

@@ -0,0 +1,60 @@
+import { expect, test, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Avatar';
+import '@testing-library/jest-dom/vitest';
+
+describe('Avatar', () => {
+  test('renders with image when src is provided', () => {
+    render(<Avatar src="https://example.com/avatar.jpg" alt="Test User" />);
+    const image = screen.getByRole('img', { hidden: true });
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+    expect(image).toHaveAttribute('alt', 'Test User');
+  });
+
+  test('renders with initials when no src is provided', () => {
+    render(<Avatar initials="CM" alt="Christine Montgomery" />);
+    expect(screen.getByText('CM')).toBeInTheDocument();
+    expect(screen.getByLabelText('Christine Montgomery')).toBeInTheDocument();
+  });
+
+  test('renders placeholder when no src or initials provided', () => {
+    render(<Avatar alt="User avatar" />);
+    expect(screen.getByLabelText('User avatar')).toBeInTheDocument();
+  });
+
+  test('renders placeholder with default label when no alt provided', () => {
+    render(<Avatar />);
+    expect(screen.getByLabelText('User avatar')).toBeInTheDocument();
+  });
+
+  test('applies size variant class', () => {
+    const { container, rerender } = render(<Avatar size="small" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--small');
+
+    rerender(<Avatar size="medium" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--medium');
+
+    rerender(<Avatar size="large" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--large');
+
+    rerender(<Avatar size="extra-large" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--extra-large');
+  });
+
+  test('applies default medium size when no size specified', () => {
+    const { container } = render(<Avatar />);
+    expect(container.firstChild).toHaveClass('ds-avatar--medium');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(<Avatar className="custom-class" />);
+    expect(container.firstChild).toHaveClass('ds-avatar');
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  test('spreads additional HTML attributes', () => {
+    const { container } = render(<Avatar data-testid="avatar-test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'avatar-test');
+  });
+});

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export type AvatarSize = 'small' | 'medium' | 'large' | 'extra-large';
+
+export type AvatarProps = {
+  size?: AvatarSize;
+  src?: string;
+  alt?: string;
+  initials?: string;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const Avatar = (props: AvatarProps) => {
+  const {
+    size = 'medium',
+    src,
+    alt = '',
+    initials,
+    className,
+    ...rest
+  } = props;
+
+  const renderContent = () => {
+    if (src) {
+      return (
+        <img
+          src={src}
+          alt={alt}
+          className="ds-avatar__image"
+        />
+      );
+    }
+
+    if (initials) {
+      return (
+        <span className="ds-avatar__initials" aria-label={alt}>
+          {initials}
+        </span>
+      );
+    }
+
+    return (
+      <span className="ds-avatar__placeholder" aria-label={alt || 'User avatar'}>
+        <svg
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="ds-avatar__placeholder-icon"
+        >
+          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+        </svg>
+      </span>
+    );
+  };
+
+  return (
+    <div
+      className={classNames(
+        'ds-avatar',
+        `ds-avatar--${size}`,
+        className,
+      )}
+      {...rest}
+    >
+      {renderContent()}
+    </div>
+  );
+};

package/src/components/avatar/avatar.scss

@@ -0,0 +1,71 @@
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+
+  // Size variants
+  &--small {
+    width: var(--avatar-small-size);
+    height: var(--avatar-small-size);
+    border-radius: var(--avatar-small-radius);
+    border: 1px solid var(--avatar-small-color-border);
+    background-color: var(--avatar-small-color-background);
+  }
+
+  &--medium {
+    width: var(--avatar-medium-size);
+    height: var(--avatar-medium-size);
+    border-radius: var(--avatar-medium-radius);
+    border: 1px solid var(--avatar-medium-color-border);
+    background-color: var(--avatar-medium-color-background);
+  }
+
+  &--large {
+    width: var(--avatar-large-size);
+    height: var(--avatar-large-size);
+    border-radius: var(--avatar-large-radius);
+    border: 1px solid var(--avatar-large-color-border);
+    background-color: var(--avatar-large-color-background);
+  }
+
+  &--extra-large {
+    width: var(--avatar-extra-large-size);
+    height: var(--avatar-extra-large-size);
+    border-radius: var(--avatar-extra-large-radius);
+    border: 1px solid var(--avatar-extra-large-color-border);
+    background-color: var(--avatar-extra-large-color-background);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+  }
+
+  &__initials {
+    font-family: var(--type-body-bold-family);
+    font-weight: var(--type-body-bold-weight);
+    font-size: var(--type-body-bold-size);
+    color: var(--avatar-medium-color-text);
+    line-height: 1;
+    text-align: center;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--color-grey-400);
+  }
+
+  &__placeholder-icon {
+    width: 60%;
+    height: 60%;
+  }
+}

package/src/components/dropdown/Dropdown.tsx

@@ -3,11 +3,13 @@ import { DropdownTrigger } from './DropdownTrigger';
 import { DropdownContent } from './DropdownContent';
 import { DropdownItem } from './items/DropdownItem';
 import { DropdownSelectItem } from './items/DropdownSelectItem';
+import { DropdownSeparator } from './items/DropdownSeparator';
+import { DropdownGroup } from './items/DropdownGroup';
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => {
   const { children, ...rest } = props;
   return (
-    <DropdownMenu.Root {...rest}>
+    <DropdownMenu.Root modal={false} {...rest}>
       {children}
     </DropdownMenu.Root>
   );
@@ -17,3 +19,5 @@ Dropdown.Trigger = DropdownTrigger;
 Dropdown.Content = DropdownContent;
 Dropdown.Item = DropdownItem;
 Dropdown.SelectItem = DropdownSelectItem;
+Dropdown.Separator = DropdownSeparator;
+Dropdown.Group = DropdownGroup;

package/src/components/dropdown/dropdown.scss

@@ -7,6 +7,9 @@
     border: 1px solid var(--color-grey-200);
     font-style: normal;
     line-height: 150%;
+    max-height: 300px;
+    max-height: var(--radix-popper-available-height);
+    overflow-y: auto;
 }
 
 .ds-dropdown__item {
@@ -42,4 +45,4 @@
     .ds-dropdown__item--check-icon {
         margin-left: auto;
     }
-}
+}

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

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

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

@@ -0,0 +1,9 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+
+export const DropdownSeparator = (props: DropdownMenu.DropdownMenuSeparatorProps) => {
+  const { className = '', ...rest } = props;
+  return (
+    <DropdownMenu.Separator className={classNames('ds-dropdown__separator', className)} {...rest} />
+  );
+};

package/src/components/formField/inputs/selectDropdown/SelectDropdown.stories.tsx

@@ -182,4 +182,19 @@ export const MultilineItemsGroupedMultiSelect = {
     onSelectionChange: (value: string[]) => { console.log(value); },
   },
 };
+
+export const ControlledOpen = {
+  args: {
+    title: 'titleValue',
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    open: true,
+    onOpenChange: (open: boolean) => { console.log('open changed:', open); },
+    onSelectionChange: (value: string[]) => { console.log(value); },
+  },
+};
+
 export default meta;

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -16,6 +16,8 @@ export type SelectDropdownInputProps = {
   'id'?: string;
   'alwaysShowPlaceholder'?: boolean;
   'initialSelectedValues'?: string[];
+  'open'?: boolean;
+  'onOpenChange'?: (open: boolean) => void;
 };
 
 export const SelectDropdown = (props: SelectDropdownInputProps) => {
@@ -31,6 +33,8 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     'aria-invalid': ariaInvalid,
     alwaysShowPlaceholder = false,
     initialSelectedValues = [],
+    open,
+    onOpenChange,
   } = props;
 
   const [selectedValues, setSelectedValues] = useState<string[]>(initialSelectedValues);
@@ -93,7 +97,7 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
   return (
     <>
       <input type="hidden" name={id} value={selectedValues.join(',')} />
-      <Dropdown>
+      <Dropdown open={open} onOpenChange={onOpenChange}>
         <Dropdown.Trigger disabled={disabled}>
           <Button
             variant="dropdown"

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

@@ -723,29 +723,23 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
     headerName: 'Assessment Component',
     field: 'assessmentComponent',
     cellRenderer: 'dsSelectDropdownCellRenderer',
-    cellEditor: 'dsSelectDropdownCellEditor',
     cellRendererParams: { options: assessmentComponentOptions, placeholder: 'Select' },
-    cellEditorParams: { options: assessmentComponentOptions, placeholder: 'Select' },
-    editable: params => !params.node.group,
+    editable: false,
   },
   {
     headerName: 'Visibility',
     field: 'visibility',
     cellRenderer: 'dsSelectDropdownCellRenderer',
-    cellEditor: 'dsSelectDropdownCellEditor',
     cellRendererParams: { options: visibilityOptions, placeholder: 'Select' },
-    cellEditorParams: { options: visibilityOptions, placeholder: 'Select' },
-    editable: params => !params.node.group,
+    editable: false,
   },
   {
     headerName: 'Editable',
     field: 'editable',
-    editable: true,
   },
   {
     headerName: 'Formatting',
     field: 'formatting',
-    editable: false,
   },
 ];
 
@@ -796,8 +790,6 @@ export const TidyTable: Story = {
     tableTheme: 'tidy',
     treeData: true,
     treeDataChildrenField: 'children',
-    singleClickEdit: true,
-    stopEditingWhenCellsLoseFocus: true,
     groupDefaultExpanded: -1,
     icons: {
       groupExpanded: '',

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

@@ -1297,59 +1297,12 @@ describe('Table', () => {
           rowData={rowData}
         />,
       );
-      const dropdownButton = container.querySelector('.ds-table__select-dropdown-cell.ds-button--dropdown');
+      const dropdownWrapper = container.querySelector('.ds-table__select-dropdown');
+      const dropdownButton = dropdownWrapper?.querySelector('.ds-button--dropdown');
       expect(dropdownButton).toBeInTheDocument();
     });
   });
 
-  describe('SelectDropdownCellEditor', () => {
-    const options = [
-      { label: 'Option 1', value: 'option1' },
-      { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' },
-    ];
-    const editableSelectColumnDefs = [{
-      field: 'selectField',
-      headerName: 'Select Field',
-      cellRenderer: 'dsSelectDropdownCellRenderer',
-      cellEditor: 'dsSelectDropdownCellEditor',
-      cellRendererParams: { options, placeholder: 'Placeholder Text' },
-      cellEditorParams: { options, placeholder: 'Placeholder Text' },
-      editable: true,
-    }];
-
-    async function renderAndStartEditing(rowData: { selectField: string }[]) {
-      render(
-        <Table
-          columnDefs={editableSelectColumnDefs}
-          rowData={rowData}
-        />,
-      );
-      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
-      const cell = screen.getByText('Option 1');
-      await userEvent.dblClick(cell);
-      const editorWrapper = await waitFor(() => document.querySelector('.ds-table__select-dropdown-editor'));
-      return editorWrapper!.querySelector('button')!;
-    }
-
-    test('opens editor with dropdown; selecting option updates cell', async () => {
-      const trigger = await renderAndStartEditing([{ selectField: 'option1' }]);
-      expect(trigger).toHaveTextContent('Option 1');
-      await userEvent.click(trigger);
-      await userEvent.click(screen.getByText('Option 2'));
-      await waitFor(() => expect(screen.getByText('Option 2')).toBeInTheDocument());
-    });
-
-    test('Escape closes dropdown without changing value', async () => {
-      const trigger = await renderAndStartEditing([{ selectField: 'option1' }]);
-      await userEvent.click(trigger);
-      await waitFor(() => expect(screen.getByText('Option 2')).toBeInTheDocument());
-      await userEvent.keyboard('{Escape}');
-      expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-    });
-  });
-
   describe('Cell Editing', () => {
     describe('with literal data values', () => {
       test('supports editing text fields', async () => {

package/src/components/table/Table.tsx

@@ -19,7 +19,6 @@ import { defaultValueFormatter, DSDefaultColDef, shouldSuppressFocus } from './D
 import { ButtonCellRenderer } from './cellRenderers/ButtonCellRenderer';
 import { InlineTextCellRenderer } from './cellRenderers/InlineTextCellRenderer';
 import { SelectDropdownCellRenderer } from './cellRenderers/SelectDropdownCellRenderer';
-import { SelectDropdownCellEditor } from './cellRenderers/SelectDropdownCellEditor';
 import { tidyTheme } from './theme/tidyTheme';
 import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
@@ -192,7 +191,6 @@ export const Table = (props: TableProps) => {
               dsButtonCellRenderer: ButtonCellRenderer,
               dsInlineTextCellRenderer: InlineTextCellRenderer,
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
-              dsSelectDropdownCellEditor: SelectDropdownCellEditor,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
               ...components,

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx

@@ -1,6 +1,9 @@
+import { useState } from 'react';
+import type { CellKeyDownEvent, FullWidthCellKeyDownEvent } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 import type { SelectDropdownItemProps } from 'Components/formField/inputs/selectDropdown/items/item/SelectDropdownItem';
-import { Button } from 'Components/button/Button';
+import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 
 export type SelectDropdownCellRendererProps = CustomCellRendererProps & {
   options?: SelectDropdownItemProps[];
@@ -8,30 +11,42 @@ export type SelectDropdownCellRendererProps = CustomCellRendererProps & {
 };
 
 export const SelectDropdownCellRenderer = (props: SelectDropdownCellRendererProps) => {
-  const { value, valueFormatted, placeholder = 'Select' } = props;
+  const { value, placeholder = 'Select', node, column, api } = props;
   const options = props.options ?? [];
 
-  const selectedValue = valueFormatted ?? value;
   const valueStr = value != null && value !== '' ? String(value) : '';
+  const initialSelectedValues = valueStr ? [valueStr] : [];
 
-  const option = options.find((opt: SelectDropdownItemProps) => opt.value === valueStr);
-  const displayText = selectedValue != null && selectedValue !== ''
-    ? (option?.label ?? option?.value ?? String(selectedValue))
-    : placeholder;
+  const [isOpen, setIsOpen] = useState(false);
 
-  const handleMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
+  useComponentDidMount(() => {
+    const handleCellKeyDown = (event: CellKeyDownEvent | FullWidthCellKeyDownEvent) => {
+      if ('column' in event && event.node === node && event.column === column && (event.event as KeyboardEvent).key === 'Enter') {
+        setIsOpen(true);
+      }
+    };
+
+    api.addEventListener('cellKeyDown', handleCellKeyDown);
+    return () => {
+      api.removeEventListener('cellKeyDown', handleCellKeyDown);
+    };
+  });
 
   return (
-    <Button
-      variant="dropdown"
-      iconRightName="chevron-down"
-      className="ds-table__select-dropdown-cell"
-      onMouseDown={handleMouseDown}
-    >
-      {displayText}
-    </Button>
+    <div className="ds-table__select-dropdown">
+      <SelectDropdown
+        options={options}
+        placeholder={placeholder}
+        initialSelectedValues={initialSelectedValues}
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        multiple={false}
+        onSelectionChange={(newValue) => {
+          if (column) {
+            node.setDataValue(column, newValue[0]);
+          }
+        }}
+      />
+    </div>
   );
 };

package/src/components/table/table.scss

@@ -7,8 +7,10 @@
     color: var(--form-field-text-default-color-text);
   }
 
-  &__select-dropdown-cell {
-    width: 100%;
+  &__select-dropdown {
+    .ds-button--dropdown {
+      width: 100%;
+    }
   }
 
   &__container {