Misc fixes to CDCP landing page (#1006)

* fix chevron icon reference * more small fixes to align with CDCP prototype * add column gaps to match text wrapping in figma * add adobe analytics * add cdcp landing page to robots.js * add missing newlines to robots.js * add missing useEffect import * fix robots.js unit test
DTS-STN · Apr 30, 2024 · f40bba1 · f40bba1
1 parent abc96a1
commit f40bba1
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 11 deletions.
diff --git a/__tests__/api/robots.test.js b/__tests__/api/robots.test.js
@@ -22,7 +22,7 @@ describe("robots api", () => {
     });
     await handler(req, res);
     expect(res._getData()).toBe(
-      "User-agent: *\nDisallow: /api\nDisallow: /projects/*\nDisallow: /notsupported.js\n"
+      "User-agent: *\nDisallow: /api\nDisallow: /projects/*\nDisallow: /notsupported.js\nDisallow: /cdcp-apply\nDisallow: /rsdc-demander\n"
     );
   });
 });
diff --git a/components/organisms/PhaseBanner.js b/components/organisms/PhaseBanner.js
@@ -33,15 +33,15 @@ export const PhaseBanner = ({
 
   return (
     <>
-      <div className="bg-circle-color">
+      <div className="bg-multi-blue-blue70d">
         <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"
+              className="font-body text-s text-white border-2 block w-max px-4 py-1 my-auto leading-6 items-center"
               role="alert"
             >
               {phase}
@@ -59,7 +59,7 @@ export const PhaseBanner = ({
               ""
             )}
           </div>
-          <div className="lg:ml-4 xl:ml-8 xxl:ml-12">
+          <div>
             <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>

diff --git a/next.config.js b/next.config.js
@@ -93,7 +93,7 @@ securityHeaders = [
   },
   {
     key: "Content-Security-Policy",
-    value: `default-src 'self' dts-stn.com *.dts-stn.com *.adobe.com https://assets.adobedtm.com *.omniture.com *.2o7.net; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; connect-src 'self' *.adobe.com https://assets.adobedtm.com *.demdex.net *.omtrdc.net cm.everesttech.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com data:; img-src 'self' data: *.omtrdc.net *.demdex.net cm.everesttech.net https://assets.adobedtm.com https://www.canada.ca; font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com data:; frame-src 'self' *.adobe.com https://assets.adobedtm.com *.demdex.net; script-src 'self' 'unsafe-inline' *.adobe.com *.adobedtm.com *.omniture.com *.2o7.net https://*.demdex.net https://cm.everesttech.net ${
+    value: `default-src 'self' dts-stn.com *.dts-stn.com *.adobe.com https://assets.adobedtm.com *.omniture.com *.2o7.net; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; connect-src 'self' *.adobe.com https://assets.adobedtm.com *.demdex.net *.omtrdc.net cm.everesttech.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com data:; img-src 'self' data: webpack: *.omtrdc.net *.demdex.net cm.everesttech.net https://assets.adobedtm.com https://www.canada.ca; font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com data:; frame-src 'self' *.adobe.com https://assets.adobedtm.com *.demdex.net; script-src 'self' 'unsafe-inline' *.adobe.com *.adobedtm.com *.omniture.com *.2o7.net https://*.demdex.net https://cm.everesttech.net ${
       process.env.CI === "true"
         ? "'unsafe-eval'"
         : process.env.NODE_ENV === "development"

diff --git a/pages/api/robots.js b/pages/api/robots.js
@@ -10,6 +10,8 @@ export default async function handler(req, res) {
     res.write("Disallow: /api\n");
     res.write("Disallow: /projects/*\n");
     res.write("Disallow: /notsupported.js\n");
+    res.write("Disallow: /cdcp-apply\n");
+    res.write("Disallow: /rsdc-demander\n");
   } else {
     res.write("User-agent: *\n");
     res.write("Disallow: /\n");

diff --git a/pages/cdcp-apply.js b/pages/cdcp-apply.js
@@ -4,6 +4,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { Layout } from "../components/organisms/Layout";
 import { ActionButton } from "../components/atoms/ActionButton";
 import { createBreadcrumbs } from "../lib/utils/createBreadcrumbs";
+import { useEffect } from "react";
 
 export default function CDCPLanding(props) {
   const { t } = useTranslation("common");
@@ -16,7 +17,7 @@ export default function CDCPLanding(props) {
       scPageNameFr: "https://www.canada.ca/fr/services/prestations.html",
     },
     {
-      scTitleEn: "Dental Coverage",
+      scTitleEn: "Dental coverage",
       scTitleFr: "Couverture dentaire",
       scPageNameEn: "https://www.canada.ca/en/services/benefits/dental.html",
       scPageNameFr:
@@ -32,6 +33,13 @@ export default function CDCPLanding(props) {
     },
   ];
 
+  useEffect(() => {
+    if (props.adobeAnalyticsUrl) {
+      window.adobeDataLayer = window.adobeDataLayer || [];
+      window.adobeDataLayer.push({ event: "pageLoad" });
+    }
+  }, []);
+
   return (
     <Layout
       locale={props.locale}
@@ -49,7 +57,7 @@ export default function CDCPLanding(props) {
         <title>{t("cdcp.secondaryHeading")}</title>
       </Head>
       <section className="layout-container">
-        <div className="grid grid-cols-12">
+        <div className="grid grid-cols-12 gap-x-8">
           <div className="col-span-12">
             <p className="mt-12 text-multi-neutrals-grey85">
               {t("cdcp.secondaryHeading")}
@@ -58,7 +66,7 @@ export default function CDCPLanding(props) {
               {t("cdcp.primaryHeading")}
             </h1>
           </div>
-          <div className="col-span-12 lg:col-span-8">
+          <div className="col-span-12 xl:col-span-8">
             <p>{t("cdcp.toCompleteApplication")}</p>
             <ul className="mt-5">
               <li>{t("cdcp.listItems.item1")}</li>
@@ -92,6 +100,7 @@ export const getStaticProps = async ({ locale }) => {
   return {
     props: {
       locale: locale,
+      adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL ?? null,
       ...(await serverSideTranslations(locale, ["common"])),
     },
   };

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -1,5 +1,5 @@
 {
-  "phaseBannerTag": "PROTOTYPE",
+  "phaseBannerTag": "Alpha",
   "phaseBannerText": "This is a prototype for testing purposes only. Information entered will not be saved.",
   "siteTitle": "Service Canada Labs",
   "bannerText": "Give feedback to make new government services simple and easy to use",

diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -1,5 +1,5 @@
 {
-  "phaseBannerTag": "PROTOTYPE",
+  "phaseBannerTag": "Alpha",
   "phaseBannerText": "Il s'agit d'un prototype destiné uniquement à des fins de test. Les informations saisies ne seront pas enregistrées.",
   "siteTitle": "Laboratoires de Service Canada",
   "bannerText": "Donnez vos commentaires pour de nouveaux services gouvernementaux simples et faciles à utiliser",

diff --git a/styles/globals.css b/styles/globals.css
@@ -142,7 +142,7 @@ html {
   }
 
   .icon-chevron-right:before {
-    content: url(../public/chevron-right.svg);
+    content: url("/chevron-right.svg");
   }
 
   .skip-main {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -132,6 +132,7 @@ module.exports = {
             blue70a: "#38414D",
             blue70b: "#284162",
             blue70c: "#33465C",
+            blue70d: "#334155",
             blue65: "#16446C",
             blue65a: "#083C6C",
             blue60a: "#2E5274",