@redsift/popovers 9.2.3-patch → 9.2.3

package/src/components/toast-container/types.ts

@@ -0,0 +1,110 @@
+import { ReactNode } from 'react';
+import { ClearWaitingQueueParams } from 'react-toastify';
+import { ToastPlacement, ToastVariant, ToastProps } from '../toast';
+
+/**
+ * Component props.
+ */
+export interface ToastContainerProps {
+  /** Delay in ms to close the toast. If set to false, the notification needs to be closed manually. */
+  autoClose?: number | false;
+  /** Dismiss toast on click. */
+  closeOnClick?: boolean;
+  /** Allow Toasts to be draggable. */
+  draggable?: boolean;
+  /** Whether the progress bar is displayed or not on all Toasts. */
+  hideProgressBar?: boolean;
+  /** Used to limit the number of toast displayed on screen at the same time. */
+  limit?: number;
+  /** Pause the timer when the window loses focus. */
+  pauseOnFocusLoss?: boolean;
+  /** Keep the timer running or not on hover. */
+  pauseOnHover?: boolean;
+  /** Default placement for all Toasts. */
+  placement?: ToastPlacement;
+  /** Supports right to left content. */
+  rtl?: boolean;
+}
+
+export type StyledToastContainerProps = ToastContainerProps & {};
+
+export interface ToastOptions {
+  /** Delay in ms to close the toast. If set to false, the notification needs to be closed manually. */
+  autoClose?: number | false;
+  /** Dismiss toast on click. */
+  closeOnClick?: boolean;
+  /** Content. */
+  content?: ReactNode;
+  /** Let you delay the toast appearance. Pass a value in ms. */
+  delay?: number;
+  /** Allow toast to be draggable. */
+  draggable?: boolean;
+  /** Whether the component has a close button or not. */
+  closeButton?: boolean | ReactNode;
+  /** Whether or not the progress bar is displayed. */
+  hideProgressBar?: boolean;
+  /** Pause the timer when the window loses focus. */
+  pauseOnFocusLoss?: boolean;
+  /** Keep the timer running or not on hover. */
+  pauseOnHover?: boolean;
+  /** Placement of the Toast. */
+  placement?: ToastPlacement;
+  /** Title. */
+  title?: string;
+  /** Variant */
+  variant?: ToastVariant;
+}
+
+type Id = number | string;
+
+export type useToastReturnType = {
+  notify: (
+    options: ToastOptions,
+    props?: Omit<ToastProps, 'ref' | 'closeButton'>
+  ) => Id;
+  clearWaitingQueue: (params?: ClearWaitingQueueParams | undefined) => void;
+  dismiss: (id?: Id | undefined) => void;
+  done: (id: Id) => void;
+  error: (
+    options: Omit<ToastOptions, 'variant'>,
+    props?: Omit<ToastProps, 'ref'>
+  ) => Id;
+  isActive: (id: Id) => boolean;
+  info: (
+    options: Omit<ToastOptions, 'variant'>,
+    props?: Omit<ToastProps, 'ref'>
+  ) => Id;
+  loading: (
+    options: Omit<ToastOptions, 'variant'>,
+    props?: Omit<ToastProps, 'ref'>
+  ) => Id;
+  promise: (
+    promise: Promise<unknown> | (() => Promise<unknown>),
+    {
+      pending,
+      success,
+      error,
+    }: {
+      pending: Pick<ToastOptions, 'content' | 'title' | 'variant'>;
+      success: Pick<ToastOptions, 'content' | 'title' | 'variant'>;
+      error: Pick<ToastOptions, 'content' | 'title' | 'variant'>;
+    },
+    options?: Omit<ToastOptions, 'content' | 'title' | 'variant'>,
+    props?: Omit<ToastProps, 'ref'>
+  ) => void;
+  success: (
+    options: Omit<ToastOptions, 'variant'>,
+    props?: Omit<ToastProps, 'ref'>
+  ) => Id;
+  update: (
+    id: number | string,
+    { content, placement, title, variant, ...options }: ToastOptions,
+    props?: Omit<ToastProps, 'ref'>
+  ) => void;
+  warning: (
+    options: Omit<ToastOptions, 'variant'>,
+    props?: Omit<ToastProps, 'ref'>
+  ) => Id;
+};
+
+export type useToastProps = () => useToastReturnType;

package/src/components/toast-container/useToast.test.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect } from 'react';
+import { screen, render, act, waitFor } from '@testing-library/react';
+
+import { ToastContainer, useToast } from '.';
+
+const InstantToast: React.FC<unknown> = () => {
+  const toastId = React.useRef<number | string | null>(null);
+  const toast2Id = React.useRef<number | string | null>(null);
+  const { promise, notify, update, success, warning, error, info, loading } =
+    useToast();
+
+  useEffect(() => {
+    toastId.current = notify({
+      title: 'Saving...',
+      variant: 'loading',
+      autoClose: false,
+      closeButton: false,
+    });
+    update(toastId.current, {
+      title: 'Saved!',
+      autoClose: 5000,
+      variant: 'loading',
+      placement: 'bottom-center',
+    });
+    toast2Id.current = notify({
+      title: 'Saving again...',
+      autoClose: false,
+      closeButton: false,
+    });
+    update(toast2Id.current, {
+      title: 'Saved again!',
+      autoClose: 5000,
+    });
+    promise(
+      Promise.resolve(),
+      {
+        pending: { title: 'Promise is pending' },
+        success: { title: 'Promise resolved!' },
+        error: { title: 'Promise rejected!' },
+      },
+      { placement: 'top-center' }
+    );
+    promise(Promise.reject(), {
+      pending: { title: 'Promise is pending' },
+      success: { title: 'Promise resolved!' },
+      error: { title: 'Promise rejected!' },
+    });
+    notify({
+      title: 'Default',
+      variant: 'success',
+      placement: 'top-center',
+    });
+    notify({
+      title: 'This is a success',
+    });
+    success({
+      title: 'This is a success',
+      delay: 0,
+    });
+    warning({
+      title: 'This is a warning',
+      content: 'Cupcake ipsum dolor sit amet.',
+      delay: 0,
+    });
+    error({
+      title: 'This is an error',
+      content:
+        'Cupcake ipsum dolor sit amet. Cookie chocolate cake muffin chocolate bar powder cake chupa chups. Gummies chocolate cake cupcake chupa chups sesame snaps soufflé soufflé gingerbread blueie. Caramels chocolate bar soufflé sesame snaps tiramisu. Cookie muffin pie cake cupcake sweet.',
+      delay: 0,
+      closeButton: false,
+    });
+    info({
+      title: 'This is an info',
+      content:
+        'Cupcake ipsum dolor sit amet. Cookie chocolate cake muffin chocolate bar powder cake chupa chups.',
+      delay: 0,
+    });
+    loading({ title: 'Updating...' });
+  }, []);
+
+  return <ToastContainer />;
+};
+
+describe('useToast', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  it('provides a promise method', async () => {
+    render(<InstantToast />);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('Promise resolved!')).toBeInTheDocument();
+      expect(screen.queryByText('Promise rejected!')).toBeInTheDocument();
+    });
+  });
+
+  it('provides an update method', async () => {
+    render(<InstantToast />);
+
+    act(() => {
+      jest.runAllTimers();
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('Saved!')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/toast-container/useToast.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+import { Toast } from '../toast';
+import { useToastProps, useToastReturnType } from './types';
+
+const notify: useToastReturnType['notify'] = (
+  { content, closeButton, placement, title, variant = 'info', ...options },
+  props
+) => {
+  return toast(
+    <Toast title={title} variant={variant} closeButton={closeButton} {...props}>
+      {content}
+    </Toast>,
+    {
+      type: variant === 'loading' ? 'default' : variant,
+      ...(placement && { position: placement }),
+      ...options,
+    }
+  );
+};
+
+const update: useToastReturnType['update'] = (
+  id,
+  { content, closeButton, placement, title, variant = 'info', ...options },
+  props
+) => {
+  toast.update(id, {
+    render: ({ closeToast }) => (
+      <Toast
+        title={title}
+        variant={variant}
+        closeButton={closeButton}
+        closeToast={closeToast}
+        {...props}
+      >
+        {content}
+      </Toast>
+    ),
+    type: variant === 'loading' ? 'default' : variant,
+    ...(placement && { position: placement }),
+    ...options,
+  });
+};
+
+const promise: useToastReturnType['promise'] = (
+  promise,
+  { pending, success, error },
+  { closeButton, placement, ...options } = {},
+  props
+) => {
+  toast.promise(promise, {
+    pending: {
+      render: ({ closeToast }) => (
+        <Toast
+          closeButton={closeButton}
+          title={pending.title}
+          variant="loading"
+          closeToast={closeToast}
+          {...props}
+        >
+          {pending.content}
+        </Toast>
+      ),
+      type: 'default',
+      ...(placement && { position: placement }),
+      ...options,
+    },
+    success: {
+      render: ({ closeToast }) => (
+        <Toast
+          closeButton={closeButton}
+          title={success.title}
+          variant="success"
+          closeToast={closeToast}
+          {...props}
+        >
+          {success.content}
+        </Toast>
+      ),
+      type: 'success',
+      ...(placement && { position: placement }),
+      ...options,
+    },
+    error: {
+      render: ({ closeToast }) => (
+        <Toast
+          closeButton={closeButton}
+          title={error.title}
+          variant="error"
+          closeToast={closeToast}
+          {...props}
+        >
+          {error.content}
+        </Toast>
+      ),
+      type: 'error',
+      ...(placement && { position: placement }),
+      ...options,
+    },
+  });
+};
+
+export const useToast: useToastProps = () => {
+  return {
+    notify: notify,
+    clearWaitingQueue: toast.clearWaitingQueue,
+    dismiss: toast.dismiss,
+    done: toast.done,
+    error: (options, props) => {
+      return notify({ variant: 'error', ...options }, props);
+    },
+    info: (options, props) => {
+      return notify({ variant: 'info', ...options }, props);
+    },
+    isActive: toast.isActive,
+    loading: (options, props) => {
+      return notify({ variant: 'loading', ...options }, props);
+    },
+    promise: promise,
+    success: (options, props) => {
+      return notify({ variant: 'success', ...options }, props);
+    },
+    update: update,
+    warning: (options, props) => {
+      return notify({ variant: 'warning', ...options }, props);
+    },
+  };
+};

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import { mdiHelp } from '@redsift/icons';
+import { Button, Flexbox, Icon, IconSize, Text } from '@redsift/design-system';
+import { Tooltip, TooltipPlacement } from '.';
+
+export default {
+  title: 'Popovers/Tooltip',
+  component: Tooltip,
+};
+
+export const Uncontrolled = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>My tooltip</Tooltip.Content>
+    </Tooltip>
+    <Tooltip>
+      <Tooltip.Trigger>My trigger</Tooltip.Trigger>
+      <Tooltip.Content>My tooltip</Tooltip.Content>
+    </Tooltip>
+  </Flexbox>
+);
+
+export const Controlled = () => {
+  const id = '123';
+  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen2, setIsOpen2] = useState(false);
+
+  const handleOnOpen = (open: boolean) => {
+    setIsOpen(open);
+    console.log('#1', open);
+  };
+
+  const handleOnOpen2 = (open: boolean) => {
+    setIsOpen2(open);
+    console.log('#2', open);
+  };
+
+  return (
+    <Flexbox
+      flexDirection="row"
+      flexWrap="wrap"
+      justifyContent="center"
+      alignItems="center"
+      padding="32px"
+      style={{ backgroundColor: '#EFEFEF' }}
+    >
+      <Tooltip tooltipId={id} isOpen={isOpen} onOpen={handleOnOpen}>
+        <Tooltip.Trigger>
+          <Button variant="secondary">Button</Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content>My tooltip</Tooltip.Content>
+      </Tooltip>
+      <Tooltip isOpen={isOpen2} onOpen={handleOnOpen2}>
+        <Tooltip.Trigger>My trigger</Tooltip.Trigger>
+        <Tooltip.Content>My tooltip</Tooltip.Content>
+      </Tooltip>
+    </Flexbox>
+  );
+};
+
+export const AllPlacements = () => (
+  <Flexbox flexDirection="column" flexWrap="wrap" gap="32px" padding="48px" style={{ backgroundColor: '#EFEFEF' }}>
+    {['top', 'left', 'bottom', 'right'].map((side) => {
+      return (
+        <Flexbox key={side} flexDirection="row" flexWrap="wrap" justifyContent="space-evenly" alignItems="center">
+          {['start', '', 'end'].map((alignment) => {
+            return (
+              <div key={`${side}${alignment ? '-' : ''}${alignment}`} style={{ margin: '1em' }}>
+                <Tooltip isOpen placement={`${side}${alignment ? '-' : ''}${alignment}` as TooltipPlacement}>
+                  <Tooltip.Trigger>
+                    <Button variant="secondary">Button</Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>
+                    <Text>{`Tooltip [${side}${alignment ? '-' : ''}${alignment}]`}</Text>
+                  </Tooltip.Content>
+                </Tooltip>
+              </div>
+            );
+          })}
+        </Flexbox>
+      );
+    })}
+  </Flexbox>
+);
+
+export const InlineTooltip = () => (
+  <Flexbox flexDirection="column" gap="120px">
+    <p>
+      Some text with a
+      <Tooltip isOpen>
+        <Tooltip.Trigger>
+          <abbr style={{ borderBottom: '1px dotted', margin: '0 4px' }}>convoluted</abbr>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <Text>extremely complex and difficult to follow</Text>
+        </Tooltip.Content>
+      </Tooltip>
+      word in it.
+    </p>
+    <p>
+      And some text with a contextual help at the end
+      <Tooltip placement={TooltipPlacement.top} isOpen>
+        <Tooltip.Trigger>
+          <Icon icon={mdiHelp} size={IconSize.xsmall} style={{ display: 'inline-block', verticalAlign: 'super' }} />
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <Text>A contextual help is help that is displayed in your product or web site</Text>
+        </Tooltip.Content>
+      </Tooltip>
+      .
+    </p>
+  </Flexbox>
+);
+
+export const EmptyTooltip = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Tooltip.Trigger>
+    </Tooltip>
+  </Flexbox>
+);
+
+export const TooltipOnDisabledButton = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Button variant="secondary" isDisabled>
+          Disabled
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <Text margin="16px">
+          Cupcake ipsum dolor sit amet brownie jujubes topping sesame snaps. Liquorice marzipan jelly-o carrot cake
+          icing croissant carrot cake. Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah
+          marzipan bear claw donut.
+        </Text>
+      </Tooltip.Content>
+    </Tooltip>
+  </Flexbox>
+);
+
+export const ContentCanBeClicked = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>My tooltip{' '}
+        <a href="https://www.google.com" target="_blank" rel="noreferrer">
+          Click me
+        </a></Tooltip.Content>
+    </Tooltip>
+    <Tooltip>
+      <Tooltip.Trigger>My trigger</Tooltip.Trigger>
+      <Tooltip.Content>
+        My tooltip{' '}
+        <a href="https://www.google.com" target="_blank" rel="noreferrer">
+          Click me
+        </a>
+      </Tooltip.Content>
+    </Tooltip>
+  </Flexbox>
+);

package/src/components/tooltip/Tooltip.test.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+
+import { Button } from '@redsift/design-system';
+import { TooltipContent } from '../tooltip-content';
+import { TooltipTrigger } from '../tooltip-trigger';
+import { Tooltip } from '.';
+
+describe('Tooltip', () => {
+  const onOpenSpy = jest.fn();
+  const realError = console.error;
+
+  beforeEach(() => {
+    console.error = jest.fn();
+  });
+
+  afterEach(() => {
+    onOpenSpy.mockClear();
+    console.error = realError;
+  });
+
+  it.each`
+    Name                | Component         | props
+    ${'TooltipTrigger'} | ${TooltipTrigger} | ${{}}
+    ${'TooltipContent'} | ${TooltipContent} | ${{}}
+  `(
+    '$Name should throw error when not wrapped inside `Tooltip`',
+    function ({ Component, props }) {
+      expect(() => render(<Component {...props} />)).toThrow(
+        'Tooltip components must be wrapped in <Tooltip />'
+      );
+    }
+  );
+
+  // it.each`
+  //   Name                      | Component  | props
+  //   ${'Controlled Tooltip'}   | ${Tooltip} | ${{ onOpen: onOpenSpy, isOpen: false }}
+  //   ${'Uncontrolled Tooltip'} | ${Tooltip} | ${{ onOpen: onOpenSpy, defaultOpen: false }}
+  // `(
+  //   '$Name can be closed by default and then open',
+  //   async function ({ Name, Component, props }) {
+  //     const { getByText } = render(
+  //       <Component delay={0} {...props}>
+  //         <TooltipTrigger>
+  //           <Button variant="secondary">Trigger</Button>
+  //         </TooltipTrigger>
+  //         <TooltipContent>Content</TooltipContent>
+  //       </Component>
+  //     );
+
+  //     expect(screen.queryByText('Content')).not.toBeInTheDocument();
+  //     expect(onOpenSpy).not.toHaveBeenCalled();
+
+  //     const triggerButton = getByText('Trigger');
+  //     fireEvent.mouseEnter(triggerButton);
+
+  //     expect(onOpenSpy).toHaveBeenCalled();
+  //     if (Name.includes('Uncontrolled')) {
+  //       expect(getByText('Content')).not.toBeVisible();
+  //       await act(async () => {});
+  //       await waitFor(() => {
+  //         expect(screen.queryByText('Content')).toBeInTheDocument();
+  //       });
+
+  //       expect(getByText('Content')).toBeVisible();
+
+  //       fireEvent.mouseLeave(triggerButton);
+
+  //       expect(screen.queryByText('Content')).not.toBeInTheDocument();
+  //       expect(onOpenSpy).toHaveBeenCalled();
+  //     }
+  //   }
+  // );
+
+  it.each`
+    Name                      | Component  | props
+    ${'Controlled Tooltip'}   | ${Tooltip} | ${{ onOpen: onOpenSpy, isOpen: true }}
+    ${'Uncontrolled Tooltip'} | ${Tooltip} | ${{ onOpen: onOpenSpy, defaultOpen: true }}
+  `(
+    '$Name can be open by default and then closed',
+    async function ({ Name, Component, props }) {
+      const { getByText } = render(
+        <Component delay={0} {...props}>
+          <TooltipTrigger>
+            <Button variant="secondary">Trigger</Button>
+          </TooltipTrigger>
+          <TooltipContent>Content</TooltipContent>
+        </Component>
+      );
+      await act(async () => {});
+      await waitFor(() => {
+        expect(screen.queryByText('Content')).toBeInTheDocument();
+      });
+
+      expect(getByText('Content')).toBeVisible();
+      expect(onOpenSpy).not.toHaveBeenCalled();
+
+      fireEvent.keyDown(global.document, {
+        key: 'Escape',
+      });
+
+      expect(onOpenSpy).toHaveBeenCalled();
+      if (Name.includes('Uncontrolled')) {
+        await act(async () => {});
+        await waitFor(() => {
+          expect(screen.queryByText('Content')).not.toBeInTheDocument();
+        });
+
+        expect(screen.queryByText('Content')).not.toBeInTheDocument();
+      }
+    }
+  );
+});