uikit-react-public 0.11.20 → 0.14.21

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

@@ -2,7 +2,7 @@
 
 exports[`Heading > snapshot: custom test id 1`] = `
 <h1
-  class="ucl-heading css-1bjykaw"
+  class="ucl-uikit-heading css-1bjykaw"
   data-testid="custom-test-id"
 >
   This is a test
@@ -11,8 +11,8 @@ exports[`Heading > snapshot: custom test id 1`] = `
 
 exports[`Heading > snapshot: level 1`] = `
 <h1
-  class="ucl-heading css-1bjykaw"
-  data-testid="ucl-heading"
+  class="ucl-uikit-heading css-1bjykaw"
+  data-testid="ucl-uikit-heading"
 >
   Level 1
 </h1>
@@ -20,8 +20,8 @@ exports[`Heading > snapshot: level 1`] = `
 
 exports[`Heading > snapshot: minimal props 1`] = `
 <h1
-  class="ucl-heading css-1bjykaw"
-  data-testid="ucl-heading"
+  class="ucl-uikit-heading css-1bjykaw"
+  data-testid="ucl-uikit-heading"
 >
   This is a test
 </h1>
@@ -29,8 +29,8 @@ exports[`Heading > snapshot: minimal props 1`] = `
 
 exports[`Heading > snapshot: no margins 1`] = `
 <h1
-  class="ucl-heading css-x9klp3"
-  data-testid="ucl-heading"
+  class="ucl-uikit-heading css-x9klp3"
+  data-testid="ucl-uikit-heading"
 >
   No margins
 </h1>

package/lib/components/Label/Label.tsx

@@ -43,8 +43,6 @@ const Label = forwardRef<Ref, LabelProps>(
 
     const baseStyle = css`
       width: 100%;
-      min-width: 50px;
-      max-width: 660px;
       color: ${theme.color.neutral.grey90};
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};

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

@@ -2,7 +2,7 @@
 
 exports[`Label > snapshot: Only required prop (text) 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -12,7 +12,7 @@ exports[`Label > snapshot: Only required prop (text) 1`] = `
 
 exports[`Label > snapshot: className prop 1`] = `
 <label
-  class="ucl-uikit-label test-class-name css-v576g6"
+  class="ucl-uikit-label test-class-name css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -22,7 +22,7 @@ exports[`Label > snapshot: className prop 1`] = `
 
 exports[`Label > snapshot: testId prop 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="test123"
   for=""
 >
@@ -32,7 +32,7 @@ exports[`Label > snapshot: testId prop 1`] = `
 
 exports[`Label > snapshot: type prop with explicit block value 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -42,7 +42,7 @@ exports[`Label > snapshot: type prop with explicit block value 1`] = `
 
 exports[`Label > snapshot: type prop with inline value 1`] = `
 <label
-  class="ucl-uikit-label css-qmiqiq"
+  class="ucl-uikit-label css-11raiub"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -52,7 +52,7 @@ exports[`Label > snapshot: type prop with inline value 1`] = `
 
 exports[`Label > snapshot: with disabled prop 1`] = `
 <label
-  class="ucl-uikit-label css-2pe9mc"
+  class="ucl-uikit-label css-19nek55"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -62,7 +62,7 @@ exports[`Label > snapshot: with disabled prop 1`] = `
 
 exports[`Label > snapshot: with optional prop 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >

package/lib/components/Link/BaseLink.tsx

@@ -0,0 +1,84 @@
+import React, { AnchorHTMLAttributes, ElementType, forwardRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export interface BaseLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  component?: ElementType;
+  size?: 'small' | 'default';
+  noVisited?: boolean;
+  disabled?: boolean;
+  testId?: string;
+}
+
+const NAME = 'ucl-uikit-base-link';
+
+const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkProps>(
+  (
+    {
+      testId = NAME,
+      className,
+      children,
+      size = 'default',
+      disabled = false,
+      component: Component = 'a',
+      ...props
+    },
+    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>
+    );
+  }
+);
+
+export default BaseLink;

package/lib/components/Link/Link.tsx

@@ -1,36 +1,23 @@
-import {
-  memo,
-  forwardRef,
-  AnchorHTMLAttributes,
-  ElementType,
-  ComponentPropsWithRef,
-} from 'react';
+import { forwardRef } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../../theme';
+import useTheme from '../../theme/useTheme';
+import BaseLink, { BaseLinkProps } from './BaseLink';
 
-export const NAME = 'ucl-link';
-
-export interface LinkBaseProps {
-  noVisited?: boolean;
-  testId?: string;
-  component?: ElementType;
+export interface LinkProps extends BaseLinkProps {
+  variant?: 'primary' | 'secondary';
 }
 
-export type LinkProps<C extends ElementType = 'a'> = LinkBaseProps &
-  (C extends 'a'
-    ? AnchorHTMLAttributes<HTMLAnchorElement>
-    : Omit<ComponentPropsWithRef<C>, keyof LinkBaseProps>);
-
-export type Ref = HTMLAnchorElement;
+const NAME = 'ucl-uikit-link';
 
-const Link = forwardRef<Ref, LinkProps>(
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (
     {
       noVisited = false,
+      variant = 'primary',
+      disabled = false,
       testId = NAME,
       className,
       children,
-      component: Component = 'a',
       ...props
     },
     ref
@@ -38,15 +25,24 @@ const Link = forwardRef<Ref, LinkProps>(
     const [theme] = useTheme();
 
     const baseStyle = css`
-      color: ${theme.color.link.default};
-      font-family: ${theme.font.family.primary};
+      text-decoration-skip-ink: none;
+      text-decoration-thickness: 10%;
+      text-underline-offset: 25%;
+      text-underline-position: from-font;
+    `;
 
-      &:hover {
+    const primaryStyle = css`
+      color: ${theme.color.link.default};
+      &:active {
         color: ${theme.color.link.hover};
       }
+    `;
+
+    const secondaryStyle = css`
+      color: ${theme.color.link.secondaryDefault};
 
       &:active {
-        color: ${theme.color.link.visited};
+        color: ${theme.color.link.secondaryHover};
       }
     `;
 
@@ -56,31 +52,75 @@ const Link = forwardRef<Ref, LinkProps>(
       }
     `;
 
-    const noVisitedStyle = css`
+    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 style = cx(
       NAME,
       baseStyle,
-      !noVisited && visitedStyle,
-      noVisited && noVisitedStyle,
+      variantStyle,
+      !noVisited && !disabled && visitedStyle,
+      disabled && disabledStyle,
       className
     );
 
     return (
-      <Component
+      <BaseLink
         ref={ref}
         className={style}
         data-testid={testId}
+        disabled={disabled}
         {...props}
       >
         {children}
-      </Component>
+      </BaseLink>
     );
   }
 );
 
-export default memo(Link);
+export default Link;

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

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

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

@@ -12,9 +12,7 @@ describe('Link', () => {
         <Link>test</Link>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: testId prop', () => {
@@ -23,9 +21,7 @@ describe('Link', () => {
         <Link testId='test123'> testidlink </Link>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   // // Interaction tests
@@ -36,7 +32,8 @@ describe('Link', () => {
         <Link> testidlink </Link>
       </ThemeContextProvider>
     );
-    const link = screen.getByTestId('ucl-link');
+
+    const link = screen.getByTestId('ucl-uikit-link');
     expect(link).toBeDefined();
   });
 
@@ -56,12 +53,8 @@ describe('Link', () => {
         <Link href='/testlink'>linktext</Link>
       </ThemeContextProvider>
     );
-    const link = screen.getByRole(
-      'link'
-    ) as HTMLAnchorElement;
+    const link = screen.getByRole('link') as HTMLAnchorElement;
     expect(link.textContent).toBe('linktext');
-    expect(link.href).toBe(
-      'http://localhost:3000/testlink'
-    );
+    expect(link.href).toBe('http://localhost:3000/testlink');
   });
 });

package/lib/components/Link/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Link';
-export type { LinkProps, LinkBaseProps } from './Link';
+export type { LinkProps } from './Link';

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

@@ -68,7 +68,9 @@ const MenuProvider = ({
       if (!isOpen || !contentRef.current) return;
 
       const focusableElements = Array.from(
-        contentRef.current.querySelectorAll('[role="menuitem"]')
+        contentRef.current.querySelectorAll(
+          '[role="menuitem"], [aria-label="Close menu"]'
+        )
       ).filter((el) => {
         const element = el as HTMLElement;
         return (

package/lib/components/Menu/Menu.tsx

@@ -14,11 +14,13 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   title?: string;
   menuId?: string;
   testId?: string;
+  position?: 'left' | 'right';
 }
 
 const Menu = ({
   defaultOpen = false,
   title,
+  position = 'right',
   menuId = NAME,
   testId = NAME,
   children,
@@ -35,7 +37,7 @@ const Menu = ({
   const style = cx(NAME, baseStyle, className);
 
   return (
-    <div
+    <nav
       className={style}
       data-testid={testId}
       {...props}
@@ -45,11 +47,12 @@ const Menu = ({
         <MenuContent
           id={menuId}
           title={title}
+          position={position}
         >
           {children}
         </MenuContent>
       </MenuProvider>
-    </div>
+    </nav>
   );
 };
 

package/lib/components/Menu/MenuContent.tsx

@@ -9,14 +9,16 @@ import { useAppMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__content';
 
-export interface MenuContentProps extends HTMLAttributes<HTMLDivElement> {
+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
@@ -34,7 +36,7 @@ const MenuContent: React.FC<MenuContentProps> = ({
   const baseStyle = css`
     display: none;
     z-index: 100;
-    right: 0;
+    ${position === 'left' ? 'left: 0;' : 'right: 0;'}
     white-space: nowrap;
     background-color: ${theme.color.neutral.white};
     color: ${theme.color.text.primary};
@@ -89,7 +91,8 @@ const MenuContent: React.FC<MenuContentProps> = ({
     list-style: none;
 
     @media (min-width: ${theme.breakpoints.desktop}px) {
-      margin: 0 ${padding.p64} 0 ${padding.p72};
+      margin: 0 ${padding.p64};
+      padding: 0;
     }
   `;
 
@@ -112,13 +115,13 @@ const MenuContent: React.FC<MenuContentProps> = ({
       <header className={headerStyle}>
         <h3 className={titleStyle}>{title}</h3>
         <IconButton
-          role='menuitem'
           onClick={toggleMenu}
+          aria-label='Close menu'
         >
           <Icon.X size={40} />
         </IconButton>
       </header>
-      <div
+      <ul
         role='menu'
         aria-labelledby='app-menu-button'
         className={bodyStyle}
@@ -127,7 +130,7 @@ const MenuContent: React.FC<MenuContentProps> = ({
         {...props}
       >
         {children}
-      </div>
+      </ul>
     </div>
   );
 

package/lib/components/Menu/MenuItem.tsx

@@ -1,12 +1,15 @@
 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> = ({
@@ -15,6 +18,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
   children,
   className,
   onClick,
+  secondary,
+  externalLink,
   ...props
 }) => {
   const isClickable = !!onClick;
@@ -22,17 +27,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
 
   const baseStyle = css`
     height: 40px;
-    margin-bottom: ${theme.margin.m32};
+    margin-bottom: ${theme.margin.m16};
     display: flex;
     align-items: center;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    font-weight: ${theme.font.weight.bold};
+    font-weight: ${secondary
+      ? `${theme.font.weight.medium}`
+      : `${theme.font.weight.bold}`};
     color: ${theme.color.text.secondary};
   `;
 
   const clickableMenuItemStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${secondary
+      ? `${theme.color.text.secondary}`
+      : `${theme.color.text.primary}`};
     cursor: pointer;
     &:hover {
       background-color: ${theme.color.interaction.blue5};
@@ -77,6 +86,14 @@ const MenuItem: React.FC<MenuItemProps> = ({
       {...props}
     >
       {content}
+      {externalLink && (
+        <Icon.ExternalLink
+          size={16}
+          className={css`
+            margin-left: 8px;
+          `}
+        />
+      )}
     </li>
   );
 };

package/lib/components/Menu/MenuSection.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-menu__section';
 
-export interface MenuSectionProps extends HTMLAttributes<HTMLElement> {
+export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
   testId?: string;
 }
 
@@ -34,12 +34,13 @@ const MenuSection: React.FC<MenuSectionProps> = ({
   `;
 
   return (
-    <section
+    <li
+      role='presentation'
       className={style}
       {...props}
     >
       <ul className={listStyle}>{children}</ul>
-    </section>
+    </li>
   );
 };
 

package/lib/components/Pagination/PaginationControls.tsx

@@ -102,7 +102,7 @@ const PaginationControls = ({
   return (
     <nav
       className={style}
-      aria-label='Pagination'
+      aria-label={`Pagination, ${totalPages} pages total`}
       data-testid={testId}
     >
       <ul className={listStyle}>
@@ -140,8 +140,6 @@ const PaginationControls = ({
                     variant='secondary'
                     aria-label={`Page ${page}, current page`}
                     aria-current='page'
-                    aria-setsize={totalPages}
-                    aria-posinset={page}
                     disabled
                     onClick={() => handlePageChange(page)}
                   >

package/lib/components/Search/Search.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+
+const meta = {
+  title: 'Components/Ready to use/Search',
+  component: Search,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    placeholder: { control: { type: 'text' } },
+    disabled: { control: { type: 'boolean' } },
+    testId: { control: { type: 'text' } },
+    onSearch: { action: 'searched' },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Search>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search...',
+  },
+  render: (args) => <Search {...args} />,
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Search (disabled)',
+    disabled: true,
+  },
+  render: (args) => <Search {...args} />,
+};
+
+export const WithPlaceholder: Story = {
+  name: 'With custom placeholder',
+  args: {
+    placeholder: 'Type to filter results',
+  },
+  render: (args) => <Search {...args} />,
+};