@redsift/popovers 9.2.3 → 9.2.4

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

@@ -1,39 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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'];
-};