nsw-design-system 2.14.2 → 3.0.3

package/src/components/footer/_footer.scss

@@ -1,182 +1,127 @@
 .nsw-footer {
-  font-family: var(--nsw-font-family);
-
   hr {
-    @include nsw-spacing(margin, md none md none);
+    margin: rem(16px) 0;
     height: 1px;
     border: 0;
-    color: var(--nsw-grey-03);
     background-color: var(--nsw-grey-03);
   }
 
   &__upper {
-    @include nsw-spacing(padding-top, lg);
     background-color: var(--nsw-white);
     border-top: solid 1px var(--nsw-grey-03);
-  }
+    padding-top: rem(24px);
 
-  &__lower {
-    @include nsw-spacing(padding, md none lg none);
-    @include font-size('xxs');
-    background-color: var(--nsw-grey-01);
-    color: var(--nsw-text-light);
-
-    a {
-      color: var(--nsw-text-light);
+    .nsw-container {
+      padding-left: rem(8px);
+      padding-right: rem(8px);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-      &:focus {
-        @include nsw-focus($color: var(--nsw-text-light));
+      @include breakpoint('lg') {
+        padding-left: 0;
+        padding-right: 0;
       }
     }
-
-    p:not([class]) {
-      margin: rem(12px) 0;
-    }
   }
 
-  &__info {
+  &__group {
+    padding: 0 rem(8px) rem(16px) rem(8px);
+    flex: 1 0 auto;
+    min-width: rem(256px);
+    max-width: 50%;
 
     @include breakpoint('md') {
-      display: flex;
-      flex-wrap: nowrap;
+      flex-basis: 50%;
+      min-width: auto;
     }
-  }
 
-  &__copyright {
-    flex: 1 1 auto;
-  }
-
-  &__built {
-    flex: 0 0 rem(200px);
-
-    a:not([class]) {
-      color: var(--nsw-text-light);
-
-      &:hover {
-        background-color: transparent;
-        outline: none;
-        text-decoration: none;
-      }
+    @include breakpoint('lg') {
+      padding: 0 rem(16px) rem(24px) rem(16px);
+      flex-basis: 25%;
+    }
 
-      &:focus {
-        @include nsw-focus($offset: false, $color: var(--nsw-text-light));
-      }
+    ul {
+      @include font-size('xs');
+      list-style: none;
+      margin: rem(4px) 0 0 0;
+      padding: 0;
 
-      &:visited {
-        color: var(--nsw-text-light);
+      a {
+        font-weight: var(--nsw-font-normal);
       }
     }
 
-    @include breakpoint('md') {
-      text-align: right;
+    li:first-child {
+      margin-top: 0;
     }
   }
-}
 
-.nsw-footer-links {
-  @include nsw-spacing(margin, md none none none);
-  @include nsw-spacing(padding, none);
-  font-weight: var(--nsw-font-bold);
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-left: rem(-8px);
-  margin-right: rem(-8px);
-
-  @include breakpoint('md') {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  &__item {
-    @include nsw-spacing(margin, none none md none);
-    flex: 1 0 50%;
-    max-width: 50%;
-    padding: 0 rem(8px);
-
-    @include breakpoint('md') {
-      @include nsw-spacing(margin-right, lg);
-      padding: 0;
-      flex: 0 0 auto;
-      max-width: none;
-    }
+  &__heading {
+    @include font-size('sm');
   }
 
-  &__link {
-    text-decoration: underline;
+  &__lower {
+    @include font-size('xxs');
+    background-color: var(--nsw-grey-01);
+    color: var(--nsw-text-light);
+    padding: rem(16px) 0 rem(24px) 0;
 
-    &:hover {
-      text-decoration: none;
+    a {
+      @include link-light;
     }
 
-    &:focus {
-      @include nsw-focus($color: var(--nsw-text-light));
+    p {
+      margin: rem(12px) 0;
     }
-  }
-}
-
-.section-links {
-  @include nsw-spacing(padding-left, xs);
-  @include nsw-spacing(padding-right, xs);
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  @include breakpoint('lg') {
-    padding-left: 0;
-    padding-right: 0;
-  }
 
-  a:not([class]) {
-    color: var(--nsw-brand-dark);
+    ul {
+      list-style: none;
+      margin: rem(16px) rem(-8px) 0 rem(-8px);
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-    &:visited {
-      color: var(--nsw-brand-dark);
+      @include breakpoint('md') {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
 
-    &:hover {
-      @include nsw-hover;
-      outline: 2px solid var(--nsw-text-hover);
-    } 
-
-    &:focus {
-      @include nsw-focus($offset: false);
+    li {
+      flex: 1 0 50%;
+      max-width: 50%;
+      padding: 0 rem(8px);
+      margin: 0 0 rem(16px) 0;
+
+      @include breakpoint('md') {
+        margin-right: rem(24px);
+        padding: 0;
+        flex: 0 0 auto;
+        max-width: none;
+      }
     }
   }
 
-  &__group {
-    @include nsw-spacing(padding, none xs md xs);
-    flex: 1 0 auto;
-    min-width: rem(256px);
-    max-width: 50%;
-
+  &__info {
     @include breakpoint('md') {
-      flex-basis: 50%;
-      min-width: auto;
-    }
-
-    @include breakpoint('lg') {
-      @include nsw-spacing(padding, none md lg md);
-      flex-basis: 25%;
+      display: flex;
+      flex-wrap: nowrap;
     }
   }
 
-  &__heading {
-    @include nsw-spacing(margin, none);
-    @include font-size('sm');
-    font-weight: var(--nsw-font-bold);
+  &__copyright {
+    flex: 1 1 auto;
+    margin: rem(12px) 0;
   }
 
-  &__list {
-    @include nsw-spacing(margin, none);
-    @include nsw-spacing(padding, none);
-    @include font-size('xs');
-    list-style: none;
-    margin-top: rem(4px);
-  }
+  &__built {
+    flex: 0 0 rem(200px);
+    margin: rem(12px) 0;
 
-  &__item:not(:first-child) {
-    @include nsw-spacing(margin-top, xs);
+    @include breakpoint('md') {
+      text-align: right;
+    }
   }
 }

package/src/components/{forms/_forms.scss → form/_form.scss}

@@ -1,28 +1,15 @@
-$nsw-svg-light: #ffffff;
-$nsw-svg-dark: #333333;
+$nsw-form-chevron-down: '<svg fill="#333333" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 26l16-16-4-4-12 12-12-12-4 4 16 16z"></path></svg>';
+$nsw-form-tick: '<svg fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M29.362 3.742l-18.867 19.204-7.857-7.997-2.638 2.685 9.175 9.34 1.319 1.284 1.318-1.284 20.187-20.547z"></path></svg>';
 
 .nsw-form {
-  @include nsw-spacing(margin-top, xxl);
-  font-family: var(--nsw-font-family);
+  margin-top: rem(48px);
 
   &:first-child {
     margin-top: 0;
   }
 
-  button,
-  input,
-  textarea,
-  textfield,
-  select {
-    font-family: var(--nsw-font-family);
-  }
-
-  a {
-    @include link;
-  }
-
   &__group {
-    @include nsw-spacing(margin-top, md);
+    margin-top: rem(16px);
 
     &:first-child {
       margin-top: 0;
@@ -36,9 +23,10 @@ $nsw-svg-dark: #333333;
 
     &--error,
     &--valid {
-      @include nsw-spacing(padding, xs);
-      @include nsw-spacing(margin-top, xs);
+      margin-top: rem(8px);
+      padding: rem(8px);
       font-weight: var(--nsw-font-bold);
+      color: var(--nsw-text-dark);
       background-repeat: no-repeat;
       background-position: left rem(8px) top rem(8px);
       background-size: 1rem auto;
@@ -46,9 +34,8 @@ $nsw-svg-dark: #333333;
       align-items: center;
 
       .nsw-material-icons {
-        font-size: rem(20px);
+        font-size: rem(map-get($nsw-icon-sizes, 20));
         margin-right: rem(4px);
-        color: var(--nsw-text-dark);
       }
     }
 
@@ -80,7 +67,8 @@ $nsw-svg-dark: #333333;
 
     + input,
     + textarea,
-    + select {
+    + select,
+    + .nsw-form__input-group {
       margin-top: rem(4px);
     }
   }
@@ -95,9 +83,8 @@ $nsw-svg-dark: #333333;
   &__input,
   &__select {
     @include font-size('sm');
-    @include nsw-spacing(padding, sm md);
+    padding: rem(11px) rem(16px);
     border-radius: var(--nsw-border-radius);
-    font-family: var(--nsw-font-family);
     background-color: var(--nsw-white);
     color: var(--nsw-text-dark);
     border: 1px solid var(--nsw-grey-01);
@@ -106,42 +93,63 @@ $nsw-svg-dark: #333333;
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
     width: 100%;
 
-    &:hover {
-      @include nsw-hover;
-    }
-
     &:focus {
       @include nsw-focus;
     }
 
     &:disabled {
-      background-color: var(--nsw-off-white);
       border-color: var(--nsw-grey-03);
       color: var(--nsw-grey-03);
       cursor: not-allowed;
+      opacity: 1;
     }
 
-
     &[aria-invalid='true'],
     &.has-error {
       border-color: var(--nsw-status-error);
       border-width: 2px;
+    }
+  }
+
+  &__input {
+    &:hover {
+      background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
+    }
+
+    &:disabled {
+      background: var(--nsw-off-white);
+    }
 
+    &[aria-invalid='true'],
+    &.has-error {
       &:hover {
-        background-color: var(--nsw-status-error-bg);
+        background: var(--nsw-status-error-bg);
       }
     }
   }
 
   &__select {
-    @include background-svg(chevron-down, $nsw-svg-dark);
-    @include nsw-spacing(padding-right, xxl);
-    background-repeat: no-repeat;
-    background-position: right rem(16px) center;
+    padding-right: rem(48px);
+    background: var(--nsw-white) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center;
     background-size: rem(16px) auto;
 
+    &:hover {
+      background: svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center, linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
+      background-size: rem(16px) auto, auto;
+      background-color: var(--nsw-white);
+    }
+
     &:disabled {
-      @include background-svg(chevron-down, $nsw-svg-dark);
+      background: var(--nsw-off-white) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center;
+      background-size: rem(16px) auto;
+    }
+
+    &[aria-invalid='true'],
+    &.has-error {
+      &:hover {
+        background: var(--nsw-status-error-bg) svg-url($nsw-form-chevron-down) no-repeat right rem(16px) center;
+        background-size: rem(16px) auto;
+      }
     }
 
     option {
@@ -156,6 +164,10 @@ $nsw-svg-dark: #333333;
       border-right-width: 0;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+      
+      &:focus {
+        position: relative;
+      }
     }
 
     .nsw-button {
@@ -168,36 +180,44 @@ $nsw-svg-dark: #333333;
       border-bottom-left-radius: 0;
       border-width: 1px;
       white-space: nowrap;
+
+      &:focus {
+        outline-color: var(--nsw-focus);
+      }
     }
 
     .nsw-material-icons {
       display: block;
       color: var(--nsw-brand-dark);
-      font-size: rem(30px);
+      font-size: rem(map-get($nsw-icon-sizes, 30));
       position: static;
     }
 
     &--icon {
       .nsw-button {
         padding: 0;
-        min-width: rem(50px);
+        min-width: rem(48px);
         border-color: var(--nsw-grey-01);
         border-left-width: 0;
 
         &:hover {
-          @include nsw-hover;
+          background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
         }
       }
     }
 
     &--large {
       .nsw-form__input {
-        @include nsw-spacing(padding, md);
+        padding: rem(16px);
       }
 
       .nsw-button {
         min-width: rem(58px);
       }
+
+      .nsw-material-icons {
+        font-size: rem(map-get($nsw-icon-sizes, 36));
+      }
     }
   }
 
@@ -216,7 +236,7 @@ $nsw-svg-dark: #333333;
     padding: 0;
     margin: 0;
     position: absolute;
-    top: rem(50px);
+    top: rem(48px);
     right: 0;
     left: 0;
     overflow: hidden;
@@ -230,16 +250,18 @@ $nsw-svg-dark: #333333;
       margin: 0;
     }
 
-    a:not([class]) {
+    a {
       display: block;
       padding: rem(10px);
       color: var(--nsw-text-dark);
+      font-weight: var(--nsw-font-normal);
 
       &:hover {
-        outline: none;
+        outline-width: 0;
       }
 
       &:focus {
+        outline-width: 3px;
         outline-offset: -3px;
       }
 
@@ -249,7 +271,6 @@ $nsw-svg-dark: #333333;
     }
   }
 
-
   &__date {
     padding: 0;
     margin: 0;
@@ -282,8 +303,8 @@ $nsw-svg-dark: #333333;
     display: contents;
 
     legend {
-      @include nsw-spacing(margin, none none md none);
       padding: 0;
+      margin: 0 0 rem(16px) 0;
       display: block;
     }
   }
@@ -307,11 +328,11 @@ $nsw-svg-dark: #333333;
 
     &:hover + .nsw-form__checkbox-label::before,
     &:hover + .nsw-form__radio-label::before {
-      @include nsw-hover;
+      background-image: linear-gradient(var(--nsw-text-hover), var(--nsw-text-hover));
     }
 
     &:checked + .nsw-form__checkbox-label::after {
-      @include background-svg(tick, $nsw-svg-light);
+      background-image: svg-url($nsw-form-tick);
       background-color: var(--nsw-brand-dark);
     }
 
@@ -348,7 +369,7 @@ $nsw-svg-dark: #333333;
     &[aria-invalid='true'] + .nsw-form__checkbox-label,
     &.has-error + .nsw-form__checkbox-label {
       &:hover::before {
-        background-color: var(--nsw-status-error-bg);
+        background-image: linear-gradient(var(--nsw-status-error-bg), var(--nsw-status-error-bg));
       }
 
       &::before {
@@ -361,17 +382,17 @@ $nsw-svg-dark: #333333;
   &__checkbox-label,
   &__radio-label {
     @include font-size('sm');
-    @include nsw-spacing(margin, md none none none);
+    margin: rem(16px) 0 0 0;
     padding: rem(4px) 0 rem(4px) rem(48px);
     min-height: rem(32px);
     display: block;
     position: relative;
 
     &::before {
-      @include nsw-spacing(margin-right, md);
       content: '';
       width: rem(32px);
       height: rem(32px);
+      margin-right: rem(16px);
       border: 1px var(--nsw-grey-01) solid;
       background-color: var(--nsw-white);
       top: 0;

package/src/components/global-alert/_global-alert.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-text-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-text-hover);
+      }
+
+      &:focus {
+        outline-color: var(--nsw-focus);
+      }
+    }
+  }
+}

package/src/components/{site-wide-message/site-wide-message.js → global-alert/global-alert.js}

@@ -1,7 +1,7 @@
-class SitewideMessage {
+class GlobalAlert {
   constructor(element) {
     this.messageElement = element
-    this.closeButton = element.querySelector('.nsw-sitewide-message__close')
+    this.closeButton = element.querySelector('.js-close-alert')
     this.closeMessageEvent = (e) => this.closeMessage(e)
   }
 
@@ -18,4 +18,4 @@ class SitewideMessage {
   }
 }
 
-export default SitewideMessage
+export default GlobalAlert