uikit-react-public 0.14.21 → 0.21.8

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

@@ -11,6 +11,7 @@ exports[`Alert > snapshot: type=error 1`] = `
     class="ucl-uikit-icon css-nysdxe"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -25,17 +26,8 @@ exports[`Alert > snapshot: type=error 1`] = `
       cy="12"
       r="10"
     />
-    <line
-      x1="15"
-      x2="9"
-      y1="9"
-      y2="15"
-    />
-    <line
-      x1="9"
-      x2="15"
-      y1="9"
-      y2="15"
+    <path
+      d="m15 9-6 6m0-6 6 6"
     />
   </svg>
   <div>
@@ -57,7 +49,7 @@ exports[`Alert > snapshot: type=error 1`] = `
 
 exports[`Alert > snapshot: type=info, no title 1`] = `
 <div
-  class="ucl-uikit-alert css-lzalin"
+  class="ucl-uikit-alert css-153fxq6"
   data-testid="ucl-uikit-alert"
   role="alert"
 >
@@ -66,6 +58,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
     class="ucl-uikit-icon css-1oh4ubr"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -80,17 +73,8 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
       cy="12"
       r="10"
     />
-    <line
-      x1="12"
-      x2="12"
-      y1="16"
-      y2="12"
-    />
-    <line
-      x1="12"
-      x2="12.01"
-      y1="8"
-      y2="8"
+    <path
+      d="M12 16v-4m0-4h.01"
     />
   </svg>
   <div>
@@ -115,6 +99,7 @@ exports[`Alert > snapshot: type=success 1`] = `
     class="ucl-uikit-icon css-4xbsfp"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -127,8 +112,8 @@ exports[`Alert > snapshot: type=success 1`] = `
     <path
       d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
     />
-    <polyline
-      points="22 4 12 14.01 9 11.01"
+    <path
+      d="M22 4 12 14.01l-3-3"
     />
   </svg>
   <div>
@@ -156,9 +141,10 @@ exports[`Alert > snapshot: type=warning 1`] = `
 >
   <svg
     aria-label="Warning"
-    class="ucl-uikit-icon css-dwkbnw"
+    class="ucl-uikit-icon css-1k868z9"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -169,19 +155,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-    />
-    <line
-      x1="12"
-      x2="12"
-      y1="9"
-      y2="13"
-    />
-    <line
-      x1="12"
-      x2="12.01"
-      y1="17"
-      y2="17"
+      d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4m0 4h.01"
     />
   </svg>
   <div>

package/lib/components/AppHeader/AppHeader.tsx

@@ -1,23 +1,19 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../lib';
-import AppHeaderTop, {
-  HEIGHT as APP_HEADER_TOP_HEIGHT,
-} from './AppHeaderTop';
+import AppHeaderTop, { HEIGHT as APP_HEADER_TOP_HEIGHT } from './AppHeaderTop';
 import AppHeaderBottom, {
   HEIGHT as APP_HEADER_BOTTOM_HEIGHT,
 } from './AppHeaderBottom';
 import AppHeaderNav from './AppHeaderNav';
 
-export const NAME = 'ucl-timetable-app-header';
+export const NAME = 'ucl-uikit-app-header';
 
 export const Z_INDEX = 3;
 
-export const HEIGHT =
-  APP_HEADER_TOP_HEIGHT + APP_HEADER_BOTTOM_HEIGHT;
+export const HEIGHT = APP_HEADER_TOP_HEIGHT + APP_HEADER_BOTTOM_HEIGHT;
 
-export interface AppHeaderProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {
   fixed?: boolean;
   sticky?: boolean;
   testId?: string;
@@ -79,9 +75,8 @@ export interface IHeaderSubComponents {
   Nav: typeof AppHeaderNav;
 }
 
-const AppHeaderWithSubComponents =
-  MemoAppHeader as typeof MemoAppHeader &
-    IHeaderSubComponents;
+const AppHeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
+  IHeaderSubComponents;
 
 AppHeaderWithSubComponents.Top = AppHeaderTop;
 AppHeaderWithSubComponents.Bottom = AppHeaderBottom;

package/lib/components/AppHeader/AppHeaderBottom.tsx

@@ -2,12 +2,11 @@ import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../lib';
 
-export const NAME = 'ucl-timetable-app-header__bottom';
+export const NAME = 'ucl-uikit-app-header__bottom';
 
 export const HEIGHT = 48;
 
-export interface AppHeaderBottomProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppHeaderBottomProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
 }
 

package/lib/components/AppHeader/AppHeaderNav.tsx

@@ -1,10 +1,9 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 
-export const NAME = 'ucl-timetable-app-header__nav';
+export const NAME = 'ucl-uikit-app-header__nav';
 
-export interface AppHeaderNavProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AppHeaderNavProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
 }
 

package/lib/components/AppHeader/AppHeaderTop.tsx

@@ -2,7 +2,7 @@ import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { UclLogo, useTheme } from '../../';
 
-export const NAME = 'ucl-timetable-app-header__top';
+export const NAME = 'ucl-uikit-app-header__top';
 
 export const HEIGHT = 56;
 

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

@@ -2,7 +2,7 @@
 
 exports[`AppHeader > snapshot: no props 1`] = `
 <div
-  class="ucl-timetable-app-header css-14i4gnx"
-  data-testid="ucl-timetable-app-header"
+  class="ucl-uikit-app-header css-14i4gnx"
+  data-testid="ucl-uikit-app-header"
 />
 `;

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

@@ -19,6 +19,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
       class="ucl-uikit-icon css-148hpxb"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="24"
       stroke="currentColor"
       stroke-linecap="round"
@@ -28,23 +29,8 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <line
-        x1="3"
-        x2="21"
-        y1="12"
-        y2="12"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="6"
-        y2="6"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="18"
-        y2="18"
+      <path
+        d="M3 12h18M3 6h18M3 18h18"
       />
     </svg>
   </button>
@@ -71,6 +57,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
           class="ucl-uikit-icon css-148hpxb"
           data-testid="ucl-uikit-icon"
           fill="none"
+          focusable="false"
           height="24"
           stroke="currentColor"
           stroke-linecap="round"
@@ -80,8 +67,8 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline
-            points="15 18 9 12 15 6"
+          <path
+            d="m15 18-6-6 6-6"
           />
         </svg>
       </span>

package/lib/components/Avatar/Avatar.mdx

@@ -0,0 +1,117 @@
+import * as AvatarStories from "./Avatar.stories";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+
+export const usage = {
+  image: `<Avatar
+  variant="image"
+  imageUrl="/sample-avatar-photo.jpg"
+  name="Jane Doe"
+/>`,
+  initials: `<Avatar variant="initials" name="Beverley Haggis" />`,
+  icon: `<Avatar variant="icon" aria-label="Default avatar" />`,
+  size: `<Avatar
+  variant="image"
+  imageUrl="/sample-avatar-photo.jpg"
+  name="Avatar size"
+  size={72}
+/>`,
+  disabled: `<Avatar
+  variant="image"
+  imageUrl="/sample-avatar-photo.jpg"
+  name="Disabled avatar"
+  disabled
+/>`,
+  fallback: `<Avatar
+  variant="image"
+  imageUrl="https://example.com/does-not-exist.jpg"
+  name="Fallback to initials"
+/>`,
+};
+
+<Meta of={AvatarStories} />
+<Title />
+<Subtitle>A circular avatar with graceful fallbacks for images, initials, and icons.</Subtitle>
+
+Use `<Avatar>` anywhere you need a compact visual identifier for a user or entity. The component renders a button for easy focus styling and clickability, and progressively falls back from an image to initials to icon, based on the props you provide.
+
+Key points:
+- `variant="image"` tries to render `imageUrl` first, then initials (from `name`) if the image fails.
+- `variant="initials"` renders initials from `name`; if none are found, it falls back to the icon.
+- `variant="icon"` always renders the default icon.
+- Fixed size options (`48 | 56 | 72 | 80`).
+- Disabled state mutes colors and blocks interaction.
+
+## Variants
+
+### Image (default)
+Renders a photo when `imageUrl` is available. If the image fails to load, initials are shown instead.
+
+<Canvas
+  of={AvatarStories.Image}
+  sourceState="shown"
+  source={{ code: usage.image }}
+/>
+
+### Initials
+Pass a `name` to derive initials (up to two characters). Use when you don't have a photo or want to avoid loading images.
+
+<Canvas
+  of={AvatarStories.Initials}
+  sourceState="shown"
+  source={{ code: usage.initials }}
+/>
+
+### Icon
+Always displays the default avatar icon. Helpful as a generic placeholder.
+
+<Canvas
+  of={AvatarStories.Icon}
+  sourceState="shown"
+  source={{ code: usage.icon }}
+/>
+
+## Sizes
+Pick from the supported sizes to match your layout. Larger sizes are useful for profile headers; smaller for lists or chips.
+
+<Canvas
+  of={AvatarStories.Sizes}
+  sourceState="shown"
+  source={{ code: usage.size }}
+/>
+
+## Disabled
+Prevents interaction and applies muted colors while keeping layout intact.
+
+<Canvas
+  of={AvatarStories.Disabled}
+  sourceState="shown"
+  source={{ code: usage.disabled }}
+/>
+
+## Fallback behaviour
+Image errors are handled gracefully: the component logs an error, then switches to initials. If no initials are available, it renders the icon.
+
+<Canvas
+  of={AvatarStories.BrokenImageFallback}
+  sourceState="shown"
+  source={{ code: usage.fallback }}
+/>
+
+## Accessibility
+- Under the hood, the avatar is a `<button>`. It can receive focus and `onClick` if provided.
+- Provide a meaningful `aria-label` when no visible text is present (e.g. the icon variant).
+- `alt` text on the image defaults to `name` for screen readers.
+- Sizes remain square circles; focus styles come from the theme for keyboard visibility.
+
+## Props
+
+Full props specification for `<Avatar>` is below.
+
+<Canvas
+  of={AvatarStories.Default}
+  sourceState="hidden"
+/>
+
+You can use these controls to manipulate the `<Avatar>` component above.
+
+<Controls of={AvatarStories.Default} />

package/lib/components/Avatar/Avatar.stories.tsx

@@ -1,10 +1,81 @@
+import type { CSSProperties } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import Avatar from './Avatar';
+import Avatar, { type AvatarProps } from './Avatar';
 import sampleAvatarPhoto from '../../../public/sample-avatar-photo.jpg';
 
+type AvatarSize = NonNullable<AvatarProps['size']>;
+const avatarSizes: AvatarSize[] = [48, 56, 72, 80];
+
+const avatarRowStyle: CSSProperties = {
+  display: 'flex',
+  gap: 16,
+  alignItems: 'center',
+  flexWrap: 'wrap',
+};
+
 const meta = {
-  title: 'Components/Ready to use/Avatar',
+  title: 'Components/Avatar',
   component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      description: 'Controls which representation to render',
+      options: ['image', 'initials', 'icon'],
+      control: { type: 'select' },
+      table: { type: { summary: "'image' | 'initials' | 'icon'" } },
+    },
+    imageUrl: {
+      description: 'Image source used when `variant` is `image`',
+      control: { type: 'text' },
+      table: { type: { summary: 'string' } },
+    },
+    name: {
+      description:
+        'Name used for initials and as the fallback alt text for the image',
+      control: { type: 'text' },
+      table: { type: { summary: 'string' } },
+    },
+    size: {
+      description: 'Diameter of the avatar in pixels',
+      options: avatarSizes,
+      control: { type: 'inline-radio' },
+      table: { type: { summary: avatarSizes.join(' | ') } },
+    },
+    disabled: {
+      description: 'Disable interaction and mute colors',
+      control: { type: 'boolean' },
+      table: { type: { summary: 'boolean' } },
+    },
+    testId: {
+      description: 'Applied to the button for testing',
+      control: { type: 'text' },
+      table: { type: { summary: 'string' } },
+    },
+    className: {
+      description: 'Custom className for the root element',
+      control: { type: 'text' },
+      table: { type: { summary: 'string' } },
+    },
+    onClick: {
+      description: 'Click handler forwarded to the underlying button',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '(event: React.MouseEvent<HTMLButtonElement>) => void',
+        },
+      },
+    },
+  },
+  args: {
+    variant: 'image',
+    imageUrl: sampleAvatarPhoto,
+    name: 'Jane Doe',
+    size: 56,
+    disabled: false,
+  },
+  tags: ['autodocs'],
 } satisfies Meta<typeof Avatar>;
 
 export default meta;
@@ -29,5 +100,42 @@ export const Initials: Story = {
 export const Icon: Story = {
   args: {
     variant: 'icon',
+    name: 'Icon avatar',
+  },
+};
+
+export const Sizes: Story = {
+  name: 'Sizes',
+  args: {
+    imageUrl: sampleAvatarPhoto,
+    name: 'Avatar size',
+  },
+  render: (args) => (
+    <div style={avatarRowStyle}>
+      {avatarSizes.map((size) => (
+        <Avatar
+          key={size}
+          {...args}
+          size={size}
+          aria-label={`Avatar ${size}`}
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    name: 'Disabled avatar',
+  },
+};
+
+export const BrokenImageFallback: Story = {
+  name: 'Broken image fallback',
+  args: {
+    variant: 'image',
+    imageUrl: 'https://example.com/does-not-exist.jpg',
+    name: 'Fallback to initials',
   },
 };

package/lib/components/Badge/Badge.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Badge from './Badge';
 
 const meta = {
-  title: 'Components/Work in progress/Badge',
+  title: 'Components/Badge',
   component: Badge,
   parameters: {
     layout: 'centered',

package/lib/components/Blanket/Blanket.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Blanket from './Blanket';
 
 const meta = {
-  title: 'Components/Ready to use/Blanket',
+  title: 'Components/Blanket',
   component: Blanket,
   parameters: {
     layout: 'fullscreen',

package/lib/components/Breadcrumbs/Breadcrumb.tsx

@@ -1,23 +1,24 @@
-import { memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Link, LinkProps } from '../';
-
-const NAME = 'ucl-timetable-breadcrumb';
-const ACTIVE_NAME = 'ucl-timetable-breadcrumb--active';
-const INACTIVE_NAME = 'ucl-timetable-breadcrumb--inactive';
+import Link, { LinkProps } from '../Link';
+import { memo } from 'react';
 
-export interface BreadcrumbProps extends LinkProps {
-  testId?: string;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface BreadcrumbProps extends Omit<LinkProps<any>, 'href' | 'to'> {
   uri: string;
   isActive?: boolean;
 }
 
+const NAME = 'ucl-uikit-breadcrumb';
+const ACTIVE_NAME = 'ucl-uikit-breadcrumb--active';
+const INACTIVE_NAME = 'ucl-uikit-breadcrumb--inactive';
+
 const Breadcrumb = ({
   testId = NAME,
   uri,
   className,
   children,
   isActive,
+  component,
   ...props
 }: BreadcrumbProps) => {
   const activeBreadcrumb =
@@ -56,23 +57,36 @@ const Breadcrumb = ({
       <span
         className={activeBreadcrumbStyle}
         data-testid={testId}
-        {...props}
       >
         {children}
       </span>
     );
-  } else {
+  }
+
+  if (component) {
     return (
       <Link
+        component={component}
         className={inactiveBreadcrumbStyle}
-        data-testid={testId}
-        href={uri}
+        testId={testId}
+        to={uri}
         {...props}
       >
         {children}
       </Link>
     );
   }
+
+  return (
+    <Link
+      className={inactiveBreadcrumbStyle}
+      testId={testId}
+      href={uri}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
 };
 
 export default memo(Breadcrumb);

package/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../';
 import Breadcrumb from './Breadcrumb';
 import { useTheme } from '../../theme';
 
-const NAME = 'ucl-timetable-breadcrumbs';
+const NAME = 'ucl-uikit-breadcrumbs';
 
 export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;

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

@@ -10,9 +10,7 @@ describe('Breadcrumbs', () => {
     const renderResult = render(
       <ThemeContextProvider>
         <Breadcrumbs>
-          <Breadcrumbs.Breadcrumb uri='/'>
-            Home
-          </Breadcrumbs.Breadcrumb>
+          <Breadcrumbs.Breadcrumb uri='/'>Home</Breadcrumbs.Breadcrumb>
           <Breadcrumbs.Breadcrumb uri='/showcase'>
             Timetable
           </Breadcrumbs.Breadcrumb>
@@ -22,9 +20,7 @@ describe('Breadcrumbs', () => {
         </Breadcrumbs>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: Custom Test ID', () => {
@@ -52,9 +48,7 @@ describe('Breadcrumbs', () => {
         </Breadcrumbs>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   // Interaction tests
@@ -63,9 +57,7 @@ describe('Breadcrumbs', () => {
     render(
       <ThemeContextProvider>
         <Breadcrumbs>
-          <Breadcrumbs.Breadcrumb uri='/'>
-            Home
-          </Breadcrumbs.Breadcrumb>
+          <Breadcrumbs.Breadcrumb uri='/'>Home</Breadcrumbs.Breadcrumb>
           <Breadcrumbs.Breadcrumb uri='/showcase'>
             Timetable
           </Breadcrumbs.Breadcrumb>
@@ -75,12 +67,8 @@ describe('Breadcrumbs', () => {
         </Breadcrumbs>
       </ThemeContextProvider>
     );
-    const breadcrumbs = screen.getByTestId(
-      'ucl-timetable-breadcrumbs'
-    );
-    const breadcrumb = screen.getAllByTestId(
-      'ucl-timetable-breadcrumb'
-    );
+    const breadcrumbs = screen.getByTestId('ucl-uikit-breadcrumbs');
+    const breadcrumb = screen.getAllByTestId('ucl-uikit-breadcrumb');
     expect(breadcrumbs).toBeDefined();
     expect(breadcrumb).toBeDefined();
   });
@@ -111,15 +99,9 @@ describe('Breadcrumbs', () => {
       </ThemeContextProvider>
     );
     const breadcrumbs = screen.getByTestId('custom-testid');
-    const breadcrumb1 = screen.getByTestId(
-      'custom-testid-1'
-    );
-    const breadcrumb2 = screen.getByTestId(
-      'custom-testid-2'
-    );
-    const breadcrumb3 = screen.getByTestId(
-      'custom-testid-3'
-    );
+    const breadcrumb1 = screen.getByTestId('custom-testid-1');
+    const breadcrumb2 = screen.getByTestId('custom-testid-2');
+    const breadcrumb3 = screen.getByTestId('custom-testid-3');
     expect(breadcrumbs).toBeDefined();
     expect(breadcrumb1).toBeDefined();
     expect(breadcrumb2).toBeDefined();