@transferwise/components 46.100.1 → 46.101.0

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}>