nsw-design-system 2.13.0 → 3.0.2

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

@@ -1,133 +1,199 @@
 .nsw-hero-banner {
-  $parent: &;
+  background-color: var(--nsw-white);
+  position: relative;
   position: relative;
 
-  @include breakpoint('md') {
-    height: rem(380px);
-    overflow: hidden;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: rgba(var(--nsw-black-rgb), 0.1);
   }
 
-  &__image-area {
+  &__container {
+    @include container;
+  }
 
-    @include breakpoint('md') {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
+  &__wrapper {
+    @include grid();
   }
 
-  &__image {
-    @include break-out;
-    height: auto;
-    display: block;
+  &__content {
+    @include column-default();
+    @include column(7, md);
+    @include column(6, xl);
 
-    @include breakpoint('md') {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      border-bottom: 0;
+    @include breakpoint('xs') { 
+      padding-top: rem(32px);
+      padding-bottom: rem(32px);
     }
-  }
 
-  &__content-area {
-    @include break-out;
+    @include breakpoint('md') { 
+      min-height: rem(260px);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
 
-    @include breakpoint('md') {
-      @include break-out-reset;
-      height: rem(380px);
-      width: 100%;
+    @include breakpoint('lg') { 
+      padding-top: rem(88px);
+      padding-bottom: rem(88px);
     }
-  }
 
-  &__content {
-    @include font-stack;
-    @include font-size('md');
-    @include nsw-spacing(padding, md);
-    background-color: $light20;
-    border-top: solid 6px $nsw-primary-highlight;
-    display: flex;
-    flex-direction: column;
+    .nsw-hero-banner--wide & {
+      @include column(8, md);
+      @include column(7, xl);      
+    } 
 
-    @include breakpoint('md') {
-      @include nsw-spacing(padding, md lg);
-      position: relative;
-      top: 50%;
-      background-color: map-get($overlays, light);
-      transform: translateY(-50%);
-      max-width: rem(600px);
-    }
+    .nsw-hero-banner--featured & {
+      @include breakpoint('md') { 
+        min-height: 0;
+        display: block;
+      }   
+    } 
 
-    p {
-      margin: 0;
+    .nsw-button {
+      margin: rem(24px) 0 0 0;
     }
 
-    * + p {
-      @include nsw-spacing(margin-top, md);
+    .nsw-intro {
+      margin: rem(8px) 0 0 0;
+
+      @include breakpoint('md') {
+        margin-top: rem(16px);
+      }    
     }
+  }
 
-    &:focus-within {
-      @include nsw-focus;
+  &__links {
+    @include column-default();
+    @include column(4, md);
+    @include column(4, xl, 1);
 
-      .nsw-hero-banner__link {
-        text-decoration: none;
-      }
+    @include breakpoint('xs') { 
+      margin-top: rem(-8px);
+      padding-top: 0;
+      padding-bottom: rem(32px);
     }
 
-    .nsw-icon {
-      width: rem(32);
-      height: rem(32);
+    @include breakpoint('md') { 
+      margin-top: 0;
+      padding-top: rem(32px);
     }
 
-    .nsw-material-icons {
-      font-size: 40px;
-      line-height: 38px;
+    @include breakpoint('lg') { 
+      padding-top: rem(88px);
+      padding-bottom: rem(88px);
     }
   }
 
-  &__title {
-    @include font-stack('heading');
-    @include font-size('xxl');
-    @include nsw-spacing(margin, none);
+  &__list {
+    @include z-index;
+    border-left: solid 4px var(--nsw-brand-accent);
+    padding-left: rem(16px);
+    position: relative;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      display: block;
+      margin-top: rem(16px);
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
   }
 
-  &__icon {
-    @include nsw-spacing(margin, md none none none);
+  &__sub-title {
+    @include font-size(md);
+    margin: 0 0 rem(16px) 0;
+    font-weight: var(--nsw-font-bold);
   }
 
-  &__link {
-    @include pseudo-clickable-block;
-    text-decoration: none;
-    color: $dark80;
+  &__box {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 41.66667%;
+    padding-left: rem($grid-gutters*2);
+    overflow: hidden;
 
-    &:hover {
-      text-decoration: underline;
+    @include breakpoint('md') {
+      display: flex;
     }
 
-    &:focus {
-      outline: none;
-      text-decoration: underline;
+    @include breakpoint('xl') {
+      width: 50%;
+      padding-left: calc(var(--nsw-container-width)/12+#{rem($grid-gutters)}*2);
     }
   }
 
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  &__graphic {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+
+    &--transparent {
+      opacity: 0.2;
+    }
+  }
+
+  &__bg {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: var(--nsw-brand-dark);
+    opacity: 0.2;
+    /*
+    background-image: url("data:image/svg+xml,%3Csvg width='206' height='220' viewBox='0 0 206 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M206 220V36.232L32.136 220H206zm-189.5 0H0L206 2.143v17.46L16.5 220z'/%3E%3C/svg%3E");
+    background-size: rem(206px);
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    */
+  }
+
+  &--light {
+    background-color: var(--nsw-brand-light);
+  }
+
   &--dark {
-    #{$parent}__content {
-      color: $white;
-      background-color: $dark80;
+    background-color: var(--nsw-brand-dark);
 
-      @include breakpoint('md') {
-        background-color: map-get($overlays, dark);;
-      }
+    .nsw-hero-banner__content {
+      color: var(--nsw-text-light);
     }
 
-    #{$parent}__link {
-      color: $white;
+    .nsw-hero-banner__links {
+      color: var(--nsw-text-light);
+
+      a {
+        @include link-light;
+      }
     }
 
-    #{$parent}__icon {
-      fill: $white;
-      color: $white;
+    /*
+    .nsw-hero-banner__bg {
+      background-image: url("data:image/svg+xml,%3Csvg width='206' height='220' viewBox='0 0 206 220' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M206 220V36.232L32.136 220H206zm-189.5 0H0L206 2.143v17.46L16.5 220z'/%3E%3C/svg%3E");
     }
+    */
   }
 }

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

@@ -1,63 +1,51 @@
 .hero-search {
-
   @include breakpoint('md') {
-    @include nsw-spacing(padding, xl none);
-  }
-
-  &__title {
-    @include font-stack('heading');
-    @include font-size('xxxl');
-    @include nsw-spacing(margin, none);
+    padding: rem(32px) rem(16px);
   }
 
   &__form {
-    @include nsw-spacing(margin, lg none);
+    padding: rem(24px) 0;
 
-    .nsw-material-icons {
-      font-size: rem(36px);
-      margin: 0 rem(-4px);
+    .nsw-material-icons { 
+      &:first-child {
+        margin: 0;
+      }
     }
   }
 
-  &__content {
-    @include break-out;
-    @include nsw-spacing(padding, xl md);
-    @include border-radius;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: $light10;
-    border-bottom: solid 6px $nsw-primary-highlight;
-    text-align: center;
+  &__wrapper {
+    padding: rem(32px) rem(16px);
+    background-color: var(--nsw-off-white);
+    border-bottom: solid 6px var(--nsw-brand-accent);
 
     @include breakpoint('md') {
-      @include nsw-spacing(padding, xl xxxxl);
-      @include break-out-reset;
-    }
-
-    > * {
-      max-width: rem(700);
-      margin-left: auto;
-      margin-right: auto;
+      border-top-left-radius: var(--nsw-border-radius);
+      border-top-right-radius: var(--nsw-border-radius);
+      padding: rem(32px) rem(80px);
     }
+  }
 
-    p:not([class]) {
-      @include font-size('md');
-      margin-left: auto;
-      margin-right: auto;
-    }
+  &__content {    
+    max-width: rem(700px);
+    margin: 0 auto;
+    text-align: center;
   }
 
   &__suggested {
-    ul:not([class]) {
-      @include nsw-spacing(padding-left, none);
+    ul {
       list-style: none;
       text-align: center;
-      margin-top: rem(-8);
+      margin-top: rem(-8px);
+      padding: 0;
     }
 
     li {
-      @include nsw-spacing(margin, none md);
+      margin: rem(8px) rem(16px) 0 rem(16px);
       display: inline-block;
     }
   }
+
+  .nsw-container {
+    padding: 0;
+  }
 }

package/src/components/in-page-alert/_in-page-alert.scss

@@ -0,0 +1,54 @@
+//Variations
+$nsw-in-page-alerts: (
+  info: (
+    border: var(--nsw-status-info),
+    background: var(--nsw-status-info-bg),
+    fill: var(--nsw-status-info),
+  ),
+  success: (
+    border: var(--nsw-status-success),
+    background: var(--nsw-status-success-bg),
+    fill: var(--nsw-status-success),
+  ),
+  warning: (
+    border: var(--nsw-status-warning),
+    background: var(--nsw-status-warning-bg),
+    fill: var(--nsw-status-warning),
+  ),
+  error: (
+    border: var(--nsw-status-error),
+    background: var(--nsw-status-error-bg),
+    fill: var(--nsw-status-error),
+  ),
+);
+
+.nsw-in-page-alert {
+  @include component-spacing();
+  padding: rem(16px);
+  position: relative;
+  border-left: solid 6px var(--nsw-brand-accent);
+  background-color: var(--nsw-grey-04);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  @include breakpoint('md') {
+    padding: rem(24px) rem(24px) rem(24px) rem(16px);
+  }
+
+  &__icon {
+    font-size: rem(map-get($nsw-icon-sizes, 36));
+    margin-right: rem(16px);
+  }
+
+  @each $color, $variant in $nsw-in-page-alerts {
+    &--#{"" + $color} {
+      background-color: map-get($variant, background);
+      border-color: map-get($variant, border);
+
+      .nsw-in-page-alert__icon {
+        color: map-get($variant, fill);
+      }
+    }
+  }
+}

package/src/components/in-page-nav/_in-page-nav.scss

@@ -0,0 +1,22 @@
+.nsw-in-page-nav {
+  @include component-spacing();
+  padding: rem(16px);
+  border-left: solid 4px var(--nsw-brand-accent);
+
+  &__title {
+    @include font-size(md);
+    font-weight: var(--nsw-font-bold);
+    margin: 0;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  li {
+    display: block;
+    margin-top: rem(16px);
+  }
+}

package/src/components/link-list/_link-list.scss

@@ -1,78 +1,59 @@
 .nsw-link-list {
-  @include font-stack('heading');
   @include component-spacing();
 
   &__title {
     @include font-size('lg');
-    @include nsw-spacing(padding-bottom, md);
+    font-weight: var(--nsw-font-bold);
+    padding-bottom: rem(16px);
     
     @include breakpoint('md') {
-      @include nsw-spacing(padding-bottom, lg);
+      padding-bottom: rem(24px);
     }
   }
 
-  &__list {
+  ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
   }
 
-  &__item {
-    border-top: 1px solid $light20;
+  li {
+    margin: 0;
+    border-top: 1px solid var(--nsw-grey-04);
 
     &:last-child {
-      border-bottom: 1px solid $light20;
+      border-bottom: 1px solid var(--nsw-grey-04);
     }
+  }
 
-    a {
-      @include nsw-spacing(padding, md);
-      color: $nsw-primary-blue;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &:hover {
-        @include nsw-hover;
-      }
 
-      &:focus {
-        @include nsw-focus;
-      }
+  a {
+    padding: rem(16px);
+    color: var(--nsw-brand-dark);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-decoration: none;
 
-      span {
-        text-decoration: underline;
-      }
+    &:hover {
+      outline-width: 0;
     }
 
-    a:not([class]) {
-      text-decoration: none;
-
-      &:visited {
-        color: $nsw-primary-blue;
-      }
-
-      &:active {
-        background-color: $hover-colour;
-        color: $nsw-primary-blue;
-      }
+    &:focus {
+      outline-width: 3px;
     }
 
-    .nsw-link-list__link {
+    span {
       text-decoration: underline;
     }
-  }
-
-  &__icon {
-    @include nsw-spacing(margin-left, md);
-    flex: none;
-    font-size: rem(20px);
-    position: relative;
-    right: -2px;
 
-    &.nsw-icon {
-      width: rem(16px);
-      height: rem(16px);
-      position: static;
+    .nsw-material-icons {
+      text-decoration: none;
     }
   }
+
+  .nsw-material-icons {
+    font-size: rem(map-get($nsw-icon-sizes, 20));
+    margin-left: rem(16px);
+  }
 }

package/src/components/list-item/_list-item.scss

@@ -1,38 +1,21 @@
 .nsw-list-item {
-  @include font-stack;
-  background-color: $white;
   position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   padding: rem(24px) 0;
-  border-bottom: 1px solid $light20;
+  border-bottom: 1px solid var(--nsw-grey-04);
 
   &:first-child {
-    border-top: 1px solid $light20;
-  }
-
-  &:hover {
-    .nsw-list-item__link {
-      text-decoration: none;
-    }
-  }
-
-  &:focus-within {
-    @include nsw-focus;
-
-    .nsw-card__link {
-      text-decoration: none;
-    }
+    border-top: 1px solid var(--nsw-grey-04);
   }
 
   &__title {
-    @include font-stack('heading');
     @include font-size('md');
+    font-weight: var(--nsw-font-bold);
   }
 
   &__content {
-    @include font-size('sm');
     width: 100%;
   }
 
@@ -41,7 +24,7 @@
   &__title,
   &__copy,
   &__tags {
-    margin: rem(8px) 0 0;
+    margin-top: rem(8px);
 
     &:first-child {
       margin: 0;
@@ -54,25 +37,10 @@
   }
 
   &__label {
-    font-weight: bolder;
-  }
-
-  &__link {
-    @include pseudo-clickable-block;
-    text-decoration: underline;
-    color: $nsw-primary-blue;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline: none;
-      text-decoration: underline;
-    }
+    font-weight: var(--nsw-font-bold);
   }
 
-  &__image-area {
+  &__image {
     min-width: rem(250px);
     width: rem(250px);
     margin: 0 0 0 rem(24px);
@@ -81,18 +49,38 @@
     @include breakpoint('lg') {
       display: block;
     }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;      
+    }
   }
 
-  &__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  &--block {
+    &:focus-within {
+      @include nsw-focus($offset: false);
+    }
+
+    &:hover {
+      .nsw-list-item__title a {
+        @include nsw-hover;
+      }
+    }
+
+    .nsw-list-item__title a {
+      @include pseudo-clickable-block;
+
+      &:focus {
+        outline: none;
+      }
+    }
   }
 
   &--reversed {
     flex-direction: row-reverse;
 
-    .nsw-list-item__image-area {
+    .nsw-list-item__image {
       margin: 0 rem(24px) 0 0;
     }
   }