Merge remote-tracking branch 'origin/feature_6104_directive-page' int…

…o main-copy

apps/e2e/cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "cypress";
+const { verifyDownloadTasks } = require("cy-verify-downloads");
 
 const extendedTimeout = 60000;
 
@@ -28,6 +29,7 @@ export default defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      on("task", verifyDownloadTasks);
       return require("./cypress/plugins/index.js")(on, config);
     },
     experimentalSessionAndOrigin: true,

apps/e2e/cypress/e2e/talentsearch/static-pages.cy.js

@@ -50,4 +50,49 @@ describe("Static pages", () => {
       cy.checkA11y();
     });
   });
+
+  context('Directive page', () => {
+    it('should exist', () => {
+      cy.visit('/en/directive-on-digital-talent')
+      cy.findByRole('heading', { name: 'Directive on Digital Talent', level: 1 }).should('exist')
+    })
+
+    it('should have no accessibility errors', () => {
+      cy.visit('/en/directive-on-digital-talent');
+      cy.injectAxe();
+      cy.findByRole('heading', { name: 'Directive on Digital Talent', level: 1 }).should('exist');
+      cy.checkA11y();
+    });
+
+    it('should download files', () => {
+      cy.visit('/en/directive-on-digital-talent');
+
+      // Open accordion
+      cy.findByRole("button", { name: /enabling conditions/i }).click();
+
+      cy.findByRole("link", { name: /download the guidance \(en\)/i }).click();
+      cy.verifyDownload("Enabling_Conditions_Guidance_EN.docx", { contains: true });
+
+      cy.findByRole("link", { name: /download the guidance \(fr\)/i }).click();
+      cy.verifyDownload("Orientation_sur_les_conditions_habilitantes_FR.docx", { contains: true });
+
+      cy.findByRole("link", { name: /department-specific recruitment form \(en\)/i }).click();
+      cy.verifyDownload("Digital_Recruitment_Template_EN.docx", { contains: true });
+
+      cy.findByRole("link", { name: /department-specific recruitment form \(fr\)/i }).click();
+      cy.verifyDownload("Modele_de_recrutement_numerique_FR.docx", { contains: true });
+
+      cy.findByRole("link", { name: /digital services contracting form \(en\)/i }).click();
+      cy.verifyDownload("Digital_Contracting_Questionnaire_EN.docx", { contains: true });
+
+      cy.findByRole("link", { name: /digital services contracting form \(fr\)/i }).click();
+      cy.verifyDownload("Questionnaire_d'octroi_de_contrats_numeriques_FR.docx", { contains: true });
+
+      cy.findByRole("link", { name: /forward talent plan form \(en\)/i }).click();
+      cy.verifyDownload("Forward_Talent_Plan_EN.docx", { contains: true });
+
+      cy.findByRole("link", { name: /forward talent plan form \(fr\)/i }).click();
+      cy.verifyDownload("Plan_prospectif_sur_les_talents_FR.docx", { contains: true });
+    });
+  });
 });

apps/e2e/cypress/plugins/index.js

@@ -9,8 +9,6 @@
 // https://on.cypress.io/plugins-guide
 // ***********************************************************
 
-const { isFileExist, findFiles } = require("cy-verify-downloads");
-
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
@@ -32,6 +30,4 @@ module.exports = (on, config) => {
     on,
     reporterOptions,
   );
-
-  on("task", { isFileExist, findFiles });
 };

apps/e2e/cypress/support/e2e.js

@@ -40,6 +40,7 @@ before(() => {
 // require('./commands')
 
 require("cypress-terminal-report/src/installLogsCollector")();
+require('cy-verify-downloads').addCustomCommand();
 
 Cypress.on("uncaught:exception", () => {
   return false;

apps/web/jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
   roots: ["src"],
   // https://alexjover.com/blog/enhance-jest-configuration-with-module-aliases/
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|pdf|doc|docx)$":
       "<rootDir>/src/tests/mocks/fileMock.js",
     "\\.(css|less)$": "<rootDir>/src/tests/mocks/styleMock.js",
     "~(.*)$": "<rootDir>/src/$1",

apps/web/src/components/CallToAction/CallToAction.stories.tsx

@@ -1,28 +1,32 @@
 import React from "react";
 import type { Meta, Story } from "@storybook/react";
 
-import CallToAction from "./CallToAction";
-import type { CallToActionContext } from "./CallToAction";
+import CallToActionLink from "./CallToActionLink";
+import CallToActionButton from "./CallToActionButton";
+import type { Color, CallToActionProps } from "./types";
+import { HireIcon, JobIcon, ProfileIcon, HomeIcon, SupportIcon } from "./Icons";
+
+const colors = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "quinary",
+] as Array<Color>;
+
+const iconMap = new Map<Color, CallToActionProps<HTMLElement>["Icon"]>([
+  ["primary", SupportIcon],
+  ["secondary", HireIcon],
+  ["tertiary", HomeIcon],
+  ["quaternary", JobIcon],
+  ["quinary", ProfileIcon],
+]);
 
 export default {
-  component: CallToAction,
+  component: CallToActionLink,
   title: "Components/CallToAction",
-  args: {
-    content: {
-      path: "#",
-      label: "Test call-to-action",
-    },
-  },
 } as Meta;
 
-const contextMap: Array<CallToActionContext> = [
-  "hire",
-  "job",
-  "profile",
-  "home",
-  "support",
-];
-
 const Template: Story = (args) => {
   const { content } = args;
   return (
@@ -40,13 +44,17 @@ const Template: Story = (args) => {
         data-h2-max-width="base(x15)"
       >
         <p>Link variation</p>
-        {contextMap.map((context) => (
-          <CallToAction
-            key=""
+        {colors.map((color) => (
+          <CallToActionLink
+            key={color}
+            color={color}
             type="link"
-            context={context}
+            Icon={iconMap.get(color) || HomeIcon}
             content={content}
-          />
+            href="#"
+          >
+            Call to Action Link
+          </CallToActionLink>
         ))}
       </div>
       <div
@@ -56,13 +64,16 @@ const Template: Story = (args) => {
         data-h2-max-width="base(x15)"
       >
         <p>Button variation</p>
-        {contextMap.map((context) => (
-          <CallToAction
-            key=""
-            type="button"
-            context={context}
+        {colors.map((color) => (
+          <CallToActionButton
+            key={color}
+            color={color}
+            type="link"
+            Icon={iconMap.get(color) || HomeIcon}
             content={content}
-          />
+          >
+            Call to Action Button
+          </CallToActionButton>
         ))}
       </div>
     </div>

apps/web/src/components/CallToAction/CallToActionButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import ContentWrapper from "./ContentWrapper";
+import IconWrapper from "./IconWrapper";
+
+import { commonStyles, stylesMap } from "./styles";
+import { CallToActionProps } from "./types";
+
+export type CallToActionButtonProps = CallToActionProps<HTMLAnchorElement>;
+
+const CallToActionButton = ({
+  Icon,
+  children,
+  color,
+  ...rest
+}: CallToActionButtonProps): React.ReactElement => {
+  const colors = stylesMap[color];
+
+  return (
+    <a {...colors} {...commonStyles} {...rest}>
+      <IconWrapper>
+        <Icon />
+      </IconWrapper>
+      <ContentWrapper>{children}</ContentWrapper>
+    </a>
+  );
+};
+
+export default CallToActionButton;