75a377b59e
chore(SW-3145): Move Body component to design-system * Move Body component to design-system Approved-by: Joakim Jäderberg
104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import Body from "@scandic-hotels/design-system/Body"
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import Link from "../Link"
|
|
import AlertSidepeek from "./Sidepeek"
|
|
import { IconByAlertType } 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,
|
|
close,
|
|
phoneContact,
|
|
sidepeekCtaText,
|
|
sidepeekContent,
|
|
ariaLive,
|
|
ariaRole,
|
|
}: 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 ? (
|
|
<Body textTransform="bold" asChild>
|
|
<h2>{heading}</h2>
|
|
</Body>
|
|
) : null}
|
|
{text ? (
|
|
<Body>
|
|
{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}
|
|
</Body>
|
|
) : 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}
|
|
</div>
|
|
{close ? (
|
|
<Button onPress={close} variant="Text" className={styles.closeButton}>
|
|
<MaterialIcon icon="close" color="CurrentColor" />
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|