uikit-react-public 0.21.8 → 0.22.0

package/lib/components/Paragraph/Paragraph.tsx

@@ -1,95 +1,226 @@
-import { memo, HTMLAttributes, forwardRef } from 'react';
+import { memo, HTMLAttributes, JSX } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-paragrah';
 
-export interface ParagraphBaseProps
-  extends HTMLAttributes<HTMLParagraphElement> {
-  size?: 'standfirst' | 'body' | 'small';
-  emphasis?: 'high' | 'medium';
-  margins?: boolean; // todo: deprecate
+export type ParagraphLevel =
+  | 'lg'
+  | 'lg-medium'
+  | 'lg-semibold'
+  | 'lg-bold'
+  | 'md'
+  | 'md-medium'
+  | 'md-semibold'
+  | 'md-semibold'
+  | 'md-medium-numeric'
+  | 'sm'
+  | 'sm-medium'
+  | 'sm-semibold'
+  | 'xs'
+  | 'xs-medium';
+
+export interface ParagraphBaseProps extends HTMLAttributes<HTMLParagraphElement> {
+  level?: ParagraphLevel;
+  size?: 'standfirst' | 'body' | 'small'; // deprecated
+  emphasis?: 'high' | 'medium'; // deprecated
+  as?: 'p' | 'div' | 'span';
+  margins?: boolean; // deprecated
   testId?: string;
+  ref?: React.Ref<HTMLParagraphElement>;
 }
 
 export type ParagraphProps = ParagraphBaseProps & MarginProps;
 
-export type Ref = HTMLParagraphElement;
-
-const Paragraph = forwardRef<Ref, ParagraphProps>(
-  (
-    {
-      size = 'body',
-      emphasis = 'high',
-      margins = true,
-      testId = NAME,
-      className,
-      ...props
+const Paragraph = ({
+  level = 'md',
+  size = 'body',
+  emphasis = 'high',
+  as = 'p',
+  margins = true,
+  testId = NAME,
+  className,
+  ref,
+  noMargins,
+  ...props
+}: ParagraphProps) => {
+  const [theme] = useTheme();
+
+  const {
+    typography: {
+      body: {
+        lg,
+        lgMedium,
+        lgSemibold,
+        lgBold,
+        md,
+        mdMedium,
+        mdSemibold,
+        mdMediumNumeric,
+        sm,
+        smMedium,
+        smSemibold,
+        xs,
+        xsMedium,
+      },
     },
-    ref
-  ) => {
-    const [theme] = useTheme();
-
-    const {
-      font: { size: fontSize, lineHeight },
-      color: { text },
-    } = theme;
-
-    const baseStyle = css`
-      font-family: ${theme.font.family.primary};
-      color: ${emphasis === 'medium' ? text.secondary : text.primary};
-    `;
-
-    const standfirstStyle = css`
-      font-size: ${fontSize.f20};
-      line-height: ${lineHeight.h140};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${fontSize.f24};
-        line-height: ${lineHeight.h150};
-      }
-    `;
-
-    const bodyStyle = css`
-      font-size: ${fontSize.f16};
-      line-height: ${lineHeight.h150};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${fontSize.f18};
-      }
-    `;
-
-    const smallStyle = css`
-      font-size: ${fontSize.f14};
-      line-height: ${lineHeight.h150};
-      @media screen and (min-width: ${theme.breakpoints.desktop}px) {
-        font-size: ${fontSize.f14};
-      }
-    `;
-
-    const noMarginsStyle = css`
-      margin: 0;
-    `;
-
-    const style = cx(
-      NAME,
-      baseStyle,
-      marginsStyle(props, theme),
-      size === 'standfirst' && standfirstStyle,
-      size === 'body' && bodyStyle,
-      size === 'small' && smallStyle,
-      margins === false && noMarginsStyle,
-      className
-    );
-
-    return (
-      <p
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        {...props}
-      />
-    );
-  }
-);
+  } = theme;
+
+  const mappedLevel: ParagraphLevel =
+    level ||
+    (size === 'standfirst'
+      ? emphasis === 'medium'
+        ? 'lg-medium'
+        : 'lg'
+      : size === 'small'
+        ? emphasis === 'medium'
+          ? 'sm-medium'
+          : 'sm'
+        : emphasis === 'medium'
+          ? 'md-medium'
+          : 'md');
+
+  const baseStyle = css`
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    color: ${emphasis === 'medium'
+      ? theme.colour.text.secondary
+      : theme.colour.text.default};
+    margin: 0;
+  `;
+
+  const lgStyle = css`
+    font-size: ${lg.fontSize}px;
+    font-weight: ${lg.fontWeight};
+    line-height: ${lg.lineHeight}%;
+  `;
+
+  const lgMediumStyle = css`
+    font-size: ${lgMedium.fontSize}px;
+    font-weight: ${lgMedium.fontWeight};
+    line-height: ${lgMedium.lineHeight}%;
+  `;
+
+  const lgSemiboldStyle = css`
+    font-size: ${lgSemibold.fontSize}px;
+    font-weight: ${lgSemibold.fontWeight};
+    line-height: ${lgSemibold.lineHeight}%;
+  `;
+
+  const lgBoldStyle = css`
+    font-size: ${lgBold.fontSize}px;
+    font-weight: ${lgBold.fontWeight};
+    line-height: ${lgBold.lineHeight}%;
+  `;
+
+  const mdStyle = css`
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
+  `;
+
+  const mdMediumStyle = css`
+    font-size: ${mdMedium.fontSize}px;
+    font-weight: ${mdMedium.fontWeight};
+    line-height: ${mdMedium.lineHeight}%;
+  `;
+
+  const mdSemiboldStyle = css`
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
+  `;
+
+  const mdMediumNumericStyle = css`
+    font-size: ${mdMediumNumeric.fontSize}px;
+    font-weight: ${mdMediumNumeric.fontWeight};
+    line-height: ${mdMediumNumeric.lineHeight}%;
+  `;
+
+  const smStyle = css`
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
+  `;
+
+  const smMediumStyle = css`
+    font-size: ${smMedium.fontSize}px;
+    font-weight: ${smMedium.fontWeight};
+    line-height: ${smMedium.lineHeight}%;
+  `;
+
+  const smSemiboldStyle = css`
+    font-size: ${smSemibold.fontSize}px;
+    font-weight: ${smSemibold.fontWeight};
+    line-height: ${smSemibold.lineHeight}%;
+  `;
+
+  const xsStyle = css`
+    font-size: ${xs.fontSize}px;
+    font-weight: ${xs.fontWeight};
+    line-height: ${xs.lineHeight}%;
+  `;
+
+  const xsMediumStyle = css`
+    font-size: ${xsMedium.fontSize}px;
+    font-weight: ${xsMedium.fontWeight};
+    line-height: ${xsMedium.lineHeight}%;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    mappedLevel === 'lg' && lgStyle,
+    mappedLevel === 'lg-medium' && lgMediumStyle,
+    mappedLevel === 'lg-semibold' && lgSemiboldStyle,
+    mappedLevel === 'lg-bold' && lgBoldStyle,
+    mappedLevel === 'md' && mdStyle,
+    mappedLevel === 'md-medium' && mdMediumStyle,
+    mappedLevel === 'md-semibold' && mdSemiboldStyle,
+    mappedLevel === 'md-medium-numeric' && mdMediumNumericStyle,
+    mappedLevel === 'sm' && smStyle,
+    mappedLevel === 'sm-medium' && smMediumStyle,
+    mappedLevel === 'sm-semibold' && smSemiboldStyle,
+    mappedLevel === 'xs' && xsStyle,
+    mappedLevel === 'xs-medium' && xsMediumStyle,
+    marginsStyle(
+      { ...props, noMargins: noMargins || margins === false },
+      theme
+    ),
+    className
+  );
+
+  const paragraphTag = as as keyof JSX.IntrinsicElements;
+
+  return (
+    <>
+      {paragraphTag === 'p' && (
+        <p
+          ref={ref}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+      {paragraphTag === 'div' && (
+        <div
+          ref={ref as React.Ref<HTMLDivElement>}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+      {paragraphTag === 'span' && (
+        <span
+          ref={ref as React.Ref<HTMLSpanElement>}
+          className={style}
+          data-testid={testId}
+          {...props}
+        />
+      )}
+    </>
+  );
+};
 
 export default memo(Paragraph);

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

@@ -2,7 +2,7 @@
 
 exports[`Paragraph > snapshot: custom test id 1`] = `
 <p
-  class="ucl-uikit-paragrah css-1q7fap"
+  class="ucl-uikit-paragrah css-h12wmf"
   data-testid="custom-test-id"
 >
   This is a test
@@ -11,7 +11,7 @@ exports[`Paragraph > snapshot: custom test id 1`] = `
 
 exports[`Paragraph > snapshot: emphasis 1`] = `
 <p
-  class="ucl-uikit-paragrah css-1q7fap"
+  class="ucl-uikit-paragrah css-h12wmf"
   data-testid="ucl-uikit-paragrah"
 >
   high emphasis
@@ -20,7 +20,7 @@ exports[`Paragraph > snapshot: emphasis 1`] = `
 
 exports[`Paragraph > snapshot: minimal props 1`] = `
 <p
-  class="ucl-uikit-paragrah css-1q7fap"
+  class="ucl-uikit-paragrah css-h12wmf"
   data-testid="ucl-uikit-paragrah"
 >
   This is a test
@@ -29,7 +29,7 @@ exports[`Paragraph > snapshot: minimal props 1`] = `
 
 exports[`Paragraph > snapshot: no margins 1`] = `
 <p
-  class="ucl-uikit-paragrah css-1trsbhh"
+  class="ucl-uikit-paragrah css-1dosm7d"
   data-testid="ucl-uikit-paragrah"
 >
   no margins
@@ -38,7 +38,7 @@ exports[`Paragraph > snapshot: no margins 1`] = `
 
 exports[`Paragraph > snapshot: size 1`] = `
 <p
-  class="ucl-uikit-paragrah css-u9mr1g"
+  class="ucl-uikit-paragrah css-h12wmf"
   data-testid="ucl-uikit-paragrah"
 >
   standfirst

package/lib/components/Spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import { SVGAttributes, forwardRef, memo } from 'react';
+import { SVGAttributes, Ref, memo } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 
@@ -8,87 +8,86 @@ export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
   size?: number;
   strokeWidth?: number;
   testId?: string;
+  ref?: Ref<SVGSVGElement>;
   inheritColour?: boolean;
 }
 
-const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
-  (
-    {
-      size = 72,
-      strokeWidth = 4,
-      className,
-      testId = NAME,
-      inheritColour = false,
-      ...rest
-    }: SpinnerProps,
-    ref
-  ) => {
-    const [theme] = useTheme();
+const Spinner = ({
+  size = 72,
+  strokeWidth = 4,
+  className,
+  testId = NAME,
+  inheritColour = false,
+  ref,
+  ...rest
+}: SpinnerProps) => {
+  const [theme] = useTheme();
 
-    const rotationDuration = `3s`; // rotation duration
-    const dashDuration = `2s`; // dash duration
+  const rotationDuration = `3s`; // rotation duration
+  const dashDuration = `2s`; // dash duration
 
-    const baseStyle = css`
-      color: ${inheritColour ? 'inherit' : theme.colour.icon.brand};
-    `;
+  const baseStyle = css`
+    color: ${inheritColour ? 'inherit' : theme.colour.icon.brand};
+  `;
 
-    const gStyle = css`
-      transform-origin: 50% 50%;
-      animation: rotate ${rotationDuration} linear infinite;
+  const gStyle = css`
+    transform-origin: 50% 50%;
+    animation: rotate ${rotationDuration} linear infinite;
 
-      @keyframes rotate {
-        100% {
-          transform: rotate(360deg);
-        }
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
       }
-    `;
+    }
+  `;
 
-    const circleStyle = css`
-      stroke-linecap: square;
-      animation: dash ${dashDuration} ease-in-out infinite;
+  const circleStyle = css`
+    stroke-linecap: square;
+    animation: dash ${dashDuration} ease-in-out infinite;
 
-      @keyframes dash {
-        0% {
-          stroke-dasharray: 1, 150;
-          stroke-dashoffset: 0;
-        }
-        50% {
-          stroke-dasharray: 90, 150;
-          stroke-dashoffset: -35;
-        }
-        100% {
-          stroke-dasharray: 90, 150;
-          stroke-dashoffset: -124;
-        }
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
       }
-    `;
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+  `;
 
-    const style = cx(NAME, baseStyle, className);
+  const style = cx(NAME, baseStyle, className);
 
-    return (
-      <svg
-        viewBox='0 0 50 50'
-        className={style}
-        data-testid={testId}
-        ref={ref}
-        width={size} // Set the width of the SVG element
-        height={size} // Set the height of the SVG element
-        {...rest}
-      >
-        <g className={gStyle}>
-          <circle
-            className={circleStyle}
-            cx='25'
-            cy='25'
-            r='20'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth={strokeWidth}
-          />
-        </g>
-      </svg>
-    );
-  }
-);
+  return (
+    <svg
+      role='progressbar'
+      aria-label='Loading'
+      viewBox='0 0 50 50'
+      className={style}
+      data-testid={testId}
+      ref={ref}
+      width={size} // Set the width of the SVG element
+      height={size} // Set the height of the SVG element
+      {...rest}
+    >
+      <g className={gStyle}>
+        <circle
+          className={circleStyle}
+          cx='25'
+          cy='25'
+          r='20'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth={strokeWidth}
+        />
+      </g>
+    </svg>
+  );
+};
 
 export default memo(Spinner);

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { css } from '@emotion/css';
 import SpinnerSvg from '../Spinner';
 import { ThemeContextProvider } from '../../..';
@@ -68,4 +68,36 @@ describe('SpinnerSvg', () => {
     const svg = getByTestId('custom-test-id');
     expect(svg).toBeDefined();
   });
+
+  // Accessibility tests
+
+  test('has role="progressbar" by default', () => {
+    render(
+      <ThemeContextProvider>
+        <SpinnerSvg />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  test('has aria-label="Loading" by default', () => {
+    render(
+      <ThemeContextProvider>
+        <SpinnerSvg />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('progressbar')).toHaveAccessibleName('Loading');
+  });
+
+  test('aria-label can be overridden via props', () => {
+    render(
+      <ThemeContextProvider>
+        <SpinnerSvg aria-label='Loading visitors' />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('progressbar')).toHaveAccessibleName(
+      'Loading visitors'
+    );
+    expect(screen.getByRole('progressbar')).not.toHaveAccessibleName('Loading');
+  });
 });

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

@@ -2,17 +2,19 @@
 
 exports[`SpinnerSvg > Snapshot: custom className 1`] = `
 <svg
-  class="ucl-uikit-spinner css-g7tq6j"
+  aria-label="Loading"
+  class="ucl-uikit-spinner css-rppy7j"
   data-testid="ucl-uikit-spinner"
   height="72"
+  role="progressbar"
   viewBox="0 0 50 50"
   width="72"
 >
   <g
-    class="css-ypv7tf"
+    class="css-swia5b"
   >
     <circle
-      class="css-1w5ipzg"
+      class="css-1iyl2x2"
       cx="25"
       cy="25"
       fill="none"
@@ -26,17 +28,19 @@ exports[`SpinnerSvg > Snapshot: custom className 1`] = `
 
 exports[`SpinnerSvg > snapshot: custom size 1`] = `
 <svg
-  class="ucl-uikit-spinner css-1g359sh"
+  aria-label="Loading"
+  class="ucl-uikit-spinner css-1scd17h"
   data-testid="ucl-uikit-spinner"
   height="32"
+  role="progressbar"
   viewBox="0 0 50 50"
   width="32"
 >
   <g
-    class="css-ypv7tf"
+    class="css-swia5b"
   >
     <circle
-      class="css-1w5ipzg"
+      class="css-1iyl2x2"
       cx="25"
       cy="25"
       fill="none"
@@ -50,17 +54,19 @@ exports[`SpinnerSvg > snapshot: custom size 1`] = `
 
 exports[`SpinnerSvg > snapshot: default props 1`] = `
 <svg
-  class="ucl-uikit-spinner css-1g359sh"
+  aria-label="Loading"
+  class="ucl-uikit-spinner css-1scd17h"
   data-testid="ucl-uikit-spinner"
   height="72"
+  role="progressbar"
   viewBox="0 0 50 50"
   width="72"
 >
   <g
-    class="css-ypv7tf"
+    class="css-swia5b"
   >
     <circle
-      class="css-1w5ipzg"
+      class="css-1iyl2x2"
       cx="25"
       cy="25"
       fill="none"
@@ -74,17 +80,19 @@ exports[`SpinnerSvg > snapshot: default props 1`] = `
 
 exports[`SpinnerSvg > snapshot: inherits parent colour when inheritColour is true 1`] = `
 <svg
-  class="ucl-uikit-spinner css-1izyex6"
+  aria-label="Loading"
+  class="ucl-uikit-spinner css-15f359x"
   data-testid="ucl-uikit-spinner"
   height="72"
+  role="progressbar"
   viewBox="0 0 50 50"
   width="72"
 >
   <g
-    class="css-ypv7tf"
+    class="css-swia5b"
   >
     <circle
-      class="css-1w5ipzg"
+      class="css-1iyl2x2"
       cx="25"
       cy="25"
       fill="none"

package/lib/components/Table/improvements-tracking.md

@@ -0,0 +1,25 @@
+# Table – Improvements Tracking
+
+## Decision: Table.Cell should not support a `variant='button'` prop
+
+**Status:** Decided  
+**Date:** 2026-04-13  
+**Context:** EVE frontend – My Visitors screen (`MyVisitorsScreen.tsx`)
+
+### Problem
+
+We considered two approaches for adding interactive actions (e.g. "Invite again") inside table cells:
+
+- **A) `variant='button'` on `Table.Cell`** – The cell itself renders as a button, with props like `buttonProps`, `loading`, and `onClick` forwarded through the cell.
+- **B) `<Button>` as a child of `Table.Cell`** – The cell remains a plain container; a `<Button>` component is composed inside it.
+
+### Decision
+
+**Go with B – compose `<Button>` as a child.**
+
+### Rationale
+
+- **Composition over configuration.** Adding `variant='button'` conflates layout (cell) and interaction (button) concerns, increasing the API surface of `Table.Cell` with forwarded props (`loading`, `onClick`, `disabled`, `size`, button variant, etc.).
+- **Flexibility.** A child `<Button>` can easily be swapped for an icon button, a link, a menu, or multiple actions — without the cell API needing to accommodate every combination.
+- **No duplicated logic.** `<Button>` already handles loading spinners, disabled states, and accessibility. A `variant='button'` cell would need to re-implement or proxy all of that.
+- **Simpler Table.Cell API.** Fewer props to document, test, and maintain.