@transferwise/components 46.100.1 → 46.100.2

package/src/slidingPanel/SlidingPanel.story.tsx

@@ -1,32 +1,49 @@
-import { select } from '@storybook/addon-knobs';
-import { useState } from 'react';
-
+import React from 'react';
 import Button from '../button';
-
-import SlidingPanel from './SlidingPanel';
+import SlidingPanel, { type SlidingPanelProps } from './SlidingPanel';
 
 export default {
   component: SlidingPanel,
   title: 'Dialogs/SlidingPanel',
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+    },
+  },
+  parameters: {
+    docs: {
+      source: { type: 'code' },
+    },
+  },
+  decorators: [
+    (Story: any) => (
+      <div style={{ paddingTop: '80px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
-export const Basic = () => {
-  const [open, setOpen] = useState(false);
-
-  const position = select('position', ['top', 'right', 'bottom', 'left'], 'top');
+export const Basic = function Render(args: SlidingPanelProps) {
+  const [open, setOpen] = React.useState(false);
 
   return (
-    <>
-      <Button v2 style={{ marginTop: 80 }} onClick={() => setOpen(!open)}>
+    <div>
+      <Button v2 block onClick={() => setOpen(!open)}>
         Open Sliding Panel
       </Button>
-      <SlidingPanel open={open} position={position}>
+
+      <SlidingPanel {...args} open={open}>
         <div className="p-y-4 p-x-4 ">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
           been the industry standard dummy text ever since the 1500s, when an unknown printer took a
           galley of type and scrambled it to
         </div>
       </SlidingPanel>
-    </>
+    </div>
   );
 };
+Basic.args = {
+  position: 'top',
+};

package/src/snackbar/Snackbar.story.tsx

@@ -1,47 +1,61 @@
-import { action } from '@storybook/addon-actions';
-import { number } from '@storybook/addon-knobs';
-import type { StoryContext } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, userEvent, within } from 'storybook/test';
 import { wait } from '../test-utils/wait';
-
 import Button from '../button';
-
 import { Snackbar } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
 import SnackbarProvider from './SnackbarProvider';
 
-export default {
+const meta: Meta = {
   component: Snackbar,
   title: 'Dialogs/Snackbar',
 };
+export default meta;
 
-export const Basic = () => {
-  return (
-    <SnackbarProvider>
-      <SnackbarConsumer>
-        {({ createSnackbar }) => (
-          <Button
-            block
-            onClick={() => {
-              createSnackbar({
-                action: {
-                  label: 'View',
-                  onClick: () => action('View button clicked.'),
-                },
-                text: <span>Some text</span>,
-              });
-            }}
-          >
-            Show Snackbar
-          </Button>
-        )}
-      </SnackbarConsumer>
-    </SnackbarProvider>
-  );
-};
-
-Basic.play = async ({ canvasElement }: StoryContext) => {
-  await wait(0);
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
+export const Basic: StoryObj = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        transform: async (src = '') => {
+          const match = /(function Render\(\).*?)(,\s+play:\s+async)/s.exec(src);
+          return match?.[1] || src;
+        },
+      },
+    },
+    source: {
+      type: 'code',
+    },
+  },
+  render: function Render() {
+    return (
+      <SnackbarProvider>
+        <SnackbarConsumer>
+          {({ createSnackbar }) => {
+            return (
+              <Button
+                block
+                onClick={() => {
+                  createSnackbar({
+                    action: {
+                      label: 'View',
+                      onClick: fn(),
+                    },
+                    text: <span>Some text</span>,
+                  });
+                }}
+              >
+                Show Snackbar
+              </Button>
+            );
+          }}
+        </SnackbarConsumer>
+      </SnackbarProvider>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    await wait(0);
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
 };

package/src/snackbar/Snackbar.tests.story.tsx

@@ -1,5 +1,5 @@
-import { userEvent, within } from '@storybook/test';
-import { action } from '@storybook/addon-actions';
+import { userEvent, within } from 'storybook/test';
+import { action } from 'storybook/actions';
 import { Mobile as MobileIcon, Theme, Switch, Bulb, Info, Coins, Team } from '@transferwise/icons';
 import { Snackbar, type SnackbarProps } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
@@ -13,6 +13,7 @@ export default {
   title: 'Dialogs/Snackbar/Tests',
   component: Snackbar,
   argTypes: {},
+  tags: ['!autodocs'],
 };
 
 const launchSnackbar = async (canvasElement: HTMLElement) => {

package/src/statusIcon/StatusIcon.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Source } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 <Meta title="Other/StatusIcon/Accessibility" />
 

package/src/statusIcon/StatusIcon.spec.tsx

@@ -35,7 +35,7 @@ describe('StatusIcon', () => {
     [Sentiment.WARNING, Sentiment.WARNING],
   ])(
     "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
-    (sentiment, expectedClass) => {
+    (sentiment: Sentiment | Status, expectedClass: Sentiment | Status) => {
       renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
@@ -79,11 +79,14 @@ describe('StatusIcon', () => {
       ['Error', Sentiment.ERROR],
       ['Information', Sentiment.INFO],
       ['Success', Sentiment.SUCCESS],
-    ])("should set '%s' as an accessible name for the '%s' sentiment", (label, sentiment) => {
-      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
+    ])(
+      "should set '%s' as an accessible name for the '%s' sentiment",
+      (label: string, sentiment: Sentiment | Status) => {
+        renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
-      expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
-    });
+        expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
+      },
+    );
 
     it('should allow for `iconLabel` overrides', () => {
       const iconLabel = 'Custom label';

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { Sentiment, Size, Status } from '../common';
 

package/src/stepper/Stepper.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import Stepper from './Stepper';
 
 const STEPS = [

package/src/stepper/Stepper.tests.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { fn, within, expect, screen } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, within, expect, screen } from 'storybook/test';
 import Stepper from './Stepper';
 
 const STEPS = [

package/src/sticky/Sticky.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 import Sticky from './Sticky';
 import { allModes } from '../../.storybook/modes';

package/src/summary/Summary.story.tsx

@@ -1,25 +1,26 @@
-import { text } from '@storybook/addon-knobs';
+import React from 'react';
+import { action } from 'storybook/actions';
 import { Home as HomeIcon } from '@transferwise/icons';
-
 import { Status } from '../common';
 import { InfoPresentation } from '../info';
-
-import Summary from './Summary';
+import Summary, { type Props as SummaryProps } from './Summary';
 
 export default {
   component: Summary,
   title: 'Content/Summary',
+  argTypes: {
+    title: { control: 'text' },
+  },
 };
 
-export const Basic = () => {
-  const actionText = text('ActionText', 'Change address');
-
-  const title = text('Title', 'Verify your address');
-  const description = text('Description', '10 Downing Street, Westminster, London SW1A 2AA.');
+export const Basic = (args: SummaryProps) => {
+  const actionText = 'Change address';
+  const description = '10 Downing Street, Westminster, London SW1A 2AA.';
 
   return (
     <ul>
       <Summary
+        {...args}
         action={{
           text: actionText,
           href: '#change-address',
@@ -28,9 +29,10 @@ export const Basic = () => {
         as="li"
         description={description}
         icon={<HomeIcon size={24} />}
-        title={title}
+        title="Verify your address"
         status={Status.NOT_DONE}
       />
+
       <Summary
         action={{
           text: 'Change address',
@@ -43,14 +45,13 @@ export const Basic = () => {
           title: 'You entered your address',
           content: 'Your address has been verified, no more actions are required.',
           'aria-label': 'Please click here to know more about your address update status',
-          onClick: () => {
-            console.log('Summary Info clicked');
-          },
+          onClick: action('Summary Info clicked'),
         }}
         icon={<HomeIcon size={24} />}
         title="You verified your address"
         status={Status.DONE}
       />
+
       <Summary
         action={{
           text: 'Change address',
@@ -65,14 +66,13 @@ export const Basic = () => {
             'Your address change is currently being processed. Please allow 48 hours for verification.',
           presentation: InfoPresentation.MODAL,
           'aria-label': 'Please click here to know more about your address update status',
-          onClick: () => {
-            console.log('Summary Info clicked');
-          },
+          onClick: action('Summary Info clicked'),
         }}
         icon={<HomeIcon size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />
+
       <Summary
         action={{
           text: 'Open in new tab',
@@ -85,6 +85,7 @@ export const Basic = () => {
         title="We’re verifying your address"
         status={Status.PENDING}
       />
+
       <Summary
         action={{
           text: actionText,
@@ -93,7 +94,7 @@ export const Basic = () => {
         }}
         as="li"
         description={description}
-        title={title}
+        title="Verify your address"
       />
     </ul>
   );

package/src/switch/Switch.css

@@ -1,6 +1,4 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-switch {
+.np-switch {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
@@ -12,37 +10,50 @@
      -moz-user-select: none;
           user-select: none;
   cursor: pointer;
-}.np-switch:focus {
+}
+.np-switch:focus {
   outline: none;
-}.np-switch:focus-visible {
+}
+.np-switch:focus-visible {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
-}.np-switch--thumb {
+}
+.np-switch--thumb {
   display: flex;
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
-}.np-switch--thumb .tw-icon {
+}
+.np-switch--thumb .tw-icon {
   color: #fff;
-}.np-switch--unchecked {
+}
+.np-switch--unchecked {
   background: #c9cbce;
   background: var(--color-interactive-secondary);
-}.np-switch--unchecked .switch--thumb {
+}
+.np-switch--unchecked .switch--thumb {
   transform: translateX(0);
-}.np-switch--checked {
+}
+.np-switch--checked {
   background: #00a2dd;
   background: var(--color-interactive-accent);
-}.np-switch--checked .np-switch--thumb {
+}
+.np-switch--checked .np-switch--thumb {
   transform: translateX(20px)  ;
-}[dir="rtl"] .np-switch--checked .np-switch--thumb {
+}
+[dir="rtl"] .np-switch--checked .np-switch--thumb {
   transform: translateX(-20px)  ;
-}.np-switch.disabled {
+}
+.np-switch.disabled {
   filter: grayscale(1);
   opacity: 0.45;
   cursor: not-allowed !important;
-}.np-theme-personal .np-switch {
+}
+.np-theme-personal .np-switch {
   padding: 1px 2px;
-}.np-theme-personal .np-switch--checked {
+}
+.np-theme-personal .np-switch--checked {
   background: var(--color-interactive-primary);
-}.np-theme-personal .np-switch--thumb {
+}
+.np-theme-personal .np-switch--thumb {
   width: 20px;
   height: 20px;
   margin: 3px;

package/src/switch/Switch.story.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import Switch, { SwitchProps } from './Switch';
 import { Field } from '../field/Field';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Label } from '../label';
 
 const meta: Meta<typeof Switch> = {

package/src/switchOption/SwitchOption.story.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
 

package/src/table/Table.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Table from './Table';
 import { TableHeaderType } from './TableHeader';
 import { TableRowType, TableRowClickableType } from './TableRow';

package/src/test-utils/story-config.ts

@@ -1,5 +1,5 @@
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { StoryObj } from '@storybook/react';
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
+import { StoryObj } from '@storybook/react-webpack5';
 
 export const viewports = {
   ...MINIMAL_VIEWPORTS,
@@ -16,7 +16,7 @@ export const viewports = {
   },
 };
 
-interface StoryConfig {
+export interface StoryConfig {
   /**
    * Creates variations of the component for the current story. Some
    * padding is applied to the variants for spacing.
@@ -74,14 +74,17 @@ export const storyConfig = <Args>(
     parameters: {
       ...storyObject.parameters,
       variants,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       chromatic: {
         ...storyObject.parameters?.chromatic,
         viewports: (isMobile && [mobileViewportWidth]) || (is400Zoom && [zoom400perViewportWidth]),
       },
+    },
+    globals: {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       viewport: {
-        ...storyObject.parameters?.viewport,
-        /** Set defaultViewport if 'mobile' variant is used */
-        defaultViewport: (isMobile && mobileViewportKey) || (is400Zoom && zoom400perViewportKey),
+        ...storyObject.globals?.viewport,
+        value: (isMobile && mobileViewportKey) || (is400Zoom && zoom400perViewportKey),
       },
     },
   };

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
 
 import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
 import { Field } from '../field/Field';

package/src/tile/Tile.css

@@ -1,49 +1,62 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-tile {
+.np-tile {
   min-width: 120px;
   border-radius: 10px;
   border-radius: var(--radius-small);
   width: 100%;
-}.np-theme-personal .np-tile {
+}
+.np-theme-personal .np-tile {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-}.np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
+}
+.np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
   background-color: var(--color-contrast);
-}.np-tile.decision {
+}
+.np-tile.decision {
   margin-top: 0;
   border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
-}.np-theme-personal .np-tile.decision {
+}
+.np-theme-personal .np-tile.decision {
   border: none;
-}.np-theme-personal .np-tile.decision:hover {
+}
+.np-theme-personal .np-tile.decision:hover {
   background-color: var(--color-background-neutral-hover);
-}.np-theme-personal .np-tile.decision:active {
+}
+.np-theme-personal .np-tile.decision:active {
   background-color: var(--color-background-neutral-active);
-}.np-theme-personal .np-tile.decision .np-text-body-default {
+}
+.np-theme-personal .np-tile.decision .np-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
-}.np-tile.np-decision__tile--fixed-width {
+}
+.np-tile.np-decision__tile--fixed-width {
   width: 300px;
-}.np-tile__media {
+}
+.np-tile__media {
   width: 100%;
-}.np-tile__description {
+}
+.np-tile__description {
   color: #5d7079;
   color: var(--color-content-secondary);
   margin-top: 12px;
   margin-top: var(--size-12);
   display: inline-block;
-}.np-tile--small.np-decision__tile--fixed-width {
+}
+.np-tile--small.np-decision__tile--fixed-width {
   width: 260px;
-}.np-tile--small .np-tile__description {
+}
+.np-tile--small .np-tile__description {
   margin-top: 4px;
   margin-top: var(--size-4);
-}.np-tile:hover .tw-avatar {
+}
+.np-tile:hover .tw-avatar {
   pointer-events: none;
-}.np-tile:hover .tw-avatar .tw-avatar__content {
+}
+.np-tile:hover .tw-avatar .tw-avatar__content {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-}.np-tile__description {
+}
+.np-tile__description {
   color: #5d7079;
   color: var(--color-content-secondary);
   font-weight: 400;

package/src/tile/Tile.story.tsx

@@ -1,52 +1,52 @@
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
-
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { Size } from '../common';
-
-import Tile from '.';
 import AvatarView from '../avatarView';
+import Tile from '.';
+import { Illustration, type IllustrationProps } from '@wise/art';
+import Image from '../image';
+
+const LabelledIllustration = (props: IllustrationProps) => <Illustration {...props} />;
+LabelledIllustration.displayName = 'Illustration';
 
-export default {
+const meta: Meta<typeof Tile> = {
   component: Tile,
   title: 'Internal/Tile',
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    size: {
+      control: 'radio',
+      options: [Size.MEDIUM, Size.SMALL],
+    },
+    media: { control: false },
+    href: { control: 'text' },
+    onClick: { action: 'onClick' },
+  },
+  args: {
+    media: (
+      <Image
+        alt="illustration"
+        src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+      />
+    ),
+    title: 'Hank Miller',
+    description: 'Click here to send money to Mr. Miller',
+    disabled: false,
+    href: '#href1',
+    size: Size.MEDIUM,
+    onClick: action('onClick'),
+  },
 };
+export default meta;
+
+type Story = StoryObj<typeof Tile>;
 
-export const Basic = () => {
-  const description = text('Description', 'Click here to send money to Mr. Miller');
-  const disabled = boolean('Disabled', false);
-  const medium = boolean('Medium', true);
-  const title = text('Title', 'Hank Miller');
+export const WithImage: Story = {};
 
-  return (
-    <div className="d-flex">
-      <div className="m-a-2">
-        <Tile
-          description={description}
-          disabled={disabled}
-          href="#href1"
-          media={
-            <img
-              src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-              alt="illustration"
-              style={{ width: '100%' }}
-            />
-          }
-          size={medium ? Size.MEDIUM : Size.SMALL}
-          title={title}
-          onClick={action('onClick')}
-        />
-      </div>
-      <div className="m-a-2">
-        <Tile
-          description={description}
-          disabled={disabled}
-          href="#href1"
-          media={<AvatarView profileName="Henry Morris" />}
-          size={medium ? Size.MEDIUM : Size.SMALL}
-          title={title}
-          onClick={action('onClick')}
-        />
-      </div>
-    </div>
-  );
+export const WithAvatar: Story = {
+  args: {
+    media: <AvatarView profileName="Henry Morris" />,
+  },
 };