[Homepage] connect use case template to dato

website/components/io-card-container/index.tsx

@@ -34,42 +34,46 @@ export default function IoCardContaianer({
           {description ? <p className={s.description}>{description}</p> : null}
         </header>
       ) : null}
-      {label || cta ? (
-        <header className={s.subHeader}>
-          {label ? <h3 className={s.label}>{label}</h3> : null}
-          {cta ? (
-            <Button
-              title={cta.text}
-              href={cta.url}
-              linkType="inbound"
-              theme={{
-                brand: 'neutral',
-                variant: 'tertiary',
-                background: theme,
-              }}
-            />
+      {cards.length ? (
+        <>
+          {label || cta ? (
+            <header className={s.subHeader}>
+              {label ? <h3 className={s.label}>{label}</h3> : null}
+              {cta ? (
+                <Button
+                  title={cta.text}
+                  href={cta.url}
+                  linkType="inbound"
+                  theme={{
+                    brand: 'neutral',
+                    variant: 'tertiary',
+                    background: theme,
+                  }}
+                />
+              ) : null}
+            </header>
           ) : null}
-        </header>
+          <ul
+            className={s.cardList}
+            style={
+              {
+                '--per-row': cardsPerRow,
+                '--length': cards.length,
+              } as React.CSSProperties
+            }
+          >
+            {cards.map((card, index) => {
+              return (
+                // Index is stable
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index}>
+                  <IoCard {...card} />
+                </li>
+              )
+            })}
+          </ul>
+        </>
       ) : null}
-      <ul
-        className={s.cardList}
-        style={
-          {
-            '--per-row': cardsPerRow,
-            '--length': cards.length,
-          } as React.CSSProperties
-        }
-      >
-        {cards.map((card, index) => {
-          return (
-            // Index is stable
-            // eslint-disable-next-line react/no-array-index-key
-            <li key={index}>
-              <IoCard {...card} />
-            </li>
-          )
-        })}
-      </ul>
     </div>
   )
 }

website/components/io-usecase-sections/index.tsx → website/components/io-usecase-section/index.tsx

@@ -5,31 +5,11 @@ import Image from 'next/image'
 import Button from '@hashicorp/react-button'
 import s from './style.module.css'
 
-interface IoUsecaseSectionsProps {
-  brand?: Products | 'neutral'
-  sections: [IoUsecaseSectionProps, IoUsecaseSectionProps]
-}
-
-export default function IoUseCaseSestions({
-  brand = 'neutral',
-  sections,
-}: IoUsecaseSectionsProps): React.ReactElement {
-  return (
-    <>
-      {sections.map((section, index) => {
-        // Index is stable
-        // eslint-disable-next-line react/no-array-index-key
-        return <IoUsecaseSection key={index} brand={brand} {...section} />
-      })}
-    </>
-  )
-}
-
 interface IoUsecaseSectionProps {
   brand?: Products | 'neutral'
   eyebrow: string
   heading: string
-  description: React.ReactNode
+  description: string
   media?: {
     src: string
     width: string
@@ -42,7 +22,7 @@ interface IoUsecaseSectionProps {
   }
 }
 
-function IoUsecaseSection({
+export default function IoUsecaseSection({
   brand = 'neutral',
   eyebrow,
   heading,
@@ -57,7 +37,14 @@ function IoUsecaseSection({
         <div className={s.columns}>
           <div className={s.column}>
             <h2 className={s.heading}>{heading}</h2>
-            {media ? <p className={s.description}>{description}</p> : null}
+            {media?.src ? (
+              <div
+                className={s.description}
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            ) : null}
             {cta ? (
               <div className={s.cta}>
                 <Button
@@ -71,11 +58,16 @@ function IoUsecaseSection({
             ) : null}
           </div>
           <div className={s.column}>
-            {media ? (
+            {media?.src ? (
               // eslint-disable-next-line jsx-a11y/alt-text
               <Image {...media} />
             ) : (
-              <div className={s.description}>{description}</div>
+              <div
+                className={s.description}
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
             )}
           </div>
         </div>

website/pages/use-cases/[slug].tsx

@@ -0,0 +1,225 @@
+import * as React from 'react'
+import Head from 'next/head'
+import rivetQuery from '@hashicorp/nextjs-scripts/dato/client'
+import useCasesQuery from './query.graphql'
+import { renderMetaTags } from 'react-datocms'
+import IoUsecaseHero from 'components/io-usecase-hero'
+import IoUsecaseSection from 'components/io-usecase-section'
+import IoUsecaseCustomer from 'components/io-usecase-customer'
+import IoCardContainer from 'components/io-card-container'
+import IoVideoCallout from 'components/io-video-callout'
+import IoUsecaseCallToAction from 'components/io-usecase-call-to-action'
+import s from './style.module.css'
+
+export default function UseCasePage({ data }) {
+  const {
+    seo,
+    heroHeading,
+    heroDescription,
+    challengeHeading,
+    challengeDescription,
+    challengeImage,
+    challengeLink,
+    solutionHeading,
+    solutionDescription,
+    solutionImage,
+    solutionLink,
+    caseStudyImage,
+    caseStudyLogo,
+    caseStudyHeading,
+    caseStudyDescription,
+    caseStudyLink,
+    caseStudyStats,
+    cardsHeading,
+    cardsDescription,
+    tutorialCards,
+    documentationCards,
+    callToActionHeading,
+    callToActionDescription,
+    callToActionLinks,
+    videoCallout,
+  } = data
+  const _videoCallout = videoCallout[0]
+
+  return (
+    <>
+      <Head>{renderMetaTags(seo)}</Head>
+
+      <IoUsecaseHero
+        eyebrow="Common use case"
+        heading={heroHeading}
+        description={heroDescription}
+        pattern="/img/usecase-hero-pattern.svg"
+      />
+
+      <IoUsecaseSection
+        brand="vault"
+        eyebrow="Challenge"
+        heading={challengeHeading}
+        description={challengeDescription}
+        media={{
+          src: challengeImage?.url,
+          width: challengeImage?.width,
+          height: challengeImage?.height,
+          alt: challengeImage?.alt,
+        }}
+        cta={{
+          text: 'Learn more',
+          link: challengeLink,
+        }}
+      />
+
+      <IoUsecaseSection
+        brand="vault"
+        eyebrow="Solution"
+        heading={solutionHeading}
+        description={solutionDescription}
+        media={{
+          src: solutionImage?.url,
+          width: solutionImage?.width,
+          height: solutionImage?.height,
+          alt: solutionImage?.alt,
+        }}
+        cta={{
+          text: 'Learn more',
+          link: solutionLink,
+        }}
+      />
+
+      <IoUsecaseCustomer
+        link={caseStudyLink}
+        media={{
+          src: caseStudyImage.url,
+          width: caseStudyImage.width,
+          height: caseStudyImage.height,
+          alt: caseStudyImage.alt,
+        }}
+        logo={{
+          src: caseStudyLogo.url,
+          width: caseStudyLogo.width,
+          height: caseStudyLogo.height,
+          alt: caseStudyLogo.alt,
+        }}
+        heading={caseStudyHeading}
+        description={caseStudyDescription}
+        stats={caseStudyStats.map((stat) => {
+          return {
+            value: stat.value,
+            key: stat.label,
+          }
+        })}
+      />
+
+      <div className={s.cards}>
+        <IoCardContainer
+          heading={cardsHeading}
+          description={cardsDescription}
+          label="Tutorials"
+          cta={{
+            url: 'https://learn.hashicorp.com/vault',
+            text: 'Explore all',
+          }}
+          cardsPerRow={3}
+          cards={tutorialCards.map((card) => {
+            return {
+              eyebrow: card.eyebrow,
+              link: {
+                url: card.link,
+                type: 'inbound',
+              },
+              heading: card.heading,
+              description: card.description,
+              products: card.products,
+            }
+          })}
+        />
+
+        <IoCardContainer
+          label="Docs"
+          cta={{
+            url: '/docs',
+            text: 'Explore all',
+          }}
+          cardsPerRow={3}
+          cards={documentationCards.map((card) => {
+            return {
+              eyebrow: card.eyebrow,
+              link: {
+                url: card.link,
+                type: 'inbound',
+              },
+              heading: card.heading,
+              description: card.description,
+              products: card.products,
+            }
+          })}
+        />
+      </div>
+
+      <div className={s.callToAction}>
+        <IoUsecaseCallToAction
+          theme="light"
+          brand="vault"
+          heading={callToActionHeading}
+          description={callToActionDescription}
+          links={callToActionLinks.map((link) => {
+            return {
+              text: link.title,
+              url: link.link,
+            }
+          })}
+          pattern="/img/usecase-callout-pattern.svg"
+        />
+      </div>
+
+      {_videoCallout ? (
+        <div className={s.videoCallout}>
+          <IoVideoCallout
+            youtubeId={_videoCallout.youtubeId}
+            thumbnail={_videoCallout.thumbnail.url}
+            heading={_videoCallout.heading}
+            description={_videoCallout.description}
+            person={{
+              avatar: _videoCallout.personAvatar.url,
+              name: _videoCallout.personName,
+              description: _videoCallout.personDescription,
+            }}
+          />
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+export async function getStaticPaths() {
+  const { allVaultUseCases } = await rivetQuery({
+    query: useCasesQuery,
+  })
+
+  return {
+    paths: allVaultUseCases.map((page) => {
+      return {
+        params: {
+          slug: page.slug,
+        },
+      }
+    }),
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const { slug } = params
+
+  const { allVaultUseCases } = await rivetQuery({
+    query: useCasesQuery,
+  })
+
+  const page = allVaultUseCases.find((page) => page.slug === slug)
+
+  return {
+    props: {
+      data: page,
+    },
+  }
+}