Global alert level configuration and persistence across sessions

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';
 

src/components/Blocks/GlobalAlert/View.jsx

@@ -1,6 +1,14 @@
 import { GlobalAlert } from 'nsw-design-system-plone6/components/Components/GlobalAlert';
 
 export function GlobalAlertView({ data }) {
-  const { title, description, buttonText, url } = data;
-  return <GlobalAlert title={title} description={description} buttonText={buttonText} url={url} />;
+  const { title, description, buttonText, url, state } = data;
+  return (
+    <GlobalAlert
+      title={title}
+      description={description}
+      buttonText={buttonText}
+      url={url}
+      type={state}
+    />
+  );
 }

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',
+      },
     },
   };
 }

src/components/Components/GlobalAlert.jsx

@@ -1,12 +1,66 @@
-import * as React from 'react';
+import cx from 'classnames';
+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.
-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 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 className="nsw-global-alert js-global-alert" role="alert" hidden={isHidden ? 'hidden' : null}>
+    <div
+      className={cx('nsw-global-alert js-global-alert', {
+        [`nsw-global-alert--${type}`]: ['light', 'critical'].includes(type),
+      })}
+      role="alert"
+      hidden={shouldShowBanner() ? 'hidden' : null}
+    >
       <div className="nsw-global-alert__wrapper">
         <div className="nsw-global-alert__content">
           <div className="nsw-global-alert__title">{title}</div>
@@ -19,8 +73,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>

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;
   }
 }