Merged in SW-3317-move-toast-to-design-system (pull request #2716)

SW-3317 move toast to design system

* chore: Move toast to design-system and add interaction tests

* Move toast to design-system and add storybook tests

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3317-move-toast-to-design-system

* merge

* move sonner dependency to @scandic-hotels/design-system


Approved-by: Anton Gunnarsson

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

@@ -0,0 +1,84 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import { toastVariants } from './variants'
+import { MaterialIcon, MaterialIconSetIconProps } from '../Icons/MaterialIcon'
+
+import styles from './toasts.module.css'
+import { Typography } from '../Typography'
+import { useIntl } from 'react-intl'
+import { IconButton } from '../IconButton'
+
+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
+          onClick={onClose}
+          aria-label={intl.formatMessage({
+            defaultMessage: 'Dismiss notification',
+          })}
+          theme={'Black'}
+        >
+          <MaterialIcon icon="close" />
+        </IconButton>
+      ) : 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'
+  }
+}