@arbor-education/design-system.components 0.1.2 → 0.1.4

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { ColDef, ColGroupDef } from 'ag-grid-enterprise';
+import { type Column, type ColDef, type ColGroupDef } from 'ag-grid-enterprise';
 import { Table } from './Table';
 import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
@@ -8,6 +8,7 @@ import { BulkActionsDropdown } from './BulkActionsDropdown';
 import { useState, type ComponentProps } from 'react';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
+import { HideColumnsDropdown } from './HideColumnsDropdown';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -62,7 +63,6 @@ const HeaderContent = [
     <Button key={1} variant="secondary" size="S">Button 2</Button>
   </div>,
   <div key={1} style={{ display: 'flex', gap: '1rem' }}>
-    <Icon name="search" />
     <Icon name="download" />
     <Icon name="settings" />
     <Icon name="circle-help" />
@@ -105,6 +105,17 @@ export const WithHeader: Story = {
   },
 };
 
+export const WithHeaderAndNoSearch: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    headerContent: HeaderContent,
+    hasSearch: false,
+  },
+};
+
 export const WithHeaderAndFooter: Story = {
   args: {
     rowData: sampleData,
@@ -142,6 +153,89 @@ export const WithBulkActions: Story = {
   },
 };
 
+export const WithHideColumnsDropdown: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    overrideColumnHiding: false,
+  },
+  render: (args) => {
+    const {
+      rowData,
+      columnDefs,
+      defaultColDef,
+      domLayout,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      overrideColumnHiding,
+    } = args;
+
+    return (
+      <Table
+        rowData={rowData}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        domLayout={domLayout}
+        headerContent={(
+          <HideColumnsDropdown
+            overrideColumnHiding={overrideColumnHiding}
+            onSelectionChanged={console.log}
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const WithRestrictedHideColumnsDropdown: Story = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    overrideColumnHiding: false,
+  },
+  render: (args) => {
+    const {
+      rowData,
+      columnDefs,
+      defaultColDef,
+      domLayout,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      overrideColumnHiding,
+    } = args;
+
+    const [columns, setColumns] = useState<Column[]>([]);
+
+    return (
+      <Table
+        rowData={rowData}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        domLayout={domLayout}
+        onGridReady={(params) => {
+          const { api } = params;
+          setColumns(api.getColumns()?.slice(1) || []);
+        }}
+        headerContent={(
+          <HideColumnsDropdown
+            overrideColumnHiding={overrideColumnHiding}
+            onSelectionChanged={console.log}
+            columns={columns}
+          />
+        )}
+      />
+    );
+  },
+};
+
 export const WithClientSidePagination: StoryObj<TableProps> = {
   args: {
     rowData: sampleData,

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

@@ -3,6 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { Table } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
+import { HideColumnsDropdown } from 'Components/table/HideColumnsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
 
@@ -169,4 +170,243 @@ describe('Table', () => {
       expect(callbackMock).not.toHaveBeenCalled();
     });
   });
+
+  describe('HideColumnsDropdown', () => {
+    const columnDefs = [
+      { field: 'name', headerName: 'Name' },
+      { field: 'age', headerName: 'Age' },
+      { field: 'email', headerName: 'Email' },
+    ];
+
+    const rowData = [
+      { name: 'John Doe', age: 30, email: 'john@example.com' },
+      { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
+    ];
+
+    test('renders HideColumnsDropdown in header', async () => {
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<HideColumnsDropdown />}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByText('Hide Columns')).toBeInTheDocument());
+    });
+
+    test('shows all column options when dropdown is opened', async () => {
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<HideColumnsDropdown />}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByText('Hide Columns')).toBeInTheDocument());
+      await userEvent.click(screen.getByText('Hide Columns'));
+
+      await waitFor(() => {
+        const dropdownItems = screen.getAllByRole('menuitemcheckbox');
+        expect(dropdownItems).toHaveLength(3);
+      });
+    });
+
+    test('calls onSelectionChanged callback when columns are selected', async () => {
+      const onSelectionChanged = vi.fn();
+
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={(
+            <HideColumnsDropdown
+              onSelectionChanged={onSelectionChanged}
+              overrideColumnHiding
+            />
+          )}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByText('Hide Columns')).toBeInTheDocument());
+      await userEvent.click(screen.getByText('Hide Columns'));
+
+      const menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const nameItem = menuItems.find(item => item.textContent === 'Name');
+
+      await userEvent.click(nameItem!);
+
+      await waitFor(() => {
+        expect(onSelectionChanged).toHaveBeenCalled();
+        expect(onSelectionChanged).toHaveBeenCalledWith(expect.arrayContaining(['name']));
+      });
+    });
+
+    test('hides selected columns when overrideColumnHiding is false', async () => {
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<HideColumnsDropdown />}
+        />,
+      );
+
+      // Wait for grid to be ready
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      await waitFor(() => expect(screen.getByText('Hide Columns')).toBeInTheDocument());
+      const dropdownButton = screen.getByText('Hide Columns');
+      await userEvent.click(dropdownButton);
+
+      const menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const nameItem = menuItems.find(item => item.textContent === 'Name');
+
+      await userEvent.click(nameItem!);
+
+      // The column should be hidden in the grid
+      await waitFor(() => {
+        const headers = container.querySelectorAll('.ag-header-cell-text');
+        const headerTexts = Array.from(headers).map(h => h.textContent);
+        expect(headerTexts).not.toContain('Name');
+      });
+    });
+
+    test('does not hide columns when overrideColumnHiding is true', async () => {
+      const onSelectionChanged = vi.fn();
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={(
+            <HideColumnsDropdown
+              onSelectionChanged={onSelectionChanged}
+              overrideColumnHiding
+            />
+          )}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      await waitFor(() => expect(screen.getByText('Hide Columns')).toBeInTheDocument());
+      await userEvent.click(screen.getByText('Hide Columns'));
+
+      const menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const nameItem = menuItems.find(item => item.textContent === 'Name');
+
+      await userEvent.click(nameItem!);
+
+      // The column should still be visible when overrideColumnHiding is true
+      await waitFor(() => {
+        const headers = container.querySelectorAll('.ag-header-cell-text');
+        const headerTexts = Array.from(headers).map(h => h.textContent);
+        expect(headerTexts).toContain('Name');
+        expect(onSelectionChanged).toHaveBeenCalled();
+      });
+    });
+
+    test('can hide multiple columns', async () => {
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<HideColumnsDropdown />}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      // Open dropdown and select Name column
+      await waitFor(() => expect(screen.getByRole('button', { name: /Hide Columns/ })).toBeInTheDocument());
+      await userEvent.click(screen.getByRole('button', { name: /Hide Columns/ }));
+
+      let menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const nameItem = menuItems.find(item => item.textContent === 'Name');
+      await userEvent.click(nameItem!);
+
+      await userEvent.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.getByText('Hide (1)')).toBeInTheDocument();
+      });
+
+      await userEvent.click(screen.getByText('Hide (1)'));
+
+      menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const ageItem = menuItems.find(item => item.textContent === 'Age');
+      await userEvent.click(ageItem!);
+
+      // Both columns should be hidden
+      await waitFor(() => {
+        const headers = container.querySelectorAll('.ag-header-cell-text');
+        const headerTexts = Array.from(headers).map(h => h.textContent);
+        expect(headerTexts).not.toContain('Name');
+        expect(headerTexts).not.toContain('Age');
+        expect(headerTexts).toContain('Email');
+      });
+    });
+
+    test('updates dropdown text to reflect number of hidden columns', async () => {
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<HideColumnsDropdown />}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByText('Hide Columns')).toBeInTheDocument());
+      await userEvent.click(screen.getByText('Hide Columns'));
+
+      const menuItems = await screen.findAllByRole('menuitemcheckbox');
+      const nameItem = menuItems.find(item => item.textContent === 'Name');
+
+      await userEvent.click(nameItem!);
+
+      await waitFor(() => {
+        expect(screen.getByText('Hide (1)')).toBeInTheDocument();
+      });
+    });
+
+    test('works with custom columns prop', async () => {
+      const mockColumn = {
+        getColDef: () => ({ headerName: 'Custom Column' }),
+        isVisible: () => true,
+        getColId: () => 'custom',
+      };
+
+      const onSelectionChanged = vi.fn();
+
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={(
+            <HideColumnsDropdown
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              columns={[mockColumn]}
+              onSelectionChanged={onSelectionChanged}
+              overrideColumnHiding
+            />
+          )}
+        />,
+      );
+
+      await userEvent.click(screen.getByText('Hide Columns'));
+
+      const menuItems = await screen.findAllByRole('menuitemcheckbox');
+      expect(menuItems).toHaveLength(1);
+      expect(menuItems[0]).toHaveTextContent('Custom Column');
+    });
+
+    test('returns null when no columns are available', () => {
+      const { container } = render(
+        <div><HideColumnsDropdown columns={[]} /></div>,
+      );
+
+      expect(container.querySelector('button')).toBeNull();
+    });
+  });
 });

package/src/components/table/Table.tsx

@@ -10,11 +10,14 @@ import { PaginationPanel } from './pagination/PaginationPanel';
 import { PageSizeSelector } from './pagination/PageSizeSelector';
 import { PaginationControls } from './pagination/PaginationControls';
 import { RowCountInfo } from './pagination/RowCountInfo';
+import { BulkActionsDropdown } from './BulkActionsDropdown';
+import { HideColumnsDropdown } from './HideColumnsDropdown';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
   'wrapperClassName'?: string;
   'data-testid'?: string;
+  'hasSearch'?: boolean;
   'footerContent'?: ReactNode;
   'footerTestId'?: string;
   'headerContent'?: ReactNode;
@@ -29,6 +32,7 @@ export const Table = (props: TableProps) => {
     wrapperClassName,
     headerContent,
     headerTestId,
+    hasSearch = true,
     footerContent,
     footerTestId,
     onGridReady,
@@ -37,11 +41,13 @@ export const Table = (props: TableProps) => {
 
   const [gridApi, setGridApi] = useState<GridApi | null>(null);
 
+  const [searchValue, setSearchValue] = useState('');
+
   return (
     <GridApiContext.Provider value={gridApi}>
       <section data-testid={testId} className={classNames('ds-table__container', wrapperClassName)}>
         {headerContent && (
-          <TableHeader data-testid={headerTestId}>
+          <TableHeader data-testid={headerTestId} hasSearch={hasSearch} searchValue={searchValue} setSearchValue={setSearchValue}>
             {headerContent}
           </TableHeader>
         )}
@@ -54,6 +60,7 @@ export const Table = (props: TableProps) => {
           }}
           suppressPaginationPanel
           {...rest}
+          {...(hasSearch && { quickFilterText: searchValue })}
         />
         {footerContent && (
           <TableFooter data-testid={footerTestId}>
@@ -69,3 +76,5 @@ Table.PaginationPanel = PaginationPanel;
 Table.PageSizeSelector = PageSizeSelector;
 Table.PaginationControls = PaginationControls;
 Table.RowCountInfo = RowCountInfo;
+Table.BulkActionsDropdown = BulkActionsDropdown;
+Table.HideColumnsDropdown = HideColumnsDropdown;

package/src/components/table/TableHeader.tsx

@@ -1,8 +1,12 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
+import { SearchBar } from 'Components/searchBar/SearchBar';
 
 type TableHeaderProps = {
   'className'?: string;
+  'hasSearch'?: boolean;
+  'searchValue'?: string;
+  'setSearchValue'?: (searchValue: string) => void;
   'children'?: ReactNode;
   'data-testid'?: string;
 };
@@ -10,6 +14,9 @@ type TableHeaderProps = {
 export const TableHeader = (props: TableHeaderProps) => {
   const {
     className,
+    hasSearch,
+    searchValue,
+    setSearchValue,
     children,
     'data-testid': dataTestId,
   } = props;
@@ -20,6 +27,7 @@ export const TableHeader = (props: TableHeaderProps) => {
       className={classNames('ds-table__header', className)}
     >
       {children}
+      {hasSearch && <SearchBar searchValue={searchValue} setSearchValue={setSearchValue} />}
     </header>
   );
 };

package/src/components/table/table.scss

@@ -17,5 +17,27 @@
     color: var(--tables-header-color-text);
     background-color: var(--tables-header-color-background);
     padding: var(--tables-header-spacing-top) var(--tables-header-spacing-horizontal) var(--tables-header-spacing-bottom);
+    gap: var(--tables-controls-spacing-gap);
+
+    .ds-search-bar--inactive {
+      margin-left: auto;
+      border-radius: var(--search-in-table-radius);
+      background: var(--search-in-table-default-color-background);
+
+      &:hover {
+        background: var(--search-in-table-hover-color-background);
+      }
+    }
+
+    .ds-search-bar {
+      margin-left: auto;
+      border-radius: var(--search-in-table-radius);
+      background: var(--search-in-table-default-color-background);
+
+      &__input {
+        color: var(--search-in-table-default-color-text);
+        background-color: var(--search-in-table-default-color-background);
+      }
+    }
   }
 }

package/src/index.scss

@@ -1,23 +1,25 @@
-@use './tokens.scss';
-@use './global.scss';
-@use './components/button/button.scss';
-@use './components/icon/icon.scss';
-@use './components/heading/heading.scss';
-@use './components/card/card.scss';
-@use './components/dropdown/dropdown.scss';
-@use './components/formField/formField.scss';
-@use './components/formField/inputs/input.scss';
-@use './components/formField/label/label.scss';
-@use './components/formField/inputs/number/numberInput.scss';
-@use './components/formField/inputs/radio/radioButtonInput.scss';
-@use './components/formField/inputs/checkbox/checkboxInput.scss';
+@use "./tokens.scss";
+@use "./global.scss";
+@use "components/button/button.scss";
+@use "components/icon/icon.scss";
+@use "components/heading/heading.scss";
+@use "components/card/card.scss";
+@use "components/dropdown/dropdown.scss";
+@use "components/formField/formField.scss";
+@use "components/formField/inputs/input.scss";
+@use "components/formField/label/label.scss";
+@use "components/formField/inputs/number/numberInput.scss";
+@use "components/formField/inputs/radio/radioButtonInput.scss";
+@use "components/formField/inputs/checkbox/checkboxInput.scss";
 @use "components/formField/inputs/selectDropdown/selectDropdown";
-@use './components/pill/pill.scss';
-@use './components/section/section.scss';
-@use './components/tabs/tabs.scss';
-@use "./components/slideoverManager/slideoverManager.scss";
-@use "./components/slideover/slideover.scss";
-@use "./components/table/table.scss";
-@use "./components/table/pagination/pagination.scss";
-@use "./components/tooltip/tooltip.scss";
-@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
+@use "components/formField/inputs/colourPickerDropdown/colourPickerDropdown.scss";
+@use "components/pill/pill.scss";
+@use "components/section/section.scss";
+@use "components/tabs/tabs.scss";
+@use "components/slideoverManager/slideoverManager.scss";
+@use "components/slideover/slideover.scss";
+@use "components/table/table.scss";
+@use "components/searchBar/searchBar.scss";
+@use "components/table/pagination/pagination.scss";
+@use "components/tooltip/tooltip.scss";
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -9,6 +9,7 @@ export { Tabs } from 'Components/tabs/Tabs';
 export { TextInput } from 'Components/formField/inputs/text/TextInput';
 export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
 export { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+export { ColourPickerDropdown } from 'Components/formField/inputs/colourPickerDropdown/ColourPickerDropdown';
 export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
 export { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';

package/.github/workflows/changeset-version.yml

@@ -1,39 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - main
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: ".nvmrc"
-          cache: "yarn"
-
-      - name: Install yarn
-        run: npm install yarn -g
-
-      - name: Install Dependencies
-        run: yarn
-
-      - name: Create Release Pull Request
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          title: package-update/Version Packages
-        env:
-          GITHUB_TOKEN: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}

package/.github/workflows/merge-version-packages-pr.yml

@@ -1,31 +0,0 @@
-name: 'Auto-Merge Version Packages'
-
-on:
-  schedule:
-    # At 07:00 on every day-of-week from Monday through Friday. https://crontab.guru/#0_6_*_*_1-5
-    - cron: '0 7 * * 1-5'
-jobs:
-  find-approve-merge-version-packages:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Find Pull Request
-        uses: juliangruber/find-pull-request-action@v1
-        id: find-pull-request
-        with:
-          branch: changeset-release/main
-          repo: arbor-education/design-system.components
-
-      - name: Approve Pull Request
-        uses: juliangruber/approve-pull-request-action@v2
-        with:
-          github-token: ${{ secrets.ARBOR_AUTOMATION_SIS_GHA_TIMED_MERGE }}
-          number: ${{ steps.find-pull-request.outputs.number }}
-          repo: arbor-education/design-system.components
-
-      - name: Merge Pull Request
-        uses: juliangruber/merge-pull-request-action@v1
-        with:
-          github-token: ${{ secrets.ARBOR_AUTOMATION_SIS_GHA_TIMED_MERGE }}
-          number: ${{ steps.find-pull-request.outputs.number }}
-          method: squash # merge rebase
-          repo: arbor-education/design-system.components