+
{
) : (
""
)}
-
- {props.description}
-
+ {props.htmlDesc ? (
+ props.htmlDesc
+ ) : (
+
+ {props.description}
+
+ )}
{props.showButton ? (
{
+ return (
+
+
+
+ );
+};
+
+export function ExploreProjects(props) {
+ //initialize props
+ const { locale, projects } = props;
+ //create cards for current projects
+ const displayCurrentProjects = projects.map((project) =>
+ createCard(locale, project)
+ );
+ return (
+ //create html for "Explore other projects" section
+
+
+
+ {locale === "en"
+ ? "Explore other projects"
+ : "Explorer d'autres projets"}
+
+
+ {/*iterate over filteredProjects array and create card for each project */}
+ {displayCurrentProjects}
+
+
+
+ {locale === "en" ? "Project:" : "Projet :"}
+
+ {`${update.scDateModifiedOverwrite}`}
+
+
+
+ {locale === "en"
+ ? dictionary.items[11].scTermEn
+ : dictionary.items[11].scTermFr}
+
+ {`${update.scDateModifiedOverwrite}`}
+
+
+ }
+ />
+
+ );
+ });
+
+ return (
+
+ );
+}
diff --git a/components/organisms/ExploreUpdates.stories.js b/components/organisms/ExploreUpdates.stories.js
new file mode 100644
index 0000000000..aee7d53cf6
--- /dev/null
+++ b/components/organisms/ExploreUpdates.stories.js
@@ -0,0 +1,258 @@
+import React from "react";
+import { ExploreUpdates } from "./ExploreUpdates";
+
+export default {
+ title: "Components/organisms/ExploreUpdates",
+ component: ExploreUpdates,
+};
+
+const Template = (args) =>
;
+
+export const Default = Template.bind({});
+
+Default.args = {
+ locale: "en",
+ heading: "Explore more updates",
+ updatesData: [
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/oas-benefits-estimator/project-updates/how-feedback-is-shaping-the-estimator",
+ scId: "HOW-FEEDBACK-SHAPING-ESTIMATOR",
+ scPageNameEn: "/en/projects/oas-benefits-estimator/how-feedback-shaping",
+ scPageNameFr:
+ "/fr/projets/estimateur-prestations-sv/faconner-grace-retroaction",
+ scTitleEn: "How feedback is shaping the estimator",
+ scTitleFr: "Façonner l’estimateur grâce à la rétroaction",
+ scBreadcrumbParentPages: [
+ {
+ scTitleEn: "Service Canada Labs",
+ scTitleFr: "Laboratoires de Service Canada",
+ scPageNameEn: "/en/home",
+ scPageNameFr: "/fr/accueil",
+ },
+ {
+ scTitleEn: "Old Age Security Benefits Estimator",
+ scTitleFr:
+ "Estimateur des prestations de la Sécurité de la vieillesse",
+ scPageNameEn: "/en/projects/oas-benefits-estimator",
+ scPageNameFr: "/fr/projets/estimateur-prestations-sv",
+ },
+ ],
+ scSubject: ["gc:subjects/gv-government-and-politics/government-services"],
+ scKeywordsEn: "feedback, benefits, estimator",
+ scKeywordsFr: "rétroaction, prestations, estimateur",
+ scContentType: [
+ "gc:content-types/promotional-material-featured-articles",
+ ],
+ scOwner: ["gc:institutions/service-canada"],
+ scDateModifiedOverwrite: "2023-12-12",
+ scSocialMediaImageEn: {
+ _path:
+ "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg",
+ _publishUrl:
+ "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg",
+ width: 2670,
+ height: 1543,
+ },
+ scSocialMediaImageFr: {
+ _path:
+ "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg",
+ _publishUrl:
+ "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/feedback.jpg",
+ width: 2670,
+ height: 1543,
+ },
+ scSocialMediaImageAltTextEn:
+ " Different kinds of feedback being gathered",
+ scSocialMediaImageAltTextFr:
+ " Un rassemblement de différents types de rétroaction",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/pages/projects/oas-benefits-estimator/project-updates/what-we-learned",
+ scId: "WHAT-WE-LEARNED",
+ scPageNameEn: "/en/projects/oas-benefits-estimator/what-we-learned",
+ scPageNameFr:
+ "/fr/projets/estimateur-prestations-sv/ce-que-nous-avons-appris",
+ scTitleEn:
+ "What we learned on Service Canada Labs before going live on Canada.ca",
+ scTitleFr:
+ "Ce que nous avons appris dans les laboratoires avant notre lancement sur Canada.ca",
+ scBreadcrumbParentPages: [
+ {
+ scTitleEn: "Service Canada Labs",
+ scTitleFr: "Laboratoires de Service Canada",
+ scPageNameEn: "/en/home",
+ scPageNameFr: "/fr/accueil",
+ },
+ {
+ scTitleEn: "Old Age Security Benefits Estimator",
+ scTitleFr:
+ "Estimateur des prestations de la Sécurité de la vieillesse",
+ scPageNameEn: "/en/projects/oas-benefits-estimator",
+ scPageNameFr: "/fr/projets/estimateur-prestations-sv",
+ },
+ ],
+ scContentType: [
+ "gc:content-types/promotional-material-featured-articles",
+ ],
+ scDateModifiedOverwrite: "2023-07-02",
+ scSocialMediaImageEn: {
+ _path:
+ "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg",
+ _publishUrl:
+ "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg",
+ width: 2670,
+ height: 1543,
+ },
+ scSocialMediaImageFr: {
+ _path:
+ "/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg",
+ _publishUrl:
+ "https://www.canada.ca/content/dam/decd-endc/images/sclabs/oas-benefits-estimator/what-we-learned.jpg",
+ width: 2670,
+ height: 1543,
+ },
+ scSocialMediaImageAltTextEn: "People giving feedback",
+ scSocialMediaImageAltTextFr: "Personnes qui donnent de la rétroaction",
+ },
+ ],
+ dictionary: {
+ items: [
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sch/dictionary/opens-in-a-new-tab",
+ scId: "opens-in-a-new-tab",
+ scTermEn: "(Opens in a new tab)",
+ scTermFr: "(S'ouvre dans un nouvel onglet)",
+ },
+ {
+ _path: "/content/dam/decd-endc/content-fragments/sclabs/dictionary/all",
+ scId: "ALL",
+ scTermEn: "All",
+ scTermFr: "Tous",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/ended",
+ scId: "ENDED",
+ scTermEn: "Ended",
+ scTermFr: "Fin",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by",
+ scId: "FILTER-BY",
+ scTermEn: "Filter by:",
+ scTermFr: "Filtrer par :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by-project",
+ scId: "DICTIONARY-FILTER-BY-PROJECT",
+ scTermEn: "Filter by project",
+ scTermFr: "Filtrer par projet",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/filter-by-project-status",
+ scId: "DICTIONARY-FILTER-BY-PROJECT-STATUS",
+ scTermEn: "Filter by project status",
+ scTermFr: "Filtrer par état du projet",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/last-updated",
+ scId: "LAST-UPDATED",
+ scTermEn: "Last updated:",
+ scTermFr: "Dernière mise à jour :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/on-this-page",
+ scId: "ON-THIS-PAGE",
+ scTermEn: "On this page",
+ scTermFr: "Sur cette page",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/optional-information",
+ scId: "OPTIONAL-INFORMATION",
+ scTermEn: "Optional information",
+ scTermFr: "Renseignements optionnels",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/past-projects",
+ scId: "PAST-PROJECTS",
+ scTermEn: "Past projects",
+ scTermFr: "Projets antérieurs",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/paused",
+ scId: "PAUSED",
+ scTermEn: "Paused:",
+ scTermFr: "Interrompu :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/posted-on",
+ scId: "POSTED-ON",
+ scTermEn: "Posted on:",
+ scTermFr: "Publié le :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/project-stage",
+ scId: "PROJECT-STAGE",
+ scTermEn: "Project stage:",
+ scTermFr: "Phase du projet :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/project-updates",
+ scId: "PROJECT-UPDATES",
+ scTermEn: "Project updates",
+ scTermFr: "Mises à jour du projet",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/required-information",
+ scId: "REQUIRED-INFORMATION",
+ scTermEn: "Required information",
+ scTermFr: "Renseignements obligatoires",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/see-all-updates-project",
+ scId: "DICTIONARY-SEE-ALL-UPDATES-PROJECT",
+ scTermEn: "See all updates about this project",
+ scTermFr: "Consulter toutes les mises à jour de ce projet",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/started",
+ scId: "STARTED",
+ scTermEn: "Started:",
+ scTermFr: "Début :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/summary",
+ scId: "SUMMARY",
+ scTermEn: "Summary:",
+ scTermFr: "Résumé :",
+ },
+ {
+ _path:
+ "/content/dam/decd-endc/content-fragments/sclabs/dictionary/upcoming-projects",
+ scId: "UPCOMING-PROJECTS",
+ scTermEn: "Upcoming projects",
+ scTermFr: "Projets à venir",
+ },
+ ],
+ },
+ href: "#",
+ linkLabel: "See more updates",
+};
diff --git a/components/organisms/ExploreUpdates.test.js b/components/organisms/ExploreUpdates.test.js
new file mode 100644
index 0000000000..3c07b06699
--- /dev/null
+++ b/components/organisms/ExploreUpdates.test.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Default } from "./ExploreUpdates.stories.js";
+import { axe, toHaveNoViolations } from "jest-axe";
+import { ExploreUpdates } from "./ExploreUpdates";
+
+expect.extend(toHaveNoViolations);
+
+describe("ExploreUpdates", () => {
+ test("renders properly with default props", async () => {
+ const { container } = render(
);
+ expect(screen.getByText("Explore more updates")).toBeInTheDocument();
+ expect(
+ screen.getByText("How feedback is shaping the estimator")
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ "What we learned on Service Canada Labs before going live on Canada.ca"
+ )
+ ).toBeInTheDocument();
+ expect(screen.getAllByText("Project:")[0]).toBeInTheDocument();
+ expect(screen.getAllByText("Posted on:")[0]).toBeInTheDocument();
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+});
diff --git a/components/organisms/Footer.js b/components/organisms/Footer.js
index c5367ba6ac..799b2c3ab1 100644
--- a/components/organisms/Footer.js
+++ b/components/organisms/Footer.js
@@ -38,7 +38,9 @@ export const Footer = ({
preFooterTitle,
preFooterLink,
preFooterLinkText,
+ contactLink = "https://www.canada.ca/en/contact.html",
lang,
+ withMainBand = true,
}) => {
return (
+ {filterItems(props.updatesData, pageData.scId).length !== 0 ? (
+
+ ) : null}
);
@@ -99,14 +131,14 @@ export async function getStaticPaths() {
export const getStaticProps = async ({ locale, params }) => {
// Get pages data
- const { data } = await aemServiceInstance.getFragment(
+ const { data: updatesData } = await aemServiceInstance.getFragment(
"benefitsNavigatorArticlesQuery"
);
// get dictionary
const { data: dictionary } = await aemServiceInstance.getFragment(
"dictionaryQuery"
);
- const pages = data.sclabsPageV1List.items;
+ const pages = updatesData.sclabsPageV1List.items;
// Return page data that matches the current page being built
const pageData = pages.filter((page) => {
return (
@@ -124,8 +156,10 @@ export const getStaticProps = async ({ locale, params }) => {
return {
props: {
+ key: params.id,
locale: locale,
pageData: pageData[0],
+ updatesData: updatesData.sclabsPageV1List.items,
dictionary: dictionary.dictionaryV1List,
adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL ?? null,
...(await serverSideTranslations(locale, ["common", "vc"])),
diff --git a/pages/projects/benefits-navigator/index.js b/pages/projects/benefits-navigator/index.js
index 1c25e60c2f..120d0f1827 100644
--- a/pages/projects/benefits-navigator/index.js
+++ b/pages/projects/benefits-navigator/index.js
@@ -4,16 +4,20 @@ import { Layout } from "../../../components/organisms/Layout";
import { useEffect, useState } from "react";
import aemServiceInstance from "../../../services/aemServiceInstance";
import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
-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 { ExploreProjects } from "../../../components/organisms/ExploreProjects";
import TextRender from "../../../components/text_node_renderer/TextRender";
+import { ExploreUpdates } from "../../../components/organisms/ExploreUpdates";
+import { shuffle } from "../../../lib/utils/shuffle";
+import { filterItems } from "../../../lib/utils/filterItems";
+import { sortUpdatesByDate } from "../../../lib/utils/sortUpdatesByDate";
export default function BenefitsNavigatorOverview(props) {
+ const [allProjects] = useState(props.allProjects);
const [pageData] = useState(props.pageData.item);
const [updatesData] = useState(props.updatesData);
const [filteredDictionary] = useState(
@@ -26,33 +30,6 @@ export default function BenefitsNavigatorOverview(props) {
)
);
- const displayProjectUpdates = updatesData.map((update) => (
-
- ));
-
useEffect(() => {
if (props.adobeAnalyticsUrl) {
window.adobeDataLayer = window.adobeDataLayer || [];
@@ -237,7 +214,7 @@ export default function BenefitsNavigatorOverview(props) {
/>
-