uikit-react-public 0.11.24 → 0.17.4

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

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Input > snapshot: no props 1`] = `
+<div
+  class="ucl-uikit-fileinput css-r56yy"
+>
+  <label
+    class="css-1lc9iag"
+    for="file-input-1"
+  >
+    <svg
+      class="ucl-uikit-icon css-148hpxb"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+      />
+      <polyline
+        points="17 8 12 3 7 8"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="3"
+        y2="15"
+      />
+    </svg>
+    Upload File
+  </label>
+  <input
+    class="css-1w0w0g6"
+    data-testid="ucl-uikit-fileinput"
+    id="file-input-1"
+    type="file"
+  />
+</div>
+`;
+
+exports[`Input > snapshot: value prop 1`] = `
+<div
+  class="ucl-uikit-fileinput css-r56yy"
+>
+  <label
+    class="css-1lc9iag"
+    for="file-input-1"
+  >
+    <svg
+      class="ucl-uikit-icon css-148hpxb"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+      />
+      <polyline
+        points="17 8 12 3 7 8"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="3"
+        y2="15"
+      />
+    </svg>
+    Upload File/Image
+  </label>
+  <input
+    class="css-1w0w0g6"
+    data-testid="test123"
+    id="file-input-1"
+    type="file"
+  />
+</div>
+`;

package/lib/components/FileInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FileInput';
+export type { FileInputProps } from './FileInput';

package/lib/components/Footer/Footer.stories.tsx

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

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

@@ -34,7 +34,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -60,7 +60,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -89,7 +89,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -115,7 +115,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -141,7 +141,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -169,7 +169,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -195,7 +195,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -247,7 +247,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         class="css-bq4k8p"
       >
         © 
-        2025
+        2026
          UCL
       </span>
     </div>
@@ -316,14 +316,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 1
         </h3>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -340,14 +340,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 2
         </h3>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-link ucl-uikit-footer__nav-link css-kdejd1"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1v2y7lc"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -378,7 +378,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -404,7 +404,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -433,7 +433,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -459,7 +459,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -485,7 +485,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -513,7 +513,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -539,7 +539,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -591,7 +591,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         class="css-bq4k8p"
       >
         © 
-        2025
+        2026
          UCL
       </span>
     </div>
@@ -673,7 +673,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -699,7 +699,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -728,7 +728,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -754,7 +754,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -780,7 +780,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -808,7 +808,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -834,7 +834,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-link ucl-uikit-footer__social-link css-1bd4uza"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1neoh67"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -886,7 +886,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         class="css-bq4k8p"
       >
         © 
-        2025
+        2026
          UCL
       </span>
     </div>

package/lib/components/Header/Header.mdx

@@ -0,0 +1,52 @@
+import * as HeaderStories from "./Header.stories";
+import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/blocks";
+
+export const usage = {
+  default: `<Header title='App Name' />`,
+  homeLink: `<Header title='App Name' homeLinkHref='/' homeLinkAriaLabel='Go to home' />`,
+  menu: `<Header title='App Name' homeLinkHref='/'>
+  <Header.Menu>
+    <Menu title='App Name'>
+      <Menu.Section>
+        <Menu.Item icon={<Icon.Home size={20} />}>Home Page</Menu.Item>
+        <Menu.Item icon={<Icon.Tool size={20} />}>Tools</Menu.Item>
+      </Menu.Section>
+    </Menu>
+  </Header.Menu>
+</Header>`,
+};
+
+<Meta of={HeaderStories} />
+<Title />
+<Subtitle>A simple header with optional menu and home link support.</Subtitle>
+
+Use `<Header>` to display the UCL logo and app title at the top of a page. Pass
+`homeLinkHref` to make the logo/title clickable, and wrap a menu in `<Header.Menu>`
+to add a menu button on the right.
+
+<Canvas source={{ code: usage.default }} />
+
+## Home link
+
+Add `homeLinkHref` (and optionally `homeLinkAriaLabel`) to make the logo/title act as a home link.
+For client routing, pass your router link through `homeLinkProps` (e.g. `homeLinkProps={{ component: RouterLink }}`, with `import { Link as RouterLink } from 'react-router-dom'` or `'wouter'`).
+
+<Canvas of={HeaderStories.WithHomeLink} source={{ code: usage.homeLink }} />
+
+## Menu
+
+Wrap a `Menu` inside `Header.Menu` to show a menu button on the right.
+
+<Canvas of={HeaderStories.WithMenu} source={{ code: usage.menu }} />
+
+## Fixed header
+
+Use `fixed` to pin the header to the top of the viewport.
+
+<Canvas of={HeaderStories.Fixed} />
+
+## Props
+Full props specification for `<Header>` is below.
+<Canvas source={{ code: usage.default }} />
+You can use the controls below to manipulate the `<Header>` component above.
+<Controls />

package/lib/components/Header/Header.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Header from './Header';
+import Menu from '../Menu';
+import Icon from '../Icon';
+
+const storyWrapperStyle: React.CSSProperties = { minHeight: 400 };
+
+const meta = {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    title: { control: 'text' },
+    fixed: { control: 'boolean' },
+    homeLinkHref: { control: 'text' },
+    homeLinkAriaLabel: { control: 'text' },
+    className: { control: 'text' },
+    children: { control: false },
+  },
+  args: {
+    title: 'App Name',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div style={{ overflow: 'hidden' }}>
+      <Header {...args} />
+    </div>
+  ),
+};
+
+export const Fixed: Story = {
+  render: (args) => (
+    <div
+      style={{
+        height: '240px',
+        overflowY: 'auto',
+        position: 'relative',
+      }}
+    >
+      <Header
+        {...args}
+        fixed
+        title='App Name'
+      />
+      <div
+        style={{
+          paddingTop: '88px', // keep content below the fixed header
+          height: '600px',
+          margin: '0 16px',
+        }}
+      >
+        Scroll inside this panel; the header should stay fixed to the top of the
+        viewport.
+      </div>
+    </div>
+  ),
+};
+
+export const WithHomeLink: Story = {
+  name: 'With home link',
+  render: (args) => (
+    <div style={{ overflow: 'hidden' }}>
+      <Header {...args} />
+    </div>
+  ),
+  args: {
+    homeLinkHref: '/',
+    homeLinkAriaLabel: 'Go to home',
+  },
+};
+
+export const WithMenu: Story = {
+  render: (args) => (
+    <div style={storyWrapperStyle}>
+      <Header {...args}>
+        <Header.Menu>
+          <Menu title='App Name'>
+            <Menu.Section>
+              <Menu.Item icon={<Icon.Home size={20} />}>Home Page</Menu.Item>
+              <Menu.Item icon={<Icon.Tool size={20} />}>Tools</Menu.Item>
+            </Menu.Section>
+            <Menu.Section>
+              <Menu.Item icon={<Icon.Settings size={20} />}>Settings</Menu.Item>
+            </Menu.Section>
+          </Menu>
+        </Header.Menu>
+      </Header>
+    </div>
+  ),
+};

package/lib/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css';
 import { useTheme } from '../..';
 import UclLogo from '../UclLogo/UclLogo';
 import HeaderMenu from './HeaderMenu';
+import Link from '../Link';
 
 export const NAME = 'ucl-uikit-header';
 export const HEADER_DESKTOP_HEIGHT_PX = 72;
@@ -12,12 +13,24 @@ export const DEFAULT_Z_INDEX = 3;
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   title?: string;
   fixed?: boolean;
+  titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+  titleClassName?: string;
+  titleProps?: Record<string, unknown>;
+  homeLinkHref?: string;
+  homeLinkProps?: Record<string, unknown>;
+  homeLinkAriaLabel?: string;
   testId?: string;
 }
 
 const Header = ({
   title,
   fixed = false,
+  titleAs = 'div',
+  titleClassName,
+  titleProps,
+  homeLinkHref,
+  homeLinkProps,
+  homeLinkAriaLabel = 'Go to homepage',
   testId = NAME,
   className,
   children,
@@ -68,7 +81,7 @@ const Header = ({
     }
   `;
 
-  const titleStyle = css`
+  const titleBaseStyle = css`
     display: none;
     margin: 0;
     font-size: ${theme.font.size.f18};
@@ -80,14 +93,63 @@ const Header = ({
     }
   `;
 
+  const linkStyle = css`
+    color: inherit;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    &:visited {
+      color: inherit;
+    }
+    &:hover {
+      color: inherit;
+    }
+    &:active {
+      color: inherit;
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const titleStyle = cx(titleBaseStyle, titleClassName);
+
+  const TitleComponent = titleAs;
+
+  const headerContent = (
+    <>
+      <UclLogo className={uclLogoStyle} />
+      {title && (
+        <TitleComponent
+          className={titleStyle}
+          {...titleProps}
+        >
+          {title}
+        </TitleComponent>
+      )}
+    </>
+  );
+
   return (
     <header
       className={style}
       data-testid={testId}
       {...props}
     >
-      <UclLogo className={uclLogoStyle} />
-      {title && <h1 className={titleStyle}>{title}</h1>}
+      {homeLinkHref ? (
+        <Link
+          href={homeLinkHref}
+          aria-label={homeLinkAriaLabel}
+          className={linkStyle}
+          {...homeLinkProps}
+        >
+          {headerContent}
+        </Link>
+      ) : (
+        headerContent
+      )}
 
       {children}
     </header>

package/lib/components/Header/__tests__/Header.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 Header from '../Header';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
@@ -23,4 +23,20 @@ describe('Header', () => {
     );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
+
+  test('wraps logo/title in a home link when homeLinkHref is provided', () => {
+    render(
+      <ThemeContextProvider>
+        <Header
+          title='LIDS'
+          homeLinkHref='/'
+          homeLinkAriaLabel='Go home'
+        />
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByLabelText('Go home');
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute('href')).toBe('/');
+  });
 });