feat: alert banner styling updates

hashicorp · Apr 18, 2024 · 41591eb · 41591eb
1 parent 18198c8
commit 41591eb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 82 deletions.
diff --git a/.changeset/tiny-waves-dance.md b/.changeset/tiny-waves-dance.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-alert-banner': minor
+---
+
+alert banner styling updates
diff --git a/packages/alert-banner/index.tsx b/packages/alert-banner/index.tsx
@@ -4,18 +4,14 @@
  */
 
 import { useEffect, useState } from 'react'
-import cookie from 'js-cookie'
-import slugify from 'slugify'
 import classNames from 'classnames'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import useProductMeta, {
   Products as HashiCorpProduct,
 } from '@hashicorp/platform-product-meta'
-import Image from 'next/image'
-import CloseIcon from './img/close-icon.svg'
 import fragment from './fragment.graphql'
 import s from './style.module.css'
 import analytics from './analytics'
+import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
 
 interface AlertBannerProps {
   tag: string
@@ -43,41 +39,23 @@ function AlertBanner({
   text,
   url,
 }: AlertBannerProps): React.ReactElement {
-  const dismissalCookieId = `banner_${name || slugify(text, { lower: true })}`
-
   const [isShown, setIsShown] = useState(() => {
     const hasExpired = expirationDate && Date.now() > Date.parse(expirationDate)
-    const hasBeenDismissed =
-      typeof window === 'undefined'
-        ? false
-        : cookie.get(dismissalCookieId) === '1'
 
-    return !hasExpired && !hasBeenDismissed
+    return !hasExpired
   })
   const { themeClass } = useProductMeta(product)
 
   /**
-   * On mount, hide the banner if it is expired or
-   * if a cookie indicates it was previously closed
+   * On mount, hide the banner if it is expired
    */
   useEffect(() => {
-    const hasBeenDismissed = cookie.get(dismissalCookieId)
     const hasExpired = expirationDate && Date.now() > Date.parse(expirationDate)
-    const shouldBeShown = !hasBeenDismissed && !hasExpired
+    const shouldBeShown = !hasExpired
     setIsShown((current) =>
       current !== shouldBeShown ? shouldBeShown : current
     )
-  }, [dismissalCookieId, expirationDate])
-
-  /**
-   * Dismiss the banner, and set a cookie
-   * to remember the dismissal of this banner
-   */
-  function closeBanner() {
-    cookie.set(dismissalCookieId, '1')
-    setIsShown(false)
-    analytics.trackClose({ linkText, product, tag, text })
-  }
+  }, [expirationDate])
 
   return (
     <>
@@ -100,35 +78,15 @@ function AlertBanner({
             <span className={s.text}>
               {text}
               {linkText ? (
-                <span className={s.linkText}> {linkText}</span>
+                <span className={s.link}>
+                  <span className={s.linkText}> {linkText}</span>
+                  <IconArrowRight16 />
+                </span>
               ) : null}
             </span>
           </span>
         </a>
-        <button className={s.closeButton} onClick={closeBanner}>
-          <Image alt="Close" {...CloseIcon} />
-          <VisuallyHidden>Dismiss alert</VisuallyHidden>
-        </button>
       </div>
-      {/* This inline script checks if the alert banner has been previously dismissed, and if so it removes the isShown class.
-      The render-blocking inline script ensures the class is removed before the first paint, preventing layout shift. */}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-(function checkDismissAlertBanner() {
-  try {
-    if (document.cookie.includes('${dismissalCookieId}=1')) {
-      const element = document.querySelector('.${s.root}')
-      element.classList.remove('${s.isShown}')
-    }
-  } catch (_) {
-    // do nothing
-  }
-})()
-`,
-        }}
-        type="text/javascript"
-      />
     </>
   )
 }

diff --git a/packages/alert-banner/style.module.css b/packages/alert-banner/style.module.css
@@ -4,6 +4,9 @@
  */
 
 .root {
+  --token-color-foreground-primary: #3b3d45;
+  --token-color-foreground-faint: #656a76;
+
   display: none;
   overflow: hidden;
   position: relative;
@@ -24,7 +27,7 @@
 
 .linkElem {
   background: var(--brand-secondary);
-  color: var(--black);
+  color: var(--token-color-foreground-faint);
   display: block;
   position: relative;
 }
@@ -34,9 +37,9 @@
   align-items: flex-start;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  padding-bottom: 15px;
-  padding-top: 15px;
+  min-height: 32px;
+  margin: 0;
+  padding: 4px 0 4px 10px;
 
   @media (min-width: 576px) {
     flex-direction: row;
@@ -47,18 +50,18 @@
   align-items: center;
   composes: g-type-body-small-x-strong from global;
   display: flex;
-  margin-right: 11px;
+  margin-right: 8px;
   position: relative;
   white-space: nowrap;
 
   /* Vertical divider using ::after pseudo class */
   &::after {
     content: '';
     height: 16px;
-    background: black;
+    background: var(--token-color-foreground-faint);
     width: 1px;
     display: block;
-    margin-left: 11px;
+    margin-left: 8px;
   }
 }
 
@@ -76,39 +79,24 @@
   }
 }
 
-.linkText {
+.link {
+  color: var(--token-color-foreground-primary);
   composes: g-type-body-small-x-strong from global;
   display: none;
 
   @media (min-width: 992px) {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     margin-left: 8px;
-    text-decoration: underline;
     white-space: nowrap;
   }
 }
 
-.closeButton {
-  background: none;
-  border: none;
-  margin: 0;
-  opacity: 0.75;
-  padding: 0;
-  position: absolute;
-  right: 24px;
-  top: 16px;
-  transition: opacity 0.15s;
-  z-index: 2;
-
-  & > svg {
-    display: block;
-    & [stroke] {
-      stroke: var(--black);
-    }
-  }
-
+.linkText {
   &:hover {
-    cursor: pointer;
-    opacity: 1;
+    text-decoration: underline;
   }
+
+  margin-right: 6px;
 }