Explore Updates Section (#1038)

* add colour for section background * update Card image container height * show 3 projects on homepage and add new section * create updates section component * fix dictionary entry used on project pages * modify Card.js to allow passing styling and html descriptions * allow excluding H1 nodes in FragmentRender * update homepage query * update homepage to use FragmentRender * add viewport to HEAD on all pages for tailwind * use grid ExploreUpdates.js * update homepage to use new query and fragments * add ExploreUpdates to home page and project pages * fix list styling on project pages * add margin for new sections on project pages * remove defaultprops throwing warnings * modify Card.js description to accept html * drill down for H1 in HeaderText.jsx * update mockdata * update home.test.js * revert dateModified * use js defaults in Link.js * create unit test and story for ExploreUpdates.js * add updates section to all article pages * rename filterProjects -> filterItems * sort updates by most recent on all pages * add missing ski link to homepage * add key to update pages to ensure proper navigation between update pages * update atoms/Link to support passing in next/link
DTS-STN · Jun 10, 2024 · bd21e2c · bd21e2c
1 parent 7e73c88
commit bd21e2c
Show file tree

Hide file tree

Showing 31 changed files with 4,768 additions and 953 deletions.
diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js
diff --git a/__tests__/pages/home.test.js b/__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(

diff --git a/components/atoms/Link.js b/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";
@@ -33,74 +48,46 @@ export function Link(props) {
       break;
     default:
       basicStyle =
-        "underline text-multi-blue-blue70b font-body text-browserh5 leading-33px hover:text-multi-blue-blue50b";
+        "underline underline-offset-4 text-multi-blue-blue70b font-body text-browserh5 leading-33px hover:text-multi-blue-blue50b";
       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"
+      className={`${basicStyle}`}
     >
-      <a
-        href={props.href}
-        locale={props.locale}
-        onClick={props.onClick ? props.onClick : undefined}
-        id={props.id}
-        className={`${basicStyle}`}
-        data-gc-analytics-customclick={props.dataGcAnalyticsCustomClick}
-        onKeyDown={onKeyDown}
-      >
-        {/* <!-- English Text: English --> */}
-        <span className={props.abbr ? "language-toggle-text" : ""}>
-          {props.text}
-        </span>
-        {/* <!-- English Text: title="English", en --> */}
-        <abbr className="language-toggle-abbr" title={props.text}>
-          {props.abbr}
-        </abbr>
-      </a>
+      {text}
     </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>
-      {/* <!-- English Text: title="English", en --> */}
-      <abbr className="language-toggle-abbr" title={props.text}>
-        {props.abbr}
-      </abbr>
+      {text}
     </a>
   );
 }
 
-Link.defaultProps = {
-  target: "_self",
-  href: "#",
-};
-
 Link.propTypes = {
   /**
    * The text that Text Link will display

diff --git a/components/fragment_renderer/FragmentRender.js b/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
         )}
       />
     );

diff --git a/components/fragment_renderer/fragment_components/BasicTextWithImage.js b/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>
   );

diff --git a/components/fragment_renderer/fragment_components/TextWithImage.js b/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:

diff --git a/components/molecules/Card.js b/components/molecules/Card.js
@@ -22,7 +22,7 @@ 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}
@@ -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
    */

diff --git a/components/organisms/ExploreUpdates.js b/components/organisms/ExploreUpdates.js
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { Link as LinkWrapper } from "../atoms/Link";
+import Card from "../molecules/Card";
+
+export function ExploreUpdates({
+  heading,
+  updatesData,
+  href,
+  linkLabel,
+  locale,
+  dictionary,
+}) {
+  const updatesCards = updatesData.map((update) => {
+    return (
+      <li key={update.scId} className="bg-white list-none my-3">
+        <Card
+          customStyling="md:h-[190px] pb-6 flex flex-col justify-between"
+          title={locale === "en" ? update.scTitleEn : update.scTitleFr}
+          href={locale === "en" ? update.scPageNameEn : update.scPageNameFr}
+          htmlDesc={
+            <div className="flex flex-col">
+              <span className="flex flex-row pl-6">
+                <p className="text-multi-neutrals-grey100 font-semibold">
+                  {locale === "en" ? "Project:" : "Projet :"}
+                </p>
+                <p className="mt-0 pl-1">{`${update.scDateModifiedOverwrite}`}</p>
+              </span>
+              <span className="flex flex-row pl-6">
+                <p className="text-multi-neutrals-grey100 font-semibold">
+                  {locale === "en"
+                    ? dictionary.items[11].scTermEn
+                    : dictionary.items[11].scTermFr}
+                </p>
+                <p className="mt-0 pl-1">{`${update.scDateModifiedOverwrite}`}</p>
+              </span>
+            </div>
+          }
+        />
+      </li>
+    );
+  });
+
+  return (
+    <div className="mt-14 bg-custom-blue-updates-blue">
+      <div className="layout-container py-28">
+        <div className="grid grid-cols-12">
+          <h2 className="grid col-span-12 xl:col-span-8 mt-0">{heading}</h2>
+          <ul className="grid col-span-12 xl:col-span-8">{updatesCards}</ul>
+          <div className="grid col-span-12 xl:col-span-8 mt-4">
+            <div className="flex justify-end">
+              <LinkWrapper
+                component={Link}
+                id="seeAllUpdatesLink"
+                href={href}
+                lang={locale}
+                text={linkLabel}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}