@transferwise/components 46.146.0 → 46.148.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/build/main.css +66 -0
  2. package/build/nudge/Nudge.js.map +1 -1
  3. package/build/nudge/Nudge.mjs.map +1 -1
  4. package/build/prompt/CriticalBanner/CriticalBanner.js +78 -68
  5. package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -1
  6. package/build/prompt/CriticalBanner/CriticalBanner.mjs +79 -69
  7. package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
  8. package/build/styles/main.css +66 -0
  9. package/build/styles/nudge/Nudge.css +11 -0
  10. package/build/styles/prompt/CriticalBanner/CriticalBanner.css +48 -0
  11. package/build/types/nudge/Nudge.d.ts +1 -1
  12. package/build/types/nudge/Nudge.d.ts.map +1 -1
  13. package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
  14. package/package.json +23 -19
  15. package/src/accordion/Accordion.story.tsx +25 -0
  16. package/src/avatarLayout/AvatarLayout.story.tsx +10 -0
  17. package/src/avatarView/AvatarView.story.tsx +8 -0
  18. package/src/body/Body.story.tsx +12 -0
  19. package/src/button/_stories/Button.story.tsx +7 -1
  20. package/src/calendar/Calendar.story.tsx +19 -7
  21. package/src/carousel/Carousel.story.tsx +35 -0
  22. package/src/checkbox/Checkbox.story.tsx +20 -0
  23. package/src/checkboxButton/CheckboxButton.story.tsx +16 -0
  24. package/src/chevron/Chevron.story.tsx +6 -0
  25. package/src/chips/Chips.story.tsx +23 -0
  26. package/src/circularButton/CircularButton.story.tsx +13 -0
  27. package/src/common/baseCard/BaseCard.story.tsx +12 -0
  28. package/src/common/bottomSheet/BottomSheet.story.tsx +21 -0
  29. package/src/common/circle/Circle.story.tsx +11 -0
  30. package/src/container/Container.story.tsx +12 -0
  31. package/src/dateInput/DateInput.story.tsx +20 -0
  32. package/src/dateLookup/DateLookup.story.tsx +23 -0
  33. package/src/decision/Decision.story.tsx +36 -0
  34. package/src/definitionList/DefinitionList.story.tsx +16 -0
  35. package/src/dimmer/Dimmer.story.tsx +24 -0
  36. package/src/display/Display.story.tsx +11 -0
  37. package/src/divider/Divider.story.tsx +6 -0
  38. package/src/drawer/Drawer.story.tsx +25 -0
  39. package/src/dropFade/DropFade.story.tsx +27 -0
  40. package/src/emphasis/Emphasis.story.tsx +10 -0
  41. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +37 -0
  42. package/src/field/Field.story.tsx +16 -0
  43. package/src/flowNavigation/FlowNavigation.story.tsx +25 -0
  44. package/src/header/Header.story.tsx +17 -0
  45. package/src/iconButton/IconButton.story.tsx +14 -0
  46. package/src/image/Image.story.tsx +11 -0
  47. package/src/info/Info.story.tsx +10 -0
  48. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +23 -0
  49. package/src/inputs/InputGroup.story.tsx +37 -0
  50. package/src/inputs/SearchInput.story.tsx +22 -0
  51. package/src/inputs/SelectInput/_stories/SelectInput.story.tsx +42 -0
  52. package/src/inputs/TextArea.story.tsx +22 -0
  53. package/src/instructionsList/InstructionsList.story.tsx +19 -0
  54. package/src/label/Label.story.tsx +17 -0
  55. package/src/link/Link.story.tsx +11 -0
  56. package/src/list/List.story.tsx +19 -0
  57. package/src/listItem/_stories/ListItem.story.tsx +20 -0
  58. package/src/loader/Loader.story.tsx +6 -0
  59. package/src/logo/Logo.story.tsx +6 -0
  60. package/src/main.css +66 -0
  61. package/src/markdown/Markdown.story.tsx +17 -0
  62. package/src/modal/Modal.story.tsx +23 -0
  63. package/src/money/Money.story.tsx +7 -0
  64. package/src/moneyInput/MoneyInput.story.tsx +34 -0
  65. package/src/nudge/Nudge.css +11 -0
  66. package/src/nudge/Nudge.less +4 -0
  67. package/src/nudge/Nudge.story.tsx +26 -0
  68. package/src/nudge/Nudge.tsx +2 -1
  69. package/src/overlayHeader/OverlayHeader.story.tsx +10 -0
  70. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +23 -0
  71. package/src/popover/Popover.story.tsx +12 -0
  72. package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +11 -0
  73. package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +11 -0
  74. package/src/processIndicator/ProcessIndicator.story.tsx +10 -0
  75. package/src/progress/Progress.story.tsx +6 -0
  76. package/src/progressBar/ProgressBar.story.tsx +12 -0
  77. package/src/promoCard/PromoCard.story.tsx +15 -0
  78. package/src/promoCard/PromoCardGroup.story.tsx +28 -0
  79. package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +31 -0
  80. package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +9 -0
  81. package/src/prompt/CriticalBanner/CriticalBanner.css +48 -0
  82. package/src/prompt/CriticalBanner/CriticalBanner.less +72 -0
  83. package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +180 -169
  84. package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +25 -6
  85. package/src/prompt/CriticalBanner/CriticalBanner.test.tsx +37 -0
  86. package/src/prompt/CriticalBanner/CriticalBanner.tsx +92 -83
  87. package/src/prompt/CriticalBanner/CriticalBanner.vars.less +1 -0
  88. package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +30 -0
  89. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +14 -0
  90. package/src/radio/Radio.story.tsx +34 -0
  91. package/src/radioGroup/RadioGroup.story.tsx +26 -0
  92. package/src/section/Section.story.tsx +15 -0
  93. package/src/segmentedControl/SegmentedControl.story.tsx +27 -0
  94. package/src/sentimentSurface/SentimentSurface.story.tsx +11 -0
  95. package/src/slidingPanel/SlidingPanel.story.tsx +19 -0
  96. package/src/snackbar/Snackbar.story.tsx +24 -0
  97. package/src/statusIcon/StatusIcon.story.tsx +6 -0
  98. package/src/stepper/Stepper.story.tsx +30 -0
  99. package/src/sticky/Sticky.story.tsx +22 -1
  100. package/src/switch/Switch.story.tsx +17 -0
  101. package/src/table/Table.story.tsx +32 -0
  102. package/src/tabs/Tabs.story.tsx +31 -0
  103. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +23 -0
  104. package/src/tile/Tile.story.tsx +13 -0
  105. package/src/title/Title.story.tsx +12 -0
  106. package/src/tooltip/Tooltip.story.tsx +8 -0
  107. package/src/typeahead/Typeahead.story.tsx +33 -0
  108. package/src/upload/Upload.story.tsx +24 -0
  109. package/src/uploadInput/UploadInput.story.tsx +31 -0
package/src/chevron/Chevron.story.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
2
3
 
3
4
  import Chevron from './Chevron';
4
5
 
@@ -9,6 +10,11 @@ export default {
9
10
 
10
11
  type Story = StoryObj<typeof Chevron>;
11
12
 
13
+ export const Sandbox = createSandboxStory({
14
+ code: `<Chevron orientation="bottom" size="md" />`,
15
+ scope: {Chevron},
16
+ });
17
+
12
18
  export const Basic: Story = {
13
19
  args: {
14
20
  orientation: 'top',
package/src/chips/Chips.story.tsx CHANGED
@@ -4,6 +4,7 @@ import { useState } from 'react';
4
4
 
5
5
  import Chips, { type ChipValue, type ChipsProps } from './Chips';
6
6
  import { storySourceWithoutNoise } from '../../.storybook/helpers';
7
+ import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
7
8
 
8
9
  /**
9
10
  * 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>({
91
92
  },
92
93
  });
93
94
 
95
+ export const Sandbox = createSandboxStory({
96
+ code: `const App = () => {
97
+ const [selected, setSelected] = React.useState('accounting');
98
+
99
+ return (
100
+ <Chips
101
+ chips={[
102
+ { value: 'all', label: 'All' },
103
+ { value: 'accounting', label: 'Accounting' },
104
+ { value: 'payroll', label: 'Payroll' },
105
+ { value: 'reporting', label: 'Reporting' },
106
+ { value: 'payments', label: 'Payments' },
107
+ ]}
108
+ selected={selected}
109
+ onChange={({ selectedValue }) => setSelected(selectedValue)}
110
+ aria-label="Category filter"
111
+ />
112
+ );
113
+ };`,
114
+ scope: globalScope,
115
+ });
116
+
94
117
  /**
95
118
  * The user can select any number of chips with the selected prop as an array (`multiple` prop set to `true`). <br />
96
119
  * <a href="https://docs.wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>
package/src/circularButton/CircularButton.story.tsx CHANGED
@@ -2,6 +2,7 @@ import * as Icons from '@transferwise/icons';
2
2
 
3
3
  import { Meta, StoryObj } from '@storybook/react-webpack5';
4
4
  import { fn } from 'storybook/test';
5
+ import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
5
6
  import CircularButton, { CircularButtonProps } from './CircularButton';
6
7
  import Title from '../title';
7
8
  import SentimentSurface from '../sentimentSurface';
@@ -42,6 +43,18 @@ type Story = StoryObj<typeof CircularButton>;
42
43
  /** Explore all props via the controls panel. */
43
44
  export const Playground: Story = {};
44
45
 
46
+ export const Sandbox = createSandboxStory({
47
+ code: `<CircularButton
48
+ icon={<Freeze />}
49
+ priority="primary"
50
+ type="default"
51
+ onClick={() => console.log('clicked')}
52
+ >
53
+ Freeze card
54
+ </CircularButton>`,
55
+ scope: globalScope,
56
+ });
57
+
45
58
  /**
46
59
  * Priorities set a visual hierarchy amongst the buttons displayed on the
47
60
  * screen to help more important buttons to take precedence over others. <br />
package/src/common/baseCard/BaseCard.story.tsx CHANGED
@@ -1,4 +1,8 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import {
3
+ createSandboxStory,
4
+ globalScope,
5
+ } from '../../../.storybook/components/sandbox/SandboxEditor';
2
6
 
3
7
  import { lorem10 } from '../../test-utils';
4
8
  import Title from '../../title';
@@ -14,6 +18,14 @@ const meta: Meta<typeof BaseCard> = {
14
18
  export default meta;
15
19
  type Story = StoryObj<typeof BaseCard>;
16
20
 
21
+ export const Sandbox = createSandboxStory({
22
+ code: `<BaseCard onDismiss={() => console.log('dismissed')}>
23
+ <Title type="title-section">Money without borders</Title>
24
+ <Body>Send money abroad with low fees and the real exchange rate.</Body>
25
+ </BaseCard>`,
26
+ scope: globalScope,
27
+ });
28
+
17
29
  export const Default: Story = {
18
30
  args: {
19
31
  children: (
package/src/common/bottomSheet/BottomSheet.story.tsx CHANGED
@@ -2,6 +2,10 @@ import { action } from 'storybook/actions';
2
2
  import { Meta, StoryObj } from '@storybook/react-webpack5';
3
3
  import { FastFlag } from '@transferwise/icons';
4
4
  import { useState } from 'react';
5
+ import {
6
+ createSandboxStory,
7
+ globalScope,
8
+ } from '../../../.storybook/components/sandbox/SandboxEditor';
5
9
  import Button from '../../button';
6
10
  import { lorem10 } from '../../test-utils';
7
11
  import Title from '../../title/Title';
@@ -38,6 +42,23 @@ export default {
38
42
 
39
43
  type Story = StoryObj<typeof BottomSheet>;
40
44
 
45
+ export const Sandbox = createSandboxStory({
46
+ code: `const App = () => {
47
+ const [open, setOpen] = React.useState(false);
48
+
49
+ return (
50
+ <>
51
+ <Button v2 onClick={() => setOpen(true)}>Open BottomSheet</Button>
52
+ <BottomSheet open={open} onClose={() => setOpen(false)}>
53
+ <h2 className="p-x-2">Manage your card</h2>
54
+ <p className="p-x-2">Select an action to manage your card settings.</p>
55
+ </BottomSheet>
56
+ </>
57
+ );
58
+ };`,
59
+ scope: globalScope,
60
+ });
61
+
41
62
  export const Basic: Story = {
42
63
  args: {
43
64
  children: (
package/src/common/circle/Circle.story.tsx CHANGED
@@ -1,6 +1,10 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import Circle from './Circle';
3
3
  import { Person } from '@transferwise/icons';
4
+ import {
5
+ createSandboxStory,
6
+ globalScope,
7
+ } from '../../../.storybook/components/sandbox/SandboxEditor';
4
8
  import { CircleProps } from '.';
5
9
  import Body from '../../body';
6
10
  import { withVariantConfig } from '../../../.storybook/helpers';
@@ -13,6 +17,13 @@ export default {
13
17
 
14
18
  type Story = StoryObj<typeof Circle>;
15
19
 
20
+ export const Sandbox = createSandboxStory({
21
+ code: `<Circle size={40} className="bg-neutral">
22
+ <Person size={16} />
23
+ </Circle>`,
24
+ scope: { ...globalScope, Circle },
25
+ });
26
+
16
27
  export const Basic: Story = {
17
28
  args: {
18
29
  children: 'NP',
package/src/container/Container.story.tsx CHANGED
@@ -4,6 +4,10 @@ import Body from '../body';
4
4
  import Title from '../title';
5
5
 
6
6
  import Container from './Container';
7
+ import {
8
+ createSandboxStory,
9
+ globalScope,
10
+ } from '../../.storybook/components/sandbox/SandboxEditor';
7
11
 
8
12
  export default {
9
13
  component: Container,
@@ -74,6 +78,14 @@ export const Playground: Story = {
74
78
  ),
75
79
  };
76
80
 
81
+ export const Sandbox = createSandboxStory({
82
+ code: `<Container size="standard">
83
+ <Title type="title-section">Page content</Title>
84
+ <Body>This content is constrained by the Container width.</Body>
85
+ </Container>`,
86
+ scope: globalScope,
87
+ });
88
+
77
89
  /**
78
90
  * Four sizes control the maximum width of the container. <br />
79
91
  * `fluid` fills the full viewport, `standard` caps at 1160px, `narrow` at 840px, and `compact` at
package/src/dateInput/DateInput.story.tsx CHANGED
@@ -1,6 +1,10 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import { fn } from 'storybook/test';
3
3
 
4
+ import {
5
+ createSandboxStory,
6
+ globalScope,
7
+ } from '../../.storybook/components/sandbox/SandboxEditor';
4
8
  import { DateInput } from '..';
5
9
 
6
10
  const meta: Meta<typeof DateInput> = {
@@ -12,6 +16,22 @@ export default meta;
12
16
 
13
17
  type Story = StoryObj<typeof meta>;
14
18
 
19
+ export const Sandbox = createSandboxStory({
20
+ code: `const App = () => {
21
+ const [value, setValue] = React.useState({ day: 15, month: 5, year: 1990 });
22
+
23
+ return (
24
+ <Field label="Date of birth">
25
+ <DateInput
26
+ value={value}
27
+ onChange={(newValue) => setValue(newValue)}
28
+ />
29
+ </Field>
30
+ );
31
+ };`,
32
+ scope: globalScope,
33
+ });
34
+
15
35
  export const Basic: Story = {
16
36
  args: {
17
37
  onChange: fn(),
package/src/dateLookup/DateLookup.story.tsx CHANGED
@@ -1,5 +1,9 @@
1
1
  import { useState } from 'react';
2
2
  import { StoryObj } from '@storybook/react-webpack5';
3
+ import {
4
+ createSandboxStory,
5
+ globalScope,
6
+ } from '../../.storybook/components/sandbox/SandboxEditor';
3
7
  import { Field } from '..';
4
8
  import { Size } from '../common';
5
9
  import DateLookup, { type DateLookupProps } from './DateLookup';
@@ -28,6 +32,25 @@ theFuture.setUTCDate(epoch.getUTCDate() + 10);
28
32
  const thePast = new Date(epoch);
29
33
  thePast.setUTCDate(epoch.getUTCDate() - 10);
30
34
 
35
+ export const Sandbox = createSandboxStory({
36
+ code: `const App = () => {
37
+ const [value, setValue] = React.useState(new Date('2024-06-15'));
38
+
39
+ return (
40
+ <DateLookup
41
+ size="md"
42
+ label="Select a date"
43
+ monthFormat="long"
44
+ placeholder="Choose date"
45
+ clearable
46
+ value={value}
47
+ onChange={(date) => setValue(date)}
48
+ />
49
+ );
50
+ };`,
51
+ scope: globalScope,
52
+ });
53
+
31
54
  export const Basic: Story = {
32
55
  render: (args: DateLookupProps) => {
33
56
  const [value, setValue] = useState<Date | null>(epoch);
package/src/decision/Decision.story.tsx CHANGED
@@ -3,6 +3,10 @@ import { fn } from 'storybook/test';
3
3
  import { Size } from '../common';
4
4
  import AvatarView from '../avatarView';
5
5
  import Decision, { DecisionPresentation, DecisionType } from '.';
6
+ import {
7
+ createSandboxStory,
8
+ globalScope,
9
+ } from '../../.storybook/components/sandbox/SandboxEditor';
6
10
 
7
11
  export default {
8
12
  component: Decision,
@@ -14,6 +18,38 @@ export default {
14
18
  },
15
19
  };
16
20
 
21
+ export const Sandbox = createSandboxStory({
22
+ code: `<Decision
23
+ presentation="LIST_BLOCK"
24
+ type="NAVIGATION"
25
+ size="md"
26
+ showMediaCircleInList
27
+ options={[
28
+ {
29
+ title: 'Send money',
30
+ description: 'Fast international transfers at the real exchange rate.',
31
+ href: '#',
32
+ 'aria-label': 'Send money',
33
+ media: {
34
+ block: <Illustration name="globe" alt="" disablePadding />,
35
+ list: <AvatarView profileName="Alice Smith" />,
36
+ },
37
+ },
38
+ {
39
+ title: 'Receive money',
40
+ description: 'Get paid from abroad with your account details.',
41
+ href: '#',
42
+ 'aria-label': 'Receive money',
43
+ media: {
44
+ block: <Illustration name="confetti" alt="" disablePadding />,
45
+ list: <AvatarView profileName="Bob Jones" />,
46
+ },
47
+ },
48
+ ]}
49
+ />`,
50
+ scope: globalScope,
51
+ });
52
+
17
53
  export const Basic = function Render() {
18
54
  return (
19
55
  <Decision
package/src/definitionList/DefinitionList.story.tsx CHANGED
@@ -6,6 +6,10 @@ import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
6
6
  import { lorem10 } from '../test-utils';
7
7
  import Section from '../section';
8
8
  import Header from '../header';
9
+ import {
10
+ createSandboxStory,
11
+ globalScope,
12
+ } from '../../.storybook/components/sandbox/SandboxEditor';
9
13
 
10
14
  export default {
11
15
  component: DefinitionList,
@@ -38,6 +42,18 @@ const definitions = [
38
42
  },
39
43
  ];
40
44
 
45
+ export const Sandbox = createSandboxStory({
46
+ code: `<DefinitionList
47
+ layout="VERTICAL_TWO_COLUMN"
48
+ definitions={[
49
+ { title: 'Name', value: 'Alice Smith', key: 'name' },
50
+ { title: 'Amount', value: '1,234.56 GBP', key: 'amount' },
51
+ { title: 'Status', value: 'Completed', key: 'status' },
52
+ ]}
53
+ />`,
54
+ scope: globalScope,
55
+ });
56
+
41
57
  export const Basic = () => {
42
58
  return layouts.map((layout) => (
43
59
  <Section key={layout}>
package/src/dimmer/Dimmer.story.tsx CHANGED
@@ -3,6 +3,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
3
3
  import { useState } from 'react';
4
4
 
5
5
  import { Button, Dimmer } from '..';
6
+ import {
7
+ createSandboxStory,
8
+ globalScope,
9
+ } from '../../.storybook/components/sandbox/SandboxEditor';
6
10
 
7
11
  export default {
8
12
  component: Dimmer,
@@ -16,6 +20,25 @@ export default {
16
20
 
17
21
  type Story = StoryObj<typeof Dimmer>;
18
22
 
23
+ export const Sandbox = createSandboxStory({
24
+ code: `const App = () => {
25
+ const [open, setOpen] = React.useState(false);
26
+
27
+ return (
28
+ <>
29
+ <Button v2 size="md" onClick={() => setOpen(true)}>
30
+ Open dimmer
31
+ </Button>
32
+ <Dimmer
33
+ open={open}
34
+ onClose={() => setOpen(false)}
35
+ />
36
+ </>
37
+ );
38
+ };`,
39
+ scope: globalScope,
40
+ });
41
+
19
42
  export const Basic: Story = {
20
43
  render: (args) => {
21
44
  const [open, setOpen] = useState(false);
@@ -37,3 +60,4 @@ export const Basic: Story = {
37
60
  );
38
61
  },
39
62
  };
63
+
package/src/display/Display.story.tsx CHANGED
@@ -3,12 +3,23 @@ import Money from '../money/Money';
3
3
  import Title from '../title/Title';
4
4
 
5
5
  import Display from './Display';
6
+ import {
7
+ createSandboxStory,
8
+ globalScope,
9
+ } from '../../.storybook/components/sandbox/SandboxEditor';
6
10
 
7
11
  export default {
8
12
  title: 'Typography/Display',
9
13
  component: Display,
10
14
  };
11
15
 
16
+ export const Sandbox = createSandboxStory({
17
+ code: `<Display type="display-large">
18
+ The world's most international account
19
+ </Display>`,
20
+ scope: globalScope,
21
+ });
22
+
12
23
  export const Basic = () => {
13
24
  const EN = 'compounding without subscription compounding without subscription'; // Made for hyphenation testing
14
25
  const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
package/src/divider/Divider.story.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import Divider from './Divider';
3
+ import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
3
4
 
4
5
  /**
5
6
  * Wraps stories with a container (e.g., centered or padded).
@@ -86,6 +87,11 @@ export const Playground: Story = {
86
87
  },
87
88
  };
88
89
 
90
+ export const Sandbox = createSandboxStory({
91
+ code: `<Divider level="section" />`,
92
+ scope: { Divider },
93
+ });
94
+
89
95
  /**
90
96
  * There are three different types of divider – `section`, `subsection`, and `content` –
91
97
  * each designed to visually separate or group content. <br />
package/src/drawer/Drawer.story.tsx CHANGED
@@ -3,6 +3,7 @@ import { Position, Priority } from '../common';
3
3
  import { Section, Button, Input, Modal, type DrawerProps, Body } from '..';
4
4
  import Drawer from './Drawer';
5
5
  import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
6
+ import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
6
7
 
7
8
  export default {
8
9
  component: Drawer,
@@ -15,6 +16,30 @@ export default {
15
16
  },
16
17
  };
17
18
 
19
+ export const Sandbox = createSandboxStory({
20
+ code: `const App = () => {
21
+ const [open, setOpen] = React.useState(false);
22
+
23
+ return (
24
+ <>
25
+ <Button v2 onClick={() => setOpen(true)}>Open drawer</Button>
26
+ <Drawer
27
+ open={open}
28
+ position="right"
29
+ headerTitle="Drawer title"
30
+ onClose={() => setOpen(false)}
31
+ footerContent={
32
+ <Button v2 block onClick={() => setOpen(false)}>Done</Button>
33
+ }
34
+ >
35
+ <p>Drawer content goes here.</p>
36
+ </Drawer>
37
+ </>
38
+ );
39
+ };`,
40
+ scope: globalScope,
41
+ });
42
+
18
43
  export const Basic = {
19
44
  args: {
20
45
  position: Position.RIGHT,
package/src/dropFade/DropFade.story.tsx CHANGED
@@ -2,6 +2,7 @@ import { action } from 'storybook/actions';
2
2
  import { useState } from 'react';
3
3
 
4
4
  import { Button, Nudge } from '..';
5
+ import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
5
6
 
6
7
  import DropFade from './DropFade';
7
8
 
@@ -10,6 +11,32 @@ export default {
10
11
  component: DropFade,
11
12
  };
12
13
 
14
+ export const Sandbox = createSandboxStory({
15
+ code: `const App = () => {
16
+ const [show, setShow] = React.useState(false);
17
+
18
+ return (
19
+ <>
20
+ <DropFade show={show}>
21
+ <div>
22
+ <Nudge
23
+ mediaName="globe"
24
+ title="Did you know it's cool to be Wise?"
25
+ link="Get Wise"
26
+ href="https://wise.com"
27
+ onDismiss={() => setShow(false)}
28
+ />
29
+ </div>
30
+ </DropFade>
31
+ <Button v2 className="m-t-3" block onClick={() => setShow(!show)}>
32
+ Toggle DropFade
33
+ </Button>
34
+ </>
35
+ );
36
+ };`,
37
+ scope: globalScope,
38
+ });
39
+
13
40
  export const Basic = () => {
14
41
  const [open, setOpen] = useState(false);
15
42
  return (
package/src/emphasis/Emphasis.story.tsx CHANGED
@@ -1,6 +1,10 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
 
3
3
  import Emphasis from './Emphasis';
4
+ import {
5
+ createSandboxStory,
6
+ globalScope,
7
+ } from '../../.storybook/components/sandbox/SandboxEditor';
4
8
 
5
9
  export default {
6
10
  component: Emphasis,
@@ -9,6 +13,11 @@ export default {
9
13
 
10
14
  type Story = StoryObj<typeof Emphasis>;
11
15
 
16
+ export const Sandbox = createSandboxStory({
17
+ code: `<Emphasis text="This is <important>important</important> and this is <positive>positive</positive>." />`,
18
+ scope: globalScope,
19
+ });
20
+
12
21
  export const Basic: Story = {
13
22
  args: {
14
23
  text:
@@ -19,3 +28,4 @@ export const Basic: Story = {
19
28
  '<script>alert("nice try!")</script>',
20
29
  },
21
30
  };
31
+
package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx CHANGED
@@ -3,6 +3,10 @@ import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
3
3
  import { fn } from 'storybook/test';
4
4
  import { Flag } from '@wise/art';
5
5
  import { Rewards, Tags } from '@transferwise/icons';
6
+ import {
7
+ createSandboxStory,
8
+ globalScope,
9
+ } from '../../.storybook/components/sandbox/SandboxEditor';
6
10
  import { storySourceWithoutNoise } from '../../.storybook/helpers';
7
11
  import { lorem10, lorem5 } from '../test-utils';
8
12
  import { Sentiment } from '../common';
@@ -81,6 +85,39 @@ export const Playground: Story = {
81
85
  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
82
86
  };
83
87
 
88
+ export const Sandbox = createSandboxStory({
89
+ code: `const App = () => {
90
+ const [amount, setAmount] = React.useState(1234.56);
91
+ const [currency, setCurrency] = React.useState('GBP');
92
+
93
+ return (
94
+ <ExpressiveMoneyInput
95
+ label="You send"
96
+ amount={amount}
97
+ currency={currency}
98
+ onAmountChange={(value) => setAmount(value)}
99
+ currencySelector={{
100
+ options: [
101
+ {
102
+ title: 'Popular',
103
+ currencies: [
104
+ { code: 'GBP', label: 'British pound', keywords: ['british'] },
105
+ { code: 'EUR', label: 'Euro', keywords: ['euro'] },
106
+ { code: 'USD', label: 'US Dollar', keywords: ['dollar'] },
107
+ ],
108
+ },
109
+ ],
110
+ onChange: (selected) => setCurrency(selected.code),
111
+ onSearchChange: () => {},
112
+ onOpen: () => {},
113
+ }}
114
+ inlinePrompt={{ message: 'Low cost transfer', sentiment: 'positive' }}
115
+ />
116
+ );
117
+ };`,
118
+ scope: globalScope,
119
+ });
120
+
84
121
  export const WithInitialAmount = {
85
122
  args: {
86
123
  amount: 1500,
package/src/field/Field.story.tsx CHANGED
@@ -1,6 +1,10 @@
1
1
  import { useState } from 'react';
2
2
  import { action } from 'storybook/actions';
3
3
 
4
+ import {
5
+ createSandboxStory,
6
+ globalScope,
7
+ } from '../../.storybook/components/sandbox/SandboxEditor';
4
8
  import { Input } from '../inputs/Input';
5
9
  import { Field, FieldProps } from './Field';
6
10
  import { Sentiment } from '../common';
@@ -21,6 +25,18 @@ export default {
21
25
  },
22
26
  };
23
27
 
28
+ export const Sandbox = createSandboxStory({
29
+ code: `<Field
30
+ label="Email address"
31
+ description="We'll send confirmation here"
32
+ message="Please enter a valid email"
33
+ sentiment="negative"
34
+ >
35
+ <Input placeholder="you@example.com" />
36
+ </Field>`,
37
+ scope: globalScope,
38
+ });
39
+
24
40
  export const Basic = (args: FieldProps) => {
25
41
  const [value, setValue] = useState<string | undefined>('This is some text');
26
42
  return (
package/src/flowNavigation/FlowNavigation.story.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import { Breakpoint } from '@transferwise/neptune-tokens';
3
3
  import { useState } from 'react';
4
+ import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
4
5
  import AvatarView from '../avatarView';
5
6
  import Body from '../body';
6
7
  import Button from '../button';
@@ -54,6 +55,30 @@ const viewports = [
54
55
  Breakpoint.LARGE + 10,
55
56
  ];
56
57
 
58
+ export const Sandbox = createSandboxStory({
59
+ code: `const App = () => {
60
+ const [activeStep, setActiveStep] = React.useState(0);
61
+
62
+ return (
63
+ <FlowNavigation
64
+ avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
65
+ logo={<Logo />}
66
+ activeStep={activeStep}
67
+ onClose={() => console.log('close')}
68
+ onGoBack={() => setActiveStep((prev) => (prev > 0 ? prev - 1 : 0))}
69
+ steps={[
70
+ { label: 'Amount', hoverLabel: '100 GBP', onClick: () => setActiveStep(0) },
71
+ { label: 'You', hoverLabel: 'Elena Durante', onClick: () => setActiveStep(1) },
72
+ { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
73
+ { label: 'Review', onClick: () => setActiveStep(3) },
74
+ { label: 'Pay', onClick: () => setActiveStep(4) },
75
+ ]}
76
+ />
77
+ );
78
+ };`,
79
+ scope: globalScope,
80
+ });
81
+
57
82
  export const Variants: Story = {
58
83
  args: {
59
84
  profileType: ProfileType.PERSONAL,