@transferwise/components 46.130.3 → 46.131.0

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/inputs/SelectInput/ClearButton/SelectInputClearButton.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../../../styles/less/ring.less";
 
 .np-select-input-addon-container {
   pointer-events: none;

package/src/inputs/SelectInput/Options/SelectInputOptions.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../../../styles/less/ring.less";
 
 .np-select-input-options-container {
   display: flex;

package/src/inputs/SelectInput/SelectInput.less

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../../styles/less/ring.less";
 
 // Import component styles
 @import "./BottomSheet/SelectInputBottomSheet.less";

package/src/inputs/_common.less

@@ -1,4 +1,4 @@
-@import (reference) '../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less';
+@import (reference) './../styles/less/core/_typography.less';
 
 .np-form-control {
   --ring-width: 1px;

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/link/Link.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/ring.less";
 
 a, button.np-link {
   border-radius: 2px;

package/src/listItem/ListItem.less

@@ -1,6 +1,6 @@
 @import "./ListItem.grid.less";
 @import "./Prompt/ListItemPrompt.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../styles/less/ring.less";
 @import (reference) "./ListItem.vars.less";
 
 .wds-list-item {

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']),
+};