- 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 | - - - -3x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - | import PropTypes from "prop-types";
-import { HelpIcon } from "../design-system/HelpIcon";
-
-export function ProjectInfo(props) {
- 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 && props.dateStarted.substring(0, 10)}
- </p>
- <strong className="font-body col-span-1">{props.termEnded}</strong>
- <p className="col-span-2">
- {props.dateEnded && 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% | -2/2 | -100% | -4/4 | -100% | -1/1 | -100% | -2/2 | -
| 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. -
- -| 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 | - - - -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import PropTypes from "prop-types";
-import { Image } from "./Image";
-
-export function Button(props) {
- const style = "btn-" + props.styling;
- return props.href === "no ref" ? (
- <button
- className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ${props.className} `}
- onClick={props.onClick}
- type={props.type}
- id={props.id}
- disabled={props.disabled}
- {...props.attributes}
- alt={props.iconAltText}
- >
- {props.icon && !props.iconEnd ? (
- <span className="grid place-items-center h-8 w-8">
- <Image className="pr-2" src={props.icon} alt={props.iconAltText} />
- </span>
- ) : undefined}
- {props.text}
- {props.children}
- {props.icon && props.iconEnd ? (
- <span className="grid place-items-center h-8 w-8">
- <Image className="pl-2" src={props.icon} alt={props.iconAltText} />
- </span>
- ) : undefined}
- </button>
- ) : (
- <a
- href={props.href}
- className={`flex flex-row ${
- props.styling !== "none" ? "btn-link" : ""
- } focus:ring focus:ring-offset-4 ${props.className}`}
- onClick={props.onClick}
- id={props.id}
- disabled={props.disabled}
- role="button"
- >
- {props.icon && !props.iconEnd ? (
- <Image
- className="h-8 w-8 pr-2"
- src={props.icon}
- alt={props.iconAltText}
- />
- ) : undefined}
- {props.text}
- {props.children}
- {props.icon && props.iconEnd ? (
- <div className="grid place-items-center h-8 w-8">
- <Image
- className="pl-5 pb-3"
- src={props.icon}
- alt={props.iconAltText}
- />
- </div>
- ) : undefined}
- </a>
- );
-}
-
-Button.defaultProps = {
- id: "btn1",
- styling: "supertask",
- text: "default",
- href: "no ref",
-};
-
-Button.propTypes = {
- /**
- * Identify which button being clicked
- */
- id: PropTypes.string.isRequired,
-
- /**
- * 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
- */
- styling: PropTypes.oneOf([
- "supertask",
- "primary",
- "secondary",
- "danger",
- "link",
- "none",
- ]),
-
- /**
- * The text that the button will display
- */
- text: PropTypes.string.isRequired,
-
- /**
- * This will add a img inside the button when needed
- */
- icon: PropTypes.string,
-
- /**
- * Alt text for icon added to button
- */
- iconAltText: PropTypes.string,
-
- /**
- * This is for placing an icon at the end of the component
- */
- iconEnd: PropTypes.bool,
-
- /**
- * Use when button redirects to a new page.
- * Automatically applies the Link styling
- */
- href: PropTypes.string,
-
- /**
- * the type of the button
- */
- type: PropTypes.oneOf(["submit", "reset", "button"]),
-
- /**
- * Callback for a click event on the button
- */
- onClick: PropTypes.func,
-
- /**
- * bool to disable a button
- */
- disabled: PropTypes.bool,
-
- /**
- * css overrides for button
- */
- className: PropTypes.string,
-
- /**
- * additional attributes for button
- */
- attributes: PropTypes.object,
-
- /**
- * any other elements you want to add to the button
- */
- children: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.element,
- PropTypes.arrayOf(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 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 | - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { Button } from "./Button";
-import { Link } from "./Link";
-import { Image } from "./Image";
-
-export function CTA({
- heading,
- body,
- ButtonProps,
- LinkProps,
- containerClass = "",
-}) {
- return (
- <div className="bg-multi-blue-blue2 p-3">
- <div className={`flex flex-row ${containerClass}`}>
- <div className="flex flex-col w-[60px] shrink-0">
- <Image alt="icon" src="/comment_bubble.svg" className="w-[60px]" />
- <div className="flex-grow divide-x-2 divide-multi-blue-blue60a flex flex-row justify-center mt-3">
- <div></div>
- <div></div>
- </div>
- </div>
- <div className="pt-0 pl-5">
- <h3 className={`leading-[40px] text-multi-neutrals-grey100`}>
- {heading}
- </h3>
- <p className="body">{body}</p>
- <Button
- styling="primary"
- className="my-3"
- type="button"
- {...ButtonProps}
- />
- {LinkProps && <Link {...LinkProps} />}
- </div>
- </div>
- </div>
- );
-}
- |
- 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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import PropTypes from "prop-types"; - -export function Collapse(props) { - const { id, title, children } = props; - return ( - <details - key={id} - id={id} - className="mb-[5px] text-multi-neutrals-grey100 leading-[33px] text-mobileh5 font-body" - > - <summary - key={`summary-${id}`} - className="text-multi-blue-blue60d hover:hover:text-multi-blue-blue50b hover:underline border border-multi-neutrals-grey40 rounded px-[15px] py-[5px] cursor-pointer select-none outline-none" - > - {title} - </summary> - <div className="border border-multi-neutrals-grey40 rounded-b px-[18px] py-[5px] cursor-pointer select-none outline-none"> - {children} - </div> - </details> - ); -} - -Collapse.defaultProps = { - id: "defaultAccordion", -}; - -Collapse.propTypes = { - /** - * component id - */ - id: PropTypes.string, - - /** - * Title of the collapsible header - */ - title: PropTypes.string, - - /** - * code passed in to fill the expanded area. - */ - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.element, - PropTypes.arrayOf(PropTypes.element), - ]), - - /** - * Test id for unit test - */ - 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 -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 | - - -1x -1x -1x -1x - - - - - - - - - - -1x - - -1x - - - - - - - - -1x - - - - - - - -1x - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import PropTypes from "prop-types";
-
-export function ContextualAlert(props) {
- const warning_img = "/warning_img.svg";
- const danger_img = "/danger_img.svg";
- const info_img = "/info_img.svg";
- const success_img = "/success_img.svg";
-
- const {
- message_heading,
- message_body,
- id,
- type,
- alert_icon_id,
- alert_icon_alt_text,
- asHtml,
- whiteBG,
- } = props;
-
- const alert_type =
- type === "warning"
- ? warning_img
- : type === "danger"
- ? danger_img
- : type === "info"
- ? info_img
- : success_img;
-
- const alert_color =
- type === "warning"
- ? "border-specific-orange-orange50"
- : type === "danger"
- ? "border-specific-red-red50b"
- : type === "info"
- ? "border-specific-cyan-cyan50"
- : "border-specific-green-green50a";
-
- let white_BG = whiteBG ? "bg-multi-neutrals-white" : " ";
-
- return (
- <div
- id={id}
- className={`relative min-w-[290px] sm:pl-[24px] pl-[16px] ${white_BG}`}
- >
- <div className="absolute top-3 sm:left-3.5 left-1.5 bg-multi-neutrals-white py-4px">
- {/* change back to image component once fixed */}
- <img id={alert_icon_id} src={alert_type} alt={alert_icon_alt_text} />
- </div>
- <div
- className={`overflow-auto border-l-6 ${alert_color} pl-[24px] py-[17px] leading-8`}
- >
- {asHtml ? (
- <h3
- className="leading-heading3 ml-1"
- dangerouslySetInnerHTML={{ __html: message_heading }}
- />
- ) : (
- <h3 className="leading-heading3 ml-1">{message_heading}</h3>
- )}
- {asHtml ? (
- <div
- className="font-body ml-0.5 text-lg"
- dangerouslySetInnerHTML={{ __html: message_body }}
- />
- ) : (
- <div className="font-body ml-0.5 text-lg">{message_body}</div>
- )}
- </div>
- </div>
- );
-}
-
-ContextualAlert.propTypes = {
- /**
- * component id
- */
- id: PropTypes.string.isRequired,
-
- /**
- * alert type
- */
- type: PropTypes.oneOf(["warning", "info", "success", "danger"]).isRequired,
-
- /**
- * id for the alert icon
- */
- alert_icon_id: PropTypes.string.isRequired,
-
- /**
- * Alternate text for the alert icon
- */
- alert_icon_alt_text: PropTypes.string.isRequired,
-
- /**
- * heading text
- */
- message_heading: PropTypes.string.isRequired,
-
- /**
- * body text
- */
- message_body: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.element,
- PropTypes.arrayOf(PropTypes.element),
- ]).isRequired,
-
- /**
- * HTML toggle. Determines if text is parsed as plain text or HTML.
- */
- asHtml: PropTypes.bool,
-
- /**
- * If true the background will be white, default is transparent.
- */
- whiteBG: 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 -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 | - - - - -3x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -8x - -7x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -3x - - - - - -3x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable no-prototype-builtins */
-import PropTypes from "prop-types";
-import { MainBand } from "./MainBand";
-import { SubFooterBand } from "./SubFooterBand";
-
-let landscapeLinkKeys = [
- "contacts",
- "departments",
- "about",
- "jobs",
- "taxes",
- "canadaAndWorld",
- "immigration",
- "environment",
- "finance",
- "travel",
- "nationalSecurity",
- "innovation",
- "business",
- "culture",
- "indigenous",
- "benefit",
- "policing",
- "veterans",
- "health",
- "transport",
- "youth",
-];
-
-export function Footer(props) {
- const {
- error,
- lang,
- id,
- isAuthenticated,
- brandLinks,
- target,
- onClick,
- btnLink,
- } = props;
-
- return (
- <footer id={id}>
- <div
- className="bg-multi-blue-blue70 bg-no-repeat bg-clip-border sm:bg-right-bottom bg-bottom"
- style={{
- backgroundImage: `url(/footer_bg_img.svg)`,
- }}
- >
- <section className="lg:container mx-auto px-6">
- <MainBand
- lang={lang}
- landscapeLinks={landscapeLinkKeys}
- target={target}
- />
- </section>
- </div>
- <SubFooterBand
- lang={lang}
- isAuthenticated={isAuthenticated}
- container="container"
- brandLinks={brandLinks}
- onClick={onClick}
- target={target}
- logo="/wmms-blk.svg"
- error={error}
- btnLink={btnLink}
- />
- </footer>
- );
-}
-
-Footer.defaultProps = {
- lang: "en",
- contactLink: "https://www.canada.ca/en/contact.html",
- withMainBand: true,
-};
-
-Footer.propTypes = {
- /**
- * id of this component
- */
- id: PropTypes.string.isRequired,
- /**
- * isAuthenticated: bool to switch between authenticated and non authenticated menus
- **/
- isAuthenticated: PropTypes.bool,
- /**
- * Switch between english and french footer. Pass in "en" or "fr"
- */
- lang: PropTypes.oneOf(["en", "fr"]),
- /**
- * Add the path Link to the top of your page for the "to the Top" button in mobile
- */
- btnLink: PropTypes.string.isRequired,
-
- /**
- * containerClass: Customized container class name. If pass a existing class name, then 'ds-container' will be
- * replaced by the passed in class name.
- **/
- containerClass: PropTypes.string,
-
- /**
- * If true will display the error page version of the footer component
- */
- error: PropTypes.bool,
-
- /**
- * Allow user to pass in their own contact link
- */
- contactLink: PropTypes.string,
-
- /**
- * List of links to display on the footer
- */
- brandLinks: PropTypes.arrayOf(
- PropTypes.shape({
- id: PropTypes.string,
- text: PropTypes.string,
- href: PropTypes.string,
- })
- ),
-
- /**
- * Specifies where to open the linked document
- */
- target: PropTypes.string,
-
- /**
- * Handle onclick on the footer media link
- */
- onClick: PropTypes.func,
-
- /**
- * List of menu items to display in dropdown with links
- */
- contextualBandLinks: PropTypes.arrayOf(
- PropTypes.shape({
- key: PropTypes.string,
- text: PropTypes.string,
- 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 -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 | - - -2x - -2x - - - - - - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - - - - - - - - - - | import PropTypes from "prop-types";
-
-export function Heading(props) {
- const { title, fromLink, fromText, id, className } = props;
-
- return (
- <>
- <h1
- className={`border-b-[1px] border-b-multi-red-red50a pb-2 leading-heading1 ${className}`}
- id={id}
- >
- {title}
- </h1>
- {fromLink && fromText && (
- <p className="">
- <strong>From: </strong>
- <a
- href={fromLink}
- className="underline text-multi-blue-blue70b font-body lg:text-browserh5 font-bold text-mobileh5 leading-[33px] hover:text-multi-blue-blue50b"
- >
- {fromText}
- </a>
- </p>
- )}
- </>
- );
-}
-
-Heading.propTypes = {
- /**
- * The text / title that will be displayed as heading
- */
- title: PropTypes.string.isRequired,
- /**
- * Link that should be dispayed under the main heading level
- */
- fromLink: PropTypes.string,
- /**
- * Text that will be displyed as text link
- */
- fromText: PropTypes.string,
- /**
- * css overrides for button
- */
- className: PropTypes.string,
- /**
- * To identify the heading element
- */
- id: PropTypes.string.isRequired,
- /**
- * Test id for unit test
- */
- 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 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 | - - - -2x -3x -3x -3x - -3x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { useState } from "react";
-import { Modal } from "react-bootstrap";
-import { Button } from "./Button";
-
-export const HelpIcon = ({ title, body, lang }) => {
- const [showModal, setShowModal] = useState(false);
- const handleClose = () => setShowModal(false);
- const handleShow = () => setShowModal(true);
-
- return (
- <>
- <button
- onClick={handleShow}
- className="info"
- aria-label={`Help button ${title}`}
- aria-expanded={showModal}
- >
- <svg
- width="26"
- height="26"
- viewBox="0 0 26 26"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- className="help-icon"
- >
- <path d="M26 13C26 20.1813 20.1792 26 13 26C5.8208 26 0 20.1813 0 13C0 5.8229 5.8208 0 13 0C20.1792 0 26 5.8229 26 13ZM13.3489 4.29839C10.4922 4.29839 8.67016 5.50178 7.23943 7.64054C7.05407 7.91763 7.11608 8.29133 7.38175 8.49277L9.20065 9.87193C9.47349 10.0788 9.86223 10.0296 10.0742 9.76069C11.0106 8.57298 11.6527 7.88424 13.078 7.88424C14.1489 7.88424 15.4735 8.57345 15.4735 9.61187C15.4735 10.3969 14.8254 10.8001 13.768 11.3929C12.5349 12.0841 10.9032 12.9445 10.9032 15.0968V15.3065C10.9032 15.6538 11.1849 15.9355 11.5323 15.9355H14.4677C14.8151 15.9355 15.0968 15.6538 15.0968 15.3065V15.2366C15.0968 13.7446 19.4573 13.6825 19.4573 9.64516C19.4573 6.60473 16.3035 4.29839 13.3489 4.29839ZM13 17.2984C11.6704 17.2984 10.5887 18.3801 10.5887 19.7097C10.5887 21.0392 11.6704 22.121 13 22.121C14.3296 22.121 15.4113 21.0392 15.4113 19.7097C15.4113 18.3801 14.3296 17.2984 13 17.2984Z" />
- </svg>
- </button>
-
- {showModal && (
- <div className="modal-bg">
- <Modal show={showModal} onHide={handleClose} className="modal">
- <Modal.Header className="modal-header">
- <h2 className="modal-title">{title}</h2>
- <button onClick={handleClose} className="modal-exit">
- <svg
- width="17"
- height="17"
- viewBox="0 0 17 17"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- className="exit-icon"
- >
- <path d="M11.3775 8.25L16.0683 3.55922C16.6439 2.98359 16.6439 2.05031 16.0683 1.47422L15.0258 0.431719C14.4502 -0.143906 13.5169 -0.143906 12.9408 0.431719L8.25 5.1225L3.55922 0.431719C2.98359 -0.143906 2.05031 -0.143906 1.47422 0.431719L0.431719 1.47422C-0.143906 2.04984 -0.143906 2.98312 0.431719 3.55922L5.1225 8.25L0.431719 12.9408C-0.143906 13.5164 -0.143906 14.4497 0.431719 15.0258L1.47422 16.0683C2.04984 16.6439 2.98359 16.6439 3.55922 16.0683L8.25 11.3775L12.9408 16.0683C13.5164 16.6439 14.4502 16.6439 15.0258 16.0683L16.0683 15.0258C16.6439 14.4502 16.6439 13.5169 16.0683 12.9408L11.3775 8.25Z" />
- </svg>
- </button>
- </Modal.Header>
- <Modal.Body>
- <p
- className="modal-body"
- dangerouslySetInnerHTML={{ __html: body }}
- />
- </Modal.Body>
- <Modal.Footer>
- <Button
- onClick={handleClose}
- styling="primary"
- text={lang === "en" ? "Close" : "Fermer"}
- className="modal-close"
- />
- </Modal.Footer>
- </Modal>
- </div>
- )}
- </>
- );
-};
- |
- 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 | - - -8x - -8x - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - | import PropTypes from "prop-types";
-
-export function Image(props) {
- const { src, alt, rounded = "", className = "" } = props;
-
- return (
- <>
- <img src={src} alt={alt} className={`${className} ${rounded}`} />
- </>
- );
-}
-
-Image.propTypes = {
- /**
- * The text that the image tag will display
- */
- id: PropTypes.string,
-
- /**
- * Alternate text will be displayed in place of an image.
- */
- alt: PropTypes.string,
-
- /**
- * Identify source of image
- */
- src: PropTypes.string.isRequired,
-
- /**
- * css overrides for image
- */
- className: PropTypes.string,
-
- /**
- * Enables rounded corners for image
- */
- rounded: 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 | - - - - -175x -175x - - - - - - - - - -28x - -28x - -147x - -147x - - - - - - - - - - - - - - -175x - - - - - -175x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -3x - - - - -3x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /* eslint-disable jsx-a11y/anchor-is-valid */
-import PropTypes from "prop-types";
-
-export function Link(props) {
- //Styling for links based on Figma Design
- let basicStyle = "";
- switch (props.linkStyle) {
- case "basicStyleWithEmphasis":
- basicStyle =
- "underline text-multi-blue-blue70b font-body text-browserh5 font-bold text-mobileh5 leading-33px hover:text-multi-blue-blue50b";
- break;
- case "titleLink":
- basicStyle =
- "underline text-multi-blue-blue70b font-header text-browserh5 leading-23px font-bold hover:text-multi-blue-blue50b";
- break;
- case "smfooterBlue":
- basicStyle =
- "text-multi-blue-blue70b font-body leading-20px text-browserh7 hover:underline";
- break;
- case "smfooterWhite":
- basicStyle =
- "text-multi-neutrals-white font-body text-browserh7 leading-20px font-regular hover:text-multi-neutrals-white hover:underline focus:ring-1 focus:ring-white";
- break;
- case "smBreadcrumbs":
- basicStyle =
- "text-multi-blue-blue70b font-body text-browserh8 leading-23px font-regular hover:text-multi-blue-blue50b";
- break;
- case "cardActionLink":
- basicStyle =
- "text-multi-blue-blue70b font-body text-browserh5 underline leading-28px font-regular hover:text-multi-blue-blue50b";
- break;
- default:
- basicStyle =
- "underline text-multi-blue-blue70b font-body text-browserh5 leading-33px hover:text-multi-blue-blue50b";
- break;
- }
-
- const Component = props.component || "a";
-
- function onKeyDown() {
- true;
- }
-
- return Component !== "a" ? (
- <Component
- href={props.href}
- disabled={props.disabled}
- lang={props.lang}
- target={props.target}
- aria-label={props.ariaLabel || props.text}
- role="link"
- >
- <a
- href={props.href}
- locale={props.locale}
- onClick={props.onClick ? props.onClick : undefined}
- id={props.id}
- className={`${basicStyle}`}
- data-gc-analytics-customclick={props.dataGcAnalyticsCustomClick}
- onKeyDown={onKeyDown}
- >
- {/* <!-- English Text: English --> */}
- <span className={props.abbr ? "language-toggle-text" : ""}>
- {props.text}
- </span>
- {/* <!-- English Text: title="English", en --> */}
- <abbr className="language-toggle-abbr" title={props.text}>
- {props.abbr}
- </abbr>
- </a>
- </Component>
- ) : (
- <a
- href={props.href}
- className={`${basicStyle}`}
- id={props.id}
- disabled={props.disabled}
- lang={props.lang}
- target={props.target}
- aria-label={props.ariaLabel || props.text}
- locale={props.locale}
- onClick={props.onClick ? props.onClick : undefined}
- data-gc-analytics-customclick={props.dataGcAnalyticsCustomClick}
- >
- {/* <!-- English Text: English --> */}
- <span className={props.abbr ? "language-toggle-text" : ""}>
- {props.text}
- </span>
- {/* <!-- English Text: title="English", en --> */}
- <abbr className="language-toggle-abbr" title={props.text}>
- {props.abbr}
- </abbr>
- </a>
- );
-}
-
-Link.defaultProps = {
- target: "_self",
- href: "#",
-};
-
-Link.propTypes = {
- /**
- * The text that Text Link will display
- */
- text: PropTypes.string,
- /**
- * Abbrivation for text
- */
- abbr: PropTypes.string,
- /**
- * Style link as a Text Link when there's a href
- */
- href: PropTypes.string,
- /**
- * Target attribute to tell the browser where the linked document should be loaded.
- */
- target: PropTypes.string,
- /**
- * Identify which Text Link being clicked
- */
- id: PropTypes.string.isRequired,
- /**
- * Lang attribute for links that do not match the language of the top level document
- */
- lang: PropTypes.string,
- /**
- * css overrides for Link
- */
- className: PropTypes.string,
-
- /**
- * For tracking on click of forms for analytics
- */
- analyticsTracking: PropTypes.bool,
-
- /**
- * use ariaLabel to provide more descriptive text for a link (screen reader friendly)
- */
- ariaLabel: PropTypes.string,
-
- /**
- * Allow user to use configurable component, default is html anchor tag
- */
- component: PropTypes.elementType,
-};
- |
- 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 | - - - -7x - -7x - - - - - - - - - - - - - - -147x - - - - - - - - - - - - - - - - - - - - - - | import { Link } from "./Link";
-import { useTranslation } from "next-i18next";
-
-export function MainBand(props) {
- const { t } = useTranslation("common");
-
- return (
- <>
- <h3 className="pt-[22px] text-multi-neutrals-white font-body font-bold text-[19px]">
- {t("footerTitle")}
- </h3>
- <nav
- className="pb-6"
- role="navigation"
- aria-labelledby="accessibleSectionHeader1"
- >
- <h2 className="sr-only" id="accessibleSectionHeader1">
- {t("aboutGovernment")}
- </h2>
- <ul className="md:grid md:grid-cols-2 lg:grid-cols-3 flex flex-col gap-1 text-xs ml-0">
- {props.landscapeLinks.map((key, index) => {
- return (
- <li
- key={key + index}
- className={`${
- index === 0 ? "footerLine pb-[22px] relative" : ""
- } text-white w-64 sm:w-56 lg:w-80 my-2.5 list-none ml-0 text-xs`}
- >
- <Link
- id={"LandscapeLink" + index}
- href={t(`landscapeLinks.link.${key}`)}
- text={t(`landscapeLinks.text.${key}`)}
- linkStyle="smfooterWhite"
- target={props.target}
- />
- </li>
- );
- })}
- </ul>
- </nav>
- </>
- );
-}
- |
- 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 | - - - -7x - - - - - - - - - - - - - - - - - - - - - - - -28x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { Link } from "./Link";
-import { Image } from "./Image";
-
-export function SubFooterBand(props) {
- return (
- <div className="bg-[#F8F8F8]">
- <div
- className={`lg:container mx-auto ${
- props.isAuthenticated ? "min-h-[86px]" : "min-h-[96px]"
- } ${props.error ? "items-center" : ""} flex justify-between`}
- >
- {props.error ? (
- <div>
- <a
- id="top_btn"
- href={props.btnLink}
- className="sm:hidden float-left cursor-pointer pr-3"
- >
- Top of page / Haut de la page
- </a>
- <img src="/upArrow.svg" alt="" className="pt-2 sm:hidden" />
- </div>
- ) : (
- <section className="flex items-center">
- <nav role="navigation">
- <ul className="flex flex-col md:flex-row whitespace-nowrap pt-4">
- {props.brandLinks
- ? props.brandLinks.map(({ href, text, onClick }, index) => {
- return (
- <li
- key={index}
- className={`${
- index === 0 ? "" : "md:list-disc"
- } pr-4 mb-[17px] list-inside list-none text-xxs ml-0`}
- >
- <Link
- onClick={onClick ? onClick : undefined}
- id={"footerLink" + index}
- href={href}
- text={text}
- linkStyle="smfooterBlue"
- target={props.target}
- />
- </li>
- );
- })
- : props.brandLinksDefault.map(({ href, text }, index) => {
- return (
- <li
- key={index}
- className={`${
- index === 0 ? "" : "md:list-disc"
- } pr-4 mb-[17px] list-inside list-none text-xxs`}
- >
- <Link
- onClick={props.onClick ? props.onClick : undefined}
- id={"footerLink" + index}
- href={href}
- text={text}
- linkStyle="smfooterBlue"
- target={props.target}
- />
- </li>
- );
- })}
- </ul>
- </nav>
- </section>
- )}
- <div
- className={`${
- props.error ? "items-center" : "items-center"
- } min-h-[96px] flex mr-[5px]`}
- >
- <Image
- className={`${
- props.error
- ? "h-[40px] w-auto"
- : "h-[25px] md:h-[40px] w-full mr-2"
- } my-[15px]`}
- src={props.logo}
- alt="Symbol of the Government of Canada"
- />
- </div>
- </div>
- </div>
- );
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Button.jsx | -
-
- |
- 100% | -4/4 | -30% | -6/20 | -100% | -1/1 | -100% | -4/4 | -
| CTA.jsx | -
-
- |
- 100% | -1/1 | -33.33% | -1/3 | -100% | -1/1 | -100% | -1/1 | -
| Collapse.jsx | -
-
- |
- 0% | -0/4 | -100% | -0/0 | -0% | -0/1 | -0% | -0/4 | -
| ContextualAlert.jsx | -
-
- |
- 100% | -10/10 | -50% | -9/18 | -100% | -1/1 | -100% | -10/10 | -
| Footer.jsx | -
-
- |
- 100% | -5/5 | -100% | -0/0 | -100% | -1/1 | -100% | -5/5 | -
| Heading.jsx | -
-
- |
- 100% | -3/3 | -33.33% | -1/3 | -100% | -1/1 | -100% | -3/3 | -
| HelpIcon.jsx | -
-
- |
- 71.42% | -5/7 | -25% | -1/4 | -33.33% | -1/3 | -100% | -5/5 | -
| Image.jsx | -
-
- |
- 100% | -3/3 | -50% | -1/2 | -100% | -1/1 | -100% | -3/3 | -
| Link.jsx | -
-
- |
- 47.61% | -10/21 | -39.13% | -9/23 | -50% | -1/2 | -47.61% | -10/21 | -
| MainBand.jsx | -
-
- |
- 100% | -3/3 | -100% | -2/2 | -100% | -2/2 | -100% | -3/3 | -
| SubFooterBand.jsx | -
-
- |
- 66.66% | -2/3 | -45% | -9/20 | -66.66% | -2/3 | -66.66% | -2/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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import { v4 as uuid } from "uuid";
-
-import Header from "./nodes/Header";
-import LineBreak from "./nodes/LineBreak";
-import ListItem from "./nodes/ListItem";
-import OrderedList from "./nodes/OrderedList";
-import Paragraph from "./nodes/Paragraph";
-import Text from "./nodes/Text";
-import UnorderedList from "./nodes/UnorderedList";
-import Link from "./nodes/Link";
-
-// todo: more components will like need to be added, but for now, these are the only ones returned in the aem json response
-const NODES = {
- header: Header,
- paragraph: Paragraph,
- link: Link,
- text: Text,
- "unordered-list": UnorderedList,
- "ordered-list": OrderedList,
- "list-item": ListItem,
- "line-break": LineBreak,
-};
-
-export default function Recur(props) {
- const Node = NODES[props.node?.nodeType];
- let content = props.node?.content;
-
- if (
- !Node ||
- (props.excludeH1 &&
- props.node?.nodeType === "header" &&
- props.node?.style === "h1")
- ) {
- return;
- }
-
- return (
- <>
- {content && content.length ? (
- <Node key={uuid()} node={props.node}>
- {content.map((node) => (
- <Recur key={uuid()} node={node} />
- ))}
- </Node>
- ) : (
- <Node key={uuid()} node={props.node}></Node>
- )}
- </>
- );
-}
- |
- 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 | - - - - - - - - - - - - | import Recur from "./Recur";
-import { v4 as uuid } from "uuid";
-
-export default function Render(props) {
- return (
- <>
- {props.data.map((node) => (
- <Recur key={uuid()} node={node} excludeH1={props.excludeH1} />
- ))}
- </>
- );
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Recur.jsx | -
-
- |
- 0% | -0/7 | -0% | -0/10 | -0% | -0/2 | -0% | -0/7 | -
| Render.jsx | -
-
- |
- 0% | -0/2 | -100% | -0/0 | -0% | -0/2 | -0% | -0/2 | -
- 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 default function Header(props) { - switch (props.node.style) { - case "h1": - return <h1>{props.children}</h1>; - case "h2": - return <h2>{props.children}</h2>; - case "h3": - return <h3>{props.children}</h3>; - case "h4": - return <h4>{props.children}</h4>; - case "h5": - return <h5>{props.children}</h5>; - default: - return <h6>{props.children}</h6>; - } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 | - - - | export default function LineBreak() { - return <br />; -} - |
- 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 | - - - - - - - - - - | export default function Link(props) { - return ( - <a - href={props.node.data.href} - className="underline underline-offset-[6px] text-custom-blue-projects-link hover:text-custom-blue-projects-link-hover" - > - {props.node.value} - </a> - ); -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 | - - - | export default function ListItem(props) { - return <li>{props.children}</li>; -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 | - - - | export default function UnorderedList(props) { - return <ol>{props.children}</ol>; -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 | - - - | export default function Paragraph(props) { - return <p>{props.children}</p>; -} - |
- 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 | - - - - - - - - - - - | export default function Text(props) { - // todo: guessing on italic since I didn't see it, but I'm assuming it exists and will need to be updated - switch (props.node?.format?.variants?.[0]) { - case "strong": - return <strong>{props.node.value}</strong>; - case "emphasis": - return <em>{props.node.value}</em>; - default: - return <>{props.node.value}</>; - } -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 | - - - | export default function UnorderedList(props) { - return <ul>{props.children}</ul>; -} - |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Header.jsx | -
-
- |
- 0% | -0/7 | -0% | -0/6 | -0% | -0/1 | -0% | -0/7 | -
| LineBreak.jsx | -
-
- |
- 0% | -0/1 | -100% | -0/0 | -0% | -0/1 | -0% | -0/1 | -
| Link.jsx | -
-
- |
- 0% | -0/1 | -100% | -0/0 | -0% | -0/1 | -0% | -0/1 | -
| ListItem.jsx | -
-
- |
- 0% | -0/1 | -100% | -0/0 | -0% | -0/1 | -0% | -0/1 | -
| OrderedList.jsx | -
-
- |
- 0% | -0/1 | -100% | -0/0 | -0% | -0/1 | -0% | -0/1 | -
| Paragraph.jsx | -
-
- |
- 0% | -0/1 | -100% | -0/0 | -0% | -0/1 | -0% | -0/1 | -
| Text.jsx | -
-
- |
- 0% | -0/4 | -0% | -0/3 | -0% | -0/1 | -0% | -0/4 | -
| UnorderedList.jsx | -
-
- |
- 0% | -0/1 | -100% | -0/0 | -0% | -0/1 | -0% | -0/1 | -
- 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={`h-full 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-[6px] my-1 py-2 px-6 items-center 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 -227 | - - - - - - - - - - - - - - -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";
-
-import { Footer } from "../design-system/Footer";
-
-/**
- * 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" aria-label={t("skipToMainContentBtn")}>
- <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"
- aria-label={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.78% | -182/190 | -72.84% | -110/151 | -86.79% | -46/53 | -95.42% | -167/175 | -
| components/design-system | -
-
- |
- 71.87% | -46/64 | -41.05% | -39/95 | -70.58% | -12/17 | -74.19% | -46/62 | -
| components/gql_node_renderer | -
-
- |
- 0% | -0/9 | -0% | -0/10 | -0% | -0/4 | -0% | -0/9 | -
| components/gql_node_renderer/nodes | -
-
- |
- 0% | -0/17 | -0% | -0/9 | -0% | -0/8 | -0% | -0/17 | -
| 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 | -36.77% | -89/242 | -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/54 | -0% | -0/236 | -0% | -0/14 | -0% | -0/53 | -
| pages/projects/dashboard | -
-
- |
- 0% | -0/13 | -0% | -0/96 | -0% | -0/4 | -0% | -0/13 | -
| pages/projects/oas-benefits-estimator | -
-
- |
- 28.94% | -11/38 | -31.91% | -60/188 | -36.36% | -4/11 | -29.72% | -11/37 | -
- 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 | - - - - - - - - - -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 } from "react";
-import Card from "../components/molecules/Card";
-import aemServiceInstance from "../services/aemServiceInstance";
-import { Heading } from "../components/design-system/Heading";
-import { ContextualAlert } from "../components/design-system/ContextualAlert";
-
-export default function Home(props) {
- const pageData = props.pageData?.item;
- const experimentsData = 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.scLabsNewExpiryDate &&
- Date.now() <= new Date(project.scLabsNewExpiryDate)
- }
- 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-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: process.env.ENVIRONMENT === "development" ? 10 : false,
- };
-};
- |
- 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 | -46.34% | -38/82 | -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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import Head from "next/head";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { Layout } from "../../../components/organisms/Layout";
-import { useEffect, useState } from "react";
-import aemServiceInstance from "../../../services/aemServiceInstance";
-import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds";
-import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import Render from "../../../components/gql_node_renderer/Render";
-import { Heading } from "../../../components/design-system/Heading";
-
-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.scTitleEn : pageData.scTitleFr
- }
- />
- <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.scTitleEn : pageData.scTitleFr
- }
- />
- <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="grid grid-cols-12 gap-x-6 mt-12"
- >
- <div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
- <div className="flex justify-center">
- <div className="h-auto">
- <img
- src={
- props.locale === "en"
- ? pageData.scFragments[1].scImageEn._publishUrl
- : pageData.scFragments[1].scImageFr._publishUrl
- }
- alt=""
- />
- </div>
- </div>
- </div>
- <div className="col-span-12 lg:col-span-7">
- <Render
- data={
- props.locale === "en"
- ? pageData.scFragments[0].scContentEn.json
- : pageData.scFragments[0].scContentFr.json
- }
- excludeH1={true}
- />
- </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.params.id = path.params.id.split("/").at(-1)));
- return {
- paths,
- fallback: "blocking",
- };
-}
-
-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 (
- (locale === "en" ? page.scPageNameEn : page.scPageNameFr)
- .split("/")
- .at(-1) === params.id
- );
- });
-
- if (!pageData) {
- return {
- notFound: true,
- };
- }
-
- return {
- props: {
- locale: locale,
- pageData: pageData[0],
- dictionary: dictionary.dictionaryV1List,
- adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
- ...(await serverSideTranslations(locale, ["common", "vc"])),
- },
- revalidate: process.env.ENVIRONMENT === "development" ? 10 : false,
- };
-};
- |
- 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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import Head from "next/head";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { Layout } from "../../../components/organisms/Layout";
-import { useEffect, useState } from "react";
-import aemServiceInstance from "../../../services/aemServiceInstance";
-import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
-import Card from "../../../components/molecules/Card";
-import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { Heading } from "../../../components/design-system/Heading";
-import { Collapse } from "../../../components/design-system/Collapse";
-
-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: process.env.ENVIRONMENT === "development" ? 10 : false,
- };
-};
- |
- 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/96 | -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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import Head from "next/head";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { Layout } from "../../../components/organisms/Layout";
-import { useEffect, useState } from "react";
-import aemServiceInstance from "../../../services/aemServiceInstance";
-import { ProjectInfo } from "../../../components/atoms/ProjectInfo";
-import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { Heading } from "../../../components/design-system/Heading";
-
-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: process.env.ENVIRONMENT === "development" ? 10 : false,
- };
-};
- |
- 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 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | 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 { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import Render from "../../../components/gql_node_renderer/Render";
-import { CTA } from "../../../components/design-system/CTA";
-import { Heading } from "../../../components/design-system/Heading";
-
-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>
-
- {/* Main */}
- <div
- id="mainContentSection"
- className="grid grid-cols-12 gap-x-6 mt-12"
- >
- <div className="hidden lg:grid col-start-8 col-span-5 row-start-1 row-span-2">
- <div className="flex justify-center">
- <div className="h-auto">
- <img
- src={
- props.locale === "en"
- ? pageData.scFragments[0].scImageEn._publishUrl
- : pageData.scFragments[0].scImageFr._publishUrl
- }
- alt=""
- />
- </div>
- </div>
- </div>
- <div className="col-span-12 lg:col-span-7">
- <Render
- data={
- props.locale === "en"
- ? pageData.scFragments[1].scContentEn.json
- : pageData.scFragments[1].scContentFr.json
- }
- excludeH1={true}
- />
- </div>
- </div>
-
- <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}
- />
- </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.params.id = path.params.id.split("/").at(-1)));
- return {
- paths,
- fallback: "blocking",
- };
-}
-
-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 (
- (locale === "en" ? page.scPageNameEn : page.scPageNameFr)
- .split("/")
- .at(-1) === params.id
- );
- });
-
- if (!pageData) {
- return {
- notFound: true,
- };
- }
-
- return {
- props: {
- locale: locale,
- pageData: pageData[0],
- dictionary: dictionary.dictionaryV1List,
- adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL,
- ...(await serverSideTranslations(locale, ["common", "vc"])),
- },
- revalidate: process.env.ENVIRONMENT === "development" ? 10 : false,
- };
-};
- |
- 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 Card from "../../../components/molecules/Card";
-import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs";
-import { CTA } from "../../../components/design-system/CTA";
-import { Heading } from "../../../components/design-system/Heading";
-
-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: process.env.ENVIRONMENT === "development" ? 10 : false,
- };
-};
- |