@redsift/popovers 8.0.0 → 8.0.1

package/src/components/popover/Popover.test.tsx

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

package/src/components/popover/Popover.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { partitionComponents, isComponent } from '@redsift/design-system';
+import { PopoverContent } from '../popover-content';
+import { PopoverTrigger } from '../popover-trigger';
+
+import { PopoverContext } from './context';
+import { PopoverPlacement, PopoverProps } from './types';
+import { usePopover } from './usePopover';
+
+const COMPONENT_NAME = 'Popover';
+const CLASSNAME = 'redsift-popover';
+const DEFAULT_PROPS: Partial<PopoverProps> = {
+  isModal: false,
+  placement: PopoverPlacement.bottom,
+};
+
+/**
+ * The Popover component.
+ */
+export const BasePopover: React.FC<PopoverProps> & {
+  displayName?: string;
+  className?: string;
+} = (props) => {
+  const { children, defaultOpen, placement, isModal, isOpen, onOpen } = props;
+
+  const popover = usePopover({
+    defaultOpen,
+    placement,
+    isModal,
+    isOpen,
+    onOpen,
+  });
+
+  const [[trigger], [content]] = partitionComponents(
+    React.Children.toArray(children),
+    [isComponent('PopoverTrigger'), isComponent('PopoverContent')]
+  );
+
+  return (
+    <PopoverContext.Provider value={popover}>
+      {trigger}
+      {content}
+    </PopoverContext.Provider>
+  );
+};
+BasePopover.className = CLASSNAME;
+BasePopover.defaultProps = DEFAULT_PROPS;
+BasePopover.displayName = COMPONENT_NAME;
+
+export const Popover = Object.assign(BasePopover, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+});

package/src/components/popover/context.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PopoverState } from './types';
+
+export const PopoverContext = React.createContext<PopoverState | null>(null);

package/src/components/popover/index.ts

@@ -0,0 +1,5 @@
+export * from './context';
+export * from './types';
+export * from './Popover';
+export * from './usePopover';
+export * from './usePopoverContext';

package/src/components/popover/types.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ValueOf } from '@redsift/design-system';
+import { usePopover } from './usePopover';
+
+/**
+ * Context props.
+ */
+export type PopoverState = ReturnType<typeof usePopover> | null;
+
+/**
+ * Component variant.
+ */
+export const PopoverPlacement = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-end': 'left-end',
+} as const;
+export type PopoverPlacement = ValueOf<typeof PopoverPlacement>;
+
+/**
+ * Component props.
+ */
+export interface PopoverProps {
+  /** Children. Can only be PopoverTrigger and PopoverContent. */
+  children: ReactNode;
+  /**
+   * Default open status.
+   * Used for uncontrolled version.
+   */
+  defaultOpen?: boolean;
+  /** Default placement of the popover. */
+  placement?: PopoverPlacement;
+  /** Whether the popover is a modal or not. */
+  isModal?: boolean;
+  /**
+   * Whether the component is opened or not.
+   * Used for controlled version.
+   */
+  isOpen?: boolean;
+  /** Method to handle component change. */
+  onOpen?: (open: boolean) => void;
+}
+
+export type StyledPopoverProps = PopoverProps;

package/src/components/popover/usePopover.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react';
+import { PopoverProps } from './types';
+
+export function usePopover({
+  defaultOpen,
+  placement,
+  isModal,
+  isOpen: propsIsOpen,
+  onOpen,
+}: Omit<PopoverProps, 'children'>) {
+  const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);
+
+  useEffect(() => {
+    setIsOpen(propsIsOpen ?? defaultOpen);
+  }, [propsIsOpen, defaultOpen]);
+
+  const handleOpen = useCallback(
+    (collapsed: boolean) => {
+      if (onOpen) {
+        onOpen(collapsed);
+      }
+      if (propsIsOpen === undefined || propsIsOpen === null) {
+        setIsOpen(collapsed);
+      }
+    },
+    [onOpen]
+  );
+
+  const data = useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: handleOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(2),
+      flip({
+        fallbackAxisSideDirection: 'end',
+      }),
+      shift({ padding: 2 }),
+    ],
+  });
+
+  const context = data.context;
+
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const interactions = useInteractions([dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      isOpen,
+      handleOpen,
+      ...interactions,
+      ...data,
+      isModal,
+    }),
+    [isOpen, handleOpen, interactions, data, isModal]
+  );
+}

package/src/components/popover/usePopoverContext.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PopoverContext } from './context';
+
+export const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+
+  if (context == null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+
+  return context;
+};

package/src/components/popover-content/PopoverContent.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import {
+  useMergeRefs,
+  FloatingPortal,
+  FloatingFocusManager,
+} from '@floating-ui/react';
+
+import { Comp } from '@redsift/design-system';
+import { PopoverContentProps } from './types';
+import { usePopoverContext } from '../popover';
+import { StyledPopoverContent } from './styles';
+import classNames from 'classnames';
+
+const COMPONENT_NAME = 'PopoverContent';
+const CLASSNAME = 'redsift-popover-content';
+const DEFAULT_PROPS: Partial<PopoverContentProps> = {};
+
+/**
+ * The PopoverContent component.
+ */
+export const PopoverContent: Comp<PopoverContentProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    const { children, className, style } = props;
+    const {
+      context: floatingContext,
+      getFloatingProps,
+      isModal,
+      isOpen,
+      refs,
+      strategy,
+      x,
+      y,
+    } = usePopoverContext();
+    const popoverRef = useMergeRefs([refs.setFloating, ref]);
+
+    return (
+      <FloatingPortal id="redsift-app-container">
+        {isOpen && (
+          <FloatingFocusManager context={floatingContext} modal={isModal}>
+            <StyledPopoverContent
+              className={classNames(PopoverContent.className, className)}
+              ref={popoverRef}
+              style={{
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                width: 'fit-content',
+                ...style,
+              }}
+              {...getFloatingProps(props)}
+            >
+              {children}
+            </StyledPopoverContent>
+          </FloatingFocusManager>
+        )}
+      </FloatingPortal>
+    );
+  });
+PopoverContent.className = CLASSNAME;
+PopoverContent.defaultProps = DEFAULT_PROPS;
+PopoverContent.displayName = COMPONENT_NAME;

package/src/components/popover-content/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './PopoverContent';

package/src/components/popover-content/styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+import { StyledPopoverContentProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledPopoverContent = styled.div<StyledPopoverContentProps>`
+  ${baseContainer}
+  align-items: center;
+  background-color: var(--redsift-color-neutral-white);
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+  color: var(--redsift-color-neutral-black);
+  display: flex;
+  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
+    drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
+  font-family: var(--redsift-typography-popover-font-family);
+  font-size: var(--redsift-typography-popover-font-size);
+  font-weight: var(--redsift-typography-popover-font-weight);
+  line-height: var(--redsift-typography-popover-line-height);
+  max-width: calc(100vw - 48px);
+  z-index: var(--redsift-layout-z-index-popover);
+
+  &:focus-visible {
+    outline: none;
+  }
+`;

package/src/components/popover-content/types.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { ContainerProps, InternalSpacingProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface PopoverContentProps
+  extends ComponentProps<'div'>,
+    Omit<ContainerProps, keyof InternalSpacingProps> {}
+
+export type StyledPopoverContentProps = PopoverContentProps;

package/src/components/popover-trigger/PopoverTrigger.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, ReactElement } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Comp, isComponent } from '@redsift/design-system';
+import { usePopoverContext } from '../popover';
+import { PopoverTriggerProps } from './types';
+
+const COMPONENT_NAME = 'PopoverTrigger';
+const CLASSNAME = 'redsift-popover-trigger';
+const DEFAULT_PROPS: Partial<PopoverTriggerProps> = {};
+
+/**
+ * The PopoverTrigger component.
+ */
+export const PopoverTrigger: Comp<PopoverTriggerProps, HTMLButtonElement> =
+  forwardRef((props, ref) => {
+    const { children } = props;
+
+    const { getReferenceProps, isOpen, handleOpen, refs } = usePopoverContext();
+    const childrenRef = (children as any).ref;
+    const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+
+    if (
+      isComponent('Button')(children) ||
+      isComponent('IconButton')(children) ||
+      isComponent('LinkButton')(children)
+    ) {
+      return React.cloneElement(children, {
+        ...getReferenceProps({
+          ref: triggerRef,
+          ...props,
+          ...(children as ReactElement).props,
+        }),
+        onClick: () => handleOpen(!isOpen),
+        isActive: isOpen,
+      });
+    }
+
+    return <>{children}</>;
+  });
+PopoverTrigger.className = CLASSNAME;
+PopoverTrigger.defaultProps = DEFAULT_PROPS;
+PopoverTrigger.displayName = COMPONENT_NAME;

package/src/components/popover-trigger/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './PopoverTrigger';

package/src/components/popover-trigger/types.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { StylingProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface PopoverTriggerProps
+  extends Omit<ComponentProps<'button'>, 'onClick'>,
+    StylingProps {}

package/src/components/toast/Toast.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { Toast, ToastVariant } from '.';
+import { Flexbox } from '@redsift/design-system';
+import { Button, ButtonColor } from '@redsift/design-system';
+
+export default {
+  title: 'Popovers/Toast/Toast',
+  component: Toast,
+};
+
+export const Simple = () => (
+  <Toast>Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.</Toast>
+);
+
+export const WithTitle = () => (
+  <Toast title="Title">
+    Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+  </Toast>
+);
+
+export const AllVariants = () => (
+  <Flexbox flexDirection="column">
+    {Object.keys(ToastVariant).map((variant) => (
+      <Toast
+        key={variant}
+        variant={variant as ToastVariant}
+        title={`${variant[0].toUpperCase()}${variant.slice(1, variant.length)}`}
+      >
+        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+      </Toast>
+    ))}
+  </Flexbox>
+);
+
+export const WithoutCloseButton = () => (
+  <Toast title="Without close button" closeButton={false}>
+    Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+  </Toast>
+);
+
+export const WithCustomCloseButton = () => (
+  <Flexbox flexDirection="column">
+    {Object.keys(ToastVariant).map((variant) => (
+      <Toast
+        key={variant}
+        variant={variant as ToastVariant}
+        title={`${variant[0].toUpperCase()}${variant.slice(1, variant.length)}`}
+        closeButton={<Button>Click me</Button>}
+      >
+        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+      </Toast>
+    ))}
+  </Flexbox>
+);
+
+export const WithComponents = () => (
+  <Flexbox flexDirection="column">
+    {Object.keys(ToastVariant).map((variant) => (
+      <Toast
+        key={variant}
+        variant={variant as ToastVariant}
+        title={`${variant[0].toUpperCase()}${variant.slice(1, variant.length)}`}
+      >
+        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+        <Button
+          color={variant === 'loading' ? 'default' : (variant as ButtonColor)}
+          marginTop="8px"
+        >
+          Click me
+        </Button>
+      </Toast>
+    ))}
+  </Flexbox>
+);

package/src/components/toast/Toast.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { Toast } from '.';
+import { Button } from '@redsift/design-system';
+
+describe('Toast', () => {
+  const onClickSpy = jest.fn();
+  const onClickSpy2 = jest.fn();
+
+  afterEach(() => {
+    onClickSpy.mockClear();
+    onClickSpy2.mockClear();
+  });
+
+  it('handles default', () => {
+    const { getByText } = render(<Toast>Content</Toast>);
+    expect(getByText('Content')).toBeVisible();
+  });
+
+  it('supports custom className', () => {
+    const tree = render(<Toast className="test-class">Content</Toast>);
+    const component = tree.asFragment().firstChild;
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining(Toast.className!)
+    );
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining('test-class')
+    );
+  });
+
+  it('supports custom data attributes', () => {
+    const tree = render(<Toast data-testid="test">Content</Toast>);
+    const component = tree.asFragment().firstChild;
+    expect(component).toHaveAttribute('data-testid', 'test');
+  });
+
+  it('supports custom close button with onClick', () => {
+    const { getByRole } = render(
+      <Toast closeButton={<Button onClick={onClickSpy}>Click me</Button>}>
+        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+      </Toast>
+    );
+
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('supports custom close button without onClick', () => {
+    const { getByRole } = render(
+      <Toast closeToast={onClickSpy2} closeButton={<Button>Click me</Button>}>
+        Cupcake ipsum dolor sit amet pastry tootsie roll sugar plum.
+      </Toast>
+    );
+
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onClickSpy2).toHaveBeenCalled();
+  });
+});