uikit-react-public 0.11.13

package/lib/components/AppMenu/AppMenuItem.tsx

@@ -0,0 +1,173 @@
+import React, { LiHTMLAttributes, ElementType, useMemo } from 'react';
+import { css, cx } from '@emotion/css';
+import Link from '../Link';
+import { useAppMenu } from './AppMenu.context';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-app-menu__item';
+
+export interface AppMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  testId?: string;
+  icon?: React.ReactNode;
+  internalLink?: string;
+  externalLink?: string;
+  linkComponent?: ElementType;
+  isActive?: boolean;
+}
+
+const AppMenuItem: React.FC<AppMenuItemProps> = ({
+  testId = NAME,
+  icon,
+  children,
+  className,
+  internalLink,
+  externalLink,
+  linkComponent,
+  isActive,
+  onClick,
+  ...props
+}) => {
+  const isClickable = !!(onClick || internalLink || externalLink);
+  const [theme] = useTheme();
+  const { toggleMenu } = useAppMenu();
+
+  const isCurrent = useMemo(() => {
+    if (typeof isActive === 'boolean') return isActive;
+    if (typeof window !== 'undefined' && internalLink)
+      return window.location.pathname === internalLink;
+    return false;
+  }, [isActive, internalLink]);
+
+  const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
+    if (isCurrent) {
+      e.preventDefault();
+      toggleMenu(); // Close the menu
+    }
+    if (onClick) {
+      onClick(e as unknown as React.MouseEvent<HTMLLIElement, MouseEvent>);
+    }
+  };
+
+  const baseStyle = css`
+    height: 40px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    color: ${theme.color.text.secondary};
+  `;
+
+  const clickableMenuItemStyle = css`
+    color: ${theme.color.text.primary};
+    &:hover {
+      background-color: ${theme.color.interaction.blue5};
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+  `;
+
+  const menuLinkStyle = css`
+    text-decoration: none;
+    color: ${theme.color.text.primary};
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    &:hover {
+      background-color: ${theme.color.interaction.blue5};
+    }
+    &:visited {
+      color: ${theme.color.text.primary};
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+  `;
+
+  const iconContainerStyle = css`
+    display: inline-flex;
+    align-items: center;
+    margin-right: 8px;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    isClickable && clickableMenuItemStyle,
+    className
+  );
+
+  const content = (
+    <>
+      {React.isValidElement(icon) && (
+        <span className={iconContainerStyle}>{icon}</span>
+      )}
+      {children}
+    </>
+  );
+
+  if (internalLink) {
+    return (
+      <Link
+        noVisited
+        component={linkComponent}
+        href={internalLink}
+        className={menuLinkStyle}
+        role='menuitem'
+        tabIndex={0}
+        aria-label={isCurrent ? `${children} - Currently selected` : undefined}
+        onClick={handleClick}
+      >
+        <li
+          className={style}
+          data-testid={testId}
+          {...props}
+        >
+          {content}
+        </li>
+      </Link>
+    );
+  }
+
+  if (externalLink) {
+    return (
+      <Link
+        href={externalLink}
+        noVisited
+        className={menuLinkStyle}
+        role='menuitem'
+        tabIndex={0}
+      >
+        <li
+          className={style}
+          data-testid={testId}
+          {...props}
+        >
+          {content}
+        </li>
+      </Link>
+    );
+  }
+
+  return (
+    <li
+      tabIndex={isClickable ? 0 : -1}
+      role='menuitem'
+      aria-disabled={!isClickable}
+      className={style}
+      data-testid={testId}
+      onClick={onClick}
+      {...props}
+    >
+      {content}
+    </li>
+  );
+};
+
+export default AppMenuItem;

package/lib/components/AppMenu/AppMenuTrigger.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import IconButton, { IconButtonProps } from '../IconButton';
+import { useAppMenu } from './AppMenu.context';
+
+export const NAME = 'ucl-app-menu__trigger';
+
+export interface AppMenuTriggerProps
+  extends IconButtonProps {}
+
+const AppMenuTrigger: React.FC<AppMenuTriggerProps> = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}) => {
+  const [theme] = useTheme();
+  const { isOpen, toggleMenu, triggerRef } = useAppMenu();
+
+  const baseStyle = css`
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+      z-index: 1;
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <IconButton
+      id='app-menu-button'
+      ref={triggerRef}
+      className={style}
+      onClick={toggleMenu}
+      aria-label='Menu button'
+      aria-controls='app-menu'
+      aria-haspopup='true'
+      aria-expanded={isOpen ? 'true' : 'false'}
+      data-testid={testId}
+      tabIndex={0}
+      {...props}
+    >
+      {children}
+    </IconButton>
+  );
+};
+
+export default AppMenuTrigger;

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

@@ -0,0 +1,100 @@
+import { describe, expect, test, beforeAll, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AppMenu from '../AppMenu';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Icon from '../../Icon';
+
+beforeAll(() => {
+  globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: query === '(min-width: 1056px)',
+    media: query,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+});
+
+describe('AppMenu', () => {
+  //snapshot
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <AppMenu />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: testId prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <AppMenu testId='test1' />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: defaultOpen prop', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <AppMenu defaultOpen>
+          <AppMenu.Trigger>
+            <Icon.Menu />
+          </AppMenu.Trigger>
+          <AppMenu.Content>
+            <AppMenu.MenuItem>Menu Item 1</AppMenu.MenuItem>
+            <AppMenu.Divider />
+            <AppMenu.MenuItem>Menu Item 2</AppMenu.MenuItem>
+          </AppMenu.Content>
+        </AppMenu>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  //interaction
+  test('test ID: default', () => {
+    render(
+      <ThemeContextProvider>
+        <AppMenu />
+      </ThemeContextProvider>
+    );
+    const appMenu = screen.getByTestId('ucl-app-menu');
+    expect(appMenu).toBeDefined();
+  });
+
+  test('menu button click reveals menu list', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ThemeContextProvider>
+        <AppMenu>
+          <AppMenu.Trigger testId='menu-trigger'>
+            <Icon.Menu />
+          </AppMenu.Trigger>
+          <AppMenu.Content testId='menu-content'>
+            <AppMenu.MenuItem>Menu Item 1</AppMenu.MenuItem>
+          </AppMenu.Content>
+        </AppMenu>
+      </ThemeContextProvider>
+    );
+
+    const appMenuButton = screen.getByTestId(
+      'menu-trigger'
+    ) as HTMLButtonElement;
+    const appMenuContent = screen.getByTestId(
+      'menu-content'
+    ) as HTMLUListElement;
+
+    const computedStylesBeforeClick = window.getComputedStyle(appMenuContent);
+    expect(computedStylesBeforeClick.display).toBe('none');
+
+    await user.click(appMenuButton);
+
+    const computedStylesAfterClick = window.getComputedStyle(appMenuContent);
+    expect(computedStylesAfterClick.display).toBe('block');
+  });
+});

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

@@ -0,0 +1,128 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
+<div
+  class="ucl-app-menu css-it216d"
+  data-testid="ucl-app-menu"
+>
+  <button
+    aria-controls="app-menu"
+    aria-expanded="true"
+    aria-haspopup="true"
+    aria-label="Menu button"
+    class="ucl-uikit-icon-button ucl-app-menu__trigger css-h3kcwz"
+    data-testid="ucl-app-menu__trigger"
+    id="app-menu-button"
+    tabindex="0"
+  >
+    <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"
+    >
+      <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"
+      />
+    </svg>
+  </button>
+  <ul
+    aria-labelledby="app-menu-button"
+    class="ucl-app-menu__content css-63xuy3"
+    data-testid="ucl-app-menu__content"
+    id="app-menu"
+    role="menu"
+    tabindex="-1"
+  >
+    <li
+      aria-disabled="false"
+      aria-label="Go Back"
+      class="ucl-app-menu__item css-8z8u2q"
+      data-testid="ucl-app-menu__item"
+      role="menuitem"
+      tabindex="0"
+    >
+      <span
+        class="css-1epmcqg"
+      >
+        <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"
+        >
+          <polyline
+            points="15 18 9 12 15 6"
+          />
+        </svg>
+      </span>
+      Back
+    </li>
+    <li
+      aria-disabled="true"
+      class="ucl-app-menu__item css-vobysi"
+      data-testid="ucl-app-menu__item"
+      role="menuitem"
+      tabindex="-1"
+    >
+      Menu Item 1
+    </li>
+    <hr
+      class="ucl-app-menu__divider css-wwimuq"
+      data-testid="ucl-app-menu__divider"
+    />
+    <li
+      aria-disabled="true"
+      class="ucl-app-menu__item css-vobysi"
+      data-testid="ucl-app-menu__item"
+      role="menuitem"
+      tabindex="-1"
+    >
+      Menu Item 2
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`AppMenu > snapshot: no props 1`] = `
+<div
+  class="ucl-app-menu css-it216d"
+  data-testid="ucl-app-menu"
+/>
+`;
+
+exports[`AppMenu > snapshot: testId prop 1`] = `
+<div
+  class="ucl-app-menu css-it216d"
+  data-testid="test1"
+/>
+`;

package/lib/components/AppMenu/index.ts

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

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+import sampleAvatarPhoto from '../../../public/sample-avatar-photo.jpg';
+
+const meta = {
+  title: 'Components/Ready to use/Avatar',
+  component: Avatar,
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Image: Story = {
+  args: {
+    variant: 'image',
+    imageUrl: sampleAvatarPhoto,
+  },
+};
+
+export const Initials: Story = {
+  args: {
+    variant: 'initials',
+    name: 'Beverley Haggis',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    variant: 'icon',
+  },
+};

package/lib/components/Avatar/Avatar.tsx

@@ -0,0 +1,152 @@
+import {
+  ButtonHTMLAttributes,
+  forwardRef,
+  memo,
+  useEffect,
+  useState,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import { Icon } from '..';
+import extractInitials from './utils/extractInitials';
+
+export const NAME = 'ucl-uikit-avatar';
+
+export interface AvatarProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'image' | 'initials' | 'icon';
+  imageUrl?: string;
+  name?: string;
+  size?: 48 | 56 | 72 | 80;
+  disabled?: boolean;
+  testId?: string;
+}
+
+export type Ref = HTMLButtonElement;
+
+/**
+ * <Avatar> implements graceful fallbacks:
+ * - If `variant` = 'image', but a valid `imageURL` is not provided, initials will be displayed instead.
+ * - If `variant` = 'initials', but a valid `name` is not provided, the icon will be displayed instead.
+ */
+const Avatar = forwardRef<Ref, AvatarProps>(
+  (
+    {
+      variant = 'image',
+      imageUrl,
+      name = '',
+      size = 48,
+      disabled,
+      testId = NAME,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+    const [imageError, setImageError] = useState(false);
+
+    // Reset image error state when imageUrl changes
+    // Othwerwise, memoisation causes the error state to persist
+    useEffect(() => {
+      setImageError(false);
+    }, [imageUrl]);
+
+    const fontSize = (size * 2) / 5;
+    const initials = extractInitials(name);
+
+    const handleImageError = (
+      event: React.SyntheticEvent<HTMLImageElement>
+    ) => {
+      console.error('Avatar image failed to load', event);
+      setImageError(true);
+    };
+
+    const baseStyle = css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 0;
+      border-radius: 50%;
+      border: none;
+      outline: none;
+      width: ${size}px;
+      height: ${size}px;
+      color: ${theme.color.neutral.grey60};
+      background-color: ${theme.color.neutral.grey20};
+      font-family: ${theme.font.family.primary};
+      font-size: ${fontSize}px;
+      cursor: pointer;
+    `;
+
+    const activeAndFocusStyle = css`
+      &:focus-visible {
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const disabledStyle = css`
+      background-color: ${theme.color.neutral.grey5};
+      color: ${theme.color.neutral.grey20};
+      cursor: not-allowed;
+    `;
+
+    const imageStyle = css`
+      width: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+      ${disabled && 'opacity: 50%;'}
+    `;
+
+    // Because this text will always be uppercase,
+    // we need to nudge it down slightly to center it
+    // (no descenders to balance the ascenders).
+    const initialsStyle = css`
+      padding-top: 0.1em;
+      text-transform: uppercase;
+    `;
+
+    // `padding-top` to prevent a thin grey line
+    // from appearing at the bottom of the icon
+    const iconStyle = css`
+      color: ${theme.color.neutral.white};
+      width: 100%;
+      height: 100%;
+      padding-top: 0.1em;
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      !disabled && activeAndFocusStyle,
+      disabled && disabledStyle,
+      className
+    );
+
+    return (
+      <button
+        ref={ref}
+        disabled={disabled}
+        data-testid={testId}
+        className={style}
+        {...props}
+      >
+        {variant === 'image' && imageUrl && !imageError ? (
+          <img
+            src={imageUrl}
+            alt={name ?? 'Avatar'}
+            onError={handleImageError}
+            data-testid={`${testId}-image`}
+            className={imageStyle}
+          />
+        ) : (variant === 'initials' || variant === 'image') && initials ? (
+          <span className={initialsStyle}>{initials}</span>
+        ) : (
+          <Icon.Avatar className={iconStyle} />
+        )}
+      </button>
+    );
+  }
+);
+
+export default memo(Avatar);