@transferwise/components 46.130.2 → 46.131.0

package/src/avatarLayout/AvatarLayout.test.story.tsx

@@ -0,0 +1,117 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import AvatarLayout from '.';
+import { Freeze, Plane } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+
+const meta: Meta<typeof AvatarLayout> = {
+  component: AvatarLayout,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Content/AvatarLayout/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof AvatarLayout>;
+
+export const EdgeInstances: Story = {
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(2, min-content)`,
+      }}
+    >
+      <AvatarLayout orientation="diagonal" avatars={[]} />
+
+      <AvatarLayout orientation="diagonal" avatars={[{}]} />
+
+      <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
+      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />
+
+      <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
+      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />
+
+      <AvatarLayout
+        orientation="diagonal"
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { imgSrc: '../avatar-squere-dude.webp' },
+          { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { imgSrc: '../avatar-square-dude.webp' },
+          {
+            asset: <Plane />,
+            style: { backgroundColor: 'var(--color-bright-pink)' },
+          },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          {
+            asset: <Freeze />,
+            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
+          },
+          {
+            asset: <Freeze />,
+            style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
+          },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        interactive
+        avatars={[
+          { asset: <Flag code="gb" /> },
+          { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
+        ]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
+      />
+
+      <AvatarLayout
+        interactive
+        orientation="horizontal"
+        avatars={[
+          { imgSrc: '../avatar-rectangle-fox.webp' },
+          { imgSrc: '../avatar-square-dude.webp' },
+          { asset: '7+' },
+        ]}
+      />
+
+      <AvatarLayout
+        interactive
+        orientation="horizontal"
+        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
+      />
+
+      <AvatarLayout
+        orientation="horizontal"
+        avatars={[
+          { asset: <Flag code="gb" /> },
+          { asset: <Flag code="br" /> },
+          { asset: <Flag code="jp" /> },
+          { asset: '3+' },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/avatarView/AvatarView.story.tsx

@@ -5,25 +5,19 @@ import {
   Convert,
   FastFlag,
   Freeze,
-  Graph,
-  Money,
   Leaf,
   Plane,
-  PlusCircle,
   QrCode,
-  Rewards,
   Target,
   Team,
   Transport,
   Wallet,
   Water,
   Bank,
-  GiftBox,
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
-import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
-import Display from '../display';
+import { ProfileType } from '../common';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
@@ -490,100 +484,3 @@ export const SentimentAwareness: Story = {
   },
   decorators: [withComponentGrid],
 };
-
-export const ProfileBrokenImageFallback: Story = {
-  parameters: {
-    chromatic: {
-      delay: 5000,
-    },
-  },
-  render: () => {
-    const assetUrl = 'https://test.com/img-wrong-url.test';
-    return (
-      <>
-        <AvatarView />
-        <AvatarView imgSrc={assetUrl} />
-        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} />
-        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} profileName="Test Name" />
-      </>
-    );
-  },
-};
-
-export const EdgeInstaces: Story = {
-  render: () => {
-    const css = `.custom-variant {
-      border: 1px dashed var(--color-border-neutral);
-    }`;
-    return (
-      <div
-        style={{
-          gap: '1em',
-          display: 'grid',
-          justifyContent: 'space-between',
-          gridTemplate: 'auto auto / repeat(2, min-content)',
-        }}
-      >
-        <style>{css}</style>
-        <AvatarView
-          interactive
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: 'var(--color-bright-orange)' }}
-        >
-          <Money />
-        </AvatarView>
-        <AvatarView
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
-        >
-          <Money />
-        </AvatarView>
-        <AvatarView interactive className="custom-variant">
-          <PlusCircle />
-        </AvatarView>
-        <AvatarView interactive className="custom-variant">
-          {null}
-        </AvatarView>
-        <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
-          <Graph />
-        </AvatarView>
-        <AvatarView
-          interactive
-          style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}
-        >
-          <Graph />
-        </AvatarView>
-        <AvatarView style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}>
-          <Rewards />
-        </AvatarView>
-        <AvatarView
-          interactive
-          style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}
-        >
-          <Rewards />
-        </AvatarView>
-        <AvatarView
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView
-          interactive
-          badge={{ flagCode: 'EU' }}
-          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
-        >
-          <Display>{getInitials(profileName1)}</Display>
-        </AvatarView>
-        <AvatarView>9+</AvatarView>
-        <AvatarView interactive>5+</AvatarView>
-      </div>
-    );
-  },
-};

package/src/avatarView/AvatarView.test.story.tsx

@@ -0,0 +1,114 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Graph, Money, PlusCircle, Rewards } from '@transferwise/icons';
+import AvatarView from '.';
+import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
+import Display from '../display';
+
+const meta: Meta<typeof AvatarView> = {
+  component: AvatarView,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Content/AvatarView/Tests',
+};
+export default meta;
+
+type Story = StoryObj<typeof AvatarView>;
+
+const profileName1 = 'Wolter White';
+const profileName2 = 'Tyler Durden';
+
+export const EdgeInstances: Story = {
+  render: () => {
+    const css = `.custom-variant {
+      border: 1px dashed var(--color-border-neutral);
+    }`;
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(2, min-content)',
+        }}
+      >
+        <style>{css}</style>
+        <AvatarView
+          interactive
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: 'var(--color-bright-orange)' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView interactive className="custom-variant">
+          <PlusCircle />
+        </AvatarView>
+        <AvatarView interactive className="custom-variant">
+          {null}
+        </AvatarView>
+        <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
+          <Graph />
+        </AvatarView>
+        <AvatarView
+          interactive
+          style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}
+        >
+          <Graph />
+        </AvatarView>
+        <AvatarView style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}>
+          <Rewards />
+        </AvatarView>
+        <AvatarView
+          interactive
+          style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}
+        >
+          <Rewards />
+        </AvatarView>
+        <AvatarView
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          interactive
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView>9+</AvatarView>
+        <AvatarView interactive>5+</AvatarView>
+      </div>
+    );
+  },
+};
+
+export const ProfileBrokenImageFallback: Story = {
+  parameters: {
+    chromatic: {
+      delay: 5000,
+    },
+  },
+  render: () => {
+    const assetUrl = 'https://test.com/img-wrong-url.test';
+    return (
+      <>
+        <AvatarView />
+        <AvatarView imgSrc={assetUrl} />
+        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} />
+        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} profileName="Test Name" />
+      </>
+    );
+  },
+};

package/src/badge/Badge.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";
 
 @badge-size-sm: 16px;
 @badge-size-lg: 24px;

package/src/button/LegacyButton.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-btn {
   position: relative;

package/src/button/LegacyButton.story.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within, fn, expect } from 'storybook/test';
-import { useState } from 'react';
+import { fn } from 'storybook/test';
 
 import Button from '.';
 import LegacyButton from './LegacyButton';
@@ -170,30 +169,6 @@ export const Variants: Story = {
   },
 };
 
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export const Focused: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
-  },
-  render: function Render(args: React.ComponentProps<typeof Button>) {
-    const [focused, setFocused] = useState(false);
-
-    return (
-      <Button {...args} onFocus={() => setFocused(true)}>
-        {focused ? 'Focused!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
 export const SocialMedia: Story = {
   render: () => {
     return (

package/src/button/LegacyButton.test.story.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, expect } from 'storybook/test';
+import { useState } from 'react';
+
+import Button from '.';
+import LegacyButton from './LegacyButton';
+
+LegacyButton.displayName = 'Button';
+
+const meta: Meta<typeof LegacyButton> = {
+  component: LegacyButton,
+  title: 'Actions/Button/Legacy Button/Tests',
+  tags: ['!autodocs', '!manifest', 'deprecated'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Focused: Story = {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await expect(button).toHaveTextContent('Focused!');
+  },
+  render: function Render(args: React.ComponentProps<typeof Button>) {
+    const [focused, setFocused] = useState(false);
+
+    return (
+      <Button {...args} onFocus={() => setFocused(true)}>
+        {focused ? 'Focused!' : 'Button text'}
+      </Button>
+    );
+  },
+};

package/src/button/_stories/Button.story.tsx

@@ -455,46 +455,36 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
   },
 };
 
-export const Disabled: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <Button {...props} {...previewProps}>
-        Disabled button
-      </Button>
-    );
-  },
-  argTypes: {
-    ...hideControls(['block']),
-    ...previewArgTypes,
-  },
-  args: {
-    disabled: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-};
-
-export const Loading: StoryObj<PreviewStoryArgs> = {
+/**
+ * Buttons can be in `disabled` or `loading` states to indicate they're not currently actionable.
+ */
+export const States: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <Button {...props} {...previewProps}>
-        Button as anchor
-      </Button>
+      <>
+        <Button {...props} {...previewProps} v2>
+          Default
+        </Button>
+        <Button {...props} {...previewProps} v2 disabled>
+          Disabled
+        </Button>
+        <Button {...props} {...previewProps} v2 loading>
+          Loading
+        </Button>
+      </>
     );
   },
   argTypes: {
-    ...hideControls(['block']),
+    ...hideControls(['disabled', 'loading', 'block']),
     ...previewArgTypes,
   },
   args: {
-    loading: true,
     previewAddonStart: false,
     previewAddonEnd: false,
   },
+  decorators: [withComponentGrid()],
 };
 
 /**
@@ -786,20 +776,6 @@ export const DealingWithLongText: StoryObj<PreviewStoryArgs> = {
   },
 };
 
-export const AccessibilityAddons: Story = {
-  args: {
-    v2: true,
-    addonStart: {
-      type: 'avatar',
-      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
-    },
-    'aria-label': 'Convert Real to Yen',
-    children: 'Convert',
-    size: 'md',
-  },
-  tags: ['!autodocs', '!dev'],
-};
-
 /**
  * `Button` is sentiment-aware and will automatically adjust its colours if wrapped inside
  * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component

package/src/button/_stories/Button.test.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
@@ -135,3 +136,32 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+export const Disabled: Story = {
+  args: {
+    v2: true,
+    disabled: true,
+    children: 'Disabled button',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    v2: true,
+    loading: true,
+    children: 'Loading button',
+  },
+};
+
+export const AccessibilityAddons: Story = {
+  args: {
+    v2: true,
+    addonStart: {
+      type: 'avatar',
+      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
+    },
+    'aria-label': 'Convert Real to Yen',
+    children: 'Convert',
+    size: 'md',
+  },
+};

package/src/card/Card.less

@@ -1,6 +1,6 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../styles/less/mixins/_logical-properties.less";
+@import (reference) "./../styles/less/mixins/_theming.less";
+@import (reference) "./../styles/less/ring.less";
 
 .np-card {
   overflow: hidden;

package/src/checkbox/Checkbox.story.tsx

@@ -2,10 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
 import { Field } from '../field/Field';
-import { lorem10 } from '../test-utils';
 
 import Checkbox from './Checkbox';
 import { withVariantConfig } from '../../.storybook/helpers';
+import { lorem10 } from '../test-utils';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -36,11 +36,6 @@ export const Multiple: Story = {
   ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
-export const MultipleMobile: Story = {
-  ...Multiple,
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile'], Multiple),
-};
-
 export const WithinField = {
   decorators: [
     (Story) => (

package/src/checkbox/Checkbox.test.story.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { lorem10 } from '../test-utils';
+import Checkbox from './Checkbox';
+import { withVariantConfig } from '../../.storybook/helpers';
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Forms/Checkbox/Tests',
+  args: {
+    label: 'This is the label',
+    onChange: fn(),
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const MultipleMobile: Story = {
+  render: (args) => {
+    return (
+      <>
+        <Checkbox {...args} />
+        <Checkbox {...args} checked />
+        <Checkbox {...args} label={lorem10} />
+        <Checkbox {...args} label={lorem10} secondary={lorem10} />
+        <Checkbox {...args} disabled />
+      </>
+    );
+  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
+};

package/src/checkboxButton/CheckboxButton.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";
 
 .np-checkbox-button {
   input[type="checkbox"] {

package/src/chips/Chip.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-chip {
   background-color: transparent;

package/src/circularButton/CircularButton.story.tsx

@@ -6,7 +6,6 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CircularButton,
@@ -86,8 +85,3 @@ export const All: Story = {
     );
   },
 };
-
-export const All400Zoom: Story = {
-  ...All,
-  ...withVariantConfig(['400%'], All),
-};