uikit-react-public 0.17.4 → 0.21.9

package/lib/components/FooterNew/index.ts

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

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('/');
+  });
+});

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

@@ -0,0 +1,79 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Header > snapshot: variant=avatar 1`] = `
+<header
+  class="ucl-uikit-header css-7smbab"
+  data-testid="ucl-uikit-header"
+>
+  <div
+    class="ucl-uikit-header__border css-miu54s"
+    data-test="ucl-uikit-header__border"
+  >
+    <div
+      class="css-1l552cj"
+    />
+  </div>
+  <svg
+    class="ucl-uikit-header__logo css-h3fm3u"
+    data-test="ucl-uikit-header__logo"
+    fill="none"
+    focusable="false"
+    viewBox="0 0 1394 391"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M866.86 257.16V10.54H734.29v125.09h-.03C714.7 63.47 648.56 0 553.74 0S381.7 64.9 361.67 146.92h-.03V10.54H229.91v195.87c0 19.3-2.52 31.04-12.59 41.95s-23.49 15.1-36.08 15.1-26.01-4.2-36.08-15.1c-10.07-10.91-12.59-22.65-12.59-41.95V10.54H0v196.71c0 52.86 10.91 95.65 46.15 130.89C73.84 365.83 118.31 391 178.72 391c52.86 0 99.01-18.46 132.57-54.54 28.44-30.11 43.48-67.53 48.36-100.98h.03C377.14 322.25 454.72 391 553.73 391c87.28 0 158.17-56.74 180.55-135.7v124.49h246.68V257.15H866.85zm-254.59-31.44c-8.39 22.65-31.67 37.76-58.52 37.76-37.76 0-65.66-29.37-65.66-67.96s27.9-67.96 65.66-67.96c26.85 0 50.13 15.1 58.52 37.76h122.02v60.41H612.27z"
+      fill="#361a54"
+    />
+    <path
+      d="M1393.25 257.11h-42.93v122.64h42.93zm-68.7 0h-39.49v122.64h39.49zm-68.7 0h-36.06v122.64h36.06zm-68.7 0h-32.62v122.64h32.62zm-68.7 0h-29.19v122.64h29.19zm-68.69 0H1024v122.64h25.76zm145.35-179.29c-22.41 5.81-39.12 25.73-40.12 49.72h-.06v14.45h-9.92v23.27L1024 204.58V10.5h369.25v194.08l-121.01-39.32v-23.27h-9.92v-14.45h-.06c-1-23.98-17.71-43.9-40.12-49.72l-9.3-34.7h-8.45l-9.3 34.7z"
+      fill="#9a3bff"
+    />
+  </svg>
+  <div
+    class="ucl-uikit-header__title css-118cw9t"
+    data-test="ucl-uikit-header__title"
+  >
+    LIDS
+  </div>
+</header>
+`;
+
+exports[`Header > snapshot: variant=breadcrumbs 1`] = `
+<header
+  class="ucl-uikit-header css-7smbab"
+  data-testid="ucl-uikit-header"
+>
+  <div
+    class="ucl-uikit-header__border css-miu54s"
+    data-test="ucl-uikit-header__border"
+  >
+    <div
+      class="css-1l552cj"
+    />
+  </div>
+  <svg
+    class="ucl-uikit-header__logo css-h3fm3u"
+    data-test="ucl-uikit-header__logo"
+    fill="none"
+    focusable="false"
+    viewBox="0 0 1394 391"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M866.86 257.16V10.54H734.29v125.09h-.03C714.7 63.47 648.56 0 553.74 0S381.7 64.9 361.67 146.92h-.03V10.54H229.91v195.87c0 19.3-2.52 31.04-12.59 41.95s-23.49 15.1-36.08 15.1-26.01-4.2-36.08-15.1c-10.07-10.91-12.59-22.65-12.59-41.95V10.54H0v196.71c0 52.86 10.91 95.65 46.15 130.89C73.84 365.83 118.31 391 178.72 391c52.86 0 99.01-18.46 132.57-54.54 28.44-30.11 43.48-67.53 48.36-100.98h.03C377.14 322.25 454.72 391 553.73 391c87.28 0 158.17-56.74 180.55-135.7v124.49h246.68V257.15H866.85zm-254.59-31.44c-8.39 22.65-31.67 37.76-58.52 37.76-37.76 0-65.66-29.37-65.66-67.96s27.9-67.96 65.66-67.96c26.85 0 50.13 15.1 58.52 37.76h122.02v60.41H612.27z"
+      fill="#361a54"
+    />
+    <path
+      d="M1393.25 257.11h-42.93v122.64h42.93zm-68.7 0h-39.49v122.64h39.49zm-68.7 0h-36.06v122.64h36.06zm-68.7 0h-32.62v122.64h32.62zm-68.7 0h-29.19v122.64h29.19zm-68.69 0H1024v122.64h25.76zm145.35-179.29c-22.41 5.81-39.12 25.73-40.12 49.72h-.06v14.45h-9.92v23.27L1024 204.58V10.5h369.25v194.08l-121.01-39.32v-23.27h-9.92v-14.45h-.06c-1-23.98-17.71-43.9-40.12-49.72l-9.3-34.7h-8.45l-9.3 34.7z"
+      fill="#9a3bff"
+    />
+  </svg>
+  <div
+    class="ucl-uikit-header__title css-118cw9t"
+    data-test="ucl-uikit-header__title"
+  >
+    LIDS
+  </div>
+</header>
+`;

package/lib/components/HeaderNew/constants.ts

@@ -0,0 +1,3 @@
+export const HEADER_TABLET_HEIGHT_PX = 78;
+export const HEADER_MOBILE_HEIGHT_PX = 48;
+export const DEFAULT_Z_INDEX = 3;

package/lib/components/HeaderNew/index.ts

@@ -0,0 +1,7 @@
+export { default } from './Header';
+export {
+  HEADER_TABLET_HEIGHT_PX,
+  HEADER_MOBILE_HEIGHT_PX,
+  DEFAULT_Z_INDEX,
+} from './constants';
+export type { HeaderProps } from './Header';

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

@@ -16,73 +16,66 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    level: 'md',
     children: 'Default Heading',
   },
 };
 
-export const Level1: Story = {
+export const LevelXxl: Story = {
   args: {
-    level: 1,
-    children: 'Heading level 1',
+    level: 'xxl',
+    children: 'Heading level XXL',
   },
 };
 
-export const Level2: Story = {
+export const LevelXl: Story = {
   args: {
-    level: 2,
-    children: 'Heading level 2',
+    level: 'xl',
+    children: 'Heading level XL',
   },
 };
 
-export const Level3: Story = {
+export const LevelLg: Story = {
   args: {
-    title: 'Heading Level 3',
-    level: 3,
-    children: 'Heading level 3',
+    level: 'lg',
+    children: 'Heading level LG',
   },
 };
 
-export const Level4: Story = {
+export const LevelMd: Story = {
   args: {
-    title: 'Heading Level 4',
-    level: 4,
-    children: 'Heading level 4',
+    level: 'md',
+    children: 'Heading level MD',
   },
 };
 
-export const Margins: Story = {
-  name: 'Heading with margins',
+export const LevelSm: Story = {
   args: {
-    title: 'Heading with margins',
-    margins: true,
-    children: 'Heading with margins',
+    level: 'sm',
+    children: 'Heading level SM',
+  },
+};
+
+export const LevelXs: Story = {
+  args: {
+    level: 'xs',
+    children: 'Heading level XS',
+  },
+};
+
+export const AsSpan: Story = {
+  args: {
+    as: 'span',
+    level: 'lg',
+    children: 'Heading rendered as span',
   },
-  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',
+  name: 'No margins',
   args: {
-    title: 'Heading without margins',
-    margins: false,
+    noMargins: true,
+    level: 'md',
     children: 'Heading without margins',
   },
   decorators: [