diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js index 13e89ece5b..0d00dd057b 100644 --- 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 index 7d0d69b5d0..94998761b0 100644 --- 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: ( + + ), + }; + 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: ( + ), }; default: diff --git a/components/fragment_renderer/FragmentRender.stories.js b/components/fragment_renderer/FragmentRender.stories.js index 255188bd3f..0ba0696551 100644 --- a/components/fragment_renderer/FragmentRender.stories.js +++ b/components/fragment_renderer/FragmentRender.stories.js @@ -1,5 +1,6 @@ import * as React from "react"; import FragmentRender from "./FragmentRender"; +import { CollapseData } from "../../__mocks__/mockStore"; export default { title: "Components/Fragment_Renderer/FragmentRender", @@ -11,6 +12,7 @@ const Template = (args) => ; export const ArticleCTA = Template.bind({}); export const TextWithImage = Template.bind({}); +export const TextWithImageCollapse = Template.bind({}); export const QuoteVerticalLineContent = Template.bind({}); export const TextContent = Template.bind({}); export const Button = Template.bind({}); @@ -677,284 +679,57 @@ TextWithImage.args = { ], }; -TextContent.args = { +TextWithImageCollapse.args = { locale: "en", fragments: [ { _model: { - title: "SCLabs-Content-v1", - }, - _path: - "/content/dam/decd-endc/content-fragments/sclabs/components/tooltips/information-alpha", - scId: "INFORMATION-ALPHA-SCLABS", - scTitleEn: "Information", - scTitleFr: "Information", - scContentEn: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "Alpha:", - format: { - variants: ["strong"], - }, - }, - { - nodeType: "text", - value: - " Building a draft tool or service and testing it to see if it meets needs.", - }, - ], - }, - ], - }, - scContentFr: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "Alpha : ", - format: { - variants: ["strong"], - }, - }, - { - nodeType: "text", - value: - "Construire une première version d’un outil ou d’un service et le tester pour savoir s’il répond aux besoins.", - }, - ], - }, - ], - }, - }, - ], -}; - -ImageWithCollapse.args = { - locale: "en", - fragments: [ - { - _model: { - title: "SCLabs-Image-v1", - }, - scId: "NEWS-IMAGE", - scImageEn: { - _publishUrl: - "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/news-en.png", - width: 1363, - height: 890, - }, - scImageFr: { - _publishUrl: - "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/news-fr.png", - width: 1363, - height: 890, - }, - scImageMobileEn: null, - scImageMobileFr: null, - scImageAltTextEn: "Benefit news and updates page", - scImageAltTextFr: "Page Nouvelles et mises à jour sur les prestations", - scImageCaptionEn: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "Figure 1", - }, - ], - }, - ], - }, - scImageCaptionFr: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "Figure 1", - }, - ], - }, - ], + title: "SCLabs-Comp-Content-Image-v1", }, - scLongDescHeadingEn: "Text version of the image Benefit news and updates", - scLongDescHeadingFr: - "Version textuelle de l'image Nouvelles et mises à jour sur les prestations", - scLongDescEn: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: "The Benefit news and updates page contains 3 sections:", - }, - ], - }, - { - nodeType: "unordered-list", - content: [ + scId: "NAVIGATOR-DIFFICULTIES-MAIN", + scLabContent: [ + { + scId: "FEATURE-DASHBOARD", + scContentEn: { + json: [ { - nodeType: "list-item", + nodeType: "header", + style: "h3", content: [ { nodeType: "text", - value: "a search bar to search by benefit name or source", + value: "Information is clearly presented ", }, ], }, { - nodeType: "list-item", + nodeType: "paragraph", content: [ { nodeType: "text", - value: "a list of benefits to filter the news:", - }, - { - nodeType: "unordered-list", - content: [ - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Old Age Security", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Guaranteed Income Supplement", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Allowance for the survivor", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Canada Pension Plan", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Post-Retirement Benefit", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Employment Insurance", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Canada Dental Benefit", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Home and Community program care", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Disability tax credit", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Refund of Federal Excise Tax on Gas", - }, - ], - }, - ], + value: "On the dashboard, you will find: ", }, ], }, { - nodeType: "list-item", + nodeType: "unordered-list", content: [ { - nodeType: "text", - value: - "a list of benefit news and updates with details. For example:", - }, - { - nodeType: "unordered-list", + nodeType: "list-item", content: [ { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: - "Service disruption - Service Canada June 29, 2023 (update)", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: - "OAS pension amounts - July to September 2023 (update)", - }, - ], + nodeType: "text", + value: "all your benefits on the same page ", }, + ], + }, + { + nodeType: "list-item", + content: [ { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: - "Grocery rebate will be issued July 5, 2023 (new)", - }, - ], + nodeType: "text", + value: + "a menu to access your personal information and security settings", }, ], }, @@ -962,114 +737,131 @@ ImageWithCollapse.args = { }, ], }, - ], - }, - scLongDescFr: { - json: [ - { - nodeType: "paragraph", - content: [ - { - nodeType: "text", - value: - "La page Nouvelles et mises à jour sur les prestations contient 3 sections :", - }, - ], - }, - { - nodeType: "unordered-list", - content: [ + scContentFr: { + json: [ { - nodeType: "list-item", + nodeType: "header", + style: "h3", content: [ { nodeType: "text", - value: - "une barre de recherche où on peut rechercher par le nom de la prestation ou la source", + value: "Information clairement présentée", + }, + { + nodeType: "line-break", + content: [], }, ], }, { - nodeType: "list-item", + nodeType: "paragraph", content: [ { nodeType: "text", - value: - "une liste de prestations pour filtrer les nouvelles :", + value: "Sur le tableau de bord, vous trouverez :", }, + ], + }, + { + nodeType: "unordered-list", + content: [ { - nodeType: "unordered-list", + nodeType: "list-item", content: [ { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Sécurité de la vieillesse", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Supplément de revenu garanti", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Allocation au survivant", - }, - ], - }, - { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Régime de pensions du Canada", - }, - ], + nodeType: "text", + value: "toutes vos prestations sur la même page;", }, + ], + }, + { + nodeType: "list-item", + content: [ { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Post retirement benefit", - }, - ], + nodeType: "text", + value: + "un menu pour accéder à vos informations personnelles et à vos paramètres de sécurité.", }, + ], + }, + ], + }, + ], + }, + scFragments: [ + { + 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: null, + }, + scImageCaptionFr: { + json: null, + }, + scLongDescHeadingEn: "Text version of the image My dashboard", + scLongDescHeadingFr: + "Version textuelle de l’image Mon tableau de bord", + scLongDescEn: { + json: [ + { + nodeType: "paragraph", + content: [ { - nodeType: "list-item", - content: [ - { - nodeType: "text", - value: "Assurance-emploi", - }, - ], + nodeType: "text", + value: "The dashboard page includes: ", }, + ], + }, + { + nodeType: "unordered-list", + content: [ { nodeType: "list-item", content: [ { nodeType: "text", - value: "Prestation dentaire canadienne", + value: "a heading with: ", }, - ], - }, - { - nodeType: "list-item", - content: [ { - nodeType: "text", - value: - "Programme de soins à domicile et en milieu communautaire", + 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 ", + }, + ], + }, + ], }, ], }, @@ -1078,18 +870,40 @@ ImageWithCollapse.args = { content: [ { nodeType: "text", - value: - "Crédit d’impôt pour les personnes handicapées", + value: "benefits, such as: ", }, - ], - }, - { - nodeType: "list-item", - content: [ { - nodeType: "text", - value: - "Remboursement de la taxe d'accise sur l'essence", + 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: [], + }, + ], + }, + ], }, ], }, @@ -1097,13 +911,17 @@ ImageWithCollapse.args = { }, ], }, - { - nodeType: "list-item", - content: [ + scLongDescFr: { + json: [ { - nodeType: "text", - value: - "une liste de nouvelles et de mises à jour. Par exemple :", + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Le tableau de bord contient les éléments suivants : ", + }, + ], }, { nodeType: "unordered-list", @@ -1113,18 +931,31 @@ ImageWithCollapse.args = { content: [ { nodeType: "text", - value: - "Interruption de service : Service Canada, 29 juin 2023 (mise à jour)", + value: "un en-tête avec : ", }, - ], - }, - { - nodeType: "list-item", - content: [ { - nodeType: "text", - value: - "Montant de la pension de la Sécurité de la vieillesse de juillet à septembre 2023 (mise à jour)", + 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 »; ", + }, + ], + }, + ], }, ], }, @@ -1133,8 +964,32 @@ ImageWithCollapse.args = { content: [ { nodeType: "text", - value: - "Le remboursement pour l’épicerie sera émis le 5 juillet 2023 (nouvelle)", + 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.", + }, + ], + }, + ], }, ], }, @@ -1142,10 +997,155 @@ ImageWithCollapse.args = { }, ], }, + }, + ], + }, + ], + scLabImage: { + 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: null, + }, + scImageCaptionFr: { + json: null, + }, + }, + scLabLayout: "image-vertical-line-content", + scLongDescHeadingEn: CollapseData.scLongDescHeadingEn, + scLongDescHeadingFr: CollapseData.scLongDescHeadingFr, + scLongDescEn: CollapseData.scLongDescEn, + scLongDescFr: CollapseData.scLongDescFr, + }, + ], +}; + +TextContent.args = { + locale: "en", + fragments: [ + { + _model: { + title: "SCLabs-Content-v1", + }, + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/tooltips/information-alpha", + scId: "INFORMATION-ALPHA-SCLABS", + scTitleEn: "Information", + scTitleFr: "Information", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Alpha:", + format: { + variants: ["strong"], + }, + }, + { + nodeType: "text", + value: + " Building a draft tool or service and testing it to see if it meets needs.", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Alpha : ", + format: { + variants: ["strong"], + }, + }, + { + nodeType: "text", + value: + "Construire une première version d’un outil ou d’un service et le tester pour savoir s’il répond aux besoins.", + }, + ], + }, + ], + }, + }, + ], +}; + +ImageWithCollapse.args = { + locale: "en", + fragments: [ + { + _model: { + title: "SCLabs-Image-v1", + }, + scId: "NEWS-IMAGE", + scImageEn: { + _publishUrl: CollapseData.scImageEn._publishUrl, + width: CollapseData.scImageEn.width, + height: CollapseData.scImageEn.height, + }, + scImageFr: { + _publishUrl: + "https://www.canada.ca/content/dam/decd-endc/images/sclabs/benefits-navigator/news-fr.png", + width: 1363, + height: 890, + }, + scImageMobileEn: null, + scImageMobileFr: null, + scImageAltTextEn: "Benefit news and updates page", + scImageAltTextFr: "Page Nouvelles et mises à jour sur les prestations", + scImageCaptionEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Figure 1", + }, + ], + }, + ], + }, + scImageCaptionFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "Figure 1", + }, ], }, ], }, + scLongDescHeadingEn: CollapseData.scLongDescHeadingEn, + scLongDescHeadingFr: CollapseData.scLongDescHeadingFr, + scLongDescEn: CollapseData.scLongDescEn, + scLongDescFr: CollapseData.scLongDescFr, }, ], }; diff --git a/components/fragment_renderer/FragmentRender.test.js b/components/fragment_renderer/FragmentRender.test.js index 3208b292b1..0db26f4671 100644 --- a/components/fragment_renderer/FragmentRender.test.js +++ b/components/fragment_renderer/FragmentRender.test.js @@ -2,14 +2,17 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import FragmentRender from "./FragmentRender"; import { axe, toHaveNoViolations } from "jest-axe"; +import { userEvent } from "../../node_modules/@storybook/test/dist/index"; import { ArticleCTA, TextWithImage, + TextWithImageCollapse, QuoteVerticalLineContent, ImageWithCollapse, Button, TextContent, } from "./FragmentRender.stories"; + expect.extend(toHaveNoViolations); describe("FragmentRender", () => { @@ -29,6 +32,23 @@ describe("FragmentRender", () => { const results = await axe(container); expect(results).toHaveNoViolations(); }); + it("renders TextWithImageCollapse component", async () => { + const { container } = render( + + ); + expect(screen.getByText("Information is clearly presented")) + .toBeInTheDocument; + + expect( + screen.getByAltText("My dashboard page from My Service Canada Account") + ).toBeInTheDocument; + await userEvent.click(screen.getByTestId("summary")); + const details = screen.getByTestId("details"); + const open = await details.hasAttribute("open"); + expect(open).toBeTruthy(); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); it("renders QuoteVerticalLineContent component", async () => { const { container } = render( @@ -61,10 +81,16 @@ describe("FragmentRender", () => { const { container } = render( ); + expect(screen.getByText("Figure 1")).toBeInTheDocument(); expect(screen.getByText((content) => content.startsWith("Text version"))) .toBeInTheDocument; + expect(screen.getByText("Figure 1")).toBeInTheDocument; expect(screen.getByAltText("Benefit news and updates page")) .toBeInTheDocument; + await userEvent.click(screen.getByTestId("summary")); + const details = screen.getByTestId("details"); + const open = await details.hasAttribute("open"); + expect(open).toBeTruthy(); const results = await axe(container); expect(results).toHaveNoViolations(); }); diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js index 5219f901e9..86296978c9 100644 --- a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js +++ b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.js @@ -1,5 +1,6 @@ import Image from "next/image"; import TextRender from "../../text_node_renderer/TextRender"; +import { Collapse } from "../../molecules/Collapse"; export default function ImageVerticalLineContent({ src, @@ -7,21 +8,38 @@ export default function ImageVerticalLineContent({ width, height, data, + longDesc, + title, + children, }) { return ( -
-
+
+
{alt}
-
- +
+
+ +
+ {longDesc ? ( +
+ +
+ ) : ( + "" + )}
); } diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js index 67bc8a7f16..79ed367feb 100644 --- a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js +++ b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.stories.js @@ -1,31 +1,130 @@ import * as React from "react"; import ImageVerticalLineContent from "./ImageVerticalLineContent"; +import TextRender from "../../text_node_renderer/TextRender"; +import { CollapseData } from "../../../__mocks__/mockStore"; export default { title: "Components/Fragment_Renderer/Fragment_Components/ImageVerticalLineContent", component: ImageVerticalLineContent, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; const Template = (args) => ; export const Default = Template.bind({}); +export const WithCollapse = Template.bind({}); Default.args = { id: "ImageVerticalLineContent", - src: "/image2.png", + src: CollapseData.scImageEn._publishUrl, alt: "image alt text", - width: 359, - height: 260, + width: CollapseData.scImageEn.width, + height: CollapseData.scImageEn.height, data: [ + { + nodeType: "header", + style: "h3", + content: [ + { + nodeType: "text", + value: "Information is clearly presented ", + }, + ], + }, { nodeType: "paragraph", content: [ { nodeType: "text", - value: - "Every week, our product team meets for Feedback Friday to sort through all the new survey responses. We look at the ratings and comments people shared with us about their experience. ", + value: "On the dashboard, you will find: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "all your benefits on the same page ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "a menu to access your personal information and security settings", + }, + ], + }, + ], + }, + ], +}; + +WithCollapse.args = { + id: "ImageVerticalLineContent", + src: CollapseData.scImageEn._publishUrl, + alt: "image alt text", + width: 759, + height: 497, + data: [ + { + nodeType: "header", + style: "h3", + content: [ + { + nodeType: "text", + value: "Information is clearly presented ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "On the dashboard, you will find: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "all your benefits on the same page ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "a menu to access your personal information and security settings", + }, + ], }, ], }, ], + title: "Example Title", + longDesc: "Test Description", + children: , }; diff --git a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js index 34ce010335..98a97dd75b 100644 --- a/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js +++ b/components/fragment_renderer/fragment_components/ImageVerticalLineContent.test.js @@ -1,8 +1,9 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import ImageVerticalLineContent from "./ImageVerticalLineContent"; -import { Default } from "./ImageVerticalLineContent.stories.js"; +import { Default, WithCollapse } from "./ImageVerticalLineContent.stories.js"; import { axe, toHaveNoViolations } from "jest-axe"; +import { userEvent } from "../../../node_modules/@storybook/test/dist/index"; expect.extend(toHaveNoViolations); @@ -13,9 +14,24 @@ describe("ImageVerticalLineContent", () => { ); expect(screen.getByAltText("image alt text")).toBeInTheDocument(); expect( - screen.getByText((content) => content.startsWith("Every week")) + screen.getByText((content) => content.startsWith("Information")) ).toBeInTheDocument(); const results = await axe(container); expect(results).toHaveNoViolations(); }); + test("renders ImageVerticalLineContent with Collapse", async () => { + const { container } = render( + + ); + expect(screen.getByAltText("image alt text")).toBeInTheDocument(); + expect( + screen.getByText((content) => content.startsWith("Information")) + ).toBeInTheDocument(); + await userEvent.click(screen.getByTestId("summary")); + const details = screen.getByTestId("details"); + const open = await details.hasAttribute("open"); + expect(open).toBeTruthy(); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); }); diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js index 419e3d2399..ee64924bae 100644 --- a/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js +++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.stories.js @@ -1,5 +1,7 @@ import * as React from "react"; import ImageWithCollapse from "./ImageWithCollapse"; +import TextRender from "../../text_node_renderer/TextRender"; +import { CollapseData } from "../../../__mocks__/mockStore"; export default { title: "Components/Fragment_Renderer/Fragment_Components/ImageWithCollapse", @@ -11,24 +13,12 @@ const Template = (args) => ; export const Default = Template.bind({}); Default.args = { id: "ImageWithCollapse", - src: "/image2.png", + src: CollapseData.scImageEn._publishUrl, alt: "image alt text", - width: 359, - height: 260, - content: - "Every week, our product team meets for Feedback Friday to sort through all the new survey responses. We look at the ratings and comments people shared with us about their experience. ", + width: CollapseData.scImageEn.width, + height: CollapseData.scImageEn.height, + content: CollapseData.scImageCaptionEn.json[0].content[0].value, title: "Example Title", longDesc: "Test Description", - children: [ -

First paragraph tag

, -

Second paragraph tag

, -
    -
  • Unordered list item 1
    • -
  • Unordered list item 2
    • -
, -
    -
  1. Ordered list item 1
    2. -
  2. Ordered list item 2
    3. -
, - ], + children: , }; diff --git a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js index 669e4080e9..3bfcc1f2f0 100644 --- a/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js +++ b/components/fragment_renderer/fragment_components/ImageWithCollapse.test.js @@ -11,9 +11,7 @@ describe("ImageWithCollapse", () => { test("renders ImageWithCollapse component with default props", async () => { const { container } = render(); expect(screen.getByAltText("image alt text")).toBeInTheDocument(); - expect( - screen.getByText((content) => content.startsWith("Every")) - ).toBeInTheDocument(); + expect(screen.getByText("Figure 1")).toBeInTheDocument; expect( screen.getByText((content) => content.startsWith("Example Title")) ).toBeInTheDocument(); @@ -23,32 +21,10 @@ describe("ImageWithCollapse", () => { test("on click renders Collapse component with default props", async () => { const { container } = render(); - const collapse = screen.getByText((content) => - content.startsWith("Example Title") - ); - userEvent.click(collapse); - expect( - screen.getByText((content) => content.startsWith("First")) - ).toBeInTheDocument(); - expect( - screen.getByText((content) => content.startsWith("Unordered list item 1")) - ).toBeInTheDocument(); - expect( - screen.getByText((content) => content.startsWith("Ordered list item 1")) - ).toBeInTheDocument(); - - // const details = screen.getByTestId("details"); - // const div = screen.getByTestId("div"); - // const paragraph = div.getElementsByTagName("p")[0]; - // const unordered = div.getElementsByTagName("ul")[0]; - // const ordered = div.getElementsByTagName("ol")[0]; - // userEvent.click(details); - // const open = details.hasAttribute("open") - // expect( await open).toBeTruthy(); - // expect(await paragraph).toBeVisible(); - // expect(await unordered).toBeVisible(); - // expect(await ordered).toBeVisible(); - + await userEvent.click(screen.getByTestId("summary")); + const details = screen.getByTestId("details"); + const open = await details.hasAttribute("open"); + expect(open).toBeTruthy(); const results = await axe(container); expect(results).toHaveNoViolations(); }); diff --git a/components/fragment_renderer/fragment_components/TextWithImage.js b/components/fragment_renderer/fragment_components/TextWithImage.js index 9546e51bd2..c78e7c2451 100644 --- a/components/fragment_renderer/fragment_components/TextWithImage.js +++ b/components/fragment_renderer/fragment_components/TextWithImage.js @@ -8,6 +8,9 @@ export default function TextWithImage({ height, data, layout, + title, + longDesc, + children, }) { switch (layout) { case "default": @@ -28,6 +31,9 @@ export default function TextWithImage({ width={width} height={height} data={data} + title={title} + longDesc={longDesc} + children={children} /> ); default: diff --git a/components/fragment_renderer/fragment_components/TextWithImage.stories.js b/components/fragment_renderer/fragment_components/TextWithImage.stories.js index ed07d59cb1..f05bb623eb 100644 --- a/components/fragment_renderer/fragment_components/TextWithImage.stories.js +++ b/components/fragment_renderer/fragment_components/TextWithImage.stories.js @@ -1,5 +1,7 @@ import * as React from "react"; import TextWithImage from "./TextWithImage"; +import TextRender from "../../text_node_renderer/TextRender"; +import { CollapseData } from "../../../__mocks__/mockStore"; export default { title: "Components/Fragment_Renderer/Fragment_Components/TextWithImage", @@ -10,12 +12,13 @@ const Template = (args) => ; export const Default = Template.bind({}); export const Vertical = Template.bind({}); +export const VerticalWithCollapse = Template.bind({}); Default.args = { src: "/image2.png", alt: "image alt text", - width: 359, - height: 260, + width: 759, + height: 498, layout: "default", data: [ { @@ -32,21 +35,110 @@ Default.args = { }; Vertical.args = { - src: "/image2.png", + src: CollapseData.scImageEn._publishUrl, alt: "image alt text", - width: 359, - height: 260, + width: CollapseData.scImageEn.width, + height: CollapseData.scImageEn.height, layout: "image-vertical-line-content", data: [ + { + nodeType: "header", + style: "h3", + content: [ + { + nodeType: "text", + value: "Information is clearly presented ", + }, + ], + }, { nodeType: "paragraph", content: [ { nodeType: "text", - value: - "Every week, our product team meets for Feedback Friday to sort through all the new survey responses. We look at the ratings and comments people shared with us about their experience. ", + value: "On the dashboard, you will find: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "all your benefits on the same page ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "a menu to access your personal information and security settings", + }, + ], + }, + ], + }, + ], +}; + +VerticalWithCollapse.args = { + src: CollapseData.scImageEn._publishUrl, + alt: "image alt text", + width: CollapseData.scImageEn.width, + height: CollapseData.scImageEn.height, + layout: "image-vertical-line-content", + data: [ + { + nodeType: "header", + style: "h3", + content: [ + { + nodeType: "text", + value: "Information is clearly presented ", + }, + ], + }, + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: "On the dashboard, you will find: ", + }, + ], + }, + { + nodeType: "unordered-list", + content: [ + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: "all your benefits on the same page ", + }, + ], + }, + { + nodeType: "list-item", + content: [ + { + nodeType: "text", + value: + "a menu to access your personal information and security settings", + }, + ], }, ], }, ], + title: "Example Title", + longDesc: "Test Description", + children: , }; diff --git a/components/fragment_renderer/fragment_components/TextWithImage.test.js b/components/fragment_renderer/fragment_components/TextWithImage.test.js index 303d0085ea..2adf364b51 100644 --- a/components/fragment_renderer/fragment_components/TextWithImage.test.js +++ b/components/fragment_renderer/fragment_components/TextWithImage.test.js @@ -1,9 +1,13 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import TextWithImage from "./TextWithImage"; -import { Default } from "./TextWithImage.stories.js"; -import { Vertical } from "./TextWithImage.stories.js"; +import { + Default, + Vertical, + VerticalWithCollapse, +} from "./TextWithImage.stories.js"; import { axe, toHaveNoViolations } from "jest-axe"; +import { userEvent } from "../../../node_modules/@storybook/test/dist/index"; expect.extend(toHaveNoViolations); @@ -18,11 +22,23 @@ describe("TextWithImage", () => { expect(results).toHaveNoViolations(); }); test("renders TextWithImage component with Vertical props", async () => { - const { container } = render(); + render(); expect(screen.getByAltText("image alt text")).toBeInTheDocument(); expect( - screen.getByText((content) => content.startsWith("Every week")) + screen.getByText((content) => content.startsWith("Information")) + ).toBeInTheDocument(); + }); + test("renders TextWithImage component with Collapse props", async () => { + const { container } = render( + + ); + expect( + screen.getByText((content) => content.startsWith("Information")) ).toBeInTheDocument(); + await userEvent.click(screen.getByTestId("summary")); + const details = screen.getByTestId("details"); + const open = await details.hasAttribute("open"); + expect(open).toBeTruthy(); const results = await axe(container); expect(results).toHaveNoViolations(); }); diff --git a/components/molecules/Collapse.js b/components/molecules/Collapse.js index 394e77ec1c..63b9d60386 100644 --- a/components/molecules/Collapse.js +++ b/components/molecules/Collapse.js @@ -7,9 +7,11 @@ export function Collapse(props) { key={id} id={id} className="mb-[5px] text-multi-neutrals-grey100 leading-[33px] text-mobileh5 font-body" + data-testid="details" > {title} diff --git a/pages/projects/benefits-navigator/index.js b/pages/projects/benefits-navigator/index.js index 738c1766d5..46665a22d7 100644 --- a/pages/projects/benefits-navigator/index.js +++ b/pages/projects/benefits-navigator/index.js @@ -8,7 +8,6 @@ import Card from "../../../components/molecules/Card"; import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; import { Heading } from "../../../components/molecules/Heading"; import { Collapse } from "../../../components/molecules/Collapse"; -import { generateCollapseElements } from "../../../lib/utils/generateCollapseElements"; import Image from "next/image"; import stageDictionary from "../../../lib/utils/stageDictionary"; import TextRender from "../../../components/text_node_renderer/TextRender"; diff --git a/pages/projects/dashboard/index.js b/pages/projects/dashboard/index.js index 6b67c7bbad..a4c3c07d7c 100644 --- a/pages/projects/dashboard/index.js +++ b/pages/projects/dashboard/index.js @@ -7,7 +7,6 @@ import { ProjectInfo } from "../../../components/atoms/ProjectInfo"; import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; import { Heading } from "../../../components/molecules/Heading"; import { Collapse } from "../../../components/molecules/Collapse"; -import { generateCollapseElements } from "../../../lib/utils/generateCollapseElements"; import { ActionButton } from "../../../components/atoms/ActionButton"; import Image from "next/image"; import stageDictionary from "../../../lib/utils/stageDictionary";