@transferwise/components 46.100.0 → 46.100.2

package/src/tile/Tile.story.tsx

@@ -1,52 +1,52 @@
-import { action } from '@storybook/addon-actions';
-import { text, boolean } from '@storybook/addon-knobs';
-
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { Size } from '../common';
-
-import Tile from '.';
 import AvatarView from '../avatarView';
+import Tile from '.';
+import { Illustration, type IllustrationProps } from '@wise/art';
+import Image from '../image';
+
+const LabelledIllustration = (props: IllustrationProps) => <Illustration {...props} />;
+LabelledIllustration.displayName = 'Illustration';
 
-export default {
+const meta: Meta<typeof Tile> = {
   component: Tile,
   title: 'Internal/Tile',
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    disabled: { control: 'boolean' },
+    size: {
+      control: 'radio',
+      options: [Size.MEDIUM, Size.SMALL],
+    },
+    media: { control: false },
+    href: { control: 'text' },
+    onClick: { action: 'onClick' },
+  },
+  args: {
+    media: (
+      <Image
+        alt="illustration"
+        src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+      />
+    ),
+    title: 'Hank Miller',
+    description: 'Click here to send money to Mr. Miller',
+    disabled: false,
+    href: '#href1',
+    size: Size.MEDIUM,
+    onClick: action('onClick'),
+  },
 };
+export default meta;
+
+type Story = StoryObj<typeof Tile>;
 
-export const Basic = () => {
-  const description = text('Description', 'Click here to send money to Mr. Miller');
-  const disabled = boolean('Disabled', false);
-  const medium = boolean('Medium', true);
-  const title = text('Title', 'Hank Miller');
+export const WithImage: Story = {};
 
-  return (
-    <div className="d-flex">
-      <div className="m-a-2">
-        <Tile
-          description={description}
-          disabled={disabled}
-          href="#href1"
-          media={
-            <img
-              src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-              alt="illustration"
-              style={{ width: '100%' }}
-            />
-          }
-          size={medium ? Size.MEDIUM : Size.SMALL}
-          title={title}
-          onClick={action('onClick')}
-        />
-      </div>
-      <div className="m-a-2">
-        <Tile
-          description={description}
-          disabled={disabled}
-          href="#href1"
-          media={<AvatarView profileName="Henry Morris" />}
-          size={medium ? Size.MEDIUM : Size.SMALL}
-          title={title}
-          onClick={action('onClick')}
-        />
-      </div>
-    </div>
-  );
+export const WithAvatar: Story = {
+  args: {
+    media: <AvatarView profileName="Henry Morris" />,
+  },
 };

package/src/tooltip/Tooltip.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
 
 import Button from '../button';
 import { storyConfig } from '../test-utils';
@@ -20,7 +20,6 @@ export default {
       </Tooltip>
     </div>
   ),
-  tags: ['autodocs'],
 } satisfies Meta<typeof Tooltip>;
 
 type Story = StoryObj<typeof Tooltip>;

package/src/typeahead/Typeahead.story.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search as SearchIcon } from '@transferwise/icons';
-import { userEvent, within, fn } from '@storybook/test';
+import { userEvent, within, fn } from 'storybook/test';
 
 import Typeahead, { type TypeaheadOption } from './Typeahead';
 import { Size } from '../common';
@@ -48,6 +48,7 @@ const meta: Meta<typeof Typeahead> = {
     onInputChange: fn(),
     onSearch: fn(),
   },
+
   argTypes: {
     size: {
       control: 'inline-radio',

package/src/upload/Upload.story.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';
@@ -8,7 +8,7 @@ import { Field } from '../field/Field';
 const meta = {
   component: Upload,
   title: 'Forms/Upload',
-  tags: ['autodocs'],
+
   argTypes: {
     maxSize: {
       control: {

package/src/upload/Upload.tests.story.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';

package/src/upload/utils/isTypeValid/isTypeValid.spec.ts

@@ -12,7 +12,9 @@ const data64Img = 'data:image/png;something';
 
 describe('isTypeValid', () => {
   describe('when type is provided', () => {
-    it.each([pdfFile, pngFile])('returns true for wildcard rule %s', (file) => {
+    const files = [pdfFile, pngFile] as const;
+
+    it.each(files)('returns true for wildcard rule %s', (file: (typeof files)[number]) => {
       expect(isTypeValid(file, '*')).toBe(true);
     });
 

package/src/uploadInput/UploadInput.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
 import { Field } from '../field/Field';
 
@@ -8,7 +8,6 @@ import { UploadResponse } from './types';
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
   component: UploadInput,
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -1,10 +1,10 @@
-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 { Status } from '../common';
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
-import { userEvent } from '@storybook/test';
+import { userEvent } from 'storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',

package/src/withId/withId.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { WithoutId, WithCustomId, WithEmptyId } from './withId.story';
 import { withIdSource } from './story/source';
 

package/src/withId/withId.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button, withId, type WithIdProps } from '..';
 
 type Story = StoryObj<typeof withId>;

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

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponsivePanel on desktop renders Panel 1`] = `
-<div>
-  <div
-    class="np-panel np-panel--open"
-  >
-    children
-  </div>
-</div>
-`;
-
-exports[`ResponsivePanel on mobile renders bottomSheet 1`] = `
-<div>
-  <div
-    class="np-bottom-sheet"
-  >
-    children
-  </div>
-</div>
-`;