uikit-react-public 0.24.5 → 0.25.1

package/lib/components/Text/Text.tsx

@@ -0,0 +1,171 @@
+import { HTMLAttributes, Ref, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-uikit-text';
+
+export type TextLevel =
+  | 'lg'
+  | 'lg-medium'
+  | 'lg-semibold'
+  | 'lg-bold'
+  | 'md'
+  | 'md-medium'
+  | 'md-semibold'
+  | 'md-medium-numeric'
+  | 'sm'
+  | 'sm-medium'
+  | 'sm-semibold'
+  | 'xs'
+  | 'xs-medium';
+
+export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
+  level?: TextLevel;
+  testId?: string;
+  ref?: Ref<HTMLSpanElement>;
+}
+
+const Text = ({
+  level = 'md',
+  testId = NAME,
+  className,
+  ref,
+  ...props
+}: TextProps) => {
+  const [theme] = useTheme();
+
+  const {
+    typography: {
+      body: {
+        lg,
+        lgMedium,
+        lgSemibold,
+        lgBold,
+        md,
+        mdMedium,
+        mdSemibold,
+        mdMediumNumeric,
+        sm,
+        smMedium,
+        smSemibold,
+        xs,
+        xsMedium,
+      },
+    },
+  } = theme;
+
+  const baseStyle = css`
+    font-family: ${md.fontFamily};
+    font-feature-settings: ${md.fontSettings};
+    color: ${theme.colour.text.default};
+    margin: 0;
+  `;
+
+  const lgStyle = css`
+    font-size: ${lg.fontSize}px;
+    font-weight: ${lg.fontWeight};
+    line-height: ${lg.lineHeight}%;
+  `;
+
+  const lgMediumStyle = css`
+    font-size: ${lgMedium.fontSize}px;
+    font-weight: ${lgMedium.fontWeight};
+    line-height: ${lgMedium.lineHeight}%;
+  `;
+
+  const lgSemiboldStyle = css`
+    font-size: ${lgSemibold.fontSize}px;
+    font-weight: ${lgSemibold.fontWeight};
+    line-height: ${lgSemibold.lineHeight}%;
+  `;
+
+  const lgBoldStyle = css`
+    font-size: ${lgBold.fontSize}px;
+    font-weight: ${lgBold.fontWeight};
+    line-height: ${lgBold.lineHeight}%;
+  `;
+
+  const mdStyle = css`
+    font-size: ${md.fontSize}px;
+    font-weight: ${md.fontWeight};
+    line-height: ${md.lineHeight}%;
+  `;
+
+  const mdMediumStyle = css`
+    font-size: ${mdMedium.fontSize}px;
+    font-weight: ${mdMedium.fontWeight};
+    line-height: ${mdMedium.lineHeight}%;
+  `;
+
+  const mdSemiboldStyle = css`
+    font-size: ${mdSemibold.fontSize}px;
+    font-weight: ${mdSemibold.fontWeight};
+    line-height: ${mdSemibold.lineHeight}%;
+  `;
+
+  const mdMediumNumericStyle = css`
+    font-size: ${mdMediumNumeric.fontSize}px;
+    font-weight: ${mdMediumNumeric.fontWeight};
+    line-height: ${mdMediumNumeric.lineHeight}%;
+  `;
+
+  const smStyle = css`
+    font-size: ${sm.fontSize}px;
+    font-weight: ${sm.fontWeight};
+    line-height: ${sm.lineHeight}%;
+  `;
+
+  const smMediumStyle = css`
+    font-size: ${smMedium.fontSize}px;
+    font-weight: ${smMedium.fontWeight};
+    line-height: ${smMedium.lineHeight}%;
+  `;
+
+  const smSemiboldStyle = css`
+    font-size: ${smSemibold.fontSize}px;
+    font-weight: ${smSemibold.fontWeight};
+    line-height: ${smSemibold.lineHeight}%;
+  `;
+
+  const xsStyle = css`
+    font-size: ${xs.fontSize}px;
+    font-weight: ${xs.fontWeight};
+    line-height: ${xs.lineHeight}%;
+  `;
+
+  const xsMediumStyle = css`
+    font-size: ${xsMedium.fontSize}px;
+    font-weight: ${xsMedium.fontWeight};
+    line-height: ${xsMedium.lineHeight}%;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    level === 'lg' && lgStyle,
+    level === 'lg-medium' && lgMediumStyle,
+    level === 'lg-semibold' && lgSemiboldStyle,
+    level === 'lg-bold' && lgBoldStyle,
+    level === 'md' && mdStyle,
+    level === 'md-medium' && mdMediumStyle,
+    level === 'md-semibold' && mdSemiboldStyle,
+    level === 'md-medium-numeric' && mdMediumNumericStyle,
+    level === 'sm' && smStyle,
+    level === 'sm-medium' && smMediumStyle,
+    level === 'sm-semibold' && smSemiboldStyle,
+    level === 'xs' && xsStyle,
+    level === 'xs-medium' && xsMediumStyle,
+    className
+  );
+
+  return (
+    <span
+      ref={ref}
+      className={style}
+      data-testid={testId}
+      {...props}
+    />
+  );
+};
+
+export default memo(Text);

package/lib/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Text';
+export type { TextProps, TextLevel } from './Text';

package/lib/components/index.ts

@@ -52,10 +52,8 @@ export type { ParagraphProps } from './Paragraph';
 export { default as ParagraphNew } from './Paragraph';
 export type { ParagraphProps as ParagraphNewProps } from './Paragraph';
 
-// TODO: Remove aliased export in future breaking release
-// <Paragraph> will be used in place of <Text> in the future
-export { default as Text } from './Paragraph';
-export type { TextProps } from './Paragraph';
+export { default as Text } from './Text';
+export type { TextProps, TextLevel } from './Text';
 
 export { default as Modal } from './Modal';
 export type { ModalProps } from './Modal';
@@ -93,9 +91,6 @@ export type { MenuProps } from './Menu';
 export { default as MenuNew } from './MenuNew';
 export type { MenuProps as MenuNewProps } from './MenuNew';
 
-export { default as SimpleMenu } from './SimpleMenu';
-export type { SimpleMenuProps } from './SimpleMenu';
-
 export { default as Select } from './Select';
 export type { SelectProps } from './Select';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.24.5",
+  "version": "0.25.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/MenuNew/Menu.context.d.ts

@@ -1,14 +0,0 @@
-import { default as React } from 'react';
-interface IContext {
-    isOpen: boolean;
-    toggleMenu: () => void;
-    triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-}
-export declare const AppMenuContext: React.Context<IContext>;
-export declare const useAppMenu: () => IContext;
-declare const MenuProvider: ({ defaultOpen, children, }: {
-    defaultOpen?: boolean;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MenuProvider;

package/dist/components/MenuNew/MenuContent.d.ts

@@ -1,9 +0,0 @@
-import { default as React, HTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-menu__content";
-export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
-    title?: string;
-    testId?: string;
-    position?: 'left' | 'right';
-}
-declare const _default: React.NamedExoticComponent<MenuContentProps>;
-export default _default;

package/dist/components/MenuNew/MenuItem.d.ts

@@ -1,10 +0,0 @@
-import { default as React, LiHTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-menu__item";
-export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
-    testId?: string;
-    icon?: React.ReactNode;
-    secondary?: boolean;
-    externalLink?: boolean;
-}
-declare const _default: React.NamedExoticComponent<MenuItemProps>;
-export default _default;

package/dist/components/MenuNew/MenuSection.d.ts

@@ -1,7 +0,0 @@
-import { default as React, HTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-menu__section";
-export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
-    testId?: string;
-}
-declare const MenuSection: React.FC<MenuSectionProps>;
-export default MenuSection;

package/dist/components/MenuNew/trigger/ButtonMenuTrigger.d.ts

@@ -1,8 +0,0 @@
-import { IconButtonProps } from '../../IconButton';
-export declare const NAME = "ucl-uikit-menu__trigger--button";
-export declare const DEFAULT_ARIA_LABEL = "Menu button";
-export interface ButtonMenuTriggerProps extends IconButtonProps {
-    ariaLabel?: string;
-}
-declare const _default: import('react').MemoExoticComponent<({ id, ariaLabel, className, ...props }: ButtonMenuTriggerProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/MenuNew/trigger/IconMenuTrigger.d.ts

@@ -1,8 +0,0 @@
-import { IconButtonProps } from '../../IconButton';
-export declare const NAME = "ucl-uikit-menu__trigger--icon";
-export declare const DEFAULT_ARIA_LABEL = "Menu button";
-export interface IconMenuTriggerProps extends IconButtonProps {
-    ariaLabel?: string;
-}
-declare const _default: import('react').MemoExoticComponent<({ id, ariaLabel, className, ...props }: IconMenuTriggerProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/SimpleMenu/SimpleMenu.d.ts

@@ -1,7 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-simple-menu";
-export interface SimpleMenuProps extends HTMLAttributes<HTMLUListElement> {
-    testId?: string;
-}
-declare const _default: import('react').MemoExoticComponent<({ testId, className, children, ...props }: SimpleMenuProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/SimpleMenu/index.d.ts

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

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

@@ -1,149 +0,0 @@
-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;

package/lib/components/MenuNew/MenuContent.tsx

@@ -1,140 +0,0 @@
-import React, { HTMLAttributes, memo, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { css, cx } from '@emotion/css';
-import useTheme from '../../theme/useTheme';
-import useMediaQuery from '../../hooks/useMediaQuery';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import { useAppMenu } from './Menu.context';
-
-export const NAME = 'ucl-uikit-menu__content';
-
-export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
-  title?: string;
-  testId?: string;
-  position?: 'left' | 'right';
-}
-
-const MenuContent: React.FC<MenuContentProps> = ({
-  title,
-  testId = NAME,
-  position = 'right',
-  children,
-  className,
-  ...props
-}) => {
-  const { isOpen, contentRef, toggleMenu } = useAppMenu();
-
-  const [theme] = useTheme();
-
-  const { padding } = theme;
-
-  const isDesktop = useMediaQuery(
-    `(min-width: ${theme.breakpoints.desktop}px)`
-  );
-
-  const baseStyle = css`
-    display: none;
-    z-index: 100;
-    ${position === 'left' ? 'left: 0;' : 'right: 0;'}
-    white-space: nowrap;
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
-
-    position: fixed;
-    height: 100vh;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
-    min-width: 100%;
-
-    a {
-      height: auto;
-    }
-
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      position: absolute;
-      height: auto;
-      min-width: 600px;
-      border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
-      box-shadow: ${theme.boxShadow.y1};
-    }
-  `;
-
-  const openStyle = css`
-    display: block;
-  `;
-
-  const style = cx(NAME, baseStyle, isOpen && openStyle, className);
-
-  const headerStyle = css`
-    display: flex;
-    justify-content: space-between;
-    padding: ${padding.p64} ${padding.p24} ${padding.p16};
-
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      padding: ${padding.p32} ${padding.p48} ${padding.p16} ${padding.p64};
-      justify-content: flex-end;
-    }
-  `;
-
-  const titleStyle = css`
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      display: none;
-    }
-  `;
-
-  const bodyStyle = css`
-    padding: 0 ${padding.p24};
-    list-style: none;
-
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      margin: 0 ${padding.p64};
-      padding: 0;
-    }
-  `;
-
-  useEffect(() => {
-    const rootDiv = document.getElementById('root');
-    if (rootDiv) {
-      if (!isDesktop && isOpen) {
-        rootDiv.style.display = 'none';
-      } else {
-        rootDiv.style.display = '';
-      }
-    }
-  }, [isOpen, isDesktop]);
-
-  const menuContent = (
-    <div
-      ref={contentRef}
-      className={style}
-    >
-      <header className={headerStyle}>
-        <h3 className={titleStyle}>{title}</h3>
-        <IconButton
-          onClick={toggleMenu}
-          aria-label='Close menu'
-        >
-          <Icon.X size={40} />
-        </IconButton>
-      </header>
-      <ul
-        role='menu'
-        aria-labelledby='app-menu-button'
-        className={bodyStyle}
-        data-testid={testId}
-        tabIndex={-1}
-        {...props}
-      >
-        {children}
-      </ul>
-    </div>
-  );
-
-  return !isDesktop ? createPortal(menuContent, document.body) : menuContent;
-};
-
-export default memo(MenuContent);

package/lib/components/MenuNew/MenuItem.tsx

@@ -1,101 +0,0 @@
-import React, { LiHTMLAttributes, memo } from 'react';
-import { css, cx } from '@emotion/css';
-import useTheme from '../../theme/useTheme';
-import Icon from '../Icon/Icon';
-
-export const NAME = 'ucl-uikit-menu__item';
-
-export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
-  testId?: string;
-  icon?: React.ReactNode;
-  secondary?: boolean;
-  externalLink?: boolean;
-}
-
-const MenuItem: React.FC<MenuItemProps> = ({
-  testId = NAME,
-  icon,
-  children,
-  className,
-  onClick,
-  secondary,
-  externalLink,
-  ...props
-}) => {
-  const isClickable = !!onClick;
-  const [theme] = useTheme();
-
-  const baseStyle = css`
-    height: 40px;
-    margin-bottom: ${theme.margin.m16};
-    display: flex;
-    align-items: center;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
-    font-weight: ${secondary
-      ? `${theme.font.weight.medium}`
-      : `${theme.font.weight.bold}`};
-    color: ${theme.color.text.secondary};
-  `;
-
-  const clickableMenuItemStyle = css`
-    color: ${secondary
-      ? `${theme.color.text.secondary}`
-      : `${theme.color.text.primary}`};
-    cursor: pointer;
-    &:hover {
-      background-color: ${theme.color.interaction.blue5};
-    }
-    &:focus-visible {
-      outline: none;
-      box-shadow: ${theme.boxShadow.focus};
-      z-index: 1;
-    }
-  `;
-
-  const iconContainerStyle = css`
-    display: inline-flex;
-    align-items: center;
-    margin-right: ${theme.margin.m32};
-  `;
-
-  const style = cx(
-    NAME,
-    baseStyle,
-    isClickable && clickableMenuItemStyle,
-    className
-  );
-
-  const content = (
-    <>
-      {React.isValidElement(icon) && (
-        <span className={iconContainerStyle}>{icon}</span>
-      )}
-      {children}
-    </>
-  );
-
-  return (
-    <li
-      tabIndex={isClickable ? 0 : -1}
-      role='menuitem'
-      aria-disabled={!isClickable}
-      className={style}
-      data-testid={testId}
-      onClick={onClick}
-      {...props}
-    >
-      {content}
-      {externalLink && (
-        <Icon.ExternalLink
-          size={16}
-          className={css`
-            margin-left: 8px;
-          `}
-        />
-      )}
-    </li>
-  );
-};
-
-export default memo(MenuItem);