npm - @transferwise/components - Versions diffs - 46.130.2 → 46.131.0 - Mend

@transferwise/components 46.130.2 → 46.131.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (610) hide show

package/src/circularButton/CircularButton.test.story.tsx CHANGED Viewed

@@ -2,11 +2,14 @@ import { Freeze } from '@transferwise/icons';
 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,
   title: 'Actions/CircularButton/Tests',
-  tags: ['!manifest'],
+  tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof CircularButton>;
 type Story = StoryObj<typeof CircularButton>;
@@ -22,3 +25,61 @@ export const CenteredText: Story = {
     );
   },
 };
+const All: Story = {
+  args: {
+    children: 'Button text',
+    icon: <Freeze />,
+    className: 'm-r-2',
+  },
+  render: (props) => {
+    return (
+      <>
+        <Title type="title-subsection" className="m-y-2">
+          Default (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="default" />
+          <CircularButton {...props} priority="secondary" type="default" />
+          <CircularButton {...props} priority="primary" type="default" disabled />
+          <CircularButton {...props} priority="secondary" type="default" disabled />
+        </Body>
+        <Title type="title-subsection" className="m-y-2">
+          Negative (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="negative" />
+          <CircularButton {...props} priority="secondary" type="negative" />
+          <CircularButton {...props} priority="primary" type="negative" disabled />
+          <CircularButton {...props} priority="secondary" type="negative" disabled />
+        </Body>
+        <Title type="title-body" className="m-y-2">
+          Accent (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="accent" />
+          <CircularButton {...props} priority="secondary" type="accent" />
+          <CircularButton {...props} priority="primary" type="accent" disabled />
+          <CircularButton {...props} priority="secondary" type="accent" disabled />
+        </Body>
+        <Title type="title-body" className="m-y-2">
+          Positive (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="positive" />
+          <CircularButton {...props} priority="secondary" type="positive" />
+          <CircularButton {...props} priority="primary" type="positive" disabled />
+          <CircularButton {...props} priority="secondary" type="positive" disabled />
+        </Body>
+      </>
+    );
+  },
+};
+export const All400Zoom: Story = {
+  ...All,
+  ...withVariantConfig(['400%'], All),
+};

package/src/common/Option/Option.less CHANGED Viewed

@@ -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";
 .np-option {
   &:has(:focus-visible) {

package/src/common/bottomSheet/BottomSheet.less CHANGED Viewed

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
+@import (reference) "../../styles/less/mixins/_theming.less";
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;

package/src/common/bottomSheet/BottomSheet.story.tsx CHANGED Viewed

@@ -11,7 +11,6 @@ import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 import BottomSheet from './BottomSheet';
-import { withVariantConfig } from '../../../.storybook/helpers';
 export default {
   component: BottomSheet,
@@ -64,57 +63,3 @@ export const Basic: Story = {
     },
   },
 };
-export const BasicMobile: Story = {
-  ...Basic,
-  ...withVariantConfig(['mobile'], Basic),
-};
-export const WithOverflowContent: Story = {
-  args: {
-    children: (
-      <>
-        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
-        {lorem10}
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-        />
-        <NavigationOption
-          title="Navigation option"
-          content="Button and icon are vertically centered."
-          media={<FastFlag size={24} />}
-          isContainerAligned
-        />
-        {lorem500}
-        <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
-      </>
-    ),
-  },
-  parameters: {
-    chromatic: {
-      delay: 1000,
-    },
-  },
-};
-export const WithOverflowContentMobile: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['mobile'], WithOverflowContent),
-};
-export const WithOverflowContentDark: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['dark'], WithOverflowContent),
-};
-export const WithOverflowContentDarkMobile: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
-};
-export const WithOverflowContentZoom400: Story = {
-  ...WithOverflowContent,
-  ...withVariantConfig(['400%'], WithOverflowContent),
-};

package/src/common/bottomSheet/BottomSheet.test.story.tsx CHANGED Viewed

@@ -1,13 +1,17 @@
+import { action } from 'storybook/actions';
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fireEvent, within } from 'storybook/test';
-import { lorem100, lorem500 } from '../../test-utils';
+import { FastFlag } from '@transferwise/icons';
+import { lorem10, lorem100, lorem500 } from '../../test-utils';
 import { Typography } from '../propsValues/typography';
 import Alert from '../../alert';
 import Body from '../../body';
 import Button from '../../button';
+import NavigationOption from '../../navigationOption';
 import Title from '../../title';
 import BottomSheet from './BottomSheet';
+import { withVariantConfig } from '../../../.storybook/helpers';
 const wait = async (duration = 500) =>
   new Promise<void>((resolve) => {
@@ -16,7 +20,7 @@ const wait = async (duration = 500) =>
 export default {
   component: BottomSheet,
-  title: 'Dialogs/BottomSheet/tests',
+  title: 'Dialogs/BottomSheet/Tests',
   tags: ['!autodocs'],
   args: {
     open: false,
@@ -96,3 +100,115 @@ export const SmoothScrollReset: Story = {
     );
   },
 };
+const Basic: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
+        {lorem10}
+        <br />
+        <br />
+        <NavigationOption
+          title="Navigation option"
+          content="Button and icon are vertically centered."
+          media={<FastFlag size={24} />}
+          isContainerAligned
+        />
+      </>
+    ),
+  },
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={open}
+          onClose={() => {
+            setOpen(false);
+            action('BottomSheet closed')();
+          }}
+        />
+      </div>
+    );
+  },
+};
+export const BasicMobile: Story = {
+  ...Basic,
+  ...withVariantConfig(['mobile'], Basic),
+};
+const WithOverflowContent: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
+        {lorem10}
+        <NavigationOption
+          title="Navigation option"
+          content="Button and icon are vertically centered."
+          media={<FastFlag size={24} />}
+        />
+        <NavigationOption
+          title="Navigation option"
+          content="Button and icon are vertically centered."
+          media={<FastFlag size={24} />}
+          isContainerAligned
+        />
+        {lorem500}
+        <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
+      </>
+    ),
+  },
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={open}
+          onClose={() => {
+            setOpen(false);
+            action('BottomSheet closed')();
+          }}
+        />
+      </div>
+    );
+  },
+};
+export const WithOverflowContentMobile: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['mobile'], WithOverflowContent),
+};
+export const WithOverflowContentDark: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['dark'], WithOverflowContent),
+};
+export const WithOverflowContentDarkMobile: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
+};
+export const WithOverflowContentZoom400: Story = {
+  ...WithOverflowContent,
+  ...withVariantConfig(['400%'], WithOverflowContent),
+};

package/src/common/closeButton/CloseButton.less CHANGED Viewed

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../styles/less/ring.less";
 .np-close-button {
   transition: color 0.15s ease-in-out;

package/src/common/panel/Panel.less CHANGED Viewed

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
+@import (reference) "../../styles/less/mixins/_theming.less";
 .np-panel {
   &__content {

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 export default {
   component: CriticalCommsBanner,
-  title: 'Prompts/CriticalCommsBanner/tests',
+  title: 'Prompts/CriticalCommsBanner/Tests',
   tags: ['!autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;

package/src/dateLookup/DateLookup.less CHANGED Viewed

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "./../styles/variables/neptune-tokens.less";
 .tw-date-lookup-menu {
   width: 400px;

package/src/dateLookup/DateLookup.story.tsx CHANGED Viewed

@@ -1,10 +1,8 @@
 import { useState } from 'react';
-import { userEvent } from 'storybook/test';
 import { StoryObj } from '@storybook/react-webpack5';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';
-import { withVariantConfig } from '../../.storybook/helpers';
 export default {
   component: DateLookup,
@@ -54,22 +52,6 @@ export const Basic: Story = {
     min: thePast,
     max: theFuture,
   },
-  play: async () => {
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-  },
-};
-export const Basic400Zoom: Story = {
-  ...Basic,
-  ...withVariantConfig(['400%'], {
-    ...Basic,
-    parameters: {
-      chromatic: {
-        delay: 2000,
-      },
-    },
-  }),
 };
 export const WithField: Story = {

package/src/dateLookup/DateLookup.test.story.tsx CHANGED Viewed

@@ -1,9 +1,11 @@
-import { StoryFn } from '@storybook/react-webpack5';
+import { StoryFn, StoryObj } from '@storybook/react-webpack5';
 import { expect, userEvent, within } from 'storybook/test';
 import { action } from 'storybook/actions';
 import { useState } from 'react';
 import DateLookup, { type DateLookupProps } from './DateLookup';
+import { Size } from '../common';
+import { withVariantConfig } from '../../.storybook/helpers';
 export default {
   component: DateLookup,
@@ -99,3 +101,51 @@ FocusOnFirstNonDisabledDate.play = async () => {
   await userEvent.tab();
   await userEvent.keyboard(' ');
 };
+const epoch = new Date('2011-01-01');
+const theFuture = new Date(epoch);
+theFuture.setUTCDate(epoch.getUTCDate() + 10);
+const thePast = new Date(epoch);
+thePast.setUTCDate(epoch.getUTCDate() - 10);
+const Basic: StoryObj<typeof DateLookup> = {
+  render: (args: DateLookupProps) => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
+      <DateLookup
+        {...args}
+        min={args.min ? new Date(args.min) : thePast}
+        max={args.max ? new Date(args.max) : theFuture}
+        value={value}
+        onChange={(v) => setValue(v)}
+      />
+    );
+  },
+  args: {
+    size: Size.MEDIUM,
+    disabled: false,
+    label: 'label',
+    monthFormat: 'long',
+    placeholder: 'placeholder',
+    id: 'date-lookup',
+    clearable: true,
+    min: thePast,
+    max: theFuture,
+  },
+  play: async () => {
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
+  },
+};
+export const Basic400Zoom: StoryObj<typeof DateLookup> = {
+  ...Basic,
+  ...withVariantConfig(['400%'], {
+    ...Basic,
+    parameters: {
+      chromatic: {
+        delay: 2000,
+      },
+    },
+  }),
+};

package/src/dateLookup/dateTrigger/DateTrigger.less CHANGED Viewed

@@ -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-date-trigger {
   overflow: hidden;

package/src/decision/Decision.less CHANGED Viewed

@@ -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-decision {
   .decision {

package/src/definitionList/DefinitionList.less CHANGED Viewed

@@ -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";
 .tw-definition-list {
   &__item dd {

package/src/dimmer/Dimmer.less CHANGED Viewed

@@ -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";
 // Disables the scroll on the body
 // Note: might not work in some iOS Safari browsers

package/src/divider/Divider.story.tsx CHANGED Viewed

@@ -126,5 +126,4 @@ export const AllVariants: Story = {
   argTypes: {
     ...hideControls(['level', 'testId', 'className', 'isContent']),
   },
-  tags: ['!autodocs'],
 };

package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import * as stories from './ExpressiveMoneyInput.story';
+import * as stories from './ExpressiveMoneyInput.test.story';
 <Meta title="Forms/ExpressiveMoneyInput/Autofocus" />

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx CHANGED Viewed

@@ -221,12 +221,3 @@ export const WithCustomCurrencySelector = {
     );
   },
 };
-export const WithAutofocus = {
-  tags: ['!autodocs', '!dev'],
-  args: {
-    inlinePrompt: undefined,
-    autoFocus: true,
-  },
-  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
-};

package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+const meta: Meta<typeof ExpressiveMoneyInput> = {
+  component: ExpressiveMoneyInput,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Forms/ExpressiveMoneyInput/Tests',
+  args: {
+    label: 'You send',
+    currency: 'GBP',
+    amount: 1234.56,
+    currencySelector: undefined,
+  },
+};
+export default meta;
+type Story = StoryObj<ExpressiveMoneyInputProps>;
+export const WithAutofocus: Story = {
+  args: {
+    autoFocus: true,
+  },
+};

package/src/field/Field.story.tsx CHANGED Viewed

@@ -102,7 +102,7 @@ export const Basic = (args: FieldProps) => {
   );
 };
-export const WithStatusMessages = (args: FieldProps) => {
+export const Messages = (args: FieldProps) => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div>
@@ -145,39 +145,6 @@ export const WithStatusMessages = (args: FieldProps) => {
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      {/* instance with deprecated `hint` prop */}
-      <Field
-        label="Text Input with deprecated `hint` prop"
-        hint="This is a helpful message"
-        sentiment={Sentiment.NEGATIVE}
-        message="Validation error, please take a look"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      {/* instance with deprecated `error` & `hint` props */}
-      <Field
-        label="Text Input with deprecated `error` & `hint` props"
-        hint="This is a helpful message"
-        error="Validation error, please take a look"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
-      <Field
-        label="Text Input with Info under the field"
-        message="This is a helpful message"
-        messageIconLabel={args.messageIconLabel}
-        messageLoading={args.messageLoading}
-      >
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
     </div>
   );
 };

package/src/field/Field.test.story.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Input } from '../inputs/Input';
+import { Field, FieldProps } from './Field';
+import { Sentiment } from '../common';
+const meta: Meta<typeof Field> = {
+  component: Field,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Forms/Field/Tests',
+};
+export default meta;
+type Story = StoryObj<typeof Field>;
+export const DeprecatedProps: Story = {
+  render: (args: FieldProps) => {
+    const [value, setValue] = useState<string | undefined>('This is some text');
+    return (
+      <div>
+        {/* instance with deprecated `hint` prop */}
+        <Field
+          label="Text Input with deprecated `hint` prop"
+          hint="This is a helpful message"
+          sentiment={Sentiment.NEGATIVE}
+          message="Validation error, please take a look"
+          messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        {/* instance with deprecated `error` & `hint` props */}
+        <Field
+          label="Text Input with deprecated `error` & `hint` props"
+          hint="This is a helpful message"
+          error="Validation error, please take a look"
+          messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
+        <Field
+          label="Text Input with Info under the field"
+          message="This is a helpful message"
+          messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+      </div>
+    );
+  },
+};

package/src/flowNavigation/FlowNavigation.less CHANGED Viewed

@@ -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-flow-navigation {
   width: 100%;

package/src/flowNavigation/animatedLabel/AnimatedLabel.less CHANGED Viewed

@@ -1,5 +1,5 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "../../styles/less/addons/_spacing-utilities.less";
+@import (reference) "../../styles/less/ring.less";
 @transition-timing-function: ease-in-out;
 @transition-duration: 0.3s;

package/src/header/Header.test.story.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 const meta: Meta<typeof Header> = {
   component: Header,
   tags: ['!autodocs', '!manifest'],
-  title: 'Typography/Header/tests',
+  title: 'Typography/Header/Tests',
 };
 export default meta;
 type Story = StoryObj<HeaderProps>;

package/src/index.ts CHANGED Viewed

@@ -182,7 +182,6 @@ export {
   SelectInput,
   SelectInputOptionContent,
   SelectInputTriggerButton,
-  sortByRelevance,
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';

package/src/info/Info.less CHANGED Viewed

@@ -1,4 +1,4 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./../styles/less/ring.less";
 .np-info {
   vertical-align: middle;