@indico-data/design-system 2.47.3 → 2.49.0

package/lib/utils/getPreviousHeadersWidth.d.ts

@@ -0,0 +1 @@
+export declare const getPreviousHeadersWidth: (position: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.47.3",
+  "version": "2.49.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/index.ts

@@ -20,3 +20,4 @@ export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal } from './modal';
 export { Badge } from './badge';
+export { Pagination } from './pagination';

package/src/components/pagination/Pagination.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Pagination from './Pagination.stories';
+import { Container, Row, Col } from '../grid';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+
+
+<Meta title="Layout/Pagination" name="Pagination" of={Pagination} />
+
+# Pagination
+
+<Canvas of={Pagination.Default} />
+
+### The following props are available for the Pagination component:
+
+<Controls of={Pagination.Default} />
+
+### Usage
+
+The pagination component is used to navigate through a list of items. It is already baked into the Table component. To manage the pagination, there is an `onChange` callback that returns the next page, previous page, or the page entered in the input field. This will then be used by your implementation to update the page.
+
+```tsx
+
+<Pagination totalPages={10} currentPage={1} onChange={(page) => console.log(page)} />
+```
+
+
+### Notes
+
+The input field allows the user to enter an invalid number but it will warn them by highlighting the input in red. When the user clicks out, it will then revert to its original value.

package/src/components/pagination/Pagination.stories.tsx

@@ -0,0 +1,80 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+import { Col, Container, Row } from '../grid';
+import { useEffect, useState } from 'react';
+
+const meta: Meta = {
+  title: 'Layout/Pagination',
+  component: Pagination,
+  argTypes: {
+    className: {
+      control: false,
+      description: 'The css class name for the pagination component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'css class',
+        },
+      },
+    },
+    totalPages: {
+      control: 'number',
+      description: 'The total number of pages to be displayed',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    currentPage: {
+      control: 'number',
+      description: 'The current page displayed in the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    onChange: {
+      action: 'change',
+      description: 'The callback function that is called when the page changes.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: '(page: number) => void',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  args: {
+    totalPages: 10,
+    currentPage: 1,
+  },
+
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(args.currentPage);
+
+    useEffect(() => {
+      setCurrentPage(args.currentPage);
+    }, [args.currentPage]);
+
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Pagination {...args} currentPage={currentPage} onChange={setCurrentPage} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/pagination/Pagination.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { PaginationProps } from './types';
+import { Container, Row, Col } from '../grid';
+import { Input } from '../forms/input';
+import { Button } from '../button';
+
+export const Pagination = ({
+  totalPages,
+  currentPage = 1,
+  onChange,
+  className,
+  ...rest
+}: PaginationProps) => {
+  const [inputValue, setInputValue] = useState(currentPage.toString());
+  const totalPagesText = `of ${totalPages}`;
+  const classes = classNames('pagination', className);
+
+  useEffect(() => {
+    setInputValue(currentPage.toString());
+  }, [currentPage]);
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      onChange?.(currentPage + 1);
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      onChange?.(currentPage - 1);
+    }
+  };
+
+  const validateAndUpdatePage = (value: string) => {
+    // If empty or invalid, reset to current page
+    if (!value) {
+      setInputValue(currentPage.toString());
+      return;
+    }
+
+    const page = Number(value);
+    if (!isNaN(page) && page > 0 && page <= totalPages) {
+      onChange?.(page);
+    } else {
+      setInputValue(currentPage.toString());
+    }
+  };
+
+  const isNextButtonDisabled = currentPage === totalPages;
+  const isPreviousButtonDisabled = currentPage === 1;
+
+  const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
+
+  return (
+    <div className={classes} {...rest}>
+      <Container>
+        <Row gutterWidth={12} align="center">
+          <Col xs="content">
+            <div className="pagination__previous">
+              <Button
+                data-testid="pagination-previous-button"
+                ariaLabel="Previous Page"
+                variant="link"
+                onClick={handlePreviousPage}
+                iconLeft="chevron-left"
+                isDisabled={isPreviousButtonDisabled}
+              />
+            </div>
+          </Col>
+          <Col xs="content">
+            <div className="pagination__current-page">
+              <Input
+                data-testid="pagination-current-page-input"
+                className={classNames('pagination__current-page-input', {
+                  'has-error': hasError,
+                })}
+                value={inputValue}
+                name="currentPage"
+                label="Current Page"
+                hasHiddenLabel
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (e.key === 'Enter') {
+                    validateAndUpdatePage(e.currentTarget.value);
+                  }
+                }}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const value = e.currentTarget.value;
+                  // Allow empty value or numbers
+                  if (value === '' || /^\d*$/.test(value)) {
+                    setInputValue(value);
+                  }
+                }}
+                onBlur={(e) => validateAndUpdatePage(e.currentTarget.value)}
+              />
+            </div>
+          </Col>
+          <Col xs="content">
+            <p className="pagination__page-total">{totalPagesText}</p>
+          </Col>
+          <Col xs="content">
+            <div className="pagination__next">
+              <Button
+                data-testid="pagination-next-button"
+                ariaLabel="Next Page"
+                variant="link"
+                onClick={handleNextPage}
+                iconLeft="chevron-right"
+                isDisabled={isNextButtonDisabled}
+              />
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  );
+};

package/src/components/pagination/__tests__/Pagination.test.tsx

@@ -0,0 +1,91 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Pagination } from '../Pagination';
+
+describe('Pagination', () => {
+  it('fires the onChange callback when the user clicks the next button', () => {
+    const onChange = jest.fn();
+    render(<Pagination totalPages={10} currentPage={1} onChange={onChange} />);
+    fireEvent.click(screen.getByTestId('pagination-next-button'));
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  it('fires the onChange callback when the user clicks the previous button', () => {
+    const onChange = jest.fn();
+    render(<Pagination totalPages={10} currentPage={2} onChange={onChange} />);
+    fireEvent.click(screen.getByTestId('pagination-previous-button'));
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+
+  it('does not fire the onchange callback when the user clicks next and they are already on the last page', () => {
+    const onChange = jest.fn();
+    render(<Pagination totalPages={10} currentPage={10} onChange={onChange} />);
+    fireEvent.click(screen.getByTestId('pagination-next-button'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('does not fire the onchange callback when the user clicks previous and they are already on the first page', () => {
+    const onChange = jest.fn();
+    render(<Pagination totalPages={10} currentPage={1} onChange={onChange} />);
+    fireEvent.click(screen.getByTestId('pagination-previous-button'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('fires the onchange callback when the user enters a value in the input field', () => {
+    const onChange = jest.fn();
+    render(<Pagination totalPages={10} currentPage={1} onChange={onChange} />);
+    fireEvent.change(screen.getByTestId('pagination-current-page-input'), {
+      target: { value: '2' },
+    });
+    fireEvent.keyDown(screen.getByTestId('pagination-current-page-input'), {
+      key: 'Enter',
+      code: 'Enter',
+    });
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  it('does not fire the onChange callback when the user enters an invalid value in the input field', () => {
+    const onChange = jest.fn();
+    render(<Pagination totalPages={10} currentPage={1} onChange={onChange} />);
+
+    // Test non-numeric input
+    fireEvent.change(screen.getByTestId('pagination-current-page-input'), {
+      target: { value: 'abc' },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Test empty input
+    fireEvent.change(screen.getByTestId('pagination-current-page-input'), {
+      target: { value: '' },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Test out of range input
+    fireEvent.change(screen.getByTestId('pagination-current-page-input'), {
+      target: { value: '0' },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.change(screen.getByTestId('pagination-current-page-input'), {
+      target: { value: '11' },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('disables the next button when the user is on the last page', () => {
+    render(<Pagination totalPages={10} currentPage={10} onChange={() => {}} />);
+    expect(screen.getByTestId('pagination-next-button')).toBeDisabled();
+  });
+
+  it('disables the previous button when the user is on the first page', () => {
+    render(<Pagination totalPages={10} currentPage={1} onChange={() => {}} />);
+    expect(screen.getByTestId('pagination-previous-button')).toBeDisabled();
+  });
+
+  it('adds the has-error class to the input field when the user enters an invalid value', () => {
+    render(<Pagination totalPages={10} currentPage={1} onChange={() => {}} />);
+    fireEvent.change(screen.getByTestId('pagination-current-page-input'), {
+      target: { value: '11' },
+    });
+    expect(screen.getByTestId('pagination-current-page-input')).toHaveClass('has-error');
+  });
+});

package/src/components/pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/src/components/pagination/styles/Pagination.scss

@@ -0,0 +1,22 @@
+.pagination {
+  .form-control {
+    margin-bottom: 0;
+  }
+}
+
+.pagination__current-page {
+  max-width: 50px;
+}
+
+.pagination__current-page-input {
+  text-align: center;
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+.pagination {
+  .pagination__current-page-input {
+    &.has-error {
+      border-color: var(--pf-error-color);
+    }
+  }
+}

package/src/components/pagination/types.ts

@@ -0,0 +1,6 @@
+export interface PaginationProps {
+  totalPages: number;
+  currentPage?: number;
+  className?: string;
+  onChange?: (value: number) => void;
+}

package/src/components/table/Table.mdx

@@ -1,6 +1,8 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as TableStories from './Table.stories';
 
+
+
 <Meta title="Layout/Table" name="Table" />
 
 # Table
@@ -19,6 +21,9 @@ The `conditionalRowStyles` prop allows you to apply custom styles to specific ro
 
 - **`highlighted`**: This class is used to visually emphasize specific rows. When applied, the row will inherit styles defined in the design system, making the row stand out with distinct border and background colors.
 
+### Issues with storybook
+You may notice the stories may behave a little strangely on storybook, this is not the case in the application. One such bug would be the checkboxes pinning on the default example when toggling props. Another will be the select all checkbox not being locked on the second pinned column example. We have not investigated as this is likely a quirk with the storybook environment. 
+
 ### Example Usage
 
 Here's an example of how to use the `conditionalRowStyles` prop to apply the `checked` and `highlighted` classes:
@@ -42,3 +47,134 @@ const conditionalRowStyles = [
   conditionalRowStyles={conditionalRowStyles}
 />;
 ```
+
+## Pinned Columns
+
+The `canPinColumns` prop allows you to pin columns to the left hand side of the table. This is useful for displaying important columns that should be visible at all times.
+
+## Known Bugs
+A limitation of the library has caused us to compromise on the column widths. We had to choose between allowing the pinning of Fixed Width columns, or allowing the pinning of Auto Widths columns. As it stands right now, we went with Fixed Width columns. As a result, you will experience pixel drift on the third+ columns if you do not use fixed width. An example on how to use the fixed width is the following.
+```jsx
+ columns={[
+    {
+      isPinned: false,
+      name: 'Name',
+      selector: () => {},
+      width: '150px'
+    },
+  ]}
+  ```
+
+### Note
+
+It will require both `canPinColumns` to be set to `true` and the columns that you wish to have the pin icon contain `isPinned: true` or `isPinned: false` to function. If `isPinned` is undefined, no icon will appear.
+<Canvas of={TableStories.PinnedColumns} />
+```jsx
+<Table
+  canPinColumns
+  columns={[
+    {
+      isPinned: false,
+      name: 'Name',
+      selector: () => {},
+      width: '150px'
+    },
+    {
+      isPinned: true,
+      name: 'Class',
+      selector: () => {},
+      width: '150px'
+    },
+    {
+      isPinned: true,
+      name: 'Age',
+      selector: () => {},
+      width: '150px'
+    },
+    {
+      name: 'Weapon',
+      selector: () => {}
+    },
+    {
+      name: 'Backstory',
+      selector: () => {}
+    },
+    {
+      name: 'Favorite Meal',
+      selector: () => {}
+    },
+    {
+      name: 'Homeland',
+      selector: () => {}
+    },
+    {
+      name: 'Alignment',
+      selector: () => {}
+    },
+    {
+      isPinned: false,
+      name: 'Special Ability',
+      selector: () => {}
+    }
+  ]}
+  data={[
+    {
+      age: 120,
+      alignment: 'Neutral Good',
+      backstory: 'Raised by wolves in the deep forests.',
+      class: 'Ranger',
+      favoriteMeal: 'Venison stew',
+      homeland: 'Silverleaf Forest',
+      name: 'Thalion',
+      specialAbility: 'Beast Speech',
+      test: 'test',
+      weapon: 'Longbow'
+    },
+    {
+      age: 35,
+      alignment: 'Lawful Good',
+      backstory: 'A former soldier seeking redemption.',
+      class: 'Fighter',
+      favoriteMeal: 'Roasted boar',
+      homeland: 'Kingdom of Valorhaven',
+      name: 'Brom',
+      specialAbility: 'Battle Master',
+      test: 'test',
+      weapon: 'Greatsword'
+    },
+    {
+      age: 60,
+      alignment: 'Lawful Good',
+      backstory: 'A devoted follower of the goddess of life.',
+      class: 'Cleric',
+      favoriteMeal: 'Vegetable soup',
+      homeland: 'Temple of Dawn',
+      name: 'Elysia',
+      specialAbility: 'Divine Healing',
+      test: 'test',
+      weapon: 'Mace'
+    },
+    //... more rows
+  ]}
+  dense
+  direction="ltr"
+  fixedHeader
+  noDataComponent={null}
+  onPinnedColumnsChange={() => {}}
+  pagination
+  paginationPerPage={10}
+  paginationRowsPerPageOptions={[
+    5,
+    10,
+    15,
+    20
+  ]}
+  responsive
+  selectableRows
+  subHeaderAlign="center"
+  subHeaderComponent={null}
+  subHeaderWrap
+  title="Character List"
+  totalEntriesText="Showing 12 of 12 entries."
+/>
+```

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

@@ -1,6 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Table } from './Table';
-import { SampleDataRow, sampleData } from './sampleData';
+import { columns, sampleData, SampleDataRow } from './sampleData';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+import { useState } from 'react';
+
+registerFontAwesomeIcons(...Object.values(indiconDefinitions));
 
 const meta: Meta = {
   title: 'Layout/Table',
@@ -8,7 +13,8 @@ const meta: Meta = {
   argTypes: {
     columns: {
       control: false,
-      description: 'The columns to display in the table',
+      description:
+        'The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below.',
       table: {
         category: 'Data',
         type: { summary: 'array' },
@@ -239,6 +245,29 @@ const meta: Meta = {
         defaultValue: { summary: 'false' },
       },
     },
+    totalEntriesText: {
+      control: 'text',
+      description:
+        'The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed.',
+      table: {
+        category: 'Styling',
+      },
+    },
+    canPinColumns: {
+      control: 'boolean',
+      description:
+        'Allows the pinning of columns to the left hand side. This is required when using the column pin API',
+      table: {
+        category: 'Add-Ons',
+      },
+    },
+    onPinnedColumnsChange: {
+      control: false,
+      description: 'Callback that receives the IDs of the pinned columns when they change.',
+      table: {
+        category: 'Add-Ons',
+      },
+    },
     // hidden props
     onRowDoubleClicked: {
       table: {
@@ -495,6 +524,11 @@ const meta: Meta = {
         disable: true,
       },
     },
+    currentPage: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 
@@ -504,6 +538,7 @@ type Story = StoryObj<typeof Table<SampleDataRow>>;
 
 export const Default: Story = {
   args: {
+    canPinColumns: false,
     pagination: true,
     selectableRows: true,
     isDisabled: false,
@@ -523,36 +558,62 @@ export const Default: Story = {
     clearSelectedRows: false,
     subHeader: false,
     subHeaderComponent: null,
+    fixedHeader: true,
     paginationPerPage: 10,
     isFullHeight: false,
-    columns: [
-      {
-        name: 'Name',
-        selector: (row) => row.name,
-      },
-      {
-        name: 'Class',
-        selector: (row) => row.class,
-      },
-      {
-        name: 'Age',
-        selector: (row) => row.age,
-        sortable: true,
-      },
-      {
-        name: 'Weapon',
-        selector: (row) => row.weapon,
-      },
-      {
-        name: 'Backstory',
-        selector: (row) => row.backstory,
-      },
-      {
-        name: 'Favorite Meal',
-        selector: (row) => row.favoriteMeal,
-      },
-    ],
+    totalEntriesText: 'Showing 12 of 12 entries.',
+    columns: columns,
     data: sampleData,
   },
-  render: ({ ...args }) => <Table {...args} />,
+  render: ({ ...args }) => {
+    return <Table {...args} columns={columns} />;
+  },
+};
+
+export const PinnedColumns: Story = {
+  args: {
+    canPinColumns: true,
+    pagination: true,
+    selectableRows: true,
+    isDisabled: false,
+    isLoading: false,
+    direction: 'ltr',
+    striped: false,
+    subHeaderAlign: 'center',
+    subHeaderWrap: true,
+    paginationRowsPerPageOptions: [5, 10, 15, 20],
+    responsive: true,
+    title: 'Character List',
+    dense: true,
+    noHeader: false,
+    noTableHead: false,
+    noDataComponent: null,
+    expandableRows: false,
+    clearSelectedRows: false,
+    subHeader: false,
+    subHeaderComponent: null,
+    fixedHeader: true,
+    paginationPerPage: 10,
+    isFullHeight: false,
+    totalEntriesText: 'Showing 12 of 12 entries.',
+    columns: columns,
+    data: sampleData,
+  },
+  render: ({ ...args }) => {
+    const initialPinnedColumnIds = ['name', 'class'];
+    const [pinnedColumnIds, setPinnedColumnIds] = useState<string[]>(initialPinnedColumnIds);
+
+    const columnsWithPinning = columns.map((column) => ({
+      ...column,
+      isPinned: pinnedColumnIds.includes(column.id as string),
+    }));
+
+    return (
+      <Table
+        {...args}
+        columns={columnsWithPinning}
+        onPinnedColumnsChange={(ids) => setPinnedColumnIds(ids)}
+      />
+    );
+  },
 };