HEAD-124: create components for services page

package.json

@@ -34,7 +34,7 @@
     "test": "jest",
     "chromatic": "npx chromatic --project-token=chpt_219e0bf9f15c669",
     "postbuild": "find dist -name '*.js' -exec sed -i 's/\\.css\\.js/\\.css/g' {} +"
-  }, 
+  },
   "dependencies": {
     "@babel/cli": "7.23.9",
     "@babel/core": "7.24.0",
@@ -48,6 +48,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@portabletext/react": "^3.0.0",
+    "@portabletext/to-html": "^2.0.14",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accessible-icon": "^1.1.0",
     "@radix-ui/react-accordion": "^1.2.0",

src/theme/conversion/components/cdfaqs/classification.ts

@@ -0,0 +1 @@
+export default ["cdfaqs", "faqs", "cdfaqs"]

src/theme/conversion/components/cdfaqs/components/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { componentBoilerPlate } from "@conversiondigital/headless-basics-data/src/component-tools/componentBoilerPlate";
+import { ViewComponentProps } from "@conversiondigital/headless-basics-data/src/interfaces";
+import { getLogger, logPrefix } from "@conversiondigital/headless-basics-data/src";
+import CdFaqsDefaultVariant from "./variants/CdFaqsDefaultVariant";
+
+export const log = getLogger("conversion.components.cdfaqs");
+
+// Interface for individual FAQ item
+export interface FaqItem {
+  title: string;
+  richtextRaw: any[];
+}
+
+// Interface for global component source
+interface GlobalComponentSource {
+  __typename: string;
+  _key: string;
+  _type: string;
+  title: string;
+  description: string;
+  items: FaqItem[];
+}
+
+// Interface for CdFaqs component data
+export interface CdFaqsData {
+  __typename: string;
+  _key: string;
+  _type: string;
+  selectableVariant: string;
+  title: string;
+  description: string;
+  items: FaqItem[];
+  sortOrder: number;
+  globalComponentSource?: GlobalComponentSource;
+}
+
+export default function CdFaqsUI(dynamicComponent: ViewComponentProps) {
+  const { variant, matchingData } = componentBoilerPlate<CdFaqsData>(dynamicComponent);
+  if (!matchingData) return null;
+
+  log.trace(`${logPrefix()} CdFaqsUI started, matchingData: ${JSON.stringify(matchingData)}`);
+
+  switch (variant) {
+    case "default":
+    default:
+      return <CdFaqsDefaultVariant matchingData={matchingData} />;
+  }
+} 

src/theme/conversion/components/cdfaqs/components/variants/CdFaqsDefaultVariant.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps";
+import { CdFaqsData, FaqItem } from "../index";
+import { toHTML } from "@portabletext/to-html";
+import React, { useState } from "react";
+
+interface CdFaqsDefaultVariantProps extends StandardComponentProps {
+  matchingData: CdFaqsData;
+}
+
+const CdFaqsDefaultVariant: React.FC<CdFaqsDefaultVariantProps> = ({ matchingData }) => {
+  const [indexActive, setIndexActive] = useState(0);
+
+  const title = matchingData?.title || "";
+  const description = matchingData?.description || "";
+  const items = matchingData?.items || [];
+  const uniqueId = matchingData?._key || "";
+
+  return (
+    <section className="bg-primary-bg px-6 md:px-12 lg:px-20 py-16">
+      <div className="max-w-screen-xl mx-auto md:py-[100px] py-[40px]">
+        <div className="w-full">
+          <div className={"grid md:grid-cols-[40%_60%] grid-cols-1 gap-[24px]"}>
+            <h2 className={"font-staatliches font-[600] md:text-[48px] text-[32px] text-[white] md:mb-0 mb-6"}>{title}</h2>
+            <p className={"font-figtree md:text-[21px] text-[18px] leading-[36px] text-[white] font-[500]"}>{description}</p>
+          </div>
+          <div className={"grid md:grid-cols-[40%_60%] grid-cols-1 mt-[60px] gap-[24px]"}>
+            <div className={"bg-[rgba(76,100,68,0.2)] h-fit rounded-[0.625rem] md:max-w-[425px] max-w-[325px] mx-auto md:mx-0"}>
+              {items.map((item: FaqItem, index: number) => {
+                return (
+                  <div
+                    key={`${uniqueId}-title-${index}`}
+                    className={`${
+                      index === indexActive ? "bg-[white] rounded-[10px]" : ""
+                    } cursor-pointer flex justify-between items-center py-[24px] pl-[24px] pr-[44px]`}
+                    onClick={() => setIndexActive(index)}
+                    role="button"
+                    tabIndex={0}
+                    aria-pressed={index === indexActive}
+                  >
+                    <h3
+                      className={`font-figtree font-[700] md:text-[21px] text-[18px] ${
+                        index === indexActive ? "text-primary-bg" : "text-[white]"
+                      }`}
+                    >
+                      {item.title}
+                    </h3>
+                    <svg className="fill-primary" width="8" height="11" viewBox="0 0 8 11">
+                      <path
+                        fill={index === indexActive ? "#0d0e47" : "white"}
+                        d="M7.57029 5.56935L1.63533 10.0206C1.37163 10.2183 0.996094 10.0296 0.996094 9.7L0.996094 0.8C0.996094 0.470382 1.37163 0.281655 1.63533 0.479426L7.5703 4.93065C7.78363 5.09065 7.78363 5.40935 7.57029 5.56935Z"
+                      ></path>
+                    </svg>
+                  </div>
+                );
+              })}
+            </div>
+            <div data-testid="cdfaqs" className="md:mt-0 mt-10 relative">
+              {items.map((item: FaqItem, index: number) => {
+                return (
+                  <div
+                    key={`${uniqueId}-content-${index}`}
+                    className={`${
+                      index === indexActive ? "opacity-100 transition-opacity duration-300" : "opacity-0 transition-opacity duration-300 absolute top-0 left-0"
+                    }`}
+                  >
+                    <div className={`contentFaqsWrapper`} dangerouslySetInnerHTML={{ __html: toHTML(item.richtextRaw) }} />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CdFaqsDefaultVariant;

src/theme/conversion/components/cdservicestats/index.ts → src/theme/conversion/components/cdfaqs/index.ts

@@ -2,10 +2,10 @@ import { getLogger, getThemeConfig } from "@conversiondigital/headless-basics-da
 import { View } from "./view";
 import { ThemeConfig } from "@conversiondigital/headless-basics-data/src/interfaces"
 
-getLogger("theme.components.cdservicestats")
+getLogger("theme.components.cdfaqs")
 
 async function getConfig(): Promise<ThemeConfig> {
-    const config = await getThemeConfig('cdservicestats');
+    const config = await getThemeConfig('cdfaqs');
     config.view = View;
     return config;
 }

src/theme/conversion/components/cdserviceofferings/sanity-mapping.ts → src/theme/conversion/components/cdfaqs/sanity-mapping.ts

@@ -1,7 +1,7 @@
 import { getLogger, logPrefix, PageAndSingleComponentDetails } from "@conversiondigital/headless-basics-data/src"
 import { extractComponentsFromSanityData } from "@conversiondigital/headless-basics-data/src/cms/sanity/sanityMappingUtils"
 
-export const log = getLogger("conversion.components.sanity.cdserviceofferings.mapping")
+export const log = getLogger("conversion.components.sanity.cdfaqs.mapping")
 
 export async function mapIdentifierData(pageAndComponentCombo: PageAndSingleComponentDetails) {
   log.trace(
@@ -10,7 +10,7 @@ export async function mapIdentifierData(pageAndComponentCombo: PageAndSingleComp
 
   const content = pageAndComponentCombo?.component?.data
 
-  const matchingData = extractComponentsFromSanityData(content, "cdserviceofferings", log);
+  const matchingData = extractComponentsFromSanityData(content, "cdfaqs", log);
 
   return matchingData
 }

src/theme/conversion/components/cdserviceofferings/sanity-query.ts → src/theme/conversion/components/cdfaqs/sanity-query.ts

@@ -2,92 +2,60 @@ import { PageAndSingleComponentDetails } from "@conversiondigital/headless-basic
 
 export function query(pageAndComponentCombo: PageAndSingleComponentDetails): string {
   return `
-    query GetCdserviceofferingsBySlug($slug: String!) {
+    query GetCdFaqsBySlug($slug: String!) {
       allPage(where: { slug: { current: { eq: $slug } } }) {
         components {
           __typename
-          ... on Cdserviceofferings {
+          ... on Cdfaqs {
             __typename
             _key
             _type
             selectableVariant
             title
-            intro
-            offerings {
+            description
+            items {
               title
-              icon
-              id {
-                current
-              }
-            }
-            services {
-              id
-              title
-              content
+              richtextRaw
             }
             sortOrder
             globalComponentSource {
               __typename
               _key
               _type
               title
-              intro
-              offerings {
-                title
-                icon
-                id {
-                  current
-                }
-              }
-              services {
-                id
+              description
+              items {
                 title
-                content
+                richtextRaw
               }
             }
           }
         }
       }
-      allServicePage {
+      allHomepage {
         components {
           __typename
-          ... on Cdserviceofferings {
+          ... on Cdfaqs {
             __typename
             _key
             _type
             selectableVariant
             title
-            intro
-            offerings {
+            description
+            items {
               title
-              icon
-              id {
-                current
-              }
-            }
-            services {
-              id
-              title
-              content
+              richtextRaw
             }
             sortOrder
             globalComponentSource {
               __typename
               _key
               _type
               title
-              intro
-              offerings {
-                title
-                icon
-                id {
-                  current
-                }
-              }
-              services {
-                id
+              description
+              items {
                 title
-                content
+                richtextRaw
               }
             }
           }