@transferwise/components 46.147.0 → 46.148.1

package/src/header/Header.story.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { HeaderProps } from './Header';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -83,6 +87,19 @@ export const Playground: Story = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Header
+  title="Section header"
+  level="group"
+  action={{
+    'aria-label': 'View all',
+    text: 'View all',
+    href: '#',
+  }}
+/>`,
+  scope: globalScope,
+});
+
 /**
  * Demonstrates a `Header` with an associated action.
  */

package/src/iconButton/IconButton.story.tsx

@@ -13,6 +13,7 @@ import {
   Freeze,
 } from '@transferwise/icons';
 import { fn } from 'storybook/test';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import IconButton, { Props } from './IconButton';
 import SentimentSurface from '../sentimentSurface';
 
@@ -61,6 +62,19 @@ export const Playground: Story = {
   ),
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<IconButton
+  size={48}
+  priority="primary"
+  type="default"
+  aria-label="Add item"
+  onClick={() => console.log('clicked')}
+>
+  <Plus />
+</IconButton>`,
+  scope: globalScope,
+});
+
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />

package/src/image/Image.story.tsx

@@ -1,4 +1,5 @@
 import { action } from 'storybook/actions';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 import Image, { type ImageProps } from './Image';
 
 const meta = {
@@ -16,6 +17,16 @@ const meta = {
 };
 export default meta;
 
+export const Sandbox = createSandboxStory({
+  code: `<Image
+  alt="Wise illustration"
+  src="https://wise.com/web-art/assets/illustrations/bell-small@1x.webp"
+  loading="lazy"
+  stretch={false}
+/>`,
+  scope: { Image },
+});
+
 export const Basic = {
   render: (args: ImageProps) => (
     <>

package/src/info/Info.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { lorem10 } from '../test-utils';
 import Info from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
@@ -22,6 +23,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Info
+  aria-label="Click here for more details"
+  title="Fast transfer hint"
+  content="Your address has been verified, no more actions are required."
+/>`,
+  scope: { ...globalScope, Info },
+});
+
 export const Basic: Story = {
   ...withVariantConfig(['default', 'dark', 'rtl']),
 };

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -1,5 +1,9 @@
 import { userEvent, within, fn } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
 import { Field, FieldProps } from '../field/Field';
 import { Meta, type StoryObj } from '@storybook/react-webpack5';
@@ -24,6 +28,25 @@ const meta: Meta<typeof InputWithDisplayFormat> = {
 } satisfies Meta<typeof InputWithDisplayFormat>;
 export default meta;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Sort Code" id="sort-code">
+      <InputWithDisplayFormat
+        id="sort-code"
+        placeholder="**-**-**"
+        displayPattern="**-**-**"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     label: 'Sort Code',

package/src/inputs/InputGroup.story.tsx

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Button } from '..';
 import { Field } from '../field/Field';
 
@@ -18,6 +22,39 @@ export default {
 
 type Story = StoryObj<typeof InputGroup>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Search">
+      <InputGroup
+        addonStart={{
+          content: <Search size={24} />,
+          initialContentWidth: 24,
+        }}
+        addonEnd={{
+          content: (
+            <Button v2 size="sm" onClick={() => setValue('')}>
+              Clear
+            </Button>
+          ),
+          interactive: true,
+          padding: 'sm',
+        }}
+      >
+        <Input
+          placeholder="Search by name..."
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </InputGroup>
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const WithPrefix: Story = {
   render: (args) => <InputGroupWithPrefix {...args} />,
   args: {

package/src/inputs/SearchInput.story.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Size } from '../common';
 import { Field } from '../field/Field';
 
@@ -13,6 +17,24 @@ export default {
 
 type Story = StoryObj<typeof SearchInput>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Search">
+      <SearchInput
+        size="md"
+        shape="pill"
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: (args) => <SearchInputBasic {...args} />,
   args: {

package/src/inputs/SelectInput/_stories/SelectInput.story.tsx

@@ -5,6 +5,10 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../../../button';
 import { getMonthNames } from '../../../common/dateUtils';
 import Drawer from '../../../drawer';
@@ -307,6 +311,44 @@ export const Playground: StoryObj<PlaygroundArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const months = [
+    { id: 1, name: 'January' },
+    { id: 2, name: 'February' },
+    { id: 3, name: 'March' },
+    { id: 4, name: 'April' },
+    { id: 5, name: 'May' },
+    { id: 6, name: 'June' },
+  ];
+
+  const [selected, setSelected] = React.useState(undefined);
+
+  return (
+    <Field label="Select a month">
+      <SelectInput
+        size="lg"
+        filterable
+        filterPlaceholder="Type a month name"
+        placeholder="Choose a month"
+        items={months.map((month) => ({
+          type: 'option',
+          value: month,
+          filterMatchers: [month.name],
+        }))}
+        renderValue={(month) => (
+          <SelectInputOptionContent title={month.name} />
+        )}
+        value={selected}
+        onChange={(month) => setSelected(month)}
+        onClear={() => setSelected(undefined)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 /**
  * The simplest usage: a flat list of options with no icons or grouping.
  * `renderValue` controls what is shown in both the trigger and each dropdown row.

package/src/inputs/TextArea.story.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 import { Sentiment } from '../common';
 import { TextArea } from './TextArea';
@@ -54,6 +58,24 @@ export const Playground: Story = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Message" required={false}>
+      <TextArea
+        maxLength={200}
+        placeholder="Type something..."
+        value={value}
+        onChange={({ target }) => setValue(target.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: () => {
     const [value, setValue] = useState('');

package/src/instructionsList/InstructionsList.story.tsx

@@ -4,6 +4,10 @@ import { fn } from 'storybook/test';
 import Link from '../link';
 
 import InstructionsList, { InstructionsListProps } from './InstructionsList';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: InstructionsList,
@@ -13,6 +17,21 @@ export default {
 
 type Story = StoryObj<typeof InstructionsList>;
 
+export const Sandbox = createSandboxStory({
+  code: `<InstructionsList
+  sort="dosFirst"
+  dos={[
+    'Do an initial money transfer',
+    'Invite at least 3 friends',
+  ]}
+  donts={[
+    'Paying extra hidden fees for transfers',
+    'Use bad exchange rate',
+  ]}
+/>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     sort: 'dosFirst',

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

@@ -31706,8 +31706,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;
@@ -31759,7 +31759,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -31829,7 +31830,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 
 .wds-info-prompt__content {
@@ -31895,7 +31897,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);
@@ -31930,11 +31933,13 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --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 +32080,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 +32134,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`,
   },
 };
+