💄 Component Redesign | Logo Carousel and Image and Accordian Blocks

.eslintignore

@@ -3,4 +3,4 @@ tina/__generated__
 node_modules
 dist
 public
-content
+content

.eslintrc

@@ -28,7 +28,7 @@
       },
     ],
     "prettier/prettier": [
-      "error",
+      "warn",
       {
         "endOfLine": "auto",
       },

app/articles/[filename]/index.tsx

@@ -85,7 +85,7 @@ const ArticlePage = ({ props, tinaProps }: ArticlePageProps) => {
       {data.articles.subTitle && (
         <section
           className={classNames(
-            "prose mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 lg:flex"
+            "mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0"
           )}
         >
           <div data-tina-field={tinaField(data.articles, "subTitle")}>

app/articles/index.tsx

@@ -61,7 +61,7 @@ function ArticlesIndexPage({ props, tinaProps }: ArticlesIndexPageProps) {
         </Section>
         <section
           className={classNames(
-            "prose mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0 md:flex"
+            "mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0"
           )}
         >
           {data.articlesIndex._body.children.length > 0 && (

app/company/[filename]/index.tsx

@@ -44,7 +44,7 @@ export default function CompanyPage({ tinaProps, props }) {
         {data.company.subTitle && (
           <section
             className={classNames(
-              "prose mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0",
+              "mx-auto w-full max-w-9xl flex-row px-8 pb-8 prose-h1:my-0 prose-h1:pt-8 prose-h2:mt-8 prose-img:my-0",
               data.company.fullWidthBody ? "" : "md:flex"
             )}
           >

app/consulting/[filename]/consulting2.tsx

@@ -1,43 +1,51 @@
 "use client";
-
 import { Blocks } from "@/components/blocks-renderer";
 import { PreFooter } from "@/components/layout/footer/pre-footer";
 import { SectionColor } from "@/components/util/constants/styles";
 import { Container } from "@/components/util/container";
 import { Section } from "@/components/util/section";
 import { Consultingv2Query } from "@/tina/types";
+import _ from "lodash";
+import React from "react";
 
 type ConsultingV2PageProps<T> = {
   tinaProps: {
     data: Consultingv2Query;
+    query: string;
+    variables: object;
   };
   props: T;
 };
 
-export default function ConsultingV2({
-  tinaProps,
-}: ConsultingV2PageProps<object>) {
-  const { data } = tinaProps;
-
-  return (
-    <>
-      <div className="dark flex h-full flex-col">
-        <Section color={SectionColor.ToggleLightMode}>
-          <Container width="custom" size="small" className="w-full sm:py-12">
-            <div className="w-full">
-              {data.consultingv2.blocks ? (
+const ConsultingV2 = React.memo(
+  function ConsultingV2({ tinaProps }: ConsultingV2PageProps<object>) {
+    const { data } = tinaProps;
+    return (
+      <>
+        {}
+        <div className="dark flex h-full flex-col">
+          <Section color={SectionColor.ToggleLightMode}>
+            <Container
+              size="custom"
+              width="custom"
+              padding="custom"
+              className="w-full p-0"
+            >
+              <div className="w-full">
                 <Blocks
                   prefix={"Consultingv2Blocks"}
                   blocks={data.consultingv2.blocks}
                 />
-              ) : (
-                <></>
-              )}
-            </div>
-          </Container>
-        </Section>
-        <PreFooter />
-      </div>
-    </>
-  );
-}
+              </div>
+            </Container>
+          </Section>
+          <PreFooter />
+        </div>
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return _.isEqual(prevProps.tinaProps.data, nextProps.tinaProps.data);
+  }
+);
+export default ConsultingV2;

app/consulting/[filename]/page.tsx

@@ -1,9 +1,9 @@
 import { MediaCardProps } from "@/components/consulting/mediaCard/mediaCard";
 import { getRandomTestimonialsByCategory } from "@/helpers/getTestimonials";
-import { useSEO } from "@/hooks/useSeo";
 import client from "@/tina/client";
 import "aos/dist/aos.css"; // This is important to keep the animation
 import { TODAY } from "hooks/useFetchEvents";
+import { useSEO } from "hooks/useSeo";
 import { Metadata } from "next";
 import { Open_Sans } from "next/font/google";
 import { TinaClient } from "../../tina-client";
@@ -189,9 +189,9 @@ export async function generateMetadata({
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { seoProps } = useSEO(seo);
+  const seoData = useSEO(seo);
 
-  return { ...seoProps };
+  return seoData ? { ...seoData.seoProps } : {};
 }
 
 export default async function Consulting({

app/layout.tsx

@@ -31,7 +31,7 @@ const inter = Inter({
   variable: "--inter-font",
   subsets: ["latin"],
   display: "swap",
-  weight: ["300", "400", "600", "700"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
 const ChatBaseBot = dynamic(

components/blocks-renderer.tsx

@@ -91,6 +91,12 @@ const LatestTech = dynamic(() =>
 
 import { EventBooking } from "./training/eventBooking";
 
+const AccordionBlock = dynamic(() =>
+  import("./blocks/imageComponents/accordionBlock/accordionBlock").then(
+    (mod) => mod.AccordionBlock
+  )
+);
+
 const Breadcrumbs = dynamic(() =>
   import("./blocks/breadcrumbs/breadcrumbs").then((mod) => mod.Breadcrumbs)
 );
@@ -118,6 +124,16 @@ const TrainingLearningOutcome = dynamic(() =>
   )
 );
 
+const LogoCarousel = dynamic(() =>
+  import("./blocks/logoCarousel/logoCarousel").then((mod) => mod.LogoCarousel)
+);
+
+const ImageTextBlock = dynamic(() =>
+  import("./blocks/imageComponents/imageTextBlock/imageTextBlock").then(
+    (mod) => mod.ImageTextBlock
+  )
+);
+
 const componentMap = {
   AboutUs,
   Carousel,
@@ -150,6 +166,9 @@ const componentMap = {
   GridLayout,
   FixedColumns,
   HorizontalCard,
+  LogoCarousel,
+  ImageTextBlock,
+  AccordionBlock,
 };
 
 export const Blocks = ({ prefix, blocks }) => {

components/blocks/CustomDownloadButton.tsx

@@ -1,6 +1,6 @@
 import { FaFileDownload } from "react-icons/fa";
 import { Template } from "tinacms";
-import Button from "../button/button";
+import Button from "../button/rippleButton";
 import { CustomLink } from "../customLink";
 
 export const CustomDownloadButton = ({ data }) => {

components/blocks/breadcrumbs/breadcrumbs-schema.tsx → components/blocks/breadcrumbs/breadcrumbs.schema.tsx

@@ -1,15 +1,18 @@
 import Link from "next/link";
 import React from "react";
 import { Button, Input, Template, wrapFieldsWithMeta } from "tinacms";
-import { TinaInfo } from "../../../components/tina/tina-info";
+import { backgroundSchema } from "../../../components/layout/v2ComponentWrapper";
+import { TinaInfo } from "../../tina/tina-info";
 
 export const BreadcrumbSchema: Template = {
   name: "breadcrumbs",
-  label: "Breadcrumbs",
+  label: "<V2> Breadcrumbs",
   ui: {
     previewSrc: "/images/thumbs/tina/breadcrumbs.jpg",
   },
   fields: [
+    //@ts-expect-error – custom component typing won't be pinned down
+    backgroundSchema,
     {
       type: "string",
       label: "Final Breadcrumb",

components/blocks/breadcrumbs/breadcrumbs.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import V2ComponentWrapper from "@/components/layout/v2ComponentWrapper";
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -28,9 +29,7 @@ function getLinks(
   data: Consultingv2BlocksBreadcrumbs,
   finalNode?: string
 ): React.ReactNode[] {
-  const french = false;
-
-  const placeholder = french ? "{{ TITRE DE LA PAGE }}" : "{{ PAGE TITLE }}";
+  const placeholder = "Lorem Ipsum";
   const initialTitle = global.breadcrumbHomeRoute;
 
   // Replace paths with character replacements
@@ -105,23 +104,25 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
   const links = getLinks(paths, data, data.finalBreadcrumb);
 
   return (
-    <Container size="custom">
-      <Breadcrumb>
-        <BreadcrumbList>
-          {links.map((link, index) => (
-            // react fragments don't appear in the dom
-            <React.Fragment key={`breadcrumb-${index}`}>
-              {index !== 0 ? (
-                <BreadcrumbSeparator>
-                  <Separator />
-                </BreadcrumbSeparator>
-              ) : null}
-              <BreadcrumbItem>{link}</BreadcrumbItem>
-            </React.Fragment>
-          ))}
-        </BreadcrumbList>
-      </Breadcrumb>
-    </Container>
+    <V2ComponentWrapper data={data}>
+      <Container size="custom" className="pt-8 sm:pt-12">
+        <Breadcrumb className="text-gray-300">
+          <BreadcrumbList>
+            {links.map((link, index) => (
+              // react fragments don't appear in the dom
+              <React.Fragment key={`breadcrumb-${index}`}>
+                {index !== 0 ? (
+                  <BreadcrumbSeparator>
+                    <Separator />
+                  </BreadcrumbSeparator>
+                ) : null}
+                <BreadcrumbItem>{link}</BreadcrumbItem>
+              </React.Fragment>
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Container>
+    </V2ComponentWrapper>
   );
 }
 

components/blocks/fixedTabsLayout.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import type { Template } from "tinacms";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { bookingButtonSchema } from "../bookingButton/bookingButton";
-import Button from "../button/button";
+import Button from "../button/rippleButton";
 import { customImageBlockSchema } from "./customImage";
 import { expertBlockSchema } from "./expertBlock";
 import { componentRenderer } from "./mdxComponentRenderer";

components/blocks/imageComponents/ImageComponentLayout.tsx

@@ -0,0 +1,66 @@
+"use client";
+import { Container } from "@/components/util/container";
+import "aos/dist/aos.css";
+import Image from "next/image";
+import { classNames } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
+import V2ComponentWrapper from "../../layout/v2ComponentWrapper";
+
+export const ImageComponentLayout = ({ data, children }) => {
+  const imageIsLeftAligined = data.mediaConfiguration?.placement === "Left";
+
+  return (
+    <V2ComponentWrapper data={data}>
+      <Container
+        size="custom"
+        className={classNames(
+          "mx-auto flex flex-col gap-8 align-middle md:grid md:gap-16",
+          data.mediaConfiguration?.imageSource
+            ? "md:grid-cols-2"
+            : "md:grid-cols-1",
+          data.mediaConfiguration?.mobilePlacement === "Above"
+            ? "flex-col-reverse"
+            : "flex-col",
+          data.mediaConfiguration?.verticalPlacement === "Bottom"
+            ? "pt-12"
+            : "py-12"
+        )}
+      >
+        <div
+          className={classNames(
+            `flex aspect-auto w-full flex-col justify-center ${data?.mediaConfiguration?.imageSource ? "md:aspect-4/3" : "items-center"}`,
+            imageIsLeftAligined && "md:order-2",
+            data.mediaConfiguration?.verticalPlacement === "Bottom" && "pb-12"
+          )}
+        >
+          {children}
+        </div>
+
+        {data.mediaConfiguration?.imageSource && (
+          <div
+            className={classNames(
+              "relative aspect-4/3 w-full md:aspect-auto",
+              imageIsLeftAligined && "md:order-1"
+            )}
+          >
+            {data.mediaConfiguration.verticalPlacement === "Center"}
+            <Image
+              objectFit="contain"
+              fill={true}
+              className={classNames(
+                data.mediaConfiguration?.verticalPlacement === "Centered" &&
+                  "my-auto",
+                data.mediaConfiguration?.verticalPlacement === "Bottom" &&
+                  "mt-auto",
+                "!h-auto rounded-md"
+              )}
+              src={data.mediaConfiguration?.imageSource}
+              alt={data.mediaConfiguration?.altText ?? "image"}
+              data-tina-field={tinaField(data, "mediaConfiguration")}
+            />
+          </div>
+        )}
+      </Container>
+    </V2ComponentWrapper>
+  );
+};