@transferwise/components 46.130.2 → 46.131.0

package/src/main.less

@@ -1,3 +1,5 @@
+@import "./styles/less/neptune.bundle.less";
+
 @import "./sentimentSurface/SentimentSurface.less";
 
 @import "./criticalBanner/CriticalCommsBanner.less";
@@ -44,7 +46,7 @@
 @import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
-@import "./inputs/SelectInput.less";
+@import "./inputs/SelectInput/SelectInput.less";
 @import "./inputs/TextArea.less";
 @import "./instructionsList/InstructionsList.less";
 @import "./link/Link.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) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/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) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/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) "./../styles/less/mixins/_logical-properties.less";
 
 .np-navigation-options-list {
   list-style-type: none;

package/src/overlayHeader/OverlayHeader.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "./../styles/less/addons/_spacing-utilities.less";
 
 .np-overlay-header {
   .np-overlay-header__content {

package/src/phoneNumberInput/PhoneNumberInput.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
 
 @four-digit-country-code-width: 120px;
 

package/src/popover/Popover.less

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+@import (reference) "./../styles/less/core/_typography.less";
 
 // This can't be wrapped in np-popover because styles won't get applied to bottomsheet
 //which is opened in a portal hence it won't be contained in np-popover.

package/src/prompt/ActionPrompt/ActionPrompt.story.tsx

@@ -335,49 +335,6 @@ export const Dismissible: Story = {
   },
 };
 
-/**
- * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
- * the buttons stack vertically. At wider widths (desktop), they appear side by side.
- */
-export const Responsiveness: Story = {
-  render: (args) => (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '320px 480px',
-        gap: '1rem',
-        alignItems: 'start',
-      }}
-    >
-      <ActionPrompt
-        sentiment="proposition"
-        title="Stacked (320px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-      <ActionPrompt
-        sentiment="proposition"
-        title="Side-by-side (480px)"
-        description={lorem10}
-        media={{ avatar: { asset: <Travel /> } }}
-        action={{ label: 'Primary action', onClick: fn() }}
-        actionSecondary={{ label: 'Secondary', onClick: fn() }}
-        onDismiss={fn()}
-      />
-    </div>
-  ),
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-};
-
 /**
  * While the component itself will stretch to the full available width, the text container will be
  * capped at `480px` to ensure optimal readability.

package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Freeze, People } from '@transferwise/icons';
+import { Freeze, People, Travel } from '@transferwise/icons';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
 import ActionPrompt from './ActionPrompt';
@@ -7,6 +7,7 @@ import { Body, Title } from '../..';
 import { StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../../.storybook/modes';
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { lorem10 } from '../../test-utils';
 
 const withComponentGrid =
   ({ gap = '1rem' } = {}) =>
@@ -228,3 +229,46 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * ActionPrompt adapts its layout based on available width. At narrow widths (mobile),
+ * the buttons stack vertically. At wider widths (desktop), they appear side by side.
+ */
+export const Responsiveness: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '320px 480px',
+        gap: '1rem',
+        alignItems: 'start',
+      }}
+    >
+      <ActionPrompt
+        sentiment="proposition"
+        title="Stacked (320px)"
+        description={lorem10}
+        media={{ avatar: { asset: <Travel /> } }}
+        action={{ label: 'Primary action', onClick: fn() }}
+        actionSecondary={{ label: 'Secondary', onClick: fn() }}
+        onDismiss={fn()}
+      />
+      <ActionPrompt
+        sentiment="proposition"
+        title="Side-by-side (480px)"
+        description={lorem10}
+        media={{ avatar: { asset: <Travel /> } }}
+        action={{ label: 'Primary action', onClick: fn() }}
+        actionSecondary={{ label: 'Secondary', onClick: fn() }}
+        onDismiss={fn()}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+};

package/src/radioGroup/RadioGroup.test.story.tsx

@@ -5,7 +5,7 @@ import { fn } from 'storybook/test';
 
 const meta = {
   component: RadioGroup,
-  title: 'Forms/RadioGroup/tests',
+  title: 'Forms/RadioGroup/Tests',
   tags: ['!autodocs', '!manifest'],
   args: {
     selectedValue: 'radio-2',

package/src/select/Select.less

@@ -1,8 +1,8 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/dist/less/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/mixins/_border-radius.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/mixins/_border-radius.less";
+@import (reference) "./../styles/less/core/_typography.less";
+@import (reference) "./../styles/less/ring.less";
 
 .np-select {
   .np-dropdown-toggle {

package/src/slidingPanel/SlidingPanel.less

@@ -1,5 +1,5 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/variables/zindex.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
 
 .sliding-panel {
   .translateX(-100%);

package/src/snackbar/Snackbar.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
-@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) "./../styles/variables/zindex.less";
+@import (reference) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
 
 .snackbar {
   text-align: center;

package/src/stepper/Stepper.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) "./../styles/variables/neptune-tokens.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/ring.less";
 
 .tw-stepper {
   padding-bottom: 24px;

package/src/stepper/Stepper.test.story.tsx

@@ -26,7 +26,7 @@ const STEPS = [
 
 const meta = {
   component: Stepper,
-  title: 'Navigation/Stepper/tests',
+  title: 'Navigation/Stepper/Tests',
   tags: ['!manifest'],
   argTypes: {
     activeStep: {