@transferwise/components 46.144.0 → 46.145.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.144.0",
+  "version": "46.145.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -41,20 +41,20 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.3",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.14.4",
+    "@formatjs/cli": "^6.16.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.3.6",
+    "@storybook/react-webpack5": "^10.4.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -63,7 +63,7 @@
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
-    "@types/jest": "^30.0.0",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "4.17.24",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -73,32 +73,31 @@
     "@monaco-editor/react": "^4.7.0",
     "monaco-editor": "^0.55.1",
     "monaco-editor-webpack-plugin": "^7.1.1",
-    "@wise/art": "^2.30.1",
+    "@wise/art": "^2.30.3",
     "@wise/eslint-config": "^14.2.1",
     "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-storybook": "^10.4.0",
     "gulp": "^5.0.1",
-    "jest": "^30.3.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
     "react-live": "^4.1.8",
-    "rollup": "^4.60.2",
+    "rollup": "^4.60.4",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.6",
+    "storybook": "^10.4.0",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.28.0",
-    "@wise/components-theming": "1.10.2",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@wise/art": "^2.30",
+    "@wise/art": "^2.30.3",
     "@wise/components-theming": "^1.10.1",
     "framer-motion": "^12.23.26",
     "react": ">=18",
@@ -112,8 +111,8 @@
     "@react-aria/focus": "^3.22.0",
     "@react-aria/overlays": "^3.32.0",
     "@transferwise/formatting": "^2.14.1",
-    "@transferwise/neptune-tokens": "^8.23.0",
-    "@transferwise/neptune-validation": "^3.3.3",
+    "@transferwise/neptune-tokens": "^8.24.0",
+    "@transferwise/neptune-validation": "^3.3.4",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
     "core-js": "^3.49.0",
@@ -134,18 +133,18 @@
     "dev:translations": "pnpm build:crowdin-source-file",
     "storybook:dev": "storybook dev -p 4477",
     "storybook:build": "storybook build --stats-json",
-    "build:css": "gulp compileLess --dest=src",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf lib build",
+    "build:css-main": "gulp compileLess --dest=src",
+    "build:css-utils": "npm-run-all build:css-utils:*",
+    "build:css-utils:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
+    "build:css-utils:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
+    "build:css-utils:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --write src/i18n/*.json",
     "build:js": "rollup --config --sourcemap",
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
-    "build:neptune-css": "npm-run-all build:neptune-css:*",
-    "build:neptune-css:copy-brand-assets": "cpx 'src/styles/img/**' build/styles/img && cpx 'src/styles/fonts/*' build/styles/fonts",
-    "build:neptune-css:compile": "gulp compileLess --src='src/styles/less' --dest=build/styles/css",
-    "build:neptune-css:copy-vars": "gulp copyPropsAndVars --src='src/styles/props' --dest='build/styles/props' && gulp copyPropsAndVars --src='src/styles/variables' --dest='build/styles/less'",
     "docs": "pnpm build",
     "test": "TZ=UTC jest",
     "test:watch": "TZ=UTC jest --watch",

package/src/actionButton/ActionButton.story.tsx

@@ -7,7 +7,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
 /**
  * This component is deprecated please use new [Button](?path=/docs/actions-button--docs).
  *
- * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button).
+ * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://docs.wise.design/components/button).
  */
 export default {
   component: ActionButton,

package/src/actionOption/ActionOption.tsx

@@ -40,7 +40,7 @@ export type ActionOptionProps = {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 const ActionOption = ({

package/src/button/_stories/Button.accessibility.docs.mdx

@@ -12,7 +12,7 @@ Given the `Button` is a widely used and highly sensitive component, there are so
 <ListItem
   title="Design guidance"
   subtitle="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  control={<ListItem.Navigation href="https://wise.design/components/button#accessibility" />}
+  control={<ListItem.Navigation href="https://docs.wise.design/components/button#accessibility" />}
   media={
     <ListItem.AvatarView>
       <Bulb />

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

@@ -149,7 +149,7 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 };
 
 /**
- * The stories below document the new Button API, which requires `v2` prop to function.  <br />For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button). <br />
+ * The stories below document the new Button API, which requires `v2` prop to function.  <br />For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://docs.wise.design/components/button). <br />
  * You can still find the old Button documentation under [Legacy Button](?path=/docs/actions-button-legacy--docs)
  *
  *
@@ -331,7 +331,7 @@ export const Sandbox = createSandboxStory({
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/button#types)
+ * [Design documentation](https://docs.wise.design/components/button#types)
  */
 export const Sentiment: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -377,7 +377,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/button#priorities)
+ * [Design documentation](https://docs.wise.design/components/button#priorities)
  */
 export const Priority: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -413,7 +413,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
 
 /**
  * There are three different button sizes – small (`sm`), medium (`md`) and large (`lg`) – each used for different purposes. <br />
- * [Design documentation](https://wise.design/components/button#sizes)
+ * [Design documentation](https://docs.wise.design/components/button#sizes)
  */
 export const Size: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -536,7 +536,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
 
 /**
  * Icons are only supported for `sm` and `md` size Buttons. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
+ * [Design documentation](https://docs.wise.design/components/button#accessories)
  */
 export const WithIcons: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {
@@ -595,7 +595,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
 
 /**
  * Avatars are only supported by the `md` size Buttons and are only allowed before the label. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
+ * [Design documentation](https://docs.wise.design/components/button#accessories)
  */
 export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   render: function Render(args: PreviewStoryArgs) {

package/src/calendar/Calendar.css

@@ -0,0 +1,83 @@
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+  background-color: inherit;
+}
+.tw-date-lookup-calendar thead {
+  background-color: transparent;
+  background-color: initial;
+}
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.tw-date-lookup-calendar > tbody > tr > td {
+  border: none;
+  padding: 4px;
+  padding: var(--size-4);
+}
+@media (max-width: 320px) {
+  .tw-date-lookup-calendar > tbody > tr > td {
+    padding: 0;
+  }
+}
+.tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
+  padding: 1px;
+}
+.tw-date-lookup-calendar > tbody > tr > td button {
+  width: 100%;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #0097c7;
+  color: var(--color-content-accent);
+  border: transparent;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+@media (max-width: 320px) {
+  .tw-date-lookup-calendar > tbody > tr > td button {
+    padding: 0;
+  }
+}
+.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
+  height: 40px;
+  height: var(--size-40);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  line-height: 40px;
+  line-height: var(--size-40);
+  width: 40px;
+  width: var(--size-40);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
+.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+  background-color: var(--color-background-screen-hover);
+}
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+  background-color: var(--color-interactive-primary);
+  color: var(--color-interactive-contrast);
+}
+.tw-date-lookup-calendar abbr {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.tw-date-lookup-header-current-container {
+  display: inline;
+}

package/src/calendar/Calendar.less

@@ -0,0 +1,79 @@
+@import (reference) "./../styles/variables/neptune-tokens.less";
+
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+
+  thead {
+    background-color: unset;
+  }
+
+  > tbody > tr > td.weekend button {
+    color: var(--color-content-secondary);
+  }
+
+  > tbody > tr > td {
+    border: none;
+    padding: var(--size-4);
+    @media (--screen-400-zoom) {
+      padding: 0;
+    }
+
+    &:has(.tw-date-lookup-day-option) {
+      padding: 1px;
+    }
+
+    button {
+      width: 100%;
+      padding: var(--size-4) 0;
+      @media (--screen-400-zoom) {
+        padding: 0;
+      }
+      color: var(--color-content-accent);
+      border: transparent;
+      border-radius: var(--radius-small);
+      background-color: transparent;
+      font-weight: var(--font-weight-semi-bold);
+      color: var(--color-content-primary);
+
+      &.tw-date-lookup-day-option {
+        height: var(--size-40);
+        border-radius: var(--radius-full);
+        line-height: var(--size-40);
+        width: var(--size-40);
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        &.today {
+          text-decoration: underline;
+          text-decoration-thickness: 2px;
+          text-underline-offset: 4px;
+        }
+      }
+    }
+
+    &:not(.disabled, :disabled) button.show-focus,
+    &:hover button:not(.disabled, :disabled) {
+      background-color: var(--color-background-screen-hover);
+    }
+
+    &:not(.disabled, :disabled) button.active {
+      background-color: var(--color-interactive-primary);
+      color: var(--color-interactive-contrast);
+    }
+  }
+
+  abbr {
+    text-decoration: none;
+  }
+
+  background-color: inherit;
+}
+
+.tw-date-lookup-header-current-container {
+  display: inline;
+}

package/src/calendar/Calendar.story.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import Calendar, { type CalendarProps } from './Calendar';
+import Modal from '../modal';
+import Button from '../button';
+
+/** Inline calendar for selecting a single date, with optional min/max bounds. */
+export default {
+  component: Calendar,
+  title: 'Forms/Calendar',
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ maxWidth: 500, margin: '0 auto' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    monthFormat: { control: 'select', options: ['long', 'short'] },
+    min: { control: 'date' },
+    max: { control: 'date' },
+  },
+};
+
+type Story = StoryObj<typeof Calendar>;
+
+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);
+
+export const Basic: Story = {
+  render: (args: CalendarProps) => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
+      <Calendar
+        {...args}
+        min={args.min ? new Date(args.min) : thePast}
+        max={args.max ? new Date(args.max) : theFuture}
+        value={value}
+        onChange={(v) => setValue(v)}
+      />
+    );
+  },
+  args: {
+    monthFormat: 'long',
+    min: thePast,
+    max: theFuture,
+  },
+};
+
+export const WithoutConstraints: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | null>(epoch);
+    return <Calendar value={value} onChange={(v) => setValue(v)} />;
+  },
+};
+
+export const NullValue: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | null>(null);
+    return <Calendar value={value} min={thePast} max={theFuture} onChange={(v) => setValue(v)} />;
+  },
+};
+
+export const InsideModal: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState<Date | null>(epoch);
+    return (
+      <>
+        <Button size="sm" v2 type="button" onClick={() => setOpen(true)}>
+          Open modal
+        </Button>
+        <Modal
+          open={open}
+          title="Select a date"
+          body={
+            <Calendar value={value} min={thePast} max={theFuture} onChange={(v) => setValue(v)} />
+          }
+          onClose={() => setOpen(false)}
+        />
+      </>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: 'Open modal' }));
+  },
+};

package/src/calendar/Calendar.test.tsx

@@ -0,0 +1,138 @@
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import Calendar from './Calendar';
+
+mockMatchMedia();
+
+const user = userEvent.setup();
+
+const initialValue = new Date(2000, 0, 1);
+
+describe('Calendar', () => {
+  describe('in day view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -7],
+      ['{ArrowDown}', +7],
+    ])("handles '%s' to step %d day(s)", async (text: string, step: number) => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard(text);
+
+      const expected = new Date(initialValue);
+      expected.setDate(initialValue.getDate() + step);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+
+    it('selects a day on click', async () => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByText('15'));
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15));
+    });
+
+    it('calls onSelect instead of onChange when clicking a day', async () => {
+      const handleChange = jest.fn();
+      const handleSelect = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} onSelect={handleSelect} />);
+
+      await user.click(screen.getByText('15'));
+
+      expect(handleSelect).toHaveBeenCalledWith(new Date(2000, 0, 15));
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('in year view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -4],
+      ['{ArrowDown}', +4],
+    ])("handles '%s' to step %d year(s)", async (text: string, step: number) => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.keyboard(text);
+
+      const expected = new Date(initialValue);
+      expected.setFullYear(initialValue.getFullYear() + step);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+  });
+
+  describe('in month view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -4],
+      ['{ArrowDown}', +4],
+    ])("handles '%s' to step %d month(s)", async (text: string, step: number) => {
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.keyboard(' ');
+      await user.keyboard(text);
+
+      const expected = new Date(initialValue);
+      expected.setMonth(initialValue.getMonth() + step);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+  });
+
+  describe('min/max clamping', () => {
+    it('limits navigation to min value', async () => {
+      const min = new Date(initialValue);
+      min.setDate(min.getDate() - 1);
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} min={min} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowLeft}{ArrowLeft}');
+
+      expect(handleChange).toHaveBeenLastCalledWith(min);
+    });
+
+    it('limits navigation to max value', async () => {
+      const max = new Date(initialValue);
+      max.setDate(max.getDate() + 1);
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} max={max} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowRight}{ArrowRight}');
+
+      expect(handleChange).toHaveBeenLastCalledWith(max);
+    });
+
+    it('clamps value to range when value is outside min/max', () => {
+      const min = new Date(2000, 0, 5);
+      const max = new Date(2000, 0, 20);
+      const handleChange = jest.fn();
+      render(<Calendar value={initialValue} min={min} max={max} onChange={handleChange} />);
+
+      expect(handleChange).toHaveBeenCalledWith(min);
+    });
+  });
+
+  describe('view switching', () => {
+    it('switches to year view and back to day view', async () => {
+      render(<Calendar value={initialValue} onChange={jest.fn()} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      expect(screen.getByRole('button', { name: /selected year/iu })).toBeInTheDocument();
+
+      await user.click(screen.getByRole('button', { name: /selected year/iu }));
+      expect(screen.getByRole('button', { name: /selected month/iu })).toBeInTheDocument();
+
+      await user.click(screen.getByRole('button', { name: /selected month/iu }));
+      expect(screen.getByRole('button', { name: /next month/iu })).toBeInTheDocument();
+    });
+  });
+});