Release 0.9.0 (#55)

* fix: make section props required on overview page (#45) * Feature/more friendly white label section on failure (#46) * feat (white label component): more friendly render on failue * refactor: cs * fix (frontend): mode * fix (strapi): build * Feature/42 video embed (#47) * fix: Add check for client side rendering * feat: Create ExternalScript component * chore: Remove "use client" * feat: Add support for wide html script with example * docs: Add info link * Feature/strapi video component (#49) * fix (strapi): add video section with title to partner and product page * feat (video section): connect strapi component with frontend * feat (strapi): video with text section component * feat (video with text section): strapi & frontend * Feature/46 desktop-navigation with example (#50) * feat: Create Desktop navigation with example in theme * chore: Add "use client" in nav-context.tsx * Bugfix/42 cta stretches (#51) * fix: "use client" is necessary in context provider consumers * fix: Wrap NavProvider around Hero, NavBar * fix: Prevent stretching of button in SectionCardWide * fix: Center grid items in SectionGroup (+ add attrs passing) * Bugfix/43 cards blocks align index (#52) fix: Reverse every second index (first should have cta at right) * Bugfix/45 kpi cards should be white and text black (#53) * fix: Add light scheme with bg-white to CardIcon * fix: Add dividers * hotfix (nextjs): build * Bugfix/52 bundle fix (#54) * fix: Change nesting for full-width display of "meet our partners" section * feat: Add support for className in Title.tsx * fix: Improve alignment consistency * chore: Fix linting errors * chore: changelog --------- Co-authored-by: Nathan Alder <[email protected]>
adfinis · Jan 10, 2025 · fee70dc · fee70dc
1 parent a80bc1a
commit fee70dc
Show file tree

Hide file tree

Showing 31 changed files with 619 additions and 136 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,18 @@ straightforward as possible.
 - [PROJECTNAME-YYYY](http://tickets.projectname.com/browse/PROJECTNAME-YYYY)
   PATCH Ticket title goes here.
 
+## [0.9.0] - 2025-01-10
+
+- Bugfix bundle fix (#54)
+- Bugfix kpi cards should be white and text black (#53)
+- Bugfix cards blocks align index (#52)
+- Bugfix cta stretches (#51)
+- Feature desktop-navigation with example (#50)
+- Feature strapi video component (#49)
+- Feature video embed (#47)
+- Feature/more friendly white label section on failure (#46)
+- fix: make section props required on overview page (#45)
+
 ## [0.8.0] - 2025-01-06
 
 - feat: partners and journeys collections (#43)

diff --git a/nextjs/package.json b/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx b/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx
@@ -14,6 +14,10 @@ import ButtonGroup from "@/components/button-group"
 import NavBar from "@/components/nav-bar/nav-bar"
 import { LinkedLocale } from "@/components/nav-bar/linked-locales-provider"
 import { notFound } from "next/navigation"
+import ExternalScript from "@/components/external-script"
+import SectionCardWide from "@/components/sections/section-card-wide"
+import { youtubeSection } from "@/app/[locale]/theme/texts"
+import { NavProvider } from "@/components/nav-bar/nav-context"
 
 export default async function PartnersProducts({
   activeLocale,
@@ -46,13 +50,15 @@ export default async function PartnersProducts({
 
   return (
     <>
-      <NavBar items={locales} />
-      {hero && (
-        <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
-          <Title markdown={hero.title} />
-          <Text markdown={hero.body} />
-        </Hero>
-      )}
+      <NavProvider>
+        <NavBar items={locales} />
+        {hero && (
+          <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
+            <Title markdown={hero.title} />
+            <Text markdown={hero.body} />
+          </Hero>
+        )}
+      </NavProvider>
       {intro && (
         <Intro>
           <Text markdown={intro.body} className="grid gap-8" />
@@ -114,14 +120,14 @@ function dynamicSection(section: any, index: number) {
           <SectionWhitepaper
             title={section.white_paper.title}
             cta={{
-              text: "Download whitepaper",
-              href: section.white_paper.download_file.url,
+              text: "Download white paper",
+              href: section.white_paper.download_file?.url ?? "",
               variant: "cta",
               size: "large",
             }}
             image={{
-              src: section.white_paper.cover_image.url,
-              alt: section.white_paper.cover_image.alternativeText ?? "",
+              src: section.white_paper?.cover_image?.url,
+              alt: section.white_paper?.cover_image?.alternativeText ?? "",
             }}
             text={section.white_paper.description}
           />
@@ -175,6 +181,42 @@ function dynamicSection(section: any, index: number) {
           </SectionGroup>
         </Container>
       )
+    case "sections.video-section":
+      return (
+        <Container
+          key={`section_video-section_${index}`}
+          background={section.props.background}
+          padding={section.props.padding}
+        >
+          <SectionGroup title={section.section_title}>
+            <ExternalScript
+              html={section.embed_html}
+              className="w-full h-auto"
+            />
+          </SectionGroup>
+        </Container>
+      )
+    case "sections.video-with-text-section":
+      return (
+        <Container
+          key={`section_video-section_${index}`}
+          background={section.props.background}
+          padding={section.props.padding}
+        >
+          <SectionGroup title={section.section_title}>
+            <SectionCardWide
+              childrenWide={
+                <ExternalScript
+                  html={section.embed_html}
+                  className="w-full h-auto"
+                />
+              }
+            >
+              <Text markdown={section.body} />
+            </SectionCardWide>
+          </SectionGroup>
+        </Container>
+      )
     default:
       return <p key={`section_${index}`}>Unknown section</p>
   }

diff --git a/nextjs/src/app/[locale]/(solutions-group)/solutions.tsx b/nextjs/src/app/[locale]/(solutions-group)/solutions.tsx
@@ -14,6 +14,7 @@ import SectionCardWide from "@/components/sections/section-card-wide"
 import ButtonGroup from "@/components/button-group"
 import LinkButton from "@/components/link-button"
 import CardService from "@/components/cards/card-service"
+import { NavProvider } from "@/components/nav-bar/nav-context"
 
 const SUB_PAGE: any = {
   en: "solutions",
@@ -56,13 +57,15 @@ export default async function Solutions({
 
   return (
     <>
-      <NavBar items={locales} />
-      {hero && (
-        <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
-          <Title markdown={hero.title} />
-          <Text markdown={hero.body} />
-        </Hero>
-      )}
+      <NavProvider>
+        <NavBar items={locales} />
+        {hero && (
+          <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
+            <Title markdown={hero.title} />
+            <Text markdown={hero.body} />
+          </Hero>
+        )}
+      </NavProvider>
       {intro && (
         <Intro>
           <Title markdown={intro.intro_title} align="center" />
@@ -75,7 +78,7 @@ export default async function Solutions({
           padding={kpi_sections.section_props.padding}
         >
           <SectionGroup title={kpi_sections.title}>
-            <CardGroup>
+            <CardGroup hasDividers>
               {kpi_sections.cards.map((item: any, i: number) => {
                 return (
                   <CardIcon
@@ -102,7 +105,7 @@ export default async function Solutions({
                 <SectionCardWide
                   ctas={[]}
                   image={{ src: item.card_image.url, alt: "" }}
-                  reverse={false}
+                  reverse={i % 2 === 1}
                   key={`soutions_section_solutions_${i}`}
                 >
                   <Title level={3} boldness={"semibold"}>

diff --git a/nextjs/src/app/[locale]/(solutions-group)/solutions/[slug]/page.tsx b/nextjs/src/app/[locale]/(solutions-group)/solutions/[slug]/page.tsx
@@ -15,6 +15,7 @@ import CardSlider from "@/components/cards/card-slider"
 import CardSliderElement from "@/components/cards/card-slider-element"
 import CardArticle from "@/components/cards/card-article"
 import NavBar from "@/components/nav-bar/nav-bar"
+import { NavProvider } from "@/components/nav-bar/nav-context"
 
 const SUB_PAGE = {
   en: "solutions",
@@ -49,13 +50,16 @@ export default async function SolutionsDetailPage({
 
   return (
     <>
-      <NavBar items={locales} />
-      {hero && (
-        <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
-          <Title markdown={hero.title} />
-          <Text markdown={hero.body} />
-        </Hero>
-      )}
+      <NavProvider>
+        <NavBar items={locales} />
+        {hero && (
+          <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
+            <Title markdown={hero.title} />
+            <Text markdown={hero.body} />
+          </Hero>
+        )}
+      </NavProvider>
+
       {intro && (
         <Intro>
           <Title markdown={intro.intro_title} />
@@ -64,7 +68,7 @@ export default async function SolutionsDetailPage({
       )}
       {project_cards && (
         <Container background="stone" padding="both-padding">
-          <SectionGroup title={project_cards.title}>
+          <SectionGroup title={project_cards.title} data-testid="project-cards">
             <Text
               markdown={project_cards.description}
               className="text-center"
@@ -74,7 +78,7 @@ export default async function SolutionsDetailPage({
                 <SectionCardWide
                   ctas={[]}
                   image={{ src: item.image.url, alt: "" }}
-                  reverse={false}
+                  reverse={i % 2 === 1}
                   key={`project_cards${i}`}
                 >
                   <Title level={3} boldness={"semibold"}>
@@ -98,8 +102,8 @@ export default async function SolutionsDetailPage({
           background={kpis.section_props.background}
           padding={kpis.section_props.padding}
         >
-          <SectionGroup title={kpis.title}>
-            <CardGroup>
+          <SectionGroup title={kpis.title} data-testid="kpis" align={"center"}>
+            <CardGroup hasDividers>
               {kpis.cards.map((item: any, i: number) => {
                 return (
                   <CardIcon
@@ -129,6 +133,7 @@ export default async function SolutionsDetailPage({
           <SectionGroup
             title={start_your_journey.section_group_with_external_link.title}
             align={"center"}
+            data-testid="start-your-journey"
           >
             <ButtonGroup
               align={"center"}

diff --git a/nextjs/src/app/[locale]/theme/page.tsx b/nextjs/src/app/[locale]/theme/page.tsx
@@ -5,6 +5,7 @@ import Link from "@/components/link-button"
 import Title from "@/components/title"
 import Text from "@/components/text"
 import {
+  navItems,
   hero,
   intro,
   solutions,
@@ -21,6 +22,7 @@ import {
   whitepaperSection,
   twoColumnMarkdownSection,
   calendlySection,
+  youtubeSection,
 } from "./texts"
 import Container from "@/components/container"
 import CardSlider from "@/components/cards/card-slider"
@@ -42,6 +44,9 @@ import GetStartedForm from "@/components/form/get-started-form"
 import { type Locale } from "@/hooks/useLocale"
 import SectionWhitepaper from "@/components/sections/section-whitepaper"
 import SectionCalendly from "@/components/sections/section-calendly"
+import ExternalScript from "@/components/external-script"
+import Topbar from "@/components/topbar"
+import { NavProvider } from "@/components/nav-bar/nav-context"
 
 export default function Theme({
   params: { locale },
@@ -50,16 +55,20 @@ export default function Theme({
 }) {
   return (
     <main className="bg-white">
-      <Hero
-        color="white"
-        imageUrl="https://images.unsplash.com/photo-1682687220198-88e9bdea9931?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-      >
-        <Title markdown={hero.title} />
-        <Text markdown={hero.text} />
-        <Link href="https://www.adfinis.com" size="large">
-          Learn how
-        </Link>
-      </Hero>
+      <NavProvider>
+        <Topbar navItems={navItems} />
+        <Hero
+          color="white"
+          imageUrl="https://images.unsplash.com/photo-1682687220198-88e9bdea9931?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        >
+          <Title markdown={hero.title} />
+          <Text markdown={hero.text} />
+          <Link href="https://www.adfinis.com" size="large">
+            Learn how
+          </Link>
+        </Hero>
+      </NavProvider>
+
       <Intro>
         <Title markdown={intro.title} align="center" />
         <Text markdown={intro.text} className="grid gap-8" />
@@ -94,7 +103,7 @@ export default function Theme({
           {mediaSection.media.map((item, i) => {
             return (
               <SectionCardWide
-                reverse={i % 2 === 0}
+                reverse={i % 2 === 1}
                 image={item.image}
                 key={i}
                 ctas={item.ctas}
@@ -165,7 +174,7 @@ export default function Theme({
           {media2Section.media.slice(0, 2).map((item, i) => {
             return (
               <SectionCardWide
-                reverse={i % 2 === 0}
+                reverse={i % 2 === 1}
                 image={item.image}
                 key={i}
                 ctas={item.ctas}
@@ -304,6 +313,32 @@ export default function Theme({
           <SectionCalendly url={calendlySection.url} />
         </SectionGroup>
       </Container>
+
+      <Container id="youtube" background="neutral" padding="both-padding">
+        <SectionGroup title="Youtube">
+          <ExternalScript
+            html={youtubeSection.html}
+            className="w-full h-auto"
+          />
+        </SectionGroup>
+      </Container>
+      <Container id="youtube" background="neutral" padding="both-padding">
+        <SectionGroup title="Youtube in a SectionCardWide">
+          <SectionCardWide
+            childrenWide={
+              <ExternalScript
+                html={youtubeSection.html}
+                className="w-full h-auto"
+              />
+            }
+          >
+            <Title level={3} boldness={"semibold"}>
+              {youtubeSection.title}
+            </Title>
+            <Text markdown={youtubeSection.text} />
+          </SectionCardWide>
+        </SectionGroup>
+      </Container>
     </main>
   )
 }