Updates Cookie banner to Cookie consent

src/components/_all.scss

@@ -6,6 +6,7 @@
 @import 'card/card';
 @import 'card-carousel/carousel';
 @import 'content-block/content-block';
+@import 'cookie-consent/cookie-consent';
 @import 'date-input/date-input';
 @import 'date-picker/date-picker';
 @import 'dialog/dialog';

src/components/cookie-consent/blank.hbs

@@ -0,0 +1,12 @@
+---
+title: Cookie consent
+page: true
+model: 
+  cookie-consent-1: json/cookie-consent-1.json
+  cookie-consent-2: json/cookie-consent-2.json
+  cookie-consent-3: json/cookie-consent-3.json
+---
+
+{{>_cookie-consent model.cookie-consent-1}}
+{{>_cookie-consent model.cookie-consent-2}}
+{{>_cookie-consent model.cookie-consent-3}}

src/components/cookie-banner/cookie-banner.js → src/components/cookie-consent/cookie-consent.js

@@ -22,7 +22,7 @@ function blockCookies() {
   })
 }
 
-class CookieBanner {
+class CookieConsent {
   constructor(element) {
     this.bannerElement = element
     this.bannerMainMessage = element.querySelector('.nsw-cookie-banner__main-message')
@@ -107,4 +107,4 @@ class CookieBanner {
   }
 }
 
-export default CookieBanner
+export default CookieConsent

src/components/cookie-banner/index.hbs → src/components/cookie-consent/index.hbs

@@ -1,20 +1,20 @@
 ---
-title: Cookie banner
+title: Cookie consent
 tabs: true
 theme: true
-directory: cookie-banner
+directory: cookie-consent
 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
 meta-description: Global alerts display across the top of an entire site to show important information to users.
 meta-index: true
 model: 
-  cookie-banner-1: json/cookie-banner-1.json
-  cookie-banner-2: json/cookie-banner-2.json
-  cookie-banner-3: json/cookie-banner-3.json
+  cookie-consent-1: json/cookie-consent-1.json
+  cookie-consent-2: json/cookie-consent-2.json
+  cookie-consent-3: json/cookie-consent-3.json
 ---
 
 <h3>Auto opt-in</h3>
-{{#>_docs-example}}{{>_cookie-banner model.cookie-banner-1}}{{/_docs-example}}
+{{#>_docs-example}}{{>_cookie-consent model.cookie-consent-1}}{{/_docs-example}}
 
 <h3>Opt-in</h3>
-{{#>_docs-example}}{{>_cookie-banner model.cookie-banner-3}}{{/_docs-example}}
+{{#>_docs-example}}{{>_cookie-consent model.cookie-consent-3}}{{/_docs-example}}

src/components/cookie-consent/theme.hbs

@@ -0,0 +1,17 @@
+---
+title: Cookie consent
+page: true
+model: 
+  cookie-consent-1: json/cookie-consent-1.json
+  cookie-consent-2: json/cookie-consent-2.json
+  cookie-consent-3: json/cookie-consent-3.json
+---
+
+{{#>_theme}}
+{{>_cookie-consent model.cookie-consent-1}}
+{{>_cookie-consent model.cookie-consent-1 type="light"}}
+{{>_cookie-consent model type="critical"}}
+{{>_cookie-consent model link="true"}}
+{{>_cookie-consent model link="true" type="light"}}
+{{>_cookie-consent model link="true" type="critical"}}
+{{/_theme}}

src/main.js

@@ -2,7 +2,7 @@
 import Accordion from './components/accordion/accordion'
 import BackTop from './components/back-to-top/back-to-top'
 import Carousel from './components/card-carousel/carousel'
-import CookieBanner from './components/cookie-banner/cookie-banner'
+import CookieConsent from './components/cookie-consent/cookie-consent'
 import DatePicker from './components/date-picker/date-picker'
 import Dialog from './components/dialog/dialog'
 import ExternalLink from './components/link/link'
@@ -43,7 +43,7 @@ function initSite() {
   const backTop = document.querySelectorAll('button.js-back-to-top')
   const carousel = document.querySelectorAll('.js-carousel')
   const closeSearchButton = document.querySelectorAll('button.js-close-search')
-  const cookieBanner = document.querySelectorAll('.js-cookie-banner')
+  const cookieConsent = document.querySelectorAll('.js-cookie-consent')
   const datePicker = document.querySelectorAll('.js-date-input')
   const dialogs = document.querySelectorAll('.js-dialog')
   const fileUpload = document.querySelectorAll('.js-file-upload')
@@ -83,9 +83,9 @@ function initSite() {
     })
   }
 
-  if (cookieBanner) {
-    cookieBanner.forEach((element) => {
-      new CookieBanner(element).init()
+  if (cookieConsent) {
+    cookieConsent.forEach((element) => {
+      new CookieConsent(element).init()
     })
   }
 
@@ -173,5 +173,5 @@ function initSite() {
 }
 
 export {
-  initSite, Accordion, BackTop, Carousel, CookieBanner, DatePicker, Dialog, ExternalLink, FileUpload, Filters, GlobalAlert, Navigation, Popover, Select, SiteSearch, Tabs, Toggletip, Tooltip, UtilityList,
+  initSite, Accordion, BackTop, Carousel, CookieConsent, DatePicker, Dialog, ExternalLink, FileUpload, Filters, GlobalAlert, Navigation, Popover, Select, SiteSearch, Tabs, Toggletip, Tooltip, UtilityList,
 }

src/main.scss

@@ -16,7 +16,7 @@
 @import 'components/card/card';
 @import 'components/card-carousel/carousel';
 @import 'components/content-block/content-block';
-@import 'components/cookie-banner/cookie-banner';
+@import 'components/cookie-consent/cookie-consent';
 @import 'components/file-upload/file-upload';
 @import 'components/filters/filters';
 @import 'components/footer/footer';