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 ( -