From e41bf86993a5f1ce494604d394e4a120ce042a60 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 16 Oct 2024 15:18:43 +0200
Subject: [PATCH] feat(SW-498): Added Alert component

---
 .../TempDesignSystem/Alert/alert.module.css   | 106 ++++++++++++++++++
 components/TempDesignSystem/Alert/alert.ts    |  16 +++
 components/TempDesignSystem/Alert/index.tsx   |  69 ++++++++++++
 components/TempDesignSystem/Alert/utils.ts    |  17 +++
 components/TempDesignSystem/Alert/variants.ts |  20 ++++
 types/trpc/routers/contentstack/siteConfig.ts |   1 +
 6 files changed, 229 insertions(+)
 create mode 100644 components/TempDesignSystem/Alert/alert.module.css
 create mode 100644 components/TempDesignSystem/Alert/alert.ts
 create mode 100644 components/TempDesignSystem/Alert/index.tsx
 create mode 100644 components/TempDesignSystem/Alert/utils.ts
 create mode 100644 components/TempDesignSystem/Alert/variants.ts

diff --git a/components/TempDesignSystem/Alert/alert.module.css b/components/TempDesignSystem/Alert/alert.module.css
new file mode 100644
index 000000000..f5ba2f58a
--- /dev/null
+++ b/components/TempDesignSystem/Alert/alert.module.css
@@ -0,0 +1,106 @@
+.alert {
+  display: flex;
+  gap: var(--Spacing-x2);
+  overflow: hidden;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
+    var(--Spacing-x-one-and-half) 0;
+  flex-grow: 1;
+}
+
+.textWrapper {
+  display: grid;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1) 0;
+}
+
+.sidepeekCta {
+  flex-shrink: 0;
+}
+
+.closeButton {
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* Intent: inline */
+.inline {
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+.inline .iconWrapper {
+  padding: var(--Spacing-x-one-and-half);
+}
+.inline.alarm .iconWrapper {
+  background-color: var(--Main-Red-70);
+}
+.inline.warning .iconWrapper {
+  background-color: var(--Main-Yellow-60);
+}
+.inline.info .iconWrapper {
+  background-color: var(--Scandic-Blue-70);
+}
+.inline .icon,
+.inline .icon * {
+  fill: var(--Base-Surface-Primary-light-Normal);
+}
+.inline .closeButton {
+  border-left: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x-one-and-half);
+}
+
+/* Intent: banner */
+.banner {
+  padding: 0 var(--Spacing-x5);
+  border-left-width: 6px;
+  border-left-style: solid;
+}
+.banner.alarm {
+  border-left-color: var(--Main-Red-70);
+  background-color: var(--Main-Red-00);
+}
+.banner.warning {
+  border-left-color: var(--Main-Yellow-60);
+  background-color: var(--Main-Yellow-00);
+}
+.banner.info {
+  border-left-color: var(--Scandic-Blue-70);
+  background-color: var(--Scandic-Blue-00);
+}
+.banner.alarm .icon,
+.banner.alarm .icon * {
+  fill: var(--Main-Red-70);
+}
+.banner.warning .icon,
+.banner.warning .icon * {
+  fill: var(--Main-Yellow-60);
+}
+.banner.info .icon,
+.banner.info .icon * {
+  fill: var(--Scandic-Blue-70);
+}
+
+.banner .closeButton {
+  align-self: center;
+  padding-left: var(--Spacing-x-one-and-half);
+}
diff --git a/components/TempDesignSystem/Alert/alert.ts b/components/TempDesignSystem/Alert/alert.ts
new file mode 100644
index 000000000..95fec9d08
--- /dev/null
+++ b/components/TempDesignSystem/Alert/alert.ts
@@ -0,0 +1,16 @@
+import { alertVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+import type { SidepeekContent } from "@/types/trpc/routers/contentstack/siteConfig"
+
+export interface AlertProps extends VariantProps<typeof alertVariants> {
+  className?: string
+  type: AlertTypeEnum
+  closeable?: boolean
+  heading?: string
+  text: string
+  sidepeekContent?: SidepeekContent | null
+  sidePeekCtaText?: string | null
+}
diff --git a/components/TempDesignSystem/Alert/index.tsx b/components/TempDesignSystem/Alert/index.tsx
new file mode 100644
index 000000000..57bd0c5c1
--- /dev/null
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -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>
+  )
+}
diff --git a/components/TempDesignSystem/Alert/utils.ts b/components/TempDesignSystem/Alert/utils.ts
new file mode 100644
index 000000000..06fc9bcfd
--- /dev/null
+++ b/components/TempDesignSystem/Alert/utils.ts
@@ -0,0 +1,17 @@
+import { InfoCircleIcon } from "@/components/Icons"
+import CrossCircleIcon from "@/components/Icons/CrossCircle"
+import WarningTriangleIcon from "@/components/Icons/WarningTriangle"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export function getIconByAlertType(alertType: AlertTypeEnum) {
+  switch (alertType) {
+    case AlertTypeEnum.Alarm:
+      return CrossCircleIcon
+    case AlertTypeEnum.Warning:
+      return WarningTriangleIcon
+    case AlertTypeEnum.Info:
+    default:
+      return InfoCircleIcon
+  }
+}
diff --git a/components/TempDesignSystem/Alert/variants.ts b/components/TempDesignSystem/Alert/variants.ts
new file mode 100644
index 000000000..91087f17b
--- /dev/null
+++ b/components/TempDesignSystem/Alert/variants.ts
@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./alert.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export const alertVariants = cva(styles.alert, {
+  variants: {
+    variant: {
+      inline: styles.inline,
+      banner: styles.banner,
+    },
+    type: {
+      [AlertTypeEnum.Info]: styles.info,
+      [AlertTypeEnum.Warning]: styles.warning,
+      [AlertTypeEnum.Alarm]: styles.alarm,
+    },
+  },
+  defaultVariants: {},
+})
diff --git a/types/trpc/routers/contentstack/siteConfig.ts b/types/trpc/routers/contentstack/siteConfig.ts
index 8dc553cb2..7c4160203 100644
--- a/types/trpc/routers/contentstack/siteConfig.ts
+++ b/types/trpc/routers/contentstack/siteConfig.ts
@@ -12,3 +12,4 @@ export type GetSiteConfigData = z.input<typeof siteConfigSchema>
 export type SiteConfig = z.output<typeof siteConfigSchema>
 
 export type Alert = z.output<typeof alertSchema>
+export type SidepeekContent = Alert["sidepeekContent"]