uikit-react-public 0.11.24 → 0.14.21

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

@@ -37,7 +37,7 @@ const Menu = ({
   const style = cx(NAME, baseStyle, className);
 
   return (
-    <div
+    <nav
       className={style}
       data-testid={testId}
       {...props}
@@ -52,7 +52,7 @@ const Menu = ({
           {children}
         </MenuContent>
       </MenuProvider>
-    </div>
+    </nav>
   );
 };
 

package/lib/components/Menu/MenuContent.tsx

@@ -9,7 +9,7 @@ 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';
@@ -91,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;
     }
   `;
 
@@ -114,14 +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}
@@ -130,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} />,
+};

package/lib/components/Search/Search.tsx

@@ -0,0 +1,167 @@
+import { HTMLAttributes, useState } from 'react';
+import { css, cx } from '@emotion/css';
+import { Input, Icon, IconButton, InputProps, IconButtonProps } from '../..';
+import useTheme from '../../theme/useTheme';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export interface SearchBaseProps extends HTMLAttributes<HTMLDivElement> {
+  onSearch?: (searchTerms: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  inputProps?: InputProps;
+  clearButtonProps?: IconButtonProps;
+  submitButtonProps?: IconButtonProps;
+  testId?: string;
+}
+
+export type SearchProps = SearchBaseProps & MarginProps;
+
+export const NAME = 'ucl-uikit-search';
+
+const Search = ({
+  placeholder = '',
+  testId = NAME,
+  onSearch,
+  disabled = false,
+  m,
+  mv,
+  mh,
+  mt,
+  mb,
+  ml,
+  mr,
+  noMargins,
+  inputProps,
+  clearButtonProps,
+  submitButtonProps,
+  className,
+  ...props
+}: SearchProps) => {
+  const [searchTerms, setSearchTerms] = useState<string>('');
+  const [theme] = useTheme();
+
+  const handleSearchTermsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerms(e.target.value);
+  };
+
+  const handleClearButtonClick = () => {
+    setSearchTerms('');
+  };
+
+  const handleSearchButtonClick = () => {
+    if (onSearch) {
+      onSearch(searchTerms);
+    }
+  };
+
+  const baseStyle = css`
+    position: relative;
+    height: 48px;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    marginsStyle(
+      {
+        m,
+        mv,
+        mh,
+        mt,
+        mb,
+        ml,
+        mr,
+        noMargins,
+      },
+      theme
+    ),
+    className
+  );
+
+  const inputStyle = css`
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 96px;
+  `;
+
+  const buttonsStyle = css`
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  `;
+
+  const cancelButtonBaseStyle = css`
+    margin-left: ${theme.margin.m12};
+    margin-right: ${theme.margin.m12};
+  `;
+
+  const cancelIconButtonInactiveStyle = css`
+    color: ${theme.color.neutral.grey20};
+  `;
+
+  const cancelButtonStyle = cx(
+    cancelButtonBaseStyle,
+    searchTerms.length === 0 && cancelIconButtonInactiveStyle
+  );
+
+  const dividerStyle = css`
+    width: 1px;
+    height: 38px;
+    background-color: ${theme.color.neutral.grey20};
+  `;
+
+  const submitButtonStyle = css`
+    width: 48px;
+    height: 100%;
+  `;
+
+  return (
+    <div
+      className={style}
+      {...props}
+    >
+      <Input
+        inputClassName={inputStyle}
+        placeholder={placeholder}
+        type='text'
+        onChange={handleSearchTermsChange}
+        value={searchTerms}
+        disabled={disabled}
+        data-testid={testId}
+        {...inputProps}
+      />
+
+      <div className={buttonsStyle}>
+        <IconButton
+          disabled={disabled}
+          className={cancelButtonStyle}
+          onClick={handleClearButtonClick}
+          aria-label='Clear search'
+          data-testid={`${testId}-clear-search-btn`}
+          {...clearButtonProps}
+        >
+          <Icon.X />
+        </IconButton>
+
+        <div className={dividerStyle} />
+
+        <IconButton
+          className={submitButtonStyle}
+          disabled={disabled}
+          onClick={handleSearchButtonClick}
+          aria-label='Search'
+          data-testid={`${testId}-search-btn`}
+          {...submitButtonProps}
+        >
+          <Icon.Search />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+export default Search;