Skip to content

Commit

Permalink
Survey Form CallToAction (#1090)
Browse files Browse the repository at this point in the history 
* create SurveyCTA.js and modify ActionButton.js

* add surveycta to homepage

* apply whitespace-nowrap to SurveyCTA button

* remove empty files

* update homepage mock data
  • Loading branch information
@will0684
will0684 authored Sep 9, 2024
1 parent 4fab424 commit 45995e1
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 41 deletions.
114 changes: 90 additions & 24 deletions __mocks__/mockStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,7 @@ export const error404Page = {

export const homePageData = {
data: {
scLabsPagev1ByPath: {
sclabsPageV1ByPath: {
item: {
scId: "SCLABS-HOME-PAGE",
scPageNameEn: "/en/home",
Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -707,16 +710,6 @@ export const homePageData = {
},
],
},
{
nodeType: "header",
style: "h2",
content: [
{
nodeType: "text",
value: "Explore our projects",
},
],
},
],
},
scContentFr: {
Expand Down Expand Up @@ -794,16 +787,6 @@ export const homePageData = {
},
],
},
{
nodeType: "header",
style: "h2",
content: [
{
nodeType: "text",
value: "Explorez nos projets",
},
],
},
],
},
},
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 3 additions & 3 deletions __tests__/pages/home.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ describe("Home", () => {
it("renders without crashing", () => {
render(
<Home
pageData={homePageData.data.scLabsPagev1ByPath}
pageData={homePageData.data.sclabsPageV1ByPath}
experimentsData={experimentsData.data.scLabsPagev1List.items}
/>
/>,
);
expect(
screen.getByRole("heading", {
name: "Laboratoires de Service Canada",
})
}),
).toBeInTheDocument();
});
});
8 changes: 6 additions & 2 deletions components/atoms/ActionButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand All @@ -23,6 +25,8 @@ export function ActionButton(props) {
? PRIMARY
: props.style === "secondary"
? SECONDARY
: props.style === "tertiary"
? TERTIARY
: props.style === "supertask"
? SUPERTASK
: props.style === "danger"
Expand All @@ -48,7 +52,7 @@ export function ActionButton(props) {
<Link
href={props.href}
aria-label={`${props.ariaLabel ? props.ariaLabel : undefined}`}
className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ring-multi-blue-blue60f py-2 px-4 rounded-sm w-fit text-base ${props.custom}`}
className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ring-multi-blue-blue60f py-2 px-4 rounded w-fit text-mobilebody lg:text-p font-body ${props.custom}`}
onClick={props.onClick}
id={props.id}
data-testid={props.dataTestId}
Expand All @@ -75,7 +79,7 @@ export function ActionButton(props) {
<button
aria-expanded={`${props.ariaExpanded ? props.ariaExpanded : undefined}`}
aria-label={`${props.ariaLabel ? props.ariaLabel : undefined}`}
className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ring-multi-blue-blue60f py-2 px-4 rounded-sm w-fit text-base ${props.custom}`}
className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ring-multi-blue-blue60f py-2 px-4 rounded w-fit text-mobilebody lg:text-p font-body ${props.custom}`}
onClick={props.onClick}
type={props.type}
id={props.id}
Expand Down
21 changes: 21 additions & 0 deletions components/molecules/SurveyCTA.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ActionButton } from "../atoms/ActionButton";

export const SurveyCTA = ({
heading,
description,
buttonLabel,
buttonLink,
buttonType,
}) => {
return (
<div className="flex flex-col md:flex-row py-6 bg-multi-blue-blue70 rounded-2xl">
<div className="flex flex-col px-10 text-multi-neutrals-white">
<h3 className="font-display">{heading}</h3>
<p className="font-body">{description}</p>
</div>
<div className="flex flex-col px-10 pt-5 md:pt-0 md:justify-center md:items-center whitespace-nowrap">
<ActionButton href={buttonLink} text={buttonLabel} style="tertiary" />
</div>
</div>
);
};
49 changes: 37 additions & 12 deletions pages/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -332,10 +333,34 @@ export default function Home(props) {
</ul>
</span>
</div>
<div className="mt-12">
<SurveyCTA
heading={
props.locale === "en"
? pageData.scFragments[2].scTitleEn
: pageData.scFragments[2].scTitleFr
}
description={
props.locale === "en"
? pageData.scFragments[2].scContentEn.json[0].content[0].value
: pageData.scFragments[2].scContentFr.json[0].content[0].value
}
buttonLabel={
props.locale === "en"
? pageData.scFragments[2].scLabsButton[0].scTitleEn
: pageData.scFragments[2].scLabsButton[0].scTitleFr
}
buttonLink={
props.locale === "en"
? pageData.scFragments[2].scLabsButton[0].scDestinationURLEn
: pageData.scFragments[2].scLabsButton[0].scDestinationURLFr
}
/>
</div>
<h2>
{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}{" "}
</h2>
<div className="mb-8">
Expand All @@ -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
}
<a
className="underline text-canada-footer-font hover:text-canada-footer-hover-font-blue"
href={
pageData.scFragments[2].scContentEn.json[0].content[1]
pageData.scFragments[4].scContentEn.json[0].content[1]
.data.href
}
>
{
pageData.scFragments[2].scContentEn.json[0].content[1]
pageData.scFragments[4].scContentEn.json[0].content[1]
.value
}
</a>
{
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
}
<a
className="underline text-canada-footer-font hover:text-canada-footer-hover-font-blue"
href={
pageData.scFragments[2].scContentFr.json[0].content[1]
pageData.scFragments[4].scContentFr.json[0].content[1]
.data.href
}
>
{
pageData.scFragments[2].scContentFr.json[0].content[1]
pageData.scFragments[4].scContentFr.json[0].content[1]
.value
}
</a>
{
pageData.scFragments[2].scContentEn.json[0].content[2]
pageData.scFragments[4].scContentEn.json[0].content[2]
.value
}
</>
Expand Down

0 comments on commit 45995e1

Please sign in to comment.