@transferwise/components 46.100.1 → 46.100.2

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -1,288 +1,333 @@
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
-
 import AvatarView from '../avatarView';
 import Body from '../body';
 import Button from '../button';
 import { ProfileType, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
-
-import FlowNavigation from './FlowNavigation';
 import { lorem10 } from '../test-utils';
 import Display from '../display';
 import Sticky from '../sticky';
 
-export default {
-  component: FlowNavigation,
-  title: 'Navigation/FlowNavigation',
-};
-
-export const Variants = () => {
-  const [activeStep, setActiveStep] = useState(2);
-  const [closed, setClosed] = useState(false);
-  const profileType = select(
-    'avatar',
-    [ProfileType.PERSONAL, ProfileType.BUSINESS],
-    ProfileType.PERSONAL,
-  );
-  const showCloseButton = boolean('show closeButton', true);
-  const showMobileBackButton = boolean('show mobile backButton', true);
-  const done = boolean('done', false);
-  const avatarURL = text('avatarURL', '../tapestry-01.png');
-
-  return !closed ? (
-    <>
-      <FlowNavigation
-        avatar={!profileType ? null : <AvatarView profileType={profileType} />}
-        logo={<Logo />}
-        activeStep={activeStep}
-        done={done}
-        steps={[
-          {
-            label: 'Amount',
-            hoverLabel: <strong>100 GBP</strong>,
-            onClick: () => setActiveStep(0),
-          },
-          {
-            label: 'You',
-            hoverLabel: <>Elena Durante - elenadurante@test.com</>,
-            onClick: () => setActiveStep(1),
-          },
-          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
-          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
-          {
-            label: 'Pay',
-            hoverLabel: 'Enrico Gusso II',
-            onClick: () => setActiveStep(4),
-          },
-        ]}
-        onClose={showCloseButton ? () => setClosed(true) : undefined}
-        onGoBack={
-          showMobileBackButton
-            ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
-            : undefined
-        }
-      />
+import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';
 
-      <FlowNavigation
-        done={done}
-        activeStep={activeStep}
-        steps={[
-          {
-            label: 'Amount',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>100 GBP</strong>
-                </div>
-                0.2351 ETH
-              </>
-            ),
-            onClick: () => setActiveStep(0),
-          },
-          {
-            label: 'You',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>Elena Durante</strong>
-                </div>
-                elenadurante@test.com
-              </>
-            ),
-            onClick: () => setActiveStep(1),
-          },
-          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
-          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
-          {
-            label: 'Pay',
-            hoverLabel: 'Enrico Gusso II',
-            onClick: () => setActiveStep(4),
-          },
-        ]}
-        onClose={showCloseButton ? () => setClosed(true) : undefined}
-        onGoBack={
-          showMobileBackButton
-            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
-            : undefined
-        }
-      />
+interface CustomControls {
+  showCloseButton: boolean;
+  showMobileBackButton: boolean;
+  avatarURL?: string;
+  profileType?: ProfileType;
+}
+export type StoryArgs = FlowNavigationProps & CustomControls;
 
-      <FlowNavigation
-        done={done}
-        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
-        activeStep={activeStep}
-        steps={[
-          {
-            label: 'Amount',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>100 GBP</strong>
-                </div>
-                0.2351 ETH
-              </>
-            ),
-            onClick: () => setActiveStep(0),
-          },
-          {
-            label: 'You',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>Elena Durante</strong>
-                </div>
-                elenadurante@test.com
-              </>
-            ),
-            onClick: () => setActiveStep(1),
-          },
-          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
-          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
-          {
-            label: 'Pay',
-            hoverLabel: 'Enrico Gusso II',
-            onClick: () => setActiveStep(4),
-          },
-        ]}
-        onClose={showCloseButton ? () => setClosed(true) : undefined}
-        onGoBack={
-          showMobileBackButton
-            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
-            : undefined
-        }
-      />
+type Story = StoryObj<StoryArgs>;
 
-      {/* Instance of always `done` FlowNav for visual testing */}
-      <FlowNavigation
-        done
-        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
-        activeStep={activeStep}
-        steps={[
-          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
-          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
-          { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
-        ]}
-        onClose={showCloseButton ? () => setClosed(true) : undefined}
-        onGoBack={
-          showMobileBackButton
-            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
-            : undefined
-        }
-      />
-
-      <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
-
-      <Button
-        className="m-t-2"
-        disabled={activeStep === 4}
-        onClick={() => setActiveStep(activeStep + 1)}
-      >
-        Next Step
-      </Button>
-    </>
-  ) : null;
-};
-
-export const SendFlow = () => {
-  const [activeStep, setActiveStep] = useState(2);
-  const steps = [
-    {
-      label: 'Recipient',
-      onClick: handleStepClick(0),
-    },
-    {
-      label: 'Amount',
-      hoverLabel: (
-        <>
-          You send 100 GBP <br />
-          You get 99.39 GBP{' '}
-        </>
-      ),
-      ...(activeStep > 1 && { onClick: handleStepClick(1) }),
-    },
-    {
-      label: 'Review',
-      ...(activeStep > 2 && { onClick: handleStepClick(2) }),
+const meta: Meta<StoryArgs> = {
+  component: FlowNavigation,
+  title: 'Navigation/FlowNavigation',
+  argTypes: {
+    showCloseButton: { control: 'boolean', defaultValue: true },
+    showMobileBackButton: { control: 'boolean', defaultValue: true },
+    done: { control: 'boolean', defaultValue: false },
+    avatarURL: { control: 'text', defaultValue: '../tapestry-01.png' },
+    profileType: {
+      control: 'radio',
+      options: [ProfileType.PERSONAL, ProfileType.BUSINESS],
+      defaultValue: ProfileType.PERSONAL,
     },
-    {
-      label: 'Pay',
-      ...(activeStep > 3 && { onClick: handleStepClick(3) }),
+  },
+  parameters: {
+    docs: {
+      source: { type: 'code' },
     },
-  ];
-  function handleStepClick(step: number) {
-    return () => {
-      setActiveStep(step);
-    };
-  }
-  return (
-    <>
-      <FlowNavigation
-        avatar={<AvatarView />}
-        logo={<Logo />}
-        activeStep={activeStep}
-        steps={steps}
-        onClose={() => alert('close & move away')}
-        onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
-      />
-
-      <Body className="m-a-3">
-        <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
-        <br />
-        {lorem10}
-      </Body>
-
-      <Sticky>
-        <div className="d-flex justify-content-center align-items-center p-a-3">
-          <Button
-            v2
-            disabled={activeStep === 3}
-            block
-            onClick={() => setActiveStep(activeStep + 1)}
-          >
-            Continue
-          </Button>
-        </div>
-      </Sticky>
-    </>
-  );
+  },
 };
+export default meta;
 
-export const WithOverlayHeaderComparison = () => {
-  const [activeStep, setActiveStep] = useState(4);
-  const [closed, setClosed] = useState(false);
-  const profileType = select(
-    'avatar',
-    [ProfileType.PERSONAL, ProfileType.BUSINESS],
-    ProfileType.PERSONAL,
-  );
-  const showCloseButton = boolean('show closeButton', true);
-  const showMobileBackButton = boolean('show mobile backButton', true);
-  const done = boolean('done', false);
+type FlowNavArgs = {
+  showCloseButton: boolean;
+  showMobileBackButton: boolean;
+  done: boolean;
+  avatarURL?: string;
+  profileType?: ProfileType;
+  [key: string]: unknown;
+};
 
-  return !closed ? (
-    <>
-      <div style={{ border: '1px solid #e8e8e8' }}>
+export const Variants: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    done: false,
+    avatarURL: '../tapestry-01.png',
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+    const [closed, setClosed] = useState(false);
+    if (closed) return <></>;
+    return (
+      <>
         <FlowNavigation
-          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
+          avatar={args.profileType ? <AvatarView profileType={args.profileType} /> : null}
+          logo={<Logo />}
           activeStep={activeStep}
-          done={done}
-          steps={[]}
-          onClose={showCloseButton ? () => setClosed(true) : undefined}
+          done={args.done}
+          steps={[
+            {
+              label: 'Amount',
+              hoverLabel: <strong>100 GBP</strong>,
+              onClick: () => setActiveStep(0),
+            },
+            {
+              label: 'You',
+              hoverLabel: <>Elena Durante - elenadurante@test.com</>,
+              onClick: () => setActiveStep(1),
+            },
+            { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
+            { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
+            {
+              label: 'Pay',
+              hoverLabel: 'Enrico Gusso II',
+              onClick: () => setActiveStep(4),
+            },
+          ]}
+          onClose={args.showCloseButton ? () => setClosed(true) : undefined}
           onGoBack={
-            showMobileBackButton
+            args.showMobileBackButton
               ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
               : undefined
           }
         />
-      </div>
-      <div style={{ border: '1px solid #e8e8e8' }}>
-        <OverlayHeader
-          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
-          onClose={showCloseButton ? () => setClosed(true) : undefined}
+
+        <FlowNavigation
+          done={args.done}
+          activeStep={activeStep}
+          steps={[
+            {
+              label: 'Amount',
+              hoverLabel: (
+                <>
+                  <div>
+                    <strong>100 GBP</strong>
+                  </div>
+                  0.2351 ETH
+                </>
+              ),
+              onClick: () => setActiveStep(0),
+            },
+            {
+              label: 'You',
+              hoverLabel: (
+                <>
+                  <div>
+                    <strong>Elena Durante</strong>
+                  </div>
+                  elenadurante@test.com
+                </>
+              ),
+              onClick: () => setActiveStep(1),
+            },
+            { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
+            { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
+            {
+              label: 'Pay',
+              hoverLabel: 'Enrico Gusso II',
+              onClick: () => setActiveStep(4),
+            },
+          ]}
+          onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
+        />
+
+        <FlowNavigation
+          done={args.done}
+          avatar={<AvatarView imgSrc={args.avatarURL} profileType={args.profileType} />}
+          activeStep={activeStep}
+          steps={[
+            {
+              label: 'Amount',
+              hoverLabel: (
+                <>
+                  <div>
+                    <strong>100 GBP</strong>
+                  </div>
+                  0.2351 ETH
+                </>
+              ),
+              onClick: () => setActiveStep(0),
+            },
+            {
+              label: 'You',
+              hoverLabel: (
+                <>
+                  <div>
+                    <strong>Elena Durante</strong>
+                  </div>
+                  elenadurante@test.com
+                </>
+              ),
+              onClick: () => setActiveStep(1),
+            },
+            { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
+            { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
+            {
+              label: 'Pay',
+              hoverLabel: 'Enrico Gusso II',
+              onClick: () => setActiveStep(4),
+            },
+          ]}
+          onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
+        />
+
+        {/* Instance of always `done` FlowNav for visual testing */}
+        <FlowNavigation
+          done
+          avatar={<AvatarView imgSrc={args.avatarURL} profileType={args.profileType} />}
+          activeStep={activeStep}
+          steps={[
+            { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
+            { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
+            { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
+          ]}
+          onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
         />
-      </div>
-    </>
-  ) : null;
+
+        <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
+
+        <Button
+          className="m-t-2"
+          disabled={activeStep === 4}
+          onClick={() => setActiveStep(activeStep + 1)}
+        >
+          Next Step
+        </Button>
+      </>
+    );
+  },
+};
+
+export const SendFlow: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    done: false,
+    avatarURL: '../tapestry-01.png',
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+    const steps = [
+      {
+        label: 'Recipient',
+        onClick: handleStepClick(0),
+      },
+      {
+        label: 'Amount',
+        hoverLabel: (
+          <>
+            You send 100 GBP <br />
+            You get 99.39 GBP{' '}
+          </>
+        ),
+        ...(activeStep > 1 && { onClick: handleStepClick(1) }),
+      },
+      {
+        label: 'Review',
+        ...(activeStep > 2 && { onClick: handleStepClick(2) }),
+      },
+      {
+        label: 'Pay',
+        ...(activeStep > 3 && { onClick: handleStepClick(3) }),
+      },
+    ];
+    function handleStepClick(step: number) {
+      return () => {
+        setActiveStep(step);
+      };
+    }
+    return (
+      <>
+        <FlowNavigation
+          avatar={<AvatarView />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          steps={steps}
+          onClose={() => alert('close & move away')}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+
+        <Body className="m-a-3">
+          <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+          <br />
+          {lorem10}
+        </Body>
+
+        <Sticky>
+          <div className="d-flex justify-content-center align-items-center p-a-3">
+            <Button
+              v2
+              disabled={activeStep === 3}
+              block
+              onClick={() => setActiveStep(activeStep + 1)}
+            >
+              Continue
+            </Button>
+          </div>
+        </Sticky>
+      </>
+    );
+  },
+};
+
+export const WithOverlayHeaderComparison: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    done: false,
+    avatarURL: '../tapestry-01.png',
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(4);
+    const [closed, setClosed] = useState(false);
+    if (closed) return <></>;
+    return (
+      <>
+        <div style={{ border: '1px solid #e8e8e8' }}>
+          <FlowNavigation
+            avatar={args.profileType ? <AvatarView profileType={args.profileType} /> : null}
+            activeStep={activeStep}
+            done={args.done}
+            steps={[]}
+            onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+            onGoBack={
+              args.showMobileBackButton
+                ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+                : undefined
+            }
+          />
+        </div>
+        <div style={{ border: '1px solid #e8e8e8' }}>
+          <OverlayHeader
+            avatar={args.profileType ? <AvatarView profileType={args.profileType} /> : null}
+            onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+          />
+        </div>
+      </>
+    );
+  },
 };

package/src/iconButton/IconButton.story.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import Body from '../body';
 
 export default {

package/src/image/Image.story.tsx

@@ -1,62 +1,35 @@
-import { action } from '@storybook/addon-actions';
-import { text, select, boolean } from '@storybook/addon-knobs';
+import { action } from 'storybook/actions';
+import Image, { type ImageProps } from './Image';
 
-import Image from './Image';
-
-export default {
+const meta = {
   component: Image,
   title: 'Content/Image',
-};
-
-export const Basic = () => {
-  const source = text('src', 'https://wise.com/web-art/assets/illustrations/bell-medium@2x.webp');
-  const shrink = boolean('shrink', true);
-  const stretch = boolean('stretch', true);
-  const loading = select(
-    'loading',
-
-    {
-      lazy: 'lazy',
-      eager: 'eager',
+  argTypes: {
+    src: { control: 'text' },
+    shrink: { control: 'boolean' },
+    stretch: { control: 'boolean' },
+    loading: {
+      control: 'select',
+      options: ['lazy', 'eager'],
     },
-    'lazy',
-  );
+  },
+};
+export default meta;
 
-  return (
+export const Basic = {
+  render: (args: ImageProps) => (
     <>
-      <Image
-        alt="test"
-        src={source}
-        id="id1"
-        loading={loading}
-        className="m-t-5"
-        shrink={shrink}
-        stretch={stretch}
-        onLoad={action('load 1')}
-        onError={action('error')}
-      />
-      <Image
-        alt="test"
-        src={source}
-        id="id2"
-        loading={loading}
-        className="m-t-5"
-        shrink={shrink}
-        stretch={stretch}
-        onLoad={action('load 2')}
-        onError={action('error')}
-      />
-      <Image
-        alt="test"
-        src={source}
-        id="id3"
-        loading={loading}
-        className="m-t-5"
-        shrink={shrink}
-        stretch={stretch}
-        onLoad={action('load 3')}
-        onError={action('error')}
-      />
+      <Image id="id1" onLoad={action('load 1')} onError={action('error')} {...args} />
+      <Image id="id2" onLoad={action('load 2')} onError={action('error')} {...args} />
+      <Image id="id3" onLoad={action('load 3')} onError={action('error')} {...args} />
     </>
-  );
+  ),
+  args: {
+    alt: 'test',
+    src: 'https://wise.com/web-art/assets/illustrations/bell-medium@2x.webp',
+    shrink: true,
+    stretch: true,
+    loading: 'lazy',
+    className: 'm-t-5',
+  },
 };