@transferwise/components 46.37.0 → 46.39.0

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>
-  );
+    ),
+  },
 };

package/src/sticky/Sticky.tsx

@@ -1,16 +1,60 @@
 import { Position } from '../common';
 import SlidingPanel from '../slidingPanel';
+import { FunctionComponent } from 'react';
 
 export interface StickyProps {
-  open?: boolean;
-  position?: `${Position.TOP | Position.BOTTOM}`;
+  /** Optional prop for children components to be rendered inside the Sticky component. */
   children?: React.ReactNode;
+
+  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */
+  open?: boolean;
+
+  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */
+  position?: `${Position.TOP}` | `${Position.BOTTOM}`;
+
+  /** Optional prop to specify the ID used for testing */
+  testId?: string;
 }
 
-export default function Sticky({ open = true, position = 'bottom', children }: StickyProps) {
+/**
+ * ### Sticky Component
+ *
+ * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.
+ * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,
+ * based on the `open` prop. It can be positioned at the top or bottom of the container,
+ * as specified by the `position` prop.
+ *
+ * @component
+ * @param {ReactNode} children - Children content.
+ * @param {boolean} open - Determines if the Sticky component is open or closed.
+ * @param {('top'|'bottom')} position - Specifies the position.
+ * @param {string} testId - ID used for testing.
+ * @returns {JSX.Element} The `SlidingPanel` component with applied props.
+ * @example
+ * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>
+ * <Sticky open={open} position={'bottom'}>
+ *   <div>
+ *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>
+ *   </div>
+ * </Sticky>
+ */
+const Sticky: FunctionComponent<StickyProps> = ({
+  children,
+  open = true,
+  position = Position.BOTTOM,
+  testId,
+}: StickyProps) => {
   return (
-    <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
+    <SlidingPanel
+      testId={testId}
+      open={open}
+      position={position}
+      slidingPanelPositionFixed
+      showSlidingPanelBorder
+    >
       {children}
     </SlidingPanel>
   );
-}
+};
+
+export default Sticky;

package/src/test-utils/Parameters.d.ts

@@ -58,4 +58,12 @@ export interface ChromaticParameters {
    * @default 0.063
    */
   diffThreshold?: number;
+
+  /**
+   * Modes for Chromatic testing.
+   *
+   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
+   * 'dark' for dark mode, or `rtl` for right to left content.
+   */
+  modes?: object;
 }

package/src/test-utils/index.js

@@ -1,5 +1,5 @@
 import { render, renderHook } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Provider } from '..';
 import { DEFAULT_LOCALE } from '../common/locale';

package/src/test-utils/jest.setup.js

@@ -1,3 +1,5 @@
+require('@testing-library/jest-dom');
+
 const { default: Adapter } = require('@cfaester/enzyme-adapter-react-18');
 const Enzyme = require('enzyme');
 const util = require('node:util');

package/src/test-utils/story-config.ts

@@ -9,6 +9,11 @@ export const viewports = {
     styles: { height: '256px', width: '320px' },
     type: 'mobile',
   },
+  desktop: {
+    name: 'Desktop',
+    styles: { height: '1024px', width: '1280px' },
+    type: 'desktop',
+  },
 };
 
 interface StoryConfig {

package/src/tile/{Tile.spec.js → Tile.spec.tsx}

@@ -9,7 +9,7 @@ describe(Tile, () => {
     description: 'Receive money from friends and family like a local',
     href: '#href',
     media: <svg data-testid="illustration" />,
-    onClick: () => onClick(),
+    onClick,
     title: 'Receive money',
   };