93187a9c33
feat(SW-1751): Added alert if no results are found, also implemented default location data from Contentstack * feat(SW-1751): Added alert if no results are found, also implemented default location data from Contentstack Approved-by: Matilda Landström
91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import Link from "../Link"
|
|
import AlertSidepeek from "./Sidepeek"
|
|
import { getIconByAlertType } from "./utils"
|
|
import { alertVariants } from "./variants"
|
|
|
|
import styles from "./alert.module.css"
|
|
|
|
import type { AlertProps } from "./alert"
|
|
|
|
export default function Alert({
|
|
className,
|
|
variant,
|
|
type,
|
|
heading,
|
|
text,
|
|
link,
|
|
phoneContact,
|
|
sidepeekCtaText,
|
|
sidepeekContent,
|
|
ariaLive,
|
|
ariaRole,
|
|
}: AlertProps) {
|
|
const classNames = alertVariants({
|
|
className,
|
|
variant,
|
|
type,
|
|
})
|
|
const Icon = getIconByAlertType(type)
|
|
|
|
if (!text && !heading) {
|
|
return null
|
|
}
|
|
return (
|
|
<section className={classNames} role={ariaRole} aria-live={ariaLive}>
|
|
<div className={styles.content}>
|
|
<span className={styles.iconWrapper}>
|
|
<Icon className={styles.icon} width={24} height={24} />
|
|
</span>
|
|
<div className={styles.innerContent}>
|
|
<div className={styles.textWrapper}>
|
|
{heading ? (
|
|
<Body textTransform="bold" asChild>
|
|
<h2>{heading}</h2>
|
|
</Body>
|
|
) : null}
|
|
{text ? (
|
|
<Body>
|
|
{text}
|
|
{phoneContact?.phoneNumber ? (
|
|
<>
|
|
<span> {phoneContact.displayText} </span>
|
|
<Link
|
|
color="burgundy"
|
|
href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
|
|
>
|
|
{phoneContact.phoneNumber}
|
|
</Link>
|
|
{phoneContact.footnote ? (
|
|
<span>. ({phoneContact.footnote})</span>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</Body>
|
|
) : null}
|
|
</div>
|
|
{link ? (
|
|
<Link
|
|
color="burgundy"
|
|
textDecoration="underline"
|
|
href={link.url}
|
|
keepSearchParams={link.keepSearchParams}
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
) : null}
|
|
{!link && sidepeekCtaText && sidepeekContent ? (
|
|
<AlertSidepeek
|
|
ctaText={sidepeekCtaText}
|
|
sidePeekContent={sidepeekContent}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|