@transferwise/components 46.138.0 → 46.140.0

package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -1806,6 +1806,88 @@ export const TriggerWithDescription: Story<OptionWithDescription> = {
   },
 };
 
+/**
+ * This test insures that there's no unintended page scroll after the dropdown
+ * is closed without selecting an option (e.g. clicking outside).
+ * It tests 2 scenarios:
+ * 1. when the dropdown fits naturally on the screen below the trigger
+ * 2. when there's not enough space below the trigger and it renders above it
+ */
+const generateNoScrollTest = (inverted?: boolean): Story<TestMonth | null> => ({
+  render: function Render({ onChange, onClear, ...args }) {
+    const [selectedMonth, setSelectedMonth] = useState<TestMonth | null>(null);
+
+    return (
+      <div>
+        <style>
+          {`
+            .storybook-container{
+              min-height: unset;
+              height: unset;
+            }
+          `}
+        </style>
+        {inverted ? <p style={{ height: '70vh', background: 'blanchedalmond' }} /> : null}
+
+        <SelectInput
+          {...args}
+          value={selectedMonth}
+          onChange={(month) => {
+            setSelectedMonth(month);
+            onChange?.(month);
+          }}
+          onClear={() => {
+            setSelectedMonth(null);
+            onClear?.();
+          }}
+        />
+
+        <p style={{ margin: '1rem 0', height: '150vh', background: 'blanchedalmond' }} />
+      </div>
+    );
+  },
+  args: {
+    placeholder: 'Month',
+    items: testMonths.map((month) => ({
+      type: 'option',
+      value: month,
+    })),
+    renderValue: (month) => <SelectInputOptionContent title={month.name} />,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('combobox');
+
+    await step('Open the combobox', async () => {
+      await userEvent.click(trigger);
+    });
+
+    await step('Check if options are displayed', async () => {
+      await waitFor(async () => expect(screen.queryAllByRole('option').length).toBeGreaterThan(0));
+    });
+
+    await step('Close the combobox', async () => {
+      await userEvent.keyboard('{Escape}');
+      await wait();
+    });
+
+    await step('Verify the page has not scrolled', async () => {
+      const scrollParent = canvasElement.ownerDocument.documentElement;
+      await expect(scrollParent.scrollTop).toBe(0);
+    });
+  },
+});
+
+export const NoScrollAfterCloseTop: Story<TestMonth | null> = {
+  ...generateNoScrollTest(),
+  ...withVariantConfig(['default']),
+};
+
+export const NoScrollAfterCloseBottom: Story<TestMonth | null> = {
+  ...generateNoScrollTest(true),
+  ...withVariantConfig(['default']),
+};
+
 /** Basic months dropdown at 400% zoom for accessibility testing. */
 export const Zoom400: Story<TestMonth | null> = {
   render: function Render({ onChange, onClear, ...args }) {

package/src/listItem/ListItem.css

@@ -567,6 +567,7 @@
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
+  display: block;
 }
 .wds-list-item-control {
   flex: 0 0 auto;

package/src/listItem/ListItem.less

@@ -226,6 +226,7 @@
   &-navigation {
     .tw-icon-chevron-right {
       color: var(--color-interactive-secondary);
+      display: block;
     }
   }
 

package/src/loader/Loader.css

@@ -8,6 +8,16 @@
   --coins-image: url("data:image/png;base64,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");
 }
 .tw-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  gap: var(--size-16);
+  width: 190px;
+  text-align: center;
+  word-break: break-word;
+}
+.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -23,10 +33,10 @@
   opacity: 0;
   transition: opacity 300ms cubic-bezier(0.24, 0, 0.3, 1);
 }
-.tw-loader--visible {
+.tw-loader-asset--visible {
   opacity: 1;
 }
-.tw-loader::before {
+.tw-loader-asset::before {
   content: "";
   display: block;
   width: 4.5rem;
@@ -45,14 +55,14 @@
   animation-delay: 0s;
   animation-iteration-count: infinite;
 }
-.tw-loader--sm {
+.tw-loader-asset--sm {
   --coin-size: 3rem;
   --coin-edge-width-offset: translateX(0.275rem);
   --coin-edge-width-negative-offset: translateX(-0.275rem);
   --box-shadow-forwards: 0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour), 0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour), 0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour), 0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour), 0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour), 0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour), 0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour), 0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour), 0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour), 0.475rem 0 0 var(--coin-colour);
   --box-shadow-backwards: -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour), -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour), -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour), -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour), -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour), -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour), -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour), -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour), -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour), -0.475rem 0 0 var(--coin-colour);
 }
-.tw-loader--md {
+.tw-loader-asset--md {
   --coin-size: 4.5rem;
   --coin-edge-width-offset: translateX(0.375rem);
   --coin-edge-width-negative-offset: translateX(-0.375rem);

package/src/loader/Loader.less

@@ -10,6 +10,16 @@
 }
 
 .tw-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-16);
+  width: 190px;
+  text-align: center;
+  word-break: break-word;
+}
+
+.tw-loader-asset {
   overflow: hidden;
   border-radius: 50%;
   backface-visibility: hidden;
@@ -49,44 +59,26 @@
     --coin-edge-width-offset: translateX(0.275rem);
     --coin-edge-width-negative-offset: translateX(-0.275rem);
     --box-shadow-forwards:
-      0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
+      0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour),
+      0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour),
+      0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour),
+      0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour),
+      0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour),
+      0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour),
+      0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour),
+      0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour),
+      0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour),
       0.475rem 0 0 var(--coin-colour);
     --box-shadow-backwards:
-      -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
+      -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour),
+      -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour),
+      -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour),
+      -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour),
+      -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour),
+      -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour),
+      -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour),
+      -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour),
+      -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour),
       -0.475rem 0 0 var(--coin-colour);
   }
 
@@ -95,59 +87,33 @@
     --coin-edge-width-offset: translateX(0.375rem);
     --coin-edge-width-negative-offset: translateX(-0.375rem);
     --box-shadow-forwards:
-      0.025rem 0 0 var(--coin-colour),
-      0.05rem 0 0 var(--coin-colour),
-      0.075rem 0 0 var(--coin-colour),
-      0.1rem 0 0 var(--coin-colour),
-      0.125rem 0 0 var(--coin-colour),
-      0.15rem 0 0 var(--coin-colour),
-      0.175rem 0 0 var(--coin-colour),
-      0.2rem 0 0 var(--coin-colour),
-      0.225rem 0 0 var(--coin-colour),
-      0.25rem 0 0 var(--coin-colour),
-      0.275rem 0 0 var(--coin-colour),
-      0.3rem 0 0 var(--coin-colour),
-      0.325rem 0 0 var(--coin-colour),
-      0.35rem 0 0 var(--coin-colour),
-      0.375rem 0 0 var(--coin-colour),
-      0.4rem 0 0 var(--coin-colour),
-      0.425rem 0 0 var(--coin-colour),
-      0.45rem 0 0 var(--coin-colour),
-      0.475rem 0 0 var(--coin-colour),
-      0.5rem 0 0 var(--coin-colour),
-      0.525rem 0 0 var(--coin-colour),
-      0.55rem 0 0 var(--coin-colour),
-      0.575rem 0 0 var(--coin-colour),
-      0.6rem 0 0 var(--coin-colour),
-      0.625rem 0 0 var(--coin-colour),
-      0.65rem 0 0 var(--coin-colour);
+      0.025rem 0 0 var(--coin-colour), 0.05rem 0 0 var(--coin-colour),
+      0.075rem 0 0 var(--coin-colour), 0.1rem 0 0 var(--coin-colour),
+      0.125rem 0 0 var(--coin-colour), 0.15rem 0 0 var(--coin-colour),
+      0.175rem 0 0 var(--coin-colour), 0.2rem 0 0 var(--coin-colour),
+      0.225rem 0 0 var(--coin-colour), 0.25rem 0 0 var(--coin-colour),
+      0.275rem 0 0 var(--coin-colour), 0.3rem 0 0 var(--coin-colour),
+      0.325rem 0 0 var(--coin-colour), 0.35rem 0 0 var(--coin-colour),
+      0.375rem 0 0 var(--coin-colour), 0.4rem 0 0 var(--coin-colour),
+      0.425rem 0 0 var(--coin-colour), 0.45rem 0 0 var(--coin-colour),
+      0.475rem 0 0 var(--coin-colour), 0.5rem 0 0 var(--coin-colour),
+      0.525rem 0 0 var(--coin-colour), 0.55rem 0 0 var(--coin-colour),
+      0.575rem 0 0 var(--coin-colour), 0.6rem 0 0 var(--coin-colour),
+      0.625rem 0 0 var(--coin-colour), 0.65rem 0 0 var(--coin-colour);
     --box-shadow-backwards:
-      -0.025rem 0 0 var(--coin-colour),
-      -0.05rem 0 0 var(--coin-colour),
-      -0.075rem 0 0 var(--coin-colour),
-      -0.1rem 0 0 var(--coin-colour),
-      -0.125rem 0 0 var(--coin-colour),
-      -0.15rem 0 0 var(--coin-colour),
-      -0.175rem 0 0 var(--coin-colour),
-      -0.2rem 0 0 var(--coin-colour),
-      -0.225rem 0 0 var(--coin-colour),
-      -0.25rem 0 0 var(--coin-colour),
-      -0.275rem 0 0 var(--coin-colour),
-      -0.3rem 0 0 var(--coin-colour),
-      -0.325rem 0 0 var(--coin-colour),
-      -0.35rem 0 0 var(--coin-colour),
-      -0.375rem 0 0 var(--coin-colour),
-      -0.4rem 0 0 var(--coin-colour),
-      -0.425rem 0 0 var(--coin-colour),
-      -0.45rem 0 0 var(--coin-colour),
-      -0.475rem 0 0 var(--coin-colour),
-      -0.5rem 0 0 var(--coin-colour),
-      -0.525rem 0 0 var(--coin-colour),
-      -0.55rem 0 0 var(--coin-colour),
-      -0.575rem 0 0 var(--coin-colour),
-      -0.6rem 0 0 var(--coin-colour),
-      -0.625rem 0 0 var(--coin-colour),
-      -0.65rem 0 0 var(--coin-colour);
+      -0.025rem 0 0 var(--coin-colour), -0.05rem 0 0 var(--coin-colour),
+      -0.075rem 0 0 var(--coin-colour), -0.1rem 0 0 var(--coin-colour),
+      -0.125rem 0 0 var(--coin-colour), -0.15rem 0 0 var(--coin-colour),
+      -0.175rem 0 0 var(--coin-colour), -0.2rem 0 0 var(--coin-colour),
+      -0.225rem 0 0 var(--coin-colour), -0.25rem 0 0 var(--coin-colour),
+      -0.275rem 0 0 var(--coin-colour), -0.3rem 0 0 var(--coin-colour),
+      -0.325rem 0 0 var(--coin-colour), -0.35rem 0 0 var(--coin-colour),
+      -0.375rem 0 0 var(--coin-colour), -0.4rem 0 0 var(--coin-colour),
+      -0.425rem 0 0 var(--coin-colour), -0.45rem 0 0 var(--coin-colour),
+      -0.475rem 0 0 var(--coin-colour), -0.5rem 0 0 var(--coin-colour),
+      -0.525rem 0 0 var(--coin-colour), -0.55rem 0 0 var(--coin-colour),
+      -0.575rem 0 0 var(--coin-colour), -0.6rem 0 0 var(--coin-colour),
+      -0.625rem 0 0 var(--coin-colour), -0.65rem 0 0 var(--coin-colour);
   }
 }
 

package/src/loader/Loader.story.tsx

@@ -7,6 +7,7 @@ export default {
   title: 'Loading/Loader',
   args: {
     size: 'md',
+    label: 'Sending your money',
   },
   argTypes: {
     size: {
@@ -15,6 +16,9 @@ export default {
         value: ['sm', 'md'],
       },
     },
+    label: {
+      control: 'text',
+    },
   },
 } satisfies Meta<typeof Loader>;
 

package/src/loader/Loader.test.tsx

@@ -9,7 +9,7 @@ describe('Loader', () => {
 
   it('tests default state', () => {
     const { container } = render(<Loader />);
-    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--md')).toHaveLength(1);
     expect(container.querySelector('div[data-testid]')).toBeNull();
   });
 
@@ -19,33 +19,48 @@ describe('Loader', () => {
     expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
   });
 
+  it('renders label when displayInstantly is true', () => {
+    render(<Loader label="Sending your money" displayInstantly />);
+    expect(screen.getByText('Sending your money')).toBeInTheDocument();
+  });
+
+  it('does not render label before debounce completes', () => {
+    render(<Loader label="Sending your money" />);
+    expect(screen.queryByText('Sending your money')).not.toBeInTheDocument();
+  });
+
+  it('does not render label when label is not provided', () => {
+    render(<Loader displayInstantly />);
+    expect(screen.queryByText('Sending your money')).not.toBeInTheDocument();
+  });
+
   it('shows renders the next best size of loader when using a deprecated size on the new theme', () => {
     const { container, rerender } = render(
       <ThemeProvider theme="personal">
         <Loader {...{ small: true }} />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--sm')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--sm')).toHaveLength(1);
 
     rerender(
       <ThemeProvider theme="personal">
         <Loader size="xs" />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--sm')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--sm')).toHaveLength(1);
 
     rerender(
       <ThemeProvider theme="personal">
         <Loader size="lg" />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--md')).toHaveLength(1);
 
     rerender(
       <ThemeProvider theme="personal">
         <Loader size="xl" />
       </ThemeProvider>,
     );
-    expect(container.querySelectorAll('div.tw-loader--md')).toHaveLength(1);
+    expect(container.querySelectorAll('div.tw-loader-asset--md')).toHaveLength(1);
   });
 });

package/src/loader/Loader.tsx

@@ -1,8 +1,10 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
+import Body from '../body';
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
+import { Typography } from '../common/propsValues/typography';
 
 // TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component
 type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
@@ -19,6 +21,8 @@ export type LoaderProps = {
   size?: SizeType | DeprecatedSize;
   /** @default false */
   displayInstantly?: boolean;
+  /** Optional label displayed below the loader */
+  label?: ReactNode;
   // TODO: refactor in favor of prop from `CommonProps` type
   /** @default {} */
   classNames?: Record<string, string>;
@@ -39,6 +43,7 @@ const Loader = ({
   small = false,
   size = Size.MEDIUM,
   displayInstantly = false,
+  label,
   classNames = {},
   ...restProps
 }: LoaderProps) => {
@@ -77,12 +82,18 @@ const Loader = ({
   }
 
   return (
-    <div
-      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
-        'tw-loader--visible': hasDebounced,
-      })}
-      data-testid={restProps['data-testid']}
-    />
+    <div className={style('tw-loader')} data-testid={restProps['data-testid']}>
+      <div
+        className={clsx(style('tw-loader-asset'), style(`tw-loader-asset--${supportedSize}`), {
+          'tw-loader-asset--visible': hasDebounced,
+        })}
+      />
+      {label && hasDebounced && (
+        <Body type={Typography.BODY_LARGE_BOLD} as="span" className={style('text-secondary')}>
+          {label}
+        </Body>
+      )}
+    </div>
   );
 };