uikit-react-public 0.37.0 → 0.38.0

package/lib/components/Pagination/subcomponents/PaginationCompactControls.tsx

@@ -0,0 +1,266 @@
+import {
+  ChangeEvent,
+  HTMLAttributes,
+  KeyboardEvent,
+  memo,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../../theme/useTheme';
+import { PaginationContext } from '../Pagination';
+import Button from '../../Button';
+import Icon from '../../Icon';
+import Input from '../../Input';
+import Text from '../../Text';
+import announce from '../../../utils/announce';
+
+export interface PaginationCompactControlsProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  testId: string;
+}
+
+const PaginationCompactControls = ({
+  name,
+  testId,
+  className,
+  ...props
+}: PaginationCompactControlsProps) => {
+  const [theme] = useTheme();
+  const contextValue = useContext(PaginationContext);
+  const [pageInputValue, setPageInputValue] = useState(
+    String(contextValue?.currentPage ?? 1)
+  );
+  const [pageInputError, setPageInputError] = useState('');
+  const pageInputDescriptionId = useId();
+
+  useEffect(() => {
+    setPageInputValue(String(contextValue?.currentPage ?? 1));
+    setPageInputError('');
+  }, [contextValue?.currentPage]);
+
+  if (!contextValue) {
+    return null;
+  }
+
+  const {
+    mode,
+    limit,
+    total,
+    currentPage,
+    trackedMaxPage,
+    hasPreviousPage,
+    hasNextPage,
+    onPageChange,
+    onNextPage,
+    onPreviousPage,
+  } = contextValue;
+
+  const totalPages =
+    typeof total === 'number' ? Math.ceil(total / limit) : undefined;
+  const lastPageNumber = totalPages ?? trackedMaxPage;
+  const displayedCurrentPage = totalPages === 0 ? 0 : currentPage;
+
+  const handlePageChange = (newPage: number) => {
+    if (mode === 'tracked') {
+      if (newPage < 1 || newPage > trackedMaxPage || newPage === currentPage) {
+        return;
+      }
+      onPageChange?.(newPage);
+      return;
+    }
+
+    onPageChange?.((newPage - 1) * limit);
+  };
+
+  const handlePreviousPage = () => {
+    if (mode === 'tracked' && onPreviousPage) {
+      onPreviousPage();
+      return;
+    }
+    handlePageChange(currentPage - 1);
+  };
+
+  const handleNextPage = () => {
+    if (mode === 'tracked') {
+      onNextPage?.();
+      return;
+    }
+    handlePageChange(currentPage + 1);
+  };
+
+  const handlePageInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPageInputValue(event.target.value);
+    setPageInputError('');
+  };
+
+  const resetPageInput = () => {
+    setPageInputValue(String(currentPage));
+    setPageInputError('');
+  };
+
+  const handlePageInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      resetPageInput();
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    event.preventDefault();
+
+    const isDigitsOnly = /^\d+$/.test(pageInputValue);
+    const newPageNumber = Number(pageInputValue);
+
+    if (
+      !isDigitsOnly ||
+      !Number.isInteger(newPageNumber) ||
+      newPageNumber < 1 ||
+      newPageNumber > lastPageNumber
+    ) {
+      const errorMessage = `Enter a page number from 1 to ${lastPageNumber}.`;
+      setPageInputError(errorMessage);
+      announce(errorMessage, true);
+      return;
+    }
+
+    setPageInputError('');
+    handlePageChange(newPageNumber);
+    event.currentTarget.blur();
+  };
+
+  const controlsListStyle = css`
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    gap: ${theme.margin.m8};
+  `;
+
+  const navigationButtonStyle = css`
+    gap: ${theme.margin.m8};
+  `;
+
+  const pageInputStyle = css`
+    height: 48px;
+    width: 48px;
+    box-sizing: border-box;
+    border: ${theme.thickness.t2} solid ${theme.colour.border.default};
+    border-radius: ${theme.radius.r4};
+    padding: 0;
+    text-align: center;
+    color: ${theme.colour.text.default};
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-size: ${theme.typography.body.md.fontSize};
+
+    &[aria-invalid='true'] {
+      border-color: ${theme.colour.border.critical};
+    }
+  `;
+
+  const totalPagesLabelStyle = css`
+    color: ${theme.colour.text.secondary};
+    white-space: nowrap;
+  `;
+
+  const visuallyHiddenStyle = css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  `;
+
+  const pageInputDescription =
+    typeof totalPages === 'number'
+      ? `Page ${displayedCurrentPage} of ${totalPages}.${
+          totalPages === 0 ? '' : ' Enter a page number and press Enter.'
+        }`
+      : `Page ${currentPage}. Enter a page number and press Enter.`;
+
+  const style = cx(name, className);
+
+  return (
+    <nav
+      {...props}
+      className={style}
+      aria-label={
+        typeof totalPages === 'number'
+          ? `Pagination, ${totalPages} pages total`
+          : 'Pagination'
+      }
+      data-testid={testId}
+    >
+      <ul className={controlsListStyle}>
+        <li>
+          <Button
+            className={navigationButtonStyle}
+            variant='tertiary'
+            icon={<Icon.ChevronLeft />}
+            aria-label='Go to previous page'
+            onClick={handlePreviousPage}
+            disabled={!hasPreviousPage}
+          >
+            Previous
+          </Button>
+        </li>
+        <li>
+          <Input
+            inputClassName={pageInputStyle}
+            type='text'
+            inputMode='numeric'
+            pattern='[0-9]*'
+            value={
+              totalPages === 0 ? String(displayedCurrentPage) : pageInputValue
+            }
+            aria-label='Page number'
+            aria-current={totalPages === 0 ? undefined : 'page'}
+            aria-describedby={pageInputDescriptionId}
+            aria-invalid={pageInputError ? true : undefined}
+            disabled={totalPages === 0}
+            onChange={handlePageInputChange}
+            onBlur={resetPageInput}
+            onKeyDown={handlePageInputKeyDown}
+          />
+          <span
+            id={pageInputDescriptionId}
+            className={visuallyHiddenStyle}
+          >
+            {pageInputDescription}
+          </span>
+        </li>
+        {typeof totalPages === 'number' && (
+          <li>
+            <Text className={totalPagesLabelStyle}>of {totalPages}</Text>
+          </li>
+        )}
+        <li>
+          <Button
+            className={navigationButtonStyle}
+            variant='tertiary'
+            icon={<Icon.ChevronRight />}
+            iconPosition='right'
+            aria-label='Go to next page'
+            onClick={handleNextPage}
+            disabled={!hasNextPage}
+          >
+            Next
+          </Button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default memo(PaginationCompactControls);

package/lib/components/Pagination/subcomponents/PaginationStandardControls.tsx

@@ -0,0 +1,246 @@
+import { HTMLAttributes, memo, useContext } 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';
+
+export interface PaginationStandardControlsProps extends HTMLAttributes<HTMLDivElement> {
+  maxNumberButtons: number;
+  name: string;
+  testId: string;
+}
+
+const PaginationStandardControls = ({
+  maxNumberButtons,
+  name,
+  testId,
+  className,
+  ...props
+}: PaginationStandardControlsProps) => {
+  const [theme] = useTheme();
+
+  const isTabletPlus = useMediaQuery(
+    `(min-width: ${theme.breakpoints.tablet}px)`
+  );
+
+  const contextValue = useContext(PaginationContext);
+
+  if (!contextValue) {
+    return null;
+  }
+
+  const {
+    mode,
+    limit,
+    total,
+    currentPage,
+    trackedMaxPage,
+    hasPreviousPage,
+    hasNextPage,
+    onPageChange,
+    onNextPage,
+    onPreviousPage,
+  } = contextValue;
+
+  const handlePageChange = (newPage: number) => {
+    if (mode === 'tracked') {
+      if (newPage < 1 || newPage > trackedMaxPage || newPage === currentPage) {
+        return;
+      }
+      onPageChange?.(newPage);
+      return;
+    }
+
+    onPageChange?.((newPage - 1) * limit);
+  };
+
+  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 style = cx(name, 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
+      {...props}
+      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>
+  );
+};
+
+export default memo(PaginationStandardControls);

package/lib/components/Pagination/subcomponents/index.ts

@@ -0,0 +1,2 @@
+export { default as PaginationCompactControls } from './PaginationCompactControls';
+export { default as PaginationStandardControls } from './PaginationStandardControls';

package/lib/components/Radio/Radio.tsx

@@ -50,7 +50,7 @@ const Radio = forwardRef<Ref, RadioProps>(
       border-style: solid;
       outline: none;
       box-sizing: border-box;
-      color: ${theme.color.neutral.white};
+      color: ${theme.colour.icon.inverse};
       transition:
         background-color 0.15s ease-out,
         border-color 0.15s ease-out;
@@ -74,7 +74,13 @@ const Radio = forwardRef<Ref, RadioProps>(
       border-color: ${theme.colour.speciality.inputDefault};
     `;
 
-    const disabledStyle = css`
+    const disabledUncheckedStyle = css`
+      background-color: ${theme.colour.icon.inverse};
+      border-color: ${theme.colour.border.disabled};
+      cursor: not-allowed;
+    `;
+
+    const disabledCheckedStyle = css`
       background-color: ${theme.colour.icon.disabled};
       border-color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
@@ -87,7 +93,8 @@ const Radio = forwardRef<Ref, RadioProps>(
       !disabled && focusStyle,
       isChecked && checkedStyle,
       !isChecked && uncheckedStyle,
-      disabled && disabledStyle,
+      disabled && !isChecked && disabledUncheckedStyle,
+      disabled && isChecked && disabledCheckedStyle,
       className
     );
 
@@ -112,7 +119,9 @@ const Radio = forwardRef<Ref, RadioProps>(
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background-color: ${theme.colour.icon.inverse};
+      background-color: ${
+        disabled ? theme.colour.icon.brandInverse : theme.colour.icon.inverse
+      };
       user-select: none;
       pointer-events: none;
     `;

package/lib/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Radio > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-radio css-1y63xt7"
+  class="ucl-uikit-radio css-1elh2am"
 >
   <input
     checked=""
@@ -18,7 +18,7 @@ exports[`Radio > snapshot: checked prop 1`] = `
 
 exports[`Radio > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-radio css-121ivaw"
+  class="ucl-uikit-radio css-auet16"
 >
   <input
     class="css-19qtec1"
@@ -30,7 +30,7 @@ exports[`Radio > snapshot: no props 1`] = `
 
 exports[`Radio > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-radio css-121ivaw"
+  class="ucl-uikit-radio css-auet16"
 >
   <input
     class="css-19qtec1"

package/lib/components/Search/Search.tsx

@@ -119,7 +119,7 @@ const Search = ({
   `;
 
   const cancelIconButtonInactiveStyle = css`
-    color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.icon.disabled};
   `;
 
   const cancelButtonStyle = cx(
@@ -130,7 +130,7 @@ const Search = ({
   const dividerStyle = css`
     width: 1px;
     height: 38px;
-    background-color: ${theme.color.neutral.grey20};
+    background-color: ${theme.colour.border.disabled};
   `;
 
   const submitButtonStyle = css`

package/lib/components/Search/__tests__/__snapshots__/Search.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Search > snapshot: no props 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-181a0dk"
+      class="ucl-uikit-input__input css-1g04erc"
       data-testid="ucl-uikit-search"
       id=""
       placeholder=""
@@ -87,7 +87,7 @@ exports[`Search > snapshot: testId prop 1`] = `
     class="ucl-uikit-input css-1bpb1dw"
   >
     <input
-      class="ucl-uikit-input__input css-181a0dk"
+      class="ucl-uikit-input__input css-1g04erc"
       data-testid="test123"
       id=""
       placeholder=""

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -588,18 +588,18 @@ const CustomSelect = <T extends string | number>({
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.disabled};
+    border: ${theme.border.b1} solid ${theme.colour.border.disabled};
     cursor: not-allowed;
 
     &:hover {
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.fill.inverse};
     }
   `;
 
   const noOptionsStyle = css`
     padding: ${theme.padding.p8} ${theme.padding.p16};
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
   `;
 
   // Visually hidden but available to assistive technology

package/lib/components/Spinner/Spinner.stories.tsx

@@ -25,7 +25,7 @@ export const White: Story = {
   },
   args: {
     className: css`
-      color: ${theme.color.neutral.white};
+      color: ${theme.colour.fill.inverse};
     `,
   },
 };
@@ -33,7 +33,7 @@ export const White: Story = {
 export const Blue: Story = {
   args: {
     className: css`
-      color: ${theme.color.system.blue70};
+      color: ${theme.colour.fill.brand};
     `,
   },
 };
@@ -41,7 +41,7 @@ export const Blue: Story = {
 export const Red: Story = {
   args: {
     className: css`
-      color: ${theme.color.system.red70};
+      color: ${theme.colour.fill.critical};
     `,
   },
 };

package/lib/components/Spinner/Spinner.tsx

@@ -27,7 +27,7 @@ const Spinner = ({
   const dashDuration = `2s`; // dash duration
 
   const baseStyle = css`
-    color: ${inheritColour ? 'inherit' : theme.colour.icon.brand};
+    color: ${inheritColour ? 'inherit' : theme.colour.fill.brand};
   `;
 
   const gStyle = css`

package/lib/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -6,11 +6,11 @@ exports[`Table > Snapshot: basic table 1`] = `
   data-testid="ucl-uikit-table"
 >
   <thead
-    class="css-1ux39q6 ucl-uikit-table__head"
+    class="css-b9vb4h ucl-uikit-table__head"
     data-testid="ucl-uikit-table__head"
   >
     <tr
-      class="css-1pr7kjy"
+      class="css-7kbd2r"
     >
       <th
         class="css-x1n4gt ucl-uikit-table__head-cell"
@@ -173,7 +173,7 @@ exports[`Table > Snapshot: basic table 1`] = `
   >
     <tr
       aria-selected="false"
-      class="css-icxsp9 ucl-uikit-table__row"
+      class="css-h7fw6w ucl-uikit-table__row"
       data-mobile-expanded="true"
       data-testid="ucl-uikit-table__row"
     >