feat(SW-2285): Added campaign essentials block on campaign page

Approved-by: Christian Andolf
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/Essentials/index.tsx

@@ -0,0 +1,53 @@
+import { cx } from "class-variance-authority"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import IconByCSSelect from "@/components/Icons/IconByCSSelect"
+
+import styles from "./essentials.module.css"
+
+import type { EssentialsBlock } from "@/types/trpc/routers/contentstack/campaignPage"
+
+interface EssentialsProps {
+  content: EssentialsBlock
+}
+
+export default async function Essentials({ content }: EssentialsProps) {
+  const { title, preamble, items } = content
+
+  return (
+    <section className={styles.essentialsSection}>
+      <header className={styles.header}>
+        <Typography variant="Title/sm">
+          <h3 className={styles.heading}>{title}</h3>
+        </Typography>
+        {preamble ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{preamble}</p>
+          </Typography>
+        ) : null}
+      </header>
+      <ul className={cx(styles.list, styles[`count${items.length}`])}>
+        {items.map((item) => (
+          <li
+            key={`${item.label}-${item.icon_identifier}`}
+            className={styles.listItem}
+          >
+            <IconByCSSelect identifier={item.icon_identifier} size={42} />
+
+            <div className={styles.text}>
+              <Typography variant="Title/Overline/sm">
+                <span>{item.label}</span>
+              </Typography>
+              {item.description ? (
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <span>{item.description}</span>
+                </Typography>
+              ) : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}