@indico-data/design-system 2.47.3 → 2.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.47.3",
+  "version": "2.48.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

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

@@ -1,6 +1,10 @@
 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';
+
+registerFontAwesomeIcons(...Object.values(indiconDefinitions));
 
 const meta: Meta = {
   title: 'Layout/Table',
@@ -239,6 +243,14 @@ 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',
+      },
+    },
     // hidden props
     onRowDoubleClicked: {
       table: {
@@ -495,6 +507,11 @@ const meta: Meta = {
         disable: true,
       },
     },
+    currentPage: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 
@@ -525,33 +542,8 @@ export const Default: Story = {
     subHeaderComponent: null,
     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} />,

package/src/components/table/Table.tsx

@@ -6,6 +6,7 @@ import DataTable, {
 
 import { LoadingComponent } from './LoadingComponent';
 import { TableProps } from './types';
+import { TablePagination } from './components/TablePagination';
 
 export const Table = <T,>(props: TableProps<T>) => {
   const {
@@ -19,6 +20,8 @@ export const Table = <T,>(props: TableProps<T>) => {
     isFullHeight = false,
     subHeaderAlign = 'left',
     className,
+    paginationTotalRows,
+    totalEntriesText,
     ...rest
   } = props;
 
@@ -32,7 +35,7 @@ export const Table = <T,>(props: TableProps<T>) => {
   });
 
   return (
-    <div className={tableWrapperClassName}>
+    <div className={tableWrapperClassName} data-testid="table">
       <DataTable
         responsive={responsive}
         direction={direction as RDTDirection}
@@ -44,6 +47,11 @@ export const Table = <T,>(props: TableProps<T>) => {
         noDataComponent={noDataComponent}
         progressPending={isLoading}
         progressComponent={<LoadingComponent />}
+        pagination
+        paginationComponent={(props) => (
+          <TablePagination {...props} totalEntriesText={totalEntriesText} />
+        )}
+        paginationTotalRows={paginationTotalRows}
         {...rest}
       />
     </div>

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

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { Table } from '../Table';
+import { sampleData, columns } from '../sampleData';
+
+describe('Table', () => {
+  it('renders the total entries text', () => {
+    render(<Table columns={columns} data={sampleData} totalEntriesText="100 entries" />);
+    expect(screen.getByTestId('table-pagination-total-entries')).toBeInTheDocument();
+  });
+});

package/src/components/table/components/TablePagination.tsx

@@ -0,0 +1,44 @@
+import { Pagination as PaginationComponent } from '../../pagination';
+import { Row, Col } from '../../grid';
+interface TablePaginationProps {
+  rowsPerPage: number;
+  rowCount: number;
+  onChangePage: (page: number, perPage: number) => void;
+  currentPage: number;
+  totalEntriesText?: string;
+}
+
+export const TablePagination = ({
+  rowsPerPage,
+  rowCount,
+  onChangePage,
+  currentPage,
+  totalEntriesText,
+}: TablePaginationProps) => {
+  const totalPages = Math.ceil(rowCount / rowsPerPage);
+
+  return (
+    <div className="table__pagination">
+      <Row align="center" justify="between">
+        <Col xs="content">
+          {totalEntriesText && (
+            <span
+              data-testid="table-pagination-total-entries"
+              className="table__pagination-total-entries"
+            >
+              {totalEntriesText}
+            </span>
+          )}
+        </Col>
+        <Col xs="content">
+          <PaginationComponent
+            data-testid="table-pagination-component"
+            totalPages={totalPages}
+            currentPage={currentPage}
+            onChange={(page) => onChangePage(page, rowsPerPage)}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};

package/src/components/table/components/__tests__/TablePagination.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { TablePagination } from '../TablePagination';
+
+describe('TablePagination', () => {
+  it('renders total entries text', () => {
+    render(
+      <TablePagination
+        rowsPerPage={10}
+        rowCount={100}
+        onChangePage={() => {}}
+        currentPage={1}
+        totalEntriesText="100 entries"
+      />,
+    );
+    expect(screen.getByTestId('table-pagination-total-entries')).toBeInTheDocument();
+  });
+});

package/src/components/table/sampleData.ts

@@ -1,3 +1,5 @@
+import { TableColumn } from './types';
+
 export interface SampleDataRow {
   name: string;
   class: string;
@@ -168,4 +170,112 @@ export const sampleData: SampleDataRow[] = [
     backstory: 'A thief with a quick hand.',
     favoriteMeal: 'Fish and chips',
   },
+  {
+    name: 'Thalia',
+    class: 'Wizard',
+    age: 150,
+    weapon: 'Crystal Staff',
+    backstory: 'An archivist of forbidden knowledge.',
+    favoriteMeal: 'Spiced wine and cheese',
+  },
+  {
+    name: 'Ragnar',
+    class: 'Fighter',
+    age: 45,
+    weapon: 'War Hammer',
+    backstory: 'A dwarven smith turned adventurer.',
+    favoriteMeal: 'Mead and roasted mutton',
+  },
+  {
+    name: 'Sylvana',
+    class: 'Ranger',
+    age: 95,
+    weapon: 'Elven Bow',
+    backstory: 'Guardian of the enchanted forest.',
+    favoriteMeal: 'Elvish waybread',
+  },
+  {
+    name: 'Magnus',
+    class: 'Warlock',
+    age: 38,
+    weapon: 'Cursed Dagger',
+    backstory: 'Made a deal with a demon for revenge.',
+    favoriteMeal: 'Blood oranges',
+  },
+  {
+    name: 'Echo',
+    class: 'Bard',
+    age: 23,
+    weapon: 'Enchanted Violin',
+    backstory: 'Can mimic any sound perfectly.',
+    favoriteMeal: 'Sweet rolls',
+  },
+  {
+    name: 'Korg',
+    class: 'Barbarian',
+    age: 32,
+    weapon: 'Stone Maul',
+    backstory: 'Last survivor of a petrified tribe.',
+    favoriteMeal: 'Raw meat',
+  },
+  {
+    name: 'Celeste',
+    class: 'Sorcerer',
+    age: 19,
+    weapon: 'Starlight Wand',
+    backstory: 'Born during a celestial convergence.',
+    favoriteMeal: 'Moon cakes',
+  },
+  {
+    name: 'Raven',
+    class: 'Rogue',
+    age: 27,
+    weapon: 'Shadow Blade',
+    backstory: 'Professional assassin seeking redemption.',
+    favoriteMeal: 'Whatever their mark is having',
+  },
+  {
+    name: 'Terra',
+    class: 'Druid',
+    age: 156,
+    weapon: 'Living Wood Staff',
+    backstory: 'Speaks with ancient trees.',
+    favoriteMeal: 'Wild mushrooms',
+  },
+  {
+    name: 'Ash',
+    class: 'Monk',
+    age: 29,
+    weapon: 'Flame Fists',
+    backstory: 'Raised by phoenix monks in a volcano.',
+    favoriteMeal: 'Spicy noodles',
+  },
+];
+
+export const columns: TableColumn<SampleDataRow>[] = [
+  {
+    name: 'Name',
+    selector: (row: SampleDataRow) => 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,
+  },
 ];