@transferwise/components 46.36.1 → 46.38.0

package/src/promoCard/PromoCardContext.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { PromoCardContext, usePromoCardContext } from './PromoCardContext';
 
 // A simple component that consumes the context
-const TestComponent: React.FC = () => {
+const TestComponent: React.FC<Record<string, never>> = () => {
   const context = usePromoCardContext();
 
   return (

package/src/provider/direction/DirectionProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactElement, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren } from 'react';
 
 import { LayoutDirection, Direction } from '../../common/direction';
 
@@ -6,9 +6,6 @@ export const DirectionContext = createContext<LayoutDirection>(Direction.LTR);
 
 export type DirectionProviderProps = PropsWithChildren<{ direction: LayoutDirection }>;
 
-export const DirectionProvider = ({
-  direction,
-  children,
-}: DirectionProviderProps): ReactElement => {
+export const DirectionProvider = ({ direction, children }: DirectionProviderProps) => {
   return <DirectionContext.Provider value={direction}>{children}</DirectionContext.Provider>;
 };

package/src/provider/language/LanguageProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactElement, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren } from 'react';
 
 import { DEFAULT_LOCALE } from '../../common/locale';
 
@@ -6,6 +6,6 @@ export const LanguageContext = createContext<string>(DEFAULT_LOCALE);
 
 export type LanguageProviderProps = PropsWithChildren<{ locale: string }>;
 
-export const LanguageProvider = ({ locale, children }: LanguageProviderProps): ReactElement => {
+export const LanguageProvider = ({ locale, children }: LanguageProviderProps) => {
   return <LanguageContext.Provider value={locale}>{children}</LanguageContext.Provider>;
 };

package/src/section/Section.story.tsx

@@ -83,7 +83,6 @@ export const WithCards = () => {
   return (
     <Section>
       <Header title="Section with cards" />
-      {/* @ts-expect-error TODO: remove once Card is migrated to TypeScript */}
       <Card
         title="What's in the box?!"
         details="Click me to reveal."
@@ -93,7 +92,6 @@ export const WithCards = () => {
       >
         <div>Hello there!</div>
       </Card>
-      {/* @ts-expect-error TODO: remove once Card is migrated to TypeScript */}
       <Card
         title="What's in the box?!"
         details="Click me to reveal."

package/src/segmentedControl/SegmentedControl.tsx

@@ -104,7 +104,7 @@ const SegmentedControl = ({
           };
           return mode === 'input' ? (
             <label
-              ref={segment.ref as React.RefObject<HTMLLabelElement>}
+              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}
               key={segment.id}
               htmlFor={segment.id}
               className={classNames('segmented-control__segment', {
@@ -132,7 +132,7 @@ const SegmentedControl = ({
             </label>
           ) : (
             <button
-              ref={segment.ref as React.RefObject<HTMLButtonElement>}
+              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}
               key={segment.id}
               type="button"
               role="tab"

package/src/select/option/Option.tsx

@@ -1,5 +1,6 @@
+import { IdIconProps } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
 import { cloneElement, ReactElement, ReactNode } from 'react';
 
 import Body from '../../body';
@@ -12,6 +13,7 @@ export type Props<T> = {
   note?: ReactNode;
   secondary?: ReactNode;
   icon?: ReactNode;
+  /** @deprecated */
   classNames?: Record<string, string>;
   selected?: boolean;
 };
@@ -22,13 +24,10 @@ function Option<T>({
   note = '',
   secondary = '',
   icon,
-  classNames = {},
   selected = false,
 }: Props<T>) {
-  const { isModern } = useTheme();
-
   const iconElement = icon
-    ? cloneElement(icon as ReactElement, {
+    ? cloneElement(icon as ReactElement<IdIconProps>, {
         size: 24,
         className: 'tw-icon',
       })
@@ -38,26 +37,15 @@ function Option<T>({
     <Body as="span" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>
       {label}
       {note && (
-        <Body as="span" className={isModern ? 'm-l-1' : 'm-l-1 body-2'}>
+        <Body as="span" className="m-l-1">
           {note}
         </Body>
       )}
     </Body>
   );
 
-  const secondaryElementClassNames = (): string | undefined => {
-    let classes: string | undefined = undefined;
-    if (selected) {
-      classes = 'text-ellipsis';
-    }
-    if (isModern) {
-      return classes;
-    }
-    return `${classes ? classes + ' ' : ''}body-2`;
-  };
-
   const secondaryElement = secondary && (
-    <Body className={secondaryElementClassNames()}>{secondary}</Body>
+    <Body className={classNames(selected && 'text-ellipsis')}>{secondary}</Body>
   );
 
   return iconElement ? (

package/src/slidingPanel/SlidingPanel.spec.js

@@ -11,6 +11,7 @@ describe('SlidingPanel', () => {
     className: undefined,
     slidingPanelPositionFixed: false,
     showSlidingPanelBorder: false,
+    testId: undefined,
   };
 
   it('renders with right props', () => {
@@ -24,7 +25,7 @@ describe('SlidingPanel', () => {
 
     expect(cssTransition()).toHaveLength(1);
 
-    expect(cssTransition().props()).toStrictEqual({
+    expect(cssTransition().props()).toEqual({
       className: 'sliding-panel sliding-panel--open-left',
       children: null,
     });

package/src/slidingPanel/SlidingPanel.tsx

@@ -12,6 +12,7 @@ export interface SlidingPanelProps
   open: boolean;
   showSlidingPanelBorder?: boolean;
   slidingPanelPositionFixed?: boolean;
+  testId?: string;
 }
 
 const SlidingPanel = forwardRef(
@@ -23,9 +24,10 @@ const SlidingPanel = forwardRef(
       slidingPanelPositionFixed,
       className,
       children,
+      testId,
       ...rest
     }: Omit<SlidingPanelProps, 'ref'>,
-    reference: React.ForwardedRef<HTMLDivElement>,
+    reference: React.ForwardedRef<HTMLDivElement | null>,
   ) => {
     const localReference = useRef<HTMLDivElement>(null as never);
     useImperativeHandle(reference, () => localReference.current, []);
@@ -44,6 +46,7 @@ const SlidingPanel = forwardRef(
       >
         <div
           ref={localReference}
+          data-testid={testId}
           className={classNames(
             'sliding-panel',
             `sliding-panel--open-${position}`,

package/src/snackbar/Snackbar.story.tsx

@@ -1,12 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
-import { StoryContext } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/test';
-import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
+import type { StoryContext } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+import { wait } from '../test-utils/wait';
 
 import Button from '../button';
-import CheckboxOption from '../checkboxOption/CheckboxOption';
-import { wait } from '../test-utils/wait';
 
 import { Snackbar } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
@@ -17,113 +15,35 @@ export default {
   title: 'Dialogs/Snackbar',
 };
 
-export const basic = () => {
+export const Basic = () => {
   const timeout = number('timeout (ms)', 10000000);
 
   return (
     <SnackbarProvider timeout={timeout}>
       <SnackbarConsumer>
         {({ createSnackbar }) => (
-          <>
-            <Button
-              block
-              onClick={() => {
-                createSnackbar({
-                  action: {
-                    label: 'View',
-                    onClick: () => action('View button clicked.'),
-                  },
-                  text: <span>Some text</span>,
-                });
-              }}
-            >
-              Show regular Snackbar
-            </Button>
-            <div className="p-t-3">
-              <CheckboxOption
-                title="In mobile view, snackbar is full-width, not centered"
-                media={<Mobile />}
-              />
-              <CheckboxOption
-                title="In RTL, snackbar is not left aligned"
-                content={
-                  <a
-                    href="https://transferwise.atlassian.net/browse/DS-4642"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Bug DS-4642
-                  </a>
-                }
-                media={<Switch />}
-              />
-              <CheckboxOption
-                title="In RTL, snackbar has proper padding on left and right of button"
-                content={
-                  <a
-                    href="https://transferwise.atlassian.net/browse/DS-4643"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Bug DS-4643
-                  </a>
-                }
-                media={<Switch />}
-              />
-              <CheckboxOption
-                title="In light mode, snackbar has drop shadow"
-                content={
-                  <a
-                    href="https://transferwise.atlassian.net/browse/DS-4477"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Bug DS-4477
-                  </a>
-                }
-                media={<Bulb />}
-              />
-              <CheckboxOption title="In dark mode, snackbar has no drop shadow" media={<Theme />} />
-              <CheckboxOption
-                title="In dark mode, snackbar is inverted and has light background"
-                media={<Theme />}
-              />
-              <CheckboxOption
-                title="Font size is 14 px, not 16px"
-                content={
-                  <a
-                    href="https://transferwise.atlassian.net/browse/DS-3716"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Bug DS-3716
-                  </a>
-                }
-                media={<Info size="16" />}
-              />
-              <CheckboxOption
-                title="Snackbar isn't transparent (get some text behind it to make sure)"
-                content={
-                  <a
-                    href="https://transferwise.atlassian.net/browse/DS-3740"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Bug DS-3740
-                  </a>
-                }
-                media={<Coins />}
-              />
-            </div>
-          </>
+          <Button
+            block
+            onClick={() => {
+              createSnackbar({
+                action: {
+                  label: 'View',
+                  onClick: () => action('View button clicked.'),
+                },
+                text: <span>Some text</span>,
+              });
+            }}
+          >
+            Show Snackbar
+          </Button>
         )}
       </SnackbarConsumer>
     </SnackbarProvider>
   );
 };
 
-basic.play = async ({ canvasElement }: StoryContext) => {
-  await wait(0); // TODO: Remove
+Basic.play = async ({ canvasElement }: StoryContext) => {
+  await wait(0);
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole('button'));
 };

package/src/snackbar/Snackbar.tests.story.tsx

@@ -0,0 +1,281 @@
+import { userEvent, within } from '@storybook/test';
+import { action } from '@storybook/addon-actions';
+import { Mobile as MobileIcon, Theme, Switch, Bulb, Info, Coins, Team } from '@transferwise/icons';
+import { Snackbar, type SnackbarProps } from './Snackbar';
+import { SnackbarConsumer } from './SnackbarContext';
+import SnackbarProvider from './SnackbarProvider';
+import Button from '../button';
+import CheckboxOption from '../checkboxOption';
+import { storyConfig } from '../test-utils';
+import { wait } from '../test-utils/wait';
+
+export default {
+  title: 'Dialogs/Snackbar/Tests',
+  component: Snackbar,
+  argTypes: {},
+};
+
+const launchSnackbar = async (canvasElement: HTMLElement) => {
+  await wait(0);
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('button'));
+};
+
+type Args = Partial<SnackbarProps> & {
+  extraContext: React.ReactNode;
+  timeout: number;
+};
+
+const TIMEOUT = 10000000;
+
+const Default = {
+  args: {
+    timeout: TIMEOUT,
+  } as Args,
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await launchSnackbar(canvasElement);
+  },
+  render: (args: Args) => {
+    return (
+      <SnackbarProvider timeout={args.timeout}>
+        <SnackbarConsumer>
+          {({ createSnackbar }) => (
+            <>
+              <Button
+                block
+                onClick={() => {
+                  createSnackbar({
+                    action: {
+                      label: 'View',
+                      onClick: () => action('View button clicked.'),
+                    },
+                    text: <span>Some text</span>,
+                  });
+                }}
+              >
+                Show Snackbar
+              </Button>
+              {args.extraContext}
+            </>
+          )}
+        </SnackbarConsumer>
+      </SnackbarProvider>
+    );
+  },
+};
+
+export const Basic = {
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        <CheckboxOption
+          title="In light mode, snackbar has drop shadow"
+          content={
+            <a
+              href="https://transferwise.atlassian.net/browse/DS-4477"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Bug DS-4477
+            </a>
+          }
+          media={<Bulb />}
+        />
+        <CheckboxOption
+          title="Font size is 14 px, not 16px"
+          content={
+            <a
+              href="https://transferwise.atlassian.net/browse/DS-3716"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Bug DS-3716
+            </a>
+          }
+          media={<Info size="16" />}
+        />
+      </div>
+    ) as React.ReactNode,
+  },
+  play: Default.play,
+  render: Default.render,
+};
+
+export const Mobile = storyConfig(
+  {
+    args: {
+      ...Default.args,
+      extraContext: (
+        <div className="p-t-3">
+          <CheckboxOption
+            title="In mobile view, snackbar is full-width, not centered"
+            media={<MobileIcon />}
+          />
+        </div>
+      ) as React.ReactNode,
+    },
+    play: Default.play,
+    render: Default.render,
+  },
+  {
+    variants: ['mobile'],
+  },
+);
+
+const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
+  await Default.play(context);
+
+  // the snackbar is outside the storybook dom so dark mode doesn't apply
+  const body = document.querySelector('div.np-theme-personal');
+  if (body) {
+    body.setAttribute('class', 'np-theme-personal--dark');
+  }
+  const snackbar = document.querySelector('div.snackbar');
+  if (snackbar) {
+    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
+  }
+};
+
+export const DarkMode = storyConfig(
+  {
+    args: {
+      ...Default.args,
+      extraContext: (
+        <div className="p-t-3">
+          <CheckboxOption title="In dark mode, snackbar has no drop shadow" media={<Theme />} />
+          <CheckboxOption
+            title="In dark mode, snackbar is inverted and has light background"
+            media={<Theme />}
+          />
+        </div>
+      ) as React.ReactNode,
+    },
+    play: switchToDarkMode,
+    render: Default.render,
+  },
+  {
+    variants: ['dark'],
+  },
+);
+
+const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
+  await Default.play(context);
+  // the snackbar is outside the storybook dom so the RTL variant doesn't apply
+  const body = document.querySelector('div.storybook-container');
+  if (body) {
+    body.setAttribute('dir', 'rtl');
+  }
+  const snackbar = document.querySelector('div.snackbar');
+  if (snackbar) {
+    snackbar.setAttribute('dir', 'rtl');
+  }
+};
+
+export const RTL = storyConfig(
+  {
+    args: {
+      ...Default.args,
+      extraContext: (
+        <div className="p-t-3">
+          <CheckboxOption
+            title="In RTL, snackbar is not left aligned"
+            content={
+              <a
+                href="https://transferwise.atlassian.net/browse/DS-4642"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Bug DS-4642
+              </a>
+            }
+            media={<Switch />}
+          />
+          <CheckboxOption
+            title="In RTL, snackbar has proper padding on left and right of button"
+            content={
+              <a
+                href="https://transferwise.atlassian.net/browse/DS-4643"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Bug DS-4643
+              </a>
+            }
+            media={<Switch />}
+          />
+        </div>
+      ) as React.ReactNode,
+    },
+    play: switchToRTL,
+    render: Default.render,
+  },
+  {
+    variants: ['rtl'],
+  },
+);
+
+export const RTLMobile = storyConfig(
+  {
+    args: {
+      ...RTL.args,
+    },
+    play: switchToRTL,
+    render: Default.render,
+  },
+  {
+    variants: ['rtl', 'mobile'],
+  },
+);
+
+export const Zoom400 = storyConfig(
+  {
+    args: {
+      ...Default.args,
+      extraContext: (
+        <div className="p-t-3">
+          <CheckboxOption
+            content="Snackbar isn't transparent (I'm going to make this text very long so that it will fill up the entire page and go behind the snackbar. This way, when you look at it you will easily be able to tell if the snackbar is transparent and recognize the bug because we don't want it to be transparent. Transparent is bad. When we first did rebrand we had a lot of problems with transparencies. I don't know what happened to them. I don't see them a lot anymore but I also don't remember anybody fixing them.)"
+            title={
+              <a
+                href="https://transferwise.atlassian.net/browse/DS-3716"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Bug DS-3716
+              </a>
+            }
+            media={<Coins />}
+          />
+        </div>
+      ),
+    },
+
+    play: Default.play,
+    render: Default.render,
+  },
+  {
+    variants: ['400%'],
+  },
+);
+
+export const MultipleClicks = {
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        <CheckboxOption
+          title="Snackbar is only shown once even if clicked many times"
+          media={<Team />}
+        />
+      </div>
+    ),
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    for (let i = 0; i < 8; i += 1) {
+      await userEvent.click(canvas.getByRole('button'));
+    }
+  },
+  render: Default.render,
+};

package/src/snackbar/Snackbar.tsx

@@ -3,7 +3,7 @@ import { CSSTransition } from 'react-transition-group';
 
 import ActionButton from '../actionButton';
 import Body from '../body';
-import { Theme, ThemeDark, ThemeLight } from '../common';
+import { Theme, type ThemeDark, type ThemeLight } from '../common';
 import { DirectionContext } from '../provider/direction';
 import withNextPortal from '../withNextPortal/withNextPortal';
 
@@ -15,6 +15,7 @@ export interface SnackbarProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
   };
   text: React.ReactNode;
+  /** @deprecated */
   theme?: ThemeLight | ThemeDark;
   timeout: number;
   timestamp: number;
@@ -66,10 +67,10 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
   };
 
   componentDidUpdate(previousProps: SnackbarProps) {
-    const { action, text, theme, timestamp } = this.props;
+    const { action, text, timestamp } = this.props;
 
     if (!previousProps.text) {
-      this.setState({ visible: true, action, text, theme }, () => {
+      this.setState({ visible: true, action, text }, () => {
         this.setLeaveTimeout();
       });
     } else if (previousProps.timestamp !== timestamp) {
@@ -78,19 +79,19 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
       if (this.state.visible) {
         this.setState({ visible: false }, () => {
           this.transitionTimeout = window.setTimeout(() => {
-            this.setState({ visible: true, action, text, theme });
+            this.setState({ visible: true, action, text });
             this.setLeaveTimeout();
           }, CSS_TRANSITION_DURATION);
         });
       } else {
-        this.setState({ visible: true, action, text, theme });
+        this.setState({ visible: true, action, text });
         this.setLeaveTimeout();
       }
     }
   }
 
   render() {
-    const { action, text, theme = Theme.LIGHT, visible } = this.state;
+    const { action, text, visible } = this.state;
     const { timeout } = this.props;
 
     return (
@@ -106,12 +107,7 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
           }}
           unmountOnExit
         >
-          <Body
-            ref={this.bodyRef}
-            as="span"
-            className={`snackbar__text snackbar__text--${theme}`}
-            aria-live="polite"
-          >
+          <Body ref={this.bodyRef} as="span" className="snackbar__text" aria-live="polite">
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

package/src/ssr.spec.js

@@ -194,6 +194,12 @@ describe('Server side rendering', () => {
       Popover: {
         children: <div />,
       },
+      Progress: {
+        progress: { value: 50, max: 100 },
+      },
+      ProgressBar: {
+        progress: { value: 50, max: 100 },
+      },
       Field: {
         model: 'a model',
         type: 'text',