changing color of banner and adding close icon

Author: runemadsen

content/sitewide/banner.json

@@ -1,5 +1,5 @@
 {
-  "visible": false,
+  "visible": true,
   "text": "This is some text",
   "url": "https://designsystems.international"
 }

src/components/Banner.js

@@ -1,12 +1,45 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
+import { slugify } from '../utils';
 import * as css from './Banner.module.css';
 
 export const Banner = ({ text, url }) => {
-  return (
-    <a href={url} target="_blank" className={css.root}>
-      {text}
-    </a>
-  );
+  const [visible, setVisible] = useState(false);
+  const key = slugify(text);
+
+  const hide = () => {
+    if (window.localStorage) {
+      window.localStorage.setItem(
+        `banner-${key}`,
+        JSON.stringify({
+          visible: false
+        })
+      );
+    }
+    setVisible(false);
+  };
+
+  // Only show the banner if this text has not been dismissed yet
+  useEffect(() => {
+    if (window.localStorage) {
+      const savedState = window.localStorage.getItem(`banner-${key}`);
+      if (savedState) {
+        setVisible(JSON.parse(savedState).visible);
+      } else {
+        setVisible(true);
+      }
+    }
+  }, [key]);
+
+  return visible ? (
+    <div className={css.root}>
+      <a className={css.link} href={url} target="_blank" rel="noreferrer">
+        {text}
+      </a>
+      <button className={css.close} onClick={hide}>
+        x
+      </button>
+    </div>
+  ) : null;
 };
 
 export default memo(Banner);

src/components/Banner.module.css

@@ -1,9 +1,23 @@
 .root {
-  display: block;
   text-align: center;
-  background-color: var(--processing-blue-gradient);
-  padding: var(--margin-quarter);
-  font-size: var(--text-small);
-  color: var(--processing-blue-dark);
+  background-color: var(--processing-blue-deep);
+  color: white;
+  font-size: var(--text-normal);
   margin-top: -2px;
+  display: flex;
+}
+
+.link {
+  display: block;
+  padding: var(--margin-quarter);
+  flex: 1;
+}
+
+.close {
+  flex: 0 0 60px;
+  cursor: pointer;
+  background: none;
+  color: white;
+  border: none;
+  font-size: var(--text-large);
 }