@transferwise/components 46.124.1 → 46.126.0

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/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.css

@@ -0,0 +1,21 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -0,0 +1,23 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+
+  &--with-two-actions {
+    @media (--screen-sm-max) {
+      .wds-prompt__actions-wrapper {
+        .wds-Button {
+          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,187 @@
+import { ReactElement, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+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> = {
+  title: 'Prompts/ActionPrompt',
+  component: ActionPrompt,
+  tags: ['new'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionPrompt>;
+
+const withComponentGrid =
+  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        gap,
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+export const AllSentiments: Story = {
+  render: () => {
+    return (
+      <>
+        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
+          (sentiment) => (
+            <ActionPrompt
+              key={sentiment}
+              sentiment={sentiment}
+              title="Title"
+              description={lorem10}
+              action={{ label: 'Primary', onClick: fn() }}
+              actionSecondary={{ label: 'Secondary', onClick: fn() }}
+              className="m-b-2"
+              onDismiss={fn()}
+            />
+          ),
+        )}
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const Mobile: Story = {
+  ...AllSentiments,
+  ...withVariantConfig(['mobile'], AllSentiments),
+};
+
+export const PrimaryActionOnly: Story = {
+  args: {
+    sentiment: 'proposition',
+    title: 'Payment successful',
+    description: 'Your money is on its way',
+    action: { label: 'View details', onClick: fn() },
+    onDismiss: fn(),
+  },
+};
+
+export const WithoutDescription: Story = {
+  render: () => {
+    return (
+      <>
+        <ActionPrompt
+          sentiment="warning"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+          actionSecondary={{ label: 'Log out', onClick: fn() }}
+          onDismiss={fn()}
+        />
+        <ActionPrompt
+          sentiment="success"
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+        <ActionPrompt
+          title="Session expiring soon"
+          action={{ label: 'Stay logged in', onClick: fn() }}
+        />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const Media: Story = {
+  render: () => {
+    return (
+      <>
+        <ActionPrompt
+          sentiment="neutral"
+          title="Custom image"
+          description={lorem10}
+          media={{ imgSrc: '../../wise-card.svg' }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="neutral"
+          title="Profile Image"
+          description={lorem10}
+          media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="proposition"
+          title="Business Profile"
+          description={lorem10}
+          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="negative"
+          title="Personal Profile"
+          description={lorem10}
+          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="warning"
+          title="Custom Icon"
+          description={lorem10}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+        />
+        <ActionPrompt
+          sentiment="success"
+          title="Initials"
+          description={lorem10}
+          media={{ avatar: { profileName: 'John Doe' } }}
+          action={{ label: 'Invite now', onClick: fn() }}
+          actionSecondary={{ label: 'Maybe later', onClick: fn() }}
+        />
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+export const OnDismiss: Story = {
+  render: () => {
+    const [showNeutralPrompt, setShowNeutralPrompt] = useState(true);
+    const [showSuccessPrompt, setShowSuccessPrompt] = useState(true);
+
+    return (
+      <>
+        {showNeutralPrompt && (
+          <ActionPrompt
+            sentiment="proposition"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            className="m-b-2"
+            onDismiss={() => setShowNeutralPrompt(false)}
+          />
+        )}
+        {showSuccessPrompt && (
+          <ActionPrompt
+            sentiment="success"
+            title="Payment successful"
+            description="Your money is on its way"
+            action={{ label: 'View details', onClick: fn() }}
+            onDismiss={() => setShowSuccessPrompt(false)}
+          />
+        )}
+      </>
+    );
+  },
+};

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>
+    );
+  },
+};