Merged in feat/SW-1430-cta-button (pull request #1290)

Feat(SW-1430): Add header button on static pages

Approved-by: Erik Tiekstra

components/ContentType/StaticPages/index.tsx

@@ -1,9 +1,11 @@
+import Link from "next/link"
 import { Suspense } from "react"
 
 import Blocks from "@/components/Blocks"
 import Hero from "@/components/Hero"
 import Sidebar from "@/components/Sidebar"
 import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
+import Button from "@/components/TempDesignSystem/Button"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -33,6 +35,19 @@ export default function StaticPage({
                   <Title as="h2">{header.heading}</Title>
                   <Preamble>{header.preamble}</Preamble>
                 </div>
+                {header.top_primary_button?.url ? (
+                  <Button
+                    size="medium"
+                    intent="tertiary"
+                    theme="base"
+                    asChild
+                    className={styles.button}
+                  >
+                    <Link href={header.top_primary_button.url}>
+                      {header.top_primary_button.title}
+                    </Link>
+                  </Button>
+                ) : null}
                 {header.navigation_links ? (
                   <LinkChips chips={header.navigation_links} />
                 ) : null}

components/ContentType/StaticPages/staticPage.module.css

@@ -58,6 +58,10 @@
   grid-area: main;
 }
 
+.button {
+  width: fit-content;
+}
+
 @media (min-width: 768px) {
   .contentContainer {
     padding: var(--Spacing-x4) 0;

lib/graphql/Fragments/CollectionPage/TopPrimaryButton.graphql

@@ -0,0 +1,62 @@
+#import "../PageLink/AccountPageLink.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 "../CollectionPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../DestinationCityPage/Ref.graphql"
+#import "../DestinationCountryPage/Ref.graphql"
+#import "../DestinationOverviewPage/Ref.graphql"
+#import "../HotelPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+#import "../StartPage/Ref.graphql"
+
+fragment TopPrimaryButton_CollectionPage on CollectionPageHeader {
+  top_primary_button {
+    title
+    linkConnection {
+      edges {
+        node {
+          __typename
+          ...AccountPageLink
+          ...CollectionPageLink
+          ...ContentPageLink
+          ...DestinationCityPageLink
+          ...DestinationCountryPageLink
+          ...DestinationOverviewPageLink
+          ...HotelPageLink
+          ...LoyaltyPageLink
+          ...StartPageLink
+        }
+      }
+    }
+  }
+}
+
+fragment TopPrimaryButtonRef_CollectionPage on CollectionPageHeader {
+  top_primary_button {
+    linkConnection {
+      edges {
+        node {
+          __typename
+          ...AccountPageRef
+          ...CollectionPageRef
+          ...ContentPageRef
+          ...DestinationCityPageRef
+          ...DestinationCountryPageRef
+          ...DestinationOverviewPageRef
+          ...HotelPageRef
+          ...LoyaltyPageRef
+          ...StartPageRef
+        }
+      }
+    }
+  }
+}

lib/graphql/Fragments/ContentPage/TopPrimaryButton.graphql

@@ -0,0 +1,62 @@
+#import "../PageLink/AccountPageLink.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 "../CollectionPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../DestinationCityPage/Ref.graphql"
+#import "../DestinationCountryPage/Ref.graphql"
+#import "../DestinationOverviewPage/Ref.graphql"
+#import "../HotelPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+#import "../StartPage/Ref.graphql"
+
+fragment TopPrimaryButton_ContentPage on ContentPageHeader {
+  top_primary_button {
+    title
+    linkConnection {
+      edges {
+        node {
+          __typename
+          ...AccountPageLink
+          ...CollectionPageLink
+          ...ContentPageLink
+          ...DestinationCityPageLink
+          ...DestinationCountryPageLink
+          ...DestinationOverviewPageLink
+          ...HotelPageLink
+          ...LoyaltyPageLink
+          ...StartPageLink
+        }
+      }
+    }
+  }
+}
+
+fragment TopPrimaryButtonRef_ContentPage on ContentPageHeader {
+  top_primary_button {
+    linkConnection {
+      edges {
+        node {
+          __typename
+          ...AccountPageRef
+          ...CollectionPageRef
+          ...ContentPageRef
+          ...DestinationCityPageRef
+          ...DestinationCountryPageRef
+          ...DestinationOverviewPageRef
+          ...HotelPageRef
+          ...LoyaltyPageRef
+          ...StartPageRef
+        }
+      }
+    }
+  }
+}

lib/graphql/Query/CollectionPage/CollectionPage.graphql

@@ -6,6 +6,7 @@
 #import "../../Fragments/Blocks/UspGrid.graphql"
 
 #import "../../Fragments/CollectionPage/NavigationLinks.graphql"
+#import "../../Fragments/CollectionPage/TopPrimaryButton.graphql"
 
 query GetCollectionPage($locale: String!, $uid: String!) {
   collection_page(uid: $uid, locale: $locale) {
@@ -14,6 +15,7 @@ query GetCollectionPage($locale: String!, $uid: String!) {
     header {
       heading
       preamble
+      ...TopPrimaryButton_CollectionPage
       ...NavigationLinks_CollectionPage
     }
     blocks {
@@ -37,6 +39,7 @@ query GetCollectionPage($locale: String!, $uid: String!) {
 query GetCollectionPageRefs($locale: String!, $uid: String!) {
   collection_page(locale: $locale, uid: $uid) {
     header {
+      ...TopPrimaryButtonRef_CollectionPage
       ...NavigationLinksRef_CollectionPage
     }
     blocks {

lib/graphql/Query/ContentPage/ContentPage.graphql

@@ -10,6 +10,7 @@
 #import "../../Fragments/Blocks/TextCols.graphql"
 #import "../../Fragments/Blocks/UspGrid.graphql"
 #import "../../Fragments/ContentPage/NavigationLinks.graphql"
+#import "../../Fragments/ContentPage/TopPrimaryButton.graphql"
 
 #import "../../Fragments/Sidebar/Content.graphql"
 #import "../../Fragments/Sidebar/DynamicContent.graphql"
@@ -25,6 +26,7 @@ query GetContentPage($locale: String!, $uid: String!) {
     header {
       heading
       preamble
+      ...TopPrimaryButton_ContentPage
       ...NavigationLinks_ContentPage
     }
     blocks {
@@ -79,6 +81,7 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
   content_page(locale: $locale, uid: $uid) {
     header {
       ...NavigationLinksRef_ContentPage
+      ...TopPrimaryButtonRef_ContentPage
     }
     sidebar {
       __typename

server/routers/contentstack/collectionPage/output.ts

@@ -74,6 +74,18 @@ const navigationLinksSchema = z
       }))
   })
 
+const topPrimaryButtonSchema = linkAndTitleSchema
+  .nullable()
+  .transform((data) => {
+    if (!data?.link) {
+      return null
+    }
+    return {
+      url: data.link.url,
+      title: data.title || data.link.title || null,
+    }
+  })
+
 // Content Page Schema and types
 export const collectionPageSchema = z.object({
   collection_page: z.object({
@@ -83,6 +95,7 @@ export const collectionPageSchema = z.object({
     header: z.object({
       heading: z.string(),
       preamble: z.string(),
+      top_primary_button: topPrimaryButtonSchema,
       navigation_links: navigationLinksSchema,
     }),
     system: systemSchema.merge(
@@ -133,6 +146,7 @@ const collectionPageBlockRefsItem = z.discriminatedUnion("__typename", [
 
 const collectionPageHeaderRefs = z.object({
   navigation_links: z.array(linkConnectionRefs),
+  top_primary_button: linkConnectionRefs.nullable(),
 })
 
 export const collectionPageRefsSchema = z.object({

server/routers/contentstack/contentPage/output.ts

@@ -186,6 +186,18 @@ const navigationLinksSchema = z
       }))
   })
 
+const topPrimaryButtonSchema = linkAndTitleSchema
+  .nullable()
+  .transform((data) => {
+    if (!data?.link) {
+      return null
+    }
+    return {
+      url: data.link.url,
+      title: data.title || data.link.title || null,
+    }
+  })
+
 // Content Page Schema and types
 export const contentPageSchema = z.object({
   content_page: z.object({
@@ -196,6 +208,7 @@ export const contentPageSchema = z.object({
     header: z.object({
       heading: z.string(),
       preamble: z.string(),
+      top_primary_button: topPrimaryButtonSchema,
       navigation_links: navigationLinksSchema,
     }),
     system: systemSchema.merge(
@@ -305,6 +318,7 @@ const contentPageSidebarRefsItem = z.discriminatedUnion("__typename", [
 
 const contentPageHeaderRefs = z.object({
   navigation_links: z.array(linkConnectionRefs),
+  top_primary_button: linkConnectionRefs.nullable(),
 })
 
 export const contentPageRefsSchema = z.object({