From 45995e11a2ac9b3493e608de861c2cd19548ae81 Mon Sep 17 00:00:00 2001 From: Jordan Willis <31868510+will0684@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:32:53 -0400 Subject: [PATCH] Survey Form CallToAction (#1090) * create SurveyCTA.js and modify ActionButton.js * add surveycta to homepage * apply whitespace-nowrap to SurveyCTA button * remove empty files * update homepage mock data --- __mocks__/mockStore.js | 114 +++++++++++++++++++++++------- __tests__/pages/home.test.js | 6 +- components/atoms/ActionButton.js | 8 ++- components/molecules/SurveyCTA.js | 21 ++++++ pages/home.js | 49 +++++++++---- 5 files changed, 157 insertions(+), 41 deletions(-) create mode 100644 components/molecules/SurveyCTA.js diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js index eedbefbbde..edeed9a9f6 100644 --- a/__mocks__/mockStore.js +++ b/__mocks__/mockStore.js @@ -564,7 +564,7 @@ export const error404Page = { export const homePageData = { data: { - scLabsPagev1ByPath: { + sclabsPageV1ByPath: { item: { scId: "SCLABS-HOME-PAGE", scPageNameEn: "/en/home", @@ -609,23 +609,26 @@ export const homePageData = { scKeywordsFr: "services numériques", scContentType: null, scOwner: null, - scDateModifiedOverwrite: "2022-12-11", + scDateModifiedOverwrite: "2023-04-11", scAudience: null, scRegion: null, scSocialMediaImageEn: { + _path: "/content/dam/decd-endc/images/sclabs/homePage_image1.png", _publishUrl: "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", width: 2932, height: 2078, }, scSocialMediaImageFr: { + _path: "/content/dam/decd-endc/images/sclabs/homePage_image1.png", _publishUrl: "https://www.canada.ca/content/dam/decd-endc/images/sclabs/homePage_image1.png", width: 2932, height: 2078, }, - scSocialMediaImageAltTextEn: null, - scSocialMediaImageAltTextFr: null, + scSocialMediaImageAltTextEn: "People adding icons to a mobile screen", + scSocialMediaImageAltTextFr: + "Personnes ajoutant des icônes à un écran mobile", scNoIndex: false, scNoFollow: false, scFragments: [ @@ -707,16 +710,6 @@ export const homePageData = { }, ], }, - { - nodeType: "header", - style: "h2", - content: [ - { - nodeType: "text", - value: "Explore our projects", - }, - ], - }, ], }, scContentFr: { @@ -794,16 +787,6 @@ export const homePageData = { }, ], }, - { - nodeType: "header", - style: "h2", - content: [ - { - nodeType: "text", - value: "Explorez nos projets", - }, - ], - }, ], }, }, @@ -832,6 +815,89 @@ export const homePageData = { json: null, }, }, + { + scId: "FEATURE-SC-LABS-FEEDBACK-SURVEY", + scTitleEn: "Tell us what you think of Service Canada Labs", + scTitleFr: + "Dites-nous ce que vous pensez des laboratoires de Service Canada", + scContentEn: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "You can help shape this website too. Take a few minutes to tell us about your experience.", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "paragraph", + content: [ + { + nodeType: "text", + value: + "Vous pouvez aussi contribuer à l'élaboration de ce site Web. Prenez quelques minutes pour nous faire part de votre expérience.", + }, + ], + }, + ], + }, + scImageEn: null, + scImageFr: null, + scImageAltTextEn: null, + scImageAltTextFr: null, + scLabsButton: [ + { + scId: "BUTTON-SC-LABS-FEEDBACK-SURVEY", + scTitleEn: "Take the survey", + scTitleFr: "Répondre au sondage", + scDestinationURLEn: + "https://forms-formulaires.alpha.canada.ca/en/id/cm0mjtvrg0014330vn6blw3pi", + scDestinationURLFr: + "https://forms-formulaires.alpha.canada.ca/fr/id/cm0mjtvrg0014330vn6blw3pi", + scButtonType: ["gc:custom/decd-endc/button-type/secondary"], + }, + ], + }, + { + _path: + "/content/dam/decd-endc/content-fragments/sclabs/components/content/home-explore-projects", + scId: "CONTENT-HOME-EXPLORE-PROJECTS", + scContentEn: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Explore our projects", + }, + ], + }, + ], + }, + scContentFr: { + json: [ + { + nodeType: "header", + style: "h2", + content: [ + { + nodeType: "text", + value: "Explorez nos projets", + }, + ], + }, + ], + }, + }, { scId: "SITE-FEATURES-WORKS-IN-PROGRESS", scTitleEn: "This site features works in progress", diff --git a/__tests__/pages/home.test.js b/__tests__/pages/home.test.js index 3bb0f2c9b6..47c125a364 100644 --- a/__tests__/pages/home.test.js +++ b/__tests__/pages/home.test.js @@ -10,14 +10,14 @@ describe("Home", () => { it("renders without crashing", () => { render( + />, ); expect( screen.getByRole("heading", { name: "Laboratoires de Service Canada", - }) + }), ).toBeInTheDocument(); }); }); diff --git a/components/atoms/ActionButton.js b/components/atoms/ActionButton.js index 136d72429c..996646264b 100644 --- a/components/atoms/ActionButton.js +++ b/components/atoms/ActionButton.js @@ -11,6 +11,8 @@ export function ActionButton(props) { "text-multi-neutrals-white bg-multi-blue-blue70 hover:bg-multi-blue-blue60g focus:bg-multi-blue-blue60g"; const SECONDARY = "text-multi-blue-blue60b bg-multi-neutrals-grey30a hover:bg-multi-neutrals-grey50a focus:bg-multi-neutrals-grey60"; + const TERTIARY = + "text-multi-neutrals-black bg-white hover:bg-multi-neutrals-grey50a focus:bg-multi-neutrals-grey60"; const SUPERTASK = "text-multi-neutrals-white bg-specific-green-green50 hover:bg-specific-green-green70 focus:bg-sepcific-green-green70"; const DANGER = @@ -23,6 +25,8 @@ export function ActionButton(props) { ? PRIMARY : props.style === "secondary" ? SECONDARY + : props.style === "tertiary" + ? TERTIARY : props.style === "supertask" ? SUPERTASK : props.style === "danger" @@ -48,7 +52,7 @@ export function ActionButton(props) { { + return ( +
+
+

{heading}

+

{description}

+
+
+ +
+
+ ); +}; diff --git a/pages/home.js b/pages/home.js index f6fbce679d..d1e5018a44 100644 --- a/pages/home.js +++ b/pages/home.js @@ -7,6 +7,7 @@ import aemServiceInstance from "../services/aemServiceInstance"; import { Heading } from "../components/molecules/Heading"; import { ContextualAlert } from "../components/molecules/ContextualAlert"; import Image from "next/image"; +import { SurveyCTA } from "../components/molecules/SurveyCTA"; export default function Home(props) { const pageData = props.pageData?.item; @@ -332,10 +333,34 @@ export default function Home(props) { +
+ +

{props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[6].content[0].value - : pageData.scFragments[0].scContentFr.json[6].content[0] + ? pageData.scFragments[3].scContentEn.json[0].content[0].value + : pageData.scFragments[3].scContentFr.json[0].content[0] .value}{" "}

@@ -346,53 +371,53 @@ export default function Home(props) { alert_icon_id="info icon" message_heading={ props.locale === "en" - ? pageData.scFragments[2].scTitleEn - : pageData.scFragments[2].scTitleFr + ? pageData.scFragments[4].scTitleEn + : pageData.scFragments[4].scTitleFr } message_body={ props.locale === "en" ? ( <> { - pageData.scFragments[2].scContentEn.json[0].content[0] + pageData.scFragments[4].scContentEn.json[0].content[0] .value } { - pageData.scFragments[2].scContentEn.json[0].content[1] + pageData.scFragments[4].scContentEn.json[0].content[1] .value } { - pageData.scFragments[2].scContentEn.json[0].content[2] + pageData.scFragments[4].scContentEn.json[0].content[2] .value } ) : ( <> { - pageData.scFragments[2].scContentFr.json[0].content[0] + pageData.scFragments[4].scContentFr.json[0].content[0] .value } { - pageData.scFragments[2].scContentFr.json[0].content[1] + pageData.scFragments[4].scContentFr.json[0].content[1] .value } { - pageData.scFragments[2].scContentEn.json[0].content[2] + pageData.scFragments[4].scContentEn.json[0].content[2] .value }