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/essentials.module.css

@@ -0,0 +1,108 @@
+.essentialsSection {
+  display: grid;
+  gap: var(--Space-x5);
+}
+
+.header {
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.heading {
+  color: var(--Text-Heading);
+}
+
+.list {
+  list-style: none;
+  display: grid;
+  grid-auto-rows: auto;
+  row-gap: var(--Space-x15);
+}
+
+.listItem {
+  position: relative;
+  display: grid;
+  gap: 19px; /* Special from Figma */
+  color: var(--Text-Secondary);
+  justify-items: center;
+  padding: 0 var(--Space-x1);
+
+  &::after {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    content: "";
+    width: 1px;
+    background-color: var(--Border-Default);
+    height: 82px; /* Special from Figma */
+  }
+}
+
+.text {
+  display: grid;
+  gap: var(--Space-x1);
+  justify-items: center;
+}
+
+@media screen and (max-width: 949px) {
+  .list {
+    grid-template-columns: repeat(2, 1fr);
+
+    .listItem:nth-child(2n)::after {
+      display: none;
+    }
+  }
+}
+
+@media screen and (min-width: 950px) and (max-width: 1366px) {
+  .list {
+    grid-template-columns: repeat(4, 1fr);
+
+    &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
+      display: none;
+    }
+
+    &.count3,
+    &.count5,
+    &.count6 {
+      grid-template-columns: repeat(3, 1fr);
+
+      .listItem:nth-child(3n)::after {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .list {
+    grid-template-columns: repeat(4, 1fr);
+
+    &:not(.count3, .count5, .count6) .listItem:nth-child(4n)::after {
+      display: none;
+    }
+
+    &.count3 {
+      grid-template-columns: repeat(3, 1fr);
+
+      .listItem:nth-child(3n)::after {
+        display: none;
+      }
+    }
+    &.count5 {
+      grid-template-columns: repeat(5, 1fr);
+
+      .listItem:nth-child(5n)::after {
+        display: none;
+      }
+    }
+    &.count6 {
+      grid-template-columns: repeat(6, 1fr);
+
+      .listItem:nth-child(6n)::after {
+        display: none;
+      }
+    }
+  }
+}

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>
+  )
+}

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

@@ -10,6 +10,7 @@ import JsonToHtml from "@/components/JsonToHtml"
 
 import AccordionSection from "./Accordion"
 import CardGallery from "./CardGallery"
+import Essentials from "./Essentials"
 import FullWidthCampaign from "./FullWidthCampaign"
 import HotelListing from "./HotelListing"
 import JoinScandicFriends from "./JoinScandicFriends"
@@ -112,6 +113,8 @@ export default function Blocks({ blocks }: BlocksProps) {
             <JoinScandicFriends content={block.join_scandic_friends} />
           </Suspense>
         )
+      case BlocksEnums.block.Essentials:
+        return <Essentials content={block.essentials} />
       default:
         return null
     }