nsw-design-system 3.2.0 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nsw-design-system",
-  "version": "3.2.0",
+  "version": "3.2.3",
   "description": "Design system for Digital NSW",
   "main": "dist/main.js",
   "style": "dist/main.css",

package/src/components/footer/_footer.scss

@@ -104,6 +104,30 @@
     }
   }
 
+  &__links {
+    @include breakpoint('md') {
+      display: flex;
+      justify-content: space-between;
+      margin-top: rem(-16px);
+    }
+  }
+
+  &__social {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0 rem(-12px);
+    padding: rem(8px) 0 rem(12px) 0;
+
+    @include breakpoint('md') {
+      padding-bottom: rem(8px);
+    }
+
+    a {
+      margin: 0 rem(4px);
+    }
+  }
+
   &__info {
     @include breakpoint('md') {
       display: flex;
@@ -124,4 +148,25 @@
       text-align: right;
     }
   }
+
+  &--dark {
+    .nsw-footer__lower {
+      background-color: var(--nsw-brand-dark);
+    }
+  }
+
+  &--light {
+    hr {
+      background-color: var(--nsw-grey-02);
+    }
+
+    .nsw-footer__lower {
+      background-color: var(--nsw-brand-light);
+      color: var(--nsw-text-dark);
+
+      a {
+        @include link-dark;
+      }
+    }
+  }
 }

package/src/components/form/_form.scss

@@ -174,7 +174,7 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 rem(36px);
+      padding: 0 rem(24px);
       margin: 0;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
@@ -188,20 +188,21 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
 
     .nsw-material-icons {
       display: block;
-      color: var(--nsw-brand-dark);
-      font-size: rem(map-get($nsw-icon-sizes, 30));
+      font-size: rem(map-get($nsw-icon-sizes, 36));
       position: static;
     }
 
     &--icon {
       .nsw-button {
         padding: 0;
-        min-width: rem(48px);
+        min-width: rem(60px);
         border-color: var(--nsw-grey-01);
         border-left-width: 0;
+      }
 
-        &:hover {
-          background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
+      .nsw-button--white {
+        .nsw-material-icons {
+          color: var(--nsw-brand-dark);
         }
       }
     }
@@ -210,14 +211,6 @@ $nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000
       .nsw-form__input {
         padding: rem(16px);
       }
-
-      .nsw-button {
-        min-width: rem(58px);
-      }
-
-      .nsw-material-icons {
-        font-size: rem(map-get($nsw-icon-sizes, 36));
-      }
     }
   }
 

package/src/components/hero-banner/_hero-banner.scss

@@ -134,7 +134,7 @@
 
     @include breakpoint('xl') {
       width: 50%;
-      padding-left: calc(var(--nsw-container-width)/12+#{rem($grid-gutters)}*2);
+      padding-left: calc(var(--nsw-container-width)/12 + #{rem($grid-gutters)}*2);
     }
   }
 
@@ -174,6 +174,10 @@
     }
   }
 
+  &--off-white {
+    background-color: var(--nsw-off-white);
+  }
+
   &--dark {
     background-color: var(--nsw-brand-dark);
 
@@ -226,7 +230,7 @@
 
       @include breakpoint('xl') {
         width: 50%;
-        padding-left: calc(var(--nsw-container-width)/4+#{rem($grid-gutters)}*2);
+        padding-left: calc(var(--nsw-container-width)/4 + #{rem($grid-gutters)}*2);
       }
     }
   }

package/src/components/main-nav/main-nav.js

@@ -139,9 +139,12 @@ class Navigation {
   }
 
   buttonClickDesktop(e) {
-    this.saveElements(e)
-    this.toggleSubNavDesktop()
-    e.preventDefault()
+    const isDesktop = this.breakpoint.matches
+    if (!isDesktop || !e.target.closest('.nsw-main-nav__sub-nav')) {
+      this.saveElements(e)
+      this.toggleSubNavDesktop()
+      e.preventDefault()
+    }
   }
 
   buttonKeydownDesktop(e) {