@transferwise/components 46.147.0 → 46.148.0

package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCAqHrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCA8HrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.147.0",
+  "version": "46.148.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/accordion/Accordion.story.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { Scroll, Size } from '../common';
 import Modal from '../modal';
@@ -89,6 +90,30 @@ const meta: Meta<typeof Accordion> = {
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Accordion
+  indexOpen={1}
+  items={[
+    {
+      title: 'Item 1',
+      content: 'I can be text',
+      icon: <Freeze size={24} />,
+    },
+    {
+      title: 'Item 2 with icon',
+      content: <span>I can be a node</span>,
+      icon: <HappyEmoji size={24} />,
+    },
+    {
+      title: 'Item 3',
+      content: 'I can be text',
+      icon: <New size={24} />,
+    },
+  ]}
+/>`,
+  scope: globalScope,
+});
+
 export const Default: Story = {
   args: {
     indexOpen: 0,

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze } from '@transferwise/icons';
 import { Flag } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
@@ -13,6 +14,15 @@ export default {
 
 type Story = StoryObj<typeof AvatarLayout>;
 
+export const Sandbox = createSandboxStory({
+  code: `<AvatarLayout
+  size={48}
+  orientation="diagonal"
+  avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+/>`,
+  scope: globalScope,
+});
+
 const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];
 
 export const Diagonal: Story = {

package/src/avatarView/AvatarView.story.tsx

@@ -17,6 +17,7 @@ import {
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { ProfileType } from '../common';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
@@ -28,6 +29,13 @@ export default {
 
 type Story = StoryObj<typeof AvatarView>;
 
+export const Sandbox = createSandboxStory({
+  code: `<AvatarView size={48} badge={{ flagCode: 'GBP' }}>
+  <Freeze />
+</AvatarView>`,
+  scope: globalScope,
+});
+
 const profileName1 = 'Wolter White';
 const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];

package/src/body/Body.story.tsx

@@ -2,12 +2,23 @@ import { Typography } from '../common/propsValues/typography';
 import Title from '../title';
 
 import Body from './Body';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   title: 'Typography/Body',
   component: Body,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Body type="body-default">
+  We're building the world's most international account.
+</Body>`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   return (
     <>
@@ -126,3 +137,4 @@ export const Basic = () => {
     </>
   );
 };
+

package/src/button/_stories/Button.story.tsx

@@ -322,7 +322,13 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
 };
 
 export const Sandbox = createSandboxStory({
-  code: `<Button v2 size="md" onClick={console.log}>
+  code: `<Button
+  v2
+  priority="primary"
+  sentiment="default"
+  size="md"
+  addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+>
   Click me
 </Button>`,
   scope: globalScope,

package/src/calendar/Calendar.story.tsx

@@ -1,6 +1,10 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Calendar, { type CalendarProps } from './Calendar';
 import Modal from '../modal';
 import Button from '../button';
@@ -9,13 +13,6 @@ import Button from '../button';
 export default {
   component: Calendar,
   title: 'Forms/Calendar',
-  decorators: [
-    (Story: React.ComponentType) => (
-      <div style={{ maxWidth: 500, margin: '0 auto' }}>
-        <Story />
-      </div>
-    ),
-  ],
   argTypes: {
     monthFormat: { control: 'select', options: ['long', 'short'] },
     min: { control: 'date' },
@@ -31,6 +28,21 @@ theFuture.setUTCDate(epoch.getUTCDate() + 10);
 const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState(new Date('2024-06-15'));
+
+  return (
+    <Calendar
+      monthFormat="long"
+      value={value}
+      onChange={(date) => setValue(date)}
+    />
+  );
+};`,
+  scope: { ...globalScope, Calendar },
+});
+
 export const Basic: Story = {
   render: (args: CalendarProps) => {
     const [value, setValue] = useState<Date | null>(epoch);

package/src/carousel/Carousel.story.tsx

@@ -1,5 +1,6 @@
 import type { Args } from '@storybook/react-webpack5';
 import { Illustration } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Display from '../display';
 
@@ -53,6 +54,40 @@ const carouselCards: CarouselCard[] = [
   },
 ];
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const cards = [
+    {
+      id: 'card-1',
+      type: 'button',
+      onClick: console.log,
+      content: (
+        <div className="d-flex p-a-1 flex-column align-items-center">
+          <Illustration disablePadding name="globe" size="small" alt="" />
+        </div>
+      ),
+    },
+    {
+      id: 'card-2',
+      type: 'promo',
+      href: '#',
+      title: 'Wise',
+      description: 'The best way to move money internationally',
+    },
+    {
+      id: 'card-3',
+      type: 'anchor',
+      href: '#',
+      hrefTarget: '_blank',
+      content: <Display type="display-small">Get Quick Pay</Display>,
+    },
+  ];
+
+  return <Carousel header="Carousel heading" cards={cards} />;
+};`,
+  scope: globalScope,
+});
+
 export const CarouselDefault = {
   render: (args: Args) => {
     return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;

package/src/checkbox/Checkbox.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 
 import Checkbox from './Checkbox';
@@ -19,6 +23,22 @@ export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox
+      label="I agree to the terms and conditions"
+      secondary="Please read before accepting"
+      checked={checked}
+      onChange={() => setChecked((prev) => !prev)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {};
 
 export const Multiple: Story = {

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -3,6 +3,7 @@ import { fn } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import CheckboxButton, { type CheckboxButtonProps } from './CheckboxButton';
 import { Label } from '../label/Label';
 
@@ -89,6 +90,21 @@ export const Playground: Story = storySourceWithoutNoise({
   },
 });
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <CheckboxButton
+      aria-label="Toggle email updates"
+      checked={checked}
+      onChange={(event) => setChecked(event.currentTarget.checked)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 /** Disabled state — checked and unchecked. */
 export const Disabled: Story = {
   decorators: [withColumnLayout],

package/src/chevron/Chevron.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Chevron from './Chevron';
 
@@ -9,6 +10,11 @@ export default {
 
 type Story = StoryObj<typeof Chevron>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Chevron orientation="bottom" size="md" />`,
+  scope: {Chevron},
+});
+
 export const Basic: Story = {
   args: {
     orientation: 'top',

package/src/chips/Chips.story.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import Chips, { type ChipValue, type ChipsProps } from './Chips';
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 /**
  * Can be used for making a <a href="?path=/story/actions-chips--choice">choice</a>, or as a <a href="?path=/story/actions-chips--filter">filter</a> with multiple options.
@@ -91,6 +92,28 @@ export const Playground: Story = storySourceWithoutNoise<typeof Chips>({
   },
 });
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [selected, setSelected] = React.useState('accounting');
+
+  return (
+    <Chips
+      chips={[
+        { value: 'all', label: 'All' },
+        { value: 'accounting', label: 'Accounting' },
+        { value: 'payroll', label: 'Payroll' },
+        { value: 'reporting', label: 'Reporting' },
+        { value: 'payments', label: 'Payments' },
+      ]}
+      selected={selected}
+      onChange={({ selectedValue }) => setSelected(selectedValue)}
+      aria-label="Category filter"
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 /**
  * The user can select any number of chips with the selected prop as an array (`multiple` prop set to `true`). <br />
  * <a href="https://docs.wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>

package/src/circularButton/CircularButton.story.tsx

@@ -2,6 +2,7 @@ import * as Icons from '@transferwise/icons';
 
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import CircularButton, { CircularButtonProps } from './CircularButton';
 import Title from '../title';
 import SentimentSurface from '../sentimentSurface';
@@ -42,6 +43,18 @@ type Story = StoryObj<typeof CircularButton>;
 /** Explore all props via the controls panel. */
 export const Playground: Story = {};
 
+export const Sandbox = createSandboxStory({
+  code: `<CircularButton
+  icon={<Freeze />}
+  priority="primary"
+  type="default"
+  onClick={() => console.log('clicked')}
+>
+  Freeze card
+</CircularButton>`,
+  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/common/baseCard/BaseCard.story.tsx

@@ -1,4 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 
 import { lorem10 } from '../../test-utils';
 import Title from '../../title';
@@ -14,6 +18,14 @@ const meta: Meta<typeof BaseCard> = {
 export default meta;
 type Story = StoryObj<typeof BaseCard>;
 
+export const Sandbox = createSandboxStory({
+  code: `<BaseCard onDismiss={() => console.log('dismissed')}>
+  <Title type="title-section">Money without borders</Title>
+  <Body>Send money abroad with low fees and the real exchange rate.</Body>
+</BaseCard>`,
+  scope: globalScope,
+});
+
 export const Default: Story = {
   args: {
     children: (

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -2,6 +2,10 @@ import { action } from 'storybook/actions';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag } from '@transferwise/icons';
 import { useState } from 'react';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../../button';
 import { lorem10 } from '../../test-utils';
 import Title from '../../title/Title';
@@ -38,6 +42,23 @@ export default {
 
 type Story = StoryObj<typeof BottomSheet>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(true)}>Open BottomSheet</Button>
+      <BottomSheet open={open} onClose={() => setOpen(false)}>
+        <h2 className="p-x-2">Manage your card</h2>
+        <p className="p-x-2">Select an action to manage your card settings.</p>
+      </BottomSheet>
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     children: (

package/src/common/circle/Circle.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Circle from './Circle';
 import { Person } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { CircleProps } from '.';
 import Body from '../../body';
 import { withVariantConfig } from '../../../.storybook/helpers';
@@ -13,6 +17,13 @@ export default {
 
 type Story = StoryObj<typeof Circle>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Circle size={40} className="bg-neutral">
+  <Person size={16} />
+</Circle>`,
+  scope: { ...globalScope, Circle },
+});
+
 export const Basic: Story = {
   args: {
     children: 'NP',

package/src/container/Container.story.tsx

@@ -4,6 +4,10 @@ import Body from '../body';
 import Title from '../title';
 
 import Container from './Container';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Container,
@@ -74,6 +78,14 @@ export const Playground: Story = {
   ),
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Container size="standard">
+  <Title type="title-section">Page content</Title>
+  <Body>This content is constrained by the Container width.</Body>
+</Container>`,
+  scope: globalScope,
+});
+
 /**
  * Four sizes control the maximum width of the container. <br />
  * `fluid` fills the full viewport, `standard` caps at 1160px, `narrow` at 840px, and `compact` at

package/src/dateInput/DateInput.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { DateInput } from '..';
 
 const meta: Meta<typeof DateInput> = {
@@ -12,6 +16,22 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState({ day: 15, month: 5, year: 1990 });
+
+  return (
+    <Field label="Date of birth">
+      <DateInput
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     onChange: fn(),

package/src/dateLookup/DateLookup.story.tsx

@@ -1,5 +1,9 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';
@@ -28,6 +32,25 @@ theFuture.setUTCDate(epoch.getUTCDate() + 10);
 const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState(new Date('2024-06-15'));
+
+  return (
+    <DateLookup
+      size="md"
+      label="Select a date"
+      monthFormat="long"
+      placeholder="Choose date"
+      clearable
+      value={value}
+      onChange={(date) => setValue(date)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: (args: DateLookupProps) => {
     const [value, setValue] = useState<Date | null>(epoch);

package/src/decision/Decision.story.tsx

@@ -3,6 +3,10 @@ import { fn } from 'storybook/test';
 import { Size } from '../common';
 import AvatarView from '../avatarView';
 import Decision, { DecisionPresentation, DecisionType } from '.';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Decision,
@@ -14,6 +18,38 @@ export default {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Decision
+  presentation="LIST_BLOCK"
+  type="NAVIGATION"
+  size="md"
+  showMediaCircleInList
+  options={[
+    {
+      title: 'Send money',
+      description: 'Fast international transfers at the real exchange rate.',
+      href: '#',
+      'aria-label': 'Send money',
+      media: {
+        block: <Illustration name="globe" alt="" disablePadding />,
+        list: <AvatarView profileName="Alice Smith" />,
+      },
+    },
+    {
+      title: 'Receive money',
+      description: 'Get paid from abroad with your account details.',
+      href: '#',
+      'aria-label': 'Receive money',
+      media: {
+        block: <Illustration name="confetti" alt="" disablePadding />,
+        list: <AvatarView profileName="Bob Jones" />,
+      },
+    },
+  ]}
+/>`,
+  scope: globalScope,
+});
+
 export const Basic = function Render() {
   return (
     <Decision

package/src/definitionList/DefinitionList.story.tsx

@@ -6,6 +6,10 @@ import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
 import { lorem10 } from '../test-utils';
 import Section from '../section';
 import Header from '../header';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: DefinitionList,
@@ -38,6 +42,18 @@ const definitions = [
   },
 ];
 
+export const Sandbox = createSandboxStory({
+  code: `<DefinitionList
+  layout="VERTICAL_TWO_COLUMN"
+  definitions={[
+    { title: 'Name', value: 'Alice Smith', key: 'name' },
+    { title: 'Amount', value: '1,234.56 GBP', key: 'amount' },
+    { title: 'Status', value: 'Completed', key: 'status' },
+  ]}
+/>`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   return layouts.map((layout) => (
     <Section key={layout}>