@transferwise/components 46.146.0 → 46.148.0

package/src/money/Money.story.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Money from './Money';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Money,
@@ -9,9 +10,15 @@ export default {
 
 type Story = StoryObj<typeof Money>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Money amount={1234.56} currency="GBP" />`,
+  scope: { Money },
+});
+
 export const Basic: Story = {
   args: {
     amount: 1234.5678,
     currency: 'GBP',
   },
 };
+

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,6 +3,10 @@ import { within, userEvent, expect } from 'storybook/test';
 import { Padlock } from '@transferwise/icons';
 import { useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import MoneyInput, { CurrencyOptionItem } from '.';
 import { Field } from '../field/Field';
 import translations from '../i18n/en.json';
@@ -108,6 +112,36 @@ const exampleBalanceCurrency = {
   },
 } as const;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const currencies = [
+    { header: 'Popular currencies' },
+    { value: 'EUR', label: 'EUR', note: 'Euro', currency: 'eur', searchable: 'Spain, Germany' },
+    { value: 'GBP', label: 'GBP', note: 'British pound', currency: 'gbp', searchable: 'England' },
+    { value: 'USD', label: 'USD', note: 'US dollar', currency: 'usd', searchable: 'United States' },
+  ];
+
+  const [selectedCurrency, setSelectedCurrency] = React.useState(currencies[1]);
+  const [amount, setAmount] = React.useState(1000);
+
+  return (
+    <Field label="Amount" id="money-input">
+      <MoneyInput
+        id="money-input"
+        size="lg"
+        amount={amount}
+        currencies={currencies}
+        selectedCurrency={selectedCurrency}
+        searchPlaceholder="Type a currency or country"
+        onAmountChange={(value) => setAmount(value)}
+        onCurrencyChange={(value) => setSelectedCurrency(value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const SingleCurrency: Story = {
   args: {
     currencies: [],

package/src/nudge/Nudge.css

@@ -169,6 +169,17 @@
   margin-left: 0;
   margin-right: -22px;
 }
+.wds-nudge-media-documents {
+  margin-left: -8px;
+  margin-top: 22px;
+  position: absolute;
+  width: 120px;
+}
+[dir="rtl"] .wds-nudge-media-documents {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -8px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;

package/src/nudge/Nudge.less

@@ -80,6 +80,10 @@
     &-gift-box {
       .media-position(129px, -22px, 6px);
     }
+
+    &-documents {
+      .media-position(120px, -8px, 22px);
+    }
   }
 
   &-container {

package/src/nudge/Nudge.story.tsx

@@ -1,5 +1,6 @@
 import { action } from 'storybook/actions';
 import { Assets } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { Nudge } from '..';
 
@@ -8,6 +9,22 @@ export default {
   title: 'Prompts/Nudge',
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Nudge
+  mediaName="globe"
+  title="Get special rewards when you spend from a new balance"
+  link="Add balance"
+  href="#"
+  action={{
+    'aria-label': 'Learn more about rewards',
+    text: 'Learn more',
+    href: '#',
+  }}
+  onDismiss={() => console.log('dismissed')}
+/>`,
+  scope: globalScope,
+});
+
 export const Default = () => {
   return (
     <div className="d-flex flex-column">
@@ -128,6 +145,15 @@ export const Default = () => {
         onClick={action('action clicked')}
         onDismiss={action('dismissed')}
       />
+      <Nudge
+        mediaName={Assets.DOCUMENTS}
+        className="m-b-2"
+        title="Text that is no longer than two lines."
+        link="Link"
+        href="#"
+        onClick={action('action clicked')}
+        onDismiss={action('dismissed')}
+      />
     </div>
   );
 };

package/src/nudge/Nudge.tsx

@@ -43,7 +43,8 @@ type MediaNameType =
   | `${Assets.SHOPPING_BAG}`
   | `${Assets.FLOWER}`
   | `${Assets.GIFT_BOX}`
-  | `${Assets.BACKPACK}`;
+  | `${Assets.BACKPACK}`
+  | `${Assets.DOCUMENTS}`;
 
 type BaseProps = {
   /** @deprecated Use `mediaName` property instead. */

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { Person, Briefcase as BriefcaseIcon } from '@transferwise/icons';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import AvatarView from '../avatarView';
 import { ProfileType } from '../common';
 import Logo from '../logo';
@@ -31,6 +32,15 @@ const avatarProfiles = {
   Profile: <Person size="24" />,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<OverlayHeader
+  avatar={<AvatarView profileType={ProfileType.BUSINESS} />}
+  logo={<Logo />}
+  onClose={() => console.log('Close clicked')}
+/>`,
+  scope: globalScope,
+});
+
 export const Basic: StoryObj<StoryArgs> = {
   render: (args) => (
     <OverlayHeader

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 import PhoneNumberInput from './PhoneNumberInput';
 
@@ -12,6 +16,25 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('+447573135343');
+
+  return (
+    <Field label="Phone number">
+      <PhoneNumberInput
+        initialValue="+447573135343"
+        size="md"
+        placeholder="Enter phone number"
+        searchPlaceholder="Search country"
+        onChange={console.log}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic = {
   args: {
     searchPlaceholder: 'searchPlaceholder',

package/src/popover/Popover.story.tsx

@@ -5,6 +5,7 @@ import { Position } from '../common';
 
 import Popover from './Popover';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 type Story = StoryObj<typeof Popover>;
 
@@ -44,6 +45,17 @@ export default {
   },
 } satisfies Meta<typeof Popover>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Popover
+  content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
+  preferredPlacement="bottom"
+  title="Guaranteed rate"
+>
+  <Button v2 size="md">Click here to Open Popover!</Button>
+</Popover>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {};
 
 /**

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
 import PrimitiveAnchor from '..';
 
 const meta: Meta<typeof PrimitiveAnchor> = {
@@ -21,6 +25,13 @@ export default meta;
 
 type Story = StoryObj<typeof PrimitiveAnchor>;
 
+export const Sandbox = createSandboxStory({
+  code: `<PrimitiveAnchor href="https://example.com" target="_blank">
+  Click me
+</PrimitiveAnchor>`,
+  scope: { ...globalScope, PrimitiveAnchor },
+});
+
 export const Basic: Story = {};
 
 export const WithLongName: Story = {

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
 import PrimitiveButton from '..';
 
 const meta: Meta<typeof PrimitiveButton> = {
@@ -20,6 +24,13 @@ export default meta;
 
 type Story = StoryObj<typeof PrimitiveButton>;
 
+export const Sandbox = createSandboxStory({
+  code: `<PrimitiveButton onClick={() => console.log('clicked')}>
+  Button text
+</PrimitiveButton>`,
+  scope: { ...globalScope, PrimitiveButton },
+});
+
 export const Basic: Story = {};
 
 export const WithLongName: Story = {

package/src/processIndicator/ProcessIndicator.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { Size, Status } from '../common';
 
@@ -11,6 +12,15 @@ export default {
 
 type Story = StoryObj<typeof ProcessIndicator>;
 
+export const Sandbox = createSandboxStory({
+  code: `<ProcessIndicator
+  status={Status.PROCESSING}
+  size={Size.EXTRA_SMALL}
+  onAnimationCompleted={(status) => console.log(status)}
+/>`,
+  scope: { ProcessIndicator },
+});
+
 export const Basic: Story = {
   args: {
     size: Size.EXTRA_SMALL,

package/src/progress/Progress.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Progress from './Progress';
 
@@ -9,6 +10,11 @@ export default {
 
 type Story = StoryObj<typeof Progress>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Progress progress={{ value: 50, max: 100 }} />`,
+  scope: { Progress },
+});
+
 export const Basic: Story = {
   args: {
     progress: { value: 50, max: 100 },

package/src/progressBar/ProgressBar.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import ProgressBar from './ProgressBar';
 import Info from '../info';
@@ -10,6 +11,17 @@ export default {
 
 type Story = StoryObj<typeof ProgressBar>;
 
+export const Sandbox = createSandboxStory({
+  code: `<ProgressBar
+  title="Send 5,550 GBP"
+  description="You have 3 days to reach your goal."
+  id="progress-bar-sandbox"
+  progress={{ value: 50, max: 100 }}
+  textEnd="200 GBP to go"
+/>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     description: 'You have 3 days to reach your goal.',

package/src/promoCard/PromoCard.story.tsx

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StarFill } from '@transferwise/icons';
 
 import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,
@@ -15,6 +19,17 @@ const meta: Meta<typeof PromoCard> = {
 export default meta;
 type Story = StoryObj<typeof PromoCard>;
 
+export const Sandbox = createSandboxStory({
+  code: `<PromoCard
+  title="Digital"
+  description="A card that lives online and works anywhere. Easy, secure, and always on hand."
+  indicatorLabel="Free"
+  imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+  href="#"
+/>`,
+  scope: globalScope,
+});
+
 export const Default: Story = {
   args: {
     description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',

package/src/promoCard/PromoCardGroup.story.tsx

@@ -2,6 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import PromoCard from './PromoCard';
 import PromoCardGroup from './PromoCardGroup';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 const PromoCards = () => {
   return (
@@ -48,6 +52,30 @@ const meta: Meta<typeof PromoCardGroup> = {
 export default meta;
 type Story = StoryObj<typeof PromoCardGroup>;
 
+export const Sandbox = createSandboxStory({
+  code: `<PromoCardGroup name="card-selection">
+  <PromoCard
+    title="Digital"
+    description="A card that lives online and works anywhere."
+    type="radio"
+    value="digital"
+    id="digital"
+    indicatorLabel="Free"
+    imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+  />
+  <PromoCard
+    title="Standard"
+    description="Spend and withdraw money around the world."
+    type="radio"
+    value="standard"
+    id="standard"
+    indicatorLabel="7 GBP"
+    imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
+  />
+</PromoCardGroup>`,
+  scope: globalScope,
+});
+
 export const Default: Story = {
   args: {
     children: <PromoCards />,

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

@@ -2,6 +2,10 @@ import { ReactElement, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Bank, Star, Suitcase, Briefcase } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -186,6 +190,33 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) {
+    return (
+      <Button v2 size="md" onClick={() => setDismissed(false)}>
+        Show prompt again
+      </Button>
+    );
+  }
+
+  return (
+    <ActionPrompt
+      sentiment="neutral"
+      title="Action Required"
+      description="Please complete the following action to continue."
+      media={{ avatar: { asset: <Bank /> } }}
+      action={{ label: 'Continue', onClick: () => console.log('action clicked') }}
+      actionSecondary={{ label: 'Cancel', onClick: () => console.log('cancel clicked') }}
+      onDismiss={() => setDismissed(true)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 /**
  * ActionPrompt supports multiple sentiments to communicate different types of messages:
  * - `neutral` (default): General prompts

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

@@ -64,6 +64,15 @@ Screen readers announce the banner content whenever:
 - The user toggles between collapsed and expanded states
 - The content (title, description, or action labels) changes
 
+## Reduced Motion
+
+`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show:
+
+- the entry animation that reveals the banner from above when it first appears
+- the collapse and expand animation used when the user toggles the banner content
+
+The same content is still rendered and announced. Reduced motion only removes the visual movement.
+
 ## Media
 
 Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -4,6 +4,7 @@
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -124,6 +125,48 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -131,4 +174,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -7,6 +7,7 @@
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
 
   // Animation variables
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -144,6 +145,71 @@
   }
 }
 
+// Entry animation: after a 500ms delay, reveal the already-positioned banner
+// over 400ms. The mask clips only during the reveal, then becomes visible so the
+// overhang and actions are not clipped after the animation.
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+
+  @container critical-banner-overhang (max-width: @wds-critical-banner-mobile-overhang-max) {
+    --critical-banner-mobile-overhang-size: 32px;
+
+    .wds-critical-banner-overhang {
+      margin-bottom: var(--critical-banner-mobile-overhang-size);
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+        left: 0;
+        height: var(--critical-banner-mobile-overhang-size);
+        pointer-events: none;
+        background:
+          radial-gradient(
+              circle at 100% 100%,
+              transparent var(--critical-banner-mobile-overhang-size),
+              var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)
+            )
+            0 0 / var(--critical-banner-mobile-overhang-size)
+            var(--critical-banner-mobile-overhang-size) no-repeat,
+          radial-gradient(
+              circle at 0% 100%,
+              transparent var(--critical-banner-mobile-overhang-size),
+              var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)
+            )
+            100% 0 / var(--critical-banner-mobile-overhang-size)
+            var(--critical-banner-mobile-overhang-size) no-repeat;
+      }
+    }
+  }
+}
+
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
+
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
@@ -152,4 +218,10 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }