web/packages/design-system/lib/components/Toasts/Toast.tsx

import type { VariantProps } from "class-variance-authority"

import { MaterialIcon, MaterialIconSetIconProps } from "../Icons/MaterialIcon"
import { toastVariants } from "./variants"

import { useIntl } from "react-intl"
import { IconButton } from "../IconButton"
import { Typography } from "../Typography"
import styles from "./toasts.module.css"

export type ToastsProps = VariantProps<typeof toastVariants> & {
  variant: NonNullable<VariantProps<typeof toastVariants>["variant"]>
  onClose?: () => void
} & (
    | {
        children: React.ReactNode
        message?: never
      }
    | {
        children?: never
        message: React.ReactNode
      }
  )

export function Toast({ children, message, onClose, variant }: ToastsProps) {
  const className = toastVariants({ variant })
  const intl = useIntl()
  const Icon = <AlertIcon variant={variant} color="Icon/Inverted" />

  return (
    <div className={className} role={getRole(variant)} aria-atomic="true">
      <div className={styles.iconContainer}>{Icon && Icon}</div>
      {message ? (
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.message}>{message}</p>
        </Typography>
      ) : (
        <div className={styles.content}>{children}</div>
      )}
      {onClose ? (
        <IconButton
          onPress={onClose}
          aria-label={intl.formatMessage({
            id: "toast.dismissNotification",
            defaultMessage: "Dismiss notification",
          })}
          variant="Muted"
          emphasis
          iconName="close"
        />
      ) : null}
    </div>
  )
}

interface AlertIconProps {
  variant: ToastsProps["variant"]
}
function AlertIcon({
  variant,
  ...props
}: AlertIconProps & MaterialIconSetIconProps) {
  switch (variant) {
    case "error":
      return <MaterialIcon icon="cancel" {...props} />
    case "info":
      return <MaterialIcon icon="info" {...props} />
    case "success":
      return <MaterialIcon icon="check_circle" {...props} />
    case "warning":
      return <MaterialIcon icon="warning" {...props} />
  }
}

function getRole(variant: ToastsProps["variant"]) {
  switch (variant) {
    case "error":
    case "warning":
      return "alert"
    case "info":
    case "success":
    default:
      return "status"
  }
}