uikit-react-public 0.17.4 → 0.21.8

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

@@ -10,17 +10,18 @@ exports[`IconButton > snapshot: disabled prop 1`] = `
     class="ucl-uikit-icon css-148hpxb"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="3"
+    stroke-width="2"
     viewBox="0 0 24 24"
     width="24"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <polyline
-      points="20 6 9 17 4 12"
+    <path
+      d="M20 6 9 17l-5-5"
     />
   </svg>
 </button>
@@ -35,17 +36,18 @@ exports[`IconButton > snapshot: no props 1`] = `
     class="ucl-uikit-icon css-148hpxb"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="3"
+    stroke-width="2"
     viewBox="0 0 24 24"
     width="24"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <polyline
-      points="20 6 9 17 4 12"
+    <path
+      d="M20 6 9 17l-5-5"
     />
   </svg>
 </button>
@@ -60,17 +62,18 @@ exports[`IconButton > snapshot: testId prop 1`] = `
     class="ucl-uikit-icon css-148hpxb"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="3"
+    stroke-width="2"
     viewBox="0 0 24 24"
     width="24"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <polyline
-      points="20 6 9 17 4 12"
+    <path
+      d="M20 6 9 17l-5-5"
     />
   </svg>
 </button>

package/lib/components/Link/BaseLink.tsx

@@ -1,84 +1,127 @@
-import React, { AnchorHTMLAttributes, ElementType, forwardRef } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  ElementType,
+  forwardRef,
+  useCallback,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 
-export interface BaseLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  component?: ElementType;
+type AnchorishProps = {
+  href?: string;
+  onClick?: React.MouseEventHandler;
+  tabIndex?: number;
+};
+
+function isAnchorProps(props: unknown): props is AnchorishProps {
+  return (
+    typeof (props as AnchorishProps).href === 'string' ||
+    'onClick' in (props as object)
+  );
+}
+
+type BaseLinkOwnProps = {
   size?: 'small' | 'default';
   noVisited?: boolean;
   disabled?: boolean;
   testId?: string;
-}
+  className?: string;
+  children?: React.ReactNode;
+  to?: string;
+};
+
+type PolymorphicRef<C extends ElementType> =
+  React.ComponentPropsWithRef<C>['ref'];
+
+export type BaseLinkProps<C extends ElementType = 'a'> = BaseLinkOwnProps & {
+  component?: C;
+} & Omit<
+    ComponentPropsWithoutRef<C>,
+    keyof BaseLinkOwnProps | 'component' | 'disabled'
+  >;
 
 const NAME = 'ucl-uikit-base-link';
 
-const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkProps>(
-  (
-    {
-      testId = NAME,
-      className,
-      children,
-      size = 'default',
-      disabled = false,
-      component: Component = 'a',
-      ...props
+type BaseLinkComponent = <C extends ElementType = 'a'>(
+  props: BaseLinkProps<C> & { ref?: PolymorphicRef<C> }
+) => React.JSX.Element;
+
+const BaseLink = forwardRef(function BaseLinkInner(
+  {
+    testId = NAME,
+    className,
+    children,
+    size = 'default',
+    disabled = false,
+    component,
+    to,
+    ...props
+  }: BaseLinkProps<ElementType>,
+  ref: React.Ref<Element>
+) {
+  const [theme] = useTheme();
+  const Component = (component || 'a') as ElementType;
+  const anchorProps = isAnchorProps(props) ? props : {};
+  const { href, onClick, ...rest } = anchorProps;
+
+  const isAnchor = Component === 'a';
+
+  const disabledHandleClick = useCallback(
+    (ev: React.MouseEvent<HTMLAnchorElement>) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return false;
     },
-    ref
-  ) => {
-    const [theme] = useTheme();
-
-    const baseStyle = css`
-      font-family: ${theme.font.family.primary};
-      font-size: ${theme.font.size.f16};
-
-      &:focus-visible {
-        outline: none;
-        box-shadow: ${theme.boxShadow.focus};
-      }
-    `;
-
-    const smallStyle = css`
-      font-size: ${theme.font.size.f14};
-    `;
-
-    const disabledStyle = css`
-      cursor: not-allowed;
-      color: ${theme.color.link.disabled};
-
-      &:hover {
-        color: ${theme.color.link.disabled};
-      }
-    `;
-
-    const style = cx(
-      NAME,
-      baseStyle,
-      size === 'small' && smallStyle,
-      disabled && disabledStyle,
-      className
-    );
-
-    return (
-      <Component
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        disabled={disabled}
-        href={disabled ? undefined : props.href}
-        onClick={
-          disabled
-            ? (ev: React.MouseEvent) => {
-                ev.preventDefault();
-                return false;
-              }
-            : props.onClick
-        }
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+    []
+  );
+
+  const baseStyle = css`
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const smallStyle = css`
+    font-size: ${theme.font.size.f14};
+  `;
+
+  const disabledStyle = css`
+    cursor: not-allowed;
+    color: ${theme.colour.link.disabled};
+    pointer-events: none;
+
+    &:hover {
+      color: ${theme.colour.link.disabled};
+    }
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    size === 'small' && smallStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <Component
+      ref={ref}
+      className={style}
+      data-testid={testId}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : props.tabIndex}
+      href={isAnchor ? (disabled ? undefined : (href ?? to)) : undefined}
+      onClick={disabled ? disabledHandleClick : onClick}
+      {...(isAnchor ? {} : to ? { to } : href ? { href } : {})}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+}) as unknown as BaseLinkComponent;
 
 export default BaseLink;

package/lib/components/Link/Link.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Link from './Link';
 
 const meta = {
-  title: 'Components/Work in progress/Link',
+  title: 'Components/Link',
   component: Link,
   args: {
     children: 'Default link text',

package/lib/components/Link/Link.tsx

@@ -1,126 +1,137 @@
-import { forwardRef } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  ElementType,
+  forwardRef,
+} from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import BaseLink, { BaseLinkProps } from './BaseLink';
 
-export interface LinkProps extends BaseLinkProps {
+type LinkOwnProps = {
   variant?: 'primary' | 'secondary';
-}
+};
+
+export type LinkProps<C extends ElementType = 'a'> = LinkOwnProps &
+  BaseLinkProps<C> &
+  Omit<ComponentPropsWithoutRef<C>, keyof LinkOwnProps>;
 
 const NAME = 'ucl-uikit-link';
 
-const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      noVisited = false,
-      variant = 'primary',
-      disabled = false,
-      testId = NAME,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [theme] = useTheme();
-
-    const baseStyle = css`
-      text-decoration-skip-ink: none;
-      text-decoration-thickness: 10%;
-      text-underline-offset: 25%;
-      text-underline-position: from-font;
-    `;
-
-    const primaryStyle = css`
-      color: ${theme.color.link.default};
-      &:active {
-        color: ${theme.color.link.hover};
-      }
-    `;
-
-    const secondaryStyle = css`
+type LinkComponent = <C extends ElementType = 'a'>(
+  props: LinkProps<C> & { ref?: React.ComponentPropsWithRef<C>['ref'] }
+) => React.JSX.Element;
+
+const Link = forwardRef(function LinkInner(
+  {
+    noVisited = false,
+    variant = 'primary',
+    disabled = false,
+    testId = NAME,
+    className,
+    children,
+    ...props
+  }: LinkProps<ElementType>,
+  ref: React.Ref<Element>
+) {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    text-decoration-skip-ink: none;
+    text-decoration-thickness: 10%;
+    text-underline-offset: 25%;
+    text-underline-position: from-font;
+  `;
+
+  const primaryStyle = css`
+    color: ${theme.colour.link.default};
+    &:active {
+      color: ${theme.colour.link.brandHover};
+    }
+  `;
+
+  // todo: deprecate secondary
+  const secondaryStyle = css`
+    color: ${theme.color.link.secondaryDefault};
+
+    &:active {
+      color: ${theme.color.link.secondaryHover};
+    }
+  `;
+
+  const visitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.visited};
+    }
+  `;
+
+  const primaryNoVisitedStyle = css`
+    &:visited {
+      color: ${theme.colour.link.default};
+    }
+  `;
+
+  const secondaryNoVisitedStyle = css`
+    &:visited {
       color: ${theme.color.link.secondaryDefault};
+    }
+  `;
 
-      &:active {
-        color: ${theme.color.link.secondaryHover};
-      }
-    `;
-
-    const visitedStyle = css`
-      &:visited {
-        color: ${theme.color.link.visited};
-      }
-    `;
-
-    const primaryNoVisitedStyle = css`
-      &:visited {
-        color: ${theme.color.link.default};
-      }
-    `;
-
-    const secondaryNoVisitedStyle = css`
-      &:visited {
-        color: ${theme.color.link.secondaryDefault};
-      }
-    `;
-
-    const primaryHoverStyle = css`
-      &:hover {
-        color: ${theme.color.link.hover};
-      }
-    `;
-
-    const secondaryHoverStyle = css`
-      &:hover {
-        color: ${theme.color.link.secondaryHover};
-      }
-    `;
-
-    const disabledStyle = css`
-      cursor: not-allowed;
-      color: ${theme.color.link.disabled};
-
-      &:hover {
-        color: ${theme.color.link.disabled};
-      }
-    `;
-
-    let variantStyle = undefined;
-    if (variant === 'primary') {
-      variantStyle = cx(
-        primaryStyle,
-        noVisited && !disabled && primaryNoVisitedStyle,
-        !disabled && primaryHoverStyle
-      );
-    } else if (variant === 'secondary') {
-      variantStyle = cx(
-        secondaryStyle,
-        noVisited && !disabled && secondaryNoVisitedStyle,
-        !disabled && secondaryHoverStyle
-      );
+  const primaryHoverStyle = css`
+    &:hover {
+      color: ${theme.colour.link.brandHover};
     }
+  `;
 
-    const style = cx(
-      NAME,
-      baseStyle,
-      variantStyle,
-      !noVisited && !disabled && visitedStyle,
-      disabled && disabledStyle,
-      className
-    );
+  const secondaryHoverStyle = css`
+    &:hover {
+      color: ${theme.color.link.secondaryHover};
+    }
+  `;
 
-    return (
-      <BaseLink
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </BaseLink>
+  const disabledStyle = css`
+    cursor: not-allowed;
+    color: ${theme.colour.link.disabled};
+
+    &:hover {
+      color: ${theme.colour.link.disabled};
+    }
+  `;
+
+  let variantStyle: string | undefined = undefined;
+  if (variant === 'primary') {
+    variantStyle = cx(
+      primaryStyle,
+      noVisited && !disabled && primaryNoVisitedStyle,
+      !disabled && primaryHoverStyle
+    );
+  } else if (variant === 'secondary') {
+    variantStyle = cx(
+      secondaryStyle,
+      noVisited && !disabled && secondaryNoVisitedStyle,
+      !disabled && secondaryHoverStyle
     );
   }
-);
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    variantStyle,
+    !noVisited && !disabled && visitedStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <BaseLink
+      ref={ref}
+      className={style}
+      testId={testId}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </BaseLink>
+  );
+}) as unknown as LinkComponent;
 
 export default Link;

package/lib/components/Link/__tests__/__snapshots__/link.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-link css-145ds9b"
+  class="ucl-uikit-base-link ucl-uikit-link css-x04ks2"
   data-testid="ucl-uikit-link"
 >
   test
@@ -11,7 +11,7 @@ exports[`Link > snapshot: no props 1`] = `
 
 exports[`Link > snapshot: testId prop 1`] = `
 <a
-  class="ucl-uikit-base-link ucl-uikit-link css-145ds9b"
+  class="ucl-uikit-base-link ucl-uikit-link css-x04ks2"
   data-testid="test123"
 >
    testidlink 

package/lib/components/MenuNew/Menu.context.tsx

@@ -0,0 +1,149 @@
+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<HTMLDivElement | null>;
+}
+
+export const AppMenuContext = createContext({} as IContext);
+
+export const useAppMenu = () => useContext(AppMenuContext);
+
+const MenuProvider = ({
+  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<HTMLDivElement>(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(() => {
+    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"], [aria-label="Close menu"]'
+        )
+      ).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 MenuProvider;