+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 | + + + + + + + + + +75x + +75x + +75x + +75x + +75x + + +75x + + + + + + + + + + + + +75x +75x +75x +67x +1x +1x +1x + + + + + +75x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +17x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import Link from "next/link";
+import { useEffect } from "react";
+
+/**
+ * Button component
+ */
+export function ActionButton(props) {
+ //Styling for buttons and links
+ const PRIMARY =
+ "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 SUPERTASK =
+ "text-multi-neutrals-white bg-specific-green-green50 hover:bg-specific-green-green70 focus:bg-sepcific-green-green70";
+ const DANGER =
+ "text-multi-neutrals-white bg-specific-red-red50 hover:bg-specific-red-red70 focus:bg-specific-red-red70";
+ const LINK =
+ "text-multi-blue-blue60c hover:text-multi-blue-blue50b focus:text-multi-blue-blue60f";
+
+ const style =
+ props.style === "primary"
+ ? PRIMARY
+ : props.style === "secondary"
+ ? SECONDARY
+ : props.style === "supertask"
+ ? SUPERTASK
+ : props.style === "danger"
+ ? DANGER
+ : props.style === "link"
+ ? LINK
+ : "";
+
+ //Activate Links with spacebar
+ useEffect(() => {
+ let link = document.getElementById(props.id);
+ if (link) {
+ link.addEventListener("keydown", (event) => {
+ Eif (event.key === "Spacebar" || event.key === " ") {
+ event.preventDefault();
+ link.click();
+ }
+ });
+ }
+ });
+
+ return props.href ? (
+ <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 font-display ${props.custom}`}
+ onClick={props.onClick}
+ id={props.id}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy || props.id}
+ data-cy-button={props.dataCyButton}
+ disabled={props.disabled}
+ role="button"
+ draggable="false"
+ lang={props.lang}
+ >
+ {props.icon && !props.iconEnd ? (
+ <span className={props.icon} data-testid={props.dataTestId} />
+ ) : undefined}
+ {props.text}
+ {props.children}
+ {props.icon && props.iconEnd ? (
+ <span className={props.icon} data-testid={props.dataTestId} />
+ ) : undefined}
+ </Link>
+ ) : (
+ <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 font-display ${props.custom}`}
+ onClick={props.onClick}
+ type={props.type}
+ id={props.id}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy || props.id}
+ data-cy-button={props.dataCyButton}
+ disabled={props.disabled}
+ data-gc-analytics-submit={props.analyticsTracking ? "submit" : undefined}
+ >
+ {props.icon && !props.iconEnd ? (
+ <span className={props.icon} data-testid={props.dataTestId} />
+ ) : undefined}
+ {props.imageSource && props.imageAlt ? (
+ <>
+ <img src={props.imageSource} alt={props.imageAlt} />
+ <span className={props.imageSpanClass} data-testid={props.dataTestId}>
+ {props.imageSpanText}
+ </span>
+ </>
+ ) : undefined}
+ <span className="flex">
+ {props.text}
+ {props.expandIcon}
+ </span>
+ {props.children}
+ {props.icon && props.iconEnd ? (
+ <span className={props.icon} data-testid={props.dataTestId} />
+ ) : undefined}
+ </button>
+ );
+}
+
+ActionButton.propTypes = {
+ /**
+ * This will add an icon inside the button when needed
+ */
+ icon: PropTypes.string,
+
+ /**
+ * This is for placing an icon at the end of the component
+ */
+ iconEnd: PropTypes.bool,
+
+ /**
+ * The text that the button will display
+ */
+ text: PropTypes.string,
+
+ /**
+ * Style link as a button when there's a href
+ */
+ href: PropTypes.string,
+
+ /**
+ * Identify which button being clicked
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * Lang attribute for links that do not match the language of the top level document
+ */
+ lang: PropTypes.string,
+ /**
+ * the type of the button
+ */
+ type: PropTypes.oneOf(["submit", "reset"]),
+
+ /**
+ * Secondary color styling option
+ */
+ secondary: PropTypes.bool,
+
+ /**
+ * Tertiary color styling option
+ */
+ tertiary: PropTypes.bool,
+
+ /**
+ * Custom button styling option
+ */
+ custom: PropTypes.string,
+
+ /**
+ * Callback for a click event on the button
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * User must input one of the follow button styles to apply
+ * to their button. To apply the link style, the user must
+ * also add a value to the href prop
+ */
+ style: PropTypes.oneOf([
+ "supertask",
+ "primary",
+ "secondary",
+ "danger",
+ "link",
+ ]),
+
+ /**
+ * any other elements you want to add to the button
+ */
+ children: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element,
+ PropTypes.arrayOf(PropTypes.element),
+ ]),
+ /**
+ * Test id for unit test
+ */
+ dataTestId: PropTypes.string,
+ /**
+ * Test id for e2e test
+ */
+ dataCy: PropTypes.string,
+ /**
+ * Test id for e2e test
+ */
+ dataCyButton: PropTypes.string,
+ /**
+ * Enabled or disabled the button
+ */
+ disabled: PropTypes.bool,
+ /**
+ * For tracking reset or submit on forms for analytics
+ */
+ analyticsTracking: PropTypes.bool,
+ /**
+ * Expand icon that will show the Feedback as popup
+ */
+ expandIcon: PropTypes.object,
+ /**
+ * Aria expanded state
+ */
+ ariaExpanded: PropTypes.string,
+ /**
+ * Aria label
+ */
+ ariaLabel: PropTypes.string,
+ /**
+ * Image source
+ */
+ imageSource: PropTypes.string,
+ /**
+ * Image alt
+ */
+ imageAlt: PropTypes.string,
+ /**
+ * Image span text
+ */
+ imageSpanText: PropTypes.string,
+ /**
+ * Image span classname
+ */
+ imageSpanClass: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | + + + + + + +7x + +1x +1x +1x +1x +1x + +1x + + + + + +1x + + + + + + +1x + + + + + + +1x + + + + + + +1x + + + + + + | import { ActionButton } from "./ActionButton";
+
+export default {
+ title: "Components/Atoms/ActionButton",
+ component: ActionButton,
+};
+
+const Template = (args) => <ActionButton {...args} />;
+
+export const Primary = Template.bind({});
+export const Secondary = Template.bind({});
+export const Supertask = Template.bind({});
+export const Danger = Template.bind({});
+export const Link = Template.bind({});
+
+Primary.args = {
+ id: "primary",
+ style: "primary",
+ text: "Primary",
+};
+
+Secondary.args = {
+ id: "secondary",
+ text: "Secondary",
+ style: "secondary",
+ secondary: true,
+};
+
+Supertask.args = {
+ id: "supertask",
+ text: "Supertask",
+ style: "supertask",
+ tertiary: true,
+};
+
+Danger.args = {
+ id: "danger",
+ text: "Danger",
+ style: "danger",
+ disabled: true,
+};
+
+Link.args = {
+ id: "link",
+ text: "Link",
+ style: "link",
+ href: "/",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 | + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + | import PropTypes from "prop-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Contextual alert component meant to draw attention to a short important message.
+ * Currently only has the option for an info alert, but other options can be added later so the alert
+ * can be customized.
+ */
+export function Alert(props) {
+ return (
+ <div className="layout-container">
+ <div
+ className={`relative border-l-6 min-h-40px my-10 ${
+ props.triangle ? "border-[#EE7100]" : "border-[#269ABC]"
+ }`}
+ >
+ <span className="absolute py-1 top-4 -left-3.5 bg-white">
+ {props.triangle ? (
+ <FontAwesomeIcon
+ icon={faTriangleExclamation}
+ color={"#EE7100"}
+ size="xl"
+ />
+ ) : (
+ <FontAwesomeIcon icon={faCircleInfo} color={"#269ABC"} size="xl" />
+ )}
+ </span>
+ <div className="ml-6">
+ <h3 className="text-h3 font-display">
+ <>{props.title}</>
+ </h3>
+ <p className="text-p">{props.text}</p>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+Alert.propTypes = {
+ /**
+ * The title for the alert
+ */
+ title: PropTypes.string,
+ /**
+ * The description for the alert, accepts a string or JSX
+ */
+ text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + +2x + +1x + +1x + + + + | import { Alert } from "./Alert";
+
+export default {
+ title: "Components/Atoms/Alert",
+ component: Alert,
+};
+
+const Template = (args) => <Alert {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ title: "Alert Title",
+ text: "Alert Text",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 | + + + + + + +4x +4x + + + + + + + + + + + + + + + + + + +4x + + + + + + + + + + + + + | import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Displays the banner on the page
+ */
+
+export const Banner = ({ siteTitle, headline }) => {
+ return (
+ <div className="bg-banner-img-mobile bg-center bg-cover py-8 sm:bg-banner-img sm:bg-right">
+ <div className="lg:container xxs:mx-0 xxs:px-0 lg:mx-auto lg:px-6 xxl:mx-auto">
+ <div className="bg-black bg-opacity-90 text-white p-4 xxs:w-screen lg:bg-opacity-30 lg:w-2/3 xl:w-1/2">
+ <h1
+ className="text-h1 font-medium pt-4 pb-2 break-words"
+ id="pageMainTitle"
+ tabIndex="-1"
+ >
+ {siteTitle}
+ </h1>
+ <hr className="border-2 border-hr-red-bar bg-hr-red-bar bg-opacity-90 border-opacity-90 w-3/4" />
+ <p className="text-base font-normal py-4 break-words">{headline}</p>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+Banner.propTypes = {
+ /**
+ * Text area that displays the title for the page
+ */
+ siteTitle: PropTypes.string.isRequired,
+
+ /**
+ * text area for headline in the banner
+ */
+ headline: PropTypes.string.isRequired,
+};
+
+export default Banner;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + + + + + + +2x + +1x + +1x + + + + | import React from "react";
+import Banner from "./Banner";
+
+export default {
+ title: "Components/Atoms/Banner",
+ component: Banner,
+};
+
+const Template = (args) => <Banner {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ siteTitle: "Banner Text",
+ headline: "Banner Headline",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 | + + + + + + + + +11x + + + + + + + + + + + + + +4x + + + + + + + + + + + + + + + + + + + + + + + + + +4x + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Breadcrumb component
+ */
+export function Breadcrumb(props) {
+ return (
+ <nav aria-label="breadcrumbs">
+ <ul className="block text-custom-blue-dark text-base font-body -ml-4 -my-4 ">
+ <li className="inline-block min-w-0 max-w-full truncate px-1 -my-4">
+ <Link
+ href="https://www.canada.ca/"
+ className="text-sm hover:text-custom-blue-link visited:text-purple-700 underline"
+ >
+ Canada.ca
+ </Link>
+ </li>
+
+ {props.items
+ ? props.items.map((item, key) => {
+ return (
+ <li
+ key={key}
+ className="inline-block min-w-0 max-w-full truncate -my-4 px-1"
+ >
+ <span className="inline-block mr-4">
+ <FontAwesomeIcon
+ icon={faChevronRight}
+ className="text-xs text-gray-breadcrumb"
+ />
+ </span>
+ <Link
+ href={item.link}
+ className="text-sm hover:text-canada-footer-hover-font-blue text-canada-footer-font visited:text-purple-700 underline"
+ >
+ {item.text}
+ </Link>
+ </li>
+ );
+ })
+ : null}
+ </ul>
+ </nav>
+ );
+}
+
+Breadcrumb.propTypes = {
+ /**
+ * Array of Items for the breadcrumb
+ */
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ /**
+ * Text for the breadcrumb
+ */
+ text: PropTypes.string,
+
+ /**
+ * Link for the breadcrumb
+ */
+ link: PropTypes.string,
+ })
+ ),
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | + + + + + + +3x + +1x +1x + +1x + + + + + + + | import { Breadcrumb } from "./Breadcrumb";
+
+export default {
+ title: "Components/Atoms/Breadcrumb",
+ component: Breadcrumb,
+};
+
+const Template = (args) => <Breadcrumb {...args} />;
+
+export const Primary = Template.bind({});
+export const WithItems = Template.bind({});
+
+WithItems.args = {
+ items: [
+ { text: "Link1", link: "/" },
+ { text: "Link2", link: "/" },
+ { text: "Link3", link: "/" },
+ ],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 | + + + + + +145x + + + + +145x + + + + + + + + + + + + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +9x + + + + + +9x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * check box component for forms
+ */
+export function CheckBox(props) {
+ const ifControlledProps = !props.uncontrolled
+ ? {
+ checked: props.checked,
+ }
+ : {};
+ return (
+ <div
+ className={`block leading-tight relative pl-40px h-46px clear-left${
+ props.className ? " " + props.className : " mb-4"
+ }`}
+ >
+ <input
+ className="control-input cursor-pointer appearance-none w-40px h-40px absolute left-0 m-0 z-1 opacity-0"
+ id={props.id}
+ name={props.name}
+ value={props.value}
+ type="checkbox"
+ onChange={(e) =>
+ props.onChange(
+ props.uncontrolled ? !e.currentTarget.checked : props.checked,
+ props.name,
+ props.value
+ )
+ }
+ aria-required={props.required}
+ aria-invalid={props.error ? "true" : undefined}
+ data-cy={props.dataCy}
+ data-testid={props.dataTestId}
+ {...ifControlledProps}
+ />
+ <label
+ className={`checkbox-label control-label inline-block cursor-pointer pt-4px pb-5px px-15px text-sm lg:text-p leading-tight sm:leading-6 ${
+ props.bolded ? "font-semibold" : "font-normal"
+ } font-body${props.error ? " text-error-border-red" : undefined}`}
+ htmlFor={props.id}
+ >
+ {props.showRequiredLabel ? (
+ <b className="text-error-border-red" aria-hidden="true">
+ *
+ </b>
+ ) : undefined}{" "}
+ {props.label} {<p className="sr-only">{props.expandState}</p>}
+ </label>
+ </div>
+ );
+}
+
+CheckBox.defaultProps = {
+ checked: false,
+ value: "true",
+ showRequiredLabel: false,
+};
+
+CheckBox.propTypes = {
+ /**
+ * additional css for the component
+ */
+ className: PropTypes.string,
+ /**
+ * whether or not the checkbox is checked
+ */
+ checked: PropTypes.bool.isRequired,
+
+ /**
+ * the value of the field when the checkbox is checked
+ */
+ value: PropTypes.string,
+
+ /**
+ * the name of the checkbox
+ */
+ name: PropTypes.string.isRequired,
+
+ /**
+ * the id of the checkbox
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * the label for the checkbox
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * whether or not there is an error
+ */
+ error: PropTypes.bool,
+
+ /**
+ * whether or not the field is required
+ */
+ required: PropTypes.bool,
+
+ /**
+ * show the "* ... (required)" in the label. in lists, this isn't necessary, but for an individual checkbox without a parent fieldset this is required
+ */
+ showRequiredLabel: PropTypes.bool,
+
+ /**
+ * callback to handle change in checked state, takes three arguments, the checked state, the name and the value
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * boolean flag to specify that this input should not be controlled by react
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * boolean flag to specify when label content should be bolded
+ */
+ bolded: PropTypes.bool,
+
+ /**
+ * testing selector for cypress
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * testing selector for unit tests
+ */
+ dataTestId: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 | + + + + + + + + + + + + + + + + +4x + +1x +1x + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + | import React from "react";
+import { CheckBox } from "./CheckBox";
+
+export default {
+ title: "Components/Atoms/CheckBox",
+ component: CheckBox,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <CheckBox {...args} />;
+
+export const UnChecked = Template.bind({});
+UnChecked.args = {
+ id: "checkbox 1",
+ name: "ChexBox1",
+ value: "IsChecked",
+ label: "I am a checkbox",
+ dataTestId: "unchecked-checkbox",
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+ id: "checkbox 1",
+ name: "ChexBox1",
+ value: "IsChecked",
+ label: "I am a checkbox",
+ dataTestId: "checked-checkbox",
+ checked: true,
+};
+
+export const UnControlled = Template.bind({});
+UnControlled.args = {
+ id: "checkbox 1",
+ name: "ChexBox1",
+ value: "IsChecked",
+ label: "I am an uncontrolled checkbox",
+ dataTestId: "uncontrolled-checkbox",
+ uncontrolled: true,
+};
+
+export const Required = Template.bind({});
+Required.args = {
+ id: "checkbox 1",
+ name: "ChexBox1",
+ value: "IsChecked",
+ label: "I am an uncontrolled checkbox",
+ dataTestId: "required-checkbox",
+ showRequiredLabel: true,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 | + + + +10x + +10x +10x +4x +2x +2x + + +10x + + + + + + + + + + + + + +4x + + + +4x + + + + | import PropTypes from "prop-types";
+import { useTranslation } from "next-i18next";
+
+export function DateModified(props) {
+ const { t } = useTranslation("common");
+ // TeamCity build dates are received in the format yyyyMMdd
+ let dateFormatted = "NA";
+ if (props.date) {
+ if (!props.date.match(/(?=\S*['-])([a-zA-Z'-]+)/gm)) {
+ dateFormatted = props.date.replace(/^(.{4})(.{2})/gm, "$1-$2-");
+ } else dateFormatted = props.date;
+ }
+
+ return (
+ <dl className="mt-8 py-2 font-body font-normal text-sm">
+ <dt className="inline">{t("dateModified")}</dt>
+ <dd className="inline">
+ {dateFormatted === "NA" ? (
+ <time>{` ${dateFormatted}`}</time>
+ ) : (
+ <time dateTime={dateFormatted}>{` ${dateFormatted}`}</time>
+ )}
+ </dd>
+ </dl>
+ );
+}
+
+DateModified.defaultProps = {
+ date: process.env.NEXT_PUBLIC_BUILD_DATE,
+};
+
+DateModified.propTypes = {
+ // Date string in format yyyyMMdd
+ date: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + + + + +3x + +1x + +1x + + + | import { DateModified } from "./DateModified";
+
+export default {
+ title: "Components/Atoms/DateModified",
+ component: DateModified,
+};
+
+const Template = (args) => <DateModified {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ date: "20200420",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 | + + + + + +5x + + + + + + + + +13x + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * error label component that is used with form inputs to display error messages
+ */
+export function ErrorLabel(props) {
+ return (
+ <div
+ className={`error-label border-l-4 border-error-border-red px-3 py-1 bg-error-background-red font-body font-bold mb-5px text-sm lg:text-p ${props.className}`}
+ >
+ {props.message}
+ </div>
+ );
+}
+
+ErrorLabel.propTypes = {
+ message: PropTypes.string.isRequired,
+
+ /**
+ * Prop for adding some classes
+ */
+ className: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + + + + + +2x + +1x +1x + + + | import React from "react";
+import { ErrorLabel } from "./ErrorLabel";
+
+export default {
+ title: "Components/Atoms/ErrorLabel",
+ component: ErrorLabel,
+};
+
+const Template = (args) => <ErrorLabel {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ message: "Error 1: This is a message",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 | + + +7x +7x + +18x + +13x + + + + +7x + + + + + + +1x + + + + + + | import PropTypes from "prop-types";
+
+export function HTMList({ tag = "ul", content, listClassName, liClassName }) {
+ const parseList = (content) =>
+ content
+ .split("*") // split the string on asterisks
+ .filter((item) => item) // filter out empty strings
+ .map((item, index) => (
+ <li className={liClassName} key={index}>
+ {item.trim()}
+ </li>
+ ));
+
+ return tag === "ul" ? (
+ <ul className={listClassName}>{parseList(content)}</ul>
+ ) : (
+ <ol className={listClassName}>{parseList(content)}</ol>
+ );
+}
+
+HTMList.propTypes = {
+ tag: PropTypes.string,
+ content: PropTypes.string.isRequired,
+ listClassName: PropTypes.string,
+ liClassName: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 | + + + + + + + +4x + +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + +8x + + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ErrorLabel } from "./ErrorLabel";
+import { useTranslation } from "next-i18next";
+
+/**
+ * multi line text field
+ */
+export function MultiTextField(props) {
+ const { t } = useTranslation("common");
+
+ return (
+ <div
+ className={`block leading-tight${
+ props.className ? " " + props.className : " mb-12"
+ }`}
+ >
+ <label
+ className={`block leading-tight text-sm lg:text-p font-body mb-5px ${
+ props.boldLabel ? "font-bold" : ""
+ }`}
+ htmlFor={props.id}
+ >
+ {props.required ? (
+ <b className="text-error-border-red" aria-hidden="true">
+ *
+ </b>
+ ) : undefined}{" "}
+ {props.label}{" "}
+ </label>
+ <p id={props.describedby} className="text-sm lg:text-g mb-5 leading-30px">
+ {t("doNotInclude")}
+ </p>
+ {props.error ? <ErrorLabel message={props.error} /> : undefined}
+ <textarea
+ className={`text-input font-body w-full min-h-40px shadow-sm text-form-input-gray border-2 py-6px px-12px ${
+ props.error ? "border-error-border-red" : "border-black"
+ }`}
+ id={props.id}
+ name={props.name}
+ placeholder={props.placeholder}
+ onChange={(e) => props.onChange(e.currentTarget.value)}
+ cols={props.cols}
+ rows={props.rows}
+ spellCheck={props.spellCheck}
+ wrap={props.wrap}
+ required={props.required}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy}
+ aria-describedby={props.describedby}
+ >
+ {props.value}
+ </textarea>
+ </div>
+ );
+}
+
+MultiTextField.defaultProps = {
+ spellCheck: true,
+ wrap: "soft",
+};
+
+MultiTextField.propTypes = {
+ /**
+ * additional css for the component
+ */
+ className: PropTypes.string,
+
+ /**
+ * the id of the multi text field
+ */
+ id: PropTypes.string.isRequired,
+ /**
+ * the name of the multi text field
+ */
+ name: PropTypes.string.isRequired,
+ /**
+ * the label for the multi text field
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * the value for the multi text field
+ */
+ value: PropTypes.string,
+
+ /**
+ * message to display if there is an error
+ */
+ error: PropTypes.string,
+
+ /**
+ * whether or not the field is required
+ */
+ required: PropTypes.bool,
+
+ /**
+ * whether or not spellchecking is enabled for this field, by default it is
+ */
+ spellCheck: PropTypes.bool,
+
+ /**
+ * whether or not the label is bold
+ */
+ boldLabel: PropTypes.bool,
+ /**
+ * whether to soft wrap or hard wrap the field
+ */
+ wrap: PropTypes.oneOf(["soft", "hard"]),
+ /**
+ * the placeholder for the multi text field
+ */
+ placeholder: PropTypes.string,
+ /**
+ * how much lines should the multi text field show
+ */
+ rows: PropTypes.number,
+ /**
+ * how much columns should the multi text field show
+ */
+ cols: PropTypes.number,
+ /**
+ * the minimum length of characters for the multi text field
+ */
+ minLength: PropTypes.number,
+ /**
+ * the maximum length of characters for the multi text field
+ */
+ maxLength: PropTypes.number,
+ /**
+ * call back for when the value of the multi text field changes
+ */
+ onChange: PropTypes.func,
+ /**
+ * unit test selector
+ */
+ dataTestId: PropTypes.string,
+ /**
+ * cypress selector
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * aria-describedby label id
+ */
+ describedby: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 | + + + + + + + + + + + + + + + + +2x + +1x +1x + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + + + | import React from "react";
+import { MultiTextField } from "./MultiTextField";
+
+export default {
+ title: "Components/Atoms/MultiTextField",
+ component: MultiTextField,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <MultiTextField i {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ id: "multiTextField1",
+ name: "multiTextField1",
+ label: "I am a multi text field",
+ dataTestId: "multitext-one",
+ placeholder: "some placeholder text",
+};
+
+export const BoldLabel = Template.bind({});
+BoldLabel.args = {
+ id: "multiTextField1",
+ name: "multiTextField1",
+ label: "I am a multi text field",
+ dataTestId: "multitext-bold",
+ placeholder: "some placeholder text",
+ boldLabel: true,
+};
+
+export const HardWrap = Template.bind({});
+HardWrap.args = {
+ id: "multiTextField1",
+ name: "multiTextField1",
+ label: "I am a multi text field",
+ dataTestId: "multitext-hard-wrap",
+ placeholder: "some placeholder text",
+ cols: 30,
+ rows: 5,
+ wrap: "hard",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 | + + + + + +3x +3x + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + | import PropTypes from "prop-types";
+import { useTranslation } from "next-i18next";
+import { useState } from "react";
+import { HelpIcon } from "@dts-stn/service-canada-design-system";
+
+export function ProjectInfo(props) {
+ const { t } = useTranslation("common");
+ const [showInfo, setShowInfo] = useState(false);
+
+ return (
+ <>
+ <div className="grid grid-cols-1 xl:grid-cols-3 gap-x-2 text-[20px]">
+ <strong className="font-body col-span-1">{props.termStarted}</strong>
+ <p className="col-span-2">
+ {!props.dateStarted ? undefined : props.dateStarted.substring(0, 10)}
+ </p>
+ <strong className="font-body col-span-1">{props.termEnded}</strong>
+ <p className="col-span-2">
+ {!props.dateEnded ? undefined : props.dateEnded.substring(0, 10)}
+ </p>
+ <strong className="font-body col-span-1 my-auto">
+ {props.termStage}
+ </strong>
+ <div className="flex col-span-2 items-end">
+ <div className="shrink-0 flex">
+ <p className="my-auto">{props.stage}</p>
+ <div className="my-auto">
+ <HelpIcon
+ lang={props.locale}
+ title={props.stage}
+ body={props.definition}
+ />
+ </div>
+ </div>
+ </div>
+ <strong className="font-body col-span-1 col-start-1">
+ {props.termSummary}
+ </strong>
+ <p className="col-span-2">{props.summary}</p>
+ </div>
+ </>
+ );
+}
+
+ProjectInfo.propTypes = {
+ dateStarted: PropTypes.string,
+ dateEnded: PropTypes.string,
+ stage: PropTypes.string,
+ summary: PropTypes.string,
+ info: PropTypes.string,
+ locale: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 | + + + + + + +2x + +1x + +1x + + + + + + | import { ProjectInfo } from "./ProjectInfo";
+
+export default {
+ title: "Components/Atoms/ProjectInfo",
+ component: ProjectInfo,
+};
+
+const Template = (args) => <ProjectInfo {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ dateStarted: "2021-01-01",
+ dateEnded: "2022-03-31",
+ stage: "Alpha",
+ summary: "Project status",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 | + + + + + +16x + + + + + + +16x + + + + + + + + +3x + + +1x +1x +1x + + +1x + + + + + + + + + + + + + + + + + + + +2x + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * Radio input styled as a button
+ **/
+export function RadioButton(props) {
+ const ifControlledProps = !props.uncontrolled
+ ? {
+ checked: props.checked,
+ }
+ : {
+ defaultChecked: props.checked || false,
+ };
+ return (
+ <div className="flex relative">
+ <input
+ type="radio"
+ className="radio-button absolute top-0 left-0 w-full h-full appearance-none cursor-pointer"
+ id={props.id}
+ name={props.name}
+ value={props.value}
+ onChange={(e) => {
+ props.onChange(props.value, e);
+ }}
+ onKeyUp={(e) => {
+ Eif (e.key === "Enter") {
+ e.preventDefault();
+ Iif (props.uncontrolled) {
+ e.currentTarget.checked = true;
+ }
+ props.onChange(props.value, e);
+ }
+ }}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy}
+ required={props.required}
+ {...ifControlledProps}
+ />
+ <label
+ className={`radio-button-label font-body float-left text-xs px-5 py-3 border border-solid border-gray-600 border-opacity-50${
+ props.roundedFront ? " rounded-l-lg" : ""
+ }${props.roundedBack ? " rounded-r-lg" : ""}`}
+ htmlFor={props.id}
+ >
+ {props.label}
+ </label>
+ </div>
+ );
+}
+
+RadioButton.defaultProps = {
+ checked: false,
+};
+
+RadioButton.propTypes = {
+ /**
+ * the id for the input
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * the name for the input
+ */
+ name: PropTypes.string.isRequired,
+
+ /**
+ * the value for the input
+ */
+ value: PropTypes.string.isRequired,
+
+ /**
+ * the label for the radio button
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * whether or not the field is required
+ */
+ required: PropTypes.bool,
+
+ /**
+ * whether the radio button is checked or not
+ */
+ checked: PropTypes.bool,
+
+ /**
+ * Should the button be rounded in the front
+ */
+ roundedFront: PropTypes.bool,
+
+ /**
+ * Should the button be rounded in the back
+ */
+ roundedBack: PropTypes.bool,
+
+ /**
+ * if the input is controlled by react or not
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * onChange callback
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * unit test selector
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * cypress test selector
+ */
+ dataCy: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 | + + + + + + + +7x + +1x +1x + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + | import React from "react";
+import { RadioButton } from "./RadioButton";
+
+export default {
+ title: "Components/Atoms/RadioButton",
+ component: RadioButton,
+};
+
+const Template = (args) => <RadioButton {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ id: "radio-button-1",
+ name: "radio_button_1",
+ value: "Some Value",
+ label: "My Radio Button",
+ dataTestId: "primary",
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+ id: "radio-button-checked",
+ name: "radio_button_checked",
+ value: "Some Value",
+ label: "My Radio Button",
+ dataTestId: "checked",
+ checked: true,
+};
+
+export const UnControlled = Template.bind({});
+UnControlled.args = {
+ id: "radio-button-uncontrolled",
+ name: "radio_button_uncontrolled",
+ value: "Some Value",
+ label: "My Radio Button",
+ dataTestId: "uncontrolled",
+ uncontrolled: true,
+};
+
+export const RoundedFront = Template.bind({});
+RoundedFront.args = {
+ id: "radio-button-rounded-front",
+ name: "radio_button_rounded_front",
+ value: "Some Value",
+ label: "My Radio Button",
+ dataTestId: "roundedFront",
+ roundedFront: true,
+};
+
+export const RoundedBack = Template.bind({});
+RoundedBack.args = {
+ id: "radio-button-rounded-back",
+ name: "radio_button_rounded_back",
+ value: "Some Value",
+ label: "My Radio Button",
+ dataTestId: "roundedBack",
+ roundedBack: true,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 | + + + + + +8x + + + + +8x + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + +9x + + + + +9x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * radio field
+ */
+export function RadioField(props) {
+ const ifControlledProps = !props.uncontrolled
+ ? {
+ checked: props.checked,
+ }
+ : {};
+ return (
+ <div
+ className={`block leading-tight relative pl-40px h-40px clear-left mb-10px${
+ props.className ? " " + props.className : ""
+ }`}
+ >
+ <input
+ className="control-input cursor-pointer appearance-none w-40px h-40px absolute left-0 m-0 z-1 opacity-0"
+ id={props.id}
+ name={props.name}
+ value={props.value}
+ type="radio"
+ onChange={(e) =>
+ props.onChange(
+ props.uncontrolled ? !e.currentTarget.checked : props.checked,
+ props.name,
+ props.value
+ )
+ }
+ aria-required={props.required}
+ aria-invalid={props.error ? "true" : undefined}
+ data-cy={props.dataCy}
+ data-testid={props.dataTestId}
+ {...ifControlledProps}
+ />
+ <label
+ className={`radio-field-label control-label inline-block cursor-pointer pt-4px pb-5px px-15px text-sm lg:text-p leading-tight sm:leading-6 font-normal font-body${
+ props.error ? " text-error-border-red" : undefined
+ }`}
+ htmlFor={props.id}
+ onClick={() => props.onChange(props.checked, props.name, props.value)}
+ >
+ {props.label}
+ </label>
+ </div>
+ );
+}
+
+RadioField.defaultProps = {
+ checked: false,
+ value: "true",
+};
+
+RadioField.propTypes = {
+ /**
+ * additional css for the component
+ */
+ className: PropTypes.string,
+ /**
+ * whether or not the checkbox is checked
+ */
+ checked: PropTypes.bool.isRequired,
+
+ /**
+ * the value of the field when the checkbox is checked
+ */
+ value: PropTypes.string,
+
+ /**
+ * the name of the checkbox
+ */
+ name: PropTypes.string.isRequired,
+
+ /**
+ * whether or not there is an error
+ */
+ error: PropTypes.bool,
+
+ /**
+ * whether or not the field is required
+ */
+ required: PropTypes.bool,
+
+ /**
+ * the id of the checkbox
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * the label for the checkbox
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * callback to handle change in checked state, takes three arguments, the checked state, the name and the value
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * boolean flag to specify that this input should not be controlled by react
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * testing selector for cypress
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * testing selector for unit tests
+ */
+ dataTestId: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 | + + + + + + + + + + + + + + + + +4x + +1x +1x + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + | import React from "react";
+import { RadioField } from "./RadioField";
+
+export default {
+ title: "Components/Atoms/RadioField",
+ component: RadioField,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <RadioField {...args} />;
+
+export const UnChecked = Template.bind({});
+UnChecked.args = {
+ id: "radio 1",
+ name: "RadioField1",
+ value: "IsChecked",
+ label: "I am a radio button",
+ dataTestId: "unchecked-radio-field",
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+ id: "radio 1",
+ name: "RadioField1",
+ value: "IsChecked",
+ label: "I am a radio button",
+ dataTestId: "checked-radio-field",
+ checked: true,
+};
+
+export const UnControlled = Template.bind({});
+UnControlled.args = {
+ id: "radio 1",
+ name: "RadioField1",
+ value: "IsChecked",
+ label: "I am an uncontrolled checkbox",
+ dataTestId: "uncontrolled-checkbox",
+ uncontrolled: true,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 | + + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * component
+ */
+export function SearchBar(props) {
+ return (
+ <form
+ className="w-full inline-flex h-9 lg:w-full xl:w-80 w-full border border-solid border-gray-light-100"
+ onSubmit={props.onSubmit}
+ data-cy={props.dataCy}
+ >
+ <input
+ type="text"
+ placeholder={props.placeholder}
+ className="placeholder-text-gray text-text-gray font-body py-1 px-2 focus:outline-none w-full"
+ onChange={props.onChange}
+ />
+
+ <button
+ title="Search bar button"
+ type="submit"
+ className={
+ "bg-custom-blue-dark text-white text-center text-base rounded-none pt-0.5 h-full w-10 hover:bg-gray-dark active:bg-gray-dark focus:bg-gray-dark"
+ }
+ >
+ <span className="icon-search" />
+ </button>
+ </form>
+ );
+}
+
+SearchBar.propTypes = {
+ /**
+ * Placeholder for the search bar
+ */
+ placeholder: PropTypes.string.isRequired,
+
+ /**
+ * Action to do on input change
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Action to do on form submit
+ */
+ onSubmit: PropTypes.func,
+
+ /**
+ * Test id for cypress test
+ */
+ dataCy: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 | + + + + + + +2x + +1x + +1x + + + | import { SearchBar } from "./SearchBar";
+
+export default {
+ title: "Components/Atoms/SearchBar",
+ component: SearchBar,
+};
+
+const Template = (args) => <SearchBar {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ placeholder: "Search Canada.ca",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 | + + + + +2x + +2x + + + + + +2x +2x +6x +6x + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +8x + + + + + + + + + + + + + + + + + + + + + + +1x + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ErrorLabel } from "./ErrorLabel";
+import { useTranslation } from "next-i18next";
+
+export function SelectField(props) {
+ const { t } = useTranslation("common");
+
+ const ifControlledProps = !props.uncontrolled
+ ? {
+ value: props.value,
+ }
+ : {};
+
+ Eif (!props.ignoreSort) {
+ props.options.sort(function (a, b) {
+ var collator = new Intl.Collator("fr");
+ return collator.compare(a.name.toLowerCase(), b.name.toLowerCase());
+ });
+ }
+
+ return (
+ <div
+ className={`block leading-tight${
+ props.className ? " " + props.className : " mb-10px"
+ }`}
+ >
+ <label
+ className={`select-field-label block leading-tight text-sm lg:text-p font-body mb-5 ${
+ props.boldLabel ? "font-bold" : ""
+ }`}
+ htmlFor={props.id + "-choice"}
+ >
+ {props.required ? (
+ <b className="text-error-border-red" aria-hidden="true">
+ *
+ </b>
+ ) : undefined}{" "}
+ {props.label}{" "}
+ </label>
+ {props.error ? <ErrorLabel message={props.error} /> : undefined}
+ <select
+ className={`text-input select-field bg-white font-body w-full min-h-40px shadow-sm border-2 py-6px px-12px ${
+ props.error ? "border-error-border-red" : "border-black"
+ }`}
+ id={props.id + "-choice"}
+ name={props.name}
+ aria-required={props.required}
+ aria-invalid={props.error ? "true" : undefined}
+ onChange={(e) => props.onChange(e.currentTarget.value)}
+ {...ifControlledProps}
+ data-testid={props.dataTestId + "-choice"}
+ data-cy={props.dataCy + "-choice"}
+ >
+ <option
+ key="default"
+ value=""
+ data-testid="default"
+ data-cy="default"
+ />
+ {props.options.map(({ id, name, value }) => {
+ return (
+ <option key={id} value={value} data-testid={id} data-cy={id}>
+ {name}
+ </option>
+ );
+ })}
+ {props.other ? (
+ <option
+ key={"other"}
+ value={"other"}
+ data-testid={"other"}
+ data-cy={"other"}
+ >
+ {t("reportAProblemOther")}
+ </option>
+ ) : (
+ ""
+ )}
+ </select>
+ </div>
+ );
+}
+
+SelectField.defaultProps = {
+ value: "",
+};
+
+SelectField.propTypes = {
+ /**
+ * additional css for the component
+ */
+ className: PropTypes.string,
+
+ /**
+ * the id of the text field
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * the name of the text field
+ */
+ name: PropTypes.string.isRequired,
+
+ /**
+ * the label of the text field
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * whether ot not the field is required
+ */
+ required: PropTypes.bool,
+
+ /**
+ * value of the text field
+ */
+ value: PropTypes.string.isRequired,
+
+ /**
+ * call back for when the value of the text field changes
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * message to display if there is an error
+ */
+ error: PropTypes.string,
+
+ /**
+ * Other option for dropdown
+ */
+ other: PropTypes.bool,
+
+ /**
+ * if label should be bold
+ */
+ boldLabel: PropTypes.bool,
+
+ /**
+ * boolean flag to specify that this input should be uncontrolled by react
+ */
+ uncontrolled: PropTypes.bool,
+
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ })
+ ),
+
+ /**
+ * unit test selector
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * cypress tests selector
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * if true, skip sorting the options
+ */
+ ignoreSort: PropTypes.bool,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 | + + + + + + + + + + + + + + + + +2x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import { SelectField } from "./SelectField";
+
+export default {
+ title: "Components/Atoms/SelectField",
+ component: SelectField,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <SelectField {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ id: "select-field-1",
+ name: "selectField1",
+ label: "I am a select field",
+ uncontrolled: true,
+ dataTestId: "select-field-1",
+ options: [
+ {
+ id: "option1",
+ name: "Option 1",
+ value: "option1",
+ },
+ {
+ id: "option2",
+ name: "Option 2",
+ value: "option2",
+ },
+ {
+ id: "option3",
+ name: "Option 3",
+ value: "option3",
+ },
+ {
+ id: "option4",
+ name: "Option 4",
+ value: "option4",
+ },
+ ],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 | + + +2x + + + + + +2x + + + + + + + + + + + + + + +1x + + + + + + + + + + | import PropTypes from "prop-types";
+
+export function TableOfContents(props) {
+ return (
+ <>
+ <h2 className="font-semibold">{props.title}</h2>
+ <nav>
+ <ul className="leading-4 list-disc">
+ {props.headings.map((heading) => (
+ <li key={heading.id}>
+ <a
+ className="underline text-custom-blue-link underline hover:text-custom-blue-projects-link"
+ href={`#${heading.id}`}
+ >
+ {heading.text}
+ </a>
+ </li>
+ ))}
+ </ul>
+ </nav>
+ </>
+ );
+}
+
+TableOfContents.propTypes = {
+ /**
+ * The title for the table of contents
+ */
+ title: PropTypes.string,
+ /**
+ * An array of headings
+ */
+ headings: PropTypes.array,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + +2x + +1x + +1x + + + + | import { TableOfContents } from "./TableOfContents";
+
+export default {
+ title: "Components/Atoms/TableOfContents",
+ component: TableOfContents,
+};
+
+const Template = (args) => <TableOfContents {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ title: "Table of Contents Title",
+ headings: [{ id: "heading-one", text: "Heading one" }],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 | + + + + + + + +6x + +6x + + + + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x + + + + + + + + + +8x + + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ErrorLabel } from "./ErrorLabel";
+import { useTranslation } from "next-i18next";
+
+/**
+ * text field component
+ */
+export function TextField(props) {
+ const { t } = useTranslation("common");
+
+ const ifControlledProps = !props.uncontrolled
+ ? {
+ value: props.value,
+ }
+ : {};
+ return (
+ <div
+ className={`block leading-tight${
+ props.className ? " " + props.className : " mb-10px"
+ }`}
+ >
+ <label
+ className={`block leading-tight text-sm lg:text-p font-body mb-5 ${
+ props.boldLabel ? "font-bold" : ""
+ }`}
+ htmlFor={props.id}
+ >
+ {props.required ? (
+ <b className="text-error-border-red" aria-hidden="true">
+ *
+ </b>
+ ) : undefined}{" "}
+ {props.label}{" "}
+ </label>
+ {props.describedby ? (
+ <p
+ id={props.describedby}
+ className="text-xs lg:text-sm mb-5 leading-30px"
+ >
+ {t("doNotInclude")}
+ </p>
+ ) : (
+ ""
+ )}
+
+ {props.error ? <ErrorLabel message={props.error} /> : undefined}
+ <input
+ className={`text-input font-body w-full lg:w-3/4 min-h-40px shadow-sm text-form-input-gray border-2 py-6px px-12px ${
+ props.error ? "border-error-border-red" : "border-black"
+ } ${props.exclude ? "exclude" : ""}`}
+ id={props.id}
+ aria-describedby={props.describedby}
+ name={props.name}
+ placeholder={props.placeholder}
+ type={props.type}
+ min={props.min}
+ max={props.max}
+ step={props.step}
+ aria-required={props.required}
+ aria-invalid={props.error ? "true" : undefined}
+ onChange={(e) => props.onChange(e.currentTarget.value)}
+ {...ifControlledProps}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy}
+ autoComplete={props.autoComplete}
+ />
+ </div>
+ );
+}
+
+TextField.defaultProps = {
+ value: "",
+ type: "text",
+};
+
+TextField.propTypes = {
+ /**
+ * additional css for the component
+ */
+ className: PropTypes.string,
+
+ /**
+ * the id of the text field
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * the name of the text field
+ */
+ name: PropTypes.string.isRequired,
+
+ /**
+ * the label of the text field
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * whether ot not the field is required
+ */
+ required: PropTypes.bool,
+
+ /**
+ * value of the text field
+ */
+ value: PropTypes.string,
+
+ /**
+ * placeholder for the text field,
+ */
+ placeholder: PropTypes.string,
+
+ /**
+ * the type of the input
+ */
+ type: PropTypes.string,
+
+ /**
+ * call back for when the value of the text field changes
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * message to display if there is an error
+ */
+ error: PropTypes.string,
+
+ /**
+ * if label should be bold
+ */
+ boldLabel: PropTypes.bool,
+
+ /**
+ * boolean flag to specify that this input should be uncontrolled by react
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * min value allowed
+ */
+ min: PropTypes.number,
+
+ /**
+ * max value allowed
+ */
+ max: PropTypes.number,
+
+ /**
+ * the legal number of intervals
+ */
+ step: PropTypes.number,
+
+ /**
+ * unit test selector
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * cypress tests selector
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * Exclude option for adding exclude class to the textfield
+ */
+ exclude: PropTypes.bool,
+
+ /**
+ * aria-describedby label id
+ */
+ describedby: PropTypes.string,
+
+ /**
+ * Option to enable autocomplete on field
+ */
+ autocomplete: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 | + + + + + + + + + + + + + + + + +4x + +1x +1x + + + + + + + +1x +1x + + + + + + + + +1x +1x + + + + + + + + + | import React from "react";
+import { TextField } from "./TextField";
+
+export default {
+ title: "Components/Atoms/TextField",
+ component: TextField,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <TextField {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ id: "textField1",
+ name: "textField1",
+ label: "I am a text field",
+ dataTestId: "textbox-controlled",
+ placeholder: "Some placeholder text",
+};
+
+export const UnControlled = Template.bind({});
+UnControlled.args = {
+ id: "textField1",
+ name: "textField1",
+ label: "I am a text field",
+ placeholder: "Some placeholder text",
+ dataTestId: "textbox-uncontrolled",
+ uncontrolled: true,
+};
+
+export const BoldLabel = Template.bind({});
+BoldLabel.args = {
+ id: "textField1",
+ name: "textField1",
+ label: "I am a text field",
+ placeholder: "Some placeholder text",
+ dataTestId: "textbox-bold",
+ uncontrolled: true,
+ boldLabel: true,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| ActionButton.js | +
+
+ |
+ 100% | +15/15 | +84% | +42/50 | +100% | +3/3 | +100% | +15/15 | +
| ActionButton.stories.js | +
+
+ |
+ 100% | +12/12 | +100% | +0/0 | +100% | +1/1 | +100% | +11/11 | +
| Alert.js | +
+
+ |
+ 100% | +2/2 | +50% | +2/4 | +100% | +1/1 | +100% | +2/2 | +
| Alert.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Banner.js | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Banner.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Breadcrumb.js | +
+
+ |
+ 100% | +3/3 | +100% | +2/2 | +100% | +2/2 | +100% | +3/3 | +
| Breadcrumb.stories.js | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +1/1 | +100% | +4/4 | +
| CheckBox.js | +
+
+ |
+ 100% | +5/5 | +71.42% | +10/14 | +100% | +2/2 | +100% | +5/5 | +
| CheckBox.stories.js | +
+
+ |
+ 90.9% | +10/11 | +100% | +0/0 | +50% | +1/2 | +90% | +9/10 | +
| DateModified.js | +
+
+ |
+ 100% | +9/9 | +100% | +6/6 | +100% | +1/1 | +100% | +9/9 | +
| DateModified.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| ErrorLabel.js | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| ErrorLabel.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| HTMList.js | +
+
+ |
+ 100% | +6/6 | +100% | +3/3 | +100% | +4/4 | +100% | +6/6 | +
| MultiTextField.js | +
+
+ |
+ 100% | +5/5 | +60% | +6/10 | +100% | +2/2 | +100% | +5/5 | +
| MultiTextField.stories.js | +
+
+ |
+ 88.88% | +8/9 | +100% | +0/0 | +50% | +1/2 | +87.5% | +7/8 | +
| ProjectInfo.js | +
+
+ |
+ 100% | +4/4 | +75% | +3/4 | +100% | +1/1 | +100% | +4/4 | +
| ProjectInfo.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| RadioButton.js | +
+
+ |
+ 90% | +9/10 | +83.33% | +10/12 | +100% | +3/3 | +90% | +9/10 | +
| RadioButton.stories.js | +
+
+ |
+ 100% | +12/12 | +100% | +0/0 | +100% | +1/1 | +100% | +11/11 | +
| RadioField.js | +
+
+ |
+ 83.33% | +5/6 | +50% | +5/10 | +66.66% | +2/3 | +83.33% | +5/6 | +
| RadioField.stories.js | +
+
+ |
+ 88.88% | +8/9 | +100% | +0/0 | +50% | +1/2 | +87.5% | +7/8 | +
| SearchBar.js | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| SearchBar.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| SelectField.js | +
+
+ |
+ 90.9% | +10/11 | +50% | +9/18 | +75% | +3/4 | +90.9% | +10/11 | +
| SelectField.stories.js | +
+
+ |
+ 80% | +4/5 | +100% | +0/0 | +50% | +1/2 | +75% | +3/4 | +
| TableOfContents.js | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +2/2 | +100% | +3/3 | +
| TableOfContents.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| TextField.js | +
+
+ |
+ 100% | +6/6 | +61.11% | +11/18 | +100% | +2/2 | +100% | +6/6 | +
| TextField.stories.js | +
+
+ |
+ 88.88% | +8/9 | +100% | +0/0 | +50% | +1/2 | +87.5% | +7/8 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 | + | import "prop-types"; + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 | + + + + + + + + +3x +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ActionButton } from "../atoms/ActionButton";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+
+/**
+ * A section that will have a title, small description, and a link to some action we want to user to make
+ */
+export function CallToAction(props) {
+ const { t } = useTranslation("common");
+ return (
+ <div className="bg-[#ebf2fc] text-[#333] my-12">
+ <div className="layout-container pb-10 pt-10 text-sm md:text-base">
+ <div>
+ <div className="flex flex-col">
+ <div className="flex -my-2">
+ <img
+ className="mb-2 -ml-4"
+ src="/cta_icon.svg"
+ alt=""
+ width="60"
+ height="53"
+ />
+ <h3 className="lg:text-h1 ml-2">
+ <>{props.title}</>
+ </h3>
+ </div>
+ <aside className="pt-3 border-l-2 ml-2 lg:ml-3.5 border-custom-blue-blue xl:w-3/4">
+ {props.description ? (
+ <div className="pl-4">
+ <p className="text-base lg:text-p ml-6 pb-3 whitespace-pre-line">
+ {props.description}
+ </p>
+ <p className="text-base lg:text-p ml-6 pb-3 whitespace-pre-line">
+ {props.disclaimer}
+ </p>
+ </div>
+ ) : (
+ <div
+ className="text-base lg:text-p ml-6 pb-3 whitespace-pre-line"
+ dangerouslySetInnerHTML={{ __html: props.html }}
+ />
+ )}
+ <div className="ml-6">
+ <p className="flex mb-4 pl-4 text-center">
+ <ActionButton
+ id="become-a-participant-btn"
+ custom={`py-1.5 px-3 rounded text-white text-base lg:text-p font-display bg-custom-blue-dark hover:bg-custom-blue-light border border-custom-blue-darker active:bg-custom-blue-darker hover:ring-2 hover:ring-white`}
+ className=""
+ href={props.href}
+ text={props.hrefText}
+ expandIcon={
+ props.feedbackActive ? (
+ <img
+ className="px-2"
+ src="/feedback-icon-white.svg"
+ alt=""
+ />
+ ) : undefined
+ }
+ onClick={props.feedbackActive ? props.clicked : undefined}
+ ariaExpanded={props.ariaExpanded}
+ />
+ </p>
+ {props.showPrivacyLink && (
+ <Link href={t("privacyRedirect")} locale={props.lang}>
+ <a className="pl-4 text-base lg:text-p underline flex xl:inline lg:mr-10">
+ {t("privacyLinkText")}
+ </a>
+ </Link>
+ )}
+ </div>
+ </aside>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+CallToAction.propTypes = {
+ /**
+ * title of the call to action
+ */
+ title: PropTypes.string.isRequired,
+
+ /**
+ * a short description about what the call to action is about - string format
+ */
+ description: PropTypes.string,
+ /**
+ * a short disclaimer after the description - ie. for a sign up banner an explanation that participation is voluntary
+ */
+ disclaimer: PropTypes.string,
+
+ /**
+ * a short description about what the call to action is about - html format
+ */
+ html: PropTypes.string,
+
+ /**
+ * the url to the action
+ */
+ href: PropTypes.string.isRequired,
+
+ /**
+ * url text to be displayed
+ */
+ hrefText: PropTypes.string.isRequired,
+
+ /**
+ * Aria expanded state
+ */
+ ariaExpanded: PropTypes.string,
+
+ /**
+ * Show or hide privacy link
+ */
+ showPrivacyLink: PropTypes.bool,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 | + + + + + + + +3x + +1x +1x +1x + + + + + + +1x + + + + + + | import React from "react";
+import { CallToAction } from "./CallToAction";
+
+export default {
+ title: "Components/Molecules/CallToAction",
+ component: CallToAction,
+};
+
+const Template = (args) => <CallToAction {...args} />;
+
+export const Primary = Template.bind({});
+export const Secondary = Template.bind({});
+Primary.args = {
+ title: "the title",
+ description: "a description that should be short and concise",
+ href: "#",
+ hrefText: "the link text",
+};
+
+Secondary.args = {
+ title: "the title",
+ html: "<h1>Title</h1><p>Text</p>",
+ href: "#",
+ hrefText: "the link text",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 | + + + + + + + + +3x +5x + + + + + + +5x + +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import PropTypes from "prop-types";
+import Link from "next/link";
+import { ActionButton } from "../atoms/ActionButton";
+
+/**
+ * Displays an experiment card on the page
+ */
+
+export const Card = (props) => {
+ const tagColours = {
+ current_projects: "custom-green",
+ past_projects: "custom-gray",
+ upcoming_projects: "custom-blue",
+ new_update: "new-update",
+ };
+
+ const tagColour = tagColours[props.tag] ?? "custom-gray";
+
+ return (
+ <Link href={props.href}>
+ <div
+ className={`group card-shadow border border-custom-gray-border rounded-md pb-4 hover:cursor-pointer ${
+ "border-" + tagColour
+ }`}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy}
+ >
+ {props.showImage ? (
+ <div className="h-80 flex justify-center">
+ <img
+ src={props.imgSrc}
+ alt={props.imgAlt}
+ className="object-contain rounded-md"
+ />
+ </div>
+ ) : (
+ ""
+ )}
+ <div className="flex">
+ <p className="block font-display text-lg text-custom-blue-projects-link font-bold underline underline-offset-4 my-1 py-2 px-6 items-center group-hover:no-underline group-hover:text-custom-blue-projects-link-hover">
+ {props.title}
+ {props.showIcon ? (
+ props.href.substring(0, 8) === "https://" ? (
+ <div className="h-4 w-4 ml-1 mt-1 relative">
+ <img src={props.icon} alt={props.iconAlt} />
+ </div>
+ ) : (
+ ""
+ )
+ ) : (
+ ""
+ )}
+ </p>
+ {props.showTag ? (
+ <span
+ className={`block w-max py-2 px-2 font-body font-bold border-l-4 mr-6 mt-auto mb-auto border-${tagColour}-darker bg-${tagColour}-lighter
+ `}
+ >
+ {props.tagLabel}
+ </span>
+ ) : (
+ ""
+ )}
+ </div>
+ {props.showDate ? (
+ <p className="ml-6 text-base text-custom-gray-date">
+ {"Posted: " + props.datePosted.substring(0, 10)}
+ </p>
+ ) : (
+ ""
+ )}
+ <p className="text-custom-gray-text mx-6 leading-30px text-lg">
+ {props.description}
+ </p>
+ {props.showButton ? (
+ <ActionButton
+ href={props.btnHref}
+ text={props.btnText}
+ id={props.btnId}
+ dataCy={props.btnId}
+ className="flex mt-6 mb-2 ml-4 rounded xxs:w-full xs:w-fit py-2 bg-[#EAEBED] text-custom-blue-text focus:ring-inset focus:ring-2 focus:ring-black hover:bg-details-button-hover-gray text-center border border-details-button-gray"
+ />
+ ) : (
+ ""
+ )}
+ </div>
+ </Link>
+ );
+};
+
+Card.propTypes = {
+ /**
+ * Title of the experiment card.
+ */
+ title: PropTypes.string.isRequired,
+
+ /**
+ * tag of the experiment card
+ */
+ tag: PropTypes.string,
+
+ /**
+ * Link of the card
+ */
+ href: PropTypes.string,
+
+ /**
+ * the label of the tag card
+ */
+ tagLabel: PropTypes.string,
+
+ /**
+ * Description of the experiment card.
+ */
+ description: PropTypes.string.isRequired,
+
+ /**
+ * the test id for unit tests
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * the test id for cypress test
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * Boolean value to show or hide image
+ */
+ showImage: PropTypes.bool,
+
+ /**
+ * Boolean value to show or hide button
+ */
+ showButton: PropTypes.bool,
+
+ /**
+ * Boolean value to show or hide date
+ */
+ showDate: PropTypes.bool,
+
+ /**
+ * Boolean value to show or hide icon beside title
+ */
+ showIcon: PropTypes.bool,
+
+ /**
+ * Boolean value to show or hide tag
+ */
+ showTag: PropTypes.bool,
+};
+
+export default Card;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 | + + + + + + + + +3x + +1x +1x +1x +1x +1x + +1x + + + + + + + +1x + + + + + + + + +1x + + + + + + + + +1x + + + + + + + +1x + + + + + + + + | import React from "react";
+import Card from "./Card";
+import Image from "../../public/placeholder.png";
+
+export default {
+ title: "Components/Molecules/Card",
+ component: Card,
+};
+
+const Template = (args) => <Card {...args} />;
+
+export const Primary = Template.bind({});
+export const WithTag = Template.bind({});
+export const WithImage = Template.bind({});
+export const WithDate = Template.bind({});
+export const WithButton = Template.bind({});
+
+Primary.args = {
+ title: "Title",
+ href: "/some/link",
+ description: "Description",
+ imgSrc: "/placeholderImg",
+ imgAlt: "placeholderAlt",
+};
+
+WithTag.args = {
+ showTag: true,
+ title: "Title",
+ tag: "experiment_tag",
+ tagLabel: "Experiment tag",
+ description: "Description",
+ href: "/some/link",
+};
+
+WithImage.args = {
+ showImage: true,
+ title: "Title",
+ description: "Description",
+ href: "/somelink",
+ imgSrc: Image,
+ imgAlt: "placeholderAlt",
+};
+
+WithDate.args = {
+ showDate: true,
+ title: "Title",
+ href: "/somelink",
+ datePosted: "2022-01-01",
+ description: "Description",
+};
+
+WithButton.args = {
+ showButton: true,
+ title: "Title",
+ description: "Description",
+ href: "/somelink",
+ btnHref: "/somelink",
+ btnText: "Button text",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 | + + + + +4x + + + + +4x + + + + + + + + +1x + + + + + + + + + + + + + + + + + + +2x + + + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import Clipboard from "react-copy-to-clipboard";
+import { ActionButton } from "../atoms/ActionButton";
+
+export function CopyToClipboard(props) {
+ const ifControlledProps = !props.uncontrolled
+ ? {
+ value: props.value,
+ }
+ : {};
+ return (
+ <div>
+ <input
+ className={`font-body w-full min-h-40px py-6px px-12px text-center ${props.textFieldStyle}`}
+ id={props.id}
+ aria-describedby={props.describedby}
+ name={props.name}
+ placeholder={props.placeholder}
+ type={props.type}
+ onChange={(e) => props.onChange(e.currentTarget.value)}
+ {...ifControlledProps}
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy}
+ aria-label={props.aria_label}
+ />
+ <Clipboard text={props.value}>
+ <ActionButton
+ id={props.buttonId}
+ className={`w-full ${props.buttonStyle}`}
+ onClick={props.onClick}
+ >
+ {props.buttonText}
+ </ActionButton>
+ </Clipboard>
+ </div>
+ );
+}
+
+CopyToClipboard.defaultProps = {
+ value: "",
+ type: "text",
+};
+
+CopyToClipboard.propTypes = {
+ /**
+ * additional css for the component
+ */
+ className: PropTypes.string,
+
+ /**
+ * the id of the text field
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * the name of the text field
+ */
+ name: PropTypes.string.isRequired,
+
+ /**
+ * value of the text field
+ */
+ value: PropTypes.string,
+
+ /**
+ * placeholder for the text field,
+ */
+ placeholder: PropTypes.string,
+
+ /**
+ * the type of the input
+ */
+ type: PropTypes.string,
+
+ /**
+ * call back for when the value of the text field changes
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * call back for when the link has been copied
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * message to display if there is an error
+ */
+ error: PropTypes.string,
+
+ /**
+ * if label should be bold
+ */
+ boldLabel: PropTypes.bool,
+
+ /**
+ * boolean flag to specify that this input should be uncontrolled by react
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * unit test selector
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * cypress tests selector
+ */
+ dataCy: PropTypes.string,
+
+ /**
+ * aria-describedby label id
+ */
+ describedby: PropTypes.string,
+
+ /**
+ * aria-label
+ */
+ aria_label: PropTypes.string,
+
+ /**
+ * Text for ActionButton
+ */
+ buttonText: PropTypes.string,
+ /**
+ * id for ActionButton
+ */
+ buttonId: PropTypes.string,
+ /**
+ * Custom styling for the button
+ */
+ buttonStyle: PropTypes.string,
+ /**
+ * Custom styling for the text field
+ */
+ textFieldStyle: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 | + + + + + + + +2x + +1x + +1x + + + + + + + + + + | import React from "react";
+import { CopyToClipboard } from "./CopyToClipboard";
+
+export default {
+ title: "Components/Molecules/CopyToClipboard",
+ component: CopyToClipboard,
+};
+
+const Template = (args) => <CopyToClipboard {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ buttonId: "clipboardButton",
+ buttonText: "Copy link",
+ buttonStyle: "ieButton",
+ id: "clipboard",
+ name: "theClipboard",
+ textFieldStyle: "ieTextField",
+ dataTestId: "clipboard-controlled",
+ aria_label: "clipboard",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 | + + + + + +22x + + + + + + + + + + + +7x + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * Drop Down Element
+ */
+export function Details(props) {
+ return (
+ <details data-testid={props.dataTestId} data-cy={props.dataCy}>
+ <summary className="max-w-450px w-full bg-details-button-gray focus:ring-inset focus:ring-2 focus:ring-black active:bg-details-button-active-gray hover:bg-details-button-hover-gray rounded py-12px px-5px font-body text-sm text-center text-canada-footer-font cursor-pointer border border-outset border-details-button-gray">
+ {props.label}
+ </summary>
+ <div className="max-w-450px w-full min-h-200px bg-gray-light-200 mt-1 p-15px border border-details-border-gray rounded ring-inset ring-1 ring-gray-light-200">
+ {props.children}
+ </div>
+ </details>
+ );
+}
+
+Details.propTypes = {
+ /**
+ * id for the details element
+ */
+ id: PropTypes.string,
+
+ /**
+ * the label of the details button
+ */
+ label: PropTypes.string.isRequired,
+
+ /**
+ * the content for the details element
+ */
+ children: PropTypes.node,
+
+ /**
+ * unit test selector
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * cypress selector
+ */
+ dataCy: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 | + + + + + + + +2x + +1x +1x + + + + + + | import React from "react";
+import { Details } from "./Details";
+
+export default {
+ title: "Components/Molecules/Details",
+ component: Details,
+};
+
+const Template = (args) => <Details {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ id: "unopenedDetails",
+ label: "A Drop Down",
+ children: "Content",
+ dataTestId: "details",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 | + + + + + + +3x + + + + + + + + + + + + + + + +9x + + + + +1x + + + + + + + + + + + + + +1x + + + +1x + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ActionButton } from "../atoms/ActionButton";
+
+/**
+ * error box to be used to summarise error in forms
+ */
+export function ErrorBox(props) {
+ return (
+ <div
+ id="error-box"
+ className="relative border-l-4 border-error-border-red min-h-40px my-10"
+ data-cy="error-box"
+ role="alert"
+ aria-atomic="true"
+ >
+ <span className="icon-error absolute top-1 -left-2.5 bg-white" />
+ <p className="font-bold ml-4 text-p mb-2 lg:text-h4">{props.text}</p>
+ <ul
+ className="w-full list-disc list-outside leading-loose pl-8 text-sm lg:text-p"
+ data-cy="error-box-items"
+ id="error-box-items"
+ >
+ {props.errors.map(({ id, text }) => {
+ return (
+ <li key={`${id}-${text}`} className="mb-2">
+ <ActionButton
+ id={`${id}-${text}`}
+ custom="font-body hover:text-canada-footer-hover-font-blue text-canada-footer-font underline inline-block text-left"
+ onClick={() => props.onClick(id)}
+ dataCy={`error-item-${id}`}
+ className="" // This is to avoid all the "undefined" class names applied.
+ >
+ {text}
+ </ActionButton>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ );
+}
+
+ErrorBox.defaultProps = {
+ errors: [],
+};
+
+ErrorBox.propTypes = {
+ /**
+ * An array of error messages to display. Each object contains the id of the element which
+ * when the text is clicked the browser will scroll too
+ */
+ text: PropTypes.string.isRequired,
+ errors: PropTypes.arrayOf(
+ PropTypes.shape({
+ /**
+ * the id of the element on the page to scroll too
+ */
+ id: PropTypes.string.isRequired,
+ /**
+ * the text to display for the error component
+ */
+ text: PropTypes.string.isRequired,
+ })
+ ),
+ /**
+ * onClick callback
+ */
+ onClick: PropTypes.func,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 | + + + + + + + + + + + + + + + + + + + +3x + +1x + +1x + + + + + + + + + + + + + + + + + | import React from "react";
+import { ErrorBox } from "./ErrorBox";
+
+export default {
+ title: "Components/Molecules/ErrorBox",
+ component: ErrorBox,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex items-center flex-col">
+ <div className="w-96">
+ <Story />
+ </div>
+ <div id="someid" className="mt-80">
+ Some element with an id
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <ErrorBox {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ text: "The form could not be submitted because three errors were found",
+ errors: [
+ {
+ id: "someid",
+ text: "Some Error 1",
+ },
+ {
+ id: "someid",
+ text: "Some Error 2",
+ },
+ {
+ id: "someid",
+ text: "Some Error 3",
+ },
+ ],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 | + + + + + + + + + + + + + +5x + + + + + +10x +10x +10x +10x +10x +10x +10x + +10x + +10x +7x +2x +2x + + + + +10x + + + +1x +1x + + + + +1x +1x + + +1x + + + + + + + +10x +10x +10x + + + + + + + +10x + +1x + +1x + +1x + +1x + +1x + + + + + + +1x + + + +1x + +1x + + + + + + + + + + + + + + + + + + + + + + +1x + + + +10x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +5x + + + + + + + + | import React, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "next-i18next";
+import { ActionButton } from "../atoms/ActionButton";
+import Joi from "joi";
+import { ErrorLabel } from "../atoms/ErrorLabel";
+import FocusTrap from "focus-trap-react";
+import lockScroll from "react-lock-scroll";
+import { stripFeedback } from "../../lib/utils/stripFeedback";
+
+/**
+ * Displays the PhaseBanner on the page
+ */
+
+export const FeedbackWidget = ({
+ showFeedback,
+ toggleForm,
+ projectName,
+ path,
+}) => {
+ const [submitted, setSubmitted] = useState(false);
+ const [feedbackClose, setFeedbackClose] = useState(false);
+ const { t } = useTranslation("common");
+ const [response, setResponse] = useState(t("thankYouFeedback"));
+ const email = process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL;
+ const [count, setCount] = useState(2000);
+ var maxLength = 2000;
+
+ lockScroll(showFeedback);
+
+ useEffect(() => {
+ if (!showFeedback) {
+ setFeedbackError("");
+ setFeedback("");
+ }
+ }, [showFeedback]);
+
+ // Joi form validation schema.
+ const formSchema = Joi.object({
+ feedback: Joi.string()
+ .required()
+ .error((errors) => {
+ errors.forEach((error) => {
+ switch (error.code) {
+ case "any.required":
+ error.message = t("feedbackRequired");
+ break;
+ default:
+ error.message = t("feedbackRequired");
+ break;
+ }
+ });
+ return errors;
+ }),
+ });
+
+ function setFocusAfterSubmit() {
+ document.getElementById("feedbackButton").focus();
+ }
+
+ const [feedback, setFeedback] = useState("");
+ const [feedbackError, setFeedbackError] = useState("");
+ const feedbackObject = useRef({
+ feedbackToSend: {
+ project: "",
+ pageUrl: "",
+ feedback: "",
+ },
+ });
+
+ let onSubmitHandler = async (e) => {
+ // prevent default behaviour of form
+ e.preventDefault();
+ // clear out error values
+ await setFeedbackError("");
+ // compile feedback into object to be validated
+ const formData = { feedback };
+ //Strip personal identifier information from feedback
+ var cleanedFeedback = stripFeedback(formData.feedback);
+ // set values in feedback object
+ feedbackObject.current.feedbackToSend = {
+ project: projectName,
+ pageUrl: path,
+ feedback: cleanedFeedback,
+ };
+
+ // validate data using Joi schema
+ const { error } = formSchema.validate(formData, {
+ abortEarly: false,
+ allowUnknown: true,
+ });
+ const valid = error === undefined;
+
+ Iif (valid) {
+ //Submit data to the api
+ const response = await fetch("/api/feedback", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(feedbackObject.current.feedbackToSend),
+ });
+
+ // if the response is good, show thank you message
+ if (response.status === 201 || response.status === 200) {
+ await setResponse(t("thankYouFeedback"));
+ setFeedback("");
+ setCount(2000);
+ } else {
+ await setResponse(t("sorryFeedback"));
+ }
+
+ setSubmitted(true);
+ setFeedbackClose(false);
+ setFocusAfterSubmit();
+ } else {
+ setFeedbackError(error.message);
+ }
+ };
+
+ return (
+ <>
+ {showFeedback ? (
+ <FocusTrap
+ focusTrapOptions={{
+ initialFocus: false,
+ fallbackFocus: "#feedbackClose",
+ }}
+ >
+ <div
+ className="fixed top-0 left-0 w-screen h-full flex justify-center items-center"
+ style={{ background: "rgba(71, 71, 71, 0.8)" }}
+ >
+ <div
+ className="w-auto mx-12 md:mx-24 bg-white shadow-lg border-black border-4"
+ data-testid="feedbackDropdown"
+ >
+ {submitted ? (
+ <div role="status" className="w-full">
+ {!feedbackClose ? (
+ <div
+ className={`${
+ response === t("thankYouFeedback")
+ ? "bg-custom-green-darker font-bold"
+ : "bg-circle-color"
+ } text-white flex py-2`}
+ >
+ <div className="layout-container flex">
+ <span className="flex flex-col text-xs lg:text-sm font-body mt-2 mb-4 w-full">
+ {response}
+ {response === t("sorryFeedback") ? (
+ <ActionButton
+ id="link-mail"
+ ariaLabel="Service Canada email"
+ dataCy="link-mail"
+ dataTestId="link-mail"
+ href={`mailto:${email}`}
+ text={email}
+ custom="w-max text-xs lg:text-sm underline outline-none focus:outline-white-solid"
+ />
+ ) : (
+ ""
+ )}
+ </span>
+ <div className="w-1/4 flex justify-end">
+ <ActionButton
+ id="feedbackClose"
+ ariaLabel="Close the expanded feedback section"
+ dataCy="closeButton"
+ dataTestId="closeButton"
+ custom="font-body text-gray-dark-100 flex -py-1 mt-2.5 lg:mt-0 outline-none focus:outline-white-solid items-center"
+ imageSource="/close-x.svg"
+ imageAlt="Close button"
+ imageSpanClass="text-xs text-white leading-4 lg:text-sm underline ml-1 lg:ml-2 lg:leading-10"
+ imageSpanText={t("close")}
+ onClick={() => setFeedbackClose(true)}
+ tabindex="-1"
+ />
+ </div>
+ </div>
+ </div>
+ ) : (
+ ""
+ )}
+ </div>
+ ) : (
+ ""
+ )}
+ <div className="layout-container text-gray-dark-100 pb-4">
+ <div className="pt-4">
+ <ActionButton
+ id="feedbackClose"
+ ariaLabel="Close the expanded feedback section"
+ dataCy="closeButton"
+ dataTestId="closeButton"
+ custom="flex float-right font-body text-gray-dark-100 flex mt-2.5 lg:mt-0 outline-none focus:outline-white-solid items-center"
+ imageSource="/close-x.svg"
+ imageAlt="Close button"
+ imageSpanClass="text-xs leading-4 lg:text-sm underline ml-2 lg:leading-10"
+ imageSpanText={t("close")}
+ onClick={() => {
+ toggleForm();
+ setCount(2000);
+ }}
+ />
+ </div>
+ <h2 className="text-h4 lg:text-h3 lg:text-sm font-display pt-6 mb-4 w-48 sm:w-auto">
+ {t("improveService")}
+ </h2>
+ <ul className="list-outside list-disc px-6 pb-3">
+ <li className="text-xs lg:text-sm pt-2 pb-1 font-body">
+ <strong>{t("reportAProblemNoReply")}</strong>
+ </li>
+ <li className="text-xs lg:text-sm font-body mb-0">
+ <strong>{t("confidential")}</strong>
+ <ActionButton
+ ariaLabel="Privacy page link"
+ id="link-privacyPage"
+ dataCy="link-privacyPage"
+ dataTestId="link-privacyPage"
+ href={t("privacyLink")}
+ text={t("reportAProblemPrivacyStatement")}
+ custom="text-xs lg:text-sm underline ml-2 outline-none focus:outline-white-solid"
+ />
+ </li>
+ </ul>
+ <form
+ data-gc-analytics-formname="ESDC|EDSC:ServiceCanadaLabsFeedback-Form"
+ data-gc-analytics-collect='[{"value":"input,select","emptyField":"N/A"}]'
+ className="w-full"
+ action="#"
+ onSubmit={onSubmitHandler}
+ aria-live="polite"
+ >
+ <label
+ htmlFor="feedbackTextArea"
+ className="text-xs lg:text-sm font-body"
+ >
+ <b
+ className="text-error-border-red mr-1"
+ aria-hidden="true"
+ >
+ *
+ </b>
+ <b>{t("doBetter")}</b>
+ </label>
+ <div id="feedbackInfo">
+ <p className="text-xs lg:text-sm my-2">
+ {t("doNotInclude")}
+ </p>
+ <p className="text-xs lg:text-sm mb-1 mt-4">
+ {count}
+ {t("maximum2000")}
+ </p>
+ </div>
+ {feedbackError ? (
+ <ErrorLabel
+ message={feedbackError}
+ className="text-black mt-4"
+ />
+ ) : undefined}
+ <textarea
+ aria-describedby="feedbackInfo"
+ id="feedbackTextArea"
+ name="feedbackTextArea"
+ maxLength="2000"
+ rows="5"
+ className={
+ "text-input font-body w-full min-h-40px shadow-sm text-form-input-gray border-2 border-gray-dark-100 my-2 py-6px px-12px rounded"
+ }
+ value={feedback}
+ onChange={(e) => setFeedback(e.currentTarget.value)}
+ onInput={(e) =>
+ setCount(maxLength - e.currentTarget.value.length)
+ }
+ aria-required="true"
+ />
+ <ActionButton
+ id="feedback-submit"
+ ariaLabel="Submit feedback"
+ custom="outline-none focus:outline-black-solid rounded block w-full lg:w-auto lg:px-12 text-xs lg:text-sm py-2 mt-2 font-bold bg-custom-blue-blue text-white border border-custom-blue-blue active:bg-custom-blue-dark hover:bg-custom-blue-light flex justify-center"
+ type="submit"
+ dataCy="feedback-submit"
+ dataTestId="feedback-submit"
+ text={t("reportAProblemSubmit")}
+ analyticsTracking
+ />
+ </form>
+ </div>
+ </div>
+ </div>
+ </FocusTrap>
+ ) : (
+ ""
+ )}
+ </>
+ );
+};
+
+FeedbackWidget.propTypes = {
+ /**
+ * This is for showing the feedback component
+ */
+ feedbackActive: PropTypes.bool,
+};
+
+export default FeedbackWidget;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + + +4x + +1x + +1x + + + | import React from "react";
+import FeedbackWidget from "./FeedbackWidget";
+
+export default {
+ title: "Components/Molecules/FeedbackWidget",
+ component: FeedbackWidget,
+};
+
+const Template = (args) => <FeedbackWidget {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ showFeedback: true,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 | + + + + + + +3x + + + + + + + + + + + +9x + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { RadioButton } from "../atoms/RadioButton";
+
+/**
+ * Filter Experiments component
+ */
+export function Filter(props) {
+ return (
+ <form
+ className="my-12"
+ data-testid={props.dataTestId}
+ data-cy={props.dataCy}
+ >
+ <fieldset>
+ <legend className="md:float-left font-body pb-3 pt-2 pr-4 text-sm md:text-base">
+ {props.label}
+ </legend>
+ <div className={"flex"}>
+ {props.options.map(({ id, label, checked }, index) => (
+ <RadioButton
+ key={id}
+ label={label}
+ value={id}
+ name={id}
+ id={id}
+ dataTestId={id}
+ dataCy={id}
+ onChange={props.onChange}
+ checked={checked}
+ roundedFront={index === 0}
+ roundedBack={index === props.options.length - 1}
+ />
+ ))}
+ </div>
+ </fieldset>
+ </form>
+ );
+}
+
+Filter.propTypes = {
+ /**
+ * options for the filter
+ */
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ checked: PropTypes.bool,
+ })
+ ).isRequired,
+
+ /**
+ * filter label
+ */
+ label: PropTypes.string,
+
+ /**
+ * Action to do on input change
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Test id for unit tests
+ */
+ dataTestId: PropTypes.string,
+
+ /**
+ * Test id for cypress test
+ */
+ dataCy: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 | + + + + + + + +3x + +1x + +1x + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import { Filter } from "./Filter";
+
+export default {
+ title: "Components/Molecules/Filter",
+ component: Filter,
+};
+
+const Template = (args) => <Filter {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ label: "Filter By",
+ options: [
+ {
+ id: "all",
+ label: "All",
+ checked: false,
+ },
+ {
+ id: "coming_soon",
+ label: "Coming Soon",
+ checked: false,
+ },
+ {
+ id: "alpha",
+ label: "Alpha",
+ checked: true,
+ },
+ ],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 | + + + + + +2x +2x + + + +8x + + +8x +8x + + + + + + + + + + + + + + +1x + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * List component
+ */
+export function List(props) {
+ let opacity = 40;
+ return (
+ <ul className={props.className}>
+ {props.items.map((item, key) => {
+ let className =
+ "bg-opacity-" +
+ opacity +
+ " bg-circle-color text-shadow-about-circles flex-shrink-0 mr-4 mb-2 rounded-full h-36 w-36 flex items-center justify-center text-white font-bold font-display text-h1xxl relative md:left-0 -left-14";
+ if (opacity < 100) opacity += 20;
+ return (
+ <li key={key} className="flex">
+ <span className={className} role="presentation">
+ {key + 1}
+ </span>
+ <p className="text-sm md:text-p my-auto leading-normal font-body">
+ {item}
+ </p>
+ </li>
+ );
+ })}
+ </ul>
+ );
+}
+
+List.propTypes = {
+ /**
+ * List items
+ */
+ items: PropTypes.arrayOf(String).isRequired,
+
+ /**
+ * Option for styling component
+ */
+ className: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 | + + + + + + + +2x + +1x + +1x + + + | import React from "react";
+import { List } from "./List";
+
+export default {
+ title: "Components/Molecules/List",
+ component: List,
+};
+
+const Template = (args) => <List {...args}></List>;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ items: ["Item 1", "Item 2", "Item 3", "Item 4"],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 | + + + + + + + + + +4x +4x +4x + +4x + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +12x +12x + +12x + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+/**
+ * Menu component
+ */
+export function Menu(props) {
+ //Router
+ const { asPath } = useRouter();
+ const router = useRouter();
+ const [showMenu, setShowMenu] = useState(false);
+
+ return (
+ <nav
+ title="Menu"
+ className="layout-container lg:justify-end lg:flex"
+ data-cy="menu"
+ role="navigation"
+ aria-labelledby="mainSiteNav"
+ >
+ <h3 className="sr-only" id="mainSiteNav">
+ Menu
+ </h3>
+ <div className="flex justify-between">
+ <button
+ id="menuButton"
+ onClick={() => setShowMenu(!showMenu)}
+ className="text-h4 text-canada-footer-font focus:outline-none focus:ring-2 focus:ring-black mb-4 py-1"
+ aria-haspopup="true"
+ aria-expanded={showMenu}
+ aria-controls="menuDropdown"
+ data-testid="menuButton"
+ >
+ <span className="inline-block align-middle icon-menu" />
+ <span className="inline-block align-middle pl-3 font-body text-p leading-none">
+ {props.menuButtonTitle}
+ </span>
+ </button>
+
+ <button
+ id="menuClose"
+ onClick={() => setShowMenu(!showMenu)}
+ className={`${
+ showMenu ? "" : "hidden"
+ } sr-only mb-4 text-canada-footer-font outline-none focus:not-sr-only focus:outline-black-solid lg:invisible`}
+ aria-expanded={showMenu}
+ aria-controls="menuDropdown"
+ aria-label="Close the expanded menu options"
+ data-testid="menuCloseButton"
+ >
+ <img src="/close-x-menu.svg" alt="Close button"></img>
+ </button>
+ </div>
+
+ <ul
+ id="menuDropdown"
+ className={`menuDropdown mt-2 ${showMenu ? "active" : ""}`}
+ role="menu"
+ aria-expanded={showMenu}
+ >
+ {props.items.map((item, key) => {
+ const exactURL = asPath === item.link; // it's exactly this url
+ const includesURL = asPath.includes(item.link); // it's a child of this url (eg, "/projects/app" includes "/projects")
+
+ return (
+ <li
+ key={key}
+ className={`py-3 lg:py-0 cursor-pointer text-custom-blue-projects-link list-none -my-2 -ml-2`}
+ role="menuitem"
+ aria-current={exactURL ? "page" : null}
+ >
+ <Link
+ href={item.link}
+ className={`font-body text-base ${
+ includesURL
+ ? router.pathname !== "/signup/privacy"
+ ? "activePage"
+ : "menuLink underline"
+ : "menuLink underline"
+ }`}
+ >
+ {item.text}
+ </Link>
+ </li>
+ );
+ })}
+ </ul>
+ </nav>
+ );
+}
+
+Menu.propTypes = {
+ /**
+ * Menu title for small screens
+ */
+ menuButtonTitle: PropTypes.string.isRequired,
+
+ /**
+ * text for sign up button
+ */
+ signUpText: PropTypes.string.isRequired,
+
+ /**
+ * Array of Items for the menu
+ */
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ /**
+ * Text for the menu
+ */
+ text: PropTypes.string,
+
+ /**
+ * Link for the menu
+ */
+ link: PropTypes.string,
+ })
+ ).isRequired,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | + + + + + + + +3x + +1x + +1x + + + + + + + + + + + + + + + + + + | import React from "react";
+import { Menu } from "./Menu";
+
+export default {
+ title: "Components/Molecules/Menu",
+ component: Menu,
+};
+
+const Template = (args) => <Menu {...args}></Menu>;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ menuButtonTitle: "Menu",
+ signUpText: "Sign up",
+ items: [
+ {
+ link: "#",
+ text: "Link1",
+ },
+ {
+ link: "#",
+ text: "Link2",
+ },
+ {
+ link: "#",
+ text: "Link3",
+ },
+ ],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 | + + + + + + + + +5x +5x +1x + + +1x + + +1x + + + +5x +5x + + +5x +5x + + + +5x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from "react";
+import { CheckBox } from "../atoms/CheckBox";
+import { RadioField } from "../atoms/RadioField";
+import PropTypes from "prop-types";
+
+/**
+ * An optional list field (radio, checkbox) that is enabled by a checkbox
+ */
+export function OptionalListField(props) {
+ let [showListField, setShowListField] = useState(props.checked || false);
+ let handleCheckChange = (wasChecked, name, value) => {
+ Iif (wasChecked) {
+ setShowListField(false);
+ } else {
+ setShowListField(true);
+ }
+
+ Iif (props.onControlChange) {
+ props.onControlChange(wasChecked, name, value);
+ }
+ };
+ let sortedChildren = [...props.children].sort((a, b) => {
+ Iif (a.props.label < b.props.label) {
+ return -1;
+ }
+ Eif (b.props.label < a.props.label) {
+ return 1;
+ }
+ return 0;
+ });
+ return (
+ <>
+ {props.controlType === "checkbox" ? (
+ <CheckBox
+ label={props.controlLabel}
+ id={props.controlId}
+ name={props.controlName}
+ checked={props.checked}
+ uncontrolled={props.uncontrolled}
+ value={props.controlValue}
+ onChange={handleCheckChange}
+ dataTestId={props.controlDataTestId}
+ required={props.controlRequired}
+ dataCy={props.controlDataCy}
+ />
+ ) : (
+ <RadioField
+ label={props.controlLabel}
+ id={props.controlId}
+ name={props.controlName}
+ checked={props.checked}
+ uncontrolled={props.uncontrolled}
+ value={props.controlValue}
+ onChange={handleCheckChange}
+ required={props.controlRequired}
+ dataTestId={props.controlDataTestId}
+ dataCy={props.controlDataCy}
+ />
+ )}
+ {(props.uncontrolled && showListField) || props.checked ? (
+ <fieldset className="mb-10px">
+ <legend className="block leading-tight text-sm font-body mb-5px font-bold">
+ {props.listFieldRequired ? (
+ <b className="text-error-border-red" aria-hidden="true">
+ *
+ </b>
+ ) : (
+ ""
+ )}
+ {props.listLabel}
+ </legend>
+ <div className="gap-4">{sortedChildren}</div>
+ </fieldset>
+ ) : undefined}
+ </>
+ );
+}
+
+OptionalListField.defaultProps = {
+ controlType: "checkbox",
+};
+
+OptionalListField.propTypes = {
+ /**
+ * the type of field that should be used
+ */
+ controlType: PropTypes.oneOf(["checkbox", "radiofield"]),
+ /**
+ * the id for the checkbox
+ */
+ controlId: PropTypes.string.isRequired,
+
+ /**
+ * the name for the checkbox
+ */
+ controlName: PropTypes.string.isRequired,
+
+ /**
+ * the label for the checkbox
+ */
+ controlLabel: PropTypes.string.isRequired,
+
+ /**
+ * the value for the checkbox
+ */
+ controlValue: PropTypes.string,
+
+ /**
+ * whether or not the checkbox is checked
+ */
+ checked: PropTypes.bool,
+
+ /**
+ * boolean flag to denote whether or not the inputs are controlled
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * whether or not the control is required
+ */
+ controlRequired: PropTypes.bool,
+
+ /**
+ * the test id for the checkbox to select in unit tests
+ */
+ controlDataTestId: PropTypes.string,
+
+ /**
+ * the cypress selector for the checkbox
+ */
+ controlDataCy: PropTypes.string,
+
+ /**
+ * callback when the checkbox changes
+ */
+ onControlChange: PropTypes.func,
+
+ /**
+ * whether or not the list field is required
+ */
+ listFieldRequired: PropTypes.bool,
+
+ /**
+ * list items to display
+ */
+ children: PropTypes.arrayOf(PropTypes.element),
+
+ /**
+ * legend text for the list items
+ */
+ listLabel: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 | + + + + + + + + + + + + + + + + + + +4x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import { OptionalListField } from "./OptionalListField";
+import { CheckBox } from "../atoms/CheckBox";
+import { RadioField } from "../atoms/RadioField";
+
+export default {
+ title: "Components/Molecules/OptionalListField",
+ component: OptionalListField,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <OptionalListField {...args} />;
+
+export const UnOpened = Template.bind({});
+UnOpened.args = {
+ controlId: "nutella-check-1",
+ controlName: "nutellaCheckOne",
+ controlLabel: "Do you not like Nutella ?",
+ controlValue: "unopened",
+ controlDataTestId: "unopened-check-1",
+ listLabel: "Please check all the reasons why you are wrong.",
+ children: [
+ <CheckBox
+ key="key1"
+ label="I don't like fake chocolate spread"
+ name="reasons"
+ value="dislike"
+ id="reasons-dislike"
+ />,
+ <CheckBox
+ key="key2"
+ label="I make poor choices"
+ name="reasons"
+ value="poor-choice"
+ id="reasons-poor-choice"
+ />,
+ ],
+};
+
+export const Opened_Checkboxes = Template.bind({});
+Opened_Checkboxes.args = {
+ controlId: "nutella-check-1",
+ controlName: "nutellaCheckOne",
+ controlLabel: "Do you not like Nutella ?",
+ checked: true,
+ controlDataTestId: "opened-check-1",
+ listLabel: "Please check all the reasons why you are wrong.",
+ children: [
+ <CheckBox
+ key="key1"
+ label="I don't like fake chocolate spread"
+ name="reasons"
+ value="dislike"
+ id="reasons-dislike"
+ dataTestId="reasons-dislike"
+ />,
+ <CheckBox
+ key="key2"
+ label="I make poor choices"
+ name="reasons"
+ value="poor-choice"
+ id="reasons-poor-choice"
+ dataTestId="reasons-poor-choice"
+ />,
+ ],
+};
+
+export const Opened_Radiofields = Template.bind({});
+Opened_Radiofields.args = {
+ controlId: "nutella-check-1",
+ controlName: "nutellaCheckOne",
+ controlLabel: "Do you not like Nutella ?",
+ checked: true,
+ controlDataTestId: "opened-check-1",
+ listLabel: "Please check all the reasons why you are wrong.",
+ children: [
+ <RadioField
+ key="key1"
+ label="I don't like fake chocolate spread"
+ name="reasons"
+ value="dislike"
+ id="reasons-dislike"
+ dataTestId="reasons-dislike"
+ />,
+ <RadioField
+ key="key2"
+ label="I make poor choices"
+ name="reasons"
+ value="poor-choice"
+ id="reasons-poor-choice"
+ dataTestId="reasons-poor-choice"
+ />,
+ ],
+};
+
+export const Radio = Template.bind({});
+Radio.args = {
+ controlType: "radiofield",
+ controlId: "nutella-check-1",
+ controlName: "nutellaCheckOne",
+ controlLabel: "Do you not like Nutella ?",
+ checked: true,
+ controlDataTestId: "radio-check-1",
+ listLabel: "Please check all the reasons why you are wrong.",
+ children: [
+ <CheckBox
+ key="key1"
+ label="I don't like fake chocolate spread"
+ name="reasons"
+ value="dislike"
+ id="reasons-dislike"
+ dataTestId="reasons-dislike"
+ />,
+ <CheckBox
+ key="key2"
+ label="I make poor choices"
+ name="reasons"
+ value="poor-choice"
+ id="reasons-poor-choice"
+ dataTestId="reasons-poor-choice"
+ />,
+ ],
+};
+
+export const UnControlled = Template.bind({});
+UnControlled.args = {
+ controlId: "nutella-check-1",
+ controlName: "nutellaCheckOne",
+ controlLabel: "Do you not like Nutella ?",
+ uncontrolled: true,
+ controlDataTestId: "uncontrolled-check-1",
+ listLabel: "Please check all the reasons why you are wrong.",
+ children: [
+ <CheckBox
+ key="key1"
+ label="I don't like fake chocolate spread"
+ name="reasons"
+ value="dislike"
+ id="reasons-dislike"
+ dataTestId="reasons-dislike"
+ />,
+ <CheckBox
+ key="key2"
+ label="I make poor choices"
+ name="reasons"
+ value="poor-choice"
+ id="reasons-poor-choice"
+ dataTestId="reasons-poor-choice"
+ />,
+ ],
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 | + + + + + + + + + + + +132x +132x +132x +132x +3x + + + +3x +3x + + +3x + + + +132x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +7x + + + +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { useState } from "react";
+import { CheckBox } from "../atoms/CheckBox";
+import { TextField } from "../atoms/TextField";
+import { MultiTextField } from "../atoms/MultiTextField";
+import { RadioField } from "../atoms/RadioField";
+import { useTranslation } from "next-i18next";
+import PropTypes from "prop-types";
+
+/**
+ * An optional text box that is enabled by a checkbox
+ */
+export function OptionalTextField(props) {
+ let [showTextField, setShowTextField] = useState(props.checked || false);
+ const [expandState, setExpandState] = useState("collapsed");
+ const { t } = useTranslation("common");
+ let handleCheckChange = (wasChecked, name, value) => {
+ Iif (wasChecked) {
+ setShowTextField(false);
+ setExpandState(t("collapsed"));
+ } else {
+ setShowTextField(true);
+ setExpandState(t("expanded"));
+ }
+
+ Iif (props.onControlChange) {
+ props.onControlChange(wasChecked, name, value);
+ }
+ };
+ return (
+ <>
+ {props.controlType === "checkbox" && (
+ <CheckBox
+ label={props.controlLabel}
+ id={props.controlId}
+ name={props.controlName}
+ className={props.checkBoxStyle}
+ checked={props.checked}
+ uncontrolled={props.uncontrolled}
+ value={props.controlValue}
+ onChange={handleCheckChange}
+ dataTestId={props.controlDataTestId}
+ required={props.controlRequired}
+ dataCy={props.controlDataCy}
+ expandState={expandState}
+ />
+ )}
+ {props.controlType === "radiofield" && (
+ <RadioField
+ label={props.controlLabel}
+ id={props.controlId}
+ name={props.controlName}
+ checked={props.checked}
+ uncontrolled={props.uncontrolled}
+ value={props.controlValue}
+ onChange={handleCheckChange}
+ required={props.controlRequired}
+ dataTestId={props.controlDataTestId}
+ dataCy={props.controlDataCy}
+ />
+ )}
+ {(props.uncontrolled && showTextField) || props.checked ? (
+ props.multiText ? (
+ <MultiTextField
+ label={props.textFieldLabel}
+ placeholder={props.textFieldPlaceHolder}
+ name={props.textFieldName}
+ id={props.textFieldId}
+ value={props.textFieldValue}
+ boldLabel={props.textLabelBold}
+ rows={props.rows}
+ cols={props.cols}
+ spellCheck={props.spellCheck}
+ wrap={props.wrap}
+ required={props.textFieldRequired}
+ onChange={
+ props.onTextFieldChange ? props.onTextFieldChange : () => {}
+ }
+ dataTestId={props.textFieldDataTestId}
+ dataCy={props.textFieldDataCy}
+ error={props.error}
+ describedby={props.describedby}
+ />
+ ) : (
+ <TextField
+ label={props.textFieldLabel}
+ placeholder={props.textFieldPlaceHolder}
+ name={props.textFieldName}
+ id={props.textFieldId}
+ value={props.textFieldValue}
+ boldLabel={props.textLabelBold}
+ uncontrolled={props.uncontrolled}
+ required={props.textFieldRequired}
+ onChange={
+ props.onTextFieldChange ? props.onTextFieldChange : () => {}
+ }
+ dataTestId={props.textFieldDataTestId}
+ describedby={props.describedby}
+ dataCy={props.textFieldDataCy}
+ />
+ )
+ ) : undefined}
+ </>
+ );
+}
+
+OptionalTextField.defaultProps = {
+ controlType: "checkbox",
+};
+
+OptionalTextField.propTypes = {
+ /**
+ * the type of field that should be used
+ */
+ controlType: PropTypes.oneOf(["checkbox", "radiofield"]),
+ /**
+ * the id for the checkbox
+ */
+ controlId: PropTypes.string.isRequired,
+
+ /**
+ * the id for the text field
+ */
+ textFieldId: PropTypes.string.isRequired,
+
+ /**
+ * the name for the checkbox
+ */
+ controlName: PropTypes.string.isRequired,
+
+ /**
+ * the name for the text field
+ */
+ textFieldName: PropTypes.string.isRequired,
+
+ /**
+ * the label for the checkbox
+ */
+ controlLabel: PropTypes.string.isRequired,
+
+ /**
+ * the label for the text field
+ */
+ textFieldLabel: PropTypes.string.isRequired,
+
+ /**
+ * whether or not the text label is bold
+ */
+ textLabelBold: PropTypes.bool,
+
+ /**
+ * the value for the checkbox
+ */
+ controlValue: PropTypes.string,
+
+ /**
+ * the value for the text field
+ */
+ textFieldValue: PropTypes.string,
+
+ /**
+ * text field placeholder
+ */
+ textFieldPlaceHolder: PropTypes.string,
+
+ /**
+ * whether or not the checkbox is checked
+ */
+ checked: PropTypes.bool,
+
+ /**
+ * boolean flag to denote whether or not the inputs are controlled
+ */
+ uncontrolled: PropTypes.bool,
+
+ /**
+ * whether or not the control is required
+ */
+ controlRequired: PropTypes.bool,
+
+ /**
+ * whether or not the text field is required
+ */
+ textFieldRequired: PropTypes.bool,
+
+ /**
+ * the test id for the checkbox to select in unit tests
+ */
+ controlDataTestId: PropTypes.string,
+
+ /**
+ * the test id for the text field to select in unit tests
+ */
+ textFieldDataTestId: PropTypes.string,
+
+ /**
+ * the cypress selector for the checkbox
+ */
+ controlDataCy: PropTypes.string,
+
+ /**
+ * the cypress selector for the text field
+ */
+ textFieldDataCy: PropTypes.string,
+
+ /**
+ * callback when the checkbox changes
+ */
+ onControlChange: PropTypes.func,
+
+ /**
+ * callback when the text field changes
+ */
+ onTextFieldChange: PropTypes.func,
+
+ /**
+ * whether or not its a multi text field
+ */
+ multiText: PropTypes.bool,
+
+ /**
+ * how much lines should the multi text field show
+ */
+ rows: PropTypes.number,
+
+ /**
+ * how much columns the multi text field has
+ */
+ cols: PropTypes.number,
+
+ /**
+ * the minimum amount of characters for the multi text field
+ */
+ minLength: PropTypes.number,
+
+ /**
+ * the maximum amount of characters for the multi text field
+ */
+ maxLength: PropTypes.number,
+
+ /**
+ * the wrap preference for the multi text field
+ */
+ wrap: PropTypes.oneOf(["hard", "soft"]),
+
+ /**
+ * whether or not to spellcheck for the multi text field
+ */
+ spellCheck: PropTypes.bool,
+
+ /**
+ * message to display if there is an error
+ */
+ error: PropTypes.string,
+
+ /**
+ * aria-describedby label id
+ */
+ describedby: PropTypes.string,
+
+ /**
+ * Styling for checkbox
+ */
+ checkBoxStyle: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 | + + + + + + + + + + + + + + + + +3x + +1x +1x + + + + + + + + + + +1x +1x + + + + + + + + + + + +1x +1x + + + + + + + + + + + + +1x +1x + + + + + + + + + + + +1x +1x + + + + + + + + + + + + + | import React from "react";
+import { OptionalTextField } from "./OptionalTextField";
+
+export default {
+ title: "Components/Molecules/OptionalTextField",
+ component: OptionalTextField,
+ decorators: [
+ (Story) => (
+ <div className="w-full flex justify-center">
+ <div className="w-96">
+ <Story />
+ </div>
+ </div>
+ ),
+ ],
+};
+
+const Template = (args) => <OptionalTextField {...args} />;
+
+export const UnOpened = Template.bind({});
+UnOpened.args = {
+ controlId: "nutella-check-1",
+ textFieldId: "nutella-text-1",
+ controlName: "nutellaCheckOne",
+ textFieldName: "nutellaTextOne",
+ controlLabel: "Do you not like Nutella ?",
+ textFieldLabel: "Please explain why you are wrong ?",
+ controlDataTestId: "unopened-check-1",
+ textFieldDataTestId: "unopened-text-1",
+};
+
+export const Opened = Template.bind({});
+Opened.args = {
+ controlId: "nutella-check-1",
+ textFieldId: "nutella-text-1",
+ controlName: "nutellaCheckOne",
+ textFieldName: "nutellaTextOne",
+ controlLabel: "Do you not like Nutella ?",
+ checked: true,
+ textFieldLabel: "Please explain why you are wrong ?",
+ controlDataTestId: "opened-check-1",
+ textFieldDataTestId: "opened-text-1",
+};
+
+export const Radio = Template.bind({});
+Radio.args = {
+ controlType: "radiofield",
+ controlId: "nutella-check-1",
+ textFieldId: "nutella-text-1",
+ controlName: "nutellaCheckOne",
+ textFieldName: "nutellaTextOne",
+ controlLabel: "Do you not like Nutella ?",
+ checked: true,
+ textFieldLabel: "Please explain why you are wrong ?",
+ controlDataTestId: "radio-check-1",
+ textFieldDataTestId: "radio-text-1",
+};
+
+export const UnControlled = Template.bind({});
+UnControlled.args = {
+ controlId: "nutella-check-1",
+ textFieldId: "nutella-text-1",
+ controlName: "nutellaCheckOne",
+ textFieldName: "nutellaTextOne",
+ controlLabel: "Do you not like Nutella ?",
+ uncontrolled: true,
+ textFieldLabel: "Please explain why you are wrong ?",
+ controlDataTestId: "uncontrolled-check-1",
+ textFieldDataTestId: "uncontrolled-text-1",
+};
+
+export const MultiText = Template.bind({});
+MultiText.args = {
+ controlId: "nutella-check-1",
+ textFieldId: "nutella-text-1",
+ controlName: "nutellaCheckOne",
+ textFieldName: "nutellaTextOne",
+ controlLabel: "Do you not like Nutella ?",
+ uncontrolled: true,
+ multiText: true,
+ rows: 5,
+ textFieldLabel: "Please explain why you are wrong ?",
+ controlDataTestId: "multitext-check-1",
+ textFieldDataTestId: "multitext-text-1",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 | + + + + + +2x + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+
+/**
+ * Quote component
+ */
+export function Quote(props) {
+ return (
+ <figure
+ title="Quote"
+ className={
+ props.className +
+ " border-l-4 text-sm md:text-p pl-4 leading-normal font-body"
+ }
+ >
+ <blockquote className="max-w-sm">{props.text}</blockquote>
+ <figcaption className="text-gray-500 pt-4"> — {props.author}</figcaption>
+ </figure>
+ );
+}
+
+Quote.propTypes = {
+ /**
+ * Option for styling component
+ */
+ className: PropTypes.string,
+
+ /**
+ * Quote
+ */
+ text: PropTypes.string,
+
+ /**
+ * Author
+ */
+ author: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + + + + + + +2x + +1x + +1x + + + + | import React from "react";
+import { Quote } from "./Quote";
+
+export default {
+ title: "Components/Molecules/Quote",
+ component: Quote,
+};
+
+const Template = (args) => <Quote {...args}></Quote>;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+ text: "Some quote",
+ author: "Author",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 | + + + + + + + + +6x +5x + + + +6x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ActionButton } from "../atoms/ActionButton";
+
+/**
+ * component
+ */
+export function TextButtonField(props) {
+ //Verification for styling
+ let secondary;
+ if (props.custom === undefined)
+ props.secondary === undefined
+ ? (secondary = true)
+ : (secondary = props.secondary);
+
+ return (
+ <div className={props.className + " mb-4 mx-0"}>
+ {props.html === undefined ? (
+ <div className="textbuttonField">{props.children}</div>
+ ) : (
+ <div
+ className="textbuttonField"
+ dangerouslySetInnerHTML={{ __html: props.html }}
+ />
+ )}
+
+ {props.buttonText ? (
+ <ActionButton
+ id={props.idButton}
+ className={"mt-2 text-xs md:text-base"}
+ text={props.buttonText}
+ secondary={secondary}
+ disabled={props.disabled}
+ custom={props.custom}
+ href={props.href}
+ dataCyButton={props.dataCyButton}
+ />
+ ) : (
+ ""
+ )}
+ </div>
+ );
+}
+
+TextButtonField.propTypes = {
+ /**
+ * Option for styling component
+ */
+ className: PropTypes.string,
+
+ /**
+ * Option for html
+ */
+ html: PropTypes.string,
+
+ /**
+ * Contenty
+ */
+ children: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element,
+ PropTypes.arrayOf(PropTypes.element),
+ ]),
+
+ /**
+ * Button id
+ */
+ idButton: PropTypes.string,
+
+ /**
+ * Button link
+ */
+ href: PropTypes.string,
+
+ /**
+ * Button text
+ */
+ buttonText: PropTypes.string,
+
+ /**
+ * Button secondary
+ */
+ secondary: PropTypes.bool,
+
+ /**
+ * Button disabled
+ */
+ disabled: PropTypes.bool,
+
+ /**
+ * Button custom
+ */
+ custom: PropTypes.string,
+
+ /**
+ * Test id for cypress test for the button
+ */
+ dataCyButton: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 | + + + + + + + +6x + +1x +1x +1x +1x + +1x + + + + + + + +1x + + + + + + +1x + + + + + + + +1x + + + + + + + | import React from "react";
+import { TextButtonField } from "./TextButtonField";
+
+export default {
+ title: "Components/Molecules/TextButtonField",
+ component: TextButtonField,
+};
+
+const Template = (args) => <TextButtonField {...args}></TextButtonField>;
+
+export const Primary = Template.bind({});
+export const Secondary = Template.bind({});
+export const Disabled = Template.bind({});
+export const Custom = Template.bind({});
+
+Primary.args = {
+ title: "Primary",
+ html: "<h1>Title</h1><p>Text</p>",
+ idButton: "Button1",
+ buttonText: "Button",
+ secondary: false,
+};
+
+Secondary.args = {
+ title: "Secondary",
+ html: "<h1>Title</h1><p>Text</p>",
+ buttonText: "Button",
+ idButton: "Button2",
+};
+
+Disabled.args = {
+ title: "Disabled",
+ html: "<h1>Title</h1><p>Text</p>",
+ buttonText: "Button",
+ idButton: "Button3",
+ disabled: true,
+};
+
+Custom.args = {
+ title: "Custom",
+ html: "<h1>Title</h1><p>Text</p>",
+ buttonText: "Button",
+ idButton: "Button4",
+ custom: "bg-red-100",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| CallToAction.js | +
+
+ |
+ 100% | +3/3 | +62.5% | +5/8 | +100% | +1/1 | +100% | +3/3 | +
| CallToAction.stories.js | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +1/1 | +100% | +5/5 | +
| Card.js | +
+
+ |
+ 100% | +5/5 | +64.28% | +9/14 | +100% | +1/1 | +100% | +5/5 | +
| Card.stories.js | +
+
+ |
+ 100% | +12/12 | +100% | +0/0 | +100% | +1/1 | +100% | +11/11 | +
| CopyToClipboard.js | +
+
+ |
+ 100% | +5/5 | +50% | +1/2 | +100% | +2/2 | +100% | +5/5 | +
| CopyToClipboard.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Details.js | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| Details.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| ErrorBox.js | +
+
+ |
+ 100% | +5/5 | +100% | +0/0 | +100% | +3/3 | +100% | +5/5 | +
| ErrorBox.stories.js | +
+
+ |
+ 80% | +4/5 | +100% | +0/0 | +50% | +1/2 | +75% | +3/4 | +
| FeedbackWidget.js | +
+
+ |
+ 66.66% | +34/51 | +40.9% | +9/22 | +50% | +5/10 | +66.66% | +34/51 | +
| FeedbackWidget.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Filter.js | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +2/2 | +100% | +3/3 | +
| Filter.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| List.js | +
+
+ |
+ 100% | +7/7 | +100% | +2/2 | +100% | +2/2 | +100% | +6/6 | +
| List.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Menu.js | +
+
+ |
+ 90% | +9/10 | +60% | +6/10 | +75% | +3/4 | +90% | +9/10 | +
| Menu.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| OptionalListField.js | +
+
+ |
+ 75% | +12/16 | +73.68% | +14/19 | +100% | +3/3 | +75% | +12/16 | +
| OptionalListField.stories.js | +
+
+ |
+ 92.3% | +12/13 | +100% | +0/0 | +50% | +1/2 | +91.66% | +11/12 | +
| OptionalTextField.js | +
+
+ |
+ 78.57% | +11/14 | +80.95% | +17/21 | +50% | +2/4 | +78.57% | +11/14 | +
| OptionalTextField.stories.js | +
+
+ |
+ 92.3% | +12/13 | +100% | +0/0 | +50% | +1/2 | +91.66% | +11/12 | +
| Quote.js | +
+
+ |
+ 100% | +2/2 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
| Quote.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| TextButtonField.js | +
+
+ |
+ 100% | +4/4 | +75% | +6/8 | +100% | +1/1 | +100% | +4/4 | +
| TextButtonField.stories.js | +
+
+ |
+ 100% | +10/10 | +100% | +0/0 | +100% | +1/1 | +100% | +9/9 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 | + + + + + + + +1x + + + + + + + + + + + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + +8x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { ActionButton } from "../atoms/ActionButton";
+
+/**
+ * footer element for all pages
+ */
+
+export function Footer(props) {
+ return (
+ <div className="w-full">
+ <div className="w-full h-auto footerBackground bg-custom-blue-dark">
+ <div
+ className="w-full py-7 layout-container"
+ role="navigation"
+ aria-labelledby="footerNav1"
+ >
+ <h3 className="sr-only" id="footerNav1">
+ {props.footerNav1}
+ </h3>
+ <ul className="flex flex-col text-xs lg:grid lg:grid-cols-2 xl:grid xl:grid-cols-3 lg:gap-1 -ml-4">
+ {" "}
+ {props.footerBoxLinks.map((value, index) => {
+ return (
+ <li
+ key={index}
+ className="text-xs text-white w-64 lg:w-80 my-2.5 hover:underline list-none"
+ >
+ <a className="font-body" href={value.footerBoxlink}>
+ {value.footerBoxLinkText}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </div>
+ <div className="w-full h-full bg-footer-background-color pb-4">
+ <div className="h-auto bg-footer-white pt-5 layout-container flex flex-col xl:flex xl:flex-row md:justify-between">
+ <div
+ className="mt-3.5 xl:mt-5"
+ role="navigation"
+ aria-labelledby="footerNav2"
+ >
+ <h3 className="sr-only" id="footerNav2">
+ {props.footerNav2}
+ </h3>
+ <ul className="flex flex-col md:grid md:grid-cols-2 xl:flex lg:flex-row -ml-4">
+ {props.links.map((value, index) => {
+ return (
+ <li
+ key={index}
+ className={
+ index === 0
+ ? "lg:mb-4 mb-5 lg:list-inside list-disc xl:list-none text-xxs"
+ : "lg:mb-4 mb-5 lg:list-inside list-disc text-xxs"
+ }
+ >
+ <a
+ className="text-xs font-body hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ data-cy="social-media-link"
+ href={value.link}
+ >
+ {value.linkText}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ <div className="flex items-center justify-between">
+ <ActionButton
+ id="TopOfPageButton"
+ href="#"
+ custom="text-left w-32 flex flex-col lg:hidden"
+ text={props.topOfPage}
+ icon="icon-up-caret"
+ iconEnd
+ />
+ <span className="flex relative footer-logo">
+ <img src={props.footerLogoImage} alt={props.footerLogoAltText} />
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+Footer.propTypes = {
+ /**
+ * array of objects containing the link text and link
+ */
+ footerBoxLinks: PropTypes.arrayOf(
+ PropTypes.shape({
+ footerBoxlink: PropTypes.string.isRequired,
+ footerBoxLinkText: PropTypes.string.isRequired,
+ })
+ ),
+ /**
+ * array of objects containing the link text and link
+ */
+ links: PropTypes.arrayOf(
+ PropTypes.shape({
+ link: PropTypes.string.isRequired,
+ linkText: PropTypes.string.isRequired,
+ })
+ ),
+
+ /**
+ * alt text for footer canada-ca logo
+ */
+ footerLogoAltText: PropTypes.string.isRequired,
+
+ /**
+ * image path for footer logo
+ */
+ footerLogoImage: PropTypes.string.isRequired,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 | + + + + + + + +1x + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Footer } from "./Footer";
+import logo from "../../public/wmms-blk.svg";
+
+export default {
+ title: "Components/Organisms/Footer",
+ component: Footer,
+};
+
+const Template = (args) => <Footer {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+ links: [
+ {
+ link: "https://some-link-1.com",
+ linkText: "some-link-1",
+ },
+ {
+ link: "https://some-link-2.com",
+ linkText: "some-lin-2",
+ },
+ {
+ link: "https://some-link-3.com",
+ linkText: "some-link-3",
+ },
+ {
+ link: "https://some-link-4.com",
+ linkText: "some-link-4",
+ },
+ {
+ link: "https://some-link-5.com",
+ linkText: "some-link-5",
+ },
+ {
+ link: "https://some-link-6.com",
+ linkText: "some-link-6",
+ },
+ {
+ link: "https://some-link-7.com",
+ linkText: "some-link-7",
+ },
+ {
+ link: "https://some-link-8.com",
+ linkText: "some-link-8",
+ },
+ ],
+
+ footerBoxLinks: [
+ {
+ footerBoxlink: "https://some-link-11.com",
+ footerBoxLinkText: "some-link-11",
+ },
+ {
+ footerBoxlink: "https://some-link-22.com",
+ footerBoxLinkText: "some-lin-22",
+ },
+ {
+ footerBoxlink: "https://some-link-33.com",
+ footerBoxLinkText: "some-link-33",
+ },
+ {
+ footerBoxlink: "https://some-link-44.com",
+ footerBoxLinkText: "some-link-44",
+ },
+ {
+ footerBoxlink: "https://some-link-55.com",
+ footerBoxLinkText: "some-link-55",
+ },
+ {
+ footerBoxlink: "https://some-link-66.com",
+ footerBoxLinkText: "some-link-66",
+ },
+ {
+ footerBoxlink: "https://some-link-77.com",
+ footerBoxLinkText: "some-link-77",
+ },
+ {
+ footerBoxlink: "https://some-link-88.com",
+ footerBoxLinkText: "some-link-88",
+ },
+ ],
+
+ footerLogoAltText: "Symbol of the Government of Canada",
+ footerLogoImage: logo,
+ reportBtnText: "Report a problem",
+ reportDescription:
+ "Experiencing an issue with this product or have you spotted an error?",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 | + + + + + + + + + + + + +3x + + + + + + + + + + + + +7x +7x +7x + + + + +7x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import PropTypes from "prop-types";
+import { Banner } from "../atoms/Banner";
+import { Footer } from "@dts-stn/service-canada-design-system";
+import { PhaseBanner } from "./PhaseBanner";
+import { ReportAProblem } from "./ReportAProblem";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+import { DateModified } from "../atoms/DateModified";
+import { Breadcrumb } from "../atoms/Breadcrumb";
+
+/**
+ * Component which defines the layout of the page for all screen sizes
+ */
+export const Layout = ({
+ bannerText,
+ bannerTitle,
+ children,
+ locale,
+ langUrl,
+ breadcrumbItems,
+ feedbackActive,
+ showDisclaimer,
+ projectName,
+ path,
+ dateModifiedOverride,
+}) => {
+ const { t } = useTranslation("common");
+ const language = locale === "en" ? "fr" : "en";
+ path =
+ typeof window !== "undefined" && window.location.origin
+ ? window.location.href
+ : "";
+
+ return (
+ <div className="overflow-x-hidden">
+ <nav className="skip-main">
+ <a
+ id="skipToMainContent"
+ className="bg-white text-custom-blue-dark text-lg underline py-1 px-2 focus:outline-dark-goldenrod hover:bg-gray-dark"
+ href="#pageMainTitle"
+ data-cy-button={"skip-Content"}
+ draggable="false"
+ >
+ {t("skipToMainContentBtn")}
+ </a>
+ </nav>
+ <header>
+ <h2 className="sr-only">{t("globalHeader")}</h2>
+ <h3 className="sr-only">{t("testSiteNotice")}</h3>
+ {showDisclaimer ? (
+ <PhaseBanner
+ phase={t("phaseBannerTag")}
+ feedbackActive={feedbackActive}
+ text={t("phaseBannerText")}
+ projectName={projectName}
+ path={path}
+ />
+ ) : (
+ ""
+ )}
+ <div className="layout-container flex-col flex lg:flex lg:flex-row justify-between mt-2">
+ <div
+ className="flex flex-row justify-between items-center lg:mt-7 mt-1.5"
+ role="navigation"
+ aria-labelledby="officialSiteNav"
+ >
+ <h3 className="sr-only" id="officialSiteNav">
+ {t("officialSiteNavigation")}
+ </h3>
+ <a href="https://www.canada.ca">
+ <img
+ src={language === "en" ? "/sig-blk-fr.svg" : "/sig-blk-en.svg"}
+ alt={t("symbol")}
+ width="375"
+ height="35"
+ />
+ </a>
+ <h3 className="sr-only">{t("languageSelection")}</h3>
+ <Link
+ key={language}
+ href={langUrl}
+ locale={language}
+ data-testid="languageLink1"
+ className="visible lg:invisible ml-6 sm:ml-16 underline font-body font-bold text-canada-footer-font lg:text-sm text-base hover:text-canada-footer-hover-font-blue"
+ >
+ {language === "en" ? "EN" : "FR"}
+ </Link>
+ </div>
+ <div className="flex-col flex">
+ <Link
+ key={language}
+ href={langUrl}
+ locale={language}
+ data-testid="languageLink3"
+ className="lg:visible invisible pb-0 lg:pb-2 self-end underline font-body text-canada-footer-font hover:text-canada-footer-hover-font-blue"
+ data-cy="toggle-language-link"
+ lang={language}
+ >
+ {language === "en" ? "English" : "Français"}
+ </Link>
+ </div>
+ </div>
+
+ <div className="border-t pb-2 mt-4">
+ <div className="layout-container mt-10 mb-2">
+ <Breadcrumb items={breadcrumbItems} />
+ </div>
+ </div>
+ </header>
+
+ <main>
+ {bannerText && bannerTitle ? (
+ <Banner siteTitle={bannerTitle} headline={bannerText} />
+ ) : null}
+ <div>{children}</div>
+ <div className="mt-12">
+ <h2 className="sr-only">{t("siteFooter")}</h2>
+ <div className="layout-container mt-5">
+ <ReportAProblem />
+ </div>
+ <div className="layout-container mb-2">
+ <DateModified date={dateModifiedOverride} />
+ </div>
+ </div>
+ </main>
+
+ <Footer
+ id="footer"
+ lang={locale}
+ btnLink={"#"}
+ brandLinks={[
+ {
+ id: "link1",
+ text: t("footerSocialMedia"),
+ href: t("footerSocialMediaURL"),
+ },
+ {
+ id: "link2",
+ text: t("footerMobileApp"),
+ href: t("footerMobileAppURL"),
+ },
+ {
+ id: "link3",
+ text: t("footerTermsAndCondition"),
+ href: t("footerTermsAndConditionURL"),
+ },
+ {
+ id: "link4",
+ text: t("footerPrivacy"),
+ href: t("footerPrivacyURL"),
+ },
+ ]}
+ />
+ </div>
+ );
+};
+
+Layout.propTypes = {
+ /**
+ * text for the banner
+ */
+ bannerText: PropTypes.string,
+
+ /**
+ * title of the banner
+ */
+ bannerTitle: PropTypes.string,
+
+ /**
+ * child elements that will constitute the page
+ */
+ children: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element,
+ PropTypes.arrayOf(PropTypes.element),
+ ]),
+
+ /**
+ * currently active locale
+ */
+ locale: PropTypes.string,
+
+ /**
+ * URL to use for navigation when changing locales
+ */
+ langUrl: PropTypes.string,
+
+ /**
+ * Array of Items for the breadcrumb
+ */
+ breadcrumbItems: PropTypes.arrayOf(
+ PropTypes.shape({
+ /**
+ * Text for the breadcrumb
+ */
+ text: PropTypes.string,
+
+ /**
+ * Link for the breadcrumb
+ */
+ link: PropTypes.string,
+ })
+ ),
+
+ /**
+ * For activating feedback on active projects pages
+ */
+ feedbackActive: PropTypes.bool,
+ /**
+ * Boolean that determines whether the disclaimer at the top of the screen is shown or not
+ */
+ showDisclaimer: PropTypes.bool,
+ /**
+ * Project/page name that feedback is coming from
+ */
+ projectName: PropTypes.string,
+ /**
+ * Path that the feedback is coming from
+ */
+ path: PropTypes.string,
+ /**
+ * Manual override for date modified component
+ */
+ dateModifiedOverride: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 | + + + + + + + +1x +7x + + + + + + + + + + + + +7x + +1x +1x + +1x + + + + +1x + + + + + + | import React from "react";
+import { Layout } from "./Layout";
+
+export default {
+ title: "Components/Organisms/Layout",
+ component: Layout,
+};
+
+const sampleText = () => {
+ return (
+ <p data-testid="child-element">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+ est laborum.
+ </p>
+ );
+};
+
+const Template = (args) => <Layout {...args}>{sampleText()}</Layout>;
+
+export const NoBanner = Template.bind({});
+export const WithBanner = Template.bind({});
+
+NoBanner.args = {
+ langUrl: "someUrl",
+ locale: "someLocale",
+};
+
+WithBanner.args = {
+ bannerTitle: "Banner Title",
+ bannerText: "Banner Text",
+ langUrl: "someUrl",
+ locale: "someLocale",
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 | + + + + + + + + + + +4x + + + + + + + +3x +3x +3x + +3x +1x + + +1x + + +1x + + +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +4x + + + + + + + + + + + + + + + + + + + + + + + + | import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "next-i18next";
+import { useState, useRef } from "react";
+import { FeedbackWidget } from "../molecules/FeedbackWidget";
+import { ActionButton } from "../atoms/ActionButton";
+
+/**
+ * Displays the PhaseBanner on the page
+ */
+
+export const PhaseBanner = ({
+ phase,
+ text,
+ feedbackActive,
+ projectName,
+ path,
+ toggleForm,
+}) => {
+ const [showFeedback, setShowFeedback] = useState(false);
+ const { t } = useTranslation("common");
+ const toggle = useRef("Collapsed");
+
+ toggleForm = async (e) => {
+ Iif (showFeedback) {
+ toggle.current = "Collapsed";
+ } else {
+ toggle.current = "Expanded";
+ }
+
+ setShowFeedback(!showFeedback);
+ };
+
+ return (
+ <>
+ <div className="bg-circle-color">
+ <div className="block lg:flex py-4 layout-container">
+ <div
+ className={`flex justify-between lg:block lg:w-max ${
+ feedbackActive ? "mt-2" : ""
+ }`}
+ >
+ <span
+ className="font-body text-xs text-white border block w-max px-4 py-1 my-auto leading-6 items-center"
+ role="alert"
+ >
+ {phase}
+ </span>
+ {feedbackActive ? (
+ <ActionButton
+ id="back-projects"
+ dataCy="back-projects"
+ dataTestId="back-projects"
+ custom="font-body w-max text-xs underline text-white block outline-none focus:outline-white-solid h-full flex items-center -mt-2 py-2"
+ text={t("backProjects")}
+ href={t("breadCrumbsHref2")}
+ />
+ ) : (
+ ""
+ )}
+ </div>
+ <div className="lg:ml-4 xl:ml-8 xxl:ml-12">
+ <p className="mt-2 lg:mt-0 h-full font-body text-xs lg:text-sm text-white lg:ml-4 my-auto flex items-center">
+ {text}
+ </p>
+ </div>
+ </div>
+ {feedbackActive ? (
+ <div className="py-4 outline-none bg-custom-blue-blue font-body text-xs lg:text-sm text-white flex items-center lg:my-0">
+ <div className="flex layout-container">
+ <span
+ className="invisible hidden md:block font-body text-xs text-white border block w-max px-4 py-1 my-auto leading-6 items-center"
+ role="alert"
+ >
+ {phase}
+ </span>
+ <div className="lg:ml-6 xl:ml-12 xxl:ml-14 my-auto">
+ <button
+ id="feedbackButton"
+ onClick={toggleForm}
+ className="flex focus:outline-white-solid items-center lg:ml-4 my-auto"
+ data-testid="feedbackButton"
+ >
+ <strong className="underline">
+ {t("giveFeedback")}
+ <span className="sr-only">{toggle.current}</span>
+ </strong>
+ <img
+ className="px-2 flex items-center"
+ src="/feedback-icon-white.svg"
+ alt=""
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ ) : (
+ ""
+ )}
+ </div>
+
+ <FeedbackWidget
+ showFeedback={showFeedback}
+ toggleForm={toggleForm}
+ projectName={projectName}
+ path={path}
+ />
+ </>
+ );
+};
+
+PhaseBanner.propTypes = {
+ /**
+ * Phase stage in the PhaseBanner
+ */
+ phase: PropTypes.string.isRequired,
+ /**
+ * Phasebanner text
+ */
+ text: PropTypes.string.isRequired,
+ /**
+ * This is for showing the feedback component
+ */
+ feedbackActive: PropTypes.bool,
+ /**
+ * Project/page name that feedback is coming from
+ */
+ projectName: PropTypes.string,
+ /**
+ * Path that the feedback is coming from
+ */
+ path: PropTypes.string,
+};
+
+export default PhaseBanner;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 | + + + + + + + +2x + +1x +1x + +1x + + + + +1x + + + + + | import React from "react";
+import PhaseBanner from "./PhaseBanner";
+
+export default {
+ title: "Components/Atoms/PhaseBanner",
+ component: PhaseBanner,
+};
+
+const Template = (args) => <PhaseBanner {...args} />;
+
+export const Primary = Template.bind({});
+export const WithFeedback = Template.bind({});
+
+Primary.args = {
+ phase: "PhaseBanner Phase",
+ text: "PhaseBanner Text",
+};
+
+WithFeedback.args = {
+ phase: "PhaseBanner Phase",
+ text: "PhaseBanner Text",
+ feedbackActive: true,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 | + + + + + + + + + + + + + +20x +19x + +19x + +19x + +3x + + +3x +3x +24x +21x +1x + + + + + +3x + +3x + + +3x +5x +5x + + + +3x +3x + + + +3x + + + + + + + + + + +3x + + + + + + + + + + +3x +21x + + + +3x + + + + + + + + + + + + +3x +1x + + +3x + + +19x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +6x + + + + + + | import PropTypes from "prop-types";
+import Link from "next/link";
+import { useState } from "react";
+import { useTranslation } from "next-i18next";
+import { OptionalTextField } from "../molecules/OptionalTextField";
+import { Details } from "../molecules/Details";
+import { ActionButton } from "../atoms/ActionButton";
+import { stripFeedback } from "../../lib/utils/stripFeedback";
+import { ErrorLabel } from "../atoms/ErrorLabel";
+
+/**
+ * Report a problem button to report technical issues on the page.
+ */
+export function ReportAProblem(props) {
+ const [submitted, setSubmitted] = useState(false);
+ const { t, i18n } = useTranslation();
+
+ const [submittedOnce, setSubmittedOnce] = useState(false);
+
+ let onSubmitHandler = (e) => {
+ //Checking if at least one checkbox is selected
+ let checkBoxSelected = false;
+
+ //Check the checkboxes
+ let inputElements = document.getElementsByTagName("input");
+ for (let index = 0; index < inputElements.length; index++) {
+ if (inputElements[index].type == "checkbox") {
+ if (inputElements[index].checked) {
+ checkBoxSelected = true;
+ }
+ }
+ }
+
+ // prevent default behaviour of form
+ e.preventDefault();
+ // create FormData object from form
+ const formData = new FormData(e.target);
+
+ // Iterate through key/value pairs and strip personal identifier information from each value
+ for (var pair of formData.entries()) {
+ let cleanedFeedback = stripFeedback(pair[1]);
+ formData.set(pair[0], cleanedFeedback);
+ }
+ // create URLSearchParams object from FormData object
+ // this will be used to create url encoded string of names and values of the form fields
+ const urlEncoded = new URLSearchParams(formData);
+ let urlString = urlEncoded.toString();
+ //Replace the values with yes for GCNotify
+ let values;
+
+ Iif (formData.get("language").toString().localeCompare("fr") == 0) {
+ values = [
+ "Informations+incorrectes",
+ "Informations+impr%C3%A9cises",
+ "Vous+n%E2%80%99avez+pas+trouv%C3%A9+ce+que+vous+cherchiez",
+ "La+page+ne+fonctionne+pas+avec+vos+technologies+d%E2%80%99adaptation",
+ "Vous+%C3%AAtes+inquiet+pour+votre+vie+priv%C3%A9e",
+ "Vous+ne+savez+pas+o%C3%B9+trouver+de+l%E2%80%99aide",
+ "Autres",
+ ];
+ } else {
+ values = [
+ "Incorrect+Information",
+ "Unclear+Information",
+ "You+didn%E2%80%99t+find+what+you+were+looking+for",
+ "Page+does+not+work+with+your+adaptive+technologies",
+ "You%E2%80%99re+worried+about+your+privacy",
+ "You+don%E2%80%99t+know+where+else+to+go+for+help",
+ "Other",
+ ];
+ }
+
+ for (const value of values) {
+ urlString = urlString.replace(value, "yes");
+ }
+
+ // call report a problem API route
+ fetch("/api/report-a-problem", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+ },
+ body: urlString,
+ }).catch((e) => {
+ // handle error if fetch fails
+ // fetch only fails if there is no internet connection not for the actual
+ // request so there is nothing really to do here other than to log it
+ console.log(e);
+ });
+
+ if (checkBoxSelected) {
+ setSubmitted(true);
+ }
+ //Make sure the form was submitted at least once
+ setSubmittedOnce(true);
+ };
+
+ return (
+ <Details
+ label={t("footerReportProblemButtonString", { lng: props.language })}
+ dataCy="report-a-problem-details"
+ dataTestId="report-a-problem-details"
+ >
+ <div role="status">
+ {submitted ? (
+ <>
+ <h2 className="text-h3 font-display mb-4 font-bold">
+ <b>
+ {t("reportAProblemThankYouForYourHelp", {
+ lng: props.language,
+ })}
+ </b>
+ </h2>
+ <p className="text-sm font-body">
+ {t("reportAProblemYouWillNotBeContacted", {
+ lng: props.language,
+ })}
+ </p>
+ </>
+ ) : (
+ ""
+ )}
+ </div>
+ {submitted ? (
+ ""
+ ) : (
+ <>
+ <h2 className="text-base font-body">
+ {t("reportAProblemTitle", { lng: props.language })}
+ </h2>
+ <ul className="list-outside list-disc px-6 py-2">
+ <li className="text-xs sm:text-sm font-body mb-4 leading-tight sm:leading-6">
+ <b>{t("reportAProblemNoReply", { lng: props.language })}</b>
+ </li>
+ <li className="text-xs sm:text-sm font-body my-4 leading-tight sm:leading-6">
+ <b>
+ {t("reportAProblemFeedbackConfidential", {
+ lng: props.language,
+ })}
+ </b>{" "}
+ <Link
+ href="/signup/privacy"
+ className="underline text-xs sm:text-sm font-body hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {t("reportAProblemPrivacyStatement", { lng: props.language })}
+ </Link>
+ </li>
+ </ul>
+ <form
+ data-gc-analytics-formname="ESDC|EDSC:ServiceCanadaLabsReport-Problem"
+ data-gc-analytics-collect='[{"value":"input,select","emptyField":"N/A"}]'
+ className="w-full"
+ action="#"
+ onSubmit={onSubmitHandler}
+ >
+ <input
+ type="hidden"
+ id="language"
+ name="language"
+ value={i18n.language}
+ />
+ <fieldset>
+ <legend className="text-base sm:text-p font-body font-normal mb-6">
+ <b className="text-error-border-red mr-2" aria-hidden="true">
+ *
+ </b>
+ {t("reportAProblemCheckAllThatApply", { lng: props.language })}
+ </legend>
+ <OptionalTextField
+ controlId="incorrectInformationCheckBox"
+ textFieldId="incorrectInformationTextField"
+ controlName="incorrect_information"
+ textFieldName="incorrect_information_details"
+ controlLabel={t("reportAProblemIncorrectInformation", {
+ lng: props.language,
+ })}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="incorrectInformation-checkbox"
+ textFieldDataTestId="incorrectInformation-text"
+ controlDataCy="incorrectInformation-checkbox"
+ textFieldDataCy="incorrectInformation-text"
+ describedby="incorrectInformation"
+ OptionalTextField
+ checkBoxStyle="mb-4 inline-block"
+ controlValue={t("reportAProblemIncorrectInformation", {
+ lng: props.language,
+ })}
+ />
+ <OptionalTextField
+ controlId="unclearInformationCheckBox"
+ textFieldId="unclearInformationTextField"
+ controlName="unclear_information"
+ textFieldName="unclear_information_details"
+ controlLabel={t("reportAProblemUnclearInformation", {
+ lng: props.language,
+ })}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="unclearInformation-checkbox"
+ textFieldDataTestId="unclearInformation-text"
+ controlDataCy="unclearInformation-checkbox"
+ textFieldDataCy="unclearInformation-text"
+ describedby="unclearInformation"
+ checkBoxStyle="mb-4 inline-block"
+ controlValue={t("reportAProblemUnclearInformation", {
+ lng: props.language,
+ })}
+ />
+ <OptionalTextField
+ controlId="infoNotFoundCheckBox"
+ textFieldId="infoNotFoundTextField"
+ controlName="info_not_found"
+ textFieldName="info_not_found_details"
+ controlLabel={t("reportAProblemDidNotFindWhatYoureLookingFor", {
+ lng: props.language,
+ })}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="infoNotFound-checkbox"
+ textFieldDataTestId="infoNotFound-text"
+ controlDataCy="infoNotFound-checkbox"
+ textFieldDataCy="infoNotFound-text"
+ describedby="infoNotFound"
+ checkBoxStyle="lg:mb-8 mb-4 inline-block"
+ controlValue={t("reportAProblemDidNotFindWhatYoureLookingFor", {
+ lng: props.language,
+ })}
+ />
+ <OptionalTextField
+ controlId="adaptiveTechnologyCheckBox"
+ textFieldId="adaptiveTechnologyTextField"
+ controlName="adaptive_technology"
+ textFieldName="adaptive_technology_details"
+ controlLabel={t(
+ "reportAProblemPageDoesNotWorkWithAdaptiveTechnology",
+ { lng: props.language }
+ )}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="adaptiveTechnology-checkbox"
+ textFieldDataTestId="adaptiveTechnology-text"
+ controlDataCy="adaptiveTechnology-checkbox"
+ textFieldDataCy="adaptiveTechnology-text"
+ describedby="adaptiveTechnology"
+ checkBoxStyle="mb-8 inline-block"
+ controlValue={t(
+ "reportAProblemPageDoesNotWorkWithAdaptiveTechnology",
+ { lng: props.language }
+ )}
+ />
+ <OptionalTextField
+ controlId="privacyIssuesCheckBox"
+ textFieldId="privacyIssuesTextField"
+ controlName="privacy_issues"
+ textFieldName="privacy_issues_details"
+ controlLabel={t("reportAProblemYoureWorriedAboutYourPrivacy", {
+ lng: props.language,
+ })}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="privacyIssues-checkbox"
+ textFieldDataTestId="privacyIssues-text"
+ controlDataCy="privacyIssues-checkbox"
+ textFieldDataCy="privacyIssues-text"
+ describedby="privacyIssues"
+ checkBoxStyle="mb-4 inline-block"
+ controlValue={t("reportAProblemYoureWorriedAboutYourPrivacy", {
+ lng: props.language,
+ })}
+ />
+ <OptionalTextField
+ controlId="noWhereElseToGoCheckBox"
+ textFieldId="noWhereElseToGoTextField"
+ controlName="no_where_else_to_go"
+ textFieldName="no_where_else_to_go_details"
+ controlLabel={t("reportAProblemNoWhereElseToGo", {
+ lng: props.language,
+ })}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="noWhereElseToGo-checkbox"
+ textFieldDataTestId="noWhereElseToGo-text"
+ controlDataCy="noWhereElseToGo-checkbox"
+ textFieldDataCy="noWhereElseToGo-text"
+ describedby="noWhereElseToGo"
+ checkBoxStyle="lg:mb-8 mb-4 inline-block"
+ controlValue={t("reportAProblemNoWhereElseToGo", {
+ lng: props.language,
+ })}
+ />
+ <OptionalTextField
+ controlId="otherCheckBox"
+ textFieldId="otherTextField"
+ controlName="other"
+ textFieldName="other_details"
+ controlLabel={t("reportAProblemOther", { lng: props.language })}
+ textFieldLabel={t("reportAProblemProvideMoreDetails", {
+ lng: props.language,
+ })}
+ uncontrolled={true}
+ multiText={true}
+ textLabelBold={true}
+ wrap="hard"
+ maxLength={750}
+ controlDataTestId="other-checkbox"
+ textFieldDataTestId="other-text"
+ controlDataCy="other-checkbox"
+ textFieldDataCy="other-text"
+ describedby="other"
+ checkBoxStyle="mb-4"
+ controlValue={t("reportAProblemOther", { lng: props.language })}
+ />
+ {submittedOnce ? (
+ <ErrorLabel
+ message={t("reportAProblemError", { lng: props.language })}
+ />
+ ) : undefined}
+ </fieldset>
+ <ActionButton
+ id="submit"
+ className="rounded block mt-4"
+ type="submit"
+ dataCy="report-a-problem-submit"
+ dataTestId="report-a-problem-submit"
+ analyticsTracking
+ >
+ {t("reportAProblemSubmit", { lng: props.language })}
+ </ActionButton>
+ </form>
+ </>
+ )}
+ </Details>
+ );
+}
+
+ReportAProblem.propTypes = {
+ /**
+ * Translation language
+ */
+ language: PropTypes.string,
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 | + + + + + + + +5x + +1x + | import React from "react";
+import { ReportAProblem } from "./ReportAProblem";
+
+export default {
+ title: "Components/Organisms/ReportAProblem",
+ component: ReportAProblem,
+};
+
+const Template = (args) => <ReportAProblem {...args} />;
+
+export const Primary = Template.bind({});
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Footer.js | +
+
+ |
+ 100% | +4/4 | +100% | +2/2 | +100% | +3/3 | +100% | +4/4 | +
| Footer.stories.js | +
+
+ |
+ 100% | +4/4 | +100% | +0/0 | +100% | +1/1 | +100% | +3/3 | +
| Layout.js | +
+
+ |
+ 100% | +6/6 | +66.66% | +12/18 | +100% | +1/1 | +100% | +6/6 | +
| Layout.stories.js | +
+
+ |
+ 100% | +8/8 | +100% | +0/0 | +100% | +2/2 | +100% | +7/7 | +
| PhaseBanner.js | +
+
+ |
+ 90.9% | +10/11 | +87.5% | +7/8 | +100% | +2/2 | +90.9% | +10/11 | +
| PhaseBanner.stories.js | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +1/1 | +100% | +5/5 | +
| ReportAProblem.js | +
+
+ |
+ 93.33% | +28/30 | +92.85% | +13/14 | +66.66% | +2/3 | +93.1% | +27/29 | +
| ReportAProblem.stories.js | +
+
+ |
+ 100% | +3/3 | +100% | +0/0 | +100% | +1/1 | +100% | +2/2 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| components | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| components/atoms | +
+
+ |
+ 95.83% | +184/192 | +72.18% | +109/151 | +86.79% | +46/53 | +95.48% | +169/177 | +
| components/molecules | +
+
+ |
+ 86.91% | +186/214 | +65.09% | +69/106 | +78.43% | +40/51 | +86% | +172/200 | +
| components/organisms | +
+
+ |
+ 95.83% | +69/72 | +80.95% | +34/42 | +92.85% | +13/14 | +95.52% | +64/67 | +
| lib/notify | +
+
+ |
+ 66.66% | +4/6 | +100% | +0/0 | +50% | +1/2 | +66.66% | +4/6 | +
| lib/utils | +
+
+ |
+ 91.3% | +21/23 | +81.81% | +9/11 | +66.66% | +4/6 | +95.23% | +20/21 | +
| middlewares | +
+
+ |
+ 53.33% | +8/15 | +20% | +1/5 | +42.85% | +3/7 | +53.33% | +8/15 | +
| pages | +
+
+ |
+ 52.17% | +48/92 | +37.08% | +89/240 | +52.17% | +12/23 | +52.74% | +48/91 | +
| pages/api | +
+
+ |
+ 86.36% | +19/22 | +83.33% | +10/12 | +66.66% | +2/3 | +86.36% | +19/22 | +
| pages/projects/benefits-navigator | +
+
+ |
+ 0% | +0/52 | +0% | +0/274 | +0% | +0/14 | +0% | +0/52 | +
| pages/projects/dashboard | +
+
+ |
+ 0% | +0/13 | +0% | +0/94 | +0% | +0/4 | +0% | +0/13 | +
| pages/projects/oas-benefits-estimator | +
+
+ |
+ 30.55% | +11/36 | +25.42% | +60/236 | +36.36% | +4/11 | +30.55% | +11/36 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| submitEmail.js | +
+
+ |
+ 66.66% | +4/6 | +100% | +0/0 | +50% | +1/2 | +66.66% | +4/6 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 | + +2x + + + + + + + +1x + + + + + + + + + + + + + + + + + +1x + + +2x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import "node-fetch";
+
+export const submitEmail = async (
+ data,
+ defaults,
+ templateId,
+ email,
+ notifyApiAddress,
+ notifyApiKey
+) => {
+ const notifyResponse = await fetch(notifyApiAddress, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `ApiKey-v1 ${notifyApiKey}`,
+ },
+ body: JSON.stringify({
+ email_address: email,
+ template_id: templateId,
+ // notify requires all values in the template to be present
+ // in the request.... highly annoying but providing defaults solves this
+ personalisation: {
+ ...defaults,
+ ...data,
+ },
+ }),
+ });
+
+ return [notifyResponse.status, await notifyResponse.json()];
+};
+
+export const submitEmailWithAttachment = async (
+ data,
+ defaults,
+ templateId,
+ email,
+ file,
+ fileName,
+ notifyApiAddress,
+ notifyApiKey
+) => {
+ const notifyResponse = await fetch(notifyApiAddress, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `ApiKey-v1 ${notifyApiKey}`,
+ },
+ body: JSON.stringify({
+ email_address: email,
+ template_id: templateId,
+ // notify requires all values in the template to be present
+ // in the request.... highly annoying but providing defaults solves this
+ personalisation: {
+ application_file: {
+ file: file,
+ filename: fileName,
+ sending_method: "attach",
+ },
+ ...defaults,
+ ...data,
+ },
+ }),
+ });
+ return [notifyResponse.status, await notifyResponse.json()];
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 | 1x +1x +1x + + + + + + + + + + | export const createBreadcrumbs = (breadcrumbArray, locale) => {
+ return breadcrumbArray.map((breadCrumbItem) => {
+ return {
+ text:
+ locale === "en" ? breadCrumbItem.scTitleEn : breadCrumbItem.scTitleFr,
+ link:
+ locale === "en"
+ ? breadCrumbItem.scPageNameEn
+ : breadCrumbItem.scPageNameFr,
+ };
+ });
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 | + + + + + + + + + + + + + + + + | export function getAllUpdateIds(items) { + return items.flatMap((item) => [ + { + params: { + id: item.scPageNameEn, + }, + locale: "en", + }, + { + params: { + id: item.scPageNameFr, + }, + locale: "fr", + }, + ]); +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| createBreadcrumbs.js | +
+
+ |
+ 100% | +3/3 | +50% | +2/4 | +100% | +2/2 | +100% | +3/3 | +
| getAllUpdateIds.js | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/2 | +0% | +0/1 | +
| maskEmail.js | +
+
+ |
+ 100% | +12/12 | +100% | +7/7 | +100% | +1/1 | +100% | +11/11 | +
| stripFeedback.js | +
+
+ |
+ 100% | +6/6 | +100% | +0/0 | +100% | +1/1 | +100% | +6/6 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 | + +1x +1x + +1x +14x +1x +13x +10x +10x + +3x +3x + + + +1x + + | //Function for masking email to get in the thank you page later
+export function maskEmail(email) {
+ let maskedEmail = "";
+ let x = 0;
+
+ for (var i = 0; i < email.length; i++) {
+ if (i === 0) {
+ maskedEmail += email[i];
+ } else if (email[i] !== "@" && email[i] !== "." && x <= 3) {
+ maskedEmail += "*";
+ x += 1;
+ } else {
+ maskedEmail += email[i];
+ x = 0;
+ }
+ }
+
+ return maskedEmail;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 | + +7x + + + + + +7x + + + + + +7x + + + + + +7x + + + +7x + + + + +7x + + | export function stripFeedback(feedbackToClean) {
+ //Remove postal code from feedback
+ feedbackToClean = feedbackToClean.replaceAll(
+ /[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d/gim,
+ "### ###"
+ );
+
+ //Remove SIN from feedback
+ feedbackToClean = feedbackToClean.replaceAll(
+ /(\d{3}\s*\d{3}\s*\d{3}|\d{3}\D*\d{3}\D*\d{3})/gm,
+ "### ### ###"
+ );
+
+ //Remove email from feedback
+ feedbackToClean = feedbackToClean.replaceAll(
+ /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*/gim,
+ "####@####.####"
+ );
+
+ //Removes phone number from feedback
+ feedbackToClean = feedbackToClean.replaceAll(
+ /(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}/gm,
+ "# ### ### ###"
+ );
+ feedbackToClean = feedbackToClean.replaceAll(
+ /(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?/gm,
+ "# ### ### ###"
+ );
+
+ return feedbackToClean;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| initMiddleware.js | +
+
+ |
+ 0% | +0/6 | +0% | +0/2 | +0% | +0/4 | +0% | +0/6 | +
| joi.js | +
+
+ |
+ 88.88% | +8/9 | +33.33% | +1/3 | +100% | +3/3 | +88.88% | +8/9 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 | + + + + + + + + + + + + + | // Helper method to wait for a middleware to execute before continuing +// And to throw an error when an error happens in a middleware +export default function initMiddleware(middleware) { + return (req, res) => + new Promise((resolve, reject) => { + middleware(req, res, (result) => { + if (result instanceof Error) { + return reject(result); + } + return resolve(result); + }); + }); +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 | + + + + + + + + + + +1x +1x +1x +1x + + +1x +1x +2x + +1x + + + + | import { Schema, ValidationOptions } from "joi"; //lgtm [js/unused-local-variable]
+import { NextApiHandler } from "next"; //lgtm [js/unused-local-variable]
+
+/**
+ * middleware to validate body of request with Joi schema
+ * if valid handler will be called otherwise a 400 response with the errors will be returned
+ * @param schema {Schema} - joi validation schema
+ * @param handler {NextApiHandler} - the next handler to call if the schema is valid
+ * @param options {ValidationOptions} - the Joi validations options
+ */
+export default function validate(schema, handler, options = {}) {
+ return async (req, res) => {
+ const { error } = await schema.validate(req.body, options);
+ const valid = error === undefined;
+ Iif (valid) {
+ return handler(req, res);
+ } else {
+ const { details } = error;
+ const message = details.map((i) => {
+ return { path: i.path, message: i.message };
+ });
+ res.status(400).json({ error: message });
+ }
+ };
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 | + + + + + + + + + + +2x +2x +2x +2x + +2x +1x + + + + + +1x + + +1x + + + + +2x +1x + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + | import Head from "next/head";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import Link from "next/link";
+import { ReportAProblem } from "../components/organisms/ReportAProblem";
+import { ActionButton } from "../components/atoms/ActionButton";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import aemServiceInstance from "../services/aemServiceInstance";
+
+export default function error404(props) {
+ const { t } = useTranslation("common");
+ const [loaded, setLoaded] = useState(false);
+ const router = useRouter();
+ const [pageData] = useState(props.pageData.item);
+
+ useEffect(() => {
+ Iif (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+
+ //If using Internet Explorer, redirect to /notsupported
+ Iif (window.document.documentMode) {
+ router.push("/notsupported");
+ } else {
+ setLoaded(true);
+ }
+ }, []);
+
+ //If using Internet Explorer, render empty page so page doesn't flash before redirect
+ if (!loaded) {
+ return <div></div>;
+ }
+
+ return (
+ <>
+ <div className="min-h-screen relative">
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title data-gc-analytics-error="404">
+ {pageData.scContentEn.json[0].content[0].value} (404) |{" "}
+ {pageData.scContentFr.json[0].content[0].value} (404)
+ </title>
+ <meta
+ name="description"
+ content={`${t("404errorMetaDescription")}`}
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+
+ {/* DCMI Meta Tags */}
+ <meta name="dcterms.title" content={`404 — ${t("siteTitle")}`} />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.description"
+ content={`${t("404errorMetaDescription")}`}
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={t("metaSubject")}
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-06-01" />
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
+ }
+ />
+ <meta property="og:title" content={`404 — ${t("siteTitle")}`} />
+ <meta
+ property="og:description"
+ content={`${t("404errorMetaDescription")}`}
+ />
+ <meta property="og:image" content={`${t("metaImage")}`} />
+ <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca/" + `${props.locale}` + "/404"
+ }
+ />
+ <meta property="twitter:title" content={`500 — ${t("siteTitle")}`} />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={`${t("404errorMetaDescription")}`}
+ />
+ <meta property="twitter:image" content={`${t("metaImage")}`} />
+ <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+ </Head>
+ <section className="layout-container pb-44">
+ <div className="pt-6">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageEn._path
+ : pageData.scGcImages[0].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageAltTextEn
+ : pageData.scGcImages[0].scImageAltTextFr
+ }
+ width={575}
+ height={59}
+ />
+ </div>
+ <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
+ <div>
+ <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0">
+ <h1 className="font-bold font-display mb-4">
+ {pageData.scContentEn.json[0].content[0].value}
+ </h1>
+ <p className="font-bold font-body mb-8">
+ {pageData.scContentEn.json[1].content[0].value}
+ </p>
+ <p className="font-body text-sm mb-4 leading-30px">
+ {pageData.scContentEn.json[2].content[0].value}
+ </p>
+ <div className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentEn.json[3].content[0].value}
+ <Link
+ href={pageData.scContentEn.json[3].content[1].data.href}
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentEn.json[3].content[1].value}
+ </Link>
+ </p>
+ </div>
+ </div>
+ <ReportAProblem language={"en"} />
+ </div>
+ <div className="flex items-center justify-center circle-background my-8 mx-4 lg:mt-0 lightbulb-bg shrink-0">
+ <span className="relative lightbulb">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[0].scImageEn._path
+ : pageData.scImageList[0].scImageFr._path
+ }`}
+ alt=""
+ />
+ </span>
+ </div>
+ <div>
+ <div
+ className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0"
+ lang="fr"
+ >
+ <h1 className="font-bold font-display mb-4">
+ {pageData.scContentFr.json[0].content[0].value}
+ </h1>
+ <p className="font-bold font-body mb-8">
+ {pageData.scContentFr.json[1].content[0].value}
+ </p>
+ <p className="font-body text-sm mb-4 leading-30px">
+ {pageData.scContentFr.json[2].content[0].value}
+ </p>
+ <div className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentFr.json[3].content[0].value}
+ <Link
+ href={pageData.scContentFr.json[3].content[1].data.href}
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentFr.json[3].content[1].value}
+ </Link>
+ </p>
+ </div>
+ </div>
+ <ReportAProblem language="fr" />
+ </div>
+ </div>
+ </section>
+ <footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
+ <div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
+ <ActionButton
+ id="404TopOfPageButton"
+ href="#"
+ custom="text-left w-32 flex flex-col lg:hidden"
+ text="Top of page / Haut de la page"
+ icon="icon-up-caret"
+ iconEnd
+ />
+ <span className="relative footer-logo">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageEn._path
+ : pageData.scGcImages[1].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageAltTextEn
+ : pageData.scGcImages[1].scImageAltTextFr
+ }
+ />
+ </span>
+ </div>
+ </footer>
+ </div>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ const { data } = await aemServiceInstance.getFragment("error404Query");
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ ...(await serverSideTranslations("en", ["common"])),
+ ...(await serverSideTranslations("fr", ["common"])),
+ pageData: data.scLabsErrorPagev1ByPath,
+ },
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 | + + + + + + + + + + +2x +2x +2x +2x + +2x +1x + + + + + +1x + + +1x + + + + +2x +1x + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + | import Head from "next/head";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import Link from "next/link";
+import { ReportAProblem } from "../components/organisms/ReportAProblem";
+import { ActionButton } from "../components/atoms/ActionButton";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import aemServiceInstance from "../services/aemServiceInstance";
+
+export default function error500(props) {
+ const { t } = useTranslation("common");
+ const [loaded, setLoaded] = useState(false);
+ const router = useRouter();
+ const [pageData] = useState(props.pageData.item);
+
+ useEffect(() => {
+ Iif (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+
+ //If using Internet Explorer, redirect to /notsupported
+ Iif (window.document.documentMode) {
+ router.push("/notsupported");
+ } else {
+ setLoaded(true);
+ }
+ }, []);
+
+ //If using Internet Explorer, render empty page so page doesn't flash before redirect
+ if (!loaded) {
+ return <div></div>;
+ }
+
+ return (
+ <>
+ <div className="min-h-screen relative">
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title data-gc-analytics-error="500">
+ {pageData.scContentEn.json[0].content[0].value} (500) |{" "}
+ {pageData.scContentFr.json[0].content[0].value} (500)
+ </title>
+ <meta
+ name="description"
+ content="Error message stating that the server is down, or the URL is incorrect or expired"
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta content="width=device-width, initial-scale=1" name="viewport" />
+ <meta name="robots" content="noindex, nofollow" />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ property="dcterms:title"
+ lang="en"
+ content="The web site has reported an error (500)"
+ />
+ <meta
+ property="dcterms:title"
+ lang="fr"
+ content="Le site Web a signalé une erreur (500)"
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2"
+ />
+ <meta
+ property="dcterms:description"
+ lang="en"
+ content="Error message stating that the server is down, or the URL is incorrect or expired."
+ />
+ <meta
+ property="dcterms:description"
+ lang="fr"
+ content="Message d’erreur indiquant que le serveur est en panne ou l’URL est incorrecte ou expirée."
+ />
+ <meta property="dcterms:creator" lang="en" content="Service Canada" />
+ <meta property="dcterms:creator" lang="fr" content="Service Canada" />
+ <meta
+ property="dcterms:subject"
+ lang="en"
+ title="gccore"
+ content="GV Government and Politics;Government services"
+ />
+ <meta
+ property="dcterms:subject"
+ lang="fr"
+ title="gccore"
+ content="GV Gouvernement et vie politique;Services gouvernementaux"
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-06-22" />
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta property="dcterms:issued" content="2021-06-22" />
+ <meta property="dcterms:modified" content="2021-MM-DD" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca/" + `${props.locale}` + "/500"
+ }
+ />
+ <meta
+ property="og:title"
+ content="The web site has reported an error (500) | Le site Web a signalé une
+ erreur (500)"
+ />
+ <meta
+ property="og:description"
+ content="Error message stating that the server is down, or the URL is incorrect or expired"
+ />
+ <meta property="og:image" content={`${t("metaImage")}`} />
+ <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca/" + `${props.locale}` + "/500"
+ }
+ />
+ <meta
+ property="twitter:title"
+ content="Error message stating that the server is down, or the URL is incorrect or expired"
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content="Error message stating that the server is down, or the URL is incorrect or expired"
+ />
+ <meta property="twitter:image" content={`${t("metaImage")}`} />
+ <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+ </Head>
+ <section className="layout-container pb-44">
+ <div className="pt-6">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageEn._path
+ : pageData.scGcImages[0].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageAltTextEn
+ : pageData.scGcImages[0].scImageAltTextFr
+ }
+ width={575}
+ height={59}
+ />
+ </div>
+ <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
+ <div>
+ <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0">
+ <h1 className="font-bold font-display mb-4">
+ {pageData.scContentEn.json[0].content[0].value}
+ </h1>
+ <p className="font-bold font-body mb-8">
+ {pageData.scContentEn.json[1].content[0].value}
+ </p>
+ <p className="font-body text-sm mb-4 leading-30px">
+ {pageData.scContentEn.json[2].content[0].value}
+ </p>
+ <div className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentEn.json[3].content[0].value}
+ <Link
+ href={pageData.scContentEn.json[3].content[1].data.href}
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentEn.json[3].content[1].value}
+ </Link>
+ </p>
+ </div>
+ </div>
+ <ReportAProblem language={"en"} />
+ </div>
+ <div className="flex items-center justify-center circle-background my-8 lg:mt-0 lightbulb-bg">
+ <span className="relative lightbulb">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[0].scImageEn._path
+ : pageData.scImageList[0].scImageFr._path
+ }`}
+ alt=""
+ />
+ </span>
+ </div>
+ <div>
+ <div
+ className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0"
+ lang="fr"
+ >
+ <h1 className="font-bold font-display mb-4">
+ {pageData.scContentFr.json[0].content[0].value}
+ </h1>
+ <p className="font-bold font-body mb-8">
+ {pageData.scContentFr.json[1].content[0].value}
+ </p>
+ <p className="font-body text-sm mb-4 leading-30px">
+ {pageData.scContentFr.json[2].content[0].value}
+ </p>
+ <div className="flex">
+ <span className="error50-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentFr.json[3].content[0].value}
+ <Link
+ href={pageData.scContentFr.json[3].content[1].data.href}
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentFr.json[3].content[1].value}
+ </Link>
+ </p>
+ </div>
+ </div>
+ <ReportAProblem language="fr" />
+ </div>
+ </div>
+ </section>
+ <footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
+ <div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
+ <ActionButton
+ id="404TopOfPageButton"
+ href="#"
+ custom="text-left w-32 flex flex-col lg:hidden"
+ text="Top of page / Haut de la page"
+ icon="icon-up-caret"
+ iconEnd
+ />
+ <span className="relative footer-logo">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageEn._path
+ : pageData.scGcImages[1].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageAltTextEn
+ : pageData.scGcImages[1].scImageAltTextFr
+ }
+ />
+ </span>
+ </div>
+ </footer>
+ </div>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ const { data } = await aemServiceInstance.getFragment("error500Query");
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ ...(await serverSideTranslations("en", ["common"])),
+ ...(await serverSideTranslations("fr", ["common"])),
+ pageData: data.scLabsErrorPagev1ByPath,
+ },
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 | + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { appWithTranslation } from "next-i18next";
+import "../styles/globals.css";
+import "../styles/forms.css";
+import "../styles/menu.css";
+import Head from "next/head";
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+
+config.autoAddCss = false;
+
+function MyApp({ Component, pageProps }) {
+ return (
+ <>
+ <Head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta
+ name="og:builddate"
+ content={process.env.NEXT_PUBLIC_BUILD_DATE}
+ />
+ <meta name="og:buildid" content={process.env.NEXT_PUBLIC_BUILD_ID} />
+ </Head>
+ <Component {...pageProps} />
+ </>
+ );
+}
+
+export default appWithTranslation(MyApp);
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 | + + + + | // TODO: add checks for the status of the CMS +export default function handler(req, res) { + res.status(200).json({ message: "Status OK" }); +} + |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| healthcheck.js | +
+
+ |
+ 0% | +0/1 | +100% | +0/0 | +0% | +0/1 | +0% | +0/1 | +
| report-a-problem.js | +
+
+ |
+ 84.61% | +11/13 | +80% | +8/10 | +100% | +1/1 | +84.61% | +11/13 | +
| robots.js | +
+
+ |
+ 100% | +8/8 | +100% | +2/2 | +100% | +1/1 | +100% | +8/8 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 | + + + + + + +5x + +5x + + + +2x + +3x +3x + + + + + + + + + + + + + + + + + + + + + + + + + + + + +2x +1x + +1x +1x + + +1x +1x + + + + + + + + + + | import { submitEmail } from "../../lib/notify/submitEmail";
+
+/**
+ * API handler for report a problem functionality. This will take form submissions
+ * and call GC Notify service with the appropriate template and data
+ */
+async function handler(req, res) {
+ if (req.method === "POST") {
+ // if there is no data specified we don't want to call notify
+ if (
+ Object.keys(req.body).length <= 1 ||
+ !process.env.REPORT_A_PROBLEM_ENABLED
+ ) {
+ res.status(200).end("OK");
+ } else {
+ try {
+ const notifyResponse = await submitEmail(
+ {
+ ...req.body,
+ page_name: req.headers.referer || "unknown",
+ },
+ {
+ page_name: "unknown",
+ language: "unknown",
+ incorrect_information: "no",
+ incorrect_information_details: "",
+ unclear_information: "no",
+ unclear_information_details: "",
+ info_not_found: "no",
+ info_not_found_details: "",
+ adaptive_technology: "no",
+ adaptive_technology_details: "",
+ privacy_issues: "no",
+ privacy_issues_details: "",
+ no_where_else_to_go: "no",
+ no_where_else_to_go_details: "",
+ other: "no",
+ other_details: "",
+ },
+ process.env.NOTIFY_REPORT_A_PROBLEM_TEMPLATE_ID,
+ process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL,
+ process.env.NOTIFY_BASE_API_URL + "/v2/notifications/email",
+ process.env.NOTIFY_API_KEY
+ );
+
+ if (notifyResponse[0] === 201) {
+ res.status(200).end("OK");
+ } else {
+ console.error(notifyResponse[1]);
+ res.status(500).end("ERROR");
+ }
+ } catch (e) {
+ console.error(e);
+ res.status(500).end("ERROR");
+ }
+ }
+ } else E{
+ res.setHeader("Allow", ["POST"]);
+ res.status(405).end(`Method ${req.method} Not Allowed`);
+ }
+}
+
+export default handler;
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 | + + + + + + +2x +1x +1x +1x +1x + +1x +1x + +2x + + | /**
+ * Disallow web crawlers to scrape our dev site, while only blocking crawlers from scraping the api routes in production
+ * @param req
+ * @param res
+ * @returns {Promise<void>}
+ */
+export default async function handler(req, res) {
+ if (process.env.NODE_ENV === "production") {
+ res.write("User-agent: *\n");
+ res.write("Disallow: /api\n");
+ res.write("Disallow: /projects/*\n");
+ res.write("Disallow: /notsupported.js\n");
+ } else {
+ res.write("User-agent: *\n");
+ res.write("Disallow: /\n");
+ }
+ res.end();
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import Link from "next/link";
+import { ReportAProblem } from "../components/organisms/ReportAProblem";
+import { ActionButton } from "../components/atoms/ActionButton";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import aemServiceInstance from "../services/aemServiceInstance";
+
+export default function ErrorPage(props) {
+ const { t } = useTranslation("common");
+ const { query } = useRouter();
+ const [pageData] = useState(props.pageData.item);
+
+ const statusCode = query.statusCode || "";
+ const errorTitle =
+ query.errorTitle || pageData.scContentEn.json[0].content[0].value;
+ const errorTitleFr =
+ query.errorTitleFr || pageData.scContentFr.json[0].content[0].value;
+ const errorMessage =
+ query.errorMessage || pageData.scContentEn.json[1].content[0].value;
+ const errorMessageFr =
+ query.errorMessageFr || pageData.scContentFr.json[1].content[0].value;
+
+ useEffect(() => {
+ if (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <div className="min-h-screen relative">
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title data-gc-analytics-error={props.statusCode}>
+ {pageData.scContentEn.json[0].content[0].value} |{" "}
+ {pageData.scContentFr.json[0].content[0].value}
+ </title>
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta content="width=device-width, initial-scale=1" name="viewport" />
+ <meta
+ name="description"
+ content={
+ props.locale === "en"
+ ? `${errorTitle}` + `${errorMessage}`
+ : `${errorTitleFr}` + `${errorMessageFr}`
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <meta name="robots" content="noindex, nofollow" />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ property="dcterms:title"
+ lang="en"
+ content="The web site has reported an error"
+ />
+ <meta
+ property="dcterms:title"
+ lang="fr"
+ content="Le site Web a signalé une erreur"
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2"
+ />
+ <meta property="dcterms:creator" lang="en" content="Service Canada" />
+ <meta property="dcterms:creator" lang="fr" content="Service Canada" />
+
+ <meta
+ property="dcterms:subject"
+ lang="en"
+ title="gccore"
+ content="GV Government and Politics;Government services"
+ />
+ <meta
+ property="dcterms:subject"
+ lang="fr"
+ title="gccore"
+ content="GV Gouvernement et vie politique;Services gouvernementaux"
+ />
+ <meta
+ property="dcterms:description"
+ lang="en"
+ content="Error message stating that the site has reported an error."
+ />
+ <meta
+ property="dcterms:description"
+ lang="fr"
+ content="Message d’erreur indiquant que le site a signalé une erreur."
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-06-28" />
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta property="dcterms:modified" content="2021-12-16" />
+ <meta property="dcterms:issued" content="2021-06-28" />
+ <meta
+ name="dcterms.subject"
+ content="GV Government and Politics;Government services"
+ />
+ <meta name="dcterms.language" title="ISO639-2" content="eng" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca/" + `${props.locale}` + "/error"
+ }
+ />
+ <meta
+ property="og:title"
+ content="The web site has reported an error | Le site Web a signalé une erreur"
+ />
+ <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? `${errorTitle}` + `${errorMessage}`
+ : `${errorTitleFr}` + `${errorMessageFr}`
+ }
+ />
+ <meta property="og:image" content={`${t("metaImage")}`} />
+ <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca/" + `${props.locale}` + "/error"
+ }
+ />
+ <meta
+ property="twitter:title"
+ content="The web site has reported an error | Le site Web a signalé une erreur"
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? `${errorTitle}` + `${errorMessage}`
+ : `${errorTitleFr}` + `${errorMessageFr}`
+ }
+ />
+ <meta property="twitter:image" content={`${t("metaImage")}`} />
+ <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+ </Head>
+ <main>
+ <section className="layout-container pb-44">
+ <div className="pt-6">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageEn._path
+ : pageData.scGcImages[0].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageAltTextEn
+ : pageData.scGcImages[0].scImageAltTextFr
+ }
+ width={575}
+ height={59}
+ />
+ </div>
+ <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
+ {/* Left Side (English section) */}
+ <div>
+ <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 lg:h-500px mb-8 lg:mb-0">
+ <h1
+ className="font-bold font-display mb-4"
+ data-testid="heading-en"
+ >
+ {errorTitle}
+ </h1>
+ {statusCode ? (
+ <p
+ className="font-bold font-body mb-8"
+ data-testid="statuscode-en"
+ >
+ {pageData.scContentEn.json[2].content[0].value}{" "}
+ {statusCode}
+ </p>
+ ) : (
+ ""
+ )}
+ <p
+ className="font-body text-p font-bold mb-4 leading-30px"
+ data-testid="errormessage-en"
+ >
+ {errorMessage}
+ </p>
+ {errorMessage === "Wrong URL" ? (
+ <>
+ {/* Wrong URL English Section */}
+ <p className="font-body text-sm leading-30px mb-5">
+ {pageData.scContentEn.json[3].content[0].value}
+ </p>
+ <ul>
+ <li className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentEn.json[4].content[0].value}
+ </p>
+ </li>
+ <li className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentEn.json[5].content[0].value}
+ <a
+ href={`mailto:${process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL}`}
+ className="text-custom-blue-link underline"
+ >
+ {
+ process.env
+ .NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
+ }
+ </a>{" "}
+ {pageData.scContentEn.json[6].content[0].value}
+ </p>
+ </li>
+ </ul>
+ <p className="font-body text-sm leading-30px mt-5">
+ {pageData.scContentEn.json[7].content[0].value}
+ </p>
+ </>
+ ) : errorMessage === "Expired URL" ? (
+ <>
+ {/* Expired URL English Section */}
+ <p className="font-body text-sm leading-30px mb-5">
+ {pageData.scContentEn.json[8].content[0].value}
+ </p>
+ <ul>
+ <li className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ <Link
+ href={
+ pageData.scContentEn.json[9].content[0].data
+ .href
+ }
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentEn.json[9].content[0].value}
+ </Link>{" "}
+ {pageData.scContentEn.json[9].content[1].value}
+ </p>
+ </li>
+ </ul>
+ <p className="font-body text-sm leading-30px mt-5">
+ {pageData.scContentEn.json[7].content[0].value}
+ </p>
+ </>
+ ) : (
+ /* General Error English Section */
+ <div className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentEn.json[10].content[0].value}
+ <Link
+ href={
+ pageData.scContentEn.json[10].content[1].data.href
+ }
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentEn.json[10].content[1].value}
+ </Link>
+ </p>
+ </div>
+ )}
+ </div>
+ <ReportAProblem language="en" />
+ </div>
+ <div className="flex items-center justify-center circle-background my-8 lg:mt-0 lightbulb-bg">
+ <span className="relative lightbulb">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[0].scImageEn._path
+ : pageData.scImageList[0].scImageFr._path
+ }`}
+ alt=""
+ />
+ </span>
+ </div>
+ {/* Right Side (French section) */}
+ <div>
+ <div
+ className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 lg:h-500px mb-8 lg:mb-0"
+ lang="fr"
+ >
+ <h1
+ className="font-bold font-display mb-4"
+ data-testid="heading-fr"
+ >
+ {errorTitleFr}
+ </h1>
+ {statusCode ? (
+ <p
+ className="font-bold font-body mb-8"
+ data-testid="statuscode-fr"
+ >
+ {pageData.scContentFr.json[2].content[0].value}{" "}
+ {statusCode}
+ </p>
+ ) : (
+ ""
+ )}
+ <p
+ className="font-body text-p font-bold mb-4 leading-30px"
+ data-testid="errormessage-fr"
+ >
+ {errorMessageFr}
+ </p>
+ {errorMessageFr === "URL erronée" ? (
+ <>
+ {/* Wrong URL French Section */}
+ <p className="font-body text-sm leading-30px mb-5">
+ {pageData.scContentFr.json[3].content[0].value}
+ </p>
+ <ul>
+ <li className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentFr.json[4].content[0].value}
+ </p>
+ </li>
+ <li className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentFr.json[5].content[0].value}
+ <a
+ href={`mailto:${process.env.NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL}`}
+ className="text-custom-blue-link underline"
+ >
+ {
+ process.env
+ .NEXT_PUBLIC_NOTIFY_REPORT_A_PROBLEM_EMAIL
+ }
+ </a>{" "}
+ {pageData.scContentFr.json[6].content[0].value}
+ </p>
+ </li>
+ </ul>
+ <p className="font-body text-sm leading-30px mt-5">
+ {pageData.scContentFr.json[7].content[0].value}
+ </p>
+ </>
+ ) : errorMessageFr === "URL expirée" ? (
+ <>
+ {/* Expired URL French Section */}
+ <p className="font-body text-sm leading-30px mb-5">
+ {pageData.scContentFr.json[8].content[0].value}
+ </p>
+ <ul>
+ <li className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ <Link
+ href={
+ pageData.scContentFr.json[9].content[0].data
+ .href
+ }
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentFr.json[9].content[0].value}
+ </Link>{" "}
+ {pageData.scContentFr.json[9].content[1].value}
+ </p>
+ </li>
+ </ul>
+ <p className="font-body text-sm leading-30px mt-5">
+ {pageData.scContentFr.json[7].content[0].value}
+ </p>
+ </>
+ ) : (
+ /* General Error French Section */
+ <div className="flex">
+ <span className="error404-link" />
+ <p className="font-body text-sm leading-30px">
+ {pageData.scContentFr.json[10].content[0].value}
+ <Link
+ href={
+ pageData.scContentFr.json[10].content[1].data.href
+ }
+ className="underline hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ >
+ {pageData.scContentFr.json[10].content[1].value}
+ </Link>
+ </p>
+ </div>
+ )}
+ </div>
+ <ReportAProblem language="fr" />
+ </div>
+ </div>
+ </section>
+ </main>
+ <footer className="h-100px w-screen bg-footer-background-color absolute bottom-0">
+ <div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
+ <ActionButton
+ id="errorTopOfPageButton"
+ href="#"
+ custom="text-left w-32 flex flex-col lg:hidden"
+ text="Top of page / Haut de la page"
+ icon="icon-up-caret"
+ iconEnd
+ />
+ <span className="relative footer-logo">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageEn._path
+ : pageData.scGcImages[1].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageAltTextEn
+ : pageData.scGcImages[1].scImageAltTextFr
+ }
+ />
+ </span>
+ </div>
+ </footer>
+ </div>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ const { data } = await aemServiceInstance.getFragment("customErrorQuery");
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ ...(await serverSideTranslations("en", ["common"])),
+ ...(await serverSideTranslations("fr", ["common"])),
+ pageData: data.scLabsErrorPagev1ByPath,
+ },
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 | + + + + + + + + + +1x +1x + +1x +4x + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { Layout } from "../components/organisms/Layout";
+import { useEffect, useState } from "react";
+import Card from "../components/molecules/Card";
+import { ContextualAlert } from "@dts-stn/service-canada-design-system";
+import aemServiceInstance from "../services/aemServiceInstance";
+import { Heading } from "@dts-stn/service-canada-design-system";
+
+export default function Home(props) {
+ const [pageData] = useState(props.pageData.item);
+ const [experimentsData] = useState(props.experimentsData);
+
+ const currentProjects = experimentsData.filter((project) => {
+ return (
+ project.scLabProjectStatus[0] ===
+ "gc:custom/decd-endc/project-status/current"
+ );
+ });
+
+ const displayCurrentProjects = currentProjects.map((project) => (
+ <li key={project.scId} className="list-none ml-0">
+ <Card
+ showImage
+ showTag={
+ project.scTitleEn === "Old Age Security Benefits Estimator"
+ ? true
+ : false
+ }
+ tagLabel={props.locale === "en" ? "New update" : "Nouvelle mise à jour"}
+ tag="new_update"
+ imgSrc={
+ // TODO images should always be fetched from the same place in the response data i.e. using the socialMediaImage field
+ project.scId === "BENEFITS-NAVIGATOR-OVERVIEW"
+ ? props.locale === "en"
+ ? `${project.scFragments[0].scImageEn._publishUrl}`
+ : `${project.scFragments[0].scImageFr._publishUrl}`
+ : props.locale === "en"
+ ? `https://www.canada.ca${project.scSocialMediaImageEn._path}`
+ : `https://www.canada.ca${project.scSocialMediaImageFr._path}`
+ }
+ imgAlt={
+ props.locale === "en"
+ ? project.scSocialMediaImageAltTextEn
+ : project.scSocialMediaImageAltTextFr
+ }
+ title={props.locale === "en" ? project.scTitleEn : project.scTitleFr}
+ href={
+ props.locale === "en" ? project.scPageNameEn : project.scPageNameFr
+ }
+ description={
+ props.locale === "en"
+ ? project.scDescriptionEn.json[0].content[0].value
+ : project.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ </li>
+ ));
+
+ useEffect(() => {
+ Iif (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <Layout
+ locale={props.locale}
+ langUrl={
+ props.locale === "en" ? pageData.scPageNameFr : pageData.scPageNameEn
+ }
+ dateModifiedOverride={pageData.scDateModifiedOverwrite}
+ >
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>
+ {props.locale === "en"
+ ? pageData.scShortTitleEn
+ : pageData.scShortTitleFr}
+ </title>
+ <meta
+ name="description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta
+ name="keywords"
+ content={
+ props.locale === "en"
+ ? pageData.scKeywordsEn
+ : pageData.scKeywordsFr
+ }
+ />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ name="dcterms.title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={pageData.scSubject}
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-03-18" />
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="og:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ property="og:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="og:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ property="twitter:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="twitter:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ </Head>
+ <section className="layout-container">
+ <div className="grid grid-cols-4">
+ <div className="col-span-4">
+ <Heading
+ tabIndex="-1"
+ id="pageMainTitle"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[0].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[0].content[0]
+ .value
+ }
+ />
+ </div>
+ <p className="font-body col-span-4 xl:col-span-2 row-start-2">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[1].content[0].value
+ : pageData.scFragments[0].scContentFr.json[1].content[0].value}
+ </p>
+ <p className="font-body col-span-4 xl:col-span-2 row-start-3 pt-4 xxl:pt-0">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[2].content[0].value
+ : pageData.scFragments[0].scContentFr.json[2].content[0].value}
+ </p>
+ <div className="hidden xl:grid col-span-2 col-start-3 row-start-2 row-span-2">
+ <div className="flex justify-center">
+ <span
+ className="w-full"
+ style={{ height: "260px", width: "380px", minWidth: "380px" }}
+ role="presentation"
+ >
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[1].scImageEn._publishUrl
+ : pageData.scFragments[1].scImageFr._publishUrl
+ }
+ alt=""
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+ <div className="lg:flex">
+ <span className="w-full">
+ <h2>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[3].content[0].value
+ : pageData.scFragments[0].scContentFr.json[3].content[0]
+ .value}{" "}
+ </h2>
+ <p className="font-body">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[4].content[0].value
+ : pageData.scFragments[0].scContentFr.json[4].content[0]
+ .value}{" "}
+ </p>
+ <ul>
+ <li>
+ <p className="font-body">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[5].content[0]
+ .content[0].value
+ : pageData.scFragments[0].scContentFr.json[5].content[0]
+ .content[0].value}{" "}
+ </p>
+ </li>
+ <li>
+ <p className="font-body">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[5].content[1]
+ .content[0].value
+ : pageData.scFragments[0].scContentFr.json[5].content[1]
+ .content[0].value}{" "}
+ </p>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <h2>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[6].content[0].value
+ : pageData.scFragments[0].scContentFr.json[6].content[0]
+ .value}{" "}
+ </h2>
+ <div className="mb-8">
+ <ContextualAlert
+ id="info-alert"
+ type="info"
+ alert_icon_alt_text="info icon"
+ alert_icon_id="info icon"
+ message_heading={
+ props.locale === "en"
+ ? pageData.scFragments[2].scTitleEn
+ : pageData.scFragments[2].scTitleFr
+ }
+ message_body={
+ props.locale === "en" ? (
+ <>
+ {
+ pageData.scFragments[2].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]
+ .data.href
+ }
+ >
+ {
+ pageData.scFragments[2].scContentEn.json[0].content[1]
+ .value
+ }
+ </a>
+ {
+ pageData.scFragments[2].scContentEn.json[0].content[2]
+ .value
+ }
+ </>
+ ) : (
+ <>
+ {
+ pageData.scFragments[2].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]
+ .data.href
+ }
+ >
+ {
+ pageData.scFragments[2].scContentFr.json[0].content[1]
+ .value
+ }
+ </a>
+ {
+ pageData.scFragments[2].scContentEn.json[0].content[2]
+ .value
+ }
+ </>
+ )
+ }
+ />
+ </div>
+ <ul className="grid lg:grid-cols-2 gap-x-4 gap-y-4 list-none ml-0">
+ {displayCurrentProjects}
+ </ul>
+ </section>
+ </Layout>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ const { data: pageData } = await aemServiceInstance.getFragment(
+ "homePageQuery"
+ );
+ const { data: experimentsData } = await aemServiceInstance.getFragment(
+ "projectQuery"
+ );
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ pageData: pageData.scLabsPagev1ByPath,
+ experimentsData: experimentsData.scLabsPagev1List.items,
+ ...(await serverSideTranslations(locale, ["common"])),
+ },
+ revalidate: 10,
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| 404.js | +
+
+ |
+ 70.58% | +12/17 | +50% | +13/26 | +66.66% | +2/3 | +70.58% | +12/17 | +
| 500.js | +
+
+ |
+ 70.58% | +12/17 | +50% | +12/24 | +66.66% | +2/3 | +70.58% | +12/17 | +
| _app.js | +
+
+ |
+ 0% | +0/2 | +100% | +0/0 | +0% | +0/1 | +0% | +0/2 | +
| error.js | +
+
+ |
+ 0% | +0/16 | +0% | +0/50 | +0% | +0/3 | +0% | +0/16 | +
| home.js | +
+
+ |
+ 66.66% | +10/15 | +47.5% | +38/80 | +80% | +4/5 | +66.66% | +10/15 | +
| index.js | +
+
+ |
+ 66.66% | +6/9 | +28.57% | +4/14 | +66.66% | +2/3 | +75% | +6/8 | +
| notsupported.js | +
+
+ |
+ 50% | +8/16 | +47.82% | +22/46 | +40% | +2/5 | +50% | +8/16 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 | + + + + + + + +1x + +1x +1x + + + +1x + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
+import { ActionButton } from "../components/atoms/ActionButton";
+import Link from "next/link";
+import { useEffect } from "react";
+
+export default function Index(props) {
+ const { t } = useTranslation("common");
+
+ useEffect(() => {
+ Iif (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ document.documentElement.lang = "en";
+ }, []);
+
+ return (
+ <>
+ <div className="splash-bg splash-image bg-splash-img-mobile xs:bg-splash-img bg-no-repeat fixed left-0 top-0 w-full h-full -z-1" />
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>Service Canada Labs | Laboratoires de Service Canada</title>
+ <meta
+ name="description"
+ content="Explore the Service Canada Labs in English or French."
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta content="width=device-width, initial-scale=1" name="viewport" />
+ <meta name="robots" content="noindex, follow" />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ property="dcterms:title"
+ lang="en"
+ content="Service Canada Labs"
+ />
+ <meta
+ property="dcterms:title"
+ lang="fr"
+ content="Laboratoires de Service Canada"
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2"
+ />
+ <meta property="dcterms:creator" lang="en" content="Service Canada" />
+ <meta property="dcterms:creator" lang="fr" content="Service Canada" />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta name="dcterms.service" content="ESDC-EDSC_SCLabs-LaboratoireSC" />
+ <meta name="dcterms.issued" content="2021-05-06" />
+ <meta property="dcterms:modified" content="2021-12-16" />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-05-06" />
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta
+ property="dcterms:description"
+ lang="en"
+ content="Explore the Service Canada Labs in English or French."
+ />
+ <meta
+ property="dcterms:description"
+ lang="fr"
+ content="Explorez les laboratoires de Service Canda en français ou en anglais."
+ />
+ <meta
+ property="dcterms:subject"
+ lang="en"
+ title="gccore"
+ content="GV Government and Politics;Government services"
+ />
+ <meta
+ property="dcterms:subject"
+ lang="fr"
+ title="gccore"
+ content="GV Gouvernement et vie politique;Services gouvernementaux"
+ />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta property="og:url" content={"https://alpha.service.canada.ca/"} />
+ <meta
+ property="og:title"
+ content="Service Canada Labs | Laboratoires de Service Canada"
+ />
+ <meta
+ property="og:description"
+ content="Explore the Service Canada Labs in English or French."
+ />
+ <meta property="og:image" content={`${t("metaImage")}`} />
+ <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={"https://alpha.service.canada.ca/"}
+ />
+ <meta
+ property="twitter:title"
+ content="Service Canada Labs | Laboratoires de Service Canada"
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content="Explore the Service Canada Labs in English or French."
+ />
+ <meta property="twitter:image" content={`${t("metaImage")}`} />
+ <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+ </Head>
+ <main className="h-full flex justify-center">
+ <div className="splash-cta fixed flex flex-col sm:justify-center sm:items-center">
+ <div className="z-10 bg-white h-auto min-w-300px w-300px xl:w-500px">
+ <h1 className="sr-only">alpha.service.canada.ca</h1>
+ <div className="p-4">
+ <img
+ src={"/sig-blk-en.svg"}
+ alt={"Government of Canada / Gouvernement du Canada"}
+ width="300"
+ height="35"
+ />
+ </div>
+ <div className="flex w-max container mx-auto py-6 font-display">
+ <h2
+ className="text-p text-right xl:text-h4 mr-6 w-32 xl:w-40"
+ lang="en"
+ >
+ Service Canada Labs
+ </h2>
+ <h2 className="text-p xl:text-h4 w-32 xl:w-40" lang="fr">
+ Laboratoires de Service Canada
+ </h2>
+ </div>
+ <div className="flex w-max container pb-6 mx-auto font-display">
+ <ActionButton
+ id="english-button"
+ style="primary"
+ text="English"
+ lang="en"
+ custom="justify-center w-7.5rem xl:w-138px mr-6 text-lg"
+ href="/en/home"
+ />
+ <ActionButton
+ id="french-button"
+ style="primary"
+ text="Français"
+ href="/fr/accueil"
+ lang="fr"
+ custom="justify-center w-7.5rem xl:w-138px text-lg"
+ />
+ </div>
+ </div>
+ <div className="relative py-7 bg-splash-page-bottom text-p h-auto min-w-300px w-300px flex justify-between container p-6 xl:w-500px xl:items-center">
+ <div className="w-28 text-base xl:text-p xl:w-max font-body">
+ <Link
+ href="https://www.canada.ca/en/transparency/terms.html"
+ className="inline-block w-28 xl:w-max mr-0 hover:text-canada-footer-hover-font-blue text-canada-footer-font splash-link"
+ >
+ Terms & conditions
+ </Link>
+ <Link
+ href="https://www.canada.ca/fr/transparence/avis.html"
+ className="inline-block hover:text-canada-footer-hover-font-blue text-canada-footer-font"
+ lang="fr"
+ >
+ Avis
+ </Link>
+ </div>
+ <img
+ src="/wmms-blk.svg"
+ alt="Symbol of the Government of Canada / Symbole du gouvernement du Canada"
+ width="150"
+ height="25"
+ />
+ </div>
+ </div>
+ </main>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getServerSideProps = async ({ locale }) => ({
+ props: {
+ locale: locale ?? "en",
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL ?? "",
+ ...(await serverSideTranslations(locale, ["common"])),
+ },
+});
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 | + + + + + + + + + +1x +1x +1x +1x + +1x +1x + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + | import Head from "next/head";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { ActionButton } from "../components/atoms/ActionButton";
+import { useEffect } from "react";
+import { CopyToClipboard } from "../components/molecules/CopyToClipboard";
+import { useState } from "react";
+import aemServiceInstance from "../services/aemServiceInstance";
+
+export default function notSupported(props) {
+ const { t } = useTranslation("common");
+ const [enCopied, setEnCopied] = useState(false);
+ const [frCopied, setFrCopied] = useState(false);
+ const [pageData] = useState(props.pageData.item);
+
+ useEffect(() => {
+ Iif (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ function onClickEn() {
+ setEnCopied(true);
+ setFrCopied(false);
+ }
+
+ function onClickFr() {
+ setFrCopied(true);
+ setEnCopied(false);
+ }
+ return (
+ <>
+ <div className="min-h-screen relative">
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title data-gc-analytics-error="notSupported">
+ {pageData.scContentEn.json[0].content[0].value} |{" "}
+ {pageData.scContentFr.json[0].content[0].value}
+ </title>
+ <meta
+ name="description"
+ content="Error message stating that the site will not work with Internet Explorer."
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta content="width=device-width, initial-scale=1" name="viewport" />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ property="dcterms:title"
+ lang="en"
+ content="Sorry, this site will not work with Internet Explorer"
+ />
+ <meta
+ property="dcterms:title"
+ lang="fr"
+ content="Désolé, ce site ne fonctionne pas avec Internet Explorer"
+ />
+ <meta
+ property="dcterms:description"
+ lang="en"
+ content="Error message stating that the site will not work with Internet Explorer."
+ />
+ <meta
+ property="dcterms:description"
+ lang="fr"
+ content="Message d’erreur indiquant que le site ne fonctionne pas avec Internet Explorer."
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2"
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta
+ property="dcterms:subject"
+ lang="fr"
+ title="gccore"
+ content="GV Gouvernement et vie politique;Services gouvernementaux"
+ />
+ <meta
+ property="dcterms:subject"
+ lang="en"
+ title="gccore"
+ content="GV Government and Politics;Government services"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-11-25" />
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta property="dcterms:issued" content="2021-11-25" />
+ <meta property="dcterms:modified" content="2021-12-16" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca/" +
+ `${props.locale}` +
+ "/notsupported"
+ }
+ />
+ <meta
+ property="og:title"
+ content={`Browser not supported — ${t("siteTitle")}`}
+ />
+ <meta
+ property="og:description"
+ content="Sorry, this site will not work with Internet Explorer | Désolé, ce
+ site ne fonctionne pas avec Internet Explorer"
+ />
+ <meta property="og:image" content={`${t("metaImage")}`} />
+ <meta property="og:image:alt" content={`${t("siteTitle")}`} />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca/" +
+ `${props.locale}` +
+ "/notsupported"
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={`Browser not supported — ${t("siteTitle")}`}
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content="Sorry, this site will not work with Internet Explorer | Désolé, ce
+ site ne fonctionne pas avec Internet Explorer"
+ />
+ <meta property="twitter:image" content={`${t("metaImage")}`} />
+ <meta property="twitter:image:alt" content={`${t("siteTitle")}`} />
+ </Head>
+ <section className="xs:px-0 lg:mx-auto lg:px-6 container">
+ <div className="pt-6">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageEn._path
+ : pageData.scGcImages[0].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[0].scImageAltTextEn
+ : pageData.scGcImages[0].scImageAltTextFr
+ }
+ width={575}
+ height={59}
+ />
+ </div>
+ <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
+ <div>
+ <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0">
+ <h1 className="font-bold font-display mb-4">
+ {pageData.scContentEn.json[0].content[0].value}
+ </h1>
+ <p className="font-body text-sm mb-4 leading-normal">
+ {pageData.scContentEn.json[1].content[0].value}
+ </p>
+ </div>
+ </div>
+ <div className="flex items-center justify-center circle-background my-8 lg:mt-0 lightbulb-bg">
+ <span className="relative lightbulb">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[0].scImageEn._path
+ : pageData.scImageList[0].scImageFr._path
+ }`}
+ alt=""
+ />
+ </span>
+ </div>
+ <div>
+ <div
+ className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 xl:h-400px lg:h-500px mb-8 lg:mb-0"
+ lang="fr"
+ >
+ <h1 className="font-bold font-display mb-4">
+ {pageData.scContentFr.json[0].content[0].value}
+ </h1>
+ <p className="font-body text-sm mb-4 leading-normal">
+ {pageData.scContentFr.json[1].content[0].value}
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section className="-mt-0 lg:-mt-36 sm:-mt-4 pb-5">
+ <div className="flex items-center justify-center">
+ <figure className="mx-4">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[1].scImageEn._path
+ : pageData.scImageList[1].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scImageList[1].scImageAltTextEn
+ : pageData.scImageList[1].scImageAltTextFr
+ }
+ width="98"
+ height="98"
+ />
+ <figcaption className="flex items-center justify-center">
+ Chrome
+ </figcaption>
+ </figure>
+ <figure className="mx-4">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[2].scImageEn._path
+ : pageData.scImageList[2].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scImageList[2].scImageAltTextEn
+ : pageData.scImageList[2].scImageAltTextFr
+ }
+ width="98"
+ height="98"
+ />
+ <figcaption className="flex items-center justify-center">
+ Safari
+ </figcaption>
+ </figure>
+ <figure className="mx-4">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[3].scImageEn._path
+ : pageData.scImageList[3].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scImageList[3].scImageAltTextEn
+ : pageData.scImageList[3].scImageAltTextFr
+ }
+ width="94"
+ height="94"
+ />
+ <figcaption className="pt-1.5 flex items-center justify-center">
+ Edge
+ </figcaption>
+ </figure>
+ <figure className="mx-4">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scImageList[4].scImageEn._path
+ : pageData.scImageList[4].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scImageList[4].scImageAltTextEn
+ : pageData.scImageList[4].scImageAltTextFr
+ }
+ width="98"
+ height="98"
+ />
+ <figcaption className="flex items-center justify-center">
+ Firefox
+ </figcaption>
+ </figure>
+ </div>
+ </section>
+ <section className="xs:px-0 lg:mx-auto lg:px-6 container pb-44">
+ <div className="flex flex-col lg:flex-row justify-between items-center lg:items-start mt-8">
+ <div className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 mb-8 lg:mb-0">
+ <p className="font-body text-sm mb-4 leading-normal">
+ {pageData.scCopyToClipboardLabelEn}
+ </p>
+ <CopyToClipboard
+ buttonId="enClipboardButton"
+ buttonText={enCopied ? "Copied!" : "Copy link"}
+ buttonStyle={enCopied ? "ieButtonCopied" : "ieButton"}
+ value="http://alpha.service.canada.ca/home"
+ onClick={onClickEn}
+ id="enClipboard"
+ name="clipboard_en"
+ textFieldStyle="ieTextField"
+ aria_label="Copy the link below and paste in that browser."
+ />
+ <p className="font-body text-sm pt-6 leading-normal">
+ {pageData.scBrowserDownloadLinksEn.json[0].content[0].value}
+ </p>
+ <ul className="underline pt-4 font-body text-sm ieLinksList">
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksEn.json[1].content[0]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksEn.json[1].content[0]
+ .content[0].value
+ }
+ </a>
+ </li>
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksEn.json[1].content[1]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksEn.json[1].content[1]
+ .content[0].value
+ }
+ </a>
+ </li>
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksEn.json[1].content[2]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksEn.json[1].content[2]
+ .content[0].value
+ }
+ </a>
+ </li>
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksEn.json[1].content[3]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksEn.json[1].content[3]
+ .content[0].value
+ }
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div>
+ <div
+ className="relative h-auto xl:w-96 xxl:w-400px lg:w-72 mb-8 lg:mb-0"
+ lang="fr"
+ >
+ <p className="font-body text-sm mb-4 leading-normal">
+ {pageData.scCopyToClipboardLabelFr}
+ </p>
+ <CopyToClipboard
+ buttonText={frCopied ? "Copié!" : "Copier lien"}
+ buttonId="frClipboardButton"
+ buttonStyle={frCopied ? "ieButtonCopied" : "ieButton"}
+ value="http://alpha.service.canada.ca/fr/home"
+ onClick={onClickFr}
+ id="frClipboard"
+ name="clipboard_fr"
+ textFieldStyle="ieTextField"
+ aria_label="Vous n'avez qu'Ã copier le lien ci-dessous et le coller dans ce navigateur."
+ />
+ <p className="font-body text-sm pt-6 leading-normal">
+ {pageData.scBrowserDownloadLinksFr.json[0].content[0].value}
+ </p>
+ <ul className="underline pt-4 font-body text-sm ieLinksList">
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksFr.json[1].content[0]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksFr.json[1].content[0]
+ .content[0].value
+ }
+ </a>
+ </li>
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksFr.json[1].content[1]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksFr.json[1].content[1]
+ .content[0].value
+ }
+ </a>
+ </li>
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksFr.json[1].content[2]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksFr.json[1].content[2]
+ .content[0].value
+ }
+ </a>
+ </li>
+ <li className="browser-item">
+ <a
+ href={
+ pageData.scBrowserDownloadLinksFr.json[1].content[3]
+ .content[0].data.href
+ }
+ >
+ {
+ pageData.scBrowserDownloadLinksFr.json[1].content[3]
+ .content[0].value
+ }
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </section>
+ <footer className="h-100px w-screen bgGray absolute bottom-0">
+ <div className="layout-container flex justify-between lg:flex-row-reverse pt-4 lg:pt-0 lg:mt-8">
+ <ActionButton
+ id="404TopOfPageButton"
+ href="#"
+ custom="text-left w-32 flex flex-col lg:hidden"
+ text="Top of page / Haut de la page"
+ icon="icon-up-caret"
+ iconEnd
+ />
+ <span className="relative footer-logo">
+ <img
+ src={`https://www.canada.ca${
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageEn._path
+ : pageData.scGcImages[1].scImageFr._path
+ }`}
+ alt={
+ props.locale === "en"
+ ? pageData.scGcImages[1].scImageAltTextEn
+ : pageData.scGcImages[1].scImageAltTextFr
+ }
+ />
+ </span>
+ </div>
+ </footer>
+ </div>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ const { data } = await aemServiceInstance.getFragment("notsupportedQuery");
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ ...(await serverSideTranslations("en", ["common"])),
+ ...(await serverSideTranslations("fr", ["common"])),
+ pageData: data.scLabsErrorPagev1ByPath,
+ },
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
+import { Layout } from "../../../components/organisms/Layout";
+import { ActionButton } from "../../../components/atoms/ActionButton";
+import { useEffect, useState } from "react";
+import aemServiceInstance from "../../../services/aemServiceInstance";
+import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
+import { CTA, Heading } from "@dts-stn/service-canada-design-system";
+import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+
+export default function DynamicBenefitNavigatorPage(props) {
+ const [pageData] = useState(props.pageData);
+ const [dictionary] = useState(props.dictionary.items);
+
+ useEffect(() => {
+ if (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <Layout
+ locale={props.locale}
+ langUrl={
+ props.locale === "en" ? pageData.scPageNameFr : pageData.scPageNameEn
+ }
+ dateModifiedOverride={pageData.scDateModifiedOverwrite}
+ breadcrumbItems={createBreadcrumbs(
+ pageData.scBreadcrumbParentPages,
+ props.locale
+ )}
+ >
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>
+ {props.locale === "en"
+ ? `${pageData.scTitleEn} - Service Canada Labs`
+ : `${pageData.scTitleFr} - Laboratoires de Service Canada`}
+ </title>
+ <meta
+ name="description"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta
+ name="keywords"
+ content={
+ props.locale === "en"
+ ? pageData.scKeywordsEn
+ : pageData.scKeywordsFr
+ }
+ />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ name="dcterms.title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2023-07-07" />
+
+ <meta name="dcterms.modified" title="W3CDTF" content="2023-07-07" />
+ <meta
+ name="dcterms.description"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={pageData.scSubject}
+ />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="og:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ {/* <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[1].content[0].value
+ : pageData.scFragments[1].scContentFr.json[1].content[0].value
+ }
+ /> */}
+ <meta
+ property="og:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="og:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ {/* <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[1].content[0].value
+ : pageData.scFragments[1].scContentFr.json[1].content[0].value
+ }
+ /> */}
+ <meta
+ property="twitter:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="twitter:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ </Head>
+ <section className="layout-container mb-12">
+ <Heading
+ tabIndex="-1"
+ id="pageMainTitle"
+ title={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <div id="postedOnUpdatedOnSection" className="grid grid-cols-12">
+ <p
+ className={`col-span-6 sm:col-span-4 ${
+ props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
+ } font-bold`}
+ >
+ {props.locale === "en"
+ ? dictionary[9].scTermEn
+ : dictionary[9].scTermFr}
+ </p>
+ <p className="col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-0">
+ {pageData.scDateModifiedOverwrite}
+ </p>
+ <p
+ className={`row-start-2 col-span-6 sm:col-span-4 mt-0 ${
+ props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
+ } font-bold`}
+ >
+ {props.locale === "en"
+ ? dictionary[4].scTermEn
+ : dictionary[4].scTermFr}
+ </p>
+ <p className="row-start-2 col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-auto">
+ {pageData.scDateModifiedOverwrite}
+ </p>
+ </div>
+
+ {/* Main */}
+ <div id="mainContentSection" className="flex flex-row-reverse mt-12">
+ <div className="hidden md:block">
+ <img
+ src={pageData.scFragments[1].scImageEn._publishUrl}
+ alt=""
+ height={pageData.scFragments[1].scImageEn.height}
+ width={pageData.scFragments[1].scImageEn.width}
+ />
+ </div>
+ <div className="w-[750px] grow">
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[1].content[0].value
+ : pageData.scFragments[0].scContentFr.json[1].content[0]
+ .value}
+ </p>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[2].content[0].value
+ : pageData.scFragments[0].scContentFr.json[2].content[0]
+ .value}
+ <a
+ className="underline underline-offset-4"
+ href={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[2].content[1]
+ .data.href
+ : pageData.scFragments[0].scContentFr.json[2].content[1]
+ .data.href
+ }
+ >
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[2].content[1]
+ .value
+ : pageData.scFragments[0].scContentFr.json[2].content[1]
+ .value}
+ </a>
+ <span className="text-lg pl-1">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[2].content[2]
+ .value
+ : pageData.scFragments[0].scContentFr.json[2].content[2]
+ .value}
+ </span>
+ </p>
+
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[3].content[0].value
+ : pageData.scFragments[0].scContentFr.json[3].content[0]
+ .value}
+ </p>
+
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[4].content[0].value
+ : pageData.scFragments[0].scContentFr.json[4].content[0]
+ .value}
+ </p>
+
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[5].content[0].value
+ : pageData.scFragments[0].scContentFr.json[5].content[0]
+ .value}
+ </p>
+
+ <h2>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[6].content[0].value
+ : pageData.scFragments[0].scContentFr.json[6].content[0]
+ .value}
+ </h2>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[7].content[0].value
+ : pageData.scFragments[0].scContentFr.json[7].content[0]
+ .value}
+ </p>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[8].content[0].value
+ : pageData.scFragments[0].scContentFr.json[8].content[0]
+ .value}
+ </p>
+
+ <h2>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[9].content[0].value
+ : pageData.scFragments[0].scContentFr.json[9].content[0]
+ .value}
+ </h2>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[10].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[10].content[0]
+ .value}
+ </p>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[11].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[11].content[0]
+ .value}
+ </p>
+
+ <h2>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[12].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[12].content[0]
+ .value}
+ </h2>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[13].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[13].content[0]
+ .value}
+ </p>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[14].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[14].content[0]
+ .value}
+ </p>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[15].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[15].content[0]
+ .value}
+ </p>
+
+ <h2>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[16].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[16].content[0]
+ .value}
+ </h2>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[17].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[17].content[0]
+ .value}
+ </p>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[18].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[18].content[0]
+ .value}
+ </p>
+ <ul>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[19].content[0]
+ .content[0].value
+ : pageData.scFragments[0].scContentFr.json[19].content[0]
+ .content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[19].content[1]
+ .content[0].value
+ : pageData.scFragments[0].scContentFr.json[19].content[1]
+ .content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[19].content[2]
+ .content[0].value
+ : pageData.scFragments[0].scContentFr.json[19].content[2]
+ .content[0].value}
+ </li>
+ </ul>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[20].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[20].content[0]
+ .value}
+ </p>
+ </div>
+ </div>
+ </section>
+ </Layout>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export async function getStaticPaths() {
+ // Get pages data
+ const { data } = await aemServiceInstance.getFragment(
+ "benefitsNavigatorArticlesQuery"
+ );
+ // Get paths for dynamic routes from the page name data
+ const paths = getAllUpdateIds(data.scLabsPagev1List.items);
+ paths.map((path) => {
+ path.locale === "en"
+ ? (path.params.id = path.params.id.slice(32))
+ : (path.params.id = path.params.id.slice(35));
+ });
+ return {
+ paths,
+ fallback: false,
+ };
+}
+
+export const getStaticProps = async ({ locale, params }) => {
+ // Get pages data
+ const { data } = await aemServiceInstance.getFragment(
+ "benefitsNavigatorArticlesQuery"
+ );
+ // get dictionary
+ const { data: dictionary } = await aemServiceInstance.getFragment(
+ "dictionaryQuery"
+ );
+ const pages = data.scLabsPagev1List.items;
+ // Return page data that matches the current page being built
+ const pageData = pages.filter((page) => {
+ return (
+ page.scPageNameEn.slice(32) === params.id ||
+ page.scPageNameFr.slice(35) === params.id
+ );
+ });
+
+ return {
+ props: {
+ locale: locale,
+ pageData: pageData[0],
+ dictionary: dictionary.dictionaryV1List,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ ...(await serverSideTranslations(locale, ["common", "vc"])),
+ },
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 +500 +501 +502 +503 +504 +505 +506 +507 +508 +509 +510 +511 +512 +513 +514 +515 +516 +517 +518 +519 +520 +521 +522 +523 +524 +525 +526 +527 +528 +529 +530 +531 +532 +533 +534 +535 +536 +537 +538 +539 +540 +541 +542 +543 +544 +545 +546 +547 +548 +549 +550 +551 +552 +553 +554 +555 +556 +557 +558 +559 +560 +561 +562 +563 +564 +565 +566 +567 +568 +569 +570 +571 +572 +573 +574 +575 +576 +577 +578 +579 +580 +581 +582 +583 +584 +585 +586 +587 +588 +589 +590 +591 +592 +593 +594 +595 +596 +597 +598 +599 +600 +601 +602 +603 +604 +605 +606 +607 +608 +609 +610 +611 +612 +613 +614 +615 +616 +617 +618 +619 +620 +621 +622 +623 +624 +625 +626 +627 +628 +629 +630 +631 +632 +633 +634 +635 +636 +637 +638 +639 +640 +641 +642 +643 +644 +645 +646 +647 +648 +649 +650 +651 +652 +653 +654 +655 +656 +657 +658 +659 +660 +661 +662 +663 +664 +665 +666 +667 +668 +669 +670 +671 +672 +673 +674 +675 +676 +677 +678 +679 +680 +681 +682 +683 +684 +685 +686 +687 +688 +689 +690 +691 +692 +693 +694 +695 +696 +697 +698 +699 +700 +701 +702 +703 +704 +705 +706 +707 +708 +709 +710 +711 +712 +713 +714 +715 +716 +717 +718 +719 +720 +721 +722 +723 +724 +725 +726 +727 +728 +729 +730 +731 +732 +733 +734 +735 +736 +737 +738 +739 +740 +741 +742 +743 +744 +745 +746 +747 +748 +749 +750 +751 +752 +753 +754 +755 +756 +757 +758 +759 +760 +761 +762 +763 +764 +765 +766 +767 +768 +769 +770 +771 +772 +773 +774 +775 +776 +777 +778 +779 +780 +781 +782 +783 +784 +785 +786 +787 +788 +789 +790 +791 +792 +793 +794 +795 +796 +797 +798 +799 +800 +801 +802 +803 +804 +805 +806 +807 +808 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { Layout } from "../../../components/organisms/Layout";
+import { ActionButton } from "../../../components//atoms/ActionButton";
+import { useEffect, useState } from "react";
+import aemServiceInstance from "../../../services/aemServiceInstance";
+import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
+import { CTA, Collapse } from "@dts-stn/service-canada-design-system";
+import { Heading } from "@dts-stn/service-canada-design-system";
+import Card from "../../../components/molecules/Card";
+import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+
+export default function BenefitsNavigatorOverview(props) {
+ const [pageData] = useState(props.pageData.item);
+ const [updatesData] = useState(props.updatesData);
+ const [filteredDictionary] = useState(
+ props.dictionary.items.filter(
+ (item) =>
+ item.scId === "STARTED" ||
+ item.scId === "ENDED" ||
+ item.scId === "PROJECT-STAGE" ||
+ item.scId === "SUMMARY"
+ )
+ );
+ const stageDictionary = {
+ en: {
+ "gc:custom/decd-endc/project-stage/alpha": "Alpha",
+ "gc:custom/decd-endc/project-stage/beta": "Beta",
+ },
+ fr: {
+ "gc:custom/decd-endc/project-stage/alpha": "Alpha",
+ "gc:custom/decd-endc/project-stage/beta": "Bêta",
+ },
+ };
+
+ function generateReactElements(json) {
+ const elements = [];
+
+ for (const item of json) {
+ if (item.nodeType === "paragraph") {
+ elements.push(
+ <p key={elements.length}>{generateReactElements(item.content)}</p>
+ );
+ } else if (item.nodeType === "unordered-list") {
+ const listItems = item.content.map((listItem, index) => (
+ <li key={index} className="my-0">
+ {generateReactElements(listItem.content)}
+ </li>
+ ));
+ elements.push(
+ <ul key={elements.length} className="mb-0">
+ {listItems}
+ </ul>
+ );
+ } else if (item.nodeType === "ordered-list") {
+ const listItems = item.content.map((listItem, index) => (
+ <li key={index} className="my-0">
+ {generateReactElements(listItem.content)}
+ </li>
+ ));
+ elements.push(
+ <ol key={elements.length} className="mb-0">
+ {listItems}
+ </ol>
+ );
+ } else if (item.nodeType === "list-item") {
+ elements.push(
+ <li key={elements.length} className="my-0">
+ {generateReactElements(item.content)}
+ </li>
+ );
+ } else if (item.nodeType === "text") {
+ elements.push(item.value);
+ }
+ }
+
+ return elements;
+ }
+
+ const displayProjectUpdates = updatesData.map((update) => (
+ <li key={update.scId} className="list-none ml-0 col-span-12 lg:col-span-4">
+ <Card
+ showImage
+ imgSrc={
+ props.locale === "en"
+ ? `https://www.canada.ca${update.scSocialMediaImageEn._path}`
+ : `https://www.canada.ca${update.scSocialMediaImageFr._path}`
+ }
+ imgAlt={
+ props.locale === "en"
+ ? update.scSocialMediaImageAltTextEn
+ : update.scSocialMediaImageAltTextFr
+ }
+ title={props.locale === "en" ? update.scTitleEn : update.scTitleFr}
+ href={props.locale === "en" ? update.scPageNameEn : update.scPageNameFr}
+ description={`${
+ props.locale === "en"
+ ? props.dictionary.items[9].scTermEn
+ : props.dictionary.items[9].scTermFr
+ } ${update.scDateModifiedOverwrite}`}
+ />
+ </li>
+ ));
+
+ useEffect(() => {
+ if (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <Layout
+ locale={props.locale}
+ langUrl={
+ props.locale === "en" ? pageData.scPageNameFr : pageData.scPageNameEn
+ }
+ dateModifiedOverride={pageData.scDateModifiedOverwrite}
+ breadcrumbItems={createBreadcrumbs(
+ pageData.scBreadcrumbParentPages,
+ props.locale
+ )}
+ >
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>
+ {props.locale === "en"
+ ? `${pageData.scTitleEn} - Service Canada Labs`
+ : `${pageData.scTitleFr} - Laboratoires de Service Canada`}
+ </title>
+ <meta
+ name="description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link
+ rel="canonical"
+ href={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta
+ name="keywords"
+ content={
+ props.locale === "en"
+ ? pageData.scKeywordsEn
+ : pageData.scKeywordsFr
+ }
+ />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ name="dcterms.title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-07-20" />
+
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta
+ name="dcterms.description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={pageData.scSubject}
+ />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="og:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ property="og:image"
+ content={pageData.scFragments[0].scImageEn._publishUrl}
+ />
+ <meta
+ property="og:image:alt"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[0].scImageAltTextEn
+ : pageData.scFragments[0].scImageAltTextFr
+ }
+ />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ property="twitter:image"
+ content={pageData.scFragments[0].scImageEn._publishUrl}
+ />
+ <meta
+ property="twitter:image:alt"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[0].scImageAltTextEn
+ : pageData.scFragments[0].scImageAltTextFr
+ }
+ />
+ </Head>
+
+ <div className="layout-container">
+ <section aria-labelledby="pageMainTitle">
+ <div className="flex flex-col break-words lg:grid lg:grid-cols-2">
+ <div className="col-span-2">
+ <Heading
+ tabIndex="-1"
+ id="pageMainTitle"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[0].content[0]
+ .value
+ : pageData.scFragments[2].scContentFr.json[0].content[0]
+ .value
+ }
+ />
+ </div>
+ <div className="hidden lg:grid row-span-2 row-start-2 col-start-2 p-0 mx-4">
+ <div className="flex justify-center">
+ <div className="object-fill max-w-350px">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[0].scImageEn._publishUrl
+ : pageData.scFragments[0].scImageFr._publishUrl
+ }
+ alt={
+ props.locale === "en"
+ ? pageData.scFragments[0].scImageAltTextEn
+ : pageData.scFragments[0].scImageAltTextFr
+ }
+ width={468}
+ height={462}
+ />
+ </div>
+ </div>
+ </div>
+ <p className="row-start-2 font-body text-lg mb-4">
+ {props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[1].content[0].value
+ : pageData.scFragments[2].scContentFr.json[1].content[0]
+ .value}
+ </p>
+ <div className="row-start-3">
+ <ProjectInfo
+ locale={props.locale}
+ termStarted={
+ props.locale === "en"
+ ? filteredDictionary[2].scTermEn
+ : filteredDictionary[2].scTermFr
+ }
+ termStage={
+ props.locale === "en"
+ ? filteredDictionary[1].scTermEn
+ : filteredDictionary[1].scTermFr
+ }
+ termSummary={
+ props.locale === "en"
+ ? filteredDictionary[3].scTermEn
+ : filteredDictionary[3].scTermFr
+ }
+ dateStarted={
+ pageData.scFragments[2].scContentEn.json[2].content[0].value
+ }
+ term={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[0].content[0]
+ .value + " "
+ : pageData.scFragments[1].scContentFr.json[0].content[0]
+ .value + " "
+ }
+ definition={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[0].content[1]
+ .value
+ : pageData.scFragments[1].scContentFr.json[0].content[1]
+ .value
+ }
+ information={
+ props.locale === "en"
+ ? pageData.scFragments[1].scTitleEn
+ : pageData.scFragments[1].scTitleFr
+ }
+ stage={
+ props.locale === "en"
+ ? stageDictionary.en[pageData.scLabProjectStage]
+ : stageDictionary.fr[pageData.scLabProjectStage]
+ }
+ summary={
+ props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[4].content[0]
+ .value
+ : pageData.scFragments[2].scContentFr.json[4].content[0]
+ .value
+ }
+ />
+ </div>
+ </div>
+ </section>
+ <div className="grid grid-cols-12">
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[0].content[0].value
+ : pageData.scFragments[3].scContentFr.json[0].content[0].value}
+ </h2>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[1].content[0].value
+ : pageData.scFragments[3].scContentFr.json[1].content[0].value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[2].content[0].value
+ : pageData.scFragments[3].scContentFr.json[2].content[0].value}
+ </p>
+ <ul className="col-span-12 xl:col-span-8">
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[3].content[0]
+ .content[0].value
+ : pageData.scFragments[3].scContentFr.json[3].content[0]
+ .content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[3].content[1]
+ .content[0].value
+ : pageData.scFragments[3].scContentFr.json[3].content[1]
+ .content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[3].content[2]
+ .content[0].value
+ : pageData.scFragments[3].scContentFr.json[3].content[2]
+ .content[0].value}
+ </li>
+ </ul>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[4].content[0].value
+ : pageData.scFragments[3].scContentFr.json[4].content[0].value}
+ </p>
+ <div id="feature-section" className="col-span-12">
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[4].scContentEn.json[0].content[0].value
+ : pageData.scFragments[4].scContentFr.json[0].content[0]
+ .value}
+ </h2>
+ <div id="feature-1" className="grid grid-cols-12 gap-x-6 mb-9">
+ <div className="mb-6 object-fill col-span-12 row-start-1 xl:row-start-1 xl:col-span-8">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scImageEn._publishUrl
+ : pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scImageFr._publishUrl
+ }
+ alt={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scImageAltTextEn
+ : pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scImageAltTextFr
+ }
+ className="w-full"
+ />
+ </div>
+ <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
+ <div className="py-4 pl-4 border-l-4 border-multi-blue-blue60f">
+ <h3 className="mb-2">
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scContentEn
+ .json[0].content[0].value
+ : pageData.scFragments[4].scFragments[0].scContentFr
+ .json[0].content[0].value}
+ </h3>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scContentEn
+ .json[1].content[0].value
+ : pageData.scFragments[4].scFragments[0].scContentFr
+ .json[1].content[0].value}
+ </p>
+ <ul>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scContentEn
+ .json[2].content[0].content[0].value
+ : pageData.scFragments[4].scFragments[0].scContentFr
+ .json[2].content[0].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scContentEn
+ .json[2].content[1].content[0].value
+ : pageData.scFragments[4].scFragments[0].scContentFr
+ .json[2].content[1].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scContentEn
+ .json[2].content[2].content[0].value
+ : pageData.scFragments[4].scFragments[0].scContentFr
+ .json[2].content[2].content[0].value}
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div className="mb-6 col-span-12 xl:col-span-8 row-start-2 xl:row-start-2">
+ <Collapse
+ id="image-text-collapse-1"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scLongDescHeadingEn
+ : pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scLongDescHeadingFr
+ }
+ children={generateReactElements(
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scLongDescEn.json
+ : pageData.scFragments[4].scFragments[0].scFragments[0]
+ .scLongDescFr.json
+ )}
+ />
+ </div>
+ </div>
+ <div id="feature-2" className="grid grid-cols-12 gap-x-6 mb-9">
+ <div className="mb-6 object-fill col-span-12 row-start-1 xl:row-start-1 xl:col-span-8">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scImageEn._publishUrl
+ : pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scImageFr._publishUrl
+ }
+ alt={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scImageAltTextEn
+ : pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scImageAltTextFr
+ }
+ className="w-full"
+ />
+ </div>
+ <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
+ <div className="p-4 border-l-4 border-multi-blue-blue60f">
+ <h3 className="mb-2">
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scContentEn
+ .json[0].content[0].value
+ : pageData.scFragments[4].scFragments[1].scContentFr
+ .json[0].content[0].value}
+ </h3>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scContentEn
+ .json[1].content[0].value
+ : pageData.scFragments[4].scFragments[1].scContentFr
+ .json[1].content[0].value}
+ </p>
+ <ul>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scContentEn
+ .json[2].content[0].content[0].value
+ : pageData.scFragments[4].scFragments[1].scContentFr
+ .json[2].content[0].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scContentEn
+ .json[2].content[1].content[0].value
+ : pageData.scFragments[4].scFragments[1].scContentFr
+ .json[2].content[1].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scContentEn
+ .json[2].content[2].content[0].value
+ : pageData.scFragments[4].scFragments[1].scContentFr
+ .json[2].content[2].content[0].value}
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div className="mb-6 col-span-12 xl:col-span-8 row-start-2 xl:row-start-2">
+ <Collapse
+ id="image-text-collapse-2"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scLongDescHeadingEn
+ : pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scLongDescHeadingFr
+ }
+ children={generateReactElements(
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scLongDescEn.json
+ : pageData.scFragments[4].scFragments[1].scFragments[0]
+ .scLongDescFr.json
+ )}
+ />
+ </div>
+ </div>
+ <div id="feature-3" className="grid grid-cols-12 gap-x-6">
+ <div className="mb-6 object-fill col-span-12 row-start-1 xl:row-start-1 xl:col-span-8">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scImageEn._publishUrl
+ : pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scImageFr._publishUrl
+ }
+ alt={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scImageAltTextEn
+ : pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scImageAltTextFr
+ }
+ className="w-full"
+ />
+ </div>
+ <div className="col-span-12 row-start-3 xl:col-span-4 xl:row-start-1">
+ <div className="p-4 border-l-4 border-multi-blue-blue60f">
+ <h3 className="mb-2">
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[0].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[0].content[0].value}
+ </h3>
+ <p>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[1].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[1].content[0].value}
+ </p>
+ <ul>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[2].content[0].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[2].content[0].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[2].content[1].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[2].content[1].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[2].content[2].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[2].content[2].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[2].content[3].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[2].content[3].content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scContentEn
+ .json[2].content[4].content[0].value
+ : pageData.scFragments[4].scFragments[2].scContentFr
+ .json[2].content[4].content[0].value}
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div className="mb-6 col-span-12 xl:col-span-8 row-start-2 xl:row-start-2">
+ <Collapse
+ id="image-text-collapse-3"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scLongDescHeadingEn
+ : pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scLongDescHeadingFr
+ }
+ children={generateReactElements(
+ props.locale === "en"
+ ? pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scLongDescEn.json
+ : pageData.scFragments[4].scFragments[2].scFragments[0]
+ .scLongDescFr.json
+ )}
+ />
+ </div>
+ </div>
+ </div>
+ <section
+ id="BENEFITS-NAVIGATOR-HELP-DESIGN"
+ className="grid grid-cols-12 col-span-12"
+ >
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[5].scContentEn.json[0].content[0].value
+ : pageData.scFragments[5].scContentFr.json[0].content[0]
+ .value}
+ </h2>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[5].scContentEn.json[1].content[0].value
+ : pageData.scFragments[5].scContentFr.json[1].content[0]
+ .value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[5].scContentEn.json[2].content[0].value
+ : pageData.scFragments[5].scContentFr.json[2].content[0]
+ .value}
+ <a
+ className="underline underline-offset-4"
+ href={`mailto:${pageData.scFragments[5].scContentEn.json[2].content[1].value}`}
+ >
+ {pageData.scFragments[5].scContentEn.json[2].content[1].value}
+ </a>
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[5].scContentEn.json[3].content[0].value
+ : pageData.scFragments[5].scContentFr.json[3].content[0]
+ .value}
+ </p>
+ </section>
+ </div>
+
+ {/* Todo: add locale files and use i18next for translations */}
+ <h2>
+ {props.locale === "en"
+ ? "Project updates"
+ : "Mises à jour du projet"}
+ </h2>
+ <ul className="grid lg:grid-cols-12 gap-x-4 lg:gap-y-12 list-none ml-0">
+ {displayProjectUpdates}
+ </ul>
+ </div>
+
+ {/* <CTA
+ heading={
+ props.locale === "en"
+ ? pageData.scFragments[6].scTitleEn
+ : pageData.scFragments[6].scTitleFr
+ }
+ body={
+ props.locale === "en"
+ ? pageData.scFragments[6].scContentEn.json[0].content[0].value
+ : pageData.scFragments[6].scContentFr.json[0].content[0].value
+ }
+ ButtonProps={{
+ id: "cta-btn",
+ text:
+ props.locale === "en"
+ ? pageData.scFragments[6].scLabsButton[0].scTitleEn
+ : pageData.scFragments[6].scLabsButton[0].scTitleFr,
+ href:
+ props.locale === "en"
+ ? pageData.scFragments[6].scLabsButton[0].scDestinationURLEn
+ : pageData.scFragments[6].scLabsButton[0].scDestinationURLFr,
+ className:
+ "w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
+ }}
+ containerClass="layout-container my-4"
+ /> */}
+ </Layout>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ // get page data from AEM
+ const { data: pageData } = await aemServiceInstance.getFragment(
+ "benefitsNavigatorQuery"
+ );
+ // get dictionary
+ const { data: dictionary } = await aemServiceInstance.getFragment(
+ "dictionaryQuery"
+ );
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ pageData: pageData.scLabsPagev1ByPath,
+ updatesData: pageData.scLabsPagev1ByPath.item.scLabProjectUpdates,
+ dictionary: dictionary.dictionaryV1List,
+ ...(await serverSideTranslations(locale, ["common"])),
+ },
+ // revalidate: 10,
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 0% | +0/13 | +0% | +0/94 | +0% | +0/4 | +0% | +0/13 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { Layout } from "../../../components/organisms/Layout";
+import { ActionButton } from "../../../components//atoms/ActionButton";
+import { useEffect, useState } from "react";
+import aemServiceInstance from "../../../services/aemServiceInstance";
+import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
+import { CTA } from "@dts-stn/service-canada-design-system";
+import { Heading } from "@dts-stn/service-canada-design-system";
+import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+
+export default function MscaDashboard(props) {
+ const [pageData] = useState(props.pageData.item);
+ const [filteredDictionary] = useState(
+ props.dictionary.items.filter(
+ (item) =>
+ item.scId === "STARTED" ||
+ item.scId === "ENDED" ||
+ item.scId === "PROJECT-STAGE" ||
+ item.scId === "SUMMARY"
+ )
+ );
+ const stageDictionary = {
+ en: {
+ "gc:custom/decd-endc/project-stage/alpha": "Alpha",
+ "gc:custom/decd-endc/project-stage/beta": "Beta",
+ },
+ fr: {
+ "gc:custom/decd-endc/project-stage/alpha": "Alpha",
+ "gc:custom/decd-endc/project-stage/beta": "Bêta",
+ },
+ };
+
+ useEffect(() => {
+ if (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <Layout
+ locale={props.locale}
+ langUrl={
+ props.locale === "en" ? pageData.scPageNameFr : pageData.scPageNameEn
+ }
+ dateModifiedOverride={pageData.scDateModifiedOverwrite}
+ breadcrumbItems={createBreadcrumbs(
+ pageData.scBreadcrumbParentPages,
+ props.locale
+ )}
+ >
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>
+ {props.locale === "en"
+ ? `${pageData.scTitleEn} - Service Canada Labs`
+ : `${pageData.scTitleFr} - Laboratoires de Service Canada`}
+ </title>
+ <meta
+ name="description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link
+ rel="canonical"
+ href={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta
+ name="keywords"
+ content={
+ props.locale === "en"
+ ? pageData.scKeywordsEn
+ : pageData.scKeywordsFr
+ }
+ />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ name="dcterms.title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-07-20" />
+
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta
+ name="dcterms.description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={pageData.scSubject}
+ />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="og:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[0].content[0].value
+ : pageData.scFragments[0].scContentFr.json[0].content[0].value
+ }
+ />
+ {/* <meta
+ property="og:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ /> */}
+ <meta
+ property="og:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[1].content[0].value
+ : pageData.scFragments[0].scContentFr.json[1].content[0].value
+ }
+ />
+ {/* <meta
+ property="twitter:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ /> */}
+ <meta
+ property="twitter:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ </Head>
+
+ <div className="layout-container">
+ <section aria-labelledby="pageMainTitle">
+ <div className="flex flex-col break-words lg:grid lg:grid-cols-2">
+ <div className="col-span-2">
+ <Heading
+ tabIndex="-1"
+ id="pageMainTitle"
+ title={
+ props.locale === "en"
+ ? pageData.scTitleEn
+ : pageData.scTitleFr
+ }
+ />
+ </div>
+ <div className="hidden lg:grid row-span-2 row-start-2 col-start-2 p-0 mx-4">
+ <div className="flex justify-center">
+ <div className="object-fill h-auto w-auto max-w-450px">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[1].scImageEn._publishUrl
+ : pageData.scFragments[1].scImageFr._publishUrl
+ }
+ alt={
+ (props.locale === "en"
+ ? pageData.scFragments[1].scImageAltTextEn
+ : pageData.scFragments[1].scImageAltTextFr) ?? ""
+ }
+ width={468}
+ height={462}
+ />
+ </div>
+ </div>
+ </div>
+ <p className="row-start-2 font-body text-lg mb-4">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[1].content[0].value
+ : pageData.scFragments[0].scContentFr.json[1].content[0]
+ .value}
+ </p>
+ <div className="row-start-3">
+ <ProjectInfo
+ locale={props.locale}
+ termStarted={
+ props.locale === "en"
+ ? filteredDictionary[2].scTermEn
+ : filteredDictionary[2].scTermFr
+ }
+ termStage={
+ props.locale === "en"
+ ? filteredDictionary[1].scTermEn
+ : filteredDictionary[1].scTermFr
+ }
+ termSummary={
+ props.locale === "en"
+ ? filteredDictionary[3].scTermEn
+ : filteredDictionary[3].scTermFr
+ }
+ dateStarted={
+ pageData.scFragments[0].scContentEn.json[2].content[0].value
+ }
+ term={
+ props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[0].content[0]
+ .value
+ : pageData.scFragments[2].scContentFr.json[0].content[0]
+ .value
+ }
+ definition={
+ props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[0].content[1]
+ .value
+ : pageData.scFragments[2].scContentFr.json[0].content[1]
+ .value
+ }
+ information={
+ props.locale === "en"
+ ? pageData.scFragments[2].scTitleEn
+ : pageData.scFragments[2].scTitleFr
+ }
+ stage={
+ props.locale === "en"
+ ? stageDictionary.en[pageData.scLabProjectStage]
+ : stageDictionary.fr[pageData.scLabProjectStage]
+ }
+ summary={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[4].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[4].content[0]
+ .value
+ }
+ />
+ </div>
+ </div>
+ </section>
+ <section id="pageMainContent">
+ <div className="grid grid-cols-12">
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[0].content[0].value
+ : pageData.scFragments[3].scContentFr.json[0].content[0]
+ .value}
+ </h2>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[1].content[0].value
+ : pageData.scFragments[3].scContentFr.json[1].content[0]
+ .value}
+ </p>
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[2].content[0].value
+ : pageData.scFragments[3].scContentFr.json[2].content[0]
+ .value}
+ </h2>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[3].content[0].value
+ : pageData.scFragments[3].scContentFr.json[3].content[0]
+ .value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[4].content[0].value
+ : pageData.scFragments[3].scContentFr.json[4].content[0]
+ .value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[5].content[0].value
+ : pageData.scFragments[3].scContentFr.json[5].content[0]
+ .value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[6].content[0].value
+ : pageData.scFragments[3].scContentFr.json[6].content[0]
+ .value}
+ </p>
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[7].content[0].value
+ : pageData.scFragments[3].scContentFr.json[7].content[0]
+ .value}
+ </h2>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[8].content[0].value
+ : pageData.scFragments[3].scContentFr.json[8].content[0]
+ .value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[9].content[0].value
+ : pageData.scFragments[3].scContentFr.json[9].content[0]
+ .value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[10].content[0]
+ .value
+ : pageData.scFragments[3].scContentFr.json[10].content[0]
+ .value}
+ </p>
+ </div>
+ </section>
+ </div>
+ {/* <CTA
+ heading={
+ props.locale === "en"
+ ? pageData.scFragments[6].scTitleEn
+ : pageData.scFragments[6].scTitleFr
+ }
+ body={
+ props.locale === "en"
+ ? pageData.scFragments[6].scContentEn.json[0].content[0].value
+ : pageData.scFragments[6].scContentFr.json[0].content[0].value
+ }
+ ButtonProps={{
+ id: "cta-btn",
+ text:
+ props.locale === "en"
+ ? pageData.scFragments[6].scLabsButton[0].scTitleEn
+ : pageData.scFragments[6].scLabsButton[0].scTitleFr,
+ href:
+ props.locale === "en"
+ ? pageData.scFragments[6].scLabsButton[0].scDestinationURLEn
+ : pageData.scFragments[6].scLabsButton[0].scDestinationURLFr,
+ className:
+ "w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
+ }}
+ containerClass="layout-container my-4"
+ /> */}
+ </Layout>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ // get page data from AEM
+ const { data: pageData } = await aemServiceInstance.getFragment(
+ "mscadPageQuery"
+ );
+ // get dictionary
+ const { data: dictionary } = await aemServiceInstance.getFragment(
+ "dictionaryQuery"
+ );
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ pageData: pageData.scLabsPagev1ByPath,
+ dictionary: dictionary.dictionaryV1List,
+ ...(await serverSideTranslations(locale, ["common"])),
+ },
+ // revalidate: 10,
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 +479 +480 +481 +482 +483 +484 +485 +486 +487 +488 +489 +490 +491 +492 +493 +494 +495 +496 +497 +498 +499 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
+import { Layout } from "../../../components/organisms/Layout";
+import { ActionButton } from "../../../components/atoms/ActionButton";
+import { useEffect, useState } from "react";
+import aemServiceInstance from "../../../services/aemServiceInstance";
+import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
+import { CTA, Heading } from "@dts-stn/service-canada-design-system";
+import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+
+export default function OASUpdatePage(props) {
+ const { t } = useTranslation("common");
+ const [pageData] = useState(props.pageData);
+ const [dictionary] = useState(props.dictionary.items);
+
+ useEffect(() => {
+ if (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <Layout
+ locale={props.locale}
+ langUrl={
+ props.locale === "en" ? pageData.scPageNameFr : pageData.scPageNameEn
+ }
+ dateModifiedOverride={pageData.scDateModifiedOverwrite}
+ breadcrumbItems={createBreadcrumbs(
+ pageData.scBreadcrumbParentPages,
+ props.locale
+ )}
+ >
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>
+ {props.locale === "en"
+ ? `${pageData.scTitleEn} - Service Canada Labs`
+ : `${pageData.scTitleFr} - Laboratoires de Service Canada`}
+ </title>
+ <meta
+ name="description"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta
+ name="keywords"
+ content={
+ props.locale === "en"
+ ? pageData.scKeywordsEn
+ : pageData.scKeywordsFr
+ }
+ />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ name="dcterms.title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2023-07-07" />
+
+ <meta name="dcterms.modified" title="W3CDTF" content="2023-07-07" />
+ <meta
+ name="dcterms.description"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={pageData.scSubject}
+ />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="og:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[1].content[0].value
+ : pageData.scFragments[1].scContentFr.json[1].content[0].value
+ }
+ />
+ <meta
+ property="og:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="og:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[1].content[0].value
+ : pageData.scFragments[1].scContentFr.json[1].content[0].value
+ }
+ />
+ <meta
+ property="twitter:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="twitter:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ </Head>
+ <section className="layout-container mb-12">
+ <Heading
+ tabIndex="-1"
+ id="pageMainTitle"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[0].content[0].value
+ : pageData.scFragments[1].scContentFr.json[0].content[0].value
+ }
+ />
+ <div id="postedOnUpdatedOnSection" className="grid grid-cols-12">
+ <p
+ className={`col-span-6 sm:col-span-4 ${
+ props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
+ } font-bold`}
+ >
+ {props.locale === "en"
+ ? dictionary[9].scTermEn
+ : dictionary[9].scTermFr}
+ </p>
+ <p className="col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-0">
+ {pageData.scDateModifiedOverwrite}
+ </p>
+ <p
+ className={`row-start-2 col-span-6 sm:col-span-4 mt-0 ${
+ props.locale === "en" ? "lg:col-span-2" : "lg:col-span-3"
+ } font-bold`}
+ >
+ {props.locale === "en"
+ ? dictionary[4].scTermEn
+ : dictionary[4].scTermFr}
+ </p>
+ <p className="row-start-2 col-span-6 col-start-7 sm:col-start-5 lg:col-span-2 md:col-start-5 mt-auto">
+ {pageData.scDateModifiedOverwrite}
+ </p>
+ </div>
+ <div
+ id="mainContentSection"
+ className="grid grid-cols-12 pt-16 gap-x-2"
+ >
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[1].content[0].value
+ : pageData.scFragments[1].scContentFr.json[1].content[0].value}
+ </p>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[2].content[0].value
+ : pageData.scFragments[1].scContentFr.json[2].content[0].value}
+ </p>
+ <div className="hidden lg:grid col-start-9 col-span-4 row-start-1 row-span-2">
+ <div className="flex justify-center">
+ <div className="h-auto max-w-xs">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[0].scImageEn._publishUrl
+ : pageData.scFragments[0].scImageFr._publishUrl
+ }
+ alt={
+ props.locale === "en"
+ ? pageData.scFragments[0].scImageAltTextEn
+ : pageData.scFragments[0].scImageAltTextFr
+ }
+ width={468}
+ height={462}
+ />
+ </div>
+ </div>
+ </div>
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[3].content[0].value
+ : pageData.scFragments[1].scContentFr.json[3].content[0].value}
+ </h2>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[4].content[0].value
+ : pageData.scFragments[1].scContentFr.json[4].content[0].value}
+ </p>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[5].content[0].value
+ : pageData.scFragments[1].scContentFr.json[5].content[0].value}
+ </p>
+ <ul className="col-span-12 lg:col-span-8">
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[6].content[0]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[6].content[0]
+ .content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[6].content[1]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[6].content[1]
+ .content[0].value}
+ </li>
+ <li>
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[6].content[2]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[6].content[2]
+ .content[0].value}
+ </li>
+ </ul>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[7].content[0].value
+ : pageData.scFragments[1].scContentFr.json[7].content[0].value}
+ </p>
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[8].content[0].value
+ : pageData.scFragments[1].scContentFr.json[8].content[0].value}
+ </h2>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[9].content[0].value
+ : pageData.scFragments[1].scContentFr.json[9].content[0].value}
+ </p>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[10].content[0].value
+ : pageData.scFragments[1].scContentFr.json[10].content[0].value}
+ </p>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[11].content[0].value
+ : pageData.scFragments[1].scContentFr.json[11].content[0].value}
+ </p>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[12].content[0].value
+ : pageData.scFragments[1].scContentFr.json[12].content[0].value}
+ </p>
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[13].content[0].value
+ : pageData.scFragments[1].scContentFr.json[13].content[0].value}
+ </h2>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[14].content[0].value
+ : pageData.scFragments[1].scContentFr.json[14].content[0].value}
+ </p>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[15].content[0].value
+ : pageData.scFragments[1].scContentFr.json[15].content[0].value}
+ </p>
+ <ul className="col-span-12 lg:col-span-8">
+ <li className="text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[16].content[0]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[16].content[0]
+ .content[0].value}
+ </li>
+ <li className="text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[16].content[1]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[16].content[1]
+ .content[0].value}
+ </li>
+ </ul>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[17].content[0].value
+ : pageData.scFragments[1].scContentFr.json[17].content[0].value}
+ </p>
+ <ul className="col-span-12 lg:col-span-8">
+ <li className="text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[18].content[0]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[18].content[0]
+ .content[0].value}
+ </li>
+ <li className="text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[18].content[1]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[18].content[1]
+ .content[0].value}
+ </li>
+ <li className="text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[18].content[2]
+ .content[0].value
+ : pageData.scFragments[1].scContentFr.json[18].content[2]
+ .content[0].value}
+ </li>
+ </ul>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[19].content[0].value
+ : pageData.scFragments[1].scContentFr.json[19].content[0].value}
+ </p>
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[20].content[0].value
+ : pageData.scFragments[1].scContentFr.json[20].content[0].value}
+ </h2>
+ <p className="col-span-12 lg:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[1].scContentEn.json[21].content[0].value
+ : pageData.scFragments[1].scContentFr.json[21].content[0].value}
+ </p>
+ <ActionButton
+ id="feedback-btn"
+ style="secondary"
+ custom="col-span-12 mt-8"
+ href={
+ props.locale === "en"
+ ? pageData.scFragments[2].scDestinationURLEn
+ : pageData.scFragments[2].scDestinationURLFr
+ }
+ text={
+ props.locale === "en"
+ ? pageData.scFragments[2].scTitleEn
+ : pageData.scFragments[2].scTitleFr
+ }
+ ariaExpanded={props.ariaExpanded}
+ />
+ </div>
+ </section>
+ <CTA
+ heading={
+ props.locale === "en"
+ ? pageData.scFragments[3].scTitleEn
+ : pageData.scFragments[3].scTitleFr
+ }
+ body={
+ props.locale === "en"
+ ? pageData.scFragments[3].scContentEn.json[0].content[0].value
+ : pageData.scFragments[3].scContentFr.json[0].content[0].value
+ }
+ ButtonProps={{
+ id: "cta-btn",
+ text:
+ props.locale === "en"
+ ? pageData.scFragments[3].scLabsButton[0].scTitleEn
+ : pageData.scFragments[3].scLabsButton[0].scTitleFr,
+ href:
+ props.locale === "en"
+ ? pageData.scFragments[3].scLabsButton[0].scDestinationURLEn
+ : pageData.scFragments[3].scLabsButton[0].scDestinationURLFr,
+ className:
+ "w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
+ }}
+ containerClass="layout-container my-4"
+ />
+ </Layout>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export async function getStaticPaths() {
+ // Get pages data
+ const { data } = await aemServiceInstance.getFragment(
+ "oasBenefitsEstimatorArticlesQuery"
+ );
+ // Get paths for dynamic routes from the page name data
+ const paths = getAllUpdateIds(data.scLabsPagev1List.items);
+ // Remove characters preceding the page name itself i.e. change "/en/projects/oas-benefits-estimator/what-we-learned" to "what-we-learned"
+ paths.map((path) => {
+ path.locale === "en"
+ ? (path.params.id = path.params.id.slice(36))
+ : (path.params.id = path.params.id.slice(38));
+ });
+ return {
+ paths,
+ fallback: false,
+ };
+}
+
+export const getStaticProps = async ({ locale, params }) => {
+ // Get pages data
+ const { data } = await aemServiceInstance.getFragment(
+ "oasBenefitsEstimatorArticlesQuery"
+ );
+ // get dictionary
+ const { data: dictionary } = await aemServiceInstance.getFragment(
+ "dictionaryQuery"
+ );
+ const pages = data.scLabsPagev1List.items;
+ // Return page data that matches the current page being built
+ const pageData = pages.filter((page) => {
+ return (
+ page.scPageNameEn.slice(36) === params.id ||
+ page.scPageNameFr.slice(38) === params.id
+ );
+ });
+ return {
+ props: {
+ locale: locale,
+ pageData: pageData[0],
+ dictionary: dictionary.dictionaryV1List,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ ...(await serverSideTranslations(locale, ["common", "vc"])),
+ },
+ };
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ ++ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 +204 +205 +206 +207 +208 +209 +210 +211 +212 +213 +214 +215 +216 +217 +218 +219 +220 +221 +222 +223 +224 +225 +226 +227 +228 +229 +230 +231 +232 +233 +234 +235 +236 +237 +238 +239 +240 +241 +242 +243 +244 +245 +246 +247 +248 +249 +250 +251 +252 +253 +254 +255 +256 +257 +258 +259 +260 +261 +262 +263 +264 +265 +266 +267 +268 +269 +270 +271 +272 +273 +274 +275 +276 +277 +278 +279 +280 +281 +282 +283 +284 +285 +286 +287 +288 +289 +290 +291 +292 +293 +294 +295 +296 +297 +298 +299 +300 +301 +302 +303 +304 +305 +306 +307 +308 +309 +310 +311 +312 +313 +314 +315 +316 +317 +318 +319 +320 +321 +322 +323 +324 +325 +326 +327 +328 +329 +330 +331 +332 +333 +334 +335 +336 +337 +338 +339 +340 +341 +342 +343 +344 +345 +346 +347 +348 +349 +350 +351 +352 +353 +354 +355 +356 +357 +358 +359 +360 +361 +362 +363 +364 +365 +366 +367 +368 +369 +370 +371 +372 +373 +374 +375 +376 +377 +378 +379 +380 +381 +382 +383 +384 +385 +386 +387 +388 +389 +390 +391 +392 +393 +394 +395 +396 +397 +398 +399 +400 +401 +402 +403 +404 +405 +406 +407 +408 +409 +410 +411 +412 +413 +414 +415 +416 +417 +418 +419 +420 +421 +422 +423 +424 +425 +426 +427 +428 +429 +430 +431 +432 +433 +434 +435 +436 +437 +438 +439 +440 +441 +442 +443 +444 +445 +446 +447 +448 +449 +450 +451 +452 +453 +454 +455 +456 +457 +458 +459 +460 +461 +462 +463 +464 +465 +466 +467 +468 +469 +470 +471 +472 +473 +474 +475 +476 +477 +478 | + + + + + + + + + + + + +1x +1x +1x + + +12x + + + + + +1x + + + + + + + + + + +1x +1x + + + + + + + + + + + + + + + + + + + + + + + +1x +1x + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + | import Head from "next/head";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { Layout } from "../../../components/organisms/Layout";
+import { ActionButton } from "../../../components//atoms/ActionButton";
+import { useEffect, useState } from "react";
+import aemServiceInstance from "../../../services/aemServiceInstance";
+import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
+import { CTA } from "@dts-stn/service-canada-design-system";
+import { Heading } from "@dts-stn/service-canada-design-system";
+import Card from "../../../components/molecules/Card";
+import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
+
+export default function OasBenefitsEstimator(props) {
+ const [pageData] = useState(props.pageData.item);
+ const [updatesData] = useState(props.updatesData);
+ const [filteredDictionary] = useState(
+ props.dictionary.items.filter(
+ (item) =>
+ item.scId === "STARTED" ||
+ item.scId === "ENDED" ||
+ item.scId === "PROJECT-STAGE" ||
+ item.scId === "SUMMARY"
+ )
+ );
+ const stageDictionary = {
+ en: {
+ "gc:custom/decd-endc/project-stage/alpha": "Alpha",
+ "gc:custom/decd-endc/project-stage/beta": "Beta",
+ },
+ fr: {
+ "gc:custom/decd-endc/project-stage/alpha": "Alpha",
+ "gc:custom/decd-endc/project-stage/beta": "Bêta",
+ },
+ };
+
+ const displayProjectUpdates = updatesData.map((update) => (
+ <li key={update.scId} className="list-none ml-0 col-span-12 lg:col-span-4">
+ <Card
+ showImage
+ imgSrc={
+ props.locale === "en"
+ ? `https://www.canada.ca${update.scSocialMediaImageEn._path}`
+ : `https://www.canada.ca${update.scSocialMediaImageFr._path}`
+ }
+ imgAlt={
+ (props.locale === "en"
+ ? update.scSocialMediaImageAltTextEn
+ : update.scSocialMediaImageAltTextFr) ?? ""
+ }
+ title={props.locale === "en" ? update.scTitleEn : update.scTitleFr}
+ href={props.locale === "en" ? update.scPageNameEn : update.scPageNameFr}
+ description={`${
+ props.locale === "en"
+ ? props.dictionary.items[9].scTermEn
+ : props.dictionary.items[9].scTermFr
+ } ${update.scDateModifiedOverwrite}`}
+ />
+ </li>
+ ));
+
+ useEffect(() => {
+ Iif (props.adobeAnalyticsUrl) {
+ window.adobeDataLayer = window.adobeDataLayer || [];
+ window.adobeDataLayer.push({ event: "pageLoad" });
+ }
+ }, []);
+
+ return (
+ <>
+ <Layout
+ locale={props.locale}
+ langUrl={
+ props.locale === "en" ? pageData.scPageNameFr : pageData.scPageNameEn
+ }
+ dateModifiedOverride={pageData.scDateModifiedOverwrite}
+ breadcrumbItems={createBreadcrumbs(
+ pageData.scBreadcrumbParentPages,
+ props.locale
+ )}
+ >
+ <Head>
+ {props.adobeAnalyticsUrl ? (
+ <script src={props.adobeAnalyticsUrl} />
+ ) : (
+ ""
+ )}
+
+ {/* Primary HTML Meta Tags */}
+ <title>
+ {props.locale === "en"
+ ? `${pageData.scTitleEn} - Service Canada Labs`
+ : `${pageData.scTitleFr} - Laboratoires de Service Canada`}
+ </title>
+ <meta
+ name="description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta name="author" content="Service Canada" />
+ <link rel="icon" href="/favicon.ico" />
+ <link
+ rel="canonical"
+ href={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <link rel="schema.dcterms" href="http://purl.org/dc/terms/" />
+ <meta
+ name="keywords"
+ content={
+ props.locale === "en"
+ ? pageData.scKeywordsEn
+ : pageData.scKeywordsFr
+ }
+ />
+
+ {/* DCMI Meta Tags */}
+ <meta
+ name="dcterms.title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ name="dcterms.language"
+ content={props.locale === "en" ? "eng" : "fra"}
+ title="ISO639-2/T"
+ />
+ <meta
+ name="dcterms.creator"
+ content={
+ props.locale === "en"
+ ? "Employment and Social Development Canada"
+ : "Emploi et Développement social Canada"
+ }
+ />
+ <meta name="dcterms.accessRights" content="2" />
+ <meta
+ name="dcterms.service"
+ content="ESDC-EDSC_SCLabs-LaboratoireSC"
+ />
+ <meta name="dcterms.issued" title="W3CDTF" content="2021-07-20" />
+
+ <meta name="dcterms.modified" title="W3CDTF" content="2021-12-16" />
+ <meta
+ name="dcterms.description"
+ content={
+ props.locale === "en"
+ ? pageData.scDescriptionEn.json[0].content[0].value
+ : pageData.scDescriptionFr.json[0].content[0].value
+ }
+ />
+ <meta
+ name="dcterms.subject"
+ title="gccore"
+ content={pageData.scSubject}
+ />
+ <meta name="dcterms.spatial" content="Canada" />
+
+ {/* Open Graph / Facebook */}
+ <meta property="og:type" content="website" />
+ <meta property="og:locale" content={props.locale} />
+ <meta
+ property="og:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="og:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta
+ property="og:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[0].content[0].value
+ : pageData.scFragments[0].scContentFr.json[0].content[0].value
+ }
+ />
+ <meta
+ property="og:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="og:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+
+ {/* Twitter */}
+ <meta property="twitter:card" content="summary_large_image" />
+ <meta
+ property="twitter:url"
+ content={
+ "https://alpha.service.canada.ca" +
+ `${
+ props.locale === "en"
+ ? pageData.scPageNameEn
+ : pageData.scPageNameFr
+ }`
+ }
+ />
+ <meta
+ property="twitter:title"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ <meta name="twitter:creator" content="Service Canada" />
+ <meta
+ property="twitter:description"
+ content={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[1].content[0].value
+ : pageData.scFragments[0].scContentFr.json[1].content[0].value
+ }
+ />
+ <meta
+ property="twitter:image"
+ content={pageData.scSocialMediaImageEn._publishUrl}
+ />
+ <meta
+ property="twitter:image:alt"
+ content={
+ props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr
+ }
+ />
+ </Head>
+
+ <div className="layout-container">
+ <section aria-labelledby="pageMainTitle">
+ <div className="flex flex-col break-words lg:grid lg:grid-cols-2">
+ <div className="col-span-2">
+ <Heading
+ tabIndex="-1"
+ id="pageMainTitle"
+ title={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[0].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[0].content[0]
+ .value
+ }
+ />
+ </div>
+ <div className="hidden lg:grid row-span-2 row-start-2 col-start-2 p-0 mx-4">
+ <div className="flex justify-center">
+ <div className="object-fill h-auto w-auto max-w-450px">
+ <img
+ src={
+ props.locale === "en"
+ ? pageData.scFragments[1].scImageEn._publishUrl
+ : pageData.scFragments[1].scImageFr._publishUrl
+ }
+ alt={
+ (props.locale === "en"
+ ? pageData.scFragments[1].scImageAltTextEn
+ : pageData.scFragments[1].scImageAltTextFr) ?? ""
+ }
+ width={468}
+ height={462}
+ />
+ </div>
+ </div>
+ </div>
+ <p className="row-start-2 font-body text-lg mb-4">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[1].content[0].value
+ : pageData.scFragments[0].scContentFr.json[1].content[0]
+ .value}
+ </p>
+ <div className="row-start-3">
+ <ProjectInfo
+ locale={props.locale}
+ termStarted={
+ props.locale === "en"
+ ? filteredDictionary[2].scTermEn
+ : filteredDictionary[2].scTermFr
+ }
+ termStage={
+ props.locale === "en"
+ ? filteredDictionary[1].scTermEn
+ : filteredDictionary[1].scTermFr
+ }
+ termSummary={
+ props.locale === "en"
+ ? filteredDictionary[3].scTermEn
+ : filteredDictionary[3].scTermFr
+ }
+ dateStarted={
+ pageData.scFragments[0].scContentEn.json[2].content[0].value
+ }
+ term={
+ props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[0].content[0]
+ .value
+ : pageData.scFragments[2].scContentFr.json[0].content[0]
+ .value
+ }
+ definition={
+ props.locale === "en"
+ ? pageData.scFragments[2].scContentEn.json[0].content[1]
+ .value
+ : pageData.scFragments[2].scContentFr.json[0].content[1]
+ .value
+ }
+ information={
+ props.locale === "en"
+ ? pageData.scFragments[2].scTitleEn
+ : pageData.scFragments[2].scTitleFr
+ }
+ stage={
+ props.locale === "en"
+ ? stageDictionary.en[pageData.scLabProjectStage]
+ : stageDictionary.fr[pageData.scLabProjectStage]
+ }
+ summary={
+ props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[4].content[0]
+ .value
+ : pageData.scFragments[0].scContentFr.json[4].content[0]
+ .value
+ }
+ />
+ </div>
+ </div>
+ </section>
+ <div className="grid grid-cols-12">
+ <h2 className="col-span-12 text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[5].content[0].value
+ : pageData.scFragments[0].scContentFr.json[5].content[0].value}
+ </h2>
+ <ActionButton
+ id="try-btn"
+ style="primary"
+ custom="col-span-12"
+ href={
+ props.locale === "en"
+ ? pageData.scFragments[4].scDestinationURLEn
+ : pageData.scFragments[4].scDestinationURLFr
+ }
+ text={
+ props.locale === "en"
+ ? pageData.scFragments[4].scTitleEn
+ : pageData.scFragments[4].scTitleFr
+ }
+ ariaExpanded={props.ariaExpanded}
+ />
+ <h2 className="col-span-12">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[6].content[0].value
+ : pageData.scFragments[0].scContentFr.json[6].content[0].value}
+ </h2>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[7].content[0].value
+ : pageData.scFragments[0].scContentFr.json[7].content[0].value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[8].content[0].value
+ : pageData.scFragments[0].scContentFr.json[8].content[0].value}
+ </p>
+ <p className="col-span-12 xl:col-span-8">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[9].content[0].value
+ : pageData.scFragments[0].scContentFr.json[9].content[0].value}
+ </p>
+ </div>
+ <h2 className="text-[20px]">
+ {props.locale === "en"
+ ? pageData.scFragments[0].scContentEn.json[10].content[0].value
+ : pageData.scFragments[0].scContentFr.json[10].content[0].value}
+ </h2>
+ <div className="grid md:flex">
+ <ActionButton
+ id="feedback-btn-2"
+ style="secondary"
+ href={
+ props.locale === "en"
+ ? pageData.scFragments[5].scDestinationURLEn
+ : pageData.scFragments[5].scDestinationURLFr
+ }
+ text={
+ props.locale === "en"
+ ? pageData.scFragments[5].scTitleEn
+ : pageData.scFragments[5].scTitleFr
+ }
+ ariaExpanded={props.ariaExpanded}
+ />
+ </div>
+ <h2>
+ {props.locale === "en"
+ ? props.dictionary.items[11].scTermEn
+ : props.dictionary.items[11].scTermFr}
+ </h2>
+ <ul className="grid lg:grid-cols-12 gap-x-4 lg:gap-y-12 list-none ml-0 mb-12">
+ {displayProjectUpdates}
+ </ul>
+ </div>
+
+ <CTA
+ heading={
+ props.locale === "en"
+ ? pageData.scFragments[6].scTitleEn
+ : pageData.scFragments[6].scTitleFr
+ }
+ body={
+ props.locale === "en"
+ ? pageData.scFragments[6].scContentEn.json[0].content[0].value
+ : pageData.scFragments[6].scContentFr.json[0].content[0].value
+ }
+ ButtonProps={{
+ id: "cta-btn",
+ text:
+ props.locale === "en"
+ ? pageData.scFragments[6].scLabsButton[0].scTitleEn
+ : pageData.scFragments[6].scLabsButton[0].scTitleFr,
+ href:
+ props.locale === "en"
+ ? pageData.scFragments[6].scLabsButton[0].scDestinationURLEn
+ : pageData.scFragments[6].scLabsButton[0].scDestinationURLFr,
+ className:
+ "w-fit bg-[#26374A] mt-4 text-white visited:text-white hover:bg-[#1C578A] hover:no-underline hover:text-white active:bg-[#16446C]",
+ }}
+ containerClass="layout-container my-4"
+ />
+ </Layout>
+ {props.adobeAnalyticsUrl ? (
+ <script type="text/javascript">_satellite.pageBottom()</script>
+ ) : (
+ ""
+ )}
+ </>
+ );
+}
+
+export const getStaticProps = async ({ locale }) => {
+ // get page data from AEM
+ const { data: pageData } = await aemServiceInstance.getFragment(
+ "oasBenefitsEstimatorQuery"
+ );
+ // get dictionary
+ const { data: dictionary } = await aemServiceInstance.getFragment(
+ "dictionaryQuery"
+ );
+
+ return {
+ props: {
+ locale: locale,
+ adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
+ pageData: pageData.scLabsPagev1ByPath,
+ updatesData: pageData.scLabsPagev1ByPath.item.scLabProjectUpdates,
+ dictionary: dictionary.dictionaryV1List,
+ ...(await serverSideTranslations(locale, ["common"])),
+ },
+ // revalidate: 10,
+ };
+};
+ |