From f64ad930fae2a09817d41d45f1daf41ddf9bd8c6 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Wed, 27 Mar 2024 17:24:19 +1100 Subject: [PATCH 01/24] Initial setup of Cookie banner. --- .../cookie-banner/_cookie-banner.hbs | 15 ++++ .../cookie-banner/_cookie-banner.scss | 68 +++++++++++++++++++ src/components/cookie-banner/_guidance.hbs | 33 +++++++++ src/components/cookie-banner/blank.hbs | 12 ++++ src/components/cookie-banner/cookie-banner.js | 21 ++++++ src/components/cookie-banner/index.hbs | 22 ++++++ .../cookie-banner/json/cookie-banner.json | 6 ++ src/components/cookie-banner/theme.hbs | 14 ++++ 8 files changed, 191 insertions(+) create mode 100644 src/components/cookie-banner/_cookie-banner.hbs create mode 100644 src/components/cookie-banner/_cookie-banner.scss create mode 100644 src/components/cookie-banner/_guidance.hbs create mode 100644 src/components/cookie-banner/blank.hbs create mode 100644 src/components/cookie-banner/cookie-banner.js create mode 100644 src/components/cookie-banner/index.hbs create mode 100644 src/components/cookie-banner/json/cookie-banner.json create mode 100644 src/components/cookie-banner/theme.hbs diff --git a/src/components/cookie-banner/_cookie-banner.hbs b/src/components/cookie-banner/_cookie-banner.hbs new file mode 100644 index 00000000..061f5eb3 --- /dev/null +++ b/src/components/cookie-banner/_cookie-banner.hbs @@ -0,0 +1,15 @@ + diff --git a/src/components/cookie-banner/_cookie-banner.scss b/src/components/cookie-banner/_cookie-banner.scss new file mode 100644 index 00000000..98b8ac74 --- /dev/null +++ b/src/components/cookie-banner/_cookie-banner.scss @@ -0,0 +1,68 @@ +.nsw-global-alert { + padding: rem(24px) 0; + background-color: var(--nsw-status-info); + color: var(--nsw-text-light); + + .nsw-icon-button { + position: absolute; + top: rem(-8px); + right: rem(4px); + color: var(--nsw-text-light); + + &:hover { + @include nsw-hover; + background-color: var(--nsw-hover-light); + } + + &:focus { + @include nsw-focus($color: var(--nsw-text-light)); + } + } + + &__wrapper { + @include container; + position: relative; + } + + &__title { + @include font-size('md'); + font-weight: var(--nsw-font-bold); + } + + &__content { + margin-right: rem(36px); + + a { + @include link-light; + } + } + + .nsw-button { + margin-right: 0; + } + + &--critical { + background-color: var(--nsw-status-error); + } + + &--light { + background-color: var(--nsw-status-info-bg); + color: var(--nsw-text-dark); + + .nsw-global-alert__content a { + @include link-dark; + } + + .nsw-icon-button { + color: var(--nsw-brand-dark); + + &:hover { + background-color: var(--nsw-hover); + } + + &:focus { + outline-color: var(--nsw-focus); + } + } + } +} diff --git a/src/components/cookie-banner/_guidance.hbs b/src/components/cookie-banner/_guidance.hbs new file mode 100644 index 00000000..9d409a4e --- /dev/null +++ b/src/components/cookie-banner/_guidance.hbs @@ -0,0 +1,33 @@ +--- +title: Cookie banner +layout: blank-layout.hbs +--- + +

Usage

+

Global alerts are designed to capture the attention of the user in a deliberately intrusive way. They persist over a session but are user dismissible, and are purposefully created and not initiated by a user interaction or system event.

+

Use global alerts:

+ +

Do:

+ + +

Global alert states

+

Global alerts are styled according to their purpose:

+ + +

When to avoid

+

Do not display in response to an action initiated by a user interaction or system event.

+ +

Accessibility

+

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

diff --git a/src/components/cookie-banner/blank.hbs b/src/components/cookie-banner/blank.hbs new file mode 100644 index 00000000..4175572e --- /dev/null +++ b/src/components/cookie-banner/blank.hbs @@ -0,0 +1,12 @@ +--- +title: Cookie banner +page: true +model: json/cookie-banner.json +--- + +{{>_cookie-banner model}} +{{>_cookie-banner model type="light"}} +{{>_cookie-banner model type="critical"}} +{{>_cookie-banner model link="true"}} +{{>_cookie-banner model link="true" type="light"}} +{{>_cookie-banner model link="true" type="critical"}} diff --git a/src/components/cookie-banner/cookie-banner.js b/src/components/cookie-banner/cookie-banner.js new file mode 100644 index 00000000..77c28e37 --- /dev/null +++ b/src/components/cookie-banner/cookie-banner.js @@ -0,0 +1,21 @@ +class CookieBanner { + constructor(element) { + this.messageElement = element + this.closeButton = element.querySelector('.js-close-alert') + this.closeMessageEvent = (e) => this.closeMessage(e) + } + + init() { + this.controls() + } + + controls() { + this.closeButton.addEventListener('click', this.closeMessageEvent, false) + } + + closeMessage() { + this.messageElement.hidden = true + } +} + +export default CookieBanner diff --git a/src/components/cookie-banner/index.hbs b/src/components/cookie-banner/index.hbs new file mode 100644 index 00000000..b627b7c9 --- /dev/null +++ b/src/components/cookie-banner/index.hbs @@ -0,0 +1,22 @@ +--- +title: Cookie banner +tabs: true +directory: cookie-banner +intro: Global alerts display across the top of an entire site to show important information to users. +figma: https://www.figma.com/file/PVrERKnckLTlJSPk12gbtS/NSW-Digital-Design-System?node-id=21298%3A24823 +model: json/cookie-banner.json +meta-description: Global alerts display across the top of an entire site to show important information to users. +meta-index: true +--- + +

Information

+{{#>_docs-example}}{{>_cookie-banner model}}{{/_docs-example}} +{{#>_docs-example separated="true"}}{{>_cookie-banner model link="true"}}{{/_docs-example}} + +

Light

+{{#>_docs-example}}{{>_cookie-banner model type="light"}}{{/_docs-example}} +{{#>_docs-example separated="true"}}{{>_cookie-banner model link="true" type="light"}}{{/_docs-example}} + +

Critical

+{{#>_docs-example}}{{>_cookie-banner model type="critical"}}{{/_docs-example}} +{{#>_docs-example separated="true"}}{{>_cookie-banner model link="true" type="critical"}}{{/_docs-example}} diff --git a/src/components/cookie-banner/json/cookie-banner.json b/src/components/cookie-banner/json/cookie-banner.json new file mode 100644 index 00000000..7fef6ef2 --- /dev/null +++ b/src/components/cookie-banner/json/cookie-banner.json @@ -0,0 +1,6 @@ +{ + "title": "Cookies on Digital NSW website", + "content": "We've added some small pieces of information, called cookies, to your device to make our website work.

Non-essential cookies:

We would also like to use additional information to understand how you use the website and make improvements. You can read more about cookies before making a choice.

", + "ctaText": "More information", + "ctaHref": "#" +} diff --git a/src/components/cookie-banner/theme.hbs b/src/components/cookie-banner/theme.hbs new file mode 100644 index 00000000..5bd59509 --- /dev/null +++ b/src/components/cookie-banner/theme.hbs @@ -0,0 +1,14 @@ +--- +title: Cookie banner +page: true +model: json/cookie-banner.json +--- + +{{#>_theme}} +{{>_cookie-banner model}} +{{>_cookie-banner model type="light"}} +{{>_cookie-banner model type="critical"}} +{{>_cookie-banner model link="true"}} +{{>_cookie-banner model link="true" type="light"}} +{{>_cookie-banner model link="true" type="critical"}} +{{/_theme}} \ No newline at end of file From 5b29c41d4c7f613b94936c82ff36e17a6fff3414 Mon Sep 17 00:00:00 2001 From: Jim Carlton Date: Tue, 13 Aug 2024 11:03:44 +1000 Subject: [PATCH 02/24] Adds base styles of variations and base functionality --- .../cookie-banner/_cookie-banner.hbs | 24 ++++++++--------- .../cookie-banner/_cookie-banner.scss | 27 ++++++++++++------- src/components/cookie-banner/blank.hbs | 14 +++++----- src/components/cookie-banner/cookie-banner.js | 17 +++++++++--- src/components/cookie-banner/index.hbs | 6 ++++- .../cookie-banner/json/cookie-banner-1.json | 7 +++++ .../cookie-banner/json/cookie-banner-2.json | 6 +++++ .../cookie-banner/json/cookie-banner-3.json | 7 +++++ .../cookie-banner/json/cookie-banner.json | 6 ----- src/components/cookie-banner/theme.hbs | 9 ++++--- src/main.js | 12 +++++++-- src/main.scss | 1 + 12 files changed, 90 insertions(+), 46 deletions(-) create mode 100644 src/components/cookie-banner/json/cookie-banner-1.json create mode 100644 src/components/cookie-banner/json/cookie-banner-2.json create mode 100644 src/components/cookie-banner/json/cookie-banner-3.json delete mode 100644 src/components/cookie-banner/json/cookie-banner.json diff --git a/src/components/cookie-banner/_cookie-banner.hbs b/src/components/cookie-banner/_cookie-banner.hbs index 061f5eb3..acb8e072 100644 --- a/src/components/cookie-banner/_cookie-banner.hbs +++ b/src/components/cookie-banner/_cookie-banner.hbs @@ -1,15 +1,13 @@ -