@transferwise/components 46.100.1 → 46.100.2

package/src/dateLookup/DateLookup.story.tsx

@@ -1,16 +1,24 @@
-import { boolean, select, text, date } from '@storybook/addon-knobs';
-import { userEvent } from '@storybook/test';
 import { useState } from 'react';
-
+import { userEvent } from 'storybook/test';
 import { Field } from '..';
 import { Size } from '../common';
 import { storyConfig } from '../test-utils';
-
-import DateLookup from './DateLookup';
+import DateLookup, { type DateLookupProps } from './DateLookup';
 
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup',
+  argTypes: {
+    size: { control: 'select', options: [Size.SMALL, Size.MEDIUM, Size.LARGE] },
+    disabled: { control: 'boolean' },
+    label: { control: 'text' },
+    monthFormat: { control: 'select', options: ['long', 'short'] },
+    placeholder: { control: 'text' },
+    id: { control: 'text' },
+    clearable: { control: 'boolean' },
+    min: { control: 'date' },
+    max: { control: 'date' },
+  },
 };
 
 const epoch = new Date('2011-01-01');
@@ -18,92 +26,61 @@ const theFuture = new Date(epoch);
 theFuture.setUTCDate(epoch.getUTCDate() + 10);
 const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
-const size = select('size', Object.values([Size.SMALL, Size.MEDIUM, Size.LARGE]), Size.MEDIUM);
 
-export const Basic = () => {
+export const Basic = (args: DateLookupProps) => {
   const [value, setValue] = useState<Date | null>(epoch);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'placeholder');
-  const id = text('id', 'date-lookup');
-
-  const clearable = boolean('clearable', true);
-
   return (
     <DateLookup
-      disabled={disabled}
-      id={id}
-      label={label}
-      min={thePast}
-      max={theFuture}
-      monthFormat={monthFormat}
-      placeholder={placeholder}
-      size={size}
+      {...args}
+      min={args.min ? new Date(args.min) : thePast}
+      max={args.max ? new Date(args.max) : theFuture}
       value={value}
-      clearable={clearable}
-      onChange={(v) => {
-        console.log(v);
-        setValue(v);
-      }}
+      onChange={(v) => setValue(v)}
     />
   );
 };
-
+Basic.args = {
+  size: Size.MEDIUM,
+  disabled: false,
+  label: 'label',
+  monthFormat: 'long',
+  placeholder: 'placeholder',
+  id: 'date-lookup',
+  clearable: true,
+  min: thePast,
+  max: theFuture,
+};
 Basic.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  // testing focus state on keyboard nav
   await userEvent.tab();
   await userEvent.keyboard(' ');
 };
 
 export const Basic400Zoom = storyConfig(
-  { render: Basic, play: Basic.play, parameters: { chromatic: { delay: 2000 } } },
+  {
+    render: Basic,
+    play: Basic.play,
+    parameters: { chromatic: { delay: 2000 } },
+  },
   { variants: ['400%'] },
 );
 
-export const WithField = () => {
+export const WithField = (args: DateLookupProps) => {
   const [value, setValue] = useState<Date | null>(epoch);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'Select date');
-  const id = text('id', 'date-lookup');
-
-  const clearable = boolean('clearable', true);
-
   return (
     <Field label="Date lookup">
       <DateLookup
-        disabled={disabled}
-        id={id}
-        label={label}
-        min={thePast}
-        max={theFuture}
-        monthFormat={monthFormat}
-        placeholder={placeholder}
-        size={size}
+        {...args}
+        min={args.min ? new Date(args.min) : thePast}
+        max={args.max ? new Date(args.max) : theFuture}
         value={value}
-        clearable={clearable}
-        onChange={(v) => {
-          console.log(v);
-          setValue(v);
-        }}
+        onChange={(v) => setValue(v)}
       />
     </Field>
   );
 };
 
-export const RightAligned = () => {
+export const RightAligned = (args: DateLookupProps) => {
   const [value, setValue] = useState<Date | null>(epoch);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
-  const placeholder = text('placeholder', 'placeholder');
-
-  const minvalue = date('minvalue', thePast);
-  const maxvalue = date('maxvalue', theFuture);
-  const clearable = boolean('clearable', false);
-
   return (
     <div className="row">
       <div className="col-xs-6">
@@ -115,16 +92,11 @@ export const RightAligned = () => {
       </div>
       <div className="col-xs-6">
         <DateLookup
+          {...args}
           id="right-aligned"
-          disabled={disabled}
-          label={label}
-          min={new Date(minvalue)}
-          max={new Date(maxvalue)}
-          monthFormat={monthFormat}
-          placeholder={placeholder}
-          size={size}
+          min={args.min ? new Date(args.min) : thePast}
+          max={args.max ? new Date(args.max) : theFuture}
           value={value}
-          clearable={clearable}
           onChange={(v) => setValue(v)}
         />
       </div>

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,6 +1,6 @@
-import { StoryFn } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-import { action } from '@storybook/addon-actions';
+import { StoryFn } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+import { action } from 'storybook/actions';
 import { useState } from 'react';
 
 import DateLookup, { type DateLookupProps } from './DateLookup';

package/src/dateLookup/DateLookup.tsx

@@ -353,7 +353,10 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
 
 export const DateLookupWithoutInputAttributes = DateLookup;
 
-export default withInputAttributes(
+const WrappedDateLookup = withInputAttributes(
   DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,
   { nonLabelable: true },
 );
+WrappedDateLookup.displayName = 'DateLookup';
+
+export default WrappedDateLookup;

package/src/decision/Decision.story.tsx

@@ -1,36 +1,27 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
 import { Illustration } from '@wise/art';
-
+import { fn } from 'storybook/test';
 import { Size } from '../common';
-
-import Decision, { DecisionPresentation, DecisionType } from '.';
 import AvatarView from '../avatarView';
+import Decision, { DecisionPresentation, DecisionType } from '.';
 
 export default {
   component: Decision,
   title: 'Layouts/Decision',
+  parameters: {
+    docs: {
+      source: { type: 'auto' },
+    },
+  },
 };
 
-export const Basic = () => {
-  const presentation = select(
-    'presentation',
-    DecisionPresentation,
-    DecisionPresentation.LIST_BLOCK,
-  );
-  const disabled = boolean('disabled', false);
-  const showMediaCircleInList = boolean('showMediaCircleInList', true);
-  const isContainerAligned = boolean('isContainerAligned', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
-
+export const Basic = function Render() {
   return (
     <Decision
       options={[
         {
           description: 'Short text test.',
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href1',
-          disabled,
           media: {
             block: <Illustration name="globe" alt="" disablePadding />,
             list: <AvatarView profileName="Henry Mike" />,
@@ -41,8 +32,7 @@ export const Basic = () => {
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-          onClick: action('clicked'),
-          disabled,
+          onClick: fn(),
           href: '#href2',
           media: {
             block: <Illustration name="confetti" alt="" disablePadding />,
@@ -68,32 +58,23 @@ export const Basic = () => {
           title: 'Hank Miller',
         },
       ]}
-      presentation={presentation}
+      presentation={DecisionPresentation.LIST_BLOCK}
       type={DecisionType.NAVIGATION}
-      showMediaCircleInList={showMediaCircleInList}
-      isContainerAligned={isContainerAligned}
-      size={size}
+      showMediaCircleInList
+      isContainerAligned={false}
+      size={Size.MEDIUM}
     />
   );
 };
 
-export const grid = () => {
-  const presentation = select(
-    'presentation',
-    DecisionPresentation,
-    DecisionPresentation.LIST_BLOCK_GRID,
-  );
-  const disabled = boolean('disabled', false);
-  const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
-
+export const Grid = function Render() {
   return (
     <Decision
       options={[
         {
           description: 'Short text test.',
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href1',
-          disabled,
           media: {
             block: (
               <img
@@ -109,8 +90,7 @@ export const grid = () => {
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-          onClick: action('clicked'),
-          disabled,
+          onClick: fn(),
           href: '#href2',
           media: {
             block: (
@@ -127,7 +107,7 @@ export const grid = () => {
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href3',
           media: {
             block: (
@@ -139,15 +119,13 @@ export const grid = () => {
             list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
-          disabled,
           title: 'Hank Miller',
         },
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href1',
-          disabled,
           media: {
             block: (
               <img
@@ -163,9 +141,8 @@ export const grid = () => {
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href1',
-          disabled,
           media: {
             block: (
               <img
@@ -181,9 +158,8 @@ export const grid = () => {
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href1',
-          disabled,
           media: {
             block: (
               <img
@@ -199,9 +175,8 @@ export const grid = () => {
         {
           description:
             "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-          onClick: action('clicked'),
+          onClick: fn(),
           href: '#href1',
-          disabled,
           media: {
             block: (
               <img
@@ -215,9 +190,9 @@ export const grid = () => {
           title: 'Hank Miller',
         },
       ]}
-      presentation={presentation}
+      presentation={DecisionPresentation.LIST_BLOCK_GRID}
       type={DecisionType.NAVIGATION}
-      size={size}
+      size={Size.MEDIUM}
     />
   );
 };

package/src/definitionList/DefinitionList.story.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 import { Layout } from '../common';
 

package/src/dimmer/Dimmer.story.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Button, Dimmer } from '..';

package/src/divider/Divider.accessibility.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { NavigationOption } from '..';
 import { Bulb } from '@transferwise/icons';
 

package/src/divider/Divider.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import Divider from './Divider';
 
 /**

package/src/drawer/Drawer.story.tsx

@@ -1,20 +1,22 @@
-import { select } from '@storybook/addon-knobs';
 import { useState } from 'react';
-
-import { Section, Button, Input, Modal } from '..';
 import { Position, Priority } from '../common';
-
+import { Section, Button, Input, Modal, type DrawerProps } from '..';
 import Drawer from './Drawer';
 
 export default {
   component: Drawer,
   title: 'Dialogs/Drawer',
+  argTypes: {
+    position: {
+      control: 'select',
+      options: [Position.LEFT, Position.RIGHT],
+    },
+  },
 };
 
-export const Basic = () => {
+export const Basic = (args: DrawerProps) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openModal, setOpenModal] = useState(false);
-  const position = select('position', [Position.LEFT, Position.RIGHT], Position.RIGHT);
 
   return (
     <>
@@ -23,7 +25,7 @@ export const Basic = () => {
       </Button>
       <Drawer
         open={openDrawer}
-        position={position}
+        position={args.position}
         headerTitle="This is the title of the drawer"
         footerContent={
           <>
@@ -115,3 +117,7 @@ export const Basic = () => {
     </>
   );
 };
+
+Basic.args = {
+  position: Position.RIGHT,
+};

package/src/dropFade/DropFade.story.tsx

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { useState } from 'react';
 
 import { Button, Nudge } from '..';

package/src/emphasis/Emphasis.spec.tsx

@@ -1,5 +1,4 @@
 import { render } from '../test-utils';
-
 import Emphasis from './Emphasis';
 
 describe('Emphasis', () => {
@@ -10,13 +9,14 @@ describe('Emphasis', () => {
       ${'<positive>positive</positive>'}    | ${'em.emphasis.emphasis--positive'}
       ${'<negative>negative</negative>'}    | ${'em.emphasis.emphasis--negative'}
       ${'<warning>warning</warning>'}       | ${'em.emphasis.emphasis--warning'}
-    `('$text renders as expected with selectoe $selector', ({ text, selector }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const { container } = render(<Emphasis text={text} />);
-
-      expect(container.querySelector(selector)).toBeInTheDocument();
-      expect(container?.firstElementChild?.tagName).toBe('SPAN');
-    });
+    `(
+      '$text renders as expected with selectoe $selector',
+      ({ text, selector }: Record<string, string>) => {
+        const { container } = render(<Emphasis text={text} />);
+        expect(container.querySelector(selector)).toBeInTheDocument();
+        expect(container?.firstElementChild?.tagName).toBe('SPAN');
+      },
+    );
   });
 
   it('escapes malicious tags', () => {

package/src/emphasis/Emphasis.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Emphasis from './Emphasis';
 

package/src/field/Field.story.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
+import { action } from 'storybook/actions';
 
 import { Input } from '../inputs/Input';
 import { Field, FieldProps } from './Field';
 import { Sentiment } from '../common';
 import DateInput from '../dateInput';
-import { fn } from '@storybook/test';
 import { lorem10, lorem40 } from '../test-utils';
 import { TextArea } from '../inputs/TextArea';
 import { SearchInput } from '../inputs/SearchInput';
@@ -51,11 +51,11 @@ export const Basic = (args: FieldProps) => {
         </Field>
 
         <Field label="Date Of Birth" required={false}>
-          <DateInput onChange={fn} />
+          <DateInput value={undefined} onChange={action('date-input-changed')} />
         </Field>
 
         <Field label="Date Of Birth with Description" required={false} description={lorem10}>
-          <DateInput onChange={fn} />
+          <DateInput value={undefined} onChange={action('date-input-changed')} />
         </Field>
 
         <Field label="Search business" required={false}>