@transferwise/components 46.100.0 → 46.100.2

package/src/main.css

@@ -34,10 +34,6 @@
     margin-left: var(--padding-small);
   }
 }
-@media (min-width: 768px) {
-}
-@media (min-width: 768px) {
-}
 .np-accordion-item {
   display: block;
   width: 100%;
@@ -3188,101 +3184,15 @@ button.np-link {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
 .tw-loader--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);
-  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour),
-      0.5rem 0 0 var(--coin-colour),
-      0.525rem 0 0 var(--coin-colour),
-      0.55rem 0 0 var(--coin-colour),
-      0.575rem 0 0 var(--coin-colour),
-      0.6rem 0 0 var(--coin-colour),
-      0.625rem 0 0 var(--coin-colour),
-      0.65rem 0 0 var(--coin-colour);
-  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour),
-      -0.5rem 0 0 var(--coin-colour),
-      -0.525rem 0 0 var(--coin-colour),
-      -0.55rem 0 0 var(--coin-colour),
-      -0.575rem 0 0 var(--coin-colour),
-      -0.6rem 0 0 var(--coin-colour),
-      -0.625rem 0 0 var(--coin-colour),
-      -0.65rem 0 0 var(--coin-colour);
+  --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour), 0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour), 0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour), 0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
+  --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour), -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour), -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour), -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
 }
 @media (prefers-reduced-motion) {
   .tw-loader::before {

package/src/markdown/Markdown.story.tsx

@@ -1,11 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Markdown from './Markdown';
 
 export default {
   component: Markdown,
   title: 'Typography/Markdown',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Markdown>;
 
 type Story = StoryObj<typeof Markdown>;

package/src/modal/Modal.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 { ScreenMode, ThemeProvider } from '@wise/components-theming';
 import { useState } from 'react';
 
@@ -10,10 +10,11 @@ import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 export default {
   component: Modal,
   title: 'Dialogs/Modal',
+
   args: {
     size: 'md',
     position: 'center',
-    open: true,
+    open: false,
   },
   parameters: {
     chromatic: {
@@ -27,10 +28,11 @@ type Story = StoryObj<typeof Modal>;
 export interface StoryContentProps {
   args: CommonProps & ModalProps;
   screenMode?: ScreenMode;
+  viewMode?: string;
 }
 
-const StoryContent = ({ args, screenMode }: StoryContentProps) => {
-  const [open, setOpen] = useState(args.open);
+const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
+  const [open, setOpen] = useState(viewMode !== 'docs');
 
   return (
     <>
@@ -70,7 +72,7 @@ export const Basic: Story = {
       </Button>
     ),
   },
-  render: (args) => <StoryContent args={args} />,
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -81,6 +83,7 @@ export const ContentScroll: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ContentScrollMobile: Story = storyConfig(ContentScroll, { variants: ['mobile'] });
@@ -91,6 +94,7 @@ export const ViewportScroll: Story = {
     body: lorem1000,
     scroll: Scroll.VIEWPORT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ViewportScrollMobile: Story = storyConfig(ViewportScroll, { variants: ['mobile'] });
@@ -100,6 +104,7 @@ export const WithoutTitle: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
@@ -115,9 +120,9 @@ export const WithThemeProviderInContent: Story = {
       </Button>
     ),
   },
-  render: (args, { globals: { screenMode } }) => (
+  render: (args, { globals: { screenMode }, viewMode }) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <StoryContent args={args} screenMode={screenMode} />
+    <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
   ),
 };
 

package/src/money/Money.story.tsx

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

package/src/moneyInput/MoneyInput.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Forms/MoneyInput/Known issues" />
 

package/src/moneyInput/MoneyInput.spec.tsx

@@ -387,11 +387,14 @@ describe('Money Input', () => {
       ['1±!@#$^*,_+?><2', '1,2'],
       ['12,3', '12,3'],
       ['12.3', '12.3'],
-    ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
-      customRender({ amount: null });
-      await userEvent.type(getInput(), testValue);
-      expect(getInput()).toHaveValue(expectedValue);
-    });
+    ] as const)(
+      "ignores the letters when typed '%s' and shows '%s'",
+      async (testValue: string, expectedValue: string) => {
+        customRender({ amount: null });
+        await userEvent.type(getInput(), testValue);
+        expect(getInput()).toHaveValue(expectedValue);
+      },
+    );
   });
 
   it('supports custom `aria-labelledby` attribute', () => {

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { within, userEvent } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -41,7 +41,6 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof MoneyInput>;
 
 type Story = StoryObj<typeof MoneyInput>;

package/src/moneyInput/currencyFormatting.spec.ts

@@ -37,7 +37,7 @@ describe('Number formatting', () => {
     ['asda', NaN],
   ])(
     "parses strings by removing the non-numerical characters; case: '%s', expected: '%s'",
-    (testValue, expectedValue) => {
+    (testValue: string, expectedValue: number) => {
       expect(parseAmount(testValue, 'gbp')).toBe(expectedValue);
     },
   );