web/packages/design-system/lib/components/Alert/index.tsx

"use client"

import { Button } from "../Button"
import { MaterialIcon } from "../Icons/MaterialIcon"
import Link from "../OldDSLink"
import { Typography } from "../Typography"

import AlertSidepeek from "./Sidepeek"
import { IconByAlertType } from "./utils"
import { alertVariants } from "./variants"

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

import type { AlertProps } from "./alert"

export function Alert({
  className,
  variant,
  type,
  heading,
  text,
  link,
  close,
  phoneContact,
  sidepeekCtaText,
  sidepeekContent,
  ariaLive,
  ariaRole,
  slot,
}: AlertProps) {
  const classNames = alertVariants({
    className,
    variant,
    type,
  })

  if (!text && !heading) {
    return null
  }
  return (
    <section className={classNames} role={ariaRole} aria-live={ariaLive}>
      <div className={styles.content}>
        <span className={styles.iconWrapper}>
          <IconByAlertType
            alertType={type}
            className={styles.icon}
            variant={variant}
          />
        </span>
        <div className={styles.innerContent}>
          <div className={styles.textWrapper}>
            {heading ? (
              <Typography variant="Body/Paragraph/mdBold">
                <h2>{heading}</h2>
              </Typography>
            ) : null}
            {text ? (
              <Typography variant="Body/Paragraph/mdRegular">
                <p>
                  {text}
                  {phoneContact?.phoneNumber ? (
                    <>
                      <span> {phoneContact.displayText} </span>
                      <Link
                        href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
                      >
                        {phoneContact.phoneNumber}
                      </Link>
                      {phoneContact.footnote ? (
                        <>
                          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                          <span>. ({phoneContact.footnote})</span>
                        </>
                      ) : null}
                    </>
                  ) : null}
                </p>
              </Typography>
            ) : null}
          </div>

          {link ? (
            <Link
              textDecoration="underline"
              href={link.url}
              keepSearchParams={link.keepSearchParams}
            >
              {link.title}
            </Link>
          ) : null}
          {!link && sidepeekCtaText && sidepeekContent ? (
            <AlertSidepeek
              ctaText={sidepeekCtaText}
              sidePeekContent={sidepeekContent}
            />
          ) : null}
          {slot}
        </div>
        {close ? (
          <Button onPress={close} variant="Text" className={styles.closeButton}>
            <MaterialIcon icon="close" color="CurrentColor" />
          </Button>
        ) : null}
      </div>
    </section>
  )
}