Merged in feat/SW-1532-startpage-cardgrid-optional-link (pull request #2635)

feat(SW-1532): add optional link to start page card grid

* feat(SW-1532): add optional link to start page card grid


Approved-by: Erik Tiekstra

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

@@ -38,6 +38,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
         preamble={cards_grid.preamble}
         headingAs="h3"
         headingLevel="h2"
+        link={cards_grid.link}
       />
       <Grids.Stackable columns={columns}>
         {cards_grid.cards.map((card, index) => {

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

@@ -1,6 +1,6 @@
 import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget"
 import Image from "@scandic-hotels/design-system/Image"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
 import { getStartPage } from "@/lib/trpc/memoizedRequests"
@@ -31,9 +31,11 @@ export default async function StartPage({
     <div className={styles.background}>
       <header className={styles.header}>
         <div className={styles.headerContent}>
-          <Title color="white" textAlign="center">
+          {header.heading.length ? (
-            {header.heading}
+            <Typography variant="Title/lg">
-          </Title>
+              <h1>{header.heading}</h1>
+            </Typography>
+          ) : null}
           <FloatingBookingWidget booking={booking} lang={lang} />
         </div>
         {header.hero_image ? (

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

@@ -20,6 +20,7 @@
 }
 
 .headerContent {
+  color: var(--Text-Inverted);
   position: absolute;
   inset: 0;
   z-index: 1;

packages/trpc/lib/graphql/Fragments/Blocks/CardsGrid.graphql

@@ -8,6 +8,29 @@
 #import "./Refs/LoyaltyCard.graphql"
 #import "./Refs/TeaserCard.graphql"
 
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/CampaignOverviewPageLink.graphql"
+#import "../PageLink/CampaignPageLink.graphql"
+#import "../PageLink/CollectionPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/DestinationCityPageLink.graphql"
+#import "../PageLink/DestinationCountryPageLink.graphql"
+#import "../PageLink/DestinationOverviewPageLink.graphql"
+#import "../PageLink/HotelPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+#import "../PageLink/StartPageLink.graphql"
+
+#import "../AccountPage/Ref.graphql"
+#import "../CampaignOverviewPage/Ref.graphql"
+#import "../CampaignPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../HotelPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+#import "../CollectionPage/Ref.graphql"
+#import "../DestinationCityPage/Ref.graphql"
+#import "../DestinationCountryPage/Ref.graphql"
+#import "../DestinationOverviewPage/Ref.graphql"
+
 fragment CardsGrid_ContentPage on ContentPageBlocksCardsGrid {
   cards_grid {
     layout
@@ -122,6 +145,33 @@ fragment CardsGrid_StartPage on StartPageBlocksCardsGrid {
         }
       }
     }
+    link {
+      cta_text
+      is_contentstack_link
+      open_in_new_tab
+      external_link {
+        href
+        title
+      }
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...CampaignOverviewPageLink
+            ...CampaignPageLink
+            ...CollectionPageLink
+            ...ContentPageLink
+            ...DestinationCityPageLink
+            ...DestinationCountryPageLink
+            ...DestinationOverviewPageLink
+            ...HotelPageLink
+            ...LoyaltyPageLink
+            ...StartPageLink
+          }
+        }
+      }
+    }
   }
 }
 
@@ -137,5 +187,25 @@ fragment CardsGrid_StartPageRefs on StartPageBlocksCardsGrid {
         }
       }
     }
+    link {
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageRef
+            ...CampaignOverviewPageRef
+            ...CampaignPageRef
+            ...CollectionPageRef
+            ...ContentPageRef
+            ...DestinationCityPageRef
+            ...DestinationCountryPageRef
+            ...DestinationOverviewPageRef
+            ...HotelPageRef
+            ...LoyaltyPageRef
+            ...StartPageRef
+          }
+        }
+      }
+    }
   }
 }

packages/trpc/lib/routers/contentstack/schemas/blocks/cardsGrid.ts

@@ -75,6 +75,8 @@ export const cardsGridSchema = z.object({
           })
         ),
       }),
+      link: buttonSchema.optional(),
+
       layout: z.nativeEnum(CardsGridLayoutEnum),
       preamble: z.string().optional().default(""),
       theme: z.nativeEnum(scriptedCardThemeEnum).nullable(),
@@ -86,6 +88,10 @@ export const cardsGridSchema = z.object({
         preamble: data.preamble,
         theme: data.theme,
         title: data.title,
+        link:
+          data.link?.href && data.link.title
+            ? { href: data.link.href, text: data.link.title }
+            : undefined,
         cards: data.cardConnection.edges.map((card) => {
           if (card.node.__typename === CardsGridEnum.cards.Card) {
             return transformCardBlock(card.node)
@@ -147,6 +153,7 @@ export const cardGridRefsSchema = z.object({
           })
         ),
       }),
+      link: linkConnectionRefsSchema.optional(),
     })
     .transform((data) => {
       return data.cardConnection.edges