feat(SW-498): added sitewide alert

2024-10-17 11:23:50 +02:00
parent e41bf86993
commit db9f31e2c3
17 changed files with 226 additions and 85 deletions
@@ -1,69 +1,76 @@
-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 Link from "../Link"
+import AlertSidepeek from "./Sidepeek"
 import { getIconByAlertType } from "./utils"
 import { alertVariants } from "./variants"

 import styles from "./alert.module.css"

-export default async function Alert({
+import type { AlertProps } from "./alert"
+
+export default function Alert({
  className,
  variant,
  type,
  heading,
  text,
-  sidePeekCtaText,
+  link,
+  phoneContact,
+  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>
+    <section className={classNames}>
      <div className={styles.content}>
-        <div className={styles.textWrapper}>
-          {heading ? (
-            <Body className={styles.heading} textTransform="bold" asChild>
-              <h2>{heading}</h2>
+        <span className={styles.iconWrapper}>
+          <Icon className={styles.icon} width={24} height={24} />
+        </span>
+        <div className={styles.innerContent}>
+          <div className={styles.textWrapper}>
+            {heading ? (
+              <Body className={styles.heading} textTransform="bold" asChild>
+                <h2>{heading}</h2>
+              </Body>
+            ) : null}
+            <Body className={styles.text}>
+              {text}
+              {phoneContact?.phoneNumber ? (
+                <>
+                  <span> {phoneContact.displayText} </span>
+                  <Link
+                    color="burgundy"
+                    href={`tel:${phoneContact.phoneNumber}`}
+                  >
+                    {phoneContact.phoneNumber}
+                  </Link>
+                  {phoneContact.footnote ? (
+                    <span>. ({phoneContact.footnote})</span>
+                  ) : null}
+                </>
+              ) : null}
            </Body>
+          </div>
+          {link ? (
+            <Link color="burgundy" href={link.url}>
+              {link.title}
+            </Link>
+          ) : null}
+          {!link && sidepeekCtaText && sidepeekContent ? (
+            <AlertSidepeek
+              ctaText={sidepeekCtaText}
+              sidePeekContent={sidepeekContent}
+            />
          ) : 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>
+    </section>
  )
 }