uikit-react-public 0.22.2 → 0.24.2

package/lib/components/Avatar/Avatar.tsx

@@ -16,7 +16,7 @@ export interface AvatarProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'image' | 'initials' | 'icon';
   imageUrl?: string;
   name?: string;
-  size?: 48 | 56 | 72 | 80;
+  size?: 32 | 48 | 56 | 72 | 80;
   disabled?: boolean;
   testId?: string;
 }

package/lib/components/Dropdown/Dropdown.context.tsx

@@ -0,0 +1,62 @@
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+interface DropdownContextType {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  toggle: () => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const DropdownContext = createContext<DropdownContextType | undefined>(
+  undefined
+);
+
+export const useDropdownContext = () => {
+  const context = useContext(DropdownContext);
+
+  if (!context) {
+    throw new Error('Dropdown components must be used within a Dropdown');
+  }
+
+  return context;
+};
+
+interface DropdownProviderProps {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+const DropdownProvider = ({
+  defaultOpen = false,
+  children,
+}: DropdownProviderProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const triggerRef = useRef<HTMLElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const value = useMemo(
+    () => ({
+      isOpen,
+      setIsOpen,
+      toggle: () => setIsOpen((prev) => !prev),
+      triggerRef,
+      contentRef,
+    }),
+    [isOpen]
+  );
+
+  return (
+    <DropdownContext.Provider value={value}>
+      {children}
+    </DropdownContext.Provider>
+  );
+};
+
+export default DropdownProvider;

package/lib/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/css';
+import Dropdown from './Dropdown';
+import Button from '../Button';
+import HeaderNew from '../HeaderNew';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import LabelledCheckbox from '../Checkbox/LabelledCheckbox';
+import useTheme from '../../theme/useTheme';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import { ThemeContextProvider, lightTheme } from '../../theme';
+
+const meta = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    defaultOpen: {
+      control: { type: 'boolean' },
+      type: 'boolean',
+    },
+    testId: {
+      control: { type: 'text' },
+      type: 'string',
+    },
+    className: {
+      control: { type: 'text' },
+      type: 'string',
+    },
+  },
+  args: {
+    defaultOpen: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HeaderResponsiveTrigger: Story = {
+  render: (args) => {
+    const [theme] = useTheme();
+    const isDesktop = useMediaQuery(
+      `(min-width: ${theme.breakpoints.desktop}px)`
+    );
+
+    const containerStyle = css`
+      min-height: 280px;
+    `;
+
+    const iconButtonStyle = css`
+      color: ${theme.colour.icon.default};
+    `;
+
+    const menuStyle = css`
+      padding: ${theme.padding.p8};
+      min-width: 220px;
+    `;
+
+    const menuItemStyle = css`
+      display: block;
+      width: 100%;
+      text-align: left;
+      border: 0;
+      background: transparent;
+      padding: ${theme.padding.p8} ${theme.padding.p12};
+      cursor: pointer;
+
+      &:hover {
+        background-color: ${theme.colour.fill.hover};
+      }
+    `;
+
+    return (
+      <ThemeContextProvider initialTheme={lightTheme}>
+        <div className={containerStyle}>
+          <HeaderNew title='Name of the application'>
+            <HeaderNew.MenuContainer>
+              <Dropdown {...args}>
+                <Dropdown.Trigger>
+                  {isDesktop ? (
+                    <Button
+                      variant='primary-subtle'
+                      size='small'
+                      icon={<Icon.Menu size={20} />}
+                      aria-label='Menu'
+                    >
+                      Menu
+                    </Button>
+                  ) : (
+                    <IconButton
+                      className={iconButtonStyle}
+                      aria-label='Menu'
+                    >
+                      <Icon.Menu size={20} />
+                    </IconButton>
+                  )}
+                </Dropdown.Trigger>
+                <Dropdown.Content className={menuStyle}>
+                  <button
+                    type='button'
+                    className={menuItemStyle}
+                  >
+                    View profile
+                  </button>
+                  <button
+                    type='button'
+                    className={menuItemStyle}
+                  >
+                    Team settings
+                  </button>
+                  <button
+                    type='button'
+                    className={menuItemStyle}
+                  >
+                    Sign out
+                  </button>
+                </Dropdown.Content>
+              </Dropdown>
+            </HeaderNew.MenuContainer>
+          </HeaderNew>
+        </div>
+      </ThemeContextProvider>
+    );
+  },
+};
+
+export const StandaloneInfoPanel: Story = {
+  name: 'Standalone Info Panel',
+  render: (args) => {
+    const [theme] = useTheme();
+
+    const containerStyle = css`
+      min-height: 260px;
+      padding: ${theme.padding.p24};
+    `;
+
+    const infoContentStyle = css`
+      padding: ${theme.padding.p16};
+      max-width: 320px;
+    `;
+
+    const infoTitleStyle = css`
+      margin: 0 0 ${theme.margin.m8} 0;
+      font-weight: 700;
+    `;
+
+    const infoBodyStyle = css`
+      margin: 0 0 ${theme.margin.m12} 0;
+    `;
+
+    return (
+      <ThemeContextProvider initialTheme={lightTheme}>
+        <div className={containerStyle}>
+          <Dropdown {...args}>
+            <Dropdown.Trigger>
+              <Button
+                variant='secondary'
+                size='small'
+                icon={<Icon.Info size={20} />}
+              >
+                Notification preferences
+              </Button>
+            </Dropdown.Trigger>
+            <Dropdown.Content
+              className={infoContentStyle}
+              align='left'
+            >
+              <p className={infoTitleStyle}>Weekly update</p>
+              <p className={infoBodyStyle}>
+                Get a summary of new activity in your workspace every Friday.
+              </p>
+              <LabelledCheckbox id='storybook-weekly-update-checkbox'>
+                Email me the weekly summary
+              </LabelledCheckbox>
+            </Dropdown.Content>
+          </Dropdown>
+        </div>
+      </ThemeContextProvider>
+    );
+  },
+};

package/lib/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,91 @@
+import { HTMLAttributes, useEffect } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import DropdownProvider, { useDropdownContext } from './Dropdown.context';
+import DropdownTrigger from './DropdownTrigger';
+import DropdownContent from './DropdownContent';
+
+export const NAME = 'ucl-uikit-dropdown';
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  defaultOpen?: boolean;
+  testId?: string;
+}
+
+const DropdownBody = ({
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: Omit<DropdownProps, 'defaultOpen'>) => {
+  const [theme] = useTheme();
+  const { setIsOpen, triggerRef, contentRef } = useDropdownContext();
+
+  useEffect(() => {
+    const handleDocumentClick = (event: MouseEvent) => {
+      const target = event.target as Node;
+
+      if (
+        triggerRef.current?.contains(target) ||
+        contentRef.current?.contains(target)
+      ) {
+        return;
+      }
+
+      setIsOpen(false);
+    };
+
+    const handleDocumentKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleDocumentClick);
+    document.addEventListener('keydown', handleDocumentKeydown);
+
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentClick);
+      document.removeEventListener('keydown', handleDocumentKeydown);
+    };
+  }, [setIsOpen, triggerRef, contentRef]);
+
+  const baseStyle = css`
+    position: relative;
+    display: inline-flex;
+    font-family: ${theme.font.family.primary};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Dropdown = ({ defaultOpen = false, ...props }: DropdownProps) => {
+  return (
+    <DropdownProvider defaultOpen={defaultOpen}>
+      <DropdownBody {...props} />
+    </DropdownProvider>
+  );
+};
+
+export interface IDropdownSubComponents {
+  Trigger: typeof DropdownTrigger;
+  Content: typeof DropdownContent;
+}
+
+const DropdownWithSubComponents = Dropdown as typeof Dropdown &
+  IDropdownSubComponents;
+
+DropdownWithSubComponents.Trigger = DropdownTrigger;
+DropdownWithSubComponents.Content = DropdownContent;
+
+export default DropdownWithSubComponents;

package/lib/components/Dropdown/DropdownContent.tsx

@@ -0,0 +1,70 @@
+import { HTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { useDropdownContext } from './Dropdown.context';
+
+export const NAME = 'ucl-uikit-dropdown__content';
+
+export interface DropdownContentProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  align?: 'left' | 'right';
+}
+
+const DropdownContent = ({
+  testId = NAME,
+  align = 'right',
+  className,
+  children,
+  ...props
+}: DropdownContentProps) => {
+  const [theme] = useTheme();
+  const { isOpen, contentRef } = useDropdownContext();
+
+  const baseStyle = css`
+    display: none;
+    position: absolute;
+    top: calc(100% + ${theme.margin.m8});
+    z-index: 100;
+    min-width: max-content;
+    background-color: ${theme.colour.surface.default};
+    color: ${theme.colour.text.default};
+    border: ${theme.border.b1} solid ${theme.colour.border.default};
+    box-shadow: ${theme.boxShadow.y1};
+    border-radius: ${theme.radius.r4};
+  `;
+
+  const alignLeftStyle = css`
+    left: 0;
+  `;
+
+  const alignRightStyle = css`
+    right: 0;
+  `;
+
+  const openStyle = css`
+    display: block;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    align === 'left' && alignLeftStyle,
+    align === 'right' && alignRightStyle,
+    isOpen && openStyle,
+    className
+  );
+
+  return (
+    <div
+      ref={contentRef}
+      className={style}
+      role='menu'
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default memo(DropdownContent);

package/lib/components/Dropdown/DropdownTrigger.tsx

@@ -0,0 +1,62 @@
+import {
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+  memo,
+} from 'react';
+import { useDropdownContext } from './Dropdown.context';
+
+export const NAME = 'ucl-uikit-dropdown__trigger';
+
+export interface DropdownTriggerProps {
+  children: ReactElement<Record<string, unknown>>;
+}
+
+const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
+  const { isOpen, toggle, triggerRef } = useDropdownContext();
+
+  if (!isValidElement(children)) {
+    return null;
+  }
+
+  const childProps = children.props as Record<string, unknown>;
+
+  const existingOnClick = childProps.onClick as
+    | ((event: MouseEvent<HTMLElement>) => void)
+    | undefined;
+  const existingOnKeyDown = childProps.onKeyDown as
+    | ((event: KeyboardEvent<HTMLElement>) => void)
+    | undefined;
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    existingOnKeyDown?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      toggle();
+    }
+  };
+
+  return cloneElement(children, {
+    ref: triggerRef,
+    className: [NAME, childProps.className].filter(Boolean).join(' '),
+    onClick: (event: MouseEvent<HTMLElement>) => {
+      existingOnClick?.(event);
+
+      if (!event.defaultPrevented) {
+        toggle();
+      }
+    },
+    onKeyDown: handleKeyDown,
+    'aria-haspopup': childProps['aria-haspopup'] ?? 'menu',
+    'aria-expanded': isOpen,
+  });
+};
+
+export default memo(DropdownTrigger);

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

@@ -0,0 +1,63 @@
+import { describe, expect, test } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Dropdown from '../Dropdown';
+import Button from '../../Button';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Dropdown', () => {
+  test('opens and closes when trigger is clicked', () => {
+    render(
+      <ThemeContextProvider>
+        <Dropdown>
+          <Dropdown.Trigger>
+            <Button aria-label='Open dropdown'>Open</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <div>Content</div>
+          </Dropdown.Content>
+        </Dropdown>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open dropdown' });
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+
+    expect(content).not.toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(content).toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(content).not.toBeVisible();
+  });
+
+  test('closes on outside click and escape', () => {
+    render(
+      <ThemeContextProvider>
+        <div>
+          <Dropdown defaultOpen>
+            <Dropdown.Trigger>
+              <Button aria-label='Open dropdown'>Open</Button>
+            </Dropdown.Trigger>
+            <Dropdown.Content>
+              <div>Content</div>
+            </Dropdown.Content>
+          </Dropdown>
+          <button type='button'>Outside</button>
+        </div>
+      </ThemeContextProvider>
+    );
+
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    expect(content).toBeVisible();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(content).not.toBeVisible();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open dropdown' }));
+    expect(content).toBeVisible();
+
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'Outside' }));
+    expect(content).not.toBeVisible();
+  });
+});

package/lib/components/Dropdown/index.ts

@@ -0,0 +1,4 @@
+export { default } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export type { DropdownTriggerProps } from './DropdownTrigger';
+export type { DropdownContentProps } from './DropdownContent';

package/lib/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,82 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { css, cx } from '@emotion/css';
+import Dropdown, { DropdownProps } from '../Dropdown';
+import Button from '../Button';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import useTheme from '../../theme/useTheme';
+import useMediaQuery from '../../hooks/useMediaQuery';
+
+export const NAME = 'ucl-uikit-dropdown-menu';
+
+export interface DropdownMenuProps
+  extends
+    Omit<DropdownProps, 'children'>,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode;
+  label?: string;
+  triggerAriaLabel?: string;
+  dropdownClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+}
+
+const DropdownMenu = ({
+  children,
+  label = 'Menu',
+  triggerAriaLabel = 'Open menu',
+  dropdownClassName,
+  triggerClassName,
+  contentClassName,
+  className,
+  ...props
+}: DropdownMenuProps) => {
+  const [theme] = useTheme();
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const triggerStyle = css`
+    color: ${theme.colour.text.brandPrimary};
+  `;
+
+  const dropdownStyle = cx(NAME, dropdownClassName);
+  const resolvedTriggerClassName = cx(
+    triggerStyle,
+    className,
+    triggerClassName
+  );
+
+  return (
+    <Dropdown
+      className={dropdownStyle}
+      {...props}
+    >
+      <Dropdown.Trigger>
+        {isDesktop ? (
+          <Button
+            variant='tertiary-no-padding'
+            size='small'
+            className={resolvedTriggerClassName}
+            icon={<Icon.Menu2 size={20} />}
+            aria-label={triggerAriaLabel}
+          >
+            {label}
+          </Button>
+        ) : (
+          <IconButton
+            className={resolvedTriggerClassName}
+            aria-label={triggerAriaLabel}
+          >
+            <Icon.Menu2 size={20} />
+          </IconButton>
+        )}
+      </Dropdown.Trigger>
+      <Dropdown.Content className={contentClassName}>
+        {children}
+      </Dropdown.Content>
+    </Dropdown>
+  );
+};
+
+export default DropdownMenu;