@transferwise/components 46.125.0 → 46.127.1

package/src/overlayHeader/OverlayHeader.test.tsx

@@ -11,9 +11,6 @@ describe('OverlayHeader', () => {
     logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
     onClose: jest.fn(),
   };
-  it('renders as expected', () => {
-    expect(render(<OverlayHeader {...props} />).container).toMatchSnapshot();
-  });
 
   it('renders separator only if avatar and onClose are provided', () => {
     const { container } = render(<OverlayHeader {...props} />);

package/src/popover/Popover.test.tsx

@@ -22,19 +22,6 @@ describe('Popover', () => {
   let rerender;
 
   describe('on desktop', () => {
-    it('renders when is open', async () => {
-      render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      );
-
-      await userEvent.click(screen.getByText('Open'));
-
-      await waitForPanel();
-      expect(getPanel()).toMatchSnapshot();
-    });
-
     describe('title', () => {
       it('renders title', async () => {
         ({ container, rerender } = render(
@@ -122,18 +109,6 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', async () => {
-      ({ container } = render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      ));
-
-      await userEvent.click(screen.getByText('Open'));
-
-      expect(container).toMatchSnapshot();
-    });
-
     it('renders BottomSheet onClick', async () => {
       render(
         <Popover {...props}>

package/src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts

@@ -11,9 +11,7 @@ export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
  * Properties for the anchor component.
  */
 export interface PrimitiveAnchorProps
-  extends BasePrimitiveProps,
-    StyleProp,
-    Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
+  extends BasePrimitiveProps, StyleProp, Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
   /** Content of the anchor */
   children?: ReactNode;
 

package/src/primitives/PrimitiveButton/PrimitiveButton.types.ts

@@ -11,9 +11,7 @@ export type PrimitiveButtonElementRef = React.Ref<HTMLButtonElement>;
  * Properties for the Button component.
  */
 export interface PrimitiveButtonProps
-  extends BasePrimitiveProps,
-    StyleProp,
-    PrimitiveButtonAttributes {
+  extends BasePrimitiveProps, StyleProp, PrimitiveButtonAttributes {
   /** Content of the button */
   children?: ReactNode;
 

package/src/promoCard/PromoCard.test.tsx

@@ -26,12 +26,6 @@ describe('PromoCard', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCard {...defaultProps} id="test-promo-card" />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/promoCard/PromoCardGroup.test.tsx

@@ -41,11 +41,6 @@ describe('PromoCardGroup', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCardGroup {...defaultProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/ActionPrompt/Accessibility" />
+
+# Accessibility
+
+Under the hood, `ActionPrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
+
+By default, it's labelled by the `media` asset and `title`, as well as described by the `description` if one is provided.
+
+## Announcement Behaviour
+
+`ActionPrompt` should be treated as a hint or suggestion as part of the product UX. Even the negative variant still serves as a non-critical message. Therefore, it shouldn't be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).
+
+**Note:** For immediate user feedback, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) or [InlinePrompt](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) instead.
+
+If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  aria-label="JFYI: Henry requested 30 USD for lunch"
+  media={{ avatar: { imgSrc: 'profile-photo.webp' } }}
+  title="Henry requested 30 USD"
+  description="Lunch date"
+  ...
+/>
+`}
+/>
+
+## Media
+
+You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  media={{
+    'aria-hidden': true,
+    avatar: { asset: <People /> },
+  }}
+  title="Sync contacts for a faster experience"
+  ...
+/>
+`}
+/>
+
+You can also use `aria-label` on media assets to provide a custom label for screen readers.
+
+<Source
+  dark
+  code={`
+<ActionPrompt
+  media={{
+    'aria-label': 'Henry Adams photo',
+    avatar: { imgSrc: 'profile-photo.webp' },
+  }}
+  title="Henry requested 30 USD"
+  description="Lunch date"
+  ...
+/>
+`}
+/>

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -20,4 +20,4 @@
       }
     }
   }
-}
+}

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -1,9 +1,12 @@
 import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { Bank } from '@transferwise/icons';
+import { Bank, Freeze, People } from '@transferwise/icons';
 import { ActionPrompt } from './ActionPrompt';
 import { lorem10 } from '../../test-utils';
+import Body from '../../body';
+import { action } from 'storybook/actions';
+import Title from '../../title';
 import { withVariantConfig } from '../../../.storybook/helpers';
 
 const meta: Meta<typeof ActionPrompt> = {

package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx

@@ -0,0 +1,147 @@
+import { Freeze, People } from '@transferwise/icons';
+import { action } from 'storybook/actions';
+import ActionPrompt from './ActionPrompt';
+import { Body, Title } from '../..';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+export default {
+  title: 'Prompts/ActionPrompt/Tests',
+  component: ActionPrompt,
+  tags: ['!manifest', '!autodocs'],
+};
+
+type Story = StoryObj<typeof ActionPrompt>;
+
+export const VariousA11yFeatures: Story = {
+  name: 'Various a11y features',
+  render: () => {
+    return (
+      <Body>
+        <Title type="title-body">Neutral Prompt with Avatar Image and Custom label for media</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="neutral"
+          media={{
+            'aria-label': 'Henry Profile Photo',
+            avatar: { imgSrc: '../../avatar-square-dude.webp' },
+          }}
+          title="Henry requested 30 USD"
+          description="Lunch date"
+          action={{
+            label: 'Sent',
+            onClick: () => {
+              action('send');
+            },
+          }}
+          actionSecondary={{
+            label: 'Decline',
+            onClick: () => {
+              action('decline');
+            },
+          }}
+          onDismiss={() => action('dismiss')}
+        />
+
+        <Title type="title-body">Warning Prompt</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="warning"
+          media={{
+            'aria-label': 'Image of beautiful Business Wise Card',
+            imgSrc: '../../wise-card.svg',
+          }}
+          title="Your Wise Card expires soon"
+          description="Renew your card to keep spending"
+          action={{
+            label: 'Renew card',
+            onClick: () => {
+              action('renew');
+            },
+          }}
+          actionSecondary={{
+            label: 'Notify later',
+            onClick: () => {
+              action('notifyLater');
+            },
+          }}
+          onDismiss={() => action('dismiss')}
+        />
+
+        <Title type="title-body">Warning Prompt Avatar Icon</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="warning"
+          media={{ avatar: { asset: <Freeze /> } }}
+          title="Your Wise Card expires soon"
+          description="Renew your card to keep spending"
+          action={{
+            label: 'Renew card',
+            onClick: () => {
+              action('renew');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+
+        <Title type="title-body">Proposition Prompt Avatar Icon</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="proposition"
+          media={{ avatar: { asset: <People /> } }}
+          title="Sync contacts for a faster experience"
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
+          action={{
+            label: 'Sync contacts',
+            onClick: () => {
+              action('sync');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+
+        <Title type="title-body">Negative Prompt Avatar Icon + muted media</Title>
+        <ActionPrompt
+          className="m-b-2"
+          sentiment="negative"
+          media={{ avatar: { asset: <People /> }, 'aria-hidden': true }}
+          title="Sync contacts for a faster experience"
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
+          action={{
+            label: 'Sync contacts',
+            onClick: () => {
+              action('sync');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+
+        <Title type="title-body">
+          Negative Prompt + override content with custom message via aria-label
+        </Title>
+        <ActionPrompt
+          className="m-b-2"
+          aria-label="hey customer, here is custom message"
+          sentiment="negative"
+          media={{ avatar: { asset: <People /> } }}
+          title="Sync contacts for a faster experience"
+          description="Find contacts on Wise — it’s simple, secure and you pick who you add."
+          action={{
+            label: 'Sync contacts',
+            onClick: () => {
+              action('sync');
+            },
+          }}
+          onDismiss={() => {
+            action('dismiss');
+          }}
+        />
+      </Body>
+    );
+  },
+};

package/src/prompt/ActionPrompt/ActionPrompt.test.tsx

@@ -56,9 +56,7 @@ describe('ActionPrompt', () => {
     it('calls primary action onClick when clicked', async () => {
       const onClick = jest.fn();
       const user = userEvent.setup();
-      render(
-        <ActionPrompt {...defaultProps} action={{ label: 'Primary Action', onClick }} />,
-      );
+      render(<ActionPrompt {...defaultProps} action={{ label: 'Primary Action', onClick }} />);
       const button = screen.getByRole('button', { name: 'Primary Action' });
       await user.click(button);
       expect(onClick).toHaveBeenCalledTimes(1);
@@ -66,10 +64,7 @@ describe('ActionPrompt', () => {
 
     it('renders primary action as link when href is provided', () => {
       render(
-        <ActionPrompt
-          {...defaultProps}
-          action={{ label: 'Primary Action', href: '/test-url' }}
-        />,
+        <ActionPrompt {...defaultProps} action={{ label: 'Primary Action', href: '/test-url' }} />,
       );
       const link = screen.getByRole('link', { name: 'Primary Action' });
       expect(link).toHaveAttribute('href', '/test-url');

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { AriaAttributes, ReactNode, useId } from 'react';
 import { clsx } from 'clsx';
 
 import StatusIcon from '../../statusIcon';
@@ -23,6 +23,7 @@ export type ActionPromptProps = {
       badge?: Pick<BadgeAssetsProps, 'flagCode'>;
     };
     'aria-label'?: string;
+    'aria-hidden'?: boolean;
   };
   action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
@@ -30,6 +31,7 @@ export type ActionPromptProps = {
   actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
   };
+  'aria-label'?: AriaAttributes['aria-label'];
 } & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
 
 export const ActionPrompt = ({
@@ -37,19 +39,32 @@ export const ActionPrompt = ({
   title,
   description,
   onDismiss,
-  media,
+  media = {},
   action,
   actionSecondary,
   id,
   className,
   'data-testid': testId,
+  'aria-label': ariaLabel,
 }: ActionPromptProps) => {
   const isMobile = !useScreenSize(Breakpoint.MEDIUM);
 
+  const mediaId = useId();
+  const titleId = useId();
+  const descId = useId();
+
+  const ariaLabelledByIds = [
+    media['aria-hidden'] ? undefined : mediaId,
+    Boolean(ariaLabel) ? undefined : titleId,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   const renderMedia = () => {
     if (media?.imgSrc) {
       return (
         <Image
+          id={mediaId}
           src={media.imgSrc}
           className="wds-action-prompt--media-image"
           alt={media['aria-label'] ?? ''}
@@ -63,17 +78,34 @@ export const ActionPrompt = ({
           ? {}
           : { status: sentiment };
       return (
-        <AvatarView {...media.avatar} badge={badge} size={48}>
+        <AvatarView
+          {...media.avatar}
+          badge={badge}
+          aria-label={media['aria-label']}
+          aria-hidden={media['aria-hidden']}
+          id={mediaId}
+          size={48}
+        >
           {media.avatar.asset}
         </AvatarView>
       );
     }
     return sentiment === 'proposition' ? (
-      <AvatarView size={48}>
+      <AvatarView
+        id={mediaId}
+        size={48}
+        aria-label={media['aria-label']}
+        aria-hidden={media['aria-hidden']}
+      >
         <GiftBox />
       </AvatarView>
     ) : (
-      <StatusIcon size={48} sentiment={sentiment} />
+      <StatusIcon
+        id={mediaId}
+        size={48}
+        sentiment={sentiment}
+        iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}
+      />
     );
   };
 
@@ -117,10 +149,19 @@ export const ActionPrompt = ({
         </>
       }
       onDismiss={onDismiss}
+      role="region"
+      {...(Boolean(ariaLabel)
+        ? { 'aria-label': ariaLabel }
+        : {
+            'aria-labelledby': ariaLabelledByIds,
+            'aria-describedby': descId,
+          })}
     >
       <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
-        <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>
-        {description && <Body>{description}</Body>}
+        <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>
+          {title}
+        </Body>
+        {description && <Body id={descId}>{description}</Body>}
       </div>
     </PrimitivePrompt>
   );

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -0,0 +1,31 @@
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+}
+.wds-info-prompt__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.wds-info-prompt__content:has(.wds-info-prompt__title) {
+  justify-content: flex-start;
+  /* Top align when title exists */
+}
+.wds-info-prompt__title,
+.wds-info-prompt__description {
+  display: block;
+  color: var(--color-sentiment-primary);
+}
+.wds-info-prompt__action {
+  margin-top: var(--Prompt-gap);
+}
+.wds-info-prompt__media {
+  display: flex;
+}
+.wds-info-prompt__media svg {
+  width: 24px;
+  height: 24px;
+}
+.wds-info-prompt .wds-prompt__media-wrapper {
+  padding: 0;
+}

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -0,0 +1,37 @@
+.wds-info-prompt {
+  --Prompt-gap: var(--size-8);
+  --Prompt-padding: 12px;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &:has(.wds-info-prompt__title) {
+      justify-content: flex-start; /* Top align when title exists */
+    }
+  }
+
+  &__title,
+  &__description {
+    display: block;
+    color: var(--color-sentiment-primary);
+  }
+
+  &__action {
+    margin-top: var(--Prompt-gap);
+  }
+
+  &__media {
+    display: flex;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .wds-prompt__media-wrapper {
+    padding: 0;
+  }
+}