uikit-react-public 0.17.4 → 0.21.9

package/lib/components/MenuNew/Menu.tsx

@@ -0,0 +1,75 @@
+import { HTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import MenuProvider from './Menu.context';
+import MenuContent from './MenuContent';
+import MenuItem from './MenuItem';
+import MenuSection from './MenuSection';
+import ButtonMenuTrigger, { ButtonMenuTriggerProps } from './trigger/ButtonMenuTrigger';
+
+export const NAME = 'ucl-uikit-menu';
+
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+  defaultOpen?: boolean;
+  title?: string;
+  menuId?: string;
+  position?: 'left' | 'right';
+  trigger?: React.ComponentType<ButtonMenuTriggerProps>;
+  testId?: string;
+}
+
+const Menu = ({
+  defaultOpen = false,
+  title,
+  position = 'right',
+  trigger,
+  menuId = NAME,
+  testId = NAME,
+  children,
+  className,
+  ...props
+}: MenuProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    position: relative;
+    font-family: ${theme.font.family.primary};
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const TriggerComp = trigger ?? ButtonMenuTrigger;
+
+  return (
+    <nav
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <MenuProvider defaultOpen={defaultOpen}>
+        <TriggerComp aria-controls={menuId} />
+        <MenuContent
+          id={menuId}
+          title={title}
+          position={position}
+        >
+          {children}
+        </MenuContent>
+      </MenuProvider>
+    </nav>
+  );
+};
+
+export interface IMenuSubComponents {
+  Section: typeof MenuSection;
+  Item: typeof MenuItem;
+}
+
+const MemoMenu = memo(Menu);
+
+const MenuWithSubComponents = MemoMenu as typeof MemoMenu & IMenuSubComponents;
+
+MenuWithSubComponents.Section = MenuSection;
+MenuWithSubComponents.Item = MenuItem;
+
+export default MenuWithSubComponents;

package/lib/components/MenuNew/MenuContent.tsx

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

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

package/lib/components/MenuNew/MenuSection.tsx

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-menu__section';
+
+export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
+  testId?: string;
+}
+
+const MenuSection: React.FC<MenuSectionProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: ${theme.margin.m32};
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid ${theme.color.neutral.grey10};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const listStyle = css`
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  `;
+
+  return (
+    <li
+      role='presentation'
+      className={style}
+      {...props}
+    >
+      <ul className={listStyle}>{children}</ul>
+    </li>
+  );
+};
+
+export default MenuSection;

package/lib/components/MenuNew/index.ts

@@ -0,0 +1,8 @@
+export { default } from './Menu';
+export type { MenuProps } from './Menu';
+
+export { default as MenuContent } from './MenuContent';
+export type { MenuContentProps } from './MenuContent';
+
+export { default as ButtonMenuTrigger } from './trigger/ButtonMenuTrigger';
+export type { ButtonMenuTriggerProps } from './trigger/ButtonMenuTrigger';

package/lib/components/MenuNew/trigger/ButtonMenuTrigger.tsx

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { cx } from '@emotion/css';
+import { IconButtonProps } from '../../IconButton';
+import { useAppMenu } from '../Menu.context';
+import { Button, Icon } from '../..';
+
+export const NAME = 'ucl-uikit-menu__trigger--button';
+export const DEFAULT_ARIA_LABEL = 'Menu button';
+
+export interface ButtonMenuTriggerProps extends IconButtonProps {
+  ariaLabel?: string;
+}
+
+const ButtonMenuTrigger = ({
+  id = 'menu-trigger',
+  ariaLabel = DEFAULT_ARIA_LABEL,
+  className,
+  ...props
+}: ButtonMenuTriggerProps) => {
+  const { toggleMenu, isOpen, triggerRef } = useAppMenu();
+
+  const style = cx(NAME, className);
+
+  return (
+    <Button
+      id={id}
+      ref={triggerRef}
+      className={style}
+      size='small'
+      icon={<Icon.Menu />}
+      onClick={toggleMenu}
+      aria-label={ariaLabel}
+      aria-haspopup='true'
+      aria-expanded={isOpen ? 'true' : 'false'}
+      {...props}
+    >
+      Menu
+    </Button>
+  );
+};
+
+export default memo(ButtonMenuTrigger);

package/lib/components/MenuNew/trigger/IconMenuTrigger.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+import { cx } from '@emotion/css';
+import IconButton, { IconButtonProps } from '../../IconButton';
+import { useAppMenu } from '../Menu.context';
+import { Icon } from '../..';
+
+export const NAME = 'ucl-uikit-menu__trigger--icon';
+export const DEFAULT_ARIA_LABEL = 'Menu button';
+
+export interface IconMenuTriggerProps extends IconButtonProps {
+  ariaLabel?: string;
+}
+
+const IconMenuTrigger = ({
+  id = 'menu-trigger',
+  ariaLabel = DEFAULT_ARIA_LABEL,
+  className,
+  ...props
+}: IconMenuTriggerProps) => {
+  const { toggleMenu, isOpen, triggerRef } = useAppMenu();
+
+  const style = cx(NAME, className);
+
+  return (
+    <IconButton
+      id={id}
+      ref={triggerRef}
+      className={style}
+      onClick={toggleMenu}
+      aria-label={ariaLabel}
+      aria-haspopup='true'
+      aria-expanded={isOpen ? 'true' : 'false'}
+      {...props}
+    >
+      <Icon.Menu/>
+    </IconButton>
+  );
+};
+
+export default memo(IconMenuTrigger);

package/lib/components/Pagination/Pagination.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Pagination from './Pagination';
 
 const meta = {
-  title: 'Components/Work in progress/Pagination',
+  title: 'Components/Pagination',
   component: Pagination,
   parameters: {
     docs: {

package/lib/components/Pagination/PaginationControls.tsx

@@ -9,8 +9,7 @@ import { useMediaQuery } from '../../hooks';
 export const NAME = 'ucl-ukit-pagination__controls';
 export const DEFAULT_MAX_BUTTONS = 9;
 
-export interface PaginationControlsProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface PaginationControlsProps extends HTMLAttributes<HTMLDivElement> {
   maxNumberButtons?: number;
   testId?: string;
 }
@@ -123,15 +122,15 @@ const PaginationControls = ({
     pageNumberButtonBaseStyle,
     css`
       border: none;
-      color: ${theme.color.text.secondary};
+      color: ${theme.colour.text.secondary};
     `
   );
 
   const currentPageNumberButtonStyle = cx(
     pageNumberButtonBaseStyle,
     css`
-      color: ${theme.color.interaction.blue70};
-      border-color: ${theme.color.interaction.blue70};
+      color: ${theme.colour.text.brand};
+      border-color: ${theme.colour.border.brand};
     `
   );
 

package/lib/components/Pagination/PaginationInfo.tsx

@@ -5,8 +5,7 @@ import { PaginationContext } from './Pagination';
 
 export const NAME = 'ucl-uikit-pagination__info';
 
-export interface PaginationInfoProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface PaginationInfoProps extends React.HTMLAttributes<HTMLDivElement> {
   format?: 'pages' | 'items';
   itemsPluralName?: string;
   testId?: string;
@@ -42,7 +41,7 @@ const PaginationInfo = ({
   const baseStyle = css`
     margin: ${theme.margin.m16} 0;
     text-align: center;
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
 

package/lib/components/Paragraph/Paragraph.stories.tsx

@@ -18,38 +18,40 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const WithMargins: Story = {
-  name: 'With margins',
+export const LevelLg: Story = {
   args: {
-    margins: true,
-    children: 'This is a paragraph with margins.',
+    level: 'lg',
+    children: 'This is large paragraph text.',
+  },
+};
+
+export const LevelMd: Story = {
+  args: {
+    level: 'md',
+    children: 'This is medium paragraph text.',
+  },
+};
+
+export const LevelSm: Story = {
+  args: {
+    level: 'sm',
+    children: 'This is small paragraph text.',
+  },
+};
+
+export const AsSpan: Story = {
+  args: {
+    as: 'span',
+    level: 'md-semibold',
+    children: 'This paragraph is rendered as a span.',
   },
-  decorators: [
-    (Story) => (
-      <>
-        <div
-          style={{
-            height: '16px',
-            backgroundColor: '#CA0007',
-          }}
-        />
-        <Story />
-        <div
-          style={{
-            height: '16px',
-            backgroundColor: '#CA0007',
-          }}
-        />
-      </>
-    ),
-  ],
 };
 
-export const WithoutMargins: Story = {
-  name: 'Without margins',
+export const NoMargins: Story = {
+  name: 'No margins',
   args: {
-    margins: false,
-    children: 'This is a paragraph without margins.',
+    noMargins: true,
+    children: 'This paragraph has no margins.',
   },
   decorators: [
     (Story) => (