Add new component to support new OAS article (#948)

* on project pages, add separate query for articles * create new ImageVerticalLineContent component for new oas article page * create function to support multiple layouts for a single AEM fragment * change new component name * add support for spans in text-node-renderer
DTS-STN · Dec 14, 2023 · cbdfd25 · cbdfd25
1 parent 19705ac
commit cbdfd25
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 34 deletions.
diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/components/fragment_renderer/fragment_components/BasicTextWithImage.js
@@ -0,0 +1,36 @@
+import TextRender from "../../text_node_renderer/TextRender";
+
+export default function BasicTextWithImage(props) {
+  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">
+            <img
+              src={
+                props.locale === "en"
+                  ? props.fragmentData.scLabImage.scImageEn._publishUrl
+                  : props.fragmentData.scLabImage.scImageFr._publishUrl
+              }
+              alt={
+                props.locale === "en"
+                  ? props.fragmentData.scLabImage.scImageAltTextEn
+                  : props.fragmentData.scLabImage.scImageAltTextFr
+              }
+            />
+          </div>
+        </div>
+      </div>
+      <div className="col-span-12 lg:col-span-7">
+        <TextRender
+          data={
+            props.locale === "en"
+              ? props.fragmentData.scLabContent.scContentEn.json
+              : props.fragmentData.scLabContent.scContentFr.json
+          }
+          excludeH1={true}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js
@@ -0,0 +1,32 @@
+import TextRender from "../../text_node_renderer/TextRender";
+
+export default function ImageVerticalLineContent(props) {
+  return (
+    <div className="layout-container grid grid-cols-12 gap-x-8 my-12">
+      <div className="col-span-12 xl:col-span-3 ">
+        <img
+          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
+          }
+        />
+      </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
+          }
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/fragment_renderer/fragment_components/TextWithImage.js b/components/fragment_renderer/fragment_components/TextWithImage.js
@@ -1,36 +1,23 @@
-import TextRender from "../../text_node_renderer/TextRender";
+import BasicTextWithImage from "./BasicTextWithImage";
+import ImageVerticalLineContent from "./ImageVerticalLineContent";
 
 export default function TextWithImage(props) {
-  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">
-            <img
-              src={
-                props.locale === "en"
-                  ? props.fragmentData.scLabImage.scImageEn._publishUrl
-                  : props.fragmentData.scLabImage.scImageFr._publishUrl
-              }
-              alt={
-                props.locale === "en"
-                  ? props.fragmentData.scLabImage.scImageAltTextEn
-                  : props.fragmentData.scLabImage.scImageAltTextFr
-              }
-            />
-          </div>
-        </div>
-      </div>
-      <div className="col-span-12 lg:col-span-7">
-        <TextRender
-          data={
-            props.locale === "en"
-              ? props.fragmentData.scLabContent.scContentEn.json
-              : props.fragmentData.scLabContent.scContentFr.json
-          }
-          excludeH1={true}
+  switch (props.fragmentData.scLabLayout) {
+    case "default":
+      return (
+        <BasicTextWithImage
+          fragmentData={props.fragmentData}
+          locale={props.locale}
         />
-      </div>
-    </div>
-  );
+      );
+    case "image-vertical-line-content":
+      return (
+        <ImageVerticalLineContent
+          fragmentData={props.fragmentData}
+          locale={props.locale}
+        />
+      );
+    default:
+      break;
+  }
 }
diff --git a/components/text_node_renderer/TextRecur.jsx b/components/text_node_renderer/TextRecur.jsx
@@ -6,6 +6,7 @@ import ListItem from "./nodes/ListItem";
 import OrderedList from "./nodes/OrderedList";
 import Paragraph from "./nodes/Paragraph";
 import Text from "./nodes/Text";
+import Span from "./nodes/Span";
 import UnorderedList from "./nodes/UnorderedList";
 import Link from "./nodes/Link";
 
@@ -15,6 +16,7 @@ const NODES = {
   paragraph: Paragraph,
   link: Link,
   text: Text,
+  span: Span,
   "unordered-list": UnorderedList,
   "ordered-list": OrderedList,
   "list-item": ListItem,

diff --git a/components/text_node_renderer/nodes/Span.jsx b/components/text_node_renderer/nodes/Span.jsx
@@ -0,0 +1,3 @@
+export default function Span(props) {
+  return <span>{props.children}</span>;
+}
diff --git a/pages/projects/benefits-navigator/index.js b/pages/projects/benefits-navigator/index.js
@@ -758,6 +758,10 @@ export const getStaticProps = async ({ locale }) => {
   const { data: pageData } = await aemServiceInstance.getFragment(
     "benefitsNavigatorQuery"
   );
+  // Get updates/article data
+  const { data: updatesData } = await aemServiceInstance.getFragment(
+    "benefitsNavigatorArticlesQuery"
+  );
   // get dictionary
   const { data: dictionary } = await aemServiceInstance.getFragment(
     "dictionaryQuery"
@@ -768,7 +772,7 @@ export const getStaticProps = async ({ locale }) => {
       locale: locale,
       adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
       pageData: pageData.sclabsPageV1ByPath,
-      updatesData: pageData.sclabsPageV1ByPath.item?.scLabProjectUpdates,
+      updatesData: updatesData.sclabsPageV1List.items,
       dictionary: dictionary.dictionaryV1List,
       ...(await serverSideTranslations(locale, ["common"])),
     },

diff --git a/pages/projects/oas-benefits-estimator/index.js b/pages/projects/oas-benefits-estimator/index.js
@@ -429,6 +429,10 @@ export const getStaticProps = async ({ locale }) => {
   const { data: pageData } = await aemServiceInstance.getFragment(
     "oasBenefitsEstimatorQuery"
   );
+  // Get updates/article data
+  const { data: updatesData } = await aemServiceInstance.getFragment(
+    "oasBenefitsEstimatorArticlesQuery"
+  );
   // get dictionary
   const { data: dictionary } = await aemServiceInstance.getFragment(
     "dictionaryQuery"
@@ -439,7 +443,7 @@ export const getStaticProps = async ({ locale }) => {
       locale: locale,
       adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
       pageData: pageData.sclabsPageV1ByPath,
-      updatesData: pageData.sclabsPageV1ByPath.item.scLabProjectUpdates,
+      updatesData: updatesData.sclabsPageV1List.items,
       dictionary: dictionary.dictionaryV1List,
       ...(await serverSideTranslations(locale, ["common"])),
     },