uikit-react-public 0.37.0 → 0.37.2

package/lib/components/Pagination/Pagination.stories.tsx

@@ -44,6 +44,15 @@ export const FewPages: Story = {
   },
 };
 
+export const Compact: Story = {
+  args: {
+    offset: 0,
+    limit: 20,
+    total: 60,
+    children: <Pagination.Controls variant='compact' />,
+  },
+};
+
 export const ItemsInfo: Story = {
   args: {
     offset: 60,

package/lib/components/Pagination/PaginationControls.tsx

@@ -1,262 +1,34 @@
-import { HTMLAttributes, memo, useContext, useCallback } from 'react';
-import { css, cx } from '@emotion/css';
-import useTheme from '../../theme/useTheme';
-import { PaginationContext } from './Pagination';
-import Button from '../Button';
-import getPaginationButtons from './getPaginationButtons';
-import { useMediaQuery } from '../../hooks';
+import { HTMLAttributes, memo } from 'react';
+import {
+  PaginationCompactControls,
+  PaginationStandardControls,
+} from './subcomponents';
 
 export const NAME = 'ucl-ukit-pagination__controls';
 export const DEFAULT_MAX_BUTTONS = 9;
 
 export interface PaginationControlsProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'compact';
   maxNumberButtons?: number;
   testId?: string;
 }
 
 const PaginationControls = ({
+  variant = 'default',
   maxNumberButtons = DEFAULT_MAX_BUTTONS,
   testId = NAME,
   className,
+  ...props
 }: PaginationControlsProps) => {
-  const [theme] = useTheme();
-
-  const isTabletPlus = useMediaQuery(
-    `(min-width: ${theme.breakpoints.tablet}px)`
-  );
-
-  const contextValue = useContext(PaginationContext);
-
-  const handlePageChange = useCallback(
-    (newPage: number) => {
-      if (contextValue) {
-        const { mode, limit, onPageChange, currentPage, trackedMaxPage } =
-          contextValue;
-
-        if (mode === 'tracked') {
-          if (
-            newPage < 1 ||
-            newPage > trackedMaxPage ||
-            newPage === currentPage
-          ) {
-            return;
-          }
-          if (onPageChange) {
-            onPageChange(newPage);
-          }
-          return;
-        }
-
-        const newOffset = (newPage - 1) * limit;
-        if (onPageChange) {
-          onPageChange(newOffset);
-        }
-      }
-    },
-    [contextValue]
-  );
-
-  if (!contextValue) {
-    return null;
-  }
-
-  const {
-    mode,
-    limit,
-    total,
-    currentPage,
-    trackedMaxPage,
-    hasPreviousPage,
-    hasNextPage,
-    onNextPage,
-    onPreviousPage,
-  } = contextValue;
-
-  const totalPages =
-    typeof total === 'number' ? Math.ceil(total / limit) : undefined;
-
-  const paginationButtons =
-    mode === 'tracked'
-      ? Array.from({ length: trackedMaxPage }, (_, i) => i + 1)
-      : getPaginationButtons(
-          currentPage,
-          totalPages ?? 0,
-          isTabletPlus ? maxNumberButtons : 5
-        );
-
-  const baseStyle = css``;
-
-  const style = cx(NAME, baseStyle, className);
-
-  const listStyle = css`
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    list-style: none;
-    gap: ${theme.margin.m4};
-    flex-wrap: nowrap;
-
-    @media (min-width: ${theme.breakpoints.tablet}px) {
-      gap: ${theme.margin.m8};
-    }
-  `;
-
-  const buttonBaseStyle = css`
-    @media (max-width: ${theme.breakpoints.tablet}px) {
-      gap: ${theme.margin.m4};
-    }
-  `;
-
-  const previousButtonStyle = cx(
-    buttonBaseStyle,
-    css`
-      margin-right: ${theme.margin.m16};
-      display: none;
-
-      @media (min-width: ${theme.breakpoints.tablet}px) {
-        display: inline-block;
-      }
-    `
-  );
-
-  const nextButtonStyle = cx(
-    buttonBaseStyle,
-    css`
-      margin-left: ${theme.margin.m16};
-      display: none;
-
-      @media (min-width: ${theme.breakpoints.tablet}px) {
-        display: inline-block;
-      }
-    `
-  );
-
-  const pageNumberButtonBaseStyle = cx(
-    buttonBaseStyle,
-    css`
-      height: 40px;
-      min-width: 40px;
-      padding: 0;
-
-      @media (min-width: ${theme.breakpoints.tablet}px) {
-        height: 48px;
-        min-width: 48px;
-      }
-    `
-  );
-
-  const pageNumberButtonStyle = cx(
-    pageNumberButtonBaseStyle,
-    css`
-      border: none;
-      color: ${theme.colour.text.secondary};
-    `
-  );
-
-  const currentPageNumberButtonStyle = cx(
-    pageNumberButtonBaseStyle,
-    css`
-      color: ${theme.colour.text.brand};
-      border-color: ${theme.colour.border.brand};
-    `
-  );
-
-  const buttonNumberLabelStyle = css`
-    padding: 0 ${theme.padding.p8};
-  `;
-
-  return (
-    <nav
-      className={style}
-      aria-label={
-        typeof totalPages === 'number'
-          ? `Pagination, ${totalPages} pages total`
-          : 'Pagination'
-      }
-      data-testid={testId}
-    >
-      <ul className={listStyle}>
-        <li>
-          <Button
-            className={previousButtonStyle}
-            variant='tertiary'
-            size={isTabletPlus ? 'default' : 'small'}
-            aria-label='Go to previous page'
-            onClick={() => {
-              if (mode === 'tracked') {
-                if (onPreviousPage) {
-                  onPreviousPage();
-                } else {
-                  handlePageChange(currentPage - 1);
-                }
-                return;
-              }
-              handlePageChange(currentPage - 1);
-            }}
-            disabled={!hasPreviousPage}
-          >
-            Previous
-          </Button>
-        </li>
-
-        {paginationButtons.map((page) => (
-          <li key={page}>
-            {page === '...1' || page === '...2' ? (
-              <span aria-hidden>...</span>
-            ) : (
-              <>
-                {page !== currentPage && (
-                  <Button
-                    className={pageNumberButtonStyle}
-                    variant='secondary'
-                    size={isTabletPlus ? 'default' : 'small'}
-                    aria-label={`Page ${page}`}
-                    onClick={() => handlePageChange(page)}
-                  >
-                    <span className={buttonNumberLabelStyle}>{page}</span>
-                  </Button>
-                )}
-                {page === currentPage && (
-                  <Button
-                    className={currentPageNumberButtonStyle}
-                    variant='secondary'
-                    size={isTabletPlus ? 'default' : 'small'}
-                    aria-label={`Page ${page}, current page`}
-                    aria-current='page'
-                    disabled
-                    onClick={() => handlePageChange(page)}
-                  >
-                    <span className={buttonNumberLabelStyle}>{page}</span>
-                  </Button>
-                )}
-              </>
-            )}
-          </li>
-        ))}
-
-        <li>
-          <Button
-            className={nextButtonStyle}
-            variant='tertiary'
-            aria-label='Go to next page'
-            onClick={() => {
-              if (mode === 'tracked') {
-                if (onNextPage) {
-                  onNextPage();
-                }
-                return;
-              }
-              handlePageChange(currentPage + 1);
-            }}
-            disabled={!hasNextPage}
-          >
-            Next
-          </Button>
-        </li>
-      </ul>
-    </nav>
+  const controlsProps = { ...props, className, name: NAME, testId };
+
+  return variant === 'compact' ? (
+    <PaginationCompactControls {...controlsProps} />
+  ) : (
+    <PaginationStandardControls
+      {...controlsProps}
+      maxNumberButtons={maxNumberButtons}
+    />
   );
 };
 

package/lib/components/Pagination/__tests__/PaginationControls.test.tsx

@@ -0,0 +1,213 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { ThemeContextProvider } from '../../../theme';
+import announce from '../../../utils/announce';
+import Pagination from '..';
+
+vi.mock('../../../utils/announce');
+
+const renderPagination = (
+  props: Partial<React.ComponentProps<typeof Pagination>> = {},
+  controlsProps: React.ComponentProps<typeof Pagination.Controls> = {
+    variant: 'compact',
+  }
+) =>
+  render(
+    <ThemeContextProvider>
+      <Pagination
+        offset={20}
+        limit={20}
+        total={60}
+        {...props}
+      >
+        <Pagination.Controls {...controlsProps} />
+      </Pagination>
+    </ThemeContextProvider>
+  );
+
+describe('PaginationControls', () => {
+  test.each(['default', 'compact'] as const)(
+    'forwards HTML attributes to the %s controls',
+    (variant) => {
+      renderPagination({}, { variant, title: `${variant} controls` });
+
+      expect(screen.getByTitle(`${variant} controls`)).toBeInTheDocument();
+    }
+  );
+
+  test('renders compact pagination controls', () => {
+    renderPagination();
+
+    expect(
+      screen.getByRole('button', { name: 'Go to previous page' })
+    ).toBeEnabled();
+    expect(screen.getByRole('textbox', { name: 'Page number' })).toHaveValue(
+      '2'
+    );
+    expect(
+      screen.getByRole('textbox', { name: 'Page number' })
+    ).toHaveAccessibleDescription(
+      'Page 2 of 3. Enter a page number and press Enter.'
+    );
+    expect(screen.getByText('of 3')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Go to next page' })
+    ).toBeEnabled();
+    expect(screen.queryByRole('button', { name: 'Page 1' })).toBeNull();
+  });
+
+  test('changes page using compact controls', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+
+    const ControlledPagination = () => {
+      const [offset, setOffset] = useState(20);
+
+      const handlePageChange = (newOffset: number) => {
+        onPageChange(newOffset);
+        setOffset(newOffset);
+      };
+
+      return (
+        <ThemeContextProvider>
+          <Pagination
+            offset={offset}
+            limit={20}
+            total={60}
+            onPageChange={handlePageChange}
+          >
+            <Pagination.Controls variant='compact' />
+          </Pagination>
+        </ThemeContextProvider>
+      );
+    };
+
+    render(<ControlledPagination />);
+
+    await user.click(
+      screen.getByRole('button', { name: 'Go to previous page' })
+    );
+    expect(screen.getByRole('textbox', { name: 'Page number' })).toHaveValue(
+      '1'
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Go to next page' }));
+    expect(screen.getByRole('textbox', { name: 'Page number' })).toHaveValue(
+      '2'
+    );
+
+    expect(onPageChange).toHaveBeenNthCalledWith(1, 0);
+    expect(onPageChange).toHaveBeenNthCalledWith(2, 20);
+  });
+
+  test('changes page when a page number is entered', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    renderPagination({ offset: 0, total: 100, onPageChange });
+
+    const currentPageInput = screen.getByRole('textbox', {
+      name: 'Page number',
+    });
+    await user.clear(currentPageInput);
+    await user.type(currentPageInput, '4{Enter}');
+
+    expect(onPageChange).toHaveBeenCalledWith(60);
+    expect(currentPageInput).not.toHaveFocus();
+  });
+
+  test('does not change page when the entered page is out of range', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    renderPagination({ offset: 0, onPageChange });
+
+    const currentPageInput = screen.getByRole('textbox', {
+      name: 'Page number',
+    });
+    await user.clear(currentPageInput);
+    await user.type(currentPageInput, '4{Enter}');
+
+    expect(onPageChange).not.toHaveBeenCalled();
+    expect(currentPageInput).toHaveValue('4');
+    expect(currentPageInput).toHaveFocus();
+    expect(currentPageInput).toHaveAttribute('aria-invalid', 'true');
+    expect(announce).toHaveBeenCalledWith(
+      'Enter a page number from 1 to 3.',
+      true
+    );
+  });
+
+  test('does not change page when the entered value contains non-digits', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    renderPagination({ offset: 0, total: 2000, onPageChange });
+
+    const currentPageInput = screen.getByRole('textbox', {
+      name: 'Page number',
+    });
+    await user.clear(currentPageInput);
+    await user.type(currentPageInput, '1e2{Enter}');
+
+    expect(onPageChange).not.toHaveBeenCalled();
+    expect(currentPageInput).toHaveAttribute('aria-invalid', 'true');
+    expect(announce).toHaveBeenCalledWith(
+      'Enter a page number from 1 to 100.',
+      true
+    );
+  });
+
+  test('cancels the entered page and exits the input on Escape', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    renderPagination({ onPageChange });
+
+    const currentPageInput = screen.getByRole('textbox', {
+      name: 'Page number',
+    });
+    await user.clear(currentPageInput);
+    await user.type(currentPageInput, '3{Escape}');
+
+    expect(onPageChange).not.toHaveBeenCalled();
+    expect(currentPageInput).toHaveValue('2');
+    expect(currentPageInput).not.toHaveFocus();
+  });
+
+  test('cancels the entered page when the input loses focus', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    renderPagination({ onPageChange });
+
+    const currentPageInput = screen.getByRole('textbox', {
+      name: 'Page number',
+    });
+    await user.clear(currentPageInput);
+    await user.type(currentPageInput, '3');
+    await user.tab();
+
+    expect(onPageChange).not.toHaveBeenCalled();
+    expect(currentPageInput).toHaveValue('2');
+  });
+
+  test('renders zero of zero when there are no pages', () => {
+    renderPagination({ offset: 0, total: 0 });
+
+    expect(
+      screen.getByRole('navigation', { name: 'Pagination, 0 pages total' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Page number' })).toHaveValue(
+      '0'
+    );
+    expect(screen.getByRole('textbox', { name: 'Page number' })).toBeDisabled();
+    expect(
+      screen.getByRole('textbox', { name: 'Page number' })
+    ).toHaveAccessibleDescription('Page 0 of 0.');
+    expect(screen.getByText('of 0')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Go to previous page' })
+    ).toBeDisabled();
+    expect(
+      screen.getByRole('button', { name: 'Go to next page' })
+    ).toBeDisabled();
+  });
+});