Sch 180590 alert

__tests__/components/ContextualAlert.test.js

@@ -13,9 +13,9 @@ describe('ContextualAlert', () => {
       id="alert_icon_id"
       alert_icon_id="icon-id"
       alert_icon_alt_text="alt"
-      type="info"
-      message_heading="Information"
-      message_body="You may wish to print this page..."
+      type="informatin"
+      alertHeading="Information"
+      alertBody="You may wish to print this page..."
     />,
   )
   it('renders this Contectual Alert component', () => {
@@ -37,8 +37,8 @@ describe('ContextualAlert', () => {
         alert_icon_id="icon-id"
         alert_icon_alt_text="alt"
         type="info"
-        message_heading="Information"
-        message_body="You may wish to print this page..."
+        alertHeading="Information"
+        alertBody="You may wish to print this page..."
       />,
     )
     const results = await axe(container)

components/Card.tsx

@@ -1,18 +1,29 @@
 import ViewMoreLessButton from '../components/ViewMoreLessButton'
+import ContextualAlert from '../components/ContextualAlert'
 import { useEffect, useState } from 'react'
 import { ReactNode } from 'react'
 import { z } from 'zod'
 
+interface AlertProps {
+  id: string
+  type: string
+  alertHeading: string
+  alertBody: string
+}
 interface CardProps {
   cardTitle: string
   viewMoreLessCaption: string
   programUniqueId?: string
   acronym: string
   refPageAA: string
   children: ReactNode
+  locale: string
+  cardAlert: AlertProps[]
 }
 
 const Card = ({
+  cardAlert,
+  locale,
   cardTitle,
   viewMoreLessCaption,
   programUniqueId,
@@ -21,6 +32,7 @@ const Card = ({
   children,
 }: CardProps) => {
   const [isOpen, setIsOpen] = useState(false)
+
   const CardState = z
     .string()
     .toLowerCase()
@@ -85,12 +97,44 @@ const Card = ({
         ariaLabel={`${cardTitle} - ${viewMoreLessCaption}`}
       />
       {!isOpen ? null : (
-        <div className="pb-6" data-cy="sectionList">
-          {children}
+        <div>
+          {cardAlert.map((alert, index) => {
+            const alertType = alert.type[0].split('/').pop()
+            return (
+              <ul className="w-full pb-3 sm:px-8 sm:pb-6 md:px-15" key={index}>
+                <ContextualAlert
+                  id={alert.id}
+                  type={alertType}
+                  alertHeading={alert.alertHeading}
+                  alertBody={alert.alertBody}
+                  alert_icon_alt_text={`${alertType} ${
+                    locale === 'fr' ? 'Icônes' : 'icon'
+                  }`}
+                  alert_icon_id={` alert-icon ${alert.id}`}
+                />
+              </ul>
+            )
+          })}
+          <div className="pb-6" data-cy="sectionList">
+            {children}
+          </div>
         </div>
       )}
     </div>
   )
 }
 
+Card.defaultProps = {
+  cardAlert: [
+    {
+      id: '',
+      type: '',
+      alertHeading: '',
+      alertBody: '',
+      alert_icon_alt_text: '',
+      alert_icon_id: '',
+    },
+  ],
+}
+
 export default Card

components/ContextualAlert.tsx

@@ -4,25 +4,28 @@ import success_img from '../public/success_img.svg'
 import warning_img from '../public/warning_img.svg'
 import danger_img from '../public/danger_img.svg'
 import info_img from '../public/info_img.svg'
+import Markdown from 'markdown-to-jsx'
 
-interface ContextualAlertProps {
+export interface ContextualAlertProps {
   id: string
-  type: 'warning' | 'information' | 'success' | 'danger'
+  type?: string
   alert_icon_id: string
   alert_icon_alt_text: string
-  message_heading: string | ReactNode
-  message_body: string | ReactNode | ReactNode[]
+  alertHeading: string | ReactNode
+  alertBody: string
   whiteBG?: boolean
+  className?: string
 }
 
 const ContextualAlert = ({
   id,
   type,
   alert_icon_id,
   alert_icon_alt_text,
-  message_heading,
-  message_body,
+  alertHeading,
+  alertBody,
   whiteBG,
+  className,
 }: ContextualAlertProps) => {
   const alert_type =
     type === 'warning'
@@ -32,6 +35,7 @@ const ContextualAlert = ({
         : type === 'information'
           ? info_img
           : success_img
+
   const alert_color =
     type === 'warning'
       ? 'border-orange-dark'
@@ -44,7 +48,10 @@ const ContextualAlert = ({
   const white_BG = whiteBG ? 'bg-white' : ' '
 
   return (
-    <div id={id} className={`relative min-w-72 pl-4 sm:pl-6 ${white_BG}`}>
+    <li
+      id={id}
+      className={`relative min-w-72 pl-4 sm:pl-6 ${white_BG} ${className}`}
+    >
       <div
         data-testid="alert-icon"
         className="absolute left-1.5 top-3 bg-white  py-1 sm:left-3.5"
@@ -58,17 +65,45 @@ const ContextualAlert = ({
         ></Image>
       </div>
       <div
-        className={`overflow-auto border-l-[6px] ${alert_color} py-4 pl-6 leading-8`}
+        className={`overflow-auto border-l-[6px] ${alert_color} py-3 pl-6 leading-8`}
       >
-        <div className="ml-1 font-display text-2xl font-bold leading-[26px] text-gray-darker">
-          {message_heading}
+        <div className="ml-1 font-display text-2xl font-bold leading-[26px] text-deep-blue-dark">
+          {alertHeading}
         </div>
 
-        <p className="ml-0.5 font-body text-20px text-gray-darker">
-          {message_body}
-        </p>
+        <div className="ml-0.5 font-body text-20px text-gray-darker">
+          <Markdown
+            options={{
+              overrides: {
+                h2: {
+                  props: {
+                    className:
+                      'text-3xl text-gray-darker font-display font-bold mt-10 mb-3',
+                  },
+                },
+                p: {
+                  props: {
+                    className: 'mb-3 text-gray-darker',
+                  },
+                },
+                ul: {
+                  props: {
+                    className: 'list-disc ml-4 sm:mx-8 mb-3 text-gray-darker',
+                  },
+                },
+                a: {
+                  props: {
+                    className: 'underline text-deep-blue-dark cursor-pointer',
+                  },
+                },
+              },
+            }}
+          >
+            {alertBody}
+          </Markdown>
+        </div>
       </div>
-    </div>
+    </li>
   )
 }
 

cypress/e2e/dashboard.cy.js

@@ -113,10 +113,11 @@ describe('Validate dashboard page', () => {
 
   // EN Tests the task group title and links for EI, CPP and OAS but not SIN and Cal
   it('Iterates through EI, CPP and OAS task lists for title and links for EN', () => {
-    // 2 = EI, 3 = CPP and 4 = OAS
-    const EICPPOAS = [2, 3, 4]
+    // 4 = EI, 4 = CPP and 5 = OAS
+    const EICPPOAS = [3, 4, 5]
 
     cy.wrap(EICPPOAS).each((index) => {
+      console.log(EICPPOAS)
       cy.get(`:nth-child(${index}) > [data-cy="viewMoreLessButton"]`).click()
       cy.get('[data-cy="most-requested"]').should('be.visible')
       // iterate through the task list for title and task links
@@ -145,8 +146,8 @@ describe('Validate dashboard page', () => {
 
   // FR Tests the task group title and links for EI, CPP and OAS but not SIN and Cal
   it('Iterates through EI, CPP and OAS task lists for title and links for FR', () => {
-    // 2 = EI, 3 = CPP and 4 = OAS
-    const EICPPOAS = [2, 3, 4]
+     // 4 = EI, 4 = CPP and 5 = OAS
+     const EICPPOAS = [3, 4, 5]
     cy.changeLang().should('have.text', 'English')
     cy.location('pathname').should('include', '/fr/mon-tableau-de-bord')
     cy.wrap(EICPPOAS).each((index) => {
@@ -178,8 +179,8 @@ describe('Validate dashboard page', () => {
 
   // EN Tests the Links for Profile page in EI, CPP and OAS but not SIN and Cal
   it('Iterates through EI, CPP and OAS task lists for Profile page EN', () => {
-    // 2 = EI, 3 = CPP and 4 = OAS
-    const EICPPOAS = [2, 3, 4]
+    // 4 = EI, 4 = CPP and 5 = OAS
+    const EICPPOAS = [3, 4, 5]
     cy.wrap(EICPPOAS).each((index) => {
       cy.get(`:nth-child(${index}) > [data-cy="viewMoreLessButton"]`).click()
       cy.get('[data-cy="most-requested"]').should('be.visible')
@@ -199,8 +200,8 @@ describe('Validate dashboard page', () => {
 
   // FR Tests the Links for Profile page in EI, CPP and OAS but not SIN and Cal
   it('Iterates through EI, CPP and OAS task lists for Profile page FR', () => {
-    // 2 = EI, 3 = CPP and 4 = OAS
-    const EICPPOAS = [2, 3, 4]
+    // 4 = EI, 4 = CPP and 5 = OAS
+    const EICPPOAS = [3, 4, 5]
 
     cy.changeLang().should('have.text', 'English')
     cy.location('pathname').should('include', '/fr/mon-tableau-de-bord')
@@ -225,8 +226,8 @@ describe('Validate dashboard page', () => {
 
   // EN Tests the Links for Decision Review page in CPP and OAS
   it('Iterates through CPP and OAS tasks for Decision Review page EN', () => {
-    // 2 = EI, 3 = CPP and 4 = OAS
-    const EICPPOAS = [3, 4]
+    // 4 = EI, 4 = CPP and 5 = OAS
+    const EICPPOAS = [4, 5]
     cy.wrap(EICPPOAS).each((index) => {
       cy.get(`:nth-child(${index}) > [data-cy="viewMoreLessButton"]`).click()
       cy.get('[data-cy="most-requested"]').should('be.visible')
@@ -248,8 +249,8 @@ describe('Validate dashboard page', () => {
 
   // FR Tests the Links for Decision Review page in CPP and OAS
   it('Iterates through CPP and OAS tasks for Decision Review page FR', () => {
-    // 2 = EI, 3 = CPP and 4 = OAS
-    const EICPPOAS = [3, 4]
+    // 4 = EI, 4 = CPP and 5 = OAS
+    const EICPPOAS = [4, 5]
     cy.changeLang().should('have.text', 'English')
     cy.url().should('contains', '/fr/mon-tableau-de-bord')
     cy.wrap(EICPPOAS).each((index) => {