- 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,
- };
-};
- |