feat(SW-368): added link chips component

components/ContentType/ContentPage/contentPage.module.css

@@ -11,6 +11,18 @@
   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);
+}
+
 .content {
   padding: var(--Spacing-x4) var(--Spacing-x2);
   display: grid;
@@ -21,3 +33,9 @@
   width: 100%;
   max-width: var(--max-width-content);
 }
+
+@media (min-width: 768px) {
+  .headerIntro {
+    gap: var(--Spacing-x3);
+  }
+}

components/ContentType/ContentPage/index.tsx

@@ -2,8 +2,8 @@ import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
 import Hero from "@/components/Hero"
-import Intro from "@/components/Intro"
 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"
@@ -18,31 +18,34 @@ export default async function ContentPage() {
   }
 
   const { tracking, contentPage } = contentPageRes
-  const heroImage = contentPage.hero_image
+  const { blocks, hero_image, header, sidebar } = contentPage
 
   return (
     <>
       <section className={styles.contentPage}>
-        {contentPage.sidebar?.length ? (
-          <Sidebar blocks={contentPage.sidebar} />
-        ) : null}
+        {sidebar?.length ? <Sidebar blocks={sidebar} /> : null}
 
         <header className={styles.header}>
-          <Intro>
-            <Title as="h2">{contentPage.header.heading}</Title>
-            <Preamble>{contentPage.header.preamble}</Preamble>
-          </Intro>
+          <div className={styles.headerContent}>
+            <div className={styles.headerIntro}>
+              <Title as="h2">{header.heading}</Title>
+              <Preamble>{header.preamble}</Preamble>
+            </div>
+            {header.navigation_links ? (
+              <LinkChips chips={header.navigation_links} />
+            ) : null}
+          </div>
         </header>
 
         <main className={styles.content}>
           <div className={styles.innerContent}>
-            {heroImage ? (
+            {hero_image ? (
               <Hero
-                alt={heroImage.meta.alt || heroImage.meta.caption || ""}
-                src={heroImage.url}
+                alt={hero_image.meta.alt || hero_image.meta.caption || ""}
+                src={hero_image.url}
               />
             ) : null}
-            {contentPage.blocks ? <Blocks blocks={contentPage.blocks} /> : null}
+            {blocks ? <Blocks blocks={blocks} /> : null}
           </div>
         </main>
       </section>