@transferwise/components 46.147.0 → 46.148.1

package/src/sticky/Sticky.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Sticky from './Sticky';
 import { allModes } from '../../.storybook/modes';
 
@@ -45,7 +46,27 @@ export default meta;
 // Represents a story object for the `Sticky` component.
 type Story = StoryObj<typeof Sticky>;
 
-export const Default: Story = {}; // Default story with no additional props
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(!open)}>
+        {open ? 'Close' : 'Open'} Sticky
+      </Button>
+      <Sticky open={open} position="bottom">
+        <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
+          <p className="m-b-0">Sticky content pinned to the bottom.</p>
+        </div>
+      </Sticky>
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+
+export const Default: Story = {};
 
 export const PositionTop: Story = {
   args: {

package/src/switch/Switch.story.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { fn } from 'storybook/test';
 
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Switch, { SwitchProps } from './Switch';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
@@ -55,6 +56,22 @@ export const Playground: Story = storySourceWithoutNoise({
   },
 });
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Field id="sandbox-field" label="Enable notifications">
+      <Switch
+        checked={checked}
+        onClick={() => setChecked((prev) => !prev)}
+      />
+    </Field>
+  );
+};`,
+  scope: { ...globalScope, Switch },
+});
+
 /**
  * Three labelling patterns: <a href="?path=/docs/forms-label--docs">Label</a>, `aria-labelledby`, and <a href="?path=/docs/forms-field--docs">Field</a>. <br />
  * Use Label for simple label-input pairs. Use `aria-labelledby` to reference existing text as the accessible name. Use Field for form layouts with labels, descriptions, and validation.

package/src/table/Table.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Table from './Table';
 import { TableHeaderType } from './TableHeader';
 import { TableRowType, TableRowClickableType } from './TableRow';
@@ -356,6 +357,37 @@ const tableData = {
   ] satisfies TableRowType[] | TableRowClickableType[],
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Table
+  data={{
+    headers: [
+      { header: 'Employee', width: '200px' },
+      { header: 'Location' },
+      { header: 'Payment', alignment: 'right' },
+    ],
+    rows: [
+      {
+        id: 0,
+        cells: [
+          { cell: { type: 'leading', primaryText: 'Bob Brown', secondaryText: 'Engineer', avatar: { profileName: 'Bob Brown' } } },
+          { cell: { type: 'text', text: 'FR, Paris' } },
+          { cell: { type: 'currency', primaryCurrency: { amount: 12345.67, currency: 'eur' } }, alignment: 'right' },
+        ],
+      },
+      {
+        id: 1,
+        cells: [
+          { cell: { type: 'leading', primaryText: 'Jane Smith', secondaryText: 'Designer', avatar: { profileName: 'Jane Smith' } } },
+          { cell: { type: 'text', text: 'UK, London' } },
+          { cell: { type: 'currency', primaryCurrency: { amount: 34567.89, currency: 'gbp' } }, alignment: 'right' },
+        ],
+      },
+    ],
+  }}
+/>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   args: {
     data: tableData,

package/src/tabs/Tabs.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { Width } from '../common';
 
@@ -9,6 +10,36 @@ export default {
   title: 'Navigation/Tabs',
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [selected, setSelected] = React.useState(0);
+
+  return (
+    <Tabs
+      name="tabs-sandbox"
+      tabs={[
+        {
+          title: 'First tab',
+          content: <div className="p-a-2">Content for the first tab.</div>,
+        },
+        {
+          title: 'Second tab',
+          content: <div className="p-a-2">Content for the second tab.</div>,
+        },
+        {
+          title: 'Third tab',
+          disabled: true,
+          content: <div className="p-a-2">This tab is disabled.</div>,
+        },
+      ]}
+      selected={selected}
+      onTabSelect={(index) => setSelected(index)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   const [selected, setSelected] = useState(0);
   return (

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -1,6 +1,10 @@
 import { StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
 import { Field } from '../field/Field';
 
@@ -11,6 +15,25 @@ export default {
 
 type Story = StoryObj<typeof TextareaWithDisplayFormat>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Field label="Gift card code" id="gift-card">
+      <TextareaWithDisplayFormat
+        id="gift-card"
+        value={value}
+        maxLength={16}
+        displayPattern="**** - **** - ****"
+        onChange={(event) => setValue(event.target.value)}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: () => {
     const label = 'Textarea with display format';

package/src/tile/Tile.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Size } from '../common';
 import AvatarView from '../avatarView';
 import Tile from '.';
@@ -43,6 +44,18 @@ export default meta;
 
 type Story = StoryObj<typeof Tile>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Tile
+  media={<AvatarView profileName="Hank Miller" />}
+  title="Hank Miller"
+  description="Click here to send money to Mr. Miller"
+  href="#"
+  size={Size.MEDIUM}
+  onClick={() => console.log('clicked')}
+/>`,
+  scope: { ...globalScope, Tile },
+});
+
 export const WithImage: Story = {};
 
 export const WithAvatar: Story = {

package/src/title/Title.story.tsx

@@ -1,12 +1,23 @@
 import { Typography } from '../common/propsValues/typography';
 
 import Title from './Title';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Title,
   title: 'Typography/Title',
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Title type="title-group">
+  Group Title
+</Title>`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   return (
     <>
@@ -26,3 +37,4 @@ export const Basic = () => {
     </>
   );
 };
+

package/src/tooltip/Tooltip.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../button';
 import Tooltip from './Tooltip';
 
@@ -20,4 +21,11 @@ export default {
 
 type Story = StoryObj<typeof Tooltip>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Tooltip label="Hey I'm the tooltip text — edit me!" position="bottom">
+  <Button v2 size="md">Hover me</Button>
+</Tooltip>`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {};

package/src/typeahead/Typeahead.story.tsx

@@ -3,6 +3,10 @@ import { Search as SearchIcon } from '@transferwise/icons';
 import { userEvent, within, fn } from 'storybook/test';
 import { useState } from 'react';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Sentiment, Size } from '../common';
 import { Input } from '../inputs/Input';
 import { Field } from '../field/Field';
@@ -73,6 +77,35 @@ const meta: Meta<typeof Typeahead> = {
 };
 export default meta;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [options, setOptions] = React.useState([
+    { label: 'British pound', note: 'GBP' },
+    { label: 'Euro', note: 'EUR' },
+    { label: 'US Dollar', note: 'USD' },
+    { label: 'Japanese yen', note: 'JPY' },
+    { label: 'Australian dollar', note: 'AUD' },
+  ]);
+
+  return (
+    <Field label="Select a currency" id="typeahead-sandbox">
+      <Typeahead
+        id="typeahead-sandbox"
+        name="currency"
+        placeholder="Search currencies..."
+        clearable
+        addon={<Search size={24} />}
+        options={options}
+        onSearch={() => {
+          setTimeout(() => setOptions(options), 1000);
+        }}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {
   render: function Render(args) {
     const [options, setOptions] = useState([

package/src/upload/Upload.story.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';
 
@@ -138,6 +142,26 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Upload
+  usAccept="image/*"
+  usLabel="Front of your ID document"
+  usPlaceholder="Drag and drop file less than 5MB"
+  usButtonText="Or Select File"
+  usDropMessage="Drop file to start upload"
+  size="md"
+  httpOptions={{
+    url: 'https://httpbin.org/post',
+    method: 'POST',
+  }}
+  onStart={(file) => console.log('Upload started', file.name)}
+  onSuccess={(response, fileName) => console.log('Upload complete', fileName)}
+  onFailure={(error) => console.log('Upload failed', error)}
+  onCancel={() => console.log('Upload cancelled')}
+/>`,
+  scope: { ...globalScope, Upload },
+});
+
 export const Basic: Story = {
   args: {
     usAccept: 'image/*',

package/src/uploadInput/UploadInput.story.tsx

@@ -1,5 +1,9 @@
 import { StoryFn, Meta } from '@storybook/react-webpack5';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
@@ -38,6 +42,33 @@ const props = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const onUploadFile = () => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve({ id: Math.round(Math.random() * 10000), url: '#' }), 2000);
+    });
+  };
+
+  const onDeleteFile = () => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve(), 1000);
+    });
+  };
+
+  return (
+    <Field label="Upload documents">
+      <UploadInput
+        multiple
+        onUploadFile={onUploadFile}
+        onDeleteFile={onDeleteFile}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
+
 const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
 
 export const SingleFile: Story = Template.bind({});