@transferwise/components 0.0.0-experimental-cb7b730 → 0.0.0-experimental-2ad4083

package/src/badge/Badge.story.tsx

@@ -1,20 +1,42 @@
-import { text, select } from '@storybook/addon-knobs';
-
+import { Meta } from '@storybook/react-webpack5';
 import { default as AvatarComponent, AvatarType } from '../avatar';
 import { Size, Theme } from '../common';
-
-import Badge from './Badge';
+import Badge, { type BadgeProps } from './Badge';
 
 /**
  * @deprecated use **`<AvatarView badge={..} />`** components instead
  */
-export default {
+const meta: Meta<typeof Badge> = {
   component: Badge,
-  title: 'Content/Badge (Deprecated)',
-  excludeStories: ['ExampleBadgeCss'],
+  title: 'Content/Badge',
+  tags: ['deprecated'],
 };
 
-export const ExampleBadgeCss = {
+export default meta;
+
+/**
+ * Used for showing multiple components within a Canvas.
+ * @decorator
+ */
+const withComponentGrid =
+  (maxWidth = 'auto') =>
+  (Story: any) => (
+    <div
+      style={{
+        width: '100%',
+        placeItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '2rem',
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+const ExampleBadgeStyle = {
   background: 'var(--color-content-positive)',
   width: '100%',
   height: '100%',
@@ -25,47 +47,46 @@ export const ExampleBadgeCss = {
   alignItems: 'center',
 };
 
-export const Avatar = () => {
-  const BadgeText = text('BadgeText', 'B');
-  const border = select('Border', [undefined, Theme.LIGHT, Theme.DARK], Theme.LIGHT);
-
-  return (
-    <div>
-      <div style={{ display: 'inline', margin: 8 }}>
+export const LegacyAvatarWithBadge = {
+  decorators: [withComponentGrid()],
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+    },
+  },
+  render: () => {
+    return (
+      <>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.LARGE}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.LARGE}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
 
-      <div style={{ display: 'inline', margin: 8 }}>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.MEDIUM}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
 
-      <div style={{ display: 'inline', margin: 8 }}>
         <Badge
-          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
-          border={border}
+          badge={<div style={ExampleBadgeStyle}>B</div>}
+          border={Theme.LIGHT}
           size={Size.SMALL}
         >
           <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
             AA
           </AvatarComponent>
         </Badge>
-      </div>
-    </div>
-  );
+      </>
+    );
+  },
 };

package/src/button/Button.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';
 import * as stories from './Button.story';

package/src/button/Button.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 { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';

package/src/button/Button.tests.story.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import Button from './Button.resolver';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { storyConfig } from '../test-utils';
 
 const meta: Meta<typeof Button> = {

package/src/button/LegacyButton.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn, expect } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, fn, expect } from 'storybook/test';
 import { useState } from 'react';
 
 import Button from '.';
@@ -25,6 +25,7 @@ const withContainer = (Story: any) => (
 const meta: Meta<typeof LegacyButton> = {
   component: LegacyButton,
   title: 'Actions/Button/Legacy Button',
+  tags: ['deprecated'],
   args: {
     size: undefined,
     priority: undefined,

package/src/card/Card.story.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 import Card from '.';
 

package/src/carousel/Carousel.story.tsx

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import { Illustration } from '@wise/art';
 import React from 'react';
 

package/src/checkbox/Checkbox.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 { Field } from '../field/Field';
 import { lorem10, storyConfig } from '../test-utils';

package/src/checkboxButton/CheckboxButton.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 CheckboxButton from './CheckboxButton';

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -1,66 +1,72 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
-import { Meta } from '@storybook/react';
-import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
-
+import { action } from 'storybook/actions';
+import { Meta } from '@storybook/react-webpack5';
+import { FastFlag } from '@transferwise/icons';
 import { Nudge, Title, Typography } from '..';
-
-import CheckboxOption from './CheckboxOption';
+import CheckboxOption, { type CheckboxOptionProps } from './CheckboxOption';
 
 const meta: Meta<typeof CheckboxOption> = {
   component: CheckboxOption,
   title: 'Option/CheckboxOption',
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+    },
+  },
 };
 
 export default meta;
 
-const Template = () => {
+const commonArgs = {
+  disabled: false,
+  title: 'Checkbox option',
+  content: 'Normally, the button and icon are vertically centered.',
+  showMediaAtAllSizes: false,
+  isContainerAligned: false,
+};
+
+const renderTemplate = (args: Partial<CheckboxOptionProps> = commonArgs) => {
+  const mergedArgs = { ...commonArgs, ...args };
   const [checked, setChecked] = useState(true);
-  const content = text('content', 'Normally, the button and icon are vertically centered.');
-  const title = text('title', 'Checkbox option');
-  const disabled = boolean('disabled', false);
-  const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
-  const isContainerAligned = boolean('isContainerAligned', false);
 
   return (
     <CheckboxOption
       id="checkbox-option"
       name="checkbox-option"
       checked={checked}
-      disabled={disabled}
-      title={title}
-      content={content}
-      media={<FastFlagIcon />}
-      showMediaAtAllSizes={showMediaAtAllSizes}
-      isContainerAligned={isContainerAligned}
+      disabled={mergedArgs.disabled}
+      title={mergedArgs.title}
+      content={mergedArgs.content}
+      media={<FastFlag />}
+      showMediaAtAllSizes={mergedArgs.showMediaAtAllSizes}
+      isContainerAligned={mergedArgs.isContainerAligned}
       onChange={(newValue) => setChecked(newValue)}
     />
   );
 };
 
-export const Basic = () => {
-  return <Template />;
+export const Basic = (args: CheckboxOptionProps) => {
+  return renderTemplate(args);
 };
 
-export const Multiple = () => {
+export const Multiple = (args: CheckboxOptionProps) => {
   return (
     <>
-      <Template />
-      <Template />
-      <Template />
+      {renderTemplate(args)}
+      {renderTemplate(args)}
+      {renderTemplate(args)}
     </>
   );
 };
 
-export const WithContainerContent = () => (
+export const WithContainerContent = (args: CheckboxOptionProps) => (
   <>
     <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
       Choose how to pay
     </Title>
-    <Template />
-    <Template />
-    <Template />
+    {renderTemplate(args)}
+    {renderTemplate(args)}
+    {renderTemplate(args)}
     <div>
       <Nudge
         className="m-t-2"

package/src/chevron/Chevron.story.tsx

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

package/src/chips/Chips.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import Chips, { ChipsProps, ChipValue } from './Chips';

package/src/circularButton/CircularButton.story.tsx

@@ -2,7 +2,7 @@ import * as Icons from '@transferwise/icons';
 
 import { ControlType, Priority } from '../common';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import { storyConfig } from '../test-utils';
 import Title from '../title';

package/src/circularButton/CircularButton.tests.story.tsx

@@ -1,6 +1,6 @@
 import { Freeze } from '@transferwise/icons';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 
 export default {

package/src/common/bottomSheet/BottomSheet.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 { FastFlag } from '@transferwise/icons';
 import { useState } from 'react';
 

package/src/common/card/Card.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { lorem10 } from '../../test-utils';
 import Title from '../../title';

package/src/common/circle/Circle.story.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { storyConfig } from '../../test-utils';
 import Circle from './Circle';
 import { Profile } from '@transferwise/icons';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { CircleProps } from '.';
 import Body from '../../body';
 

package/src/common/responsivePanel/ResponsivePanel.spec.js

@@ -1,32 +1,11 @@
 import { Breakpoint, Position } from '..';
-import { mockMatchMedia, render } from '../../test-utils';
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import React, { forwardRef } from 'react';
 
 import ResponsivePanel from './ResponsivePanel';
 
 mockMatchMedia();
 
-jest.mock('../bottomSheet', () => {
-  const { forwardRef } = require('react');
-  return forwardRef(({ open, children }, reference) =>
-    open ? (
-      <div ref={reference} className="np-bottom-sheet">
-        {children}
-      </div>
-    ) : null,
-  );
-});
-
-jest.mock('../panel', () => {
-  const { forwardRef } = require('react');
-  return forwardRef(({ open, children }, reference) =>
-    open ? (
-      <div ref={reference} className="np-panel np-panel--open">
-        {children}
-      </div>
-    ) : null,
-  );
-});
-
 describe('ResponsivePanel', () => {
   const props = {
     arrow: true,
@@ -45,13 +24,13 @@ describe('ResponsivePanel', () => {
 
   describe('on desktop', () => {
     it('renders Panel', async () => {
-      ({ container } = render(
+      render(
         <ResponsivePanel {...props} intialOpen>
           children
         </ResponsivePanel>,
-      ));
+      );
 
-      expect(container).toMatchSnapshot();
+      expect(screen.getByRole('dialog')).not.toHaveAttribute('aria-modal');
     });
   });
 
@@ -61,13 +40,13 @@ describe('ResponsivePanel', () => {
     });
 
     it('renders bottomSheet', async () => {
-      ({ container } = render(
+      render(
         <ResponsivePanel {...props} open>
           children
         </ResponsivePanel>,
-      ));
+      );
 
-      expect(container).toMatchSnapshot();
+      expect(screen.getByRole('dialog')).toHaveAttribute('aria-modal');
     });
   });
 });

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '.';
 import { storyConfig } from '../test-utils';

package/src/dateInput/DateInput.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 { DateInput } from '..';
 

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, fn } from 'storybook/test';
 
 import { DateInput, Field } from '..';
 import { lorem10, storyConfig } from '../test-utils';

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;