Fix/dev12045 - Make InfoBanner component more dynamic

src/_scss/core/_variables.scss

@@ -44,6 +44,8 @@ $font-bold:        700;
 $image-path: './img';
 
 // USWDS Color Tokens
+$orange-5v: #FEF2E4;
+$orange-20v: #FFBC78;
 $orange-30v: #FA9441;
 $orange-warm-40v: #FF580A;
 $orange-warm-10v: #ffe2d1;
@@ -71,6 +73,8 @@ $blue-60v: #005ea2;
 $blue-70v: #0B4778;
 $blue-80v: #112f4e;
 $blue-cool-5v: #e1f3f8;
+$blue-cool-20v: #97d4ea;
+$blue-cool-30v: #59b9de;
 $blue-cool-60v: #07648d;
 $blue-cool-80v: #002d3f;
 $blue-vivid-5v: #e8f5ff;
@@ -107,6 +111,9 @@ $gray-cool-5: #edeff0;
 $gray-cool-10: #dfe1e2;
 $gray-cool-20: #c6cace;
 $gray-cool-90: #1c1d1f;
+$green-cool-5v: #E3F5E1;
+$green-cool-20v: #70E17B;
+$green-cool-30v: #21C834;
 
 // Theme Colors
 $theme-color-1: $blue-50;

src/_scss/layouts/default/header/_warning.scss

@@ -79,6 +79,23 @@
             padding: rem(5) 0;
             color: $gray-cool-90;
         }
+
+    }
+
+    &.general {
+        border-top: 4px solid $blue-cool-30v;
+        background-color: $blue-cool-5v;
+        border-bottom: 1px solid $blue-cool-20v;
+    }
+    &.warning {
+        border-top: 4px solid $orange-30v;
+        background-color: $orange-5v;
+        border-bottom: 1px solid $orange-20v;
+    }
+    &.warning-resolved {
+        border-top: 4px solid $green-cool-30v;
+        background-color: $green-cool-5v;
+        border-bottom: 1px solid $green-cool-20v;
     }
 
     &.info-banner_warning {

src/js/GlobalConstants.js

@@ -28,7 +28,8 @@ const globalConstants = {
         isActive: true,
         title: 'Recipient Filter',
         content: 'There is currently a bug affecting the Recipient Filter feature of our service. We appreciate your understanding and patience as we work to fix this issue. Please contact our service desk for additional assistance.',
-        page: 'search'
+        page: 'search',
+        type: "warning" // three options "general", "warning", "warning-resolved"
     }
 };
 

src/js/components/sharedComponents/header/Header.jsx

@@ -12,6 +12,7 @@ import InfoBanner from './InfoBanner';
 
 const Header = () => {
     const location = useLocation();
+    const bannerType = GlobalConstants?.BANNER?.type || "";
 
     const skippedNav = (e) => {
     // don't update the URL due to potential React Router conflicts
@@ -38,6 +39,31 @@ const Header = () => {
         return false;
     };
 
+    const getIcon = (type) => {
+        let icon = "";
+
+        switch (type) {
+            case "general":
+                icon = <FontAwesomeIcon size="lg" icon="info-circle" color="#59b9de" />;
+                break;
+
+            case "warning":
+                icon = <FontAwesomeIcon size="lg" icon="exclamation-triangle" color="#FA9441" />;
+                break;
+
+            case "warning-resolved":
+                icon = <FontAwesomeIcon size="lg" icon="check-circle" color="#21C834" />;
+                break;
+
+            default:
+                break;
+        }
+
+
+        return icon;
+    };
+
+
     return (
         <div className="site-header">
             <a
@@ -53,25 +79,11 @@ const Header = () => {
                 <NavbarWrapper />
             </header>
             {isBannerActive() &&
-                    <InfoBanner
-                        icon={<FontAwesomeIcon size="lg" icon="exclamation-triangle" color="#FA9441" />}
-                        // GENERAL NOTIFICATION
-                        // borderTopColor="#59b9de"
-                        // backgroundColor="#e1f3f8"
-                        // borderBottomColor="#97d4ea"
-                        // color="#59B9DE" (info-circle use for fontawesomeicon above)
-                        // WARNING
-                        borderTopColor="#FA9441"
-                        backgroundColor="#FEF2E4"
-                        borderBottomColor="#FFBC78"
-                        // color="#FA9441" (exclamation-triangle use for fontawesomeicon above)
-                        // WARNING RESOLVED
-                        // borderTopColor="#21C834"
-                        // backgroundColor="#E3F5E1"
-                        // borderBottomColor="#70E17B"
-                        // color="#21C834" (check-circle use for fontawesomeicon above)
-                        title={GlobalConstants?.BANNER?.isActive ? GlobalConstants.BANNER.title : ""}
-                        content={GlobalConstants.BANNER.isActive ? GlobalConstants.BANNER.content : ""} />}
+                <InfoBanner
+                    icon={getIcon(bannerType)}
+                    type={bannerType}
+                    title={GlobalConstants?.BANNER?.isActive ? GlobalConstants.BANNER.title : ""}
+                    content={GlobalConstants.BANNER.isActive ? GlobalConstants.BANNER.content : ""} />}
             <AboutTheDataContainer />
             <GlossaryContainer />
             <GlobalModalContainer />

src/js/components/sharedComponents/header/InfoBanner.jsx

@@ -10,7 +10,8 @@ const propTypes = {
     closeBanner: PropTypes.func,
     title: oneOfType([PropTypes.string, PropTypes.object]),
     content: oneOfType([PropTypes.string, PropTypes.object]),
-    icon: oneOfType([PropTypes.string, PropTypes.object])
+    icon: oneOfType([PropTypes.string, PropTypes.object]),
+    type: oneOfType([PropTypes.string, PropTypes.object])
 };
 
 const InfoBanner = (props) => {
@@ -33,13 +34,8 @@ const InfoBanner = (props) => {
 
     return (
         <div
-            className="info-banner"
-            style={{
-                display: `${closeBanner ? 'none' : ''}`,
-                backgroundColor: props.backgroundColor,
-                borderTop: `${props.borderTopColor !== '' ? `4px solid ${props.borderTopColor}` : ''}`,
-                borderBottom: `${props.borderBottomColor !== '' ? `1px solid ${props.borderBottomColor}` : ''}`
-            }}>
+            className={`info-banner ${props.type || ""}`}
+            style={{ display: `${closeBanner ? 'none' : ''}` }}>
             <div className="info-banner__content">
                 <div className="info-banner__icon">
                     {props.icon}