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

Feat(SW-286): CollectionPage

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

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

@@ -0,0 +1,65 @@
+import Blocks from "@/components/Blocks"
+import Hero from "@/components/Hero"
+import Sidebar from "@/components/Sidebar"
+import LinkChips from "@/components/TempDesignSystem/LinkChips"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import TrackingSDK from "@/components/TrackingSDK"
+
+import { staticPageVariants } from "./variants"
+
+import styles from "./staticPage.module.css"
+
+import type { StaticPageProps } from "./staticPage"
+
+export default function StaticPage({
+  content,
+  tracking,
+  pageType,
+}: StaticPageProps) {
+  const { blocks, hero_image, header } = content
+
+  return (
+    <>
+      <section className={staticPageVariants({ pageType })}>
+        <header className={styles.header}>
+          <div className={styles.headerContent}>
+            {header ? (
+              <>
+                <div className={styles.headerIntro}>
+                  <Title as="h2">{header.heading}</Title>
+                  <Preamble>{header.preamble}</Preamble>
+                </div>
+                {header.navigation_links ? (
+                  <LinkChips chips={header.navigation_links} />
+                ) : null}
+              </>
+            ) : null}
+          </div>
+        </header>
+
+        {hero_image ? (
+          <div className={styles.heroContainer}>
+            <Hero
+              alt={hero_image.meta.alt || hero_image.meta.caption || ""}
+              src={hero_image.url}
+              focalPoint={hero_image.focalPoint}
+            />
+          </div>
+        ) : null}
+
+        <div className={styles.contentContainer}>
+          <main className={styles.mainContent}>
+            {blocks ? <Blocks blocks={blocks} /> : null}
+          </main>
+
+          {"sidebar" in content && content.sidebar?.length ? (
+            <Sidebar blocks={content.sidebar} />
+          ) : null}
+        </div>
+      </section>
+
+      <TrackingSDK pageData={tracking} />
+    </>
+  )
+}

components/ContentType/StaticPages/staticPage.module.css

@@ -0,0 +1,84 @@
+.page {
+  padding-bottom: var(--Spacing-x9);
+}
+
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+}
+
+.headerContent {
+  display: grid;
+  gap: var(--Spacing-x3);
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+}
+
+.headerIntro {
+  display: grid;
+  max-width: var(--max-width-text-block);
+  gap: var(--Spacing-x3);
+}
+
+.heroContainer {
+  width: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+}
+
+.heroContainer img {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  display: block;
+}
+
+.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;
+}
+
+.mainContent {
+  display: grid;
+  gap: var(--Spacing-x4);
+  width: 100%;
+  gap: var(--Spacing-x6);
+}
+
+.content .mainContent {
+  grid-area: main;
+}
+
+@media (min-width: 768px) {
+  .headerIntro {
+    gap: var(--Spacing-x3);
+  }
+}
+
+@media (min-width: 1367px) {
+  .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);
+  }
+
+  .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",
+  },
+})