Image vertical line content update (#1047)

* updated mockStore.js to include current projects * removed updatesData query from pages since the data is available through the pageData object, updated props value for updatesData * added unit testing for pages * updated mockStore.js to include current projects * updated mockStore.js * added experiments data import to OAS benefits navigator test * updated ImageVerticalLineContent component to include optional collapse, also updated unit test and storybook entry * updated TextWithImage component to include optional collapse in the case of image-vertical-line-content, also updated unit test and storybook entry * added CollapseData to mock store so it can be reused by each component that has a Collapse * updated FragmentRender.js to include TextRender component for fragments that have children prop, also removed unused generateCollapseElements() call, also updated unit test and storybook entry * updated ImageWithCollapse unit test to check that the collapse is opened after being clicked * Revert "updated ImageWithCollapse unit test to check that the collapse is opened after being clicked" This reverts commit 08f0333. * updated ImageWithCollapse unit test to check that the collapse is opened after being clicked, also updated storybook entry to include TextRender component * added data-testid to elements for testing * removed unused imports * added switch case to SCLabs-Comp-Content-Image-v1 that only sets title, longDesc and children props if the layout is image-vertical-line-content, without this the app was failing to build in prod * added storybook entry and unit test for TextWithImage w/Collapse * updated Collapse Data to more accurately represent data in testing * updated FragmentRender storybook entry and unit test * updated ImageVerticalLineContent component to match dashboard page design * updated ImageVerticalLineContent story and unit test * updated ImageWithCollapse story and unit test * updated TextWithImage story and unit test * commented out feature-section div so that we dont forget about it. uncomment and view in storybook to see that design matches dashboard page * [Snyk] Upgrade sharp from 0.33.3 to 0.33.4 (#1037) * fix: upgrade sharp from 0.33.3 to 0.33.4 Snyk has created this PR to upgrade sharp from 0.33.3 to 0.33.4. See this package in yarn: sharp See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * [Snyk] Upgrade @apollo/client from 3.10.1 to 3.10.4 (#1041) * fix: upgrade @apollo/client from 3.10.1 to 3.10.4 Snyk has created this PR to upgrade @apollo/client from 3.10.1 to 3.10.4. See this package in yarn: @apollo/client See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * [Snyk] Upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2 (#1042) * fix: upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2 Snyk has created this PR to upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2. See this package in yarn: @fortawesome/react-fontawesome See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * [Snyk] Upgrade @types/react from 18.3.2 to 18.3.3 (#1043) * fix: upgrade @types/react from 18.3.2 to 18.3.3 Snyk has created this PR to upgrade @types/react from 18.3.2 to 18.3.3. See this package in yarn: @types/react See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * add wrapper to ImageVerticalLineContent story --------- Co-authored-by: Kris Charbonneau <[email protected]> Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> Co-authored-by: Jordan Willis <[email protected]>
DTS-STN · Jun 20, 2024 · de4c23f · de4c23f
1 parent bf235e8
commit de4c23f
Show file tree

Hide file tree

Showing 15 changed files with 965 additions and 457 deletions.
diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js
@@ -8884,3 +8884,228 @@ export const benefitsNavigatorData = {
 export const [benefitsNavigatorUpdatesData] = [
   benefitsNavigatorData.data.sclabsPageV1ByPath.item.scLabProjectUpdates,
 ];
+
+export const CollapseData = {
+  scId: "FEATURE-DASHBOARD",
+  scImageEn: {
+    _publishUrl:
+      "https://www.canada.ca/content/dam/decd-endc/images/sclabs/client-hub/feature-dashboard-en.png",
+    width: 759,
+    height: 498,
+  },
+  scImageFr: {
+    _publishUrl:
+      "https://www.canada.ca/content/dam/decd-endc/images/sclabs/client-hub/feature-dashboard-fr.png",
+    width: 758,
+    height: 498,
+  },
+  scImageMobileEn: null,
+  scImageMobileFr: null,
+  scImageAltTextEn: "My dashboard page from My Service Canada Account",
+  scImageAltTextFr: "Page Mon tableau de bord de Mon dossier Service Canada",
+  scImageCaptionEn: {
+    json: [
+      {
+        nodeType: "paragraph",
+        content: [
+          {
+            nodeType: "text",
+            value: "Figure 1",
+          },
+        ],
+      },
+    ],
+  },
+  scImageCaptionFr: {
+    json: [
+      {
+        nodeType: "paragraph",
+        content: [
+          {
+            nodeType: "text",
+            value: "Figure 1",
+          },
+        ],
+      },
+    ],
+  },
+  scLongDescHeadingEn: "Text version of the image My dashboard",
+  scLongDescHeadingFr: "Version textuelle de l’image Mon tableau de bord",
+  scLongDescEn: {
+    json: [
+      {
+        nodeType: "paragraph",
+        content: [
+          {
+            nodeType: "text",
+            value: "The dashboard page includes: ",
+          },
+        ],
+      },
+      {
+        nodeType: "unordered-list",
+        content: [
+          {
+            nodeType: "list-item",
+            content: [
+              {
+                nodeType: "text",
+                value: "a heading with: ",
+              },
+              {
+                nodeType: "unordered-list",
+                content: [
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value:
+                          "the name of the site: My Service Canada Account ",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "an “Account” menu ",
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            nodeType: "list-item",
+            content: [
+              {
+                nodeType: "text",
+                value: "benefits, such as: ",
+              },
+              {
+                nodeType: "unordered-list",
+                content: [
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value:
+                          "Employment Insurance, with a link to applications, payments and claims, taxes, reports and documents, personal information ",
+                      },
+                      {
+                        nodeType: "line-break",
+                        content: [],
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value:
+                          "Canada Pension Plan, with a link to applications, payments, taxes, documents, provisions, personal information ",
+                      },
+                      {
+                        nodeType: "line-break",
+                        content: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  scLongDescFr: {
+    json: [
+      {
+        nodeType: "paragraph",
+        content: [
+          {
+            nodeType: "text",
+            value: "Le tableau de bord contient les éléments suivants : ",
+          },
+        ],
+      },
+      {
+        nodeType: "unordered-list",
+        content: [
+          {
+            nodeType: "list-item",
+            content: [
+              {
+                nodeType: "text",
+                value: "un en-tête avec : ",
+              },
+              {
+                nodeType: "unordered-list",
+                content: [
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "le nom du site : Mon dossier Service Canada; ",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value: "un menu « Compte »; ",
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            nodeType: "list-item",
+            content: [
+              {
+                nodeType: "text",
+                value: "des prestations, telles que : ",
+              },
+              {
+                nodeType: "unordered-list",
+                content: [
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value:
+                          "Assurance-emploi, avec un lien vers les demandes de prestations, paiements et demandes, impôts, rapports et documents, renseignements personnels; ",
+                      },
+                    ],
+                  },
+                  {
+                    nodeType: "list-item",
+                    content: [
+                      {
+                        nodeType: "text",
+                        value:
+                          "Régime de pensions du Canada, avec un lien vers les demandes de prestations, paiements, impôts, documents, clauses, renseignements personnels.",
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/components/fragment_renderer/FragmentRender.js b/components/fragment_renderer/FragmentRender.js
@@ -6,7 +6,6 @@ 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,
@@ -46,24 +45,65 @@ const mapFragmentsToProps = (fragmentData, fragmentName, locale) => {
       };
 
     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,
-      };
+      switch (fragmentData.scLabLayout) {
+        case "default":
+          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 "image-vertical-line-content":
+          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,
+            title:
+              locale === "en"
+                ? fragmentData.scLongDescHeadingEn
+                : fragmentData.scLongDescHeadingFr,
+            longDesc:
+              locale === "en"
+                ? fragmentData.scLongDescEn
+                : fragmentData.scLongDescFr,
+            children: (
+              <TextRender
+                data={
+                  locale === "en"
+                    ? fragmentData.scLongDescEn.json
+                    : fragmentData.scLongDescFr.json
+                }
+              />
+            ),
+          };
+        default:
+          break;
+      }
 
     case "SCLabs-Comp-Content-v1":
       return {
@@ -121,10 +161,14 @@ const mapFragmentsToProps = (fragmentData, fragmentName, locale) => {
           locale === "en"
             ? fragmentData.scLongDescEn
             : fragmentData.scLongDescFr,
-        children: generateCollapseElements(
-          locale === "en"
-            ? fragmentData.scLongDescEn.json
-            : fragmentData.scLongDescFr.json
+        children: (
+          <TextRender
+            data={
+              locale === "en"
+                ? fragmentData.scLongDescEn.json
+                : fragmentData.scLongDescFr.json
+            }
+          />
         ),
       };
     default: