From 7e1ed710b433f8c22192bb209f1fd254a96cd031 Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:26:38 +0000
Subject: [PATCH 1/7] Component support for type

---
 src/components/Components/GlobalAlert.jsx | 33 ++++++++++++++++++-----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Components/GlobalAlert.jsx b/src/components/Components/GlobalAlert.jsx
index c0f1de8..7e4593a 100644
--- a/src/components/Components/GlobalAlert.jsx
+++ b/src/components/Components/GlobalAlert.jsx
@@ -1,12 +1,24 @@
-import * as React from 'react';
+import cx from 'classnames';
+import { useReducer } from 'react';
 
 // This component does have a JavaScript file, but it's only for adding `hidden`
 //    to the alert. This was as of 3.16.1, so things may change.
-export function GlobalAlert({ title, description, buttonText, url }) {
-  const [isHidden, hideAlert] = React.useReducer(() => true, false);
+/**
+ *
+ * @param {Object} props
+ * @param {('light'|'critical')} [props.type]
+ */
+export function GlobalAlert({ title, description, buttonText, url, type }) {
+  const [isHidden, hideAlert] = useReducer(() => true, false);
 
   return (
-    <div className="nsw-global-alert js-global-alert" role="alert" hidden={isHidden ? 'hidden' : null}>
+    <div
+      className={cx('nsw-global-alert js-global-alert', {
+        [`nsw-card--${type}`]: ['light', 'critical'].includes(type),
+      })}
+      role="alert"
+      hidden={isHidden ? 'hidden' : null}
+    >
       <div className="nsw-global-alert__wrapper">
         <div className="nsw-global-alert__content">
           <div className="nsw-global-alert__title">{title}</div>
@@ -19,8 +31,17 @@ export function GlobalAlert({ title, description, buttonText, url }) {
             </a>
           </p>
         ) : null}
-        <button className="nsw-icon-button js-close-alert" type="button" aria-expanded="true" onClick={hideAlert}>
-          <span className="material-icons nsw-material-icons" focusable="false" aria-hidden="true">
+        <button
+          className="nsw-icon-button js-close-alert"
+          type="button"
+          aria-expanded="true"
+          onClick={hideAlert}
+        >
+          <span
+            className="material-icons nsw-material-icons"
+            focusable="false"
+            aria-hidden="true"
+          >
             close
           </span>
           <span className="sr-only">Close message</span>

From 1fdc0423388e3e7383e6ba47bc7036351201b389 Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:26:50 +0000
Subject: [PATCH 2/7] Don't show close button in edit mode

---
 src/theme/edit.scss | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/theme/edit.scss b/src/theme/edit.scss
index e21d291..8edcecb 100644
--- a/src/theme/edit.scss
+++ b/src/theme/edit.scss
@@ -57,11 +57,15 @@
   .block.form .volto-subblocks-wrapper .field:has([inert]) {
     cursor: default !important;
   }
-}
 
-// Columns block editing fixes
-.columns-block {
-  .nsw-col .blocks-form > fieldset {
-    min-inline-size: initial;
+  // Columns block editing fixes
+  .columns-block {
+    .nsw-col .blocks-form > fieldset {
+      min-inline-size: initial;
+    }
+  }
+  // Hide the close button on the global alert in edit mode
+  .nsw-global-alert .js-close-alert {
+    display: none;
   }
 }

From 4f0de9f8dc7be405d9322aab57b6965b52171348 Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:26:56 +0000
Subject: [PATCH 3/7] format

---
 src/components/Blocks/GlobalAlert/View.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Blocks/GlobalAlert/View.jsx b/src/components/Blocks/GlobalAlert/View.jsx
index 2933199..57e7b93 100644
--- a/src/components/Blocks/GlobalAlert/View.jsx
+++ b/src/components/Blocks/GlobalAlert/View.jsx
@@ -2,5 +2,12 @@ import { GlobalAlert } from 'nsw-design-system-plone6/components/Components/Glob
 
 export function GlobalAlertView({ data }) {
   const { title, description, buttonText, url } = data;
-  return <GlobalAlert title={title} description={description} buttonText={buttonText} url={url} />;
+  return (
+    <GlobalAlert
+      title={title}
+      description={description}
+      buttonText={buttonText}
+      url={url}
+    />
+  );
 }

From 837ca96d78b0b7742556d7fbfb37936016750236 Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:27:15 +0000
Subject: [PATCH 4/7] Format

---
 src/components/Blocks/GlobalAlert/Edit.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Blocks/GlobalAlert/Edit.jsx b/src/components/Blocks/GlobalAlert/Edit.jsx
index 37269e4..f67b79b 100644
--- a/src/components/Blocks/GlobalAlert/Edit.jsx
+++ b/src/components/Blocks/GlobalAlert/Edit.jsx
@@ -1,5 +1,5 @@
-import config from '@plone/volto/registry';
 import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 import { GlobalAlertView } from './View';
 import { globalAlertSchema } from './schema';
 

From 7d4d9c90338f9d653a1e8efd7cc34276f39087ba Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:31:13 +0000
Subject: [PATCH 5/7] Typo in css

---
 src/components/Components/GlobalAlert.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Components/GlobalAlert.jsx b/src/components/Components/GlobalAlert.jsx
index 7e4593a..520688a 100644
--- a/src/components/Components/GlobalAlert.jsx
+++ b/src/components/Components/GlobalAlert.jsx
@@ -14,7 +14,7 @@ export function GlobalAlert({ title, description, buttonText, url, type }) {
   return (
     <div
       className={cx('nsw-global-alert js-global-alert', {
-        [`nsw-card--${type}`]: ['light', 'critical'].includes(type),
+        [`nsw-global-alert--${type}`]: ['light', 'critical'].includes(type),
       })}
       role="alert"
       hidden={isHidden ? 'hidden' : null}

From 06069296ae49d774919ce4b11dba8bccb7a1c13f Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:31:32 +0000
Subject: [PATCH 6/7] Add state field to block in CMS

---
 src/components/Blocks/GlobalAlert/View.jsx  |  3 ++-
 src/components/Blocks/GlobalAlert/schema.js | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Blocks/GlobalAlert/View.jsx b/src/components/Blocks/GlobalAlert/View.jsx
index 57e7b93..f3a61ea 100644
--- a/src/components/Blocks/GlobalAlert/View.jsx
+++ b/src/components/Blocks/GlobalAlert/View.jsx
@@ -1,13 +1,14 @@
 import { GlobalAlert } from 'nsw-design-system-plone6/components/Components/GlobalAlert';
 
 export function GlobalAlertView({ data }) {
-  const { title, description, buttonText, url } = data;
+  const { title, description, buttonText, url, state } = data;
   return (
     <GlobalAlert
       title={title}
       description={description}
       buttonText={buttonText}
       url={url}
+      type={state}
     />
   );
 }
diff --git a/src/components/Blocks/GlobalAlert/schema.js b/src/components/Blocks/GlobalAlert/schema.js
index bddc697..01d4963 100644
--- a/src/components/Blocks/GlobalAlert/schema.js
+++ b/src/components/Blocks/GlobalAlert/schema.js
@@ -4,7 +4,7 @@ export function globalAlertSchema({ intl }) {
       {
         id: 'default',
         title: 'Default',
-        fields: ['title', 'description', 'buttonText', 'url'],
+        fields: ['title', 'description', 'buttonText', 'url', 'state'],
         required: ['title'],
       },
     ],
@@ -35,6 +35,20 @@ export function globalAlertSchema({ intl }) {
         }),
         widget: 'url',
       },
+      state: {
+        title: intl.formatMessage({
+          id: 'State',
+          defaultMessage: 'state',
+        }),
+        type: 'string',
+        factory: 'Choice',
+        choices: [
+          ['information', 'Information'],
+          ['light', 'Light'],
+          ['critical', 'Critical'],
+        ],
+        default: 'information',
+      },
     },
   };
 }

From f0eacf9e56855777c548d5651ead6b9c51bedb19 Mon Sep 17 00:00:00 2001
From: "me@jeffersonbledsoe.com" <me@jeffersonbledsoe.com>
Date: Fri, 6 Dec 2024 01:58:31 +0000
Subject: [PATCH 7/7] Use cookie for persistence

---
 src/components/Components/GlobalAlert.jsx | 48 +++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/Components/GlobalAlert.jsx b/src/components/Components/GlobalAlert.jsx
index 520688a..0217838 100644
--- a/src/components/Components/GlobalAlert.jsx
+++ b/src/components/Components/GlobalAlert.jsx
@@ -1,5 +1,36 @@
 import cx from 'classnames';
-import { useReducer } from 'react';
+import { useEffect, useReducer, useState } from 'react';
+
+function useIsBrowser() {
+  const [isHidden, enableBrowser] = useReducer(() => true, false);
+  useEffect(() => {
+    enableBrowser();
+  }, []);
+  return isHidden;
+}
+
+// Taken from https://github.com/digitalnsw/nsw-design-system/blob/2e3c1a8fb53a528caade836a56efb60c31ae006d/src/components/global-alert/global-alert.js#L31-L48
+function setCookie(name, value, days) {
+  const date = new Date();
+  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+  const expires = `expires=${date.toUTCString()}`;
+  document.cookie = `${name}=${value};${expires};path=/`;
+}
+
+// Taken from https://github.com/digitalnsw/nsw-design-system/blob/2e3c1a8fb53a528caade836a56efb60c31ae006d/src/components/global-alert/global-alert.js#L31-L48
+function getCookie(name) {
+  const nameEQ = `${name}=`;
+  const ca = document.cookie.split(';');
+  for (let i = 0; i < ca.length; i += 1) {
+    let c = ca[i];
+    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+
+// TODO: Support customising cookie
+const cookieName = 'nsw-plone6-cookie-global-alert-hidden';
 
 // This component does have a JavaScript file, but it's only for adding `hidden`
 //    to the alert. This was as of 3.16.1, so things may change.
@@ -9,7 +40,18 @@ import { useReducer } from 'react';
  * @param {('light'|'critical')} [props.type]
  */
 export function GlobalAlert({ title, description, buttonText, url, type }) {
-  const [isHidden, hideAlert] = useReducer(() => true, false);
+  const isBrowser = useIsBrowser();
+  function shouldShowBanner() {
+    const value = isBrowser && getCookie(cookieName) === 'dismissed';
+    return value;
+  }
+  // Useless bit of state to force a re-render.
+  const [_, setIsHidden] = useState(shouldShowBanner());
+
+  function hideAlert() {
+    setCookie(cookieName, 'dismissed', 7);
+    setIsHidden(true);
+  }
 
   return (
     <div
@@ -17,7 +59,7 @@ export function GlobalAlert({ title, description, buttonText, url, type }) {
         [`nsw-global-alert--${type}`]: ['light', 'critical'].includes(type),
       })}
       role="alert"
-      hidden={isHidden ? 'hidden' : null}
+      hidden={shouldShowBanner() ? 'hidden' : null}
     >
       <div className="nsw-global-alert__wrapper">
         <div className="nsw-global-alert__content">