@transferwise/components 0.0.0-experimental-58e9ef8 → 0.0.0-experimental-a88d24d

package/src/slidingPanel/SlidingPanel.tsx

@@ -3,7 +3,6 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import { Position } from '../common';
-import { PreventScroll } from '../common/preventScroll/PreventScroll';
 
 export const EXIT_ANIMATION = 350;
 
@@ -34,35 +33,31 @@ const SlidingPanel = forwardRef(
     useImperativeHandle(reference, () => localReference.current, []);
 
     return (
-      <>
-        {open ? <PreventScroll /> : null}
-
-        <CSSTransition
-          {...rest}
-          key={`sliding-panel--open-${position}`}
-          nodeRef={localReference}
-          in={open}
-          // Wait for animation to finish before unmount.
-          timeout={{ enter: 0, exit: EXIT_ANIMATION }}
-          classNames="sliding-panel"
-          appear
-          unmountOnExit
+      <CSSTransition
+        {...rest}
+        key={`sliding-panel--open-${position}`}
+        nodeRef={localReference}
+        in={open}
+        // Wait for animation to finish before unmount.
+        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
+        classNames="sliding-panel"
+        appear
+        unmountOnExit
+      >
+        <div
+          ref={localReference}
+          data-testid={testId}
+          className={clsx(
+            'sliding-panel',
+            `sliding-panel--open-${position}`,
+            showSlidingPanelBorder && `sliding-panel--border-${position}`,
+            slidingPanelPositionFixed && 'sliding-panel--fixed',
+            className,
+          )}
         >
-          <div
-            ref={localReference}
-            data-testid={testId}
-            className={clsx(
-              'sliding-panel',
-              `sliding-panel--open-${position}`,
-              showSlidingPanelBorder && `sliding-panel--border-${position}`,
-              slidingPanelPositionFixed && 'sliding-panel--fixed',
-              className,
-            )}
-          >
-            {children}
-          </div>
-        </CSSTransition>
-      </>
+          {children}
+        </div>
+      </CSSTransition>
     );
   },
 );

package/src/statusIcon/StatusIcon.tsx

@@ -18,6 +18,7 @@ type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 export type StatusIconSentiment = Sentiment | Status.PENDING;
 
 export type StatusIconProps = {
+  id?: string;
   sentiment?: `${StatusIconSentiment}`;
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
@@ -34,7 +35,12 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {
+const StatusIcon = ({
+  id,
+  sentiment = 'neutral',
+  size: sizeProp = 40,
+  iconLabel,
+}: StatusIconProps) => {
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
@@ -100,6 +106,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
       className={clsx('status-circle', sentiment)}
+      id={id}
     >
       <Icon
         className={clsx('status-icon', iconColor)}

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

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
-import { lorem100, lorem500 } from '../../test-utils';
-import { Typography } from '../propsValues/typography';
-import Alert from '../../alert';
-import Body from '../../body';
-import Button from '../../button';
-import Title from '../../title';
-import BottomSheet from './BottomSheet';
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export default {
-  component: BottomSheet,
-  title: 'Dialogs/BottomSheet/tests',
-  tags: ['!autodocs'],
-  args: {
-    open: false,
-  },
-} satisfies Meta<typeof BottomSheet>;
-
-type Story = StoryObj<typeof BottomSheet>;
-
-/**
- * This test ensures that when the SelectInput is used within a scrollable page,
- * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
- *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
- */
-export const SmoothScrollReset: Story = {
-  args: {
-    children: (
-      <>
-        <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
-        <Alert className="m-t-2" type="warning">
-          Once the <code>BottomSheet</code> opens, the document underneath should be static and
-          should not scroll.
-        </Alert>
-        <Body as="p">{lorem100}</Body>
-        <Body as="p">{lorem100}</Body>
-      </>
-    ),
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>{'html { scroll-behavior: smooth; }'}</style>
-        <div style={{ maxWidth: 500 }}>
-          <Body>
-            <p>{lorem100}</p>
-            <p>{lorem100}</p>
-          </Body>
-          <Story />
-          <Body as="p" className="m-t-5 disabled">
-            {lorem500}
-          </Body>
-        </div>
-      </>
-    ),
-  ],
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-  play: async ({ canvasElement }) => {
-    document.documentElement.scrollTop = 400;
-    await wait(500);
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-  render: ({ open, ...args }) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-      <div>
-        <Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
-        <BottomSheet
-          {...args}
-          open={isOpen}
-          onClose={() => {
-            setIsOpen(false);
-          }}
-        />
-      </div>
-    );
-  },
-};

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

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, type Mock, userEvent, within } from 'storybook/test';
-import { allModes } from '../../.storybook/modes';
-import { lorem5, lorem500 } from '../test-utils';
-import { Field } from '../field/Field';
-import Body from '../body';
-import { SelectInput, type SelectInputProps } from './SelectInput';
-
-const meta = {
-  title: 'Forms/SelectInput/tests',
-  component: SelectInput,
-  args: {
-    onFilterChange: fn() satisfies Mock,
-    onChange: fn() satisfies Mock,
-    onClose: fn() satisfies Mock,
-    onOpen: fn() satisfies Mock,
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof SelectInput>;
-export default meta;
-
-type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-/**
- * This test ensures that when the SelectInput is used within a scrollable page,
- * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
- *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
- */
-export const SmoothScrollReset: Story<string> = {
-  args: {
-    items: Array.from({ length: 15 }).map((_, id) => ({
-      type: 'option',
-      value: `option ${id + 1}`,
-    })),
-    placeholder: 'Select option',
-  },
-  decorators: [
-    (Story) => (
-      <>
-        <style>{`html { scroll-behavior: smooth; }`}</style>
-        <div>
-          <div
-            className="d-flex align-items-center justify-content-center"
-            style={{
-              backgroundColor: 'var(--color-bright-yellow)',
-              height: 400,
-            }}
-          >
-            This block should not be in the viewport.
-          </div>
-          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
-          <Field id="el1" label={lorem5}>
-            <Story />
-          </Field>
-          <Body as="p">{lorem500}</Body>
-        </div>
-      </>
-    ),
-  ],
-  play: async ({ canvasElement }) => {
-    document.documentElement.scrollTop = 400;
-    await wait();
-    const canvas = within(canvasElement);
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
-  },
-  globals: {
-    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
-  },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, type Mock, userEvent, within } from 'storybook/test';
-import { allModes } from '../../.storybook/modes';
-import { lorem500 } from '../test-utils';
-import { Field } from '../field/Field';
-import Body from '../body';
-import MoneyInput from './MoneyInput';
-
-const meta = {
-  title: 'Forms/MoneyInput/tests',
-  component: MoneyInput,
-  args: {
-    amount: 1000,
-    id: 'moneyInput',
-    currencies: [
-      {
-        value: 'EUR',
-        label: 'EUR',
-        note: 'Euro',
-        currency: 'eur',
-        searchable: 'Spain, Germany, France, Austria',
-      },
-      {
-        value: 'GBP',
-        label: 'GBP',
-        note: 'British pound',
-        currency: 'gbp',
-        searchable: 'England, Scotland, Wales',
-      },
-    ],
-    selectedCurrency: {
-      value: 'EUR',
-      label: 'EUR',
-      note: 'Euro',
-      currency: 'eur',
-      searchable: 'Spain, Germany, France, Austria',
-    },
-    searchPlaceholder: '',
-    onAmountChange: () => {},
-    onCurrencyChange: () => {},
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof MoneyInput>;
-export default meta;
-
-type Story = StoryObj<typeof MoneyInput>;
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-/**
- * This test ensures that when the SelectInput is used within a scrollable page,
- * opening the dropdown does not cause any unwanted scrolling or layout shifts.
- * Expected preview should start with green bar at the top, with yellow section
- * not in the viewport.
- *
- * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
- */
-export const SmoothScrollReset: Story = {
-  decorators: [
-    (Story) => (
-      <>
-        <style>{`html { scroll-behavior: smooth; }`}</style>
-        <div>
-          <div
-            className="d-flex align-items-center justify-content-center"
-            style={{
-              backgroundColor: 'var(--color-bright-yellow)',
-              height: 400,
-            }}
-          >
-            This block should not be in the viewport.
-          </div>
-          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
-          <Field id="el1" label="Select currency">
-            <Story />
-          </Field>
-          <Body as="p">{lorem500}</Body>
-        </div>
-      </>
-    ),
-  ],
-  play: async ({ canvasElement }) => {
-    await wait(2000);
-    document.documentElement.scrollTop = 400;
-    await wait(2000);
-    const canvas = within(canvasElement);
-    const triggerButton = canvas.getByRole('combobox');
-    await userEvent.click(triggerButton);
-  },
-  globals: {
-    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
-  },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};