add test AlertBanner in Layout to test styling

newjersey · Feb 26, 2025 · ecf466a · ecf466a
1 parent a92bb29
commit ecf466a
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/frontend/src/components/AlertBanner/AlertBanner.module.css b/frontend/src/components/AlertBanner/AlertBanner.module.css
@@ -0,0 +1,3 @@
+.alertBannerText {
+    min-width: 100%;
+}
diff --git a/frontend/src/components/AlertBanner/AlertBanner.tsx b/frontend/src/components/AlertBanner/AlertBanner.tsx
@@ -1,3 +1,5 @@
+import styles from './AlertBanner.module.css'
+
 interface Props {
     messageHtml: string
 }
@@ -9,7 +11,7 @@ export const AlertBanner = (props: Props) => {
             className="usa-alert usa-alert--info usa-alert--slim usa-alert--no-icon"
         >
             <div className="usa-alert__body">
-                <p className="usa-alert__text"
+                <p className={`${styles.alertBannerText} usa-alert__text`}
                     dangerouslySetInnerHTML={{ __html: props.messageHtml }}
                 />
             </div>

diff --git a/frontend/src/pages/layout/Layout.tsx b/frontend/src/pages/layout/Layout.tsx
@@ -77,11 +77,14 @@ const Layout = () => {
   return (
     <div className={styles.layout}>
       <header className={styles.header} role={'banner'}>
-        {ui?.alert_banner_message !== undefined
-          && ui?.alert_banner_message !== null
+        {/* {ui?.alert_banner_message !== undefined
+          && ui.alert_banner_message !== null
           && ui.alert_banner_message !== ""
-          && <AlertBanner messageHtml={`altering message (env var follows): ${ui.alert_banner_message}`} />
-        }
+          && (
+            <AlertBanner messageHtml={ui.alert_banner_message} />
+          )
+        } */}
+        <AlertBanner messageHtml="this is a test message i'm making it long so. it overflows this is a test message i'm making it long so it overflows this is a test message i'm making it long so it o.verflows this is a test message i'm making it long so it overflowsthis is a test message i'm making it long so. it overflows this is a test message i'm making it long so it overflows this is a test message i'm making it long so it o.verflows this is a test message i'm making it long so it overflows" />
         <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
           <Stack horizontal verticalAlign="center">
             <img src={logo} className={styles.headerIcon} aria-hidden="true" alt="" />

diff --git a/static/assets/index-d7fde50f.js → static/assets/index-c9d5b6cf.js b/static/assets/index-d7fde50f.js → static/assets/index-c9d5b6cf.js
diff --git a/static/assets/index-d7fde50f.js.map → static/assets/index-c9d5b6cf.js.map b/static/assets/index-d7fde50f.js.map → static/assets/index-c9d5b6cf.js.map
diff --git a/static/index.html b/static/index.html
@@ -21,7 +21,7 @@
       })(window, document, 'script', 'dataLayer', 'GTM-P3V3PJ6')
     </script>
     <!-- End Google Tag Manager -->
-    <script type="module" crossorigin src="/assets/index-d7fde50f.js"></script>
+    <script type="module" crossorigin src="/assets/index-c9d5b6cf.js"></script>
     <link rel="stylesheet" href="/assets/index-df35d7a3.css">
   </head>
   <body>