DO NOT MERGE

__tests__/pages/home.test.js

@@ -5,13 +5,15 @@ import { render, screen } from "@testing-library/react";
 import Home from "../../pages/home";
 import { homePageData } from "../../__mocks__/mockStore";
 import { experimentsData } from "../../__mocks__/mockStore";
+import { dictionaryData } from "../../__mocks__/mockStore";
 
 describe("Home", () => {
   it("renders without crashing", () => {
     render(
       <Home
-        pageData={homePageData.data.scLabsPagev1ByPath}
+        pageData={homePageData.data.sclabsPageV1ByPath}
         experimentsData={experimentsData.data.scLabsPagev1List.items}
+        dictionary={dictionaryData.data.dictionaryV1List}
       />
     );
     expect(

__tests__/pages/oas-benefits-estimator.test.js

@@ -7,7 +7,9 @@ import {
   dictionaryData,
   oasBenefitsEstimatorData,
   oasUpdatesData,
+  experimentsData,
 } from "../../__mocks__/mockStore";
+import { shuffle } from "../../lib/utils/shuffle";
 
 describe("OAS Benefits Estimator", () => {
   it("renders without crashing", () => {
@@ -16,6 +18,7 @@ describe("OAS Benefits Estimator", () => {
         pageData={oasBenefitsEstimatorData.data.sclabsPageV1ByPath}
         updatesData={oasUpdatesData}
         dictionary={dictionaryData.data.dictionaryV1List}
+        allProjects={shuffle(experimentsData.data.scLabsPagev1List.items)}
       />
     );
   });

components/atoms/Link.js

@@ -3,10 +3,25 @@ import PropTypes from "prop-types";
 
 // Use this component for Footer link and use Next.js <Link>
 // for all links within the site
-export function Link(props) {
+export function Link({
+  href = "#",
+  target = "_self",
+  ariaLabel,
+  component = "a",
+  linkStyle,
+  disabled,
+  lang,
+  locale,
+  onClick,
+  id,
+  dataGcAnalyticsCustomClick,
+  text,
+  abbr,
+  ...rest
+}) {
   //Styling for links based on Figma Design
   let basicStyle = "";
-  switch (props.linkStyle) {
+  switch (linkStyle) {
     case "basicStyleWithEmphasis":
       basicStyle =
         "underline text-multi-blue-blue70b font-body text-browserh5 font-bold text-mobileh5 leading-33px hover:text-multi-blue-blue50b";
@@ -37,70 +52,61 @@ export function Link(props) {
       break;
   }
 
-  const Component = props.component || "a";
+  const Component = component || "a";
 
   function onKeyDown() {
     true;
   }
 
   return Component !== "a" ? (
     <Component
-      href={props.href}
-      disabled={props.disabled}
-      lang={props.lang}
-      target={props.target}
-      aria-label={props.ariaLabel || props.text}
+      href={href}
+      disabled={disabled}
+      lang={lang}
+      target={target}
+      aria-label={ariaLabel || text}
       role="link"
     >
       <a
-        href={props.href}
-        locale={props.locale}
-        onClick={props.onClick ? props.onClick : undefined}
-        id={props.id}
+        href={href}
+        locale={locale}
+        onClick={onClick ? onClick : undefined}
+        id={id}
         className={`${basicStyle}`}
-        data-gc-analytics-customclick={props.dataGcAnalyticsCustomClick}
+        data-gc-analytics-customclick={dataGcAnalyticsCustomClick}
         onKeyDown={onKeyDown}
       >
         {/* <!-- English Text: English --> */}
-        <span className={props.abbr ? "language-toggle-text" : ""}>
-          {props.text}
-        </span>
+        <span className={abbr ? "language-toggle-text" : ""}>{text}</span>
         {/* <!-- English Text: title="English", en --> */}
-        <abbr className="language-toggle-abbr" title={props.text}>
-          {props.abbr}
+        <abbr className="language-toggle-abbr" title={text}>
+          {abbr}
         </abbr>
       </a>
     </Component>
   ) : (
     <a
-      href={props.href}
+      href={href}
       className={`${basicStyle}`}
-      id={props.id}
-      disabled={props.disabled}
-      lang={props.lang}
-      target={props.target}
-      aria-label={props.ariaLabel || props.text}
-      locale={props.locale}
-      onClick={props.onClick ? props.onClick : undefined}
-      data-gc-analytics-customclick={props.dataGcAnalyticsCustomClick}
+      id={id}
+      disabled={disabled}
+      lang={lang}
+      target={target}
+      aria-label={ariaLabel || text}
+      locale={locale}
+      onClick={onClick ? onClick : undefined}
+      data-gc-analytics-customclick={dataGcAnalyticsCustomClick}
     >
       {/* <!-- English Text: English --> */}
-      <span className={props.abbr ? "language-toggle-text" : ""}>
-        {props.text}
-      </span>
+      <span className={abbr ? "language-toggle-text" : ""}>{text}</span>
       {/* <!-- English Text: title="English", en --> */}
-      <abbr className="language-toggle-abbr" title={props.text}>
-        {props.abbr}
+      <abbr className="language-toggle-abbr" title={text}>
+        {abbr}
       </abbr>
     </a>
   );
 }
 
-Link.defaultProps = {
-  target: "_self",
-  href: "#",
-};
-
 Link.propTypes = {
   /**
    * The text that Text Link will display

components/fragment_renderer/FragmentRender.js

@@ -17,7 +17,7 @@ const FRAGMENTS = {
   "SCLabs-Image-v1": ImageWithCollapse,
 };
 
-const mapFragmentsToProps = (fragmentData, fragmentName, locale) => {
+const mapFragmentsToProps = (fragmentData, fragmentName, locale, excludeH1) => {
   switch (fragmentName) {
     case "SCLabs-Feature-v1":
       return {
@@ -63,6 +63,7 @@ const mapFragmentsToProps = (fragmentData, fragmentName, locale) => {
             ? fragmentData.scLabContent[0].scContentEn.json
             : fragmentData.scLabContent[0].scContentFr.json,
         layout: fragmentData.scLabLayout,
+        excludeH1: excludeH1,
       };
 
     case "SCLabs-Comp-Content-v1":
@@ -146,7 +147,8 @@ export default function FragmentRender(props) {
         {...mapFragmentsToProps(
           fragmentData,
           fragmentData?._model.title,
-          props.locale
+          props.locale,
+          props.excludeH1
         )}
       />
     );

components/fragment_renderer/fragment_components/BasicTextWithImage.js

@@ -1,7 +1,14 @@
 import Image from "next/image";
 import TextRender from "../../text_node_renderer/TextRender";
 
-export default function BasicTextWithImage({ src, alt, width, height, data }) {
+export default function BasicTextWithImage({
+  src,
+  alt,
+  width,
+  height,
+  data,
+  excludeH1,
+}) {
   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">
@@ -19,7 +26,7 @@ export default function BasicTextWithImage({ src, alt, width, height, data }) {
         </div>
       </div>
       <div className="col-span-12 lg:col-span-7">
-        <TextRender data={data} excludeH1={true} />
+        <TextRender data={data} excludeH1={excludeH1} />
       </div>
     </div>
   );

components/fragment_renderer/fragment_components/TextWithImage.js

@@ -8,6 +8,7 @@ export default function TextWithImage({
   height,
   data,
   layout,
+  excludeH1,
 }) {
   switch (layout) {
     case "default":
@@ -18,6 +19,7 @@ export default function TextWithImage({
           width={width}
           height={height}
           data={data}
+          excludeH1={excludeH1}
         />
       );
     case "image-vertical-line-content":
@@ -28,6 +30,7 @@ export default function TextWithImage({
           width={width}
           height={height}
           data={data}
+          excludeH1={excludeH1}
         />
       );
     default:

components/molecules/Card.js

@@ -22,13 +22,13 @@ export const Card = (props) => {
     <Link href={props.href}>
       <div
         className={`h-full group card-shadow border border-custom-gray-border rounded-md pb-4 hover:cursor-pointer ${
-          "border-" + tagColour
+          "border-" + tagColour + ` ${props.customStyling}`
         }`}
         data-testid={props.dataTestId}
         data-cy={props.dataCy}
       >
         {props.showImage ? (
-          <div className="sm:h-80 flex justify-center">
+          <div className="h-[208px] flex justify-center">
             <Image
               src={props.imgSrc}
               alt={props.imgAlt}
@@ -76,9 +76,13 @@ export const Card = (props) => {
         ) : (
           ""
         )}
-        <p className="text-custom-gray-text mx-6 leading-30px text-lg">
-          {props.description}
-        </p>
+        {props.htmlDesc ? (
+          props.htmlDesc
+        ) : (
+          <p className="text-custom-gray-text mx-6 leading-30px text-lg">
+            {props.description}
+          </p>
+        )}
         {props.showButton ? (
           <ActionButton
             href={props.btnHref}
@@ -119,7 +123,7 @@ Card.propTypes = {
   /**
    * Description of the experiment card.
    */
-  description: PropTypes.string.isRequired,
+  description: PropTypes.string,
 
   /**
    * the test id for unit tests
@@ -131,6 +135,11 @@ Card.propTypes = {
    */
   dataCy: PropTypes.string,
 
+  /**
+   * Boolean value to allow passing of html for description
+   */
+  htmlDesc: PropTypes.object,
+
   /**
    * Boolean value to show or hide image
    */

components/organisms/ExploreProjects.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from "react";
+import Card from "../molecules/Card";
+
+//callback function that creates a card for a project when called
+const createCard = (locale, project) => {
+  return (
+    <li
+      key={project.scId}
+      className="rounded-md bg-multi-neutrals-white col-span-12 lg:col-span-4"
+    >
+      <Card
+        showImage
+        imgSrc={
+          locale === "en"
+            ? `https://www.canada.ca${project.scSocialMediaImageEn?._path}`
+            : `https://www.canada.ca${project.scSocialMediaImageFr?._path}`
+        }
+        imgAlt={
+          locale === "en"
+            ? project.scSocialMediaImageAltTextEn
+            : project.scSocialMediaImageAltTextFr
+        }
+        imgHeight={project.scSocialMediaImageEn.height}
+        imgWidth={project.scSocialMediaImageEn.width}
+        title={locale === "en" ? project.scTitleEn : project.scTitleFr}
+        href={locale === "en" ? project.scPageNameEn : project.scPageNameFr}
+        description={
+          locale === "en"
+            ? project.scDescriptionEn.json[0].content[0].value
+            : project.scDescriptionFr.json[0].content[0].value
+        }
+      />
+    </li>
+  );
+};
+
+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
+    <div className="py-24 max-w-full bg-multi-blue-blue65b">
+      <div className="layout-container">
+        <h2 className="mt-0 text-multi-neutrals-white">
+          {locale === "en"
+            ? "Explore other projects"
+            : "Explorer d'autres projets"}
+        </h2>
+        <ul className="grid grid-cols-12 gap-x-6 gap-y-6 list-none">
+          {/*iterate over filteredProjects array and create card for each project */}
+          {displayCurrentProjects}
+        </ul>
+      </div>
+    </div>
+  );
+}