Scalable Props API structure

toast.jsx

const toastProps = {
  purpose: 'alert',
  variant: 'success',
  isClosable: false,
  onClose: handleClose,
  root: {
    'data-testId': 'root-wrapper',
  },
  content: {
    id: 'main-toast',
  },
  primaryAction: {
    icon: 'chevron-up',
    children: (
      <span>
        Expand
      </span>
    )
  },
};

<Toast {...toastProps}>
  Your order has been placed
</Toast>

function Toast(props) {
  const {
    purpose = 'status',
    variant = 'neutral',
    isClosable = true,
    onClose = noop,
    children,
    root = {},
    content = {},
    primaryAction = {},
  } = props;

  const contentCn = cn(styles.toastContent, content.className);

  return (
    <div {...root} className={styles.toastRoot} data-variant={variant}>
      <div {...content} className={contentCn} role={purpose}>
        {children}
      </div>
      <div>
        <Button {...primaryAction} />
        {
          isClosable && (
            <Button onClick={onClose}>
              Dismiss
            </Button>
          )
        }
      </div>
    </div>
  );
}