Merged in feat/SW-1391-join-scandic-friends-startpage (pull request #1260)

feat(SW-1391): add join scandic friends block Approved-by: Chuma Mcphoy (We Ahead)
2025-02-06 15:05:06 +00:00
parent 7c8d6cbc2e 053ce3f4de
commit 9fafb33d26
14 changed files with 348 additions and 4 deletions
--- a/components/Blocks/JoinScandicFriends/index.tsx
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -0,0 +1,83 @@
+import { SurpriseIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./joinScandicFriends.module.css"
+
+import type { JoinScandicFriends } from "@/types/trpc/routers/contentstack/startPage"
+
+interface JoinScandicFriendsProps {
+  content: JoinScandicFriends
+}
+
+export default function JoinScandicFriends({
+  content,
+}: JoinScandicFriendsProps) {
+  const { show_header, show_usp, usp, primary_button } = content
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconContainer}>
+        {content.image ? (
+          <Image
+            src={content.image.url}
+            alt={content.image.title}
+            width={384}
+            height={384}
+          />
+        ) : (
+          <SurpriseIcon width={384} height={384} />
+        )}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.textContent}>
+          {show_header ? (
+            <header className={styles.header}>
+              <BiroScript color="red" type="two">
+                {content.scripted_top_title}
+              </BiroScript>
+              <Title level="h3">{content.title}</Title>
+            </header>
+          ) : null}
+
+          <Preamble>{content.preamble}</Preamble>
+
+          {show_usp && usp.length ? (
+            <ul className={styles.usp}>
+              {usp.map((uspBullet) => (
+                <Body asChild key={uspBullet}>
+                  <li>{uspBullet}</li>
+                </Body>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        {content.has_primary_button ? (
+          <div className={styles.buttonContainer}>
+            <Button
+              theme="base"
+              intent="primary"
+              size="small"
+              fullWidth
+              asChild
+            >
+              <Link
+                href={primary_button.href}
+                target={primary_button.openInNewTab ? "_blank" : undefined}
+                color="none"
+                size="regular"
+              >
+                {primary_button.title}
+              </Link>
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
--- a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
+++ b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
@@ -0,0 +1,75 @@
+.container {
+  border-radius: var(--Corner-radius-Large);
+  background-color: var(--Main-Brand-WarmWhite);
+  padding: 0 var(--Spacing-x2);
+  display: flex;
+  gap: var(--Spacing-x5);
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    padding: 0 var(--Spacing-x4) 0 0;
+  }
+}
+
+.iconContainer {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .iconContainer {
+    width: 384px;
+    display: flex; /* gets rid of whitespace */
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x3) 0;
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.header {
+  display: grid;
+  gap: var(--Spacing-x-quarter);
+}
+
+.usp {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .usp {
+    grid-template-columns: repeat(3, 1fr);
+    padding: var(--Spacing-x-one-and-half) 0;
+  }
+}
+
+.usp li {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding-left: var(--Spacing-x1);
+}
+
+.usp li:before {
+  content: url("/_static/icons/heart.svg");
+  position: relative;
+  top: 3px;
+}
+
+@media screen and (min-width: 768px) {
+  .buttonContainer {
+    display: flex;
+    width: 180px;
+  }
+}
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -10,6 +10,7 @@ import { SasTierComparison } from "@/components/SasTierComparison"
 import AccordionSection from "./Accordion"
 import FullWidthCampaign from "./FullWidthCampaign"
 import HotelListing from "./HotelListing"
+import JoinScandicFriends from "./JoinScandicFriends"
 import Table from "./Table"

 import type { BlocksProps } from "@/types/components/blocks"
@@ -104,6 +105,8 @@ export default function Blocks({ blocks }: BlocksProps) {
        return <SasTierComparison content={block.sas_tier_comparison} />
      case BlocksEnums.block.FullWidthCampaign:
        return <FullWidthCampaign content={block.full_width_campaign} />
+      case BlocksEnums.block.JoinScandicFriends:
+        return <JoinScandicFriends content={block.join_scandic_friends} />
      default:
        return null
    }