@transferwise/components 46.147.0 → 46.148.0

package/src/label/Label.story.tsx

@@ -1,3 +1,7 @@
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Info from '../info';
 import { Label } from './Label';
 
@@ -6,6 +10,19 @@ export default {
   title: 'Forms/Label',
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<>
+  <Label>
+    <Label.Optional>
+      Field with Info{' '}
+      <Info content="Helpful tooltip content" aria-label="More information" />
+    </Label.Optional>
+  </Label>
+  <Label.Description className="m-b-2">This is a field description</Label.Description>
+</>`,
+  scope: { ...globalScope, Info },
+});
+
 export const Basic = () => {
   return (
     <>

package/src/link/Link.story.tsx

@@ -4,12 +4,23 @@ import Title from '../title/Title';
 
 import SentimentSurface from '../sentimentSurface';
 import Link from '.';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Link,
   title: 'Typography/Link',
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Link type="link-default" href="#">
+  Learn more about international transfers
+</Link>`,
+  scope: { ...globalScope, Link },
+});
+
 export const Basic = () => {
   return (
     <>

package/src/list/List.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import ListItem from '../listItem';
 import List from './List';
 
@@ -10,6 +11,24 @@ export default {
 
 type Story = StoryObj<typeof List>;
 
+export const Sandbox = createSandboxStory({
+  code: `<List>
+  <ListItem
+    title="First item"
+    subtitle="This is the first item."
+    media={<ListItem.AvatarView />}
+    control={<ListItem.Navigation onClick={() => console.log('navigate')} />}
+  />
+  <ListItem
+    title="Second item"
+    subtitle="This is the second item."
+    media={<ListItem.AvatarView />}
+    control={<ListItem.Navigation onClick={() => console.log('navigate')} />}
+  />
+</List>`,
+  scope: { ...globalScope, List },
+});
+
 export const Basic: Story = {
   render: (args) => (
     <List {...args}>

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

@@ -1,6 +1,10 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { lorem5, lorem10 } from '../../test-utils';
 import Emphasis from '../../emphasis';
 import Link from '../../link';
@@ -270,6 +274,22 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   decorators: [withoutKey],
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<List>
+  <ListItem
+    title="List item title"
+    subtitle="Subtitle goes here"
+    additionalInfo={<ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>}
+    control={<ListItem.Button onClick={() => {}}>Click me</ListItem.Button>}
+    media={<ListItem.AvatarView><Briefcase /></ListItem.AvatarView>}
+    prompt={<ListItem.Prompt sentiment="positive">Finally, there is a prompt{' '}<Link href="https://wise.com" rel="noreferrer" target="_blank">referencing some details</Link>{' '}for your convenience.</ListItem.Prompt>}
+    valueSubtitle="100 USD"
+    valueTitle="100 GBP"
+  />
+</List>`,
+  scope: { ...globalScope, List, Link },
+});
+
 export const Responsiveness: StoryObj<PreviewStoryArgs> = {
   parameters: {
     docs: {

package/src/loader/Loader.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory }  from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Loader from './Loader';
 
@@ -24,4 +25,9 @@ export default {
 
 type Story = StoryObj<typeof Loader>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Loader size="md" label="Sending your money" />`,
+  scope: { Loader },
+});
+
 export const Basic: Story = {};

package/src/logo/Logo.story.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
 import type { LogoSize } from './Logo';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 import { withVariantConfig } from '../../.storybook/helpers';
 import Body from '../body';
 
@@ -51,6 +52,11 @@ export const Playground: Story = {
   render: (args) => <Logo {...args} />,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Logo type="WISE" format="primary-lockup" size={24} />`,
+  scope: { Logo },
+});
+
 /**
  * The three logo types: standard Wise, Wise Business, and Wise Platform.
  */

package/src/main.css

@@ -31935,6 +31935,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   --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:
@@ -32075,6 +32076,53 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
+.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,
@@ -32082,6 +32130,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }
 
 .wds-expander-toggle {

package/src/markdown/Markdown.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Markdown from './Markdown';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Markdown,
@@ -9,6 +13,18 @@ export default {
 
 type Story = StoryObj<typeof Markdown>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Markdown>{\`# Heading
+
+Some **bold** and *italic* text.
+
+1. First item
+2. Second item
+   - Nested item
+\`}</Markdown>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     children: `# Heading
@@ -18,3 +34,4 @@ export const Basic: Story = {
      - sublist`,
   },
 };
+

package/src/modal/Modal.story.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
 import { lorem10, lorem100, lorem1000 } from '../test-utils';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Modal,
@@ -60,6 +61,28 @@ const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
   );
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal
+        title="Confirm action"
+        body="Are you sure you want to proceed? This action cannot be undone."
+        open={open}
+        onClose={() => setOpen(false)}
+        footer={
+          <Button v2 block onClick={() => setOpen(false)}>Confirm</Button>
+        }
+      />
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     title: 'Title',

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.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">

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 />,