uikit-react-public 0.11.13

package/lib/components/HeaderDraft/HeaderDraft.tsx

@@ -0,0 +1,178 @@
+import { memo, HTMLAttributes } from 'react';
+import React from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../..';
+import UclLogo from '../UclLogo/UclLogo';
+import HeaderBottomBreadcrumbs from './HeaderBottomBreadcrumbs';
+import HeaderBottomHeadingAndAvatar from './HeaderBottomHeadingAndAvatar';
+import HeaderBreadcrumb from './HeaderBreadcrumb';
+import HeaderMenu from './HeaderMenu';
+
+export const NAME = 'ucl-uikit-header';
+export const HEADER_TOP_HEIGHT = 72;
+export const Z_INDEX = 3;
+
+export interface HeaderDraftProps extends HTMLAttributes<HTMLElement> {
+  variant?: 'breadcrumbs' | 'avatar';
+  title?: string;
+  heading?: string;
+  subheading?: string;
+  name?: string;
+  role?: string;
+  profileImageSrc?: string;
+  menu?: boolean;
+  fixed?: boolean;
+  sticky?: boolean;
+  testId?: string;
+}
+
+const HeaderDraft = ({
+  variant,
+  title,
+  heading,
+  subheading,
+  name,
+  role,
+  profileImageSrc,
+  menu = false,
+  fixed = false,
+  sticky = false,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: HeaderDraftProps) => {
+  const [theme] = useTheme();
+
+  const menuChildren: React.ReactNode[] = [];
+  const nonMenuChildren: React.ReactNode[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === HeaderMenu) {
+      menuChildren.push(child);
+    } else {
+      nonMenuChildren.push(child);
+    }
+  });
+
+  const baseStyle = css`
+    background-color: ${theme.color.neutral.white};
+    font-family: ${theme.font.family.primary};
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  `;
+
+  const fixedStyle = css`
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: ${Z_INDEX};
+  `;
+
+  const stickyStyle = css`
+    position: sticky;
+    top: -${HEADER_TOP_HEIGHT}px;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    fixed && fixedStyle,
+    sticky && stickyStyle,
+    className
+  );
+
+  const topStyle = css`
+    position: relative;
+    height: ${HEADER_TOP_HEIGHT}px;
+    background-color: ${theme.color.neutral.grey90};
+    color: ${theme.color.text.inverted};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
+
+  const uclLogoStyle = css`
+    position: absolute;
+    left: 56px;
+    bottom: -0.5px;
+    height: 40px;
+  `;
+
+  const titleStyle = css`
+    display: block;
+    margin: 0;
+    font-size: ${theme.font.size.f18};
+    font-weight: 700;
+    text-align: center;
+  `;
+
+  const menuButtonStyle = css`
+    position: absolute;
+    right: 60px;
+    height: 40px;
+    padding: 0 ${theme.padding.p16};
+    background-color: ${theme.color.neutral.white};
+    color: ${theme.color.text.primary};
+    font-size: ${theme.font.size.f16};
+    font-weight: 700;
+    border: none;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease-out,
+      color 0.15s ease-out;
+
+    &:hover {
+      color: ${theme.color.text.primary};
+      background-color: ${theme.color.neutral.grey5};
+    }
+  `;
+
+  return (
+    <header
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <div className={topStyle}>
+        <UclLogo className={uclLogoStyle} />
+        {title && <h1 className={titleStyle}>{title}</h1>}
+
+        {menu && <div className={menuButtonStyle}>{menuChildren}</div>}
+      </div>
+
+      {variant === 'breadcrumbs' && (
+        <HeaderBottomBreadcrumbs>{nonMenuChildren}</HeaderBottomBreadcrumbs>
+      )}
+      {variant === 'avatar' && (
+        <HeaderBottomHeadingAndAvatar
+          heading={heading!}
+          subheading={subheading!}
+          name={name!}
+          role={role!}
+          profileImageSrc={profileImageSrc}
+        />
+      )}
+    </header>
+  );
+};
+
+const MemoAppHeader = memo(HeaderDraft);
+
+export interface IHeaderSubComponents {
+  Breadcrumb: typeof HeaderBreadcrumb;
+  Menu: typeof HeaderMenu;
+}
+
+const HeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
+  IHeaderSubComponents;
+
+HeaderWithSubComponents.Breadcrumb = HeaderBreadcrumb;
+HeaderWithSubComponents.Menu = HeaderMenu;
+
+export default HeaderWithSubComponents;

package/lib/components/HeaderDraft/HeaderMenu.tsx

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes } from 'react';
+
+export const NAME = 'ucl-uikit-header__menu';
+
+export interface HeaderMenuProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+
+const HeaderMenu: React.FC<HeaderMenuProps> = ({
+  testId = NAME,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default HeaderMenu;

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

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import Header from '../HeaderDraft';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Header', () => {
+  // Snapshot tests
+
+  test('snapshot: variant=breadcrumbs', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Header
+          variant='breadcrumbs'
+          heading='LIDS'
+          subheading='Lorem Ipsum Dolor Simet'
+          name='Haley Holland'
+          role='Super User'
+          profileImageSrc='/img.jpg'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=avatar', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Header
+          variant='avatar'
+          heading='LIDS'
+          subheading='Lorem Ipsum Dolor Simet'
+          name='Haley Holland'
+          role='Super User'
+          profileImageSrc='/img.jpg'
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,126 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Header > snapshot: variant=avatar 1`] = `
+<header
+  class="ucl-uikit-header css-1crtzt6"
+  data-testid="ucl-uikit-header"
+>
+  <div
+    class="css-1gacr1v"
+  >
+    <svg
+      class="css-y3m4z0"
+      fill="currentColor"
+      height="40"
+      viewBox="0 0 157 40"
+      width="157"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <desc>
+        Logo of University College London
+      </desc>
+      <path
+        d="m 60.405678,1.52 v 25.62 c 0,1.74 -0.06,3.55 -1.6,5 -0.76,0.69 -2.12,1.45 -4.19,1.45 -1.53,0 -3.12,-0.4 -4.18,-1.51 -1.48,-1.39 -1.548529,-3.190021 -1.54,-4.94 V 1.52 h -13.22 v 24.63 c 0.13,4.22 0.25,8.72 4.31,12.6 0.47,0.45 0.841814,1.24 1.53,1.24 v 0 h 25.72 v 0 c 0,0 1.07,-0.8 1.54,-1.24 4.91,-4.59 4.88306,-10.690077 4.91,-15.4 V 1.52 Z m 48.710002,25.09 c -0.47,1.39 -2.3,6.73 -8.44,6.73 -6.500002,0 -8.800002,-5.75 -8.800002,-11.85 0,-1.64 0,-6.29 3.13,-9.24 0.88,-0.87 2.71,-2.21 5.610002,-2.21 5.54,0 7.54,4.36 8.61,6.8 l 11.03,-5.4 c -0.89,-1.62 -1.71,-3.01 -3.48,-4.82 -4.37,-4.41 -10.39,-6.62 -16.7,-6.62 -14.120002,0 -21.610002,11.21 -21.610002,22.25 0,6.71 2.74,13.61 8.56,17.74 h 26.450002 c 0.98,-0.65 1.92,-1.4 2.79,-2.23 1.99,-1.97 3,-3.83 4.06,-5.81 z M 11.167848,7.86 h -0.11 l -0.03,-0.03 V 7.71 l -0.03,-0.03 h -0.11 l -0.03,-0.03 V 7.54 c 0,0 0,-0.02 -0.03,-0.02 h -0.07 c 0,0 -0.04,-0.02 -0.05,-0.05 V 7.39 c 0,-0.29 0,-1.21 -0.52,-1.89 -0.44,-0.65 -1.05,-0.99 -1.39,-1.15 0,-0.12 -0.16,-0.17 -0.26,-0.21 -0.02,0 -0.03,0 -0.04,-0.02 -0.05,0 -0.09,-0.04 -0.09,-0.07 V 3.99 c 0,0 0.03,-0.06 0.1,-0.06 0.02,0 0.03,0 0.03,-0.03 V 3.78 c 0,0 0,-0.04 -0.04,-0.04 h -0.12 c 0,0 -0.05,-0.02 -0.05,-0.05 V 3.63 c 0,0 -0.03,-0.06 -0.05,-0.07 V 2.77 l 0.03,-0.02 v 0 c 0,0 0.02,0 0.02,-0.02 V 2.65 c 0,0 0,-0.02 -0.02,-0.02 h -0.04 c 0,0 -0.02,-0.02 -0.02,-0.06 0,-0.04 0,-0.05 0.02,-0.06 h 0.03 0.03 V 2.43 h -0.03 -0.03 c 0,0 -0.03,0 -0.06,-0.03 -0.13,-0.1 -0.27,-0.26 -0.27,-0.28 V 2.09 c 0,0 0,-0.05 -0.05,-0.05 -0.05,0 -0.03,-0.03 0,-0.03 V 1.98 1.93 l -0.06,-0.12 v 0 c 0,0 -0.07,0.1 -0.07,0.12 v 0.05 c 0,0 0,0.03 0.02,0.03 0.02,0 0.02,0.03 0,0.03 -0.04,0 -0.05,0.03 -0.05,0.05 v 0.03 c 0,0 -0.14,0.18 -0.28,0.28 0,0.02 -0.05,0.03 -0.04,0.03 h -0.04 -0.02 v 0.08 h 0.02 0.03 c 0,0 0.02,0.02 0.02,0.06 0,0.04 0,0.05 -0.02,0.06 h -0.04 c 0,0 -0.02,0 -0.02,0.02 v 0.08 c 0,0 0,0.02 0.02,0.02 h 0.02 c 0,0 0.026878,2.452e-4 0.03,0.02 v 0.79 0 c 0,0 -0.05,0.03 -0.05,0.07 v 0.06 c 0,0 0,0.05 -0.04,0.05 h -0.12 c 0,0 -0.05,0.02 -0.05,0.04 V 3.9 c 0,0 0.02,0.03 0.03,0.03 0.06,0 0.11,0.02 0.11,0.06 v 0.06 c 0,0 -0.05,0.06 -0.09,0.07 h -0.03 c -0.1,0.04 -0.27,0.1 -0.28,0.23 -0.34,0.16 -0.95,0.5 -1.39,1.15 -0.51,0.69 -0.52,1.62 -0.52,1.9 v 0.07 c 0,0 -0.09,0.05 -0.06,0.05 h -0.07 l -0.03,0.02 v 0.11 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.02 0.02,0.02 0.06,0 0.13,0.03 0.13,0.1 0,0.12 0.07,0.13 0.1,0.13 v 0.47 c 0,0.1 -0.08,0.15 -0.13,0.16 l -0.02,0.02 v 0.48 l 3.26,-0.71 v 0 l 3.26,0.71 V 8.91 c 0,0 0,-0.02 -0.02,-0.02 -0.05,0 -0.13,-0.05 -0.13,-0.16 V 8.27 c 0,0 0.1,-0.02 0.1,-0.14 0,-0.07 0.07,-0.1 0.1,-0.1 0.02,0 0.02,-1.35e-5 0.02,-0.02 V 7.89 l -0.03,-0.03 z m 3.62,10.3 v -0.94 h -0.56 v -0.52 0 h -0.07 v -0.03 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 0 c 0,0 0.0026,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 c 0,0 0.0082,-0.0039 0.02,-0.02 v -0.17 h 0.31 l 0.03,-0.03 0.11,-0.57 c 0.06,-0.12 0.18,-0.1 0.18,-0.1 h 0.02 l 0.11,-0.37 c 0,0 0.02,-0.03 -0.02,-0.04 -0.02,0 -7.13,-1.51 -7.13,-1.51 0,0 -7.10999996,1.51 -7.11999996,1.51 -0.04,0 -0.03,0.04 -0.03,0.04 l 0.1,0.36 v 0 c 0,0 0.12,0 0.18,0.09 l 0.1,0.58 c 0,0 0,0.03 0.05,0.03 h 0.31 v 0.18 h 0.02 0.04 c 0,0 0.02,0.02 0.02,0.05 0,0.03 0.02,0.16 0.12,0.25 0,0.02 0,0.05 -0.03,0.05 h -0.03 c 0,0 -0.03,0 -0.02,0.03 v 0.09 0.07 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0.1 h -0.02 -0.05 -0.02 V 17.2 H 0.87784804 v 0.94 h -0.55 v 0.95 H 15.297848 v -0.95 h -0.56 z m -10.86,-5.69 v 0.08 l 0.02,0.02 v 0 c 0,0 0.019368,10e-6 0.02,0.02 v 3.95 l -0.06,0.06 v 0 0.07 0.02 h -0.06 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 0 c 0,0 -0.04,-0.04 -0.05,-0.06 v -3.95 -0.02 0 c 0,0 0.00259,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.1,-0.22 0.1,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00816,-0.0039 0.02,-0.02 v -0.17 h 1.25 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 v 0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.05 v 0 0 -0.08 0 l -0.07,-0.08 V 12.6 12.58 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.03,-0.04 -0.03,-0.05 0.1,-0.08 0.12,-0.22 0.12,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.22 v 0.17 0.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.03,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.24 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.32,0 v 0.08 0.02 h 0.02 c 0,0 0.01937,10e-6 0.02,0.02 v 3.95 l -0.07,0.06 v 0.08 0.02 h -0.07 v 0.02 0.1 h -1.28 V 16.7 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 l 0.02,-0.02 v 0 c 0,0 0.02,-4e-5 0.02,-0.02 v -0.07 -0.09 -0.03 h -0.04 c 0,0 -0.03,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 V 12 11.83 h 1.22 V 12 c 0,0 0,0.02 0.02,0.02 h 0.04 c 0,0 0.03,0.02 0.03,0.04 0,0.03 0,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.03,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.35,0 v 0.08 c 0,0 0,0.02 0.02,0.02 v 0 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.03561,0.0075 -0.02,0.02 v 0.1 h -1.27 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 V 12.6 l 0.02,-0.02 v 0 c 0,0 0.0026,-0.01022 0.02,-0.02 V 12.49 12.4 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 v -0.02 -0.17 h 1.22 v 0.17 c 0,0 0.02,0.02 0.03,0.02 h 0.04 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.02,0.02 0,0.03 v 0.09 z M 67.235678,40 h -25.72 M 125.60568,39.99 V 1.46 h 13.16 v 30.29 h 17.08 v 8.24 h -30.25 z M 87.045678,40 v 0"
+      />
+    </svg>
+  </div>
+  <div
+    class="ucl-uikit-header__avatar css-9tbmx2"
+    data-testid="ucl-uikit-header__avatar"
+  >
+    <div
+      class="css-x5lawr"
+    >
+      <h1
+        class="css-1683c8i"
+      >
+        LIDS
+      </h1>
+      <h2
+        class="css-1ui7iu9"
+      >
+        Lorem Ipsum Dolor Simet
+      </h2>
+    </div>
+    <div
+      class="css-cgj2nd"
+    >
+      <div
+        class="css-se18zh"
+      >
+        <img
+          alt="Profile photo"
+          class="css-ybrhvy"
+          src="/img.jpg"
+        />
+      </div>
+      <div
+        class="css-dz7zbn"
+      >
+        <div
+          class="css-xahd9c"
+        >
+          Haley Holland
+        </div>
+        <div
+          class="css-76625g"
+        >
+          Super User
+        </div>
+      </div>
+      <svg
+        class="ucl-uikit-icon css-10o3g4f"
+        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"
+      >
+        <polyline
+          points="6 9 12 15 18 9"
+        />
+      </svg>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`Header > snapshot: variant=breadcrumbs 1`] = `
+<header
+  class="ucl-uikit-header css-1crtzt6"
+  data-testid="ucl-uikit-header"
+>
+  <div
+    class="css-1gacr1v"
+  >
+    <svg
+      class="css-y3m4z0"
+      fill="currentColor"
+      height="40"
+      viewBox="0 0 157 40"
+      width="157"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <desc>
+        Logo of University College London
+      </desc>
+      <path
+        d="m 60.405678,1.52 v 25.62 c 0,1.74 -0.06,3.55 -1.6,5 -0.76,0.69 -2.12,1.45 -4.19,1.45 -1.53,0 -3.12,-0.4 -4.18,-1.51 -1.48,-1.39 -1.548529,-3.190021 -1.54,-4.94 V 1.52 h -13.22 v 24.63 c 0.13,4.22 0.25,8.72 4.31,12.6 0.47,0.45 0.841814,1.24 1.53,1.24 v 0 h 25.72 v 0 c 0,0 1.07,-0.8 1.54,-1.24 4.91,-4.59 4.88306,-10.690077 4.91,-15.4 V 1.52 Z m 48.710002,25.09 c -0.47,1.39 -2.3,6.73 -8.44,6.73 -6.500002,0 -8.800002,-5.75 -8.800002,-11.85 0,-1.64 0,-6.29 3.13,-9.24 0.88,-0.87 2.71,-2.21 5.610002,-2.21 5.54,0 7.54,4.36 8.61,6.8 l 11.03,-5.4 c -0.89,-1.62 -1.71,-3.01 -3.48,-4.82 -4.37,-4.41 -10.39,-6.62 -16.7,-6.62 -14.120002,0 -21.610002,11.21 -21.610002,22.25 0,6.71 2.74,13.61 8.56,17.74 h 26.450002 c 0.98,-0.65 1.92,-1.4 2.79,-2.23 1.99,-1.97 3,-3.83 4.06,-5.81 z M 11.167848,7.86 h -0.11 l -0.03,-0.03 V 7.71 l -0.03,-0.03 h -0.11 l -0.03,-0.03 V 7.54 c 0,0 0,-0.02 -0.03,-0.02 h -0.07 c 0,0 -0.04,-0.02 -0.05,-0.05 V 7.39 c 0,-0.29 0,-1.21 -0.52,-1.89 -0.44,-0.65 -1.05,-0.99 -1.39,-1.15 0,-0.12 -0.16,-0.17 -0.26,-0.21 -0.02,0 -0.03,0 -0.04,-0.02 -0.05,0 -0.09,-0.04 -0.09,-0.07 V 3.99 c 0,0 0.03,-0.06 0.1,-0.06 0.02,0 0.03,0 0.03,-0.03 V 3.78 c 0,0 0,-0.04 -0.04,-0.04 h -0.12 c 0,0 -0.05,-0.02 -0.05,-0.05 V 3.63 c 0,0 -0.03,-0.06 -0.05,-0.07 V 2.77 l 0.03,-0.02 v 0 c 0,0 0.02,0 0.02,-0.02 V 2.65 c 0,0 0,-0.02 -0.02,-0.02 h -0.04 c 0,0 -0.02,-0.02 -0.02,-0.06 0,-0.04 0,-0.05 0.02,-0.06 h 0.03 0.03 V 2.43 h -0.03 -0.03 c 0,0 -0.03,0 -0.06,-0.03 -0.13,-0.1 -0.27,-0.26 -0.27,-0.28 V 2.09 c 0,0 0,-0.05 -0.05,-0.05 -0.05,0 -0.03,-0.03 0,-0.03 V 1.98 1.93 l -0.06,-0.12 v 0 c 0,0 -0.07,0.1 -0.07,0.12 v 0.05 c 0,0 0,0.03 0.02,0.03 0.02,0 0.02,0.03 0,0.03 -0.04,0 -0.05,0.03 -0.05,0.05 v 0.03 c 0,0 -0.14,0.18 -0.28,0.28 0,0.02 -0.05,0.03 -0.04,0.03 h -0.04 -0.02 v 0.08 h 0.02 0.03 c 0,0 0.02,0.02 0.02,0.06 0,0.04 0,0.05 -0.02,0.06 h -0.04 c 0,0 -0.02,0 -0.02,0.02 v 0.08 c 0,0 0,0.02 0.02,0.02 h 0.02 c 0,0 0.026878,2.452e-4 0.03,0.02 v 0.79 0 c 0,0 -0.05,0.03 -0.05,0.07 v 0.06 c 0,0 0,0.05 -0.04,0.05 h -0.12 c 0,0 -0.05,0.02 -0.05,0.04 V 3.9 c 0,0 0.02,0.03 0.03,0.03 0.06,0 0.11,0.02 0.11,0.06 v 0.06 c 0,0 -0.05,0.06 -0.09,0.07 h -0.03 c -0.1,0.04 -0.27,0.1 -0.28,0.23 -0.34,0.16 -0.95,0.5 -1.39,1.15 -0.51,0.69 -0.52,1.62 -0.52,1.9 v 0.07 c 0,0 -0.09,0.05 -0.06,0.05 h -0.07 l -0.03,0.02 v 0.11 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.02 0.02,0.02 0.06,0 0.13,0.03 0.13,0.1 0,0.12 0.07,0.13 0.1,0.13 v 0.47 c 0,0.1 -0.08,0.15 -0.13,0.16 l -0.02,0.02 v 0.48 l 3.26,-0.71 v 0 l 3.26,0.71 V 8.91 c 0,0 0,-0.02 -0.02,-0.02 -0.05,0 -0.13,-0.05 -0.13,-0.16 V 8.27 c 0,0 0.1,-0.02 0.1,-0.14 0,-0.07 0.07,-0.1 0.1,-0.1 0.02,0 0.02,-1.35e-5 0.02,-0.02 V 7.89 l -0.03,-0.03 z m 3.62,10.3 v -0.94 h -0.56 v -0.52 0 h -0.07 v -0.03 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 0 c 0,0 0.0026,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 c 0,0 0.0082,-0.0039 0.02,-0.02 v -0.17 h 0.31 l 0.03,-0.03 0.11,-0.57 c 0.06,-0.12 0.18,-0.1 0.18,-0.1 h 0.02 l 0.11,-0.37 c 0,0 0.02,-0.03 -0.02,-0.04 -0.02,0 -7.13,-1.51 -7.13,-1.51 0,0 -7.10999996,1.51 -7.11999996,1.51 -0.04,0 -0.03,0.04 -0.03,0.04 l 0.1,0.36 v 0 c 0,0 0.12,0 0.18,0.09 l 0.1,0.58 c 0,0 0,0.03 0.05,0.03 h 0.31 v 0.18 h 0.02 0.04 c 0,0 0.02,0.02 0.02,0.05 0,0.03 0.02,0.16 0.12,0.25 0,0.02 0,0.05 -0.03,0.05 h -0.03 c 0,0 -0.03,0 -0.02,0.03 v 0.09 0.07 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0.1 h -0.02 -0.05 -0.02 V 17.2 H 0.87784804 v 0.94 h -0.55 v 0.95 H 15.297848 v -0.95 h -0.56 z m -10.86,-5.69 v 0.08 l 0.02,0.02 v 0 c 0,0 0.019368,10e-6 0.02,0.02 v 3.95 l -0.06,0.06 v 0 0.07 0.02 h -0.06 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 0 c 0,0 -0.04,-0.04 -0.05,-0.06 v -3.95 -0.02 0 c 0,0 0.00259,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.1,-0.22 0.1,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00816,-0.0039 0.02,-0.02 v -0.17 h 1.25 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 v 0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.05 v 0 0 -0.08 0 l -0.07,-0.08 V 12.6 12.58 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.03,-0.04 -0.03,-0.05 0.1,-0.08 0.12,-0.22 0.12,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.22 v 0.17 0.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.03,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.24 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.32,0 v 0.08 0.02 h 0.02 c 0,0 0.01937,10e-6 0.02,0.02 v 3.95 l -0.07,0.06 v 0.08 0.02 h -0.07 v 0.02 0.1 h -1.28 V 16.7 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 l 0.02,-0.02 v 0 c 0,0 0.02,-4e-5 0.02,-0.02 v -0.07 -0.09 -0.03 h -0.04 c 0,0 -0.03,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 V 12 11.83 h 1.22 V 12 c 0,0 0,0.02 0.02,0.02 h 0.04 c 0,0 0.03,0.02 0.03,0.04 0,0.03 0,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.03,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.35,0 v 0.08 c 0,0 0,0.02 0.02,0.02 v 0 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.03561,0.0075 -0.02,0.02 v 0.1 h -1.27 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 V 12.6 l 0.02,-0.02 v 0 c 0,0 0.0026,-0.01022 0.02,-0.02 V 12.49 12.4 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 v -0.02 -0.17 h 1.22 v 0.17 c 0,0 0.02,0.02 0.03,0.02 h 0.04 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.02,0.02 0,0.03 v 0.09 z M 67.235678,40 h -25.72 M 125.60568,39.99 V 1.46 h 13.16 v 30.29 h 17.08 v 8.24 h -30.25 z M 87.045678,40 v 0"
+      />
+    </svg>
+  </div>
+  <nav
+    class="ucl-uikit-header__bottom--breadcrumbs css-ff2u5r"
+    data-testid="ucl-uikit-header__bottom--breadcrumbs"
+  >
+    <ul
+      class="css-1bozzd9"
+    />
+  </nav>
+</header>
+`;

package/lib/components/HeaderDraft/index.ts

@@ -0,0 +1,4 @@
+export { default } from './HeaderDraft';
+export { HEADER_TOP_HEIGHT } from './HeaderDraft';
+export type { HeaderDraftProps } from './HeaderDraft';
+export { default as HeaderBreadcrumb } from './HeaderBreadcrumb';

package/lib/components/Heading/Documentation.mdx

@@ -0,0 +1,118 @@
+import * as HeadingStories from './Heading.stories';
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Canvas,
+  Controls,
+  Source,
+  ArgTypes,
+} from '@storybook/blocks';
+
+export const usage = {
+  default: `<Heading>Default Heading</Heading>`,
+  level1: `<Heading level={1}>Level 1 Heading</Heading>`,
+  level2: `<Heading level={2}>Level 2 Heading</Heading>`,
+  level3: `<Heading level={3}>Level 3 Heading</Heading>`,
+  level4: `<Heading level={4}>Level 4 Heading</Heading>`,
+  withMargins: `<Heading margins={true} >Heading with margins</Heading>`,
+  noMargins: `<Heading margins={false} >Heading with no margins</Heading>`,
+};
+
+<Meta of={HeadingStories} />
+<Title />
+<Subtitle>A semantic heading element with UCL branded styling</Subtitle>
+
+The `<Heading>` component wraps <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements" target="_blank">native heading HTML elements</a>: `<h1>`, `<h2>`, `<h3>`, `<h4>`.
+
+Headings add semantic structure to a web page, supporting machine comprehension and accessibility. They also provide visual hierarchy, helping users to understand the relative importance of different sections of content. The styling for the `<Heading>` component is based on the UCL Design System typographic guidelines.
+
+Design specification available in Figma: <a href="https://www.figma.com/design/8Sm5PxWOWJYpYXAzhRzUzt/UCL-Design-System-UI-Kit?node-id=5862-4293&t=m0ZdPzYILv5R4XBj-4" target="_blank">UCL Design System UI Kit | Typography (Headings)</a>
+
+Styling for this element includes responsive font sizing. See the Design specification (above) for more details.
+
+(`<h5>` and `<h6>` are not supported, but you shouldn't need a hierarchy this deep in practice.)
+
+**_Note:_** Developers should use `<Heading>` instead of `<h1>`, `<h2>`, etc, to ensure consistent styling and accessibility.
+
+<Canvas
+  source={{
+    code: usage.default,
+  }}
+/>
+
+<Controls />
+
+## Usage
+
+All screens in UCL Experience apps should have a sensible semantic hierarchy. This includes ensuring there is only one level 1 `<Heading>` (equivalent to `<h1>`) per screen. Do not simply use the heading level that looks best or has the font size you want. Do not 'miss out' levels in the hierarchy: for example, an `<h2>` ought not to be followed by an `<h4>`.
+
+<Source code={usage.default} />
+
+### Props
+
+- `level`: A **number** from 1 to 4, corresponding to the level of the HTML heading element to be rendered. Default is 1, if otherwise unspecified.
+- `margins`: A **boolean** value. If `false`, the heading will have no margins. Default is `true`.
+- `testid`: A **string** value. If provided, the heading element will have a `data-testid` attribute with this value. The <a href="https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing" target="_blank">`data-testid` attribute</a> is used for identifying this element for testing. If unspecified, `ucl-heading` is used.
+
+Pass the text you want in the heading as children: `<Heading>My heading text</Heading>`.
+
+Multiple HTML elements as well as plain text is supported -- for example, `<em>Italic text</em>`
+
+Custom CSS styling can be added as with all UIKit-React components by passing an optional `className` prop to the component.
+
+<ArgTypes />
+
+# Variants
+
+<Canvas
+  of={HeadingStories.Level1}
+  sourceState='shown'
+  source={{
+    code: usage.level1,
+  }}
+/>
+
+<Canvas
+  of={HeadingStories.Level2}
+  sourceState='shown'
+  source={{
+    code: usage.level2,
+  }}
+/>
+
+<Canvas
+  of={HeadingStories.Level3}
+  sourceState='shown'
+  source={{
+    code: usage.level3,
+  }}
+/>
+
+<Canvas
+  of={HeadingStories.Level4}
+  sourceState='shown'
+  source={{
+    code: usage.level4,
+  }}
+/>
+
+Red lines are added to the examples below to show the margins of the heading element.
+
+Note that `margins={true}` in the below example merely specifies explicitly the default behaviour.
+
+<Canvas
+  of={HeadingStories.Margins}
+  sourceState='shown'
+  source={{
+    code: usage.withMargins,
+  }}
+/>
+
+<Canvas
+  of={HeadingStories.NoMargins}
+  sourceState='shown'
+  source={{
+    code: usage.noMargins,
+  }}
+/>

package/lib/components/Heading/Heading.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Heading from './Heading';
+
+const meta = {
+  title: 'Components/Ready to use/Heading',
+  component: Heading,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Heading',
+  },
+};
+
+export const Level1: Story = {
+  args: {
+    level: 1,
+    children: 'Heading level 1',
+  },
+};
+
+export const Level2: Story = {
+  args: {
+    level: 2,
+    children: 'Heading level 2',
+  },
+};
+
+export const Level3: Story = {
+  args: {
+    title: 'Heading Level 3',
+    level: 3,
+    children: 'Heading level 3',
+  },
+};
+
+export const Level4: Story = {
+  args: {
+    title: 'Heading Level 4',
+    level: 4,
+    children: 'Heading level 4',
+  },
+};
+
+export const Margins: Story = {
+  name: 'Heading with margins',
+  args: {
+    title: 'Heading with margins',
+    margins: true,
+    children: 'Heading with margins',
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#CA0007',
+          }}
+        />
+        <Story />
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#CA0007',
+          }}
+        />
+      </div>
+    ),
+  ],
+};
+
+export const NoMargins: Story = {
+  name: 'Heading without margins',
+  args: {
+    title: 'Heading without margins',
+    margins: false,
+    children: 'Heading without margins',
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#CA0007',
+          }}
+        />
+        <Story />
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#CA0007',
+          }}
+        />
+      </div>
+    ),
+  ],
+};