@transferwise/components 46.37.0 → 46.38.0

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/sticky/Sticky.spec.tsx

@@ -0,0 +1,71 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import Sticky, { StickyProps } from './Sticky';
+
+describe('Sticky', () => {
+  const defaultProps = {
+    open: true,
+    children: <div>Test Content</div>,
+    position: 'bottom' as const,
+    testId: 'test-sticky-panel',
+  };
+
+  let rerenderSticky: (props?: StickyProps) => void;
+
+  beforeEach(() => {
+    const { rerender } = render(<Sticky {...defaultProps} />);
+
+    rerenderSticky = (props?: StickyProps) => {
+      rerender(<Sticky {...defaultProps} {...props} />);
+    };
+  });
+
+  test('renders with default props', () => {
+    expect(screen.getByTestId('test-sticky-panel')).toBeVisible();
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-bottom');
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  test('renders with open `false`', async () => {
+    const props: StickyProps = {
+      ...defaultProps,
+      open: false, // Ensure the Sticky is initially open
+    };
+
+    expect(screen.getByTestId('test-sticky-panel')).toBeVisible();
+
+    // Change props to close the Sticky
+    rerenderSticky(props);
+
+    await waitFor(() => {
+      // Use queryByText instead of getByText for conditional presence checks
+      expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders new content', () => {
+    const props: StickyProps = {
+      ...defaultProps,
+      children: <div>New Test Content</div>,
+    };
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+
+    // Change props
+    rerenderSticky(props);
+
+    expect(screen.getByText('New Test Content')).toBeInTheDocument();
+  });
+
+  it('renders with position set to `top`', () => {
+    const props: StickyProps = {
+      ...defaultProps,
+      position: 'top',
+    };
+    expect(screen.getByTestId('test-sticky-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-bottom');
+
+    // Change props
+    rerenderSticky(props);
+
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-top');
+  });
+});

package/src/sticky/Sticky.story.tsx

@@ -1,22 +1,79 @@
-import { select, boolean } from '@storybook/addon-knobs';
-
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import Sticky from './Sticky';
+import { allModes } from '../../.storybook/modes';
 
-export default {
+const meta: Meta<typeof Sticky> = {
   component: Sticky,
-  title: 'Other/Sticky',
+  title: 'Dialogs/Sticky',
+  tags: ['autodocs'],
+  args: {
+    open: true,
+    position: 'bottom', // Default position
+    children: (
+      <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
+        <p className="m-b-0">Default text for Sticky component.</p>
+      </div>
+    ),
+  },
+  parameters: {
+    chromatic: {
+      // 🔶 Test each story for Sticky
+      modes: {
+        ltr: allModes.ltr,
+        rtl: allModes.rtl,
+        light: allModes.light,
+        dark: allModes.dark,
+        brightGreen: allModes.brightGreen,
+        forestGreen: allModes.forestGreen,
+        desktop: allModes.desktop,
+        tablet: allModes.tablet,
+        largeMobile: allModes.largeMobile,
+        smallMobile: allModes.smallMobile,
+        zoom400: allModes.zoom400,
+      },
+    },
+    docs: {
+      canvas: {
+        layout: 'padded',
+      },
+    },
+  },
 };
 
-export const Basic = () => {
-  const open = boolean('open', false);
-  const position = select('position', ['top', 'bottom'], 'bottom');
-  return (
-    <Sticky open={open} position={position}>
-      <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-        been the industry standard dummy text ever since the 1500s, when an unknown printer took a
-        galley of type and scrambled it to
+export default meta;
+
+// Represents a story object for the `Sticky` component.
+type Story = StoryObj<typeof Sticky>;
+
+export const Default: Story = {}; // Default story with no additional props
+
+export const PositionTop: Story = {
+  args: {
+    position: 'top', // Set the position prop to 'top'
+  },
+};
+
+export const WithLongContent: Story = {
+  args: {
+    children: (
+      <div className="p-x-4 p-y-4">
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio ipsa rem fugiat
+          repellendus nisi dolorum, recusandae aperiam repudiandae natus quaerat, explicabo fugit!
+          Odit illum vero eius quasi, error soluta veritatis.
+        </p>
+        <p>
+          Recusandae a animi tenetur magni itaque optio in aut enim odio. Minima, veritatis error
+          dicta expedita aliquam officiis deleniti repellat rerum nam ad quam dolorum reiciendis
+          voluptas doloremque quis eveniet.
+        </p>
+        <p>
+          Adipisci nulla quos magnam blanditiis minima nesciunt odio mollitia, fuga ullam aliquid
+          qui iure delectus dolores corporis officiis autem iste quia at ea sint tempore,
+          repudiandae amet? Error, praesentium eaque.
+        </p>
       </div>
-    </Sticky>
-  );
+    ),
+  },
 };