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
     }

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

@@ -0,0 +1,17 @@
+import Essentials from "@/components/Blocks/Essentials"
+
+import type { BlocksProps } from "@/types/components/blocks"
+import { BlocksEnums } from "@/types/enums/blocks"
+
+export default function Blocks({ blocks }: BlocksProps) {
+  return blocks.map(async (block) => {
+    switch (block.typename) {
+      case BlocksEnums.block.Essentials:
+        return (
+          <Essentials key={block.essentials.title} content={block.essentials} />
+        )
+      default:
+        return null
+    }
+  })
+}

apps/scandic-web/components/ContentType/CampaignPage/index.tsx

@@ -6,6 +6,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getCampaignPage } from "@/lib/trpc/memoizedRequests"
 
+import Blocks from "./Blocks"
 import CampaignPageSkeleton from "./CampaignPageSkeleton"
 
 import styles from "./campaignPage.module.css"
@@ -18,7 +19,7 @@ export default async function CampaignPage() {
   }
 
   const { campaignPage } = pageData
-  const { heading, subheading, preamble } = campaignPage
+  const { heading, subheading, preamble, blocks } = campaignPage
 
   return (
     <>
@@ -52,6 +53,7 @@ export default async function CampaignPage() {
               </div>
             </Typography>
           </div>
+          {blocks ? <Blocks blocks={blocks} /> : null}
         </div>
       </Suspense>
       {/* <TrackingSDK pageData={tracking} /> */}

apps/scandic-web/components/Icons/IconByCSSelect.tsx

@@ -6,19 +6,26 @@ import {
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon"
 
-interface FilterIconProps {
+import type { IconProps } from "@scandic-hotels/design-system/Icons"
+
+interface IconByCSSelectProps extends IconProps {
   identifier: string
 }
 
-export default function FilterIcon({ identifier }: FilterIconProps) {
+export default function IconByCSSelect({
+  identifier,
+  color = "CurrentColor",
+  size = 24,
+  ...props
+}: IconByCSSelectProps) {
   switch (identifier) {
     // These are custom icons
     case "discount-2-2":
-      return <DiscountIcon size={24} color="CurrentColor" />
+      return <DiscountIcon size={size} color={color} {...props} />
     case "bouquet":
-      return <BouquetIcon size={24} color="CurrentColor" />
+      return <BouquetIcon size={size} color={color} {...props} />
     case "palm_tree":
-      return <PalmTreeIcon size={24} color="CurrentColor" />
+      return <PalmTreeIcon size={size} color={color} {...props} />
 
     // These are all Material Icons
     case "electric_car":
@@ -72,10 +79,14 @@ export default function FilterIcon({ identifier }: FilterIconProps) {
       return (
         <MaterialIcon
           icon={identifier as MaterialIconProps["icon"]}
-          color="CurrentColor"
+          size={size}
+          color={color}
+          {...props}
         />
       )
     default:
-      return <MaterialIcon icon="favorite" color="CurrentColor" />
+      return (
+        <MaterialIcon size={size} icon="favorite" color={color} {...props} />
+      )
   }
 }

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

@@ -6,7 +6,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useScrollShadows from "@/hooks/useScrollShadows"
 
-import FilterIcon from "./FilterIcon"
+import IconByCSSelect from "../Icons/IconByCSSelect"
 
 import styles from "./tabFilters.module.css"
 
@@ -51,7 +51,7 @@ export default function TabFilters({
               })}
               type="button"
             >
-              <FilterIcon identifier={category.iconIdentifier} />
+              <IconByCSSelect identifier={category.iconIdentifier} />
               {category.label}
             </button>
           </Typography>