@transferwise/components 0.0.0-experimental-09066ec → 0.0.0-experimental-148ffef

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

@@ -1,9 +1,11 @@
-import { StoryFn } from '@storybook/react-webpack5';
+import { StoryFn, StoryObj } 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';
+import { Size } from '../common';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: DateLookup,
@@ -99,3 +101,51 @@ FocusOnFirstNonDisabledDate.play = async () => {
   await userEvent.tab();
   await userEvent.keyboard(' ');
 };
+
+const epoch = new Date('2011-01-01');
+const theFuture = new Date(epoch);
+theFuture.setUTCDate(epoch.getUTCDate() + 10);
+const thePast = new Date(epoch);
+thePast.setUTCDate(epoch.getUTCDate() - 10);
+
+const Basic: StoryObj<typeof DateLookup> = {
+  render: (args: DateLookupProps) => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
+      <DateLookup
+        {...args}
+        min={args.min ? new Date(args.min) : thePast}
+        max={args.max ? new Date(args.max) : theFuture}
+        value={value}
+        onChange={(v) => setValue(v)}
+      />
+    );
+  },
+  args: {
+    size: Size.MEDIUM,
+    disabled: false,
+    label: 'label',
+    monthFormat: 'long',
+    placeholder: 'placeholder',
+    id: 'date-lookup',
+    clearable: true,
+    min: thePast,
+    max: theFuture,
+  },
+  play: async () => {
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
+  },
+};
+
+export const Basic400Zoom: StoryObj<typeof DateLookup> = {
+  ...Basic,
+  ...withVariantConfig(['400%'], {
+    ...Basic,
+    parameters: {
+      chromatic: {
+        delay: 2000,
+      },
+    },
+  }),
+};

package/src/divider/Divider.story.tsx

@@ -126,5 +126,4 @@ export const AllVariants: Story = {
   argTypes: {
     ...hideControls(['level', 'testId', 'className', 'isContent']),
   },
-  tags: ['!autodocs'],
 };

package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import * as stories from './ExpressiveMoneyInput.story';
+import * as stories from './ExpressiveMoneyInput.test.story';
 
 <Meta title="Forms/ExpressiveMoneyInput/Autofocus" />
 

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -221,12 +221,3 @@ export const WithCustomCurrencySelector = {
     );
   },
 };
-
-export const WithAutofocus = {
-  tags: ['!autodocs', '!dev'],
-  args: {
-    inlinePrompt: undefined,
-    autoFocus: true,
-  },
-  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
-};

package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+
+const meta: Meta<typeof ExpressiveMoneyInput> = {
+  component: ExpressiveMoneyInput,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Forms/ExpressiveMoneyInput/Tests',
+  args: {
+    label: 'You send',
+    currency: 'GBP',
+    amount: 1234.56,
+    currencySelector: undefined,
+  },
+};
+export default meta;
+
+type Story = StoryObj<ExpressiveMoneyInputProps>;
+
+export const WithAutofocus: Story = {
+  args: {
+    autoFocus: true,
+  },
+};

package/src/field/Field.story.tsx

@@ -102,7 +102,7 @@ export const Basic = (args: FieldProps) => {
   );
 };
 
-export const WithStatusMessages = (args: FieldProps) => {
+export const Messages = (args: FieldProps) => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div>
@@ -145,39 +145,6 @@ export const WithStatusMessages = (args: FieldProps) => {
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-
-      {/* instance with deprecated `hint` prop */}
-      <Field
-        label="Text Input with deprecated `hint` prop"
-        hint="This is a helpful message"
-        sentiment={Sentiment.NEGATIVE}
-        message="Validation error, please take a look"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-
-      {/* instance with deprecated `error` & `hint` props */}
-      <Field
-        label="Text Input with deprecated `error` & `hint` props"
-        hint="This is a helpful message"
-        error="Validation error, please take a look"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-
-      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
-      <Field
-        label="Text Input with Info under the field"
-        message="This is a helpful message"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
     </div>
   );
 };

package/src/field/Field.test.story.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Input } from '../inputs/Input';
+import { Field, FieldProps } from './Field';
+import { Sentiment } from '../common';
+
+const meta: Meta<typeof Field> = {
+  component: Field,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Forms/Field/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof Field>;
+
+export const DeprecatedProps: Story = {
+  render: (args: FieldProps) => {
+    const [value, setValue] = useState<string | undefined>('This is some text');
+    return (
+      <div>
+        {/* instance with deprecated `hint` prop */}
+        <Field
+          label="Text Input with deprecated `hint` prop"
+          hint="This is a helpful message"
+          sentiment={Sentiment.NEGATIVE}
+          message="Validation error, please take a look"
+          messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+
+        {/* instance with deprecated `error` & `hint` props */}
+        <Field
+          label="Text Input with deprecated `error` & `hint` props"
+          hint="This is a helpful message"
+          error="Validation error, please take a look"
+          messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+
+        {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
+        <Field
+          label="Text Input with Info under the field"
+          message="This is a helpful message"
+          messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+      </div>
+    );
+  },
+};

package/src/header/Header.test.story.tsx

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 const meta: Meta<typeof Header> = {
   component: Header,
   tags: ['!autodocs', '!manifest'],
-  title: 'Typography/Header/tests',
+  title: 'Typography/Header/Tests',
 };
 export default meta;
 type Story = StoryObj<HeaderProps>;

package/src/info/Info.story.tsx

@@ -1,9 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
-
 import { lorem10 } from '../test-utils';
-
-import Info, { InfoPresentation } from '.';
+import Info from '.';
 import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta = {
@@ -14,7 +11,6 @@ const meta = {
     title: 'Fast transfer hint',
     content: lorem10,
   },
-
   render: (args) => (
     <p>
       <span>Fast transfer</span> <Info {...args} />
@@ -29,32 +25,3 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   ...withVariantConfig(['default', 'dark', 'rtl']),
 };
-
-export const OpenedPopover = {
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-} satisfies Story;
-
-export const OpenedPopoverMobile: Story = {
-  ...OpenedPopover,
-  ...withVariantConfig(['mobile'], OpenedPopover),
-};
-
-export const OpenedModal = {
-  ...OpenedPopover,
-  args: {
-    presentation: InfoPresentation.MODAL,
-  },
-} satisfies Story;
-
-export const OpenedModalMobile: Story = {
-  ...OpenedModal,
-  ...withVariantConfig(['mobile'], OpenedModal),
-};

package/src/info/Info.test.story.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { lorem10 } from '../test-utils';
+import Info, { InfoPresentation } from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Info> = {
+  component: Info,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Info/Tests',
+  args: {
+    'aria-label': 'Click here for more details',
+    title: 'Fast transfer hint',
+    content: lorem10,
+  },
+  render: (args) => (
+    <p>
+      <span>Fast transfer</span> <Info {...args} />
+    </p>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const OpenedPopover: Story = {
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const OpenedPopoverMobile: Story = {
+  ...OpenedPopover,
+  ...withVariantConfig(['mobile'], OpenedPopover),
+};
+
+export const OpenedModal: Story = {
+  ...OpenedPopover,
+  args: {
+    presentation: InfoPresentation.MODAL,
+  },
+};
+
+export const OpenedModalMobile: Story = {
+  ...OpenedModal,
+  ...withVariantConfig(['mobile'], OpenedModal),
+};

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -65,15 +65,3 @@ export const SecurityPin: Story = {
     displayPattern: '*-*-*-*-*-*',
   },
 };
-
-export const SecurityPinPlay: Story = {
-  args: {
-    label: 'Security Pin Play',
-    placeholder: '*-*-*-*-*-*',
-    displayPattern: '*-*-*-*-*-*',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-  },
-};

package/src/inputWithDisplayFormat/InputWithDisplayFormat.test.story.tsx

@@ -0,0 +1,33 @@
+import { userEvent, within } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
+import { Field, FieldProps } from '../field/Field';
+
+const meta: Meta<typeof InputWithDisplayFormat> = {
+  title: 'Forms/InputWithDisplayFormat/Tests',
+  component: InputWithDisplayFormat,
+  tags: ['!autodocs', '!manifest'],
+  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
+    return (
+      <Field label={label} id={args.id}>
+        <InputWithDisplayFormat id={args.id} {...args} />
+      </Field>
+    );
+  },
+};
+export default meta;
+
+type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
+
+export const SecurityPinPlay: Story = {
+  args: {
+    label: 'Security Pin Play',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
+  },
+};

package/src/legacylistItem/LegacyListItem.test.story.tsx

@@ -7,7 +7,7 @@ import List from '../list';
 export default {
   component: LegacyListItem,
   tags: ['!autodocs', 'deprecated', '!manifest'],
-  title: 'Content/LegacyListItem/tests',
+  title: 'Content/LegacyListItem/Tests',
 };
 
 export const LongText = () => {

package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx

@@ -11,7 +11,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/Breakpoints/NoMedia',
+  title: 'Content/ListItem/Tests/Breakpoints/NoMedia',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx

@@ -11,7 +11,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/Breakpoints/SideMedia',
+  title: 'Content/ListItem/Tests/Breakpoints/SideMedia',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx

@@ -11,7 +11,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/Breakpoints/StackedMedia',
+  title: 'Content/ListItem/Tests/Breakpoints/StackedMedia',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/ListItem.focus.test.story.tsx

@@ -20,7 +20,7 @@ const waitForListItem = async (canvas: ReturnType<typeof within>, timeout = 3000
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/focus',
+  title: 'Content/ListItem/Tests/focus',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -11,7 +11,7 @@ import { withSizedContainer } from './helpers';
 import { LISTITEM_CQ } from '../constants';
 
 export default {
-  title: 'Content/ListItem/tests/layout',
+  title: 'Content/ListItem/Tests/layout',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/theme: bright-green',
+  title: 'Content/ListItem/Tests/variants/theme: bright-green',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/theme: dark',
+  title: 'Content/ListItem/Tests/variants/theme: dark',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/theme: forest-green',
+  title: 'Content/ListItem/Tests/variants/theme: forest-green',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx

@@ -5,7 +5,7 @@ import { withSizedContainer } from '../helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/cq: medium',
+  title: 'Content/ListItem/Tests/variants/cq: medium',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx

@@ -11,7 +11,7 @@ import {
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/surface: neutral',
+  title: 'Content/ListItem/Tests/variants/surface: neutral',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx

@@ -10,7 +10,7 @@ import { VariantStory } from './helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/theme: personal',
+  title: 'Content/ListItem/Tests/variants/theme: personal',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/rtl',
+  title: 'Content/ListItem/Tests/variants/rtl',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/listItem/_stories/variants/ListItem.small.test.story.tsx

@@ -5,7 +5,7 @@ import { withSizedContainer } from '../helpers';
 
 export default {
   component: ListItem,
-  title: 'Content/ListItem/tests/variants/cq: small',
+  title: 'Content/ListItem/Tests/variants/cq: small',
   tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },

package/src/logo/Logo.story.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Logo,
@@ -36,8 +35,3 @@ export const Basic: Story = {
     inverse: false,
   },
 };
-
-export const Mobile: Story = {
-  ...Basic,
-  ...withVariantConfig(['mobile']),
-};

package/src/logo/Logo.test.story.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import Logo from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Logo> = {
+  component: Logo,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Content/Logo/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof Logo>;
+
+export const Mobile: Story = {
+  args: {
+    type: 'WISE',
+    inverse: false,
+  },
+  ...withVariantConfig(['mobile']),
+};

package/src/modal/Modal.story.tsx

@@ -6,7 +6,6 @@ import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
 import { lorem10, lorem100, lorem1000 } from '../test-utils';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Modal,
@@ -76,11 +75,6 @@ export const Basic: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const BasicMobile: Story = {
-  ...Basic,
-  ...withVariantConfig(['mobile'], Basic),
-};
-
 export const ContentScroll: Story = {
   args: {
     title: lorem10,
@@ -90,11 +84,6 @@ export const ContentScroll: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const ContentScrollMobile: Story = {
-  ...ContentScroll,
-  ...withVariantConfig(['mobile'], ContentScroll),
-};
-
 export const ViewportScroll: Story = {
   args: {
     title: lorem10,
@@ -104,11 +93,6 @@ export const ViewportScroll: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const ViewportScrollMobile: Story = {
-  ...ViewportScroll,
-  ...withVariantConfig(['mobile'], ViewportScroll),
-};
-
 export const WithoutTitle: Story = {
   args: {
     body: lorem1000,
@@ -117,11 +101,6 @@ export const WithoutTitle: Story = {
   render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
-export const WithoutTitleMobile: Story = {
-  ...WithoutTitle,
-  ...withVariantConfig(['mobile'], WithoutTitle),
-};
-
 export const WithThemeProviderInContent: Story = {
   args: {
     title: lorem10,
@@ -138,8 +117,3 @@ export const WithThemeProviderInContent: Story = {
     <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
   ),
 };
-
-export const WithThemeProviderInContentMobile: Story = {
-  ...WithThemeProviderInContent,
-  ...withVariantConfig(['mobile'], WithThemeProviderInContent),
-};