@redsift/popovers 9.2.3-patch → 9.2.3

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

@@ -0,0 +1,39 @@
+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 as ReactElement, {
+      ...getReferenceProps({
+        ref: triggerRef,
+        ...props,
+        ...children.props,
+        children: children.props.children ?? '',
+      }),
+      onClick: () => handleOpen(!isOpen),
+      isActive: isOpen,
+    });
+  }
+
+  return null;
+});
+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,68 @@
+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' ? 'primary' : (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();
+  });
+});

package/src/components/toast/Toast.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef, RefObject } from 'react';
+import classNames from 'classnames';
+
+import { useLocalizedStringFormatter } from '@react-aria/i18n';
+import intlMessages from './intl';
+
+import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@redsift/icons';
+import {
+  NotificationsColorPalette,
+  Comp,
+  Icon,
+  Flexbox,
+  Spinner,
+  Text,
+  isComponent,
+  ButtonColor,
+  IconButton,
+  RedsiftTypographyFontWeightSemiBold,
+} from '@redsift/design-system';
+import { StyledToast } from './styles';
+import { ToastProps, ToastVariant } from './types';
+
+const COMPONENT_NAME = 'Toast';
+const CLASSNAME = 'redsift-toast';
+const DEFAULT_PROPS: Partial<ToastProps> = {
+  variant: 'info',
+  closeButton: true,
+};
+
+const getVariant = (variant: ToastVariant) => {
+  switch (variant) {
+    case ToastVariant.info:
+    default:
+      return <Icon icon={mdiInformation} color={NotificationsColorPalette.info} />;
+    case ToastVariant.error:
+      return <Icon icon={mdiAlertCircle} color={NotificationsColorPalette.error} />;
+    case ToastVariant.success:
+      return <Icon icon={mdiCheckCircle} color={NotificationsColorPalette.success} />;
+    case ToastVariant.warning:
+      return <Icon icon={mdiAlert} color={NotificationsColorPalette.warning} />;
+    case ToastVariant.loading:
+      return <Spinner size="small" />;
+  }
+};
+
+/**
+ * The Toast component.
+ */
+export const Toast: Comp<ToastProps & { closeToast?: () => void }, HTMLDivElement> = forwardRef((props, ref) => {
+  const { children, className, closeToast, closeButton, title, variant, ...forwardedProps } = props;
+
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+
+  const icon = getVariant(variant!);
+
+  return (
+    <StyledToast
+      {...forwardedProps}
+      className={classNames(Toast.className, className)}
+      ref={ref as RefObject<HTMLDivElement>}
+      $hasTitle={Boolean(title)}
+      $variant={variant}
+    >
+      <Flexbox className={`${Toast.className}__header`} justifyContent="space-between">
+        <Flexbox justifyContent="space-between" flexDirection="column" gap="0">
+          <Flexbox className={`${Toast.className}-header__title`} gap="14px" alignItems="flex-start">
+            {icon}
+            {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}
+          </Flexbox>
+
+          {children ? <div className={`${Toast.className}__content`}>{children}</div> : null}
+        </Flexbox>
+
+        {closeButton === true ? (
+          <IconButton
+            aria-label={stringFormatter.format('close')}
+            className={`${Toast.className}-header__icon-button`}
+            icon={mdiClose}
+            onClick={closeToast}
+          />
+        ) : isComponent('Button')(closeButton) || isComponent('IconButton')(closeButton) ? (
+          React.cloneElement(closeButton, {
+            color: variant === 'loading' ? 'default' : (variant as ButtonColor),
+            onClick: () => {
+              closeButton.props.onClick?.();
+              closeToast?.();
+            },
+          })
+        ) : null}
+      </Flexbox>
+    </StyledToast>
+  );
+});
+Toast.className = CLASSNAME;
+Toast.defaultProps = DEFAULT_PROPS;
+Toast.displayName = COMPONENT_NAME;

package/src/components/toast/index.ts

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

package/src/components/toast/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/src/components/toast/intl/fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

package/src/components/toast/intl/index.ts

@@ -0,0 +1,7 @@
+import enUS from './en-US.json';
+import frFR from './fr-FR.json';
+
+export default {
+  'en-US': enUS,
+  'fr-FR': frFR,
+};

package/src/components/toast/styles.ts

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '@redsift/design-system';
+import { StyledToastProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledToast = styled.div<StyledToastProps>`
+  ${baseStyling}
+
+  padding: 16px;
+  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px rgb(0 0 0 / 14%), 0px 1px 10px rgb(0 0 0 / 12%);
+
+  ${({ $hasTitle, $variant }) => css`
+    background-color: ${$variant === 'loading'
+      ? 'var(--redsift-color-neutral-white)'
+      : `var(--redsift-color-notifications-${$variant}-hover)`};
+
+    .redsift-toast-header__icon-button {
+      padding: 0px;
+      .redsift-icon {
+        color: var(--redsift-color-neutral-black);
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--redsift-color-notifications-${$variant}-active);
+      }
+    }
+
+    .redsift-toast__content {
+      margin-top: ${$hasTitle ? '8px' : '-24px'};
+      margin-left: 38px;
+    }
+  `}
+`;

package/src/components/toast/types.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ValueOf, SizingProps, SpacingProps } from '@redsift/design-system';
+
+/**
+ * Component variant.
+ */
+export const ToastVariant = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  loading: 'loading',
+} as const;
+export type ToastVariant = ValueOf<typeof ToastVariant>;
+
+export const ToastPlacement = {
+  'top-right': 'top-right',
+  'top-center': 'top-center',
+  'top-left': 'top-left',
+  'bottom-right': 'bottom-right',
+  'bottom-center': 'bottom-center',
+  'bottom-left': 'bottom-left',
+} as const;
+export type ToastPlacement = ValueOf<typeof ToastPlacement>;
+
+/**
+ * Component props.
+ */
+export interface ToastProps
+  extends Omit<ComponentProps<'div'>, 'id' | 'style'>,
+    SpacingProps,
+    SizingProps {
+  /** Whether the component has a close button or not. */
+  closeButton?: boolean | ReactNode;
+  /** Title. */
+  title?: string;
+  /** Variant */
+  variant?: ToastVariant;
+}
+
+export type StyledToastProps = Omit<ToastProps, 'variant' | 'id'> & {
+  $hasTitle: boolean;
+  $variant: ToastProps['variant'];
+};