fix(BOOK-204): Added dynamic h1 to startpage

Approved-by: Christel Westerberg

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

@@ -5,16 +5,28 @@ import {
 
 import InfoCard from "@/components/ContentType/StartPage/InfoCard"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
 
-import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
+import type { CardsGrid as CardsGridBlock } from "@scandic-hotels/trpc/types/blocks"
+import type { VariantProps } from "class-variance-authority"
+
+import type { headingVariants } from "@/components/Section/Header/headingVariants"
 import type { StackableGridProps } from "../TempDesignSystem/Grids/Stackable/stackable"
 
-export default function CardsGrid({ cards_grid }: CardsGridProps) {
+interface CardsGridProps extends Pick<CardsGridBlock, "cards_grid"> {
+  headingLevel?: "h1" | "h2"
+  headingTypography?: VariantProps<typeof headingVariants>["typography"]
+}
+
+export default function CardsGrid({
+  cards_grid,
+  headingLevel = "h2",
+  headingTypography = "Title/sm",
+}: CardsGridProps) {
   let columns: StackableGridProps["columns"]
 
   switch (cards_grid.layout) {
@@ -34,10 +46,10 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
   return (
     <Section>
       <SectionHeader
-        title={cards_grid.title}
+        heading={cards_grid.title}
         preamble={cards_grid.preamble}
-        headingAs="h3"
+        headingLevel={headingLevel}
-        headingLevel="h2"
+        typography={headingTypography}
         link={cards_grid.link}
       />
       <Grids.Stackable columns={columns}>

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

@@ -5,15 +5,27 @@ import { useState } from "react"
 import { Carousel } from "@/components/Carousel"
 import ContentCard from "@/components/ContentCard"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import TabFilters from "@/components/TabFilters"
 
 import styles from "./carouselCards.module.css"
 
-import type { CarouselCardsProps } from "@/types/components/blocks/carouselCards"
+import type { CarouselCards as CarouselCardsBlock } from "@scandic-hotels/trpc/types/blocks"
+import type { VariantProps } from "class-variance-authority"
 
-export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
+import type { headingVariants } from "@/components/Section/Header/headingVariants"
+
+interface CarouselCardsProps
+  extends Pick<CarouselCardsBlock, "carousel_cards"> {
+  headingLevel?: "h1" | "h2"
+  headingTypography?: VariantProps<typeof headingVariants>["typography"]
+}
+export default function CarouselCards({
+  carousel_cards,
+  headingLevel = "h2",
+  headingTypography = "Title/sm",
+}: CarouselCardsProps) {
   const {
     heading,
     preamble,
@@ -37,10 +49,10 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
   return (
     <Section>
       <SectionHeader
-        title={heading}
+        heading={heading}
         preamble={preamble}
-        headingLevel="h2"
+        headingLevel={headingLevel}
-        headingAs="h3"
+        typography={headingTypography}
         link={link}
       />
       {filterCategories.length > 0 && activeFilter && (

apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css

@@ -2,32 +2,27 @@
   position: relative;
   overflow: hidden;
   height: 100vh;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.36) 50%,
+      rgba(0, 0, 0, 0.75) 100%
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
 }
+
 .bodyText {
   text-align: center;
   color: var(--Base-Text-Inverted);
 }
 
-.container::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.36) 50%,
-    rgba(0, 0, 0, 0.75) 100%
-  );
-  pointer-events: none;
-  z-index: 1;
-}
-
-@media screen and (min-width: 768px) {
-  .container {
-    height: 880px;
-  }
-}
-
 .content {
   position: absolute;
   inset: 0;
@@ -54,16 +49,10 @@
   gap: var(--Space-x1);
 }
 
-.buttonWrapper {
+.button {
   min-width: 180px;
 }
 
-@media screen and (max-width: 767px) {
-  .buttonWrapper:not(:only-child) {
-    min-width: 135px;
-  }
-}
-
 .image {
   max-width: 100%;
   height: 100%;
@@ -73,3 +62,15 @@
 .scriptedText {
   display: inline-block;
 }
+
+@media screen and (max-width: 767px) {
+  .button:not(:only-child) {
+    min-width: 135px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    height: 880px;
+  }
+}

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

@@ -1,7 +1,5 @@
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -12,10 +10,15 @@ import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startP
 
 interface FullWidthCampaignProps {
   content: FullWidthCampaign
+  headingLevel?: "h1" | "h2"
 }
 
-export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
+export default function FullWidthCampaign({
+  content,
+  headingLevel = "h2",
+}: FullWidthCampaignProps) {
   const { background_image, primary_button, secondary_button } = content
+  const Hx = headingLevel
 
   return (
     <div className={styles.container}>
@@ -36,53 +39,38 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
           </BiroScript>
         </div>
         <div className={styles.mainContent}>
-          <Title
+          <Typography variant="Title/mdLowCase">
-            color="baseText"
+            <Hx className={styles.bodyText}>{content.heading}</Hx>
-            textAlign="center"
+          </Typography>
-            textTransform="capitalize"
+          <Typography variant="Body/Lead text">
-            level="h3"
+            <p className={styles.bodyText}>{content.body_text}</p>
-          >
-            {content.heading}
-          </Title>
-          <Typography className={styles.bodyText} variant="Body/Lead text">
-            <p>{content.body_text}</p>
           </Typography>
           <div className={styles.buttons}>
             {content.has_primary_button ? (
-              <Button
+              <ButtonLink
-                intent="inverted"
+                href={primary_button.href}
-                size="small"
+                target={primary_button.openInNewTab ? "_blank" : undefined}
-                theme="base"
+                variant="Primary"
-                asChild
+                color="Inverted"
-                className={styles.buttonWrapper}
+                size="Small"
-                fullWidth
+                typography="Body/Supporting text (caption)/smBold"
+                className={styles.button}
               >
-                <Link
+                {primary_button.title}
-                  href={primary_button.href}
+              </ButtonLink>
-                  target={primary_button.openInNewTab ? "_blank" : undefined}
-                  color="none"
-                >
-                  {primary_button.title}
-                </Link>
-              </Button>
             ) : null}
             {content.has_secondary_button ? (
-              <Button
+              <ButtonLink
-                intent="secondary"
+                href={secondary_button.href}
-                size="small"
+                target={secondary_button.openInNewTab ? "_blank" : undefined}
-                theme="primaryStrong"
+                variant="Secondary"
-                className={styles.buttonWrapper}
+                size="Small"
-                asChild
+                color="Inverted"
-                fullWidth
+                className={styles.button}
+                typography="Body/Supporting text (caption)/smBold"
               >
-                <Link
+                {secondary_button.title}
-                  href={secondary_button.href}
+              </ButtonLink>
-                  target={secondary_button.openInNewTab ? "_blank" : undefined}
-                  color="none"
-                >
-                  {secondary_button.title}
-                </Link>
-              </Button>
             ) : null}
           </div>
         </div>

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

@@ -11,10 +11,12 @@ import type { JoinScandicFriends } from "@/types/trpc/routers/contentstack/start
 
 interface JoinScandicFriendsProps {
   content: JoinScandicFriends
+  headingLevel?: "h1" | "h2"
 }
 
 export default async function JoinScandicFriends({
   content,
+  headingLevel = "h2",
 }: JoinScandicFriendsProps) {
   const isLoggedIn = await isLoggedInUser()
   if (isLoggedIn) {
@@ -22,6 +24,7 @@ export default async function JoinScandicFriends({
   }
 
   const { show_header, show_usp, usp, primary_button } = content
+  const Hx = headingLevel
 
   return (
     <div className={styles.container}>
@@ -49,7 +52,7 @@ export default async function JoinScandicFriends({
                 </Typography>
               ) : null}
               <Typography variant="Title/xs">
-                <h2 className={styles.heading}>{content.title}</h2>
+                <Hx className={styles.heading}>{content.title}</Hx>
               </Typography>
             </header>
           ) : null}

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

@@ -1,5 +1,3 @@
-import { Suspense } from "react"
-
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
@@ -13,9 +11,7 @@ import UspGrid from "@/components/Blocks/UspGrid"
 import AccordionSection from "./Accordion"
 import CardGallery from "./CardGallery"
 import Essentials from "./Essentials"
-import FullWidthCampaign from "./FullWidthCampaign"
 import HotelListing from "./HotelListing"
-import JoinScandicFriends from "./JoinScandicFriends"
 import Table from "./Table"
 
 import type { BlocksProps } from "@/types/components/blocks"
@@ -107,14 +103,6 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.UspGrid:
         return <UspGrid usp_grid={block.usp_grid} />
-      case BlocksEnums.block.FullWidthCampaign:
-        return <FullWidthCampaign content={block.full_width_campaign} />
-      case BlocksEnums.block.JoinScandicFriends:
-        return (
-          <Suspense>
-            <JoinScandicFriends content={block.join_scandic_friends} />
-          </Suspense>
-        )
       case BlocksEnums.block.Essentials:
         return <Essentials content={block.essentials} />
       default:

apps/scandic-web/components/ContentType/StartPage/Blocks/blocks.module.css

@@ -0,0 +1,17 @@
+.block {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--max-width-content);
+  width: 100%;
+
+  &:empty {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .block {
+    padding-left: var(--Space-x5);
+    padding-right: var(--Space-x5);
+  }
+}

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

@@ -0,0 +1,62 @@
+import { Suspense } from "react"
+
+import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
+
+import CardsGrid from "@/components/Blocks/CardsGrid"
+import CarouselCards from "@/components/Blocks/CarouselCards"
+import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
+import JoinScandicFriends from "@/components/Blocks/JoinScandicFriends"
+
+import styles from "./blocks.module.css"
+
+import type { Block as StartPageBlock } from "@scandic-hotels/trpc/routers/contentstack/startPage/query"
+
+interface BlocksProps {
+  blocks: StartPageBlock[]
+}
+
+export function Blocks({ blocks }: BlocksProps) {
+  return blocks.map((block, idx) => {
+    const headingLevel = idx === 0 ? "h1" : "h2"
+
+    switch (block.typename) {
+      case BlocksEnums.block.CardsGrid:
+        return (
+          <div key={`${block.typename}-${idx}`} className={styles.block}>
+            <CardsGrid
+              cards_grid={block.cards_grid}
+              headingLevel={headingLevel}
+              headingTypography="Title/md"
+            />
+          </div>
+        )
+      case BlocksEnums.block.CarouselCards:
+        return (
+          <div key={`${block.typename}-${idx}`} className={styles.block}>
+            <CarouselCards
+              carousel_cards={block.carousel_cards}
+              headingLevel={headingLevel}
+              headingTypography="Title/md"
+            />
+          </div>
+        )
+      case BlocksEnums.block.FullWidthCampaign:
+        return (
+          <FullWidthCampaign
+            content={block.full_width_campaign}
+            headingLevel={headingLevel}
+          />
+        )
+      case BlocksEnums.block.JoinScandicFriends:
+        return (
+          <Suspense>
+            <div key={`${block.typename}-${idx}`} className={styles.block}>
+              <JoinScandicFriends content={block.join_scandic_friends} />
+            </div>
+          </Suspense>
+        )
+      default:
+        return null
+    }
+  })
+}

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

@@ -2,13 +2,11 @@ import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidge
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
-import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
 import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
 import { getStartPage } from "@/lib/trpc/memoizedRequests"
 
-import Blocks from "@/components/Blocks"
+import { Blocks } from "@/components/ContentType/StartPage/Blocks"
-import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
 import { getLang } from "@/i18n/serverContext"
 
 import styles from "./startPage.module.css"
@@ -34,7 +32,7 @@ export default async function StartPage({
         <div className={styles.headerContent}>
           {header.heading.length ? (
             <Typography variant="Title/lg">
-              <h1>{header.heading}</h1>
+              <p className={styles.heading}>{header.heading}</p>
             </Typography>
           ) : null}
           <FloatingBookingWidget
@@ -60,22 +58,7 @@ export default async function StartPage({
       </header>
 
       <main className={styles.main}>
-        {blocks.map((block, index) => {
+        <Blocks blocks={blocks} />
-          if (block.typename === BlocksEnums.block.FullWidthCampaign) {
-            return (
-              <FullWidthCampaign
-                key={block.typename}
-                content={block.full_width_campaign}
-              />
-            )
-          }
-
-          return (
-            <div key={`${block.typename}-${index}`} className={styles.section}>
-              <Blocks blocks={[block]} />
-            </div>
-          )
-        })}
       </main>
       <TrackingSDK pageData={content.tracking} />
     </>

apps/scandic-web/components/ContentType/StartPage/startPage.module.css

@@ -1,17 +1,17 @@
 .header {
   height: 560px;
   position: relative;
-}
 
-.header:after {
+  &::after {
-  content: "";
+    content: "";
-  background: linear-gradient(
+    background: linear-gradient(
-    182deg,
+      182deg,
-    rgba(38, 32, 30, 0.08) 13%,
+      rgba(38, 32, 30, 0.08) 13%,
-    rgba(77, 0, 27, 0.4) 100%
+      rgba(77, 0, 27, 0.4) 100%
-  );
+    );
-  position: absolute;
+    position: absolute;
-  inset: 0;
+    inset: 0;
+  }
 }
 
 .headerContent {
@@ -26,10 +26,8 @@
   padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
 }
 
-@media screen and (min-width: 768px) {
+.heading {
-  .headerContent {
+  z-index: 1;
-    grid-gap: var(--Space-x4);
-  }
 }
 
 .topImage {
@@ -42,23 +40,12 @@
   padding: calc(var(--Space-x5) * 2) 0 calc(var(--Space-x5) * 4);
 }
 
-.section:empty {
-  display: none;
-}
-
-.section {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--max-width-content);
-  width: 100%;
-}
-
 @media screen and (min-width: 768px) {
+  .headerContent {
+    grid-gap: var(--Space-x4);
+  }
+
   .main {
     gap: calc(var(--Space-x5) + var(--Space-x4));
   }
-  .section {
-    padding-left: var(--Space-x5);
-    padding-right: var(--Space-x5);
-  }
 }

apps/scandic-web/components/Section/Header/index.tsx

@@ -15,7 +15,7 @@ interface SectionHeaderProps
     VariantProps<typeof headingVariants> {
   heading?: string
   headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
-  preamble?: string
+  preamble?: string | null
   link?: {
     href: string
     text: string

apps/scandic-web/types/components/blocks/cardsGrid.ts

@@ -1,3 +0,0 @@
-import type { CardsGrid } from "@scandic-hotels/trpc/types/blocks"
-
-export interface CardsGridProps extends Pick<CardsGrid, "cards_grid"> {}

apps/scandic-web/types/components/blocks/carouselCards.ts

@@ -1,4 +0,0 @@
-import type { CarouselCards } from "@scandic-hotels/trpc/types/blocks"
-
-export interface CarouselCardsProps
-  extends Pick<CarouselCards, "carousel_cards"> {}

apps/scandic-web/types/components/blocks/index.ts

@@ -1,4 +1,3 @@
-import type { Block as StartPageBlock } from "@scandic-hotels/trpc/routers/contentstack/startPage/query"
 import type { Block as AccountPageBlock } from "@scandic-hotels/trpc/types/accountPage"
 import type { Block as CampaignOverviewPageBlock } from "@scandic-hotels/trpc/types/campaignOverviewPage"
 import type { Block as CampaignPageBlock } from "@scandic-hotels/trpc/types/campaignPage"
@@ -20,7 +19,6 @@ type Blocks =
   | DestinationCountryPageBlock
   | DestinationOverviewPageBlock
   | LoyaltyPageBlock
-  | StartPageBlock
   | PromoCampaignPageBlock
 
 export interface BlocksProps {