@transferwise/components 46.83.3 → 46.84.1

package/src/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
+import { expect, fn, type Mock, screen, userEvent, within, waitFor } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
@@ -75,7 +75,7 @@ export const Months: Story<Month | null> = {
 
     await step('renders placeholder', async () => {
       const triggerButton = canvas.getByRole('combobox');
-      await expect(triggerButton).toHaveTextContent('Month');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('Month'));
     });
 
     await step('selects option via mouse', async () => {
@@ -89,7 +89,7 @@ export const Months: Story<Month | null> = {
       });
       await userEvent.click(option);
 
-      await expect(triggerButton).toHaveTextContent('May');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('May'));
     });
   },
 };
@@ -189,27 +189,61 @@ const CurrenciesArgs = {
 export const Currencies: Story<Currency> = {
   args: CurrenciesArgs,
   play: async ({ step }) => {
-    await step('filters options via keyboard', async () => {
+    await step('Tab to the combobox', async () => {
       await userEvent.tab();
-      await userEvent.keyboard(' ');
+    });
 
-      await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(8);
-      await expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument();
+    await step('Open the combobox', async () => {
+      await userEvent.keyboard(' ');
+    });
 
-      const input = screen.getByRole('combobox');
+    await step('Check if options are displayed', async () => {
+      await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(8));
+      await waitFor(async () => expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument());
+    });
 
-      await wait(0); // TODO: Remove
+    await step('Type "huf" in the combobox', async () => {
+      // this is workaround for Chromatic: Firefox and Edge tests failing.
+      // Unclear on a proper solution
+      await wait(750);
+      const input = await screen.findByRole('combobox');
       await userEvent.type(input, 'huf');
-      await expect(
-        within(screen.getByRole('listbox')).queryByRole('option'),
-      ).not.toBeInTheDocument();
-      await expect(screen.getByText(/^It’s not possible use HUF yet./u)).toBeInTheDocument();
+    });
 
+    await step('Check if no options are displayed', async () => {
+      // this is workaround for Chromatic: Firefox and Edge tests failing.
+      // Unclear on a proper solution
+      await wait(750);
+      await expect(await screen.findByText(/^No results found/u)).toBeInTheDocument();
+      await expect(await screen.findByText(/^It’s not possible use HUF yet./u)).toBeInTheDocument();
+      await waitFor(
+        async () => {
+          await expect(screen.queryAllByRole('option')).toHaveLength(0);
+        },
+        { timeout: 1500 },
+      );
+    });
+
+    await step('Remove last two characters', async () => {
+      await wait(500);
+      const input = await screen.findByRole('combobox');
       await userEvent.type(input, '{Backspace}{Backspace}');
-      await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2);
+    });
+
+    await step('Check if two options are displayed', async () => {
+      await waitFor(async () =>
+        expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2),
+      );
+    });
 
+    await step('Type "e" in the combobox', async () => {
+      const input = await screen.findByRole('combobox');
       await userEvent.type(input, '{Backspace}e');
-      await expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+
+    await step('Check if aria-activedescendant is not set', async () => {
+      const input = screen.getByRole('combobox');
+      await waitFor(async () => expect(input).toHaveAttribute('aria-activedescendant'));
     });
   },
 };
@@ -234,18 +268,24 @@ export const MultipleCurrencies: Story<Currency, true> = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await step('selects multiple options via mouse', async () => {
+    await step('Open the combobox', async () => {
       const triggerButton = canvas.getByRole('combobox');
-
       await userEvent.click(triggerButton);
+      await wait(500);
       await userEvent.unhover(triggerButton);
+    });
 
+    await step('Select EUR option', async () => {
       const option = within(screen.getByRole('listbox')).getAllByRole('option', {
         name: /^EUR/u,
       })[0];
+      await wait(500);
       await userEvent.click(option);
+    });
 
-      await expect(triggerButton).toHaveTextContent('USD, EUR');
+    await step('Check if selected options are displayed', async () => {
+      const triggerButton = document.querySelector('button[role="combobox"]');
+      await waitFor(async () => expect(triggerButton).toHaveTextContent('USD, EUR'));
     });
   },
 };
@@ -270,11 +310,13 @@ export const CustomTrigger: Story<Month> = {
     ),
     onChange: fn() satisfies Mock,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    await step('Open the combobox', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+    });
   },
 };
 
@@ -315,11 +357,13 @@ export const Advanced: Story<Month> = {
     filterPlaceholder: 'Type a month’s name',
     onChange: fn() satisfies Mock,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
+    await step('Open the combobox', async () => {
+      const triggerButton = canvas.getByRole('combobox');
+      await userEvent.click(triggerButton);
+    });
   },
 };
 

package/src/main.css

@@ -535,6 +535,88 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+.np-icon-button {
+  border: none;
+}
+.np-icon-button-tertiary-default {
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-icon-button-primary-default {
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):active {
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.np-icon-button-primary-negative {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-primary-hover);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: var(--color-white);
+}
+.np-icon-button-minimal-default {
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-color: transparent;
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
+.np-icon-button-secondary-default {
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-interactive-neutral-hover);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-interactive-neutral-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-default,
+.np-theme-personal--forest-green .np-icon-button-secondary-default {
+  color: var(--color-interactive-control);
+}
+.np-icon-button-secondary-negative {
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: var(--color-white);
+}
+.np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: var(--color-contrast-overlay);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -2201,38 +2283,6 @@ button.np-option {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}
 .np-flow-navigation {
   width: 100%;
   min-height: 97px;
@@ -4950,6 +5000,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./avatar/Avatar.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
+@import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -30,7 +31,6 @@
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";
-@import "./flowNavigation/backButton/BackButton.less";
 @import "./flowNavigation/FlowNavigation.less";
 @import "./header/Header.less";
 @import "./image/Image.less";

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
-import PrimitiveAnchor from '..';
+import PrimitiveAnchor from '../src';
 
 const meta = {
   title: 'Primitives/Anchor/Tests',
@@ -22,11 +22,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.click(link);
-    await expect(link).toHaveTextContent('Clicked!');
+
+    await step('Click the link', async () => {
+      await userEvent.click(link);
+    });
+
+    await step('Check if link text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args) {
     const [clicked, setClicked] = useState(false);
@@ -46,12 +52,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).toHaveFocus();
-    await expect(link).toHaveTextContent('Focused!');
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(link).toHaveFocus());
+      await waitFor(async () => expect(link).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args) {
     const [focused, setFocused] = useState(false);
@@ -65,14 +77,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).toHaveFocus();
-    await userEvent.tab();
-    await expect(link).not.toHaveFocus();
-    await expect(link).toHaveTextContent('Blurred!');
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link has focus', async () => {
+      await waitFor(async () => expect(link).toHaveFocus());
+    });
+
+    await step('Tab away from the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(link).not.toHaveFocus());
+      await waitFor(async () => expect(link).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args) {
     const [blurred, setBlurred] = useState(false);
@@ -86,12 +110,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.hover(link);
-    await expect(link).toHaveTextContent('Hovered!');
+
+    await step('Hover over the link', async () => {
+      await userEvent.hover(link);
+    });
+
+    await step('Check if link text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args) {
     const [hovered, setHovered] = useState(false);
@@ -105,12 +134,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.unhover(link);
-    await expect(link).toHaveTextContent('Left!');
+
+    await step('Hover over the link', async () => {
+      await userEvent.hover(link);
+    });
+
+    await step('Unhover the link', async () => {
+      await userEvent.unhover(link);
+    });
+
+    await step('Check if link text changes to "Left!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args) {
     const [left, setLeft] = useState(false);
@@ -124,14 +162,19 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.tab();
-    await wait();
-    await userEvent.keyboard('{ArrowDown}');
-    await expect(link).toHaveTextContent('Key Pressed!');
+
+    await step('Press ArrowDown key on the link', async () => {
+      await userEvent.tab();
+      await wait();
+      await userEvent.keyboard('{ArrowDown}');
+    });
+
+    await step('Check if link text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -153,11 +196,17 @@ export const KeyDownInteraction: Story = {
 };
 
 export const TabIndexBehavior: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).not.toHaveFocus();
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link does not have focus', async () => {
+      await waitFor(async () => expect(link).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (