digitalnsw · oisa · Mar 27, 2024 · Aug 13, 2024 · Aug 15, 2024 · Aug 26, 2024
diff --git a/.eslintrc b/.eslintrc
@@ -5,7 +5,8 @@
     "linebreak-style": 0,
     "max-len": [1, 130, 2],
     "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
-    "semi": [2, "never"]
+    "semi": [2, "never"],
+    "no-new": "off"
   },
   "env": {
     "browser": true,

diff --git a/HTMLstarterkit.zip b/HTMLstarterkit.zip
diff --git a/gulpfile.js b/gulpfile.js
@@ -95,6 +95,23 @@ function lintStyles() {
     }))
 }
 
+function removeCookieConsentCSS() {
+  return src('dist/**/*.js')
+    .pipe(
+      inject.append(`
+        document.addEventListener('DOMContentLoaded', () => {
+          const unwantedStylesheet = Array.from(document.querySelectorAll('link')).find(
+            link => link.href.includes('cookieconsent.css')
+          );
+          if (unwantedStylesheet) {
+            unwantedStylesheet.remove();
+          }
+        });
+      `)
+    )
+    .pipe(dest('dist'));
+}
+
 function generateSitemap() {
   return src(['./dist/**/*.html', '!**/blank.html'], { read: false })
     .pipe(sitemap({ siteUrl: config.baseUrl.full }))
@@ -315,14 +332,14 @@ function renamePathForProd() {
 
 function addAnalytics() {
   return src(`${config.dir.build}/**/*.html`)
-  .pipe(inject.after('<head>', `<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  .pipe(inject.after('<head>', `<script data-category="analytics">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-P2NKBBJZ');</script>
   `))
-    .pipe(inject.after('<head>', `<script async src="https://www.googletagmanager.com/gtag/js?id=G-49T9M12F86"></script>
-<script>
+    .pipe(inject.after('<head>', `<script async data-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-49T9M12F86"></script>
+<script data-category="analytics">
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
@@ -343,7 +360,7 @@ function bumping() {
 }
 
 const styles = series(lintStyles, buildStyles, buildCoreStyles, buildDocStyles)
-const javascript = series(lintJavascript, compileJS, compileTypes, compileDocsJS)
+const javascript = series(lintJavascript, compileJS, compileTypes, compileDocsJS, removeCookieConsentCSS)
 
 function watchFiles(done) {
   watch(config.scss.watch, series(styles, reload))

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -109,5 +109,9 @@
     "gulp-better-rollup": {
       "rollup": "^1||^2||^3"
     }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.7",
+    "vanilla-cookieconsent": "^3.0.1"
   }
 }
diff --git a/src/components/_all.scss b/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';

diff --git a/src/components/cookie-consent/_cookie-consent.hbs b/src/components/cookie-consent/_cookie-consent.hbs
@@ -0,0 +1,7 @@
+{{#if-equals type "banner"}}
+<a href="#" class="js-open-banner-cookie-consent" aria-haspopup="dialog">Trigger consent banner</a>
+{{/if-equals}}
+
+{{#if-equals type "dialog"}}
+<a href="#" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">Trigger cookie preferences</a>
+{{/if-equals}}
diff --git a/src/components/cookie-consent/_cookie-consent.scss b/src/components/cookie-consent/_cookie-consent.scss
@@ -0,0 +1,181 @@
+.nsw-cookie-banner {
+  padding: rem(24px) 0;
+  background-color: var(--nsw-brand-light);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+
+  .nsw-icon-button {
+    position: absolute;
+    top: rem(-8px);
+    right: rem(4px);
+
+    &: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: rem(16px) rem(36px) rem(24px) 0;
+  }
+
+  &__buttons-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: rem(16px);
+    margin-top: rem(16px);
+  }
+
+  &--light {
+    background-color: var(--nsw-status-info-bg);
+    color: var(--nsw-text-dark);
+
+    .nsw-cookie-banner__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);
+      }
+    }
+  }
+}
+
+.nsw-cookie-dialog {
+  z-index: 1100;
+
+  .nsw-dialog__top {
+    position: sticky;
+    top: 0;
+    background: var(--nsw-white);
+  }
+
+  &__bottom {
+    border-top: 1px solid var(--nsw-grey-04);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    padding: rem(16px);
+
+    @include breakpoint('md') {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    @include breakpoint('lg') {
+      padding: rem(32px);
+    }
+
+    button {
+      margin-bottom: rem(16px);
+
+      @include breakpoint('md') {
+        margin-bottom: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+
+        @include breakpoint('md') {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &__cta-group {
+    display: flex;
+    gap: rem(16px);
+
+    @include breakpoint('md') {
+      flex-direction: row;
+    }
+  }
+
+  .nsw-dialog__content {
+    padding-top: rem(16px);
+    padding-bottom: rem(16px);
+  }
+
+  .nsw-tabs__content {
+    border: 0;
+    -webkit-overflow-scrolling: auto;
+    max-height: 320px;
+    padding-left: 8px;
+    overflow: scroll;
+
+    &:focus-visible {
+      outline: 2px solid var(--nsw-brand-dark);
+      border: 0;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: var(--nsw-grey-03);
+      box-shadow: 0 0 1px var(--nsw-grey-03);
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    gap: rem(8px);
+  }
+
+  &__list-item {
+    display: flex;
+    flex-direction: column;
+    gap: rem(8px);
+
+    label {
+      @include font-size('md');
+      font-weight: var(--nsw-font-bold);
+      cursor: pointer;
+    }
+
+    &:not(:nth-child(1)) {
+      border-top: 1px solid var(--nsw-grey-04);
+      padding-top: rem(28px);
+    }
+  }
+
+  &__cookie-details {
+    margin-left: 48px;
+  }
+}