Merge pull request #922 from DTS-STN/alert

142179 - Refactor Alert and Heading

components/Forms/ContextualAlert.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable @next/next/no-img-element */
+
+interface ContextualAlertProps {
+  id: string
+  heading: string
+  body: Body
+  type: AlertType
+  iconId: string
+  iconAltText: string
+  asHtml?: boolean
+}
+
+type AlertType = 'warning' | 'info' | 'success' | 'danger'
+type Body = string | React.ReactElement | React.ReactElement[]
+
+const ALERT_MAPPINGS = {
+  warning: {
+    img: '/warning_img.svg',
+    color: '#EE7100',
+  },
+  danger: {
+    img: '/danger_img.svg',
+    color: '#BC3331',
+  },
+  info: {
+    img: '/info_img.svg',
+    color: '#269ABC',
+  },
+  success: {
+    img: '/success_img.svg',
+    color: '#278400',
+  },
+}
+
+export const ContextualAlert: React.FC<ContextualAlertProps> = ({
+  id,
+  heading,
+  body,
+  type,
+  iconId,
+  iconAltText,
+  asHtml,
+}) => {
+  const alertType = ALERT_MAPPINGS[type].img
+  const alertColor = ALERT_MAPPINGS[type].color
+
+  const headingClass =
+    'font-header-gc font-[700] text-[24px] leading-[26px] text-[#333333]'
+  const bodyClass =
+    'font-sans font-[400] text-[20px] leading-[33px] text-[#333333] pt-2'
+
+  return (
+    <div id={id} className="relative min-w-290px ml-[24px]">
+      <div className="absolute top-3.5 -left-2.5 bg-white py-1">
+        <img
+          id={iconId}
+          src={alertType}
+          alt={iconAltText}
+          className="h-6 w-6"
+        />
+      </div>
+      <div
+        style={{ borderColor: alertColor }}
+        className={`overflow-auto border-l-4 pl-[24px] py-[16px] leading-8`}
+      >
+        {asHtml ? (
+          <p
+            className={headingClass}
+            dangerouslySetInnerHTML={{ __html: heading }}
+          />
+        ) : (
+          <p className={headingClass}>{heading}</p>
+        )}
+        {asHtml && typeof body === 'string' ? (
+          <div
+            className={bodyClass}
+            dangerouslySetInnerHTML={{ __html: body }}
+          />
+        ) : (
+          <div className={bodyClass}>{body}</div>
+        )}
+      </div>
+    </div>
+  )
+}

components/Forms/ErrorsSummary.tsx

@@ -1,9 +1,7 @@
 import { useTranslation } from '../Hooks'
 import { WebTranslations } from '../../i18n/web'
-import {
-  ContextualAlert as Message,
-  Link as DSLink,
-} from '@dts-stn/service-canada-design-system'
+import { Link as DSLink } from '@dts-stn/service-canada-design-system'
+import { ContextualAlert as Message } from './ContextualAlert'
 import { Language } from '../../utils/api/definitions/enums'
 
 export const ErrorsSummary: any = ({ errorFields }) => {
@@ -43,12 +41,10 @@ export const ErrorsSummary: any = ({ errorFields }) => {
       <Message
         id={`form-errors-${errorFields.length}`}
         type="danger"
-        message_heading={
-          tsln.errorBoxTitle + errorFields.length + titleTranslation
-        }
-        message_body={messageBody}
-        alert_icon_id="form-errors"
-        alert_icon_alt_text={tsln.warningText}
+        heading={tsln.errorBoxTitle + errorFields.length + titleTranslation}
+        body={messageBody}
+        iconId="form-errors"
+        iconAltText={tsln.warningText}
       />
     </div>
   )

components/Layout/index.tsx

@@ -1,7 +1,4 @@
-import {
-  Heading,
-  ContextualAlert as Message,
-} from '@dts-stn/service-canada-design-system'
+import { ContextualAlert as Message } from '../Forms/ContextualAlert'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { WebTranslations } from '../../i18n/web'
@@ -132,21 +129,18 @@ export const Layout: React.VFC<{
               logoAltText: tsln.logoAltText,
             }}
           />
-          <Heading
-            id="applicationTitle"
-            title={title}
-            className="mb-8 mt-4 sm:mt-12 sm:w-[100%]"
-          />
+          <h1 id="applicationTitle" className="h1 my-8">
+            {title}
+          </h1>
           <div className="mb-6">
             <Message
               id={'wip'}
-              alert_icon_id={'testkey'}
-              alert_icon_alt_text={tsln.warningText}
+              iconId={'testkey'}
+              iconAltText={tsln.warningText}
               type={'info'}
-              message_heading={tsln.workInProgress}
-              message_body={tsln.workInProgressBody}
-              whiteBG={true}
-              asHtml={true}
+              heading={tsln.workInProgress}
+              body={tsln.workInProgressBody}
+              asHtml
             />
           </div>
           {children}

components/QuestionsPage/index.tsx

@@ -1,7 +1,5 @@
-import {
-  AccordionForm,
-  ContextualAlert as Message,
-} from '@dts-stn/service-canada-design-system'
+import { AccordionForm } from '@dts-stn/service-canada-design-system'
+import { ContextualAlert as Message } from '../Forms/ContextualAlert'
 import { debounce } from 'lodash'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
@@ -274,13 +272,12 @@ export const QuestionsPage: React.VFC = ({}) => {
             <div className="mt-6 md:pr-12 msg-container border-warning">
               <Message
                 id={field.key}
-                alert_icon_id={field.key}
-                alert_icon_alt_text={tsln.warningText}
+                iconId={field.key}
+                iconAltText={tsln.warningText}
                 type={'warning'}
-                message_heading={tsln.unableToProceed}
-                message_body={field.error}
-                asHtml={true}
-                whiteBG={true}
+                heading={tsln.unableToProceed}
+                body={field.error}
+                asHtml
               />
             </div>
           )}

styles/globals.css

@@ -105,7 +105,7 @@
 
   /* typography gc overrides */
   .h1 {
-    @apply text-h1 font-bold mb-[15px] font-header-gc border-b border-header-rule text-content;
+    @apply text-mobile sm:text-h1 font-bold mb-[15px] font-header-gc border-b border-header-rule text-content pb-2;
   }
 
   .h2 {

tailwind.config.js

@@ -33,6 +33,7 @@ module.exports = {
         h2: ['36px', '40px'],
         xs: ['32px', '36px'],
         h1: ['38px', '42px'], // requires red <hr /> below
+        mobile: ['34px', '38px'],
         small: ['14px', '16px'],
       },
       colors: {