@transferwise/components 46.104.0 → 46.105.1

package/src/header/Header.tsx

@@ -1,102 +1,133 @@
 import { clsx } from 'clsx';
 
-import { ActionButtonProps } from '../actionButton/ActionButton';
-import Button from '../button';
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
+import Button from '../button';
 import Link from '../link';
 import Title from '../title';
-import { HTMLAttributes } from 'react';
+import React, { useEffect, useRef, FunctionComponent } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
+  onClick?: (event: React.MouseEvent) => void;
 };
 
-type ButtonActionProps = ActionProps & ActionButtonProps;
-
+type ButtonActionProps = ActionProps;
 type LinkActionProps = ActionProps & LinkProps;
 
-export type HeaderProps = CommonProps & {
+export interface HeaderProps extends CommonProps {
   /**
-   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
+   * Optional prop to define the action for the header. If the `href` property
+   * is provided, a `Link` will be rendered instead of a `Button`.
    */
   action?: ButtonActionProps | LinkActionProps;
+
   /**
-   * Override the heading element rendered for the title, useful to specify the semantics of your header.
+   * Option prop to specify DOM render element of the title
+   *
+   * - When `as="legend"`, the `Header` will render as a `<legend>` element.
+   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.
+   *   If this condition is not met, a warning will be logged to the console.
    *
-   * @default "h5"
+   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
    */
   as?: Heading | 'legend' | 'header';
+
+  /** Required prop to set the title of the Header. */
   title: string;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
 
-const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
-  const props = {
-    'aria-label': action['aria-label'],
-  };
+  /** Optional prop to specify the level of the Header */
+  level?: 'section' | 'group';
 
-  if ('href' in action) {
-    return (
-      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
-        {action.text}
-      </Link>
-    );
-  }
+  className?: string;
+  testId?: string;
+}
 
+/**
+ * Renders a header action which can be either a button or a link.
+ *
+ * @param {Object} props - The properties object.
+ * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
+ * @returns {JSX.Element} The rendered header action component.
+ */
+const HeaderAction = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  { action: ButtonActionProps | LinkActionProps }
+>(({ action }, ref) => {
   return (
-    <Button
-      className="np-header__button"
-      priority="tertiary"
-      size="sm"
+    <Link
+      className="np-header__action-button"
+      aria-label={action['aria-label']}
+      href={'href' in action ? action.href : undefined}
+      target={'target' in action ? action.target : undefined}
       onClick={action.onClick}
-      {...props}
     >
       {action.text}
-    </Button>
+    </Link>
   );
-};
+});
+
+HeaderAction.displayName = 'HeaderAction';
 
 /**
+ * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
+ * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
+ * @param {string} title - Required prop to set the title of the section header.
+ * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
+ * @param {string} [className]
+ * @param {string} [testId]
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
- *
+ * @see {@link Header } for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
  */
-export const Header = ({
-  id,
-  action,
-  as = 'h5',
-  title,
-  className,
-  role = undefined,
-}: HeaderProps) => {
-  if (!action) {
-    return (
-      <Title
-        as={as}
-        id={id}
-        role={role}
-        type={Typography.TITLE_GROUP}
-        className={clsx('np-header', 'np-header__title', className)}
-      >
-        {title}
-      </Title>
-    );
-  }
+const Header: FunctionComponent<HeaderProps> = React.forwardRef(
+  (
+    { as = 'h5', action, className, testId, title, level = 'group', ...props },
+    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
+  ) => {
+    const internalRef = useRef<HTMLLegendElement>(null);
+    const levelTypography =
+      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;
+    const isLegendOrNoAction = !action || as === 'legend';
+    const headerClasses = clsx('np-header', className, {
+      'np-header--group': level === 'group',
+      'np-header__title': isLegendOrNoAction,
+    });
+
+    const commonProps = {
+      className: headerClasses,
+      'data-testid': testId,
+    };
+
+    useEffect(() => {
+      if (as === 'legend' && internalRef.current) {
+        const { parentElement } = internalRef.current;
+        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+          console.warn(
+            'Legends should be the first child in a fieldset, and this is not possible when including an action',
+          );
+        }
+      }
+    }, [as]);
 
-  if (as === 'legend') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Legends should be the first child in a fieldset, and this is not possible when including an action',
+    if (!action) {
+      return (
+        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>
+          {title}
+        </Title>
+      );
+    }
+
+    return (
+      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
+        <Title as={as} type={levelTypography} className="np-header__title">
+          {title}
+        </Title>
+        <HeaderAction action={action} />
+      </div>
     );
-  }
+  },
+);
 
-  return (
-    <div className={clsx('np-header', className)}>
-      <Title as={as} type={Typography.TITLE_GROUP} id={id} className="np-header__title">
-        {title}
-      </Title>
-      <HeaderAction action={action} />
-    </div>
-  );
-};
+Header.displayName = 'Header';
 
 export default Header;

package/src/header/index.ts

@@ -1 +1,2 @@
 export { default } from './Header';
+export type { HeaderProps } from './Header';

package/src/i18n/cs.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Nahrání se nezdařilo. Zkuste to prosím později",
   "neptune.Upload.csSuccessText": "Úspěšně nahráno!",
   "neptune.Upload.csTooLargeMessage": "Nahrajte soubor menší než {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Nahrajte menší soubor",
   "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
   "neptune.Upload.psButtonText": "Zrušit",
   "neptune.Upload.psProcessingText": "Načítání...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Nebo vyberte soubor",
   "neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
   "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Přetáhněte soubor",
   "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
   "neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
   "neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",

package/src/i18n/es.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
   "neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
   "neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Proporciona un archivo más pequeño",
   "neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
   "neptune.Upload.psButtonText": "Cancela",
   "neptune.Upload.psProcessingText": "Subiendo...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "O selecciona un archivo",
   "neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
   "neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Arrastra y suelta un archivo",
   "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
   "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
   "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",

package/src/i18n/th.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "การอัปโหลดล้มเหลว กรุณาลองอีกครั้ง",
   "neptune.Upload.csSuccessText": "อัปโหลดเรียบร้อย!",
   "neptune.Upload.csTooLargeMessage": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "โปรดอัปโหลดไฟล์ที่เล็กลง",
   "neptune.Upload.csWrongTypeMessage": "ไม่รองรับประเภทไฟล์ โปรดลองอีกครั้งโดยใช้ไฟล์อื่น",
   "neptune.Upload.psButtonText": "ยกเลิก",
   "neptune.Upload.psProcessingText": "กำลังอัปโหลด...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "หรือเลือกไฟล์",
   "neptune.Upload.usDropMessage": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.Upload.usPlaceholder": "ลากและวางไฟล์ที่น้อยกว่า {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "ลากและวางไฟล์",
   "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
   "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",

package/src/iconButton/iconButton.spec.tsx

@@ -0,0 +1,31 @@
+import IconButton from './IconButton';
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { Edit } from '@transferwise/icons';
+
+mockMatchMedia();
+
+describe('IconButton', () => {
+  describe('onClick', () => {
+    it('should respect onClick if rendered as HTML button', async () => {
+      const handleClick = jest.fn();
+      render(
+        <IconButton onClick={handleClick}>
+          <Edit />
+        </IconButton>,
+      );
+      await userEvent.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should respect onClick if rendered as HTML anchor', async () => {
+      const handleClick = jest.fn();
+      render(
+        <IconButton href="#target" onClick={handleClick}>
+          <Edit />
+        </IconButton>,
+      );
+      await userEvent.click(screen.getByRole('link'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/index.ts

@@ -31,6 +31,7 @@ export type { DefinitionListProps, DefinitionListDefinition } from './definition
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
 export type { DividerProps } from './divider';
+export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';

package/src/listItem/Button/ListItemButton.spec.tsx

@@ -1,4 +1,4 @@
-import { screen, mockMatchMedia } from '../../test-utils';
+import { screen, mockMatchMedia, userEvent } from '../../test-utils';
 import { Button as ItemButton } from './ListItemButton';
 import { ButtonPriority } from '../../button/Button.types';
 import { renderWithListItemContext, clearListItemMocks, mockSetControlType } from '../test-utils';
@@ -65,4 +65,26 @@ describe('ItemButton', () => {
     expect(link).toHaveAttribute('href', 'https://example.com');
     expect(link).toHaveAttribute('target', '_blank');
   });
+
+  describe('onClick', () => {
+    it('handles onClick events when rendered as HTML button', async () => {
+      const handleClick = jest.fn();
+      renderWithListItemContext(<ItemButton onClick={handleClick}>Go to Example</ItemButton>);
+
+      await userEvent.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles onClick events when rendered as HTML anchor', async () => {
+      const handleClick = jest.fn();
+      renderWithListItemContext(
+        <ItemButton href="#target" onClick={handleClick}>
+          Go to Example
+        </ItemButton>,
+      );
+
+      await userEvent.click(screen.getByRole('link'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/listItem/IconButton/ListItemIconButton.spec.tsx

@@ -1,6 +1,5 @@
 import { Edit } from '@transferwise/icons';
-import userEvent from '@testing-library/user-event';
-import { mockMatchMedia, render, screen } from '../../test-utils';
+import { mockMatchMedia, render, screen, userEvent } from '../../test-utils';
 import { ListItem, type ListItemProps } from '../ListItem';
 
 mockMatchMedia();
@@ -92,6 +91,19 @@ describe('ListItem.IconButton', () => {
       expect(link).toHaveAttribute('rel', 'noopener noreferrer');
     });
 
+    it('handles onClick events', async () => {
+      const handleClick = jest.fn();
+      renderWith({
+        control: (
+          <ListItem.IconButton href="#test" onClick={handleClick}>
+            <Edit />
+          </ListItem.IconButton>
+        ),
+      });
+      await userEvent.click(screen.getByRole('link'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
     it('is disabled when ListItem is disabled', async () => {
       renderWith({
         disabled: true,

package/src/listItem/ListItem.css

@@ -102,10 +102,6 @@
     -o-object-position: bottom left;
        object-position: bottom left;
   }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
-    margin-bottom: 12px;
-    margin-bottom: var(--size-12);
-  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -142,10 +138,6 @@
     grid-template-columns: 1fr;
     grid-template-areas: "media" "body" "control";
   }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
-    margin-bottom: 12px;
-    margin-bottom: var(--size-12);
-  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto auto auto;
@@ -687,6 +679,9 @@
   margin-top: calc(4px * -1);
   margin-top: calc(var(--size-4) * -1);
 }
+.wds-list-item-additional-info button.np-link {
+  text-align: start;
+}
 .wds-list-item-control-wrapper {
   grid-area: control;
   align-content: center;

package/src/listItem/ListItem.grid.css

@@ -102,10 +102,6 @@
     -o-object-position: bottom left;
        object-position: bottom left;
   }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
-    margin-bottom: 12px;
-    margin-bottom: var(--size-12);
-  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -142,10 +138,6 @@
     grid-template-columns: 1fr;
     grid-template-areas: "media" "body" "control";
   }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
-    margin-bottom: 12px;
-    margin-bottom: var(--size-12);
-  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto auto auto;

package/src/listItem/ListItem.grid.less

@@ -159,10 +159,6 @@
       }
 
       &.wds-list-item-hasMedia-hasControl {
-        .wds-list-item-media {
-          margin-bottom: var(--size-12);
-        }
-
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto auto;
@@ -237,10 +233,6 @@
       }
 
       &.wds-list-item-hasMedia-noControl {
-        .wds-list-item-media {
-          margin-bottom: var(--size-12);
-        }
-
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto auto;
           grid-template-rows: auto auto auto auto;

package/src/listItem/ListItem.less

@@ -201,6 +201,10 @@
       grid-area: info;
       color: var(--color-content-tertiary);
       margin-top: calc(var(--size-4) * -1);
+
+      button.np-link {
+        text-align: start;
+      }
   }
 
   &-control-wrapper {

package/src/listItem/ListItem.tsx

@@ -20,7 +20,7 @@ import { AvatarLayout } from './AvatarLayout';
 import { AvatarView } from './AvatarView';
 import { Image } from './Image';
 import { Prompt } from './Prompt';
-import { PrimitiveAnchor } from '../primitives';
+import { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';
 import {
   ListItemContext,
   type ListItemContextData,
@@ -367,7 +367,7 @@ function View({
 
   const renderExtras = () => (
     <>
-      {Boolean(subtitle) && additionalInfo}
+      {additionalInfo}
       {prompt}
     </>
   );
@@ -382,8 +382,10 @@ function View({
           target={(controlProps as ListItemNavigationProps)?.target}
           className={clsx('wds-list-item-view d-flex flex-row', {
             'wds-list-item-control': controlType === 'navigation',
+            fullyInteractive: !isPartiallyInteractive,
           })}
           disabled={disabled}
+          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}
         >
           {children}
         </PrimitiveAnchor>

package/src/listItem/Navigation/ListItemNavigation.spec.tsx

@@ -55,5 +55,13 @@ describe('ListItem.Navigation', () => {
       });
       expect(screen.getByTestId('backslash-circle-icon')).toBeInTheDocument();
     });
+
+    it('handles onClick events', async () => {
+      const handleClick = jest.fn();
+      renderWith({ control: <ListItem.Navigation href="#target" onClick={handleClick} /> });
+
+      await userEvent.click(screen.getByRole('link'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
   });
 });

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta<ListItemNavigationProps> = {
   },
   args: {
     href: 'https://wise.com',
-    onClick: undefined,
+    onClick: fn(),
     target: undefined,
   },
   argTypes: {
@@ -72,7 +72,9 @@ export const AsButton: Story = {
     return (
       <List>
         <ListItem
-          control={<ListItem.Navigation href="https://wise.com" target="_blank" />}
+          control={
+            <ListItem.Navigation href="https://wise.com" target="_blank" onClick={args.onClick} />
+          }
           title="Navigation as link"
           subtitle="This will navigate to an external URL"
           media={MEDIA.avatarSingle}

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -173,6 +173,26 @@ export const Over400: Story = {
   decorators: [withSizedContainer(400)],
 };
 
+export const LongButton: Story = {
+  render: () => (
+    <ListItem
+      title="Additional info button better align left"
+      additionalInfo={
+        <ListItem.AdditionalInfo
+          action={{
+            label: 'Additional info Additional info Additional info (as button)',
+            onClick: () => {},
+          }}
+        />
+      }
+      control={
+        <ListItem.Button onClick={() => {}}>Click me Click me Click me Click me</ListItem.Button>
+      }
+    />
+  ),
+  decorators: [withSizedContainer(400)],
+};
+
 export const GapsBetweenItems: Story = {
   render: () => {
     const props = {

package/src/listItem/_stories/ListItem.story.tsx

@@ -46,7 +46,7 @@ export default {
     'ListItem.Image': ListItem.Image,
   },
   title: 'Content/ListItem',
-  tags: ['wds:early-access'],
+  tags: ['early-access'],
   parameters: {
     docs: {
       toc: true,

package/src/listItem/_stories/ListItem.variants.test.story.tsx

@@ -73,6 +73,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
     { title },
     { title, valueTitle },
     { title, subtitle },
+    { title, additionalInfo },
     { title, valueTitle, valueSubtitle },
     { title, subtitle, inverted: true },
     { title, subtitle, valueTitle },
@@ -86,6 +87,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
     { media, title, valueTitle },
     { media, title, valueSubtitle },
     { media, title, subtitle },
+    { media, title, additionalInfo },
     { media, title, subtitle, valueTitle },
     { media, title, subtitle, valueTitle, valueSubtitle },
     { media, title, subtitle, additionalInfo: infoWithoutLink },
@@ -179,6 +181,7 @@ export const NavigationAsButton = generateVariantsForControl('navigationAsButton
 export const Checkbox = generateVariantsForControl('checkbox');
 export const Radio = generateVariantsForControl('radio');
 export const Switch = generateVariantsForControl('switch');
+export const NonInteractive = generateVariantsForControl('non-interactive');
 
 export const ButtonControlLabel: Story = {
   render: () => (

package/src/listItem/_stories/subcomponents.tsx

@@ -6,6 +6,7 @@ import Link from '../../link';
 import { Flag } from '@wise/art';
 
 export type SB_ListItem_ControlType =
+  | 'non-interactive'
   | 'button'
   | 'buttonAsLink'
   | 'partialButton'
@@ -25,6 +26,7 @@ export type SB_ListItem_ControlType =
   | 'switch';
 
 export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {
+  'non-interactive': null,
   button: <ListItem.Button onClick={() => {}}>Click me</ListItem.Button>,
   buttonAsLink: <ListItem.Button href="https://wise.com">Click me</ListItem.Button>,
   partialButton: (