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';
diff --git a/src/components/Blocks/GlobalAlert/View.jsx b/src/components/Blocks/GlobalAlert/View.jsx
index 2933199..f3a61ea 100644
--- a/src/components/Blocks/GlobalAlert/View.jsx
+++ b/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 ;
+ const { title, description, buttonText, url, state } = data;
+ return (
+
+ );
}
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',
+ },
},
};
}
diff --git a/src/components/Components/GlobalAlert.jsx b/src/components/Components/GlobalAlert.jsx
index c0f1de8..0217838 100644
--- a/src/components/Components/GlobalAlert.jsx
+++ b/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 (
-
+
{title}
@@ -19,8 +73,17 @@ export function GlobalAlert({ title, description, buttonText, url }) {
) : null}
-