uikit-react-public 0.11.13

package/lib/components/AppHeader/AppHeaderTop.tsx

@@ -0,0 +1,56 @@
+import { memo, HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { UclLogo, useTheme } from '../../';
+
+export const NAME = 'ucl-timetable-app-header__top';
+
+export const HEIGHT = 56;
+
+export interface AppHeaderTopProps extends HTMLAttributes<HTMLDivElement> {
+  uclLogo?: boolean;
+  logoClassName?: string;
+  testId?: string;
+}
+
+const AppHeaderTop = ({
+  uclLogo = true,
+  logoClassName,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: AppHeaderTopProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    height: ${HEIGHT}px;
+    padding: 0 ${theme.padding.p64} 0 ${theme.padding.p16};
+    display: flex;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const uclLogoBaseStyle = css`
+    display: block;
+    margin-left: auto;
+    margin-top: 20px;
+    height: 36px;
+    color: ${theme.color.display.greenDark}; // default header/logo colour
+  `;
+
+  const uclLogoStyle = cx(uclLogoBaseStyle, logoClassName);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+
+      {uclLogo && <UclLogo className={uclLogoStyle} />}
+    </div>
+  );
+};
+
+export default memo(AppHeaderTop);

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

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import AppHeader from '../AppHeader';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('AppHeader', () => {
+  // Snapshot tests
+
+  test('snapshot: no props', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <AppHeader />
+      </ThemeContextProvider>
+    );
+    expect(
+      renderResult.container.firstChild
+    ).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppHeader > snapshot: no props 1`] = `
+<div
+  class="ucl-timetable-app-header css-14i4gnx"
+  data-testid="ucl-timetable-app-header"
+/>
+`;

package/lib/components/AppHeader/index.ts

@@ -0,0 +1,3 @@
+export { default } from './AppHeader';
+export { HEIGHT as APP_HEADER_HEIGHT } from './AppHeader';
+export type { AppHeaderProps } from './AppHeader';

package/lib/components/AppMenu/AppMenu.context.tsx

@@ -0,0 +1,162 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import { useTheme } from '../../theme';
+
+interface IContext {
+  isOpen: boolean;
+  toggleMenu: () => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  contentRef: React.RefObject<HTMLUListElement | null>;
+}
+
+export const AppMenuContext = createContext({} as IContext);
+
+export const useAppMenu = () => useContext(AppMenuContext);
+
+const AppMenuProvider = ({
+  defaultOpen = false,
+  children,
+}: {
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [theme] = useTheme();
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    const originalStyle = document.body.style.overflow;
+    if (isOpen && !isDesktop) {
+      // Prevent background scrolling when menu is open and on mobile
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = originalStyle;
+    }
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, [isOpen, isDesktop]);
+
+  useEffect(() => {
+    if (isOpen && contentRef.current) {
+      contentRef.current.focus();
+
+      if (contentRef.current && document.activeElement === contentRef.current) {
+        console.log('Menu successfully focused');
+      } else {
+        console.log(
+          'Failed to focus menu - current focus is on:',
+          document.activeElement
+        );
+      }
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const closeMenuOutsideClick = (event: MouseEvent) => {
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node) &&
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+
+      if (!isOpen || !contentRef.current) return;
+
+      const focusableElements = Array.from(
+        contentRef.current.querySelectorAll('[role="menuitem"]')
+      ).filter((el) => {
+        const element = el as HTMLElement;
+        return (
+          element.getAttribute('aria-disabled') !== 'true' &&
+          element.tabIndex >= 0 &&
+          element.offsetParent !== null
+        );
+      }) as HTMLElement[];
+
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      const currentIndex = focusableElements.indexOf(
+        document.activeElement as HTMLElement
+      );
+
+      if (event.key === 'Tab') {
+        // Loop focus on Tab/Shift+Tab
+        if (event.shiftKey && document.activeElement === firstElement) {
+          lastElement.focus();
+          event.preventDefault();
+        } else if (!event.shiftKey && document.activeElement === lastElement) {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      } else if (event.key === 'ArrowDown') {
+        // Move focus to next item
+        if (currentIndex !== -1) {
+          const nextIndex = (currentIndex + 1) % focusableElements.length;
+          focusableElements[nextIndex].focus();
+          event.preventDefault();
+        } else {
+          firstElement.focus();
+          event.preventDefault();
+        }
+      } else if (event.key === 'ArrowUp') {
+        // Move focus to previous item
+        if (currentIndex !== -1) {
+          const prevIndex =
+            (currentIndex - 1 + focusableElements.length) %
+            focusableElements.length;
+          focusableElements[prevIndex].focus();
+          event.preventDefault();
+        } else {
+          lastElement.focus();
+          event.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', closeMenuOutsideClick);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('mousedown', closeMenuOutsideClick);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const toggleMenu = () => setIsOpen((prevOpen) => !prevOpen);
+
+  const value = {
+    isOpen,
+    toggleMenu,
+    triggerRef,
+    contentRef,
+  };
+
+  return (
+    <AppMenuContext.Provider value={value}>{children}</AppMenuContext.Provider>
+  );
+};
+
+export default AppMenuProvider;

package/lib/components/AppMenu/AppMenu.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link as InternalLink } from 'wouter';
+import AppMenu from './AppMenu';
+import Icon from '../Icon/Icon';
+import Link from '../Link/Link';
+
+const meta = {
+  title: 'Components/Deprecated/AppMenu',
+  component: AppMenu,
+} satisfies Meta<typeof AppMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  render: () => {
+    return (
+      <AppMenu>
+        <AppMenu.MenuItem>Menu item 01</AppMenu.MenuItem>
+        <AppMenu.MenuItem>Menu item 02</AppMenu.MenuItem>
+        <AppMenu.MenuItem>Menu item 03</AppMenu.MenuItem>
+      </AppMenu>
+    );
+  },
+};
+
+export const WithDividers: Story = {
+  name: 'With dividers',
+  render: () => {
+    return (
+      <AppMenu>
+        <AppMenu.MenuItem>Menu item 01</AppMenu.MenuItem>
+        <AppMenu.Divider />
+        <AppMenu.MenuItem>Menu item 02</AppMenu.MenuItem>
+        <AppMenu.Divider />
+        <AppMenu.MenuItem>Menu item 03</AppMenu.MenuItem>
+      </AppMenu>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  name: 'With icons',
+  render: () => {
+    return (
+      <AppMenu>
+        <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+          Calendar
+        </AppMenu.MenuItem>
+        <AppMenu.MenuItem icon={<Icon.Edit size={24} />}>Edit</AppMenu.MenuItem>
+        <AppMenu.MenuItem icon={<Icon.Grid size={24} />}>Apps</AppMenu.MenuItem>
+        <AppMenu.MenuItem icon={<Icon.Settings size={24} />}>
+          Settings
+        </AppMenu.MenuItem>
+      </AppMenu>
+    );
+  },
+};
+
+export const WithTrigger: Story = {
+  name: 'With trigger',
+  render: () => {
+    return (
+      <AppMenu>
+        <AppMenu.Trigger>
+          <Icon.Menu />
+        </AppMenu.Trigger>
+        <AppMenu.Content>
+          <AppMenu.MenuItem>Menu item 01</AppMenu.MenuItem>
+          <AppMenu.MenuItem>Menu item 02</AppMenu.MenuItem>
+          <AppMenu.MenuItem>Menu item 03</AppMenu.MenuItem>
+        </AppMenu.Content>
+      </AppMenu>
+    );
+  },
+};
+
+export const Complex: Story = {
+  render: () => (
+    <AppMenu>
+      <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+        <InternalLink
+          to='/timetable/personal'
+          asChild
+        >
+          <Link noVisited>Personal Timetable</Link>
+        </InternalLink>
+      </AppMenu.MenuItem>
+      <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+        <InternalLink
+          to='/timetable/degree'
+          asChild
+        >
+          <Link noVisited>Degree Timetable</Link>
+        </InternalLink>
+      </AppMenu.MenuItem>
+      <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+        <InternalLink
+          to='/timetable/custom'
+          asChild
+        >
+          <Link noVisited>Custom Timetable</Link>
+        </InternalLink>
+      </AppMenu.MenuItem>
+      <AppMenu.Divider />
+      <AppMenu.MenuItem icon={<Icon.Settings size={24} />}>
+        Settings
+      </AppMenu.MenuItem>
+      <AppMenu.MenuItem icon={<Icon.HelpCircle size={24} />}>
+        Help
+      </AppMenu.MenuItem>
+      <AppMenu.Divider />
+      <AppMenu.MenuItem icon={<Icon.ArrowLeft size={24} />}>
+        <InternalLink
+          to='/timetable/home'
+          asChild
+        >
+          <Link noVisited>Exit beta</Link>
+        </InternalLink>
+      </AppMenu.MenuItem>
+    </AppMenu>
+  ),
+};
+
+export const ComplexWithTrigger: Story = {
+  name: 'Complex with trigger',
+  render: () => (
+    <AppMenu>
+      <AppMenu.Trigger>
+        <Icon.Menu />
+      </AppMenu.Trigger>
+      <AppMenu.Content>
+        <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+          <InternalLink
+            to='/timetable/personal'
+            asChild
+          >
+            <Link noVisited>Personal Timetable</Link>
+          </InternalLink>
+        </AppMenu.MenuItem>
+        <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+          <InternalLink
+            to='/timetable/degree'
+            asChild
+          >
+            <Link noVisited>Degree Timetable</Link>
+          </InternalLink>
+        </AppMenu.MenuItem>
+        <AppMenu.MenuItem icon={<Icon.Calendar size={24} />}>
+          <InternalLink
+            to='/timetable/custom'
+            asChild
+          >
+            <Link noVisited>Custom Timetable</Link>
+          </InternalLink>
+        </AppMenu.MenuItem>
+        <AppMenu.Divider />
+        <AppMenu.MenuItem icon={<Icon.Settings size={24} />}>
+          Settings
+        </AppMenu.MenuItem>
+        <AppMenu.MenuItem icon={<Icon.HelpCircle size={24} />}>
+          Help
+        </AppMenu.MenuItem>
+        <AppMenu.Divider />
+        <AppMenu.MenuItem icon={<Icon.ArrowLeft size={24} />}>
+          <InternalLink
+            to='/timetable/home'
+            asChild
+          >
+            <Link noVisited>Exit beta</Link>
+          </InternalLink>
+        </AppMenu.MenuItem>
+      </AppMenu.Content>
+    </AppMenu>
+  ),
+};

package/lib/components/AppMenu/AppMenu.tsx

@@ -0,0 +1,62 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import AppMenuProvider from './AppMenu.context';
+import AppMenuContent from './AppMenuContent';
+import AppMenuItem from './AppMenuItem';
+import AppMenuDivider from './AppMenuDivider';
+import AppMenuTrigger from './AppMenuTrigger';
+
+export const NAME = 'ucl-app-menu';
+
+export interface AppMenuProps
+  extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  defaultOpen?: boolean;
+}
+
+const AppMenu = ({
+  testId = NAME,
+  defaultOpen = false,
+  children,
+  className,
+  ...props
+}: AppMenuProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    position: relative;
+    font-family: ${theme.font.family.primary};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <AppMenuProvider defaultOpen={defaultOpen}>
+        {children}
+      </AppMenuProvider>
+    </div>
+  );
+};
+
+export interface IAppMenuSubComponents {
+  Trigger: typeof AppMenuTrigger;
+  Content: typeof AppMenuContent;
+  MenuItem: typeof AppMenuItem;
+  Divider: typeof AppMenuDivider;
+}
+
+const AppMenuWithSubComponents = AppMenu as typeof AppMenu &
+  IAppMenuSubComponents;
+
+AppMenuWithSubComponents.Trigger = AppMenuTrigger;
+AppMenuWithSubComponents.Content = AppMenuContent;
+AppMenuWithSubComponents.MenuItem = AppMenuItem;
+AppMenuWithSubComponents.Divider = AppMenuDivider;
+
+export default AppMenuWithSubComponents;

package/lib/components/AppMenu/AppMenuContent.tsx

@@ -0,0 +1,121 @@
+import React, { LiHTMLAttributes, useEffect } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import { useAppMenu } from './AppMenu.context';
+import AppMenuItem from './AppMenuItem';
+import Icon from '../Icon';
+import { createPortal } from 'react-dom';
+import useMediaQuery from '../../hooks/useMediaQuery';
+
+export const NAME = 'ucl-app-menu__content';
+
+export interface AppMenuContentProps
+  extends LiHTMLAttributes<HTMLUListElement> {
+  testId?: string;
+}
+
+const AppMenuContent: React.FC<AppMenuContentProps> = ({
+  testId = NAME,
+  children,
+  className,
+  ...props
+}) => {
+  const { isOpen, contentRef, toggleMenu } = useAppMenu();
+  const [theme] = useTheme();
+
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const handleBackButtonKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      toggleMenu();
+    }
+  };
+
+  const baseStyle = css`
+    z-index: 9999;
+    position: absolute;
+    display: none;
+    top: 16px;
+    min-width: 140px;
+    white-space: nowrap;
+    cursor: default;
+    background-color: white;
+    box-shadow: ${theme.boxShadow.y1};
+    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    padding-left: 0;
+    padding-right: 0;
+    color: ${theme.color.text.primary};
+    list-style: none;
+
+    @media (max-width: ${theme.breakpoints.desktop}px) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: auto;
+      a {
+        height: auto;
+      }
+    }
+  `;
+
+  const expandedStyle = css`
+    display: block;
+  `;
+
+  const backMenuItemStyle = css`
+    cursor: pointer;
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      display: none;
+    }
+  `;
+
+  useEffect(() => {
+    const mainDiv = document.getElementById('root');
+    if (mainDiv) {
+      if (!isDesktop && isOpen) {
+        mainDiv.style.display = 'none';
+      } else {
+        mainDiv.style.display = '';
+      }
+    }
+  }, [isOpen, isDesktop]);
+
+  const style = cx(NAME, baseStyle, isOpen && expandedStyle, className);
+
+  const menuContent = (
+    <ul
+      id='app-menu'
+      role='menu'
+      aria-labelledby='app-menu-button'
+      ref={contentRef}
+      className={style}
+      data-testid={testId}
+      tabIndex={-1}
+      {...props}
+    >
+      <AppMenuItem
+        onClick={toggleMenu}
+        onKeyDown={handleBackButtonKeyDown}
+        icon={<Icon.ChevronLeft />}
+        className={backMenuItemStyle}
+        aria-label='Go Back'
+      >
+        Back
+      </AppMenuItem>
+      {children}
+    </ul>
+  );
+
+  return !isDesktop ? createPortal(menuContent, document.body) : menuContent;
+};
+
+export default AppMenuContent;

package/lib/components/AppMenu/AppMenuDivider.tsx

@@ -0,0 +1,40 @@
+import React, { HtmlHTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-app-menu__divider';
+
+export interface AppMenuDividerProps
+  extends Omit<
+    HtmlHTMLAttributes<HTMLHRElement>,
+    'children'
+  > {
+  testId?: string;
+}
+
+const AppMenuDivider: React.FC<AppMenuDividerProps> = ({
+  testId = NAME,
+  className,
+  ...props
+}) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    margin: 0;
+    height: 1px;
+    border: none;
+    background-color: ${theme.color.neutral.grey20};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  return (
+    <hr
+      className={style}
+      data-testid={testId}
+      {...props}
+    />
+  );
+};
+
+export default AppMenuDivider;