@transferwise/components 0.0.0-experimental-09066ec → 0.0.0-experimental-c8bf162

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

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../../neptune-css/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) './../neptune-css/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) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/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) "./../neptune-css/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']),
+};

package/src/main.less

@@ -1,3 +1,5 @@
+@import "./neptune-css/less/neptune.bundle.less";
+
 @import "./sentimentSurface/SentimentSurface.less";
 
 @import "./criticalBanner/CriticalCommsBanner.less";

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

package/src/modal/Modal.test.story.tsx

@@ -0,0 +1,125 @@
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ScreenMode, ThemeProvider } from '@wise/components-theming';
+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';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Modal/Tests',
+  args: {
+    size: 'md',
+    position: 'center',
+    open: false,
+  },
+  parameters: {
+    chromatic: {
+      delay: 2000,
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export interface StoryContentProps {
+  args: CommonProps & ModalProps;
+  screenMode?: ScreenMode;
+  viewMode?: string;
+}
+
+const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
+  const [open, setOpen] = useState(viewMode !== 'docs');
+
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
+      <Modal
+        {...args}
+        body={
+          !screenMode ? (
+            args.body
+          ) : (
+            <ThemeProvider theme="personal" screenMode={screenMode}>
+              {lorem100}
+            </ThemeProvider>
+          )
+        }
+        open={open}
+        disableDimmerClickToClose={args.disableDimmerClickToClose}
+        onClose={() => {
+          setOpen(false);
+          action('Modal closed')();
+        }}
+      />
+    </>
+  );
+};
+
+export const BasicMobile: Story = {
+  args: {
+    title: 'Title',
+    body: lorem10,
+    scroll: Scroll.VIEWPORT,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const ContentScrollMobile: Story = {
+  args: {
+    title: lorem10,
+    body: lorem1000,
+    scroll: Scroll.CONTENT,
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const ViewportScrollMobile: Story = {
+  args: {
+    title: lorem10,
+    body: lorem1000,
+    scroll: Scroll.VIEWPORT,
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const WithoutTitleMobile: Story = {
+  args: {
+    body: lorem1000,
+    scroll: Scroll.CONTENT,
+  },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
+  ...withVariantConfig(['mobile']),
+};
+
+export const WithThemeProviderInContentMobile: Story = {
+  args: {
+    title: lorem10,
+    body: lorem100,
+    scroll: Scroll.VIEWPORT,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
+  },
+  render: (args, { globals: { screenMode }, viewMode }) => (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
+  ),
+  ...withVariantConfig(['mobile']),
+};

package/src/moneyInput/MoneyInput.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .tw-money-input {
   display: flex;

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -7,7 +7,7 @@ import Body from '../body';
 import MoneyInput from './MoneyInput';
 
 const meta = {
-  title: 'Forms/MoneyInput/tests',
+  title: 'Forms/MoneyInput/Tests',
   component: MoneyInput,
   args: {
     amount: 1000,

package/src/navigationOption/NavigationOption.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
-@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) "./../neptune-css/variables/neptune-tokens.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/ring.less";
 
 .np-navigation-option {
   text-decoration: none;

package/src/navigationOptionsList/NavigationOptionsList.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
 
 .np-navigation-options-list {
   list-style-type: none;