Map AEM fragment data to expected component props in FragmentRender.js (

#1000) * started work on interface to map fragment data to component props * fragment renderer updates * map fragment data to props before passing to component * modify fragment components to work with changes to FragmentRender.js * remove unused imports from FragmentRender.js * add layout-container class to ArticleCTA --------- Co-authored-by: blai0264 <[email protected]>
DTS-STN · Apr 25, 2024 · 78bc534 · 78bc534
1 parent 818707e
commit 78bc534
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 158 deletions.
diff --git a/components/fragment_renderer/FragmentRender.js b/components/fragment_renderer/FragmentRender.js
@@ -5,6 +5,8 @@ import Button from "./fragment_components/Button";
 import ArticleCTA from "./fragment_components/ArticleCTA";
 import QuoteVerticalLineContent from "./fragment_components/QuoteVerticalLineContent";
 import ImageWithCollapse from "./fragment_components/ImageWithCollapse";
+import TextRender from "../text_node_renderer/TextRender";
+import { generateCollapseElements } from "../../lib/utils/generateCollapseElements";
 
 const FRAGMENTS = {
   "SCLabs-Comp-Content-Image-v1": TextWithImage,
@@ -15,16 +17,138 @@ const FRAGMENTS = {
   "SCLabs-Image-v1": ImageWithCollapse,
 };
 
+const mapFragmentsToProps = (fragmentData, fragmentName, locale) => {
+  switch (fragmentName) {
+    case "SCLabs-Feature-v1":
+      return {
+        heading:
+          locale === "en" ? fragmentData.scTitleEn : fragmentData.scTitleFr,
+        body: (
+          <TextRender
+            data={
+              locale === "en"
+                ? fragmentData.scContentEn.json
+                : fragmentData.scContentFr.json
+            }
+          />
+        ),
+        ButtonProps: {
+          id: fragmentData.scLabsButton[0].scId,
+          text:
+            locale === "en"
+              ? fragmentData.scLabsButton[0].scTitleEn
+              : fragmentData.scLabsButton[0].scTitleFr,
+          href:
+            locale === "en"
+              ? fragmentData.scLabsButton[0].scDestinationURLEn
+              : fragmentData.scLabsButton[0].scDestinationURLFr,
+        },
+      };
+
+    case "SCLabs-Comp-Content-Image-v1":
+      return {
+        src:
+          locale === "en"
+            ? fragmentData.scLabImage.scImageEn._publishUrl
+            : fragmentData.scLabImage.scImageFr._publishUrl,
+        alt: fragmentData.scLabImage.scImageAltTextEn
+          ? locale === "en"
+            ? fragmentData.scLabImage.scImageAltTextEn
+            : fragmentData.scLabImage.scImageAltTextFr
+          : "",
+        width: fragmentData.scLabImage.scImageEn.width,
+        height: fragmentData.scLabImage.scImageEn.height,
+        data:
+          locale === "en"
+            ? fragmentData.scLabContent[0].scContentEn.json
+            : fragmentData.scLabContent[0].scContentFr.json,
+        layout: fragmentData.scLabLayout,
+      };
+
+    case "SCLabs-Comp-Content-v1":
+      return {
+        quoteText:
+          locale === "en"
+            ? fragmentData.scLabContent[0].scContentEn.json
+            : fragmentData.scLabContent[0].scContentFr.json,
+        explanationtext:
+          locale === "en"
+            ? fragmentData.scLabContent[1].scContentEn.json
+            : fragmentData.scLabContent[1].scContentFr.json,
+      };
+
+    case "SCLabs-Content-v1":
+      return {
+        data:
+          locale === "en"
+            ? fragmentData.scContentEn.json
+            : fragmentData.scContentFr.json,
+      };
+
+    case "SCLabs-Button-v1":
+      return {
+        id: fragmentData.scId,
+        buttonType: fragmentData.scButtonType[0],
+        href:
+          locale === "en"
+            ? fragmentData.scDestinationURLEn
+            : fragmentData.scDestinationURLFr,
+        text: locale === "en" ? fragmentData.scTitleEn : fragmentData.scTitleFr,
+      };
+
+    case "SCLabs-Image-v1":
+      return {
+        id: fragmentData.scId,
+        src:
+          locale === "en"
+            ? fragmentData.scImageEn._publishUrl
+            : fragmentData.scImageFr._publishUrl,
+        alt:
+          locale === "en"
+            ? fragmentData.scImageAltTextEn
+            : fragmentData.scImageAltTextFr,
+        width: fragmentData.scImageEn.width,
+        height: fragmentData.scImageEn.height,
+        content:
+          locale === "en"
+            ? fragmentData.scImageCaptionEn.json[0].content[0].value
+            : fragmentData.scImageCaptionFr.json[0].content[0].value,
+        title:
+          locale === "en"
+            ? fragmentData.scLongDescHeadingEn
+            : fragmentData.scLongDescHeadingFr,
+        longDesc:
+          locale === "en"
+            ? fragmentData.scLongDescEn
+            : fragmentData.scLongDescFr,
+        children: generateCollapseElements(
+          locale === "en"
+            ? fragmentData.scLongDescEn.json
+            : fragmentData.scLongDescFr.json
+        ),
+      };
+    default:
+      break;
+  }
+};
+
 export default function FragmentRender(props) {
   // Create and return array of elements corresponding to
   // fragments
-  const pageFragments = props.fragments.map((fragment) => {
-    const Fragment = FRAGMENTS[fragment?._model.title];
+  const pageFragments = props.fragments.map((fragmentData) => {
+    const Fragment = FRAGMENTS[fragmentData?._model.title];
     if (!Fragment) {
       return;
     }
     return (
-      <Fragment key={uuid()} fragmentData={fragment} locale={props.locale} />
+      <Fragment
+        key={uuid()}
+        {...mapFragmentsToProps(
+          fragmentData,
+          fragmentData?._model.title,
+          props.locale
+        )}
+      />
     );
   });
 

diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.js b/components/fragment_renderer/fragment_components/ArticleCTA.js
@@ -1,37 +1,12 @@
 import { CTA } from "../../molecules/CTA";
-import TextRender from "../../text_node_renderer/TextRender";
 
-export default function ArticleCTA(props) {
+export default function ArticleCTA({ heading, body, ButtonProps, LinkProps }) {
   return (
     <CTA
-      heading={
-        props.locale === "en"
-          ? props.fragmentData.scTitleEn
-          : props.fragmentData.scTitleFr
-      }
-      body={
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scContentEn.json
-              : props.fragmentData.scContentFr.json
-          }
-          excludeH1={true}
-        />
-      }
-      ButtonProps={{
-        id: props.fragmentData.scLabsButton[0].scId,
-        text:
-          props.locale === "en"
-            ? props.fragmentData.scLabsButton[0].scTitleEn
-            : props.fragmentData.scLabsButton[0].scTitleFr,
-        href:
-          props.locale === "en"
-            ? props.fragmentData.scLabsButton[0].scDestinationURLEn
-            : props.fragmentData.scLabsButton[0].scDestinationURLFr,
-        className:
-          "w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
-      }}
+      heading={heading}
+      body={body}
+      ButtonProps={ButtonProps}
+      LinkProps={LinkProps}
       containerClass="layout-container my-4"
     />
   );

diff --git a/components/fragment_renderer/fragment_components/ArticleCTA.stories.js b/components/fragment_renderer/fragment_components/ArticleCTA.stories.js
@@ -0,0 +1,22 @@
+import * as React from "react";
+import ArticleCTA from "./ArticleCTA";
+
+export default {
+  title: "Components/Fragment_Renderer/ArticleCTA",
+  component: ArticleCTA,
+};
+
+const Template = (args) => <ArticleCTA {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: "This is a heading",
+  body: "This is a body",
+  ButtonProps: {
+    text: "Action Button",
+  },
+  LinkProps: {
+    id: "privacy-policy",
+    text: "Review the Privacy Policy",
+  },
+};
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
@@ -1,41 +1,18 @@
 import Image from "../../../node_modules/next/image";
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function BasicTextWithImage(props) {
+export default function BasicTextWithImage({ src, alt, width, height, data }) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-6 my-12">
       <div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
         <div className="flex justify-center">
           <div className="h-auto">
-            <Image
-              src={
-                props.locale === "en"
-                  ? props.fragmentData.scLabImage.scImageEn._publishUrl
-                  : props.fragmentData.scLabImage.scImageFr._publishUrl
-              }
-              // If there is no alt text, set it to an empty string to prevent warnings
-              alt={
-                props.fragmentData.scLabImage.scImageAltTextEn
-                  ? props.locale === "en"
-                    ? props.fragmentData.scLabImage.scImageAltTextEn
-                    : props.fragmentData.scLabImage.scImageAltTextFr
-                  : ""
-              }
-              width={props.fragmentData.scLabImage.scImageEn.width}
-              height={props.fragmentData.scLabImage.scImageEn.height}
-            />
+            <Image src={src} alt={alt} width={width} height={height} />
           </div>
         </div>
       </div>
       <div className="col-span-12 lg:col-span-7">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scLabContent[0].scContentEn.json
-              : props.fragmentData.scLabContent[0].scContentFr.json
-          }
-          excludeH1={true}
-        />
+        <TextRender data={data} excludeH1={true} />
       </div>
     </div>
   );

diff --git a/components/fragment_renderer/fragment_components/Button.js b/components/fragment_renderer/fragment_components/Button.js
@@ -1,33 +1,22 @@
 import { ActionButton } from "../../atoms/ActionButton";
 
-export default function Button(props) {
+export default function Button({ id, buttonType, href, text }) {
   const style =
-    props.fragmentData.scButtonType === null
+    buttonType === null
       ? "primary"
-      : props.fragmentData.scButtonType[0] ===
-        "gc:custom/decd-endc/button-type/primary"
+      : buttonType === "gc:custom/decd-endc/button-type/primary"
       ? "primary"
-      : props.fragmentData.scButtonType[0] ===
-        "gc:custom/decd-endc/button-type/secondary"
+      : buttonType === "gc:custom/decd-endc/button-type/secondary"
       ? "secondary"
       : "primary";
-
   return (
     <div className="layout-container grid grid-cols-12 gap-x-6 my-12">
       <ActionButton
-        id={props.fragmentData.scId}
+        id={id}
         style={style}
         custom="col-span-12"
-        href={
-          props.locale === "en"
-            ? props.fragmentData.scDestinationURLEn
-            : props.fragmentData.scDestinationURLFr
-        }
-        text={
-          props.locale === "en"
-            ? props.fragmentData.scTitleEn
-            : props.fragmentData.scTitleFr
-        }
+        href={href}
+        text={text}
       />
     </div>
   );

diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js
@@ -1,34 +1,26 @@
 import Image from "../../../node_modules/next/image";
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function ImageVerticalLineContent(props) {
+export default function ImageVerticalLineContent({
+  src,
+  alt,
+  width,
+  height,
+  data,
+}) {
   return (
     <div className="layout-container grid grid-cols-12 gap-x-8 my-12">
       <div className="col-span-12 xl:col-span-3 ">
         <Image
           className="w-64"
-          alt={
-            props.locale === "en"
-              ? props.fragmentData.scLabImage.scImageAltTextEn
-              : props.fragmentData.scLabImage.scImageAltTextFr
-          }
-          src={
-            props.locale === "en"
-              ? props.fragmentData.scLabImage.scImageEn._publishUrl
-              : props.fragmentData.scLabImage.scImageFr._publishUrl
-          }
-          width={props.fragmentData.scLabImage.scImageEn.width}
-          height={props.fragmentData.scLabImage.scImageEn.height}
+          alt={alt}
+          src={src}
+          width={width}
+          height={height}
         />
       </div>
       <div className="col-span-12 lg:col-span-7 xl:col-span-4 h-fit p-5 border-l-4 border-multi-blue-blue60f">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scLabContent.scContentEn.json
-              : props.fragmentData.scLabContent.scContentFr.json
-          }
-        />
+        <TextRender data={data} />
       </div>
     </div>
   );