uikit-react-public 0.14.21 → 0.21.8

package/lib/components/FooterNew/index.ts

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

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;
@@ -15,6 +16,9 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
   titleClassName?: string;
   titleProps?: Record<string, unknown>;
+  homeLinkHref?: string;
+  homeLinkProps?: Record<string, unknown>;
+  homeLinkAriaLabel?: string;
   testId?: string;
 }
 
@@ -24,6 +28,9 @@ const Header = ({
   titleAs = 'div',
   titleClassName,
   titleProps,
+  homeLinkHref,
+  homeLinkProps,
+  homeLinkAriaLabel = 'Go to homepage',
   testId = NAME,
   className,
   children,
@@ -86,16 +93,33 @@ 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;
 
-  return (
-    <header
-      className={style}
-      data-testid={testId}
-      {...props}
-    >
+  const headerContent = (
+    <>
       <UclLogo className={uclLogoStyle} />
       {title && (
         <TitleComponent
@@ -105,6 +129,27 @@ const Header = ({
           {title}
         </TitleComponent>
       )}
+    </>
+  );
+
+  return (
+    <header
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {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('/');
+  });
 });

package/lib/components/HeaderDraft/__tests__/__snapshots__/Header.test.tsx.snap

@@ -72,6 +72,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
         class="ucl-uikit-icon css-10o3g4f"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -81,8 +82,8 @@ exports[`Header > snapshot: variant=avatar 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <polyline
-          points="6 9 12 15 18 9"
+        <path
+          d="m6 9 6 6 6-6"
         />
       </svg>
     </div>

package/lib/components/HeaderNew/Header.tsx

@@ -0,0 +1,93 @@
+import { memo, HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import HeaderMenuContainer from './HeaderMenuContainer';
+import HeaderTitle from './HeaderTitle';
+import HeaderLogo from './HeaderLogo';
+import HeaderBorder from './HeaderBorder';
+import { HEADER_MOBILE_HEIGHT_PX, HEADER_TABLET_HEIGHT_PX } from './constants';
+
+export const NAME = 'ucl-uikit-header';
+
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+  title: string;
+  titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+  titleClassName?: string;
+  titleProps?: Record<string, unknown>;
+  homeLinkHref?: string;
+  homeLinkProps?: Record<string, unknown>;
+  testId?: string;
+}
+
+const Header = ({
+  title,
+  titleAs = 'div',
+  titleClassName,
+  titleProps,
+  homeLinkHref,
+  homeLinkProps,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: HeaderProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    position: relative;
+    background-color: ${theme.colour.surface.primary};
+    font-family: ${theme.font.family.primary};
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: ${theme.color.text.inverted};
+    display: flex;
+    align-items: center;
+    height: ${HEADER_MOBILE_HEIGHT_PX}px;
+    box-sizing: border-box;
+    padding: 0 ${theme.padding.p16} 0 ${theme.padding.p40};
+    border-bottom: ${theme.colour.border.subtle};
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      height: ${HEADER_TABLET_HEIGHT_PX}px;
+      padding: 0 ${theme.padding.p64};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <header
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <HeaderBorder />
+      <HeaderLogo
+        linkHref={homeLinkHref}
+        linkProps={homeLinkProps}
+      />
+      <HeaderTitle
+        className={titleClassName}
+        title={title}
+        as={titleAs}
+        {...titleProps}
+      />
+      {children}
+    </header>
+  );
+};
+
+const MemoAppHeader = memo(Header);
+
+export interface IHeaderSubComponents {
+  MenuContainer: typeof HeaderMenuContainer;
+}
+
+const HeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
+  IHeaderSubComponents;
+
+HeaderWithSubComponents.MenuContainer = HeaderMenuContainer;
+
+export default HeaderWithSubComponents;

package/lib/components/HeaderNew/HeaderBorder.tsx

@@ -0,0 +1,55 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import { HTMLAttributes } from 'react';
+
+export const NAME = 'ucl-uikit-header__border';
+
+export interface HeaderBorderProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const HeaderBorder = ({
+  testId = NAME,
+  className,
+  ...props
+}: HeaderBorderProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    position: absolute;
+    left: 16px;
+    height: 100%;
+    width: 16px;
+    background-color: ${theme.colour.border.brand};
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      left: 0;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const stripeStyle = css`
+    position: absolute;
+    left: 4px;
+    height: 100%;
+    width: 4px;
+    background-color: ${theme.colour.border.inverse};
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      display: none;
+    }
+  `;
+
+  return (
+    <div
+      className={style}
+      data-test={testId}
+      {...props}
+    >
+      <div className={stripeStyle} />
+    </div>
+  );
+};
+
+export default HeaderBorder;

package/lib/components/HeaderNew/HeaderLogo.tsx

@@ -0,0 +1,70 @@
+import { css, cx } from '@emotion/css';
+import { UclLogoNew, UclLogoProps, useTheme } from '../..';
+
+export const NAME = 'ucl-uikit-header__logo';
+
+export interface HeaderLogoProps extends UclLogoProps {
+  linkHref?: string;
+  linkProps?: Record<string, unknown>;
+  testId?: string;
+}
+
+const HeaderLogo = ({
+  linkHref,
+  linkProps,
+  testId = NAME,
+  className,
+  ...props
+}: HeaderLogoProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: none;
+    height: 29px;
+    color: ${theme.colour.fill.brand};
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      display: block;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const linkStyle = css`
+    color: inherit;
+    text-decoration: none;
+
+    &:visited,
+    &:active,
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  `;
+
+  if (linkHref) {
+    return (
+      <a
+        href={linkHref}
+        className={linkStyle}
+        {...linkProps}
+      >
+        <UclLogoNew
+          className={style}
+          data-test={testId}
+          {...props}
+        />
+      </a>
+    );
+  }
+
+  return (
+    <UclLogoNew
+      className={style}
+      data-test={testId}
+      {...props}
+    />
+  );
+};
+
+export default HeaderLogo;

package/lib/components/HeaderNew/HeaderMenuContainer.tsx

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+
+export const NAME = 'ucl-uikit-header__menu-container';
+
+export interface HeaderMenuContainerProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const HeaderMenuContainer: React.FC<HeaderMenuContainerProps> = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}) => {
+
+  const baseStyle = css`
+    width: fit-content;
+    margin-left: auto;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default HeaderMenuContainer;

package/lib/components/HeaderNew/HeaderTitle.tsx

@@ -0,0 +1,53 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import { HTMLAttributes } from 'react';
+
+export const NAME = 'ucl-uikit-header__title';
+
+export interface HeaderTitleProps extends HTMLAttributes<HTMLElement> {
+  title: string;
+  as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+  testId?: string;
+}
+
+const HeaderTitle = ({
+  title,
+  as = 'span',
+  testId = NAME,
+  className,
+  ...props
+}: HeaderTitleProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    margin: 0 ${theme.margin.m4};
+    height: 29px;
+    color: ${theme.colour.text.brandPrimary};
+    font-family: ${theme.typography.heading.lg.md.fontFamily};
+    font-feature-settings: ${theme.typography.heading.lg.md.fontSettings};
+    font-size: ${theme.typography.heading.xs.md.fontSize}px;
+    font-weight: ${theme.typography.heading.xs.md.fontWeight};
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      margin: 0 ${theme.margin.m20};
+      font-size: ${theme.typography.heading.lg.md.fontSize}px;
+      font-weight: ${theme.typography.heading.lg.md.fontWeight};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const Comp = as;
+
+  return (
+    <Comp
+      className={style}
+      data-test={testId}
+      {...props}
+    >
+      {title}
+    </Comp>
+  );
+};
+
+export default HeaderTitle;

package/lib/components/HeaderNew/__tests__/Header.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Header from '../Header';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Header', () => {
+  // Snapshot tests
+
+  test('snapshot: variant=breadcrumbs', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Header title='LIDS' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=avatar', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Header title='LIDS' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('wraps logo/title in a home link when homeLinkHref is provided', () => {
+    render(
+      <ThemeContextProvider>
+        <Header
+          title='LIDS'
+          homeLinkHref='/'
+          homeLinkProps={{ 'aria-label': 'Go home' }}
+        />
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByLabelText('Go home');
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute('href')).toBe('/');
+  });
+});