@arbor-education/design-system.components 0.2.2 → 0.2.4

package/src/components/pill/Pill.stories.tsx

@@ -8,6 +8,16 @@ const meta: Meta<typeof Pill> = {
 
 export const Default = {
   args: {
+    text: 'Default',
+    onclick: () => { console.log('Pill clicked'); },
+  },
+};
+
+export const withCheckbox = {
+  args: {
+    text: 'Checkbox',
+    checkbox: true,
+    onclick: () => { console.log('Pill with checkbox clicked'); },
   },
 };
 

package/src/components/pill/Pill.test.tsx

@@ -1,21 +1,60 @@
-import { describe, expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { Pill } from './Pill';
+import { describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom/vitest';
 
 describe('Pill', () => {
-  test('Pill says hello', () => {
-    render(<Pill text="Hello I'm a Pill!" />);
-    expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
+  it('renders text', () => {
+    render(<Pill text="Test Pill" />);
+    expect(screen.getByText('Test Pill')).toBeInTheDocument();
   });
 
-  test('Pill has default color green', () => {
-    render(<Pill text="Hello I'm a Pill!" />);
-    expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-pill--green');
+  it('toggles active state on click (no checkbox)', () => {
+    render(<Pill text="Test Pill" />);
+    const pill = screen.getByText('Test Pill');
+    expect(pill).toHaveClass('ds-pill__inactive');
+    fireEvent.click(screen.getByText('Test Pill'));
+    expect(pill).toHaveClass('ds-pill__active');
+    fireEvent.click(screen.getByText('Test Pill'));
+    expect(pill).toHaveClass('ds-pill__inactive');
   });
 
-  test('Pill has custom color', () => {
-    render(<Pill text="Hello I'm a Pill!" color="blue" />);
-    expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-pill--blue');
+  it('renders with checkbox', () => {
+    render(<Pill text="Check Me" checkbox />);
+    expect(screen.getByText('Check Me')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('toggles checked state on pill click (with checkbox)', () => {
+    render(<Pill text="Check Me" checkbox />);
+    const pill = screen.getByText('Check Me').closest('.ds-pill');
+    const checkbox = screen.getByRole('checkbox');
+    expect(pill).toHaveClass('ds-pill__unchecked');
+    expect(checkbox).not.toBeChecked();
+    fireEvent.click(screen.getByText('Check Me'));
+    expect(pill).toHaveClass('ds-pill__checked');
+    expect(checkbox).toBeChecked();
+  });
+
+  it('toggles checked state on checkbox click only (with checkbox)', () => {
+    render(<Pill text="Check Me" checkbox />);
+    const pill = screen.getByText('Check Me').closest('.ds-pill');
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.click(checkbox);
+    expect(pill).toHaveClass('ds-pill__checked');
+    expect(checkbox).toBeChecked();
+    fireEvent.click(checkbox);
+    expect(pill).toHaveClass('ds-pill__unchecked');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('calls onclick callback with correct checked value', () => {
+    const onClick = vi.fn();
+    render(<Pill text="Test Pill" onclick={onClick} />);
+    fireEvent.click(screen.getByText('Test Pill'));
+    expect(onClick).toHaveBeenCalledWith(true);
+    fireEvent.click(screen.getByText('Test Pill'));
+    expect(onClick).toHaveBeenCalledWith(false);
   });
 });

package/src/components/pill/Pill.tsx

@@ -1,23 +1,47 @@
 import classNames from 'classnames';
-
-export type PillColor = 'orange'
-  | 'blue'
-  | 'green'
-  | 'purple'
-  | 'teal'
-  | 'salmon'
-  | 'yellow';
+import { CheckboxInput } from 'Components/formField/inputs/checkbox/CheckboxInput';
+import { useEffect, useState } from 'react';
 
 type PillProps = {
   text: string;
-  color?: PillColor;
+  checkbox?: boolean;
+  onclick?: (checked: boolean) => void;
 };
 
-export const Pill = ({ text, color = 'green' }: PillProps) => {
+export const Pill = ({ text, checkbox, onclick }: PillProps) => {
+  const [checked, setChecked] = useState(false);
+
+  const handlePillClick = () => {
+    setChecked(prev => !prev);
+  };
+
+  const handleCheckboxClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setChecked(prev => !prev);
+  };
+
+  useEffect(() => {
+    if (onclick) {
+      onclick(checked);
+    }
+  }, [checked, onclick]);
+
   return (
     <span
-      className={classNames('ds-pill', `ds-pill--${color}`)}
+      onClick={handlePillClick}
+      className={classNames(
+        'ds-pill',
+        checkbox ? { 'ds-pill__checked': checked, 'ds-pill__unchecked': !checked } : { 'ds-pill__active': checked, 'ds-pill__inactive': !checked },
+      )}
     >
+      {checkbox && (
+        <span className={classNames('ds-pill__checkbox')} onClick={e => e.stopPropagation()}>
+          <CheckboxInput
+            checked={checked}
+            onClick={handleCheckboxClick}
+          />
+        </span>
+      )}
       {text}
     </span>
   );

package/src/components/pill/pill.scss

@@ -4,8 +4,10 @@
   align-items: center;
   gap: var(--tag-spacing-gap-horizontal);
   border-radius: var(--tag-radius);
+  border: 1px solid var(--pill-single-filter-default-color-border);
   flex-grow: 0;
   width: fit-content;
+  cursor: pointer;
 
   /* typography/body/p1-reg */
   font-family: var(--type-body-p-family, Inter);
@@ -13,39 +15,45 @@
   font-style: normal;
   font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
-  
-  &--orange {
-    color: var(--tag-category-orange-color-text);
-    background: var(--tag-category-orange-color-background);
-  }
 
-  &--blue {
-    color: var(--tag-category-blue-color-text);
-    background: var(--tag-category-blue-color-background);
-  }
+  &__inactive{
+    background-color: var(--pill-single-filter-default-color-background);
+    border-color: var(--pill-single-filter-default-color-border);
+    color: var(--pill-single-filter-default-color-text);
 
-  &--green {
-    color: var(--tag-category-green-color-text);
-    background: var(--tag-category-green-color-background);
+    &:hover{
+      color: var(--pill-single-filter-hover-color-text);
+      border-color: var(--pill-single-filter-hover-color-border);
+      background-color: var(--pill-single-filter-hover-color-background);
+    }
   }
 
-  &--purple {
-    color: var(--tag-category-purple-color-text);
-    background: var(--tag-category-purple-color-background);
+  &__active{
+    background-color: var(--pill-single-filter-active-color-background);
+    border-color: var(--pill-single-filter-active-color-border);
+    color: var(--pill-single-filter-active-color-text);
   }
 
-  &--teal {
-    color: var(--tag-category-teal-color-text);
-    background: var(--tag-category-teal-color-background);
+  &__unchecked{
+    background-color: var(--pill-checkbox-default-color-background);
+    border-color: var(--pill-checkbox-default-color-border);
+    color: var(--pill-checkbox-default-color-text);
+
+    &:hover{
+      background-color: var(--pill-checkbox-hover-color-background);
+      color: var(--pill-checkbox-hover-color-icon);
+      border-color: var(--pill-checkbox-hover-color-border);
+    }
   }
 
-  &--salmon {
-    color: var(--tag-category-salmon-color-text);
-    background: var(--tag-category-salmon-color-background);
+  &__checked{
+    background-color: var(--pill-checkbox-selected-color-background);
+    border-color: var(--pill-checkbox-selected-color-border);
+    color: var(--pill-checkbox-selected-color-text);
   }
 
-  &--yellow {
-    color: var(--tag-category-yellow-color-text);
-    background: var(--tag-category-yellow-color-background);
+  &__checkbox{
+    display: flex;
+    align-items: center;
   }
 }

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

@@ -47,7 +47,16 @@ const defaultColDef: ColDef = {
 const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Details',
-    children: [{ field: 'name', headerTooltip: 'The name of the user' }, { field: 'email', headerTooltip: 'The email of the user' }, { field: 'role', headerTooltip: 'The role of the user' }],
+    children: [{
+      field: 'name',
+      headerTooltip: 'The name of the user',
+    }, {
+      field: 'email',
+      headerTooltip: 'The email of the user',
+    }, {
+      field: 'role',
+      headerTooltip: 'The role of the user',
+    }],
   },
   { field: 'status' },
 ];
@@ -304,4 +313,44 @@ export const WithServerSidePagination: StoryObj<TableProps> = {
   },
 };
 
+const sampleColumnDefsWithButtonCellRenderer: (ColDef | ColGroupDef)[] = [
+  {
+    headerName: 'Details',
+    children: [{
+      field: 'name',
+      headerTooltip: 'The name of the user',
+      cellRenderer: 'dsButtonCellRenderer',
+      editable: false,
+    }, {
+      field: 'email',
+      headerTooltip: 'The email of the user',
+    }, {
+      field: 'role',
+      headerTooltip: 'The role of the user',
+    }],
+  },
+  { field: 'status' },
+];
+
+const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => alert(`clicked on the button ${e.currentTarget.value}`);
+
+const sampleDataWithButtonCellRenderer = [
+  { id: 1, name: { children: 'Alice Johnson', value: 'Alice Johnson', onClick: handleClick }, email: 'alice.johnson@example.com', role: 'Developer', status: 'Active' },
+  { id: 2, name: { children: 'Bob Smith', variant: 'secondary', value: 'Bob Smith', onClick: handleClick }, email: 'bob.smith@example.com', role: 'Designer', status: 'Active' },
+  { id: 3, name: { children: 'Charlie Brown', size: 'S', value: 'Charlie Brown', onClick: handleClick }, email: 'charlie.brown@example.com', role: 'Manager', status: 'Inactive' },
+  { id: 4, name: { children: 'Diana Prince', disabled: true, value: 'Diana Prince', onClick: handleClick }, email: 'diana.prince@example.com', role: 'Developer', status: 'Active' },
+  { id: 5, name: { children: 'Ethan Hunt', iconLeftName: 'download', value: 'Ethan Hunt', onClick: handleClick }, email: 'ethan.hunt@example.com', role: 'Analyst', status: 'Active' },
+];
+
+export const WithButtonCellRenderer: Story = {
+  args: {
+    rowData: sampleDataWithButtonCellRenderer,
+    columnDefs: sampleColumnDefsWithButtonCellRenderer,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    footerContent: FooterContent,
+    pagination: true,
+  },
+};
+
 export default meta;

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

@@ -961,4 +961,68 @@ describe('Table', () => {
       });
     });
   });
+
+  describe('ButtonCellRenderer', () => {
+    test('works in table context with column definition', async () => {
+      const handleClick = vi.fn();
+      const columnDefs = [{
+        field: 'action',
+        headerName: 'Action',
+        cellRenderer: 'dsButtonCellRenderer',
+      }];
+      const rowData = [{
+        action: {
+          children: 'Delete',
+          variant: 'primary-destructive' as const,
+          onClick: handleClick,
+        },
+      }];
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByText('Delete')).toBeInTheDocument());
+      const button = screen.getByText('Delete');
+      await userEvent.click(button);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('works with multiple button cells in table', async () => {
+      const handleClick1 = vi.fn();
+      const handleClick2 = vi.fn();
+      const columnDefs = [{
+        field: 'name',
+        headerName: 'Name',
+      }, {
+        field: 'action',
+        headerName: 'Action',
+        cellRenderer: 'dsButtonCellRenderer',
+      }];
+      const rowData = [
+        {
+          name: 'Item 1',
+          action: {
+            children: 'Edit',
+            onClick: handleClick1,
+          },
+        },
+        {
+          name: 'Item 2',
+          action: {
+            children: 'Delete',
+            variant: 'secondary' as const,
+            onClick: handleClick2,
+          },
+        },
+      ];
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => {
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+        expect(screen.getByText('Delete')).toBeInTheDocument();
+      });
+      await userEvent.click(screen.getByText('Edit'));
+      expect(handleClick1).toHaveBeenCalledTimes(1);
+      await userEvent.click(screen.getByText('Delete'));
+      expect(handleClick2).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/components/table/Table.tsx

@@ -15,6 +15,7 @@ import { HideColumnsDropdown } from './HideColumnsDropdown';
 import { useTableSettings, type TableSettings } from './useTableSettings';
 import { setAgGridLicenseKey } from 'Utils/setAgGridLicenseKey';
 import { toggleRowSelectionInCurrentRange } from './toggleRowSelectionInCurrentRange';
+import { ButtonCellRenderer } from './cellRenderers/ButtonCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -71,6 +72,7 @@ export const Table = (props: TableProps) => {
     enableSimultaneousRangeAndRowSelection = false,
     disableDragSelect = false,
     onCellSelectionChanged,
+    components = {},
     ...rest
   } = props;
 
@@ -119,6 +121,7 @@ export const Table = (props: TableProps) => {
             </TableHeader>
           )}
           <AgGridReact
+            // TODO: make this overridable when we come to do Tidy Table theming
             theme={tableTheme.withParams({
               headerRowBorder: hasColumnBorders,
               rowBorder: hasColumnBorders,
@@ -154,6 +157,10 @@ export const Table = (props: TableProps) => {
                 onCellSelectionChanged(event);
               }
             }}
+            components={{
+              dsButtonCellRenderer: ButtonCellRenderer,
+              ...components,
+            }}
             {...rest}
             {...(hasSearch && { quickFilterText: searchValue })}
           />
@@ -174,3 +181,4 @@ Table.PaginationControls = PaginationControls;
 Table.RowCountInfo = RowCountInfo;
 Table.BulkActionsDropdown = BulkActionsDropdown;
 Table.HideColumnsDropdown = HideColumnsDropdown;
+Table.ButtonCellRenderer = ButtonCellRenderer;

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

@@ -0,0 +1,12 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { Button, type ButtonProps } from 'Components/button/Button';
+
+type ButtonCellRendererProps = CustomCellRendererProps & { value: ButtonProps };
+
+export const ButtonCellRenderer = (props: ButtonCellRendererProps) => {
+  const { value, valueFormatted } = props;
+
+  const childToRender = !valueFormatted || valueFormatted === '[object Object]' ? value.children : valueFormatted;
+
+  return <Button {...value}>{childToRender}</Button>;
+};

package/src/components/tag/Tag.stories.tsx

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

package/src/components/tag/Tag.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Tag } from './Tag';
+import '@testing-library/jest-dom/vitest';
+
+describe('Tag', () => {
+  test('Tag says hello', () => {
+    render(<Tag text="Hello I'm a Pill!" />);
+    expect(screen.getByText("Hello I'm a Pill!")).toBeInTheDocument();
+  });
+
+  test('Tag has default color green', () => {
+    render(<Tag text="Hello I'm a Pill!" />);
+    expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--green');
+  });
+
+  test('Tag has custom color', () => {
+    render(<Tag text="Hello I'm a Pill!" color="blue" />);
+    expect(screen.getByText("Hello I'm a Pill!")).toHaveClass('ds-tag--blue');
+  });
+});

package/src/components/tag/Tag.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+export type TagColor = 'orange'
+  | 'blue'
+  | 'green'
+  | 'purple'
+  | 'teal'
+  | 'salmon'
+  | 'yellow';
+
+type TagProps = {
+  text: string;
+  color?: TagColor;
+};
+
+export const Tag = ({ text, color = 'green' }: TagProps) => {
+  return (
+    <span
+      className={classNames('ds-tag', `ds-tag--${color}`)}
+    >
+      {text}
+    </span>
+  );
+};

package/src/components/tag/tag.scss

@@ -0,0 +1,51 @@
+.ds-tag {
+  display: flex;
+  padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
+  align-items: center;
+  gap: var(--tag-spacing-gap-horizontal);
+  border-radius: var(--tag-radius);
+  flex-grow: 0;
+  width: fit-content;
+
+  /* typography/body/p1-reg */
+  font-family: var(--type-body-p-family, Inter);
+  font-size: var(--type-body-p-size);
+  font-style: normal;
+  font-weight: var(--type-body-p-weight);
+  line-height: 150%; /* 19.5px */
+  
+  &--orange {
+    color: var(--tag-category-orange-color-text);
+    background: var(--tag-category-orange-color-background);
+  }
+
+  &--blue {
+    color: var(--tag-category-blue-color-text);
+    background: var(--tag-category-blue-color-background);
+  }
+
+  &--green {
+    color: var(--tag-category-green-color-text);
+    background: var(--tag-category-green-color-background);
+  }
+
+  &--purple {
+    color: var(--tag-category-purple-color-text);
+    background: var(--tag-category-purple-color-background);
+  }
+
+  &--teal {
+    color: var(--tag-category-teal-color-text);
+    background: var(--tag-category-teal-color-background);
+  }
+
+  &--salmon {
+    color: var(--tag-category-salmon-color-text);
+    background: var(--tag-category-salmon-color-background);
+  }
+
+  &--yellow {
+    color: var(--tag-category-yellow-color-text);
+    background: var(--tag-category-yellow-color-background);
+  }
+}

package/src/index.scss

@@ -14,6 +14,7 @@
 @use "components/formField/inputs/checkbox/checkboxInput.scss";
 @use "components/formField/inputs/selectDropdown/selectDropdown";
 @use "components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss";
+@use "components/tag/tag.scss";
 @use "components/pill/pill.scss";
 @use "components/section/section.scss";
 @use "components/tabs/tabs.scss";

package/src/index.ts

@@ -3,6 +3,7 @@ export { Heading } from 'Components/heading/Heading';
 export { Icon } from 'Components/icon/Icon';
 export { Card } from 'Components/card/Card';
 export { Dropdown } from 'Components/dropdown/Dropdown';
+export { Tag } from 'Components/tag/Tag';
 export { Pill } from 'Components/pill/Pill';
 export { Section } from 'Components/section/Section';
 export { Tabs } from 'Components/tabs/Tabs';