Merged in feat/SW-286-collectionPage (pull request #765)

Feat(SW-286): CollectionPage

Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson

components/Blocks/CardsGrid.tsx

@@ -42,13 +42,17 @@ export default function CardsGrid({
             case CardsGridEnum.cards.Card:
               return (
                 <Card
-                  theme={cards_grid.theme ?? "one"}
+                  theme={
+                    cards_grid.theme ?? card.backgroundImage ? "image" : "one"
+                  }
                   key={card.system.uid}
                   scriptedTopTitle={card.scripted_top_title}
                   heading={card.heading}
                   bodyText={card.body_text}
                   secondaryButton={card.secondaryButton}
                   primaryButton={card.primaryButton}
+                  backgroundImage={card.backgroundImage}
+                  imageGradient
                 />
               )
             case CardsGridEnum.cards.TeaserCard:

components/ContentType/StaticPages/CollectionPage/index.tsx

@@ -0,0 +1,22 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import StaticPage from ".."
+
+export default async function CollectionPage() {
+  const collectionPageRes =
+    await serverClient().contentstack.collectionPage.get()
+
+  if (!collectionPageRes) {
+    return null
+  }
+
+  const { tracking, collectionPage } = collectionPageRes
+
+  return (
+    <StaticPage
+      content={collectionPage}
+      tracking={tracking}
+      pageType="collection"
+    />
+  )
+}

components/ContentType/StaticPages/ContentPage/index.tsx

@@ -0,0 +1,17 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import StaticPage from ".."
+
+export default async function ContentPage() {
+  const contentPageRes = await serverClient().contentstack.contentPage.get()
+
+  if (!contentPageRes) {
+    return null
+  }
+
+  const { tracking, contentPage } = contentPageRes
+
+  return (
+    <StaticPage content={contentPage} tracking={tracking} pageType="content" />
+  )
+}

components/ContentType/StaticPages/index.tsx

@@ -1,5 +1,3 @@
-import { serverClient } from "@/lib/trpc/server"
-
 import Blocks from "@/components/Blocks"
 import Hero from "@/components/Hero"
 import Sidebar from "@/components/Sidebar"
@@ -8,21 +6,22 @@ import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
-import styles from "./contentPage.module.css"
+import { staticPageVariants } from "./variants"
 
-export default async function ContentPage() {
-  const contentPageRes = await serverClient().contentstack.contentPage.get()
+import styles from "./staticPage.module.css"
 
-  if (!contentPageRes) {
-    return null
-  }
+import type { StaticPageProps } from "./staticPage"
 
-  const { tracking, contentPage } = contentPageRes
-  const { blocks, hero_image, header, sidebar } = contentPage
+export default function StaticPage({
+  content,
+  tracking,
+  pageType,
+}: StaticPageProps) {
+  const { blocks, hero_image, header } = content
 
   return (
     <>
-      <section className={styles.contentPage}>
+      <section className={staticPageVariants({ pageType })}>
         <header className={styles.header}>
           <div className={styles.headerContent}>
             {header ? (
@@ -54,7 +53,9 @@ export default async function ContentPage() {
             {blocks ? <Blocks blocks={blocks} /> : null}
           </main>
 
-          {sidebar?.length ? <Sidebar blocks={sidebar} /> : null}
+          {"sidebar" in content && content.sidebar?.length ? (
+            <Sidebar blocks={content.sidebar} />
+          ) : null}
         </div>
       </section>
 

components/ContentType/StaticPages/staticPage.module.css

@@ -1,4 +1,4 @@
-.contentPage {
+.page {
   padding-bottom: var(--Spacing-x9);
 }
 
@@ -32,20 +32,27 @@
 }
 
 .contentContainer {
+  padding: var(--Spacing-x4) var(--Spacing-x2) 0;
+}
+
+.content .contentContainer {
   display: grid;
   grid-template-areas:
     "main"
     "sidebar";
   gap: var(--Spacing-x4);
   align-items: start;
-  padding: var(--Spacing-x4) var(--Spacing-x2) 0;
 }
 
 .mainContent {
-  grid-area: main;
   display: grid;
   gap: var(--Spacing-x4);
   width: 100%;
+  gap: var(--Spacing-x6);
+}
+
+.content .mainContent {
+  grid-area: main;
 }
 
 @media (min-width: 768px) {
@@ -58,12 +65,20 @@
   .heroContainer {
     padding: var(--Spacing-x4) 0;
   }
+
   .contentContainer {
+    max-width: var(--max-width-content);
+    padding: var(--Spacing-x4) 0 0;
+    margin: 0 auto;
+  }
+
+  .content .contentContainer {
     grid-template-areas: "main sidebar";
     grid-template-columns: var(--max-width-text-block) 1fr;
     gap: var(--Spacing-x9);
-    max-width: var(--max-width-content);
-    margin: 0 auto;
-    padding: var(--Spacing-x4) 0 0;
+  }
+
+  .mainContent {
+    gap: var(--Spacing-x9);
   }
 }

components/ContentType/StaticPages/staticPage.ts

@@ -0,0 +1,15 @@
+import { staticPageVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+import type { TrackingSDKPageData } from "@/types/components/tracking"
+import type { CollectionPage } from "@/types/trpc/routers/contentstack/collectionPage"
+import type { ContentPage } from "@/types/trpc/routers/contentstack/contentPage"
+
+export interface StaticPageProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "content">,
+    VariantProps<typeof staticPageVariants> {
+  pageType?: "collection" | "content"
+  content: CollectionPage["collection_page"] | ContentPage["content_page"]
+  tracking: TrackingSDKPageData
+}

components/ContentType/StaticPages/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./staticPage.module.css"
+
+export const staticPageVariants = cva(styles.page, {
+  variants: {
+    pageType: {
+      collection: styles.collection,
+      content: styles.content,
+    },
+  },
+  defaultVariants: {
+    pageType: "content",
+  },
+})

components/TempDesignSystem/Card/card.module.css

@@ -41,6 +41,7 @@
 
 .content {
   margin: var(--Spacing-x0) var(--Spacing-x4);
+  position: absolute;
   display: grid;
   gap: var(--Spacing-x2);
 }