uikit-react-public 0.11.13

package/lib/components/Menu/MenuContent.tsx

@@ -0,0 +1,137 @@
+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<HTMLDivElement> {
+  title?: string;
+  testId?: string;
+}
+
+const MenuContent: React.FC<MenuContentProps> = ({
+  title,
+  testId = NAME,
+  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;
+    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} 0 ${padding.p72};
+    }
+  `;
+
+  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
+          role='menuitem'
+          onClick={toggleMenu}
+        >
+          <Icon.X size={40} />
+        </IconButton>
+      </header>
+      <div
+        role='menu'
+        aria-labelledby='app-menu-button'
+        className={bodyStyle}
+        data-testid={testId}
+        tabIndex={-1}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  );
+
+  return !isDesktop ? createPortal(menuContent, document.body) : menuContent;
+};
+
+export default memo(MenuContent);

package/lib/components/Menu/MenuItem.tsx

@@ -0,0 +1,84 @@
+import React, { LiHTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-uikit-menu__item';
+
+export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  testId?: string;
+  icon?: React.ReactNode;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  testId = NAME,
+  icon,
+  children,
+  className,
+  onClick,
+  ...props
+}) => {
+  const isClickable = !!onClick;
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    height: 40px;
+    margin-bottom: ${theme.margin.m32};
+    display: flex;
+    align-items: center;
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    font-weight: ${theme.font.weight.bold};
+    color: ${theme.color.text.secondary};
+  `;
+
+  const clickableMenuItemStyle = css`
+    color: ${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}
+    </li>
+  );
+};
+
+export default memo(MenuItem);

package/lib/components/Menu/MenuSection.tsx

@@ -0,0 +1,46 @@
+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<HTMLElement> {
+  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 (
+    <section
+      className={style}
+      {...props}
+    >
+      <ul className={listStyle}>{children}</ul>
+    </section>
+  );
+};
+
+export default MenuSection;

package/lib/components/Menu/MenuTrigger.tsx

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

package/lib/components/Menu/index.ts

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

package/lib/components/Modal/Modal.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+import Button from '../Button/Button';
+import Text from '../Paragraph/Paragraph';
+
+const meta = {
+  title: 'Components/Deprecated/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen', // Modal takes care of its own placement
+  },
+  args: {
+    children: 'Default modal text',
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <Modal>{args.children}</Modal>,
+};
+
+export const Centered: Story = {
+  render: (args) => <Modal centered>{args.children}</Modal>,
+};
+
+export const WithContentInside: Story = {
+  name: 'With content inside',
+  args: {
+    children: (
+      <>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabit ur
+          fringilla metus vitae accumsan imperdiet. Mauris enim nisl, aliquet ut
+          lobortis a, fermentum id enim. In consectetur sagittis ex, sit amet
+          mollis augue.
+        </Text>
+        <Button>OK</Button>
+      </>
+    ),
+  },
+  render: (args) => (
+    <Modal>
+      <Text>{args.children}</Text>
+    </Modal>
+  ),
+};

package/lib/components/Modal/Modal.tsx

@@ -0,0 +1,107 @@
+import {
+  HTMLAttributes,
+  forwardRef,
+  memo,
+  useCallback,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import Blanket from '../Blanket';
+
+export const NAME = 'ucl-modal';
+
+export interface ModalProps
+  extends HTMLAttributes<HTMLDivElement> {
+  centered?: boolean;
+  closeOnClickOutside?: boolean;
+  onClose?: () => void;
+  testId?: string;
+}
+
+export type Ref = HTMLDivElement;
+
+const Modal = forwardRef<Ref, ModalProps>(
+  (
+    {
+      centered = false,
+      closeOnClickOutside = true,
+      onClose,
+      testId = NAME,
+      className,
+      children,
+      ...props
+    }: ModalProps,
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const positioningBaseStyle = css`
+      margin: ${theme.margin.m32} auto;
+      max-width: 600px;
+      font-family: ${theme.font.family.primary};
+      font-size: ${theme.font.size.f16};
+      color: ${theme.color.text.primary};
+      pointer-events: none;
+    `;
+
+    const positioningVerticallyCentredStyle = css`
+      min-height: calc(100% - ${theme.margin.m64});
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    `;
+
+    const positioningStyle = cx(
+      NAME,
+      positioningBaseStyle,
+      centered && positioningVerticallyCentredStyle,
+      className
+    );
+
+    const dialogStyle = css`
+      position: relative;
+      background-clip: padding-box;
+      background-color: ${theme.color.neutral.white};
+      box-shadow: ${theme.boxShadow.x2y4};
+      outline: 0;
+      pointer-events: auto;
+    `;
+
+    const handleOutsideDialogClick = useCallback(
+      (ev: React.MouseEvent<HTMLDivElement>) => {
+        if (ev.target === ev.currentTarget && onClose) {
+          onClose();
+        }
+      },
+      [onClose]
+    );
+
+    return (
+      <Blanket
+        className={className}
+        onClick={
+          closeOnClickOutside
+            ? handleOutsideDialogClick
+            : undefined
+        }
+      >
+        <div
+          className={positioningStyle}
+          {...props}
+        >
+          <div
+            role='dialog'
+            aira-modal='true'
+            ref={ref}
+            data-testid={testId}
+            className={dialogStyle}
+          >
+            {children}
+          </div>
+        </div>
+      </Blanket>
+    );
+  }
+);
+
+export default memo(Modal);

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

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

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

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Modal > snapshot: default 1`] = `
+<div
+  aria-hidden="true"
+  aria-label="Backdrop overlay, click to close modal"
+  class="ucl-blanket css-gsa5om"
+  data-testid="ucl-blanket"
+>
+  <div
+    class="ucl-modal css-n1zjuh"
+  >
+    <div
+      aira-modal="true"
+      class="css-fjo1in"
+      data-testid="ucl-modal"
+      role="dialog"
+    />
+  </div>
+</div>
+`;

package/lib/components/Modal/index.ts

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