uikit-react-public 0.40.3 → 0.41.0

package/lib/components/BreadcrumbsNew/BaseBreadcrumbsItem.tsx

@@ -8,7 +8,6 @@ export const NAME = 'ucl-uikit-breadcrumbs__item';
 
 export interface BaseBreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement> {
   separator?: boolean;
-  back?: boolean;
   size?: BreadcrumbsSize;
   testId?: string;
   children?: ReactNode;
@@ -16,7 +15,6 @@ export interface BaseBreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement
 
 const BaseBreadcrumbsItem = ({
   separator = false,
-  back = false,
   size = 'medium',
   testId = NAME,
   className,
@@ -47,13 +45,6 @@ const BaseBreadcrumbsItem = ({
       data-testid={testId}
       {...props}
     >
-      {back && (
-        <Icon.ArrowLeft
-          aria-hidden
-          className={iconStyle}
-          size={size === 'small' ? 16 : 20}
-        />
-      )}
       {children}
       {separator && (
         <Icon.ChevronRight

package/lib/components/BreadcrumbsNew/BreadcrumbsLink.tsx

@@ -1,5 +1,6 @@
 import { Children, isValidElement, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
+import Icon from '../Icon';
 import StandaloneLink, { StandaloneLinkProps } from '../StandaloneLink';
 import { useTheme } from '../../theme';
 import BaseBreadcrumbsItem, {
@@ -10,8 +11,10 @@ export const NAME = 'ucl-uikit-breadcrumbs__link';
 
 type BreadcrumbsLinkOwnProps = Pick<
   BaseBreadcrumbsItemProps,
-  'separator' | 'back' | 'size'
->;
+  'separator' | 'size'
+> & {
+  back?: boolean;
+};
 
 export type BreadcrumbsLinkProps = BreadcrumbsLinkOwnProps &
   Omit<StandaloneLinkProps, 'size' | 'variant'>;
@@ -45,9 +48,15 @@ const BreadcrumbsLink = ({
       : theme.typography.body.mdSemibold.fontWeight;
 
   const linkStyle = css`
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0;
+    ${
+      back
+        ? ''
+        : `
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+    `
+    }
 
     &::after {
       content: attr(data-breadcrumb-label);
@@ -62,11 +71,19 @@ const BreadcrumbsLink = ({
   return (
     <BaseBreadcrumbsItem
       separator={separator}
-      back={back}
       size={size}
     >
       <StandaloneLink
         className={cx(NAME, linkStyle, className)}
+        icon={
+          back ? (
+            <Icon.ArrowLeft
+              aria-hidden
+              width={size === 'small' ? 16 : 20}
+              height={size === 'small' ? 16 : 20}
+            />
+          ) : undefined
+        }
         variant='secondary'
         noVisited
         size={size === 'small' ? 'small' : 'default'}

package/lib/components/BreadcrumbsNew/__tests__/Breadcrumbs.test.tsx

@@ -30,6 +30,9 @@ describe('BreadcrumbsNew', () => {
     expect(
       within(lists[1]).getByRole('link', { hidden: true })
     ).toHaveAttribute('href', '/parent');
+    expect(
+      within(lists[1]).getByRole('link', { hidden: true }).querySelector('svg')
+    ).toBeTruthy();
     const parentLink = within(lists[0]).getByRole('link', {
       name: 'Parent',
       hidden: true,

package/lib/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from '@emotion/css';
+import ProgressBar, {
+  type ProgressBarSize,
+  type ProgressBarVariant,
+} from './ProgressBar';
+
+const VARIANTS: ProgressBarVariant[] = [
+  'info',
+  'success',
+  'critical',
+  'warning',
+];
+
+const SIZES: ProgressBarSize[] = ['small', 'large'];
+
+const meta = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: { control: { type: 'number', min: 0, max: 100 } },
+    max: { control: { type: 'number', min: 1 } },
+    variant: {
+      options: VARIANTS,
+      control: { type: 'radio' },
+    },
+    size: {
+      options: SIZES,
+      control: { type: 'radio' },
+    },
+    title: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    valueLabel: { control: { type: 'text' } },
+    testId: { control: { type: 'text' } },
+    className: { control: false },
+  },
+  args: {
+    value: 50,
+    max: 100,
+    variant: 'info',
+    size: 'small',
+    title: 'Uploading file',
+    valueLabel: '50%',
+    label: 'Uploading... 50%',
+    'aria-label': 'Uploading file',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    value: undefined,
+    valueLabel: undefined,
+    label: 'Loading...',
+    'aria-label': 'Loading',
+  },
+};
+
+const stackStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 360px;
+`;
+
+const rowStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const labelStyle = css`
+  font-family: sans-serif;
+  font-size: 12px;
+`;
+
+export const Variants: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div className={stackStyle}>
+      {VARIANTS.map((variant) => (
+        <div
+          key={variant}
+          className={rowStyle}
+        >
+          <span className={labelStyle}>{variant}</span>
+          <ProgressBar
+            value={50}
+            variant={variant}
+            aria-label={`${variant} progress`}
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div className={stackStyle}>
+      {SIZES.map((size) => (
+        <div
+          key={size}
+          className={rowStyle}
+        >
+          <span className={labelStyle}>{size}</span>
+          <ProgressBar
+            value={70}
+            size={size}
+            aria-label={`${size} progress`}
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/lib/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,220 @@
+import { HTMLAttributes, ReactNode, Ref, memo, useId } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import type { ThemeType } from '../../theme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import Text from '../Text';
+
+export const NAME = 'ucl-uikit-progress-bar';
+
+export type ProgressBarVariant = 'info' | 'success' | 'critical' | 'warning';
+
+export type ProgressBarSize = 'small' | 'large';
+
+export interface ProgressBarBaseProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | 'children'
+  | 'title'
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'aria-describedby'
+  | 'role'
+> {
+  value?: number | null;
+  max?: number;
+  variant?: ProgressBarVariant;
+  size?: ProgressBarSize;
+  title?: ReactNode;
+  label?: ReactNode;
+  valueLabel?: ReactNode;
+  testId?: string;
+  ref?: Ref<HTMLDivElement>;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}
+
+export type ProgressBarProps = ProgressBarBaseProps & MarginProps;
+
+export const getProgressBarVariantColour = (
+  theme: ThemeType,
+  variant: ProgressBarVariant
+) =>
+  ({
+    info: theme.colour.fill.brand,
+    success: theme.colour.fill.success,
+    critical: theme.colour.fill.critical,
+    warning: theme.colour.fill.warning,
+  })[variant];
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const ProgressBar = ({
+  value,
+  max = 100,
+  variant = 'info',
+  size = 'small',
+  title,
+  label,
+  valueLabel,
+  testId = NAME,
+  className,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  ...props
+}: ProgressBarProps) => {
+  const [theme] = useTheme();
+  const generatedId = useId();
+
+  const isIndeterminate = value === undefined || value === null;
+  const normalizedMax = max > 0 ? max : 100;
+  const normalizedValue = isIndeterminate
+    ? undefined
+    : clamp(value, 0, normalizedMax);
+  const percentage =
+    normalizedValue === undefined ? 0 : (normalizedValue / normalizedMax) * 100;
+  const barHeight = size === 'large' ? 8 : 4;
+  const fillColour = getProgressBarVariantColour(theme, variant);
+  const titleId = `${generatedId}-title`;
+  const labelId = `${generatedId}-label`;
+  const progressBarLabelledBy =
+    ariaLabelledBy ??
+    (ariaLabel ? undefined : label ? labelId : title ? titleId : undefined);
+
+  const rootStyle = css`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.padding.p8};
+    width: 100%;
+  `;
+
+  const labelRowStyle = css`
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: ${theme.padding.p16};
+  `;
+
+  const titleStyle = css`
+    color: ${theme.colour.text.default};
+  `;
+
+  const valueLabelStyle = css`
+    color: ${theme.colour.text.secondary};
+    white-space: nowrap;
+  `;
+
+  const trackStyle = css`
+    position: relative;
+    width: 100%;
+    height: ${barHeight}px;
+    overflow: hidden;
+    background-color: ${theme.colour.fill.subtle};
+    border-radius: 100px;
+  `;
+
+  const fillStyle = cx(
+    css`
+      display: block;
+      height: 100%;
+      background-color: ${fillColour};
+      border-radius: 100px;
+    `,
+    isIndeterminate
+      ? css`
+          position: absolute;
+          inset-block: 0;
+          inline-size: 40%;
+          animation: progress-bar-indeterminate 1.6s ease-in-out infinite;
+
+          @keyframes progress-bar-indeterminate {
+            0% {
+              transform: translateX(-100%);
+            }
+
+            100% {
+              transform: translateX(250%);
+            }
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            animation: none;
+            transform: translateX(75%);
+          }
+        `
+      : css`
+          width: ${percentage}%;
+          transition: width 160ms ease-out;
+
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
+        `
+  );
+
+  const labelStyle = css`
+    color: ${fillColour};
+  `;
+
+  const style = cx(NAME, rootStyle, marginsStyle(props, theme), className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    >
+      {(title || valueLabel) && (
+        <div className={labelRowStyle}>
+          {title && (
+            <Text
+              id={titleId}
+              level='sm'
+              className={titleStyle}
+            >
+              {title}
+            </Text>
+          )}
+          {valueLabel && (
+            <Text
+              level='xs'
+              className={valueLabelStyle}
+            >
+              {valueLabel}
+            </Text>
+          )}
+        </div>
+      )}
+      <div
+        className={trackStyle}
+        role='progressbar'
+        aria-label={ariaLabel}
+        aria-labelledby={progressBarLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        aria-valuemin={isIndeterminate ? undefined : 0}
+        aria-valuemax={isIndeterminate ? undefined : normalizedMax}
+        aria-valuenow={normalizedValue}
+      >
+        <span
+          className={fillStyle}
+          aria-hidden='true'
+        />
+      </div>
+      {label && (
+        <Text
+          id={labelId}
+          level='xs'
+          className={labelStyle}
+        >
+          {label}
+        </Text>
+      )}
+    </div>
+  );
+};
+
+export default memo(ProgressBar);

package/lib/components/ProgressBar/__tests__/ProgressBar.test.tsx

@@ -0,0 +1,120 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import ProgressBar, { getProgressBarVariantColour } from '../ProgressBar';
+import lightTheme from '../../../theme/light/lightTheme';
+import darkTheme from '../../../theme/dark/darkTheme';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('ProgressBar', () => {
+  test('renders with default test id', () => {
+    const { getByTestId } = wrap(<ProgressBar value={50} />);
+
+    expect(getByTestId('ucl-uikit-progress-bar')).toBeInTheDocument();
+  });
+
+  test('renders custom title, value label, and label', () => {
+    wrap(
+      <ProgressBar
+        value={50}
+        title='coverletter.pdf'
+        valueLabel='2.4 MB'
+        label='Uploading... 50%'
+      />
+    );
+
+    expect(screen.getByText('coverletter.pdf')).toBeInTheDocument();
+    expect(screen.getByText('2.4 MB')).toBeInTheDocument();
+    expect(screen.getByText('Uploading... 50%')).toBeInTheDocument();
+  });
+
+  test('sets determinate progressbar aria attributes', () => {
+    wrap(
+      <ProgressBar
+        value={25}
+        max={50}
+        aria-label='Upload progress'
+      />
+    );
+
+    const progressbar = screen.getByRole('progressbar', {
+      name: 'Upload progress',
+    });
+
+    expect(progressbar).toHaveAttribute('aria-valuemin', '0');
+    expect(progressbar).toHaveAttribute('aria-valuemax', '50');
+    expect(progressbar).toHaveAttribute('aria-valuenow', '25');
+  });
+
+  test('omits value aria attributes for indeterminate progress', () => {
+    wrap(<ProgressBar aria-label='Loading' />);
+
+    const progressbar = screen.getByRole('progressbar', {
+      name: 'Loading',
+    });
+
+    expect(progressbar).not.toHaveAttribute('aria-valuemin');
+    expect(progressbar).not.toHaveAttribute('aria-valuemax');
+    expect(progressbar).not.toHaveAttribute('aria-valuenow');
+  });
+
+  test('clamps aria-valuenow to the allowed range', () => {
+    wrap(
+      <ProgressBar
+        value={120}
+        max={100}
+        aria-label='Clamped progress'
+      />
+    );
+
+    expect(screen.getByRole('progressbar')).toHaveAttribute(
+      'aria-valuenow',
+      '100'
+    );
+  });
+
+  test('applies custom className', () => {
+    const { getByTestId } = wrap(
+      <ProgressBar
+        value={50}
+        className='custom-class'
+      />
+    );
+
+    expect(getByTestId('ucl-uikit-progress-bar').classList).toContain(
+      'custom-class'
+    );
+  });
+
+  test('uses semantic variant colours in light theme', () => {
+    expect(getProgressBarVariantColour(lightTheme, 'info')).toBe(
+      lightTheme.colour.fill.brand
+    );
+    expect(getProgressBarVariantColour(lightTheme, 'success')).toBe(
+      lightTheme.colour.fill.success
+    );
+    expect(getProgressBarVariantColour(lightTheme, 'critical')).toBe(
+      lightTheme.colour.fill.critical
+    );
+    expect(getProgressBarVariantColour(lightTheme, 'warning')).toBe(
+      lightTheme.colour.fill.warning
+    );
+  });
+
+  test('uses semantic variant colours in dark theme', () => {
+    expect(getProgressBarVariantColour(darkTheme, 'info')).toBe(
+      darkTheme.colour.fill.brand
+    );
+    expect(getProgressBarVariantColour(darkTheme, 'success')).toBe(
+      darkTheme.colour.fill.success
+    );
+    expect(getProgressBarVariantColour(darkTheme, 'critical')).toBe(
+      darkTheme.colour.fill.critical
+    );
+    expect(getProgressBarVariantColour(darkTheme, 'warning')).toBe(
+      darkTheme.colour.fill.warning
+    );
+  });
+});

package/lib/components/ProgressBar/index.ts

@@ -0,0 +1,6 @@
+export { default } from './ProgressBar';
+export type {
+  ProgressBarProps,
+  ProgressBarSize,
+  ProgressBarVariant,
+} from './ProgressBar';

package/lib/components/Table/Table.context.ts

@@ -3,10 +3,19 @@ import type { TableColumnMetadata } from './Table.types';
 
 export type TableContextValue = {
   columns: TableColumnMetadata[];
+  disableMobileView: boolean;
 };
 
-const TableContext = createContext<TableContextValue>({ columns: [] });
+const TableContext = createContext<TableContextValue>({
+  columns: [],
+  disableMobileView: false,
+});
 
 export const TableContextProvider = TableContext.Provider;
 
 export const useTableContext = () => use(TableContext);
+
+export const getMobileBreakpoint = (
+  tabletBreakpoint: number,
+  disableMobileView: boolean
+) => (disableMobileView ? -1 : tabletBreakpoint - 1);

package/lib/components/Table/Table.tsx

@@ -2,7 +2,7 @@ import { Children, isValidElement } from 'react';
 import { css, cx } from '@emotion/css';
 import { Head, HeadCell, Body, Row, Cell } from './subcomponents';
 import { useTheme } from '../../theme';
-import { TableContextProvider } from './Table.context';
+import { TableContextProvider, getMobileBreakpoint } from './Table.context';
 import type {
   ColumnVariant,
   NormalizedTableMobileRole,
@@ -78,10 +78,15 @@ const Table = ({
   children,
   ref,
   ariaLabel,
+  disableMobileView = false,
   ...props
 }: TableProps) => {
   const [theme] = useTheme();
   const columns = getColumnsFromChildren(children);
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
     width: 100%;
@@ -92,7 +97,7 @@ const Table = ({
     line-height: ${theme.typography.body.sm.lineHeight}%;
     border-collapse: collapse;
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: block;
       border-collapse: separate;
     }
@@ -101,7 +106,7 @@ const Table = ({
   const style = cx(baseStyle, className, NAME);
 
   return (
-    <TableContextProvider value={{ columns }}>
+    <TableContextProvider value={{ columns, disableMobileView }}>
       <table
         className={style}
         data-testid={testId}

package/lib/components/Table/Table.types.ts

@@ -33,4 +33,6 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   className?: string;
   ref?: React.Ref<HTMLTableElement>;
   ariaLabel?: string;
+  /** Disable the responsive switch to a mobile card layout below the tablet breakpoint, keeping a real table at all widths. */
+  disableMobileView?: boolean;
 }