feat(SW-498): Added Alert component

2024-10-16 15:18:43 +02:00
parent bcee55c359
commit e41bf86993
6 changed files with 229 additions and 0 deletions
@@ -0,0 +1,69 @@
+import { ChevronRightIcon, CloseLargeIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+
+import { AlertProps } from "./alert"
+import { getIconByAlertType } from "./utils"
+import { alertVariants } from "./variants"
+
+import styles from "./alert.module.css"
+
+export default async function Alert({
+  className,
+  variant,
+  type,
+  heading,
+  text,
+  sidePeekCtaText,
+  sidepeekContent,
+  closeable = false,
+}: AlertProps) {
+  const classNames = alertVariants({
+    className,
+    variant,
+    type,
+  })
+  const intl = await getIntl()
+
+  const Icon = getIconByAlertType(type)
+
+  return (
+    <div className={classNames}>
+      <span className={styles.iconWrapper}>
+        <Icon className={styles.icon} width={24} height={24} />
+      </span>
+      <div className={styles.content}>
+        <div className={styles.textWrapper}>
+          {heading ? (
+            <Body className={styles.heading} textTransform="bold" asChild>
+              <h2>{heading}</h2>
+            </Body>
+          ) : null}
+          <Body className={styles.text}>{text}</Body>
+        </div>
+        {sidePeekCtaText ? (
+          <Button
+            theme="base"
+            variant="icon"
+            intent="text"
+            size="small"
+            wrapping
+            className={styles.sidepeekCta}
+          >
+            {sidePeekCtaText}
+            <ChevronRightIcon />
+          </Button>
+        ) : null}
+      </div>
+      {closeable ? (
+        <button
+          className={styles.closeButton}
+          aria-label={intl.formatMessage({ id: "Close" })}
+        >
+          <CloseLargeIcon />
+        </button>
+      ) : null}
+    </div>
+  )
+}