nsw-design-system 2.13.0 → 3.0.2

package/src/components/card/_card.scss

@@ -1,134 +1,285 @@
 .nsw-card {
-  @include font-stack;
-  @include border-radius;
-  background-color: $white;
-  box-shadow: map-get($shadows, card);
-  transition: map-get($transitions, card);
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   height: 100%;
-  border: 0;
+  color: var(--nsw-text-dark);
+  border-radius: var(--nsw-border-radius);
 
   &:hover {
-    box-shadow: map-get($shadows, card-hover);
+    color: var(--nsw-text-light);
+
+    .nsw-card__content {
+      background-color: var(--nsw-brand-dark);
+      border-color: transparent;
+
+      &::after {
+        background-color: transparent;
+      }
+    }
+
+    .nsw-card__image {
+      &::after {
+        background-color: transparent;
+      }
+    }
+
+    a {
+      color: var(--nsw-text-light);
+    }
+
+    .nsw-material-icons {
+      color: var(--nsw-text-light);
+    }
   }
 
   &:focus-within {
     @include nsw-focus;
 
-    .nsw-card__link {
+    a {
       text-decoration: none;
     }
   }
 
-  &__title {
-    @include font-stack('heading');
-    @include font-size('md');
-    margin: 0;
-  }
-
   &__content {
     @include font-size('sm');
-    @include nsw-spacing(padding, md md xxxxl md);
-    border-top: solid 6px $nsw-primary-highlight;
+    padding: rem(16px) rem(16px) rem(62px) rem(16px);
+    background-color: var(--nsw-white);
+    border-radius: var(--nsw-border-radius);
+    border: 1px solid var(--nsw-grey-03);
     display: flex;
     flex-direction: column;
-    order: 2;
+    height: 100%;
+    transition: background $nsw-transition-duration, border $nsw-transition-duration;
 
     @include breakpoint('lg') {
-      @include nsw-spacing(padding, xl xl xxxxl xl);
+      padding: rem(32px) rem(32px) rem(94px) rem(32px);
     }
+  }
 
-    .nsw-card--content & {
-      border-top: 0;
+  &__title {
+    @include font-size('md');
+    font-weight: var(--nsw-font-bold);
+
+    a {
+      @include pseudo-clickable-block;
+      text-decoration: none;
+      color: var(--nsw-text-dark);
+      transition: color $nsw-transition-duration;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover {
+        background-color: transparent;
+        outline: none;
+      }
     }
   }
 
   &__copy {
-    margin: 1rem 0 0;
+    margin-top: rem(16px);
+    transition: color $nsw-transition-duration;
+  }
+
+  &__tag,
+  &__date {
+    @include font-size('xs');
+    transition: color $nsw-transition-duration;
+    margin-bottom: rem(16px);
   }
 
   &__tag {
-    @include font-stack('heading');
-    order: 1;
-    margin: 0 0 1rem;
+    font-weight: var(--nsw-font-bold);
 
     + .nsw-card__date {
       margin-top: rem(-8);
     }
   }
 
-  &__date {
-    order: 2;
-    margin: 0 0 1rem;
-  }
+  .nsw-material-icons {
+    font-size: rem(map-get($nsw-icon-sizes, 30));
+    color: var(--nsw-brand-dark);
+    position: absolute;
+    bottom: rem(16px);
+    left: rem(16px);
+    transition: color $nsw-transition-duration;
 
-  &__tag,
-  &__date {
-    @include font-size('xs');
+    @include breakpoint('lg') {
+      bottom: rem(32px);
+      left: rem(32px);
+    }
   }
 
-  &__title,
-  &__copy,
-  &__icon {
-    order: 3;
-  }
+  &__image {
+    min-height: rem(200px);
+    height: rem(200px);
+    position: relative;
 
-  &__icon {
-    @include nsw-spacing(margin, md none none none);
-    position: absolute;
-    bottom: rem(13px);
-    left: rem(13px);
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
 
-    &.nsw-icon {
-      @include nsw-spacing(bottom, md);
-      width: rem(24px);
-      height: rem(24px);
-      left: auto;
+    + .nsw-card__content {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top-width: 0;
+
+      &::after {
+        display: none;
+      }
     }
+  }
 
-    @include breakpoint('lg') {
-      @include nsw-spacing(margin, xl none none none);
-      bottom: rem(29px);
-      left: rem(28px);
+  &--light {
+    .nsw-card__content {
+      background-color: var(--nsw-brand-light);
+      border-color: transparent;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
 
-      &.nsw-icon {
-        @include nsw-spacing(bottom, xl);
+    .nsw-card__image {
+      &::after {
+        display: none;
       }
     }
   }
 
-  &__link {
-    @include pseudo-clickable-block;
-    text-decoration: none;
-    color: $nsw-primary-blue;
+  &--dark {
+    color: var(--nsw-text-light);
 
     &:hover {
-      text-decoration: underline;
+      color: var(--nsw-text-dark);
+
+      .nsw-card__content {
+        background-color: var(--nsw-white);
+        border-color: var(--nsw-grey-03);
+      }
+
+      .nsw-card__title a {
+        color: var(--nsw-text-dark);
+      }
+
+      .nsw-material-icons {
+        color: var(--nsw-brand-dark);
+      }
     }
 
-    &:focus {
-      outline: none;
-      text-decoration: underline;
+    .nsw-card__content {
+      background-color: var(--nsw-brand-dark);
+      border-color: transparent;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    .nsw-card__image {
+      &::after {
+        display: none;
+      }
+    }
+
+    .nsw-card__title a {
+      color: var(--nsw-text-light);
+    }
+
+    .nsw-material-icons {
+      color: var(--nsw-text-light);
     }
   }
 
-  &__image-area {
-    order: 1;
-    height: rem(200px);
+  &--headline {
+    .nsw-card__title {
+      @include font-size('lg');
+    }
   }
 
-  &__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  &--highlight {
+    .nsw-card__content {
+      &::before {
+        content: '';
+        height: 6px;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 6px;
+        background-color: var(--nsw-brand-accent);
+        transition: background $nsw-transition-duration;
+      }
+    }
+
+    .nsw-card__image {
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -6px;
+        left: 0;
+        right: 0;
+        height: 6px;
+        background-color: var(--nsw-brand-accent);
+        transition: background $nsw-transition-duration;
+      }
+    }
   }
-}
 
-.nsw-card--headline {
-  .nsw-card__title {
-    @include font-size('lg');
+  &--horizontal {
+    @include breakpoint('md') {
+      flex-direction: row;
+      align-items: stretch;
+
+      .nsw-card__content {
+        flex: 1 1 50%;
+        height: auto;
+
+        > .nsw-material-icons {
+          left: calc(50% + #{rem(16px)});
+        }
+      }
+
+      .nsw-card__image {
+        flex: 1 1 50%;
+        position: relative;
+        height: auto;
+
+        + .nsw-card__content {
+          border-top-right-radius: var(--nsw-border-radius);
+          border-bottom-left-radius: 0;
+          border-top-width: 1px;
+          border-left-width: 0;
+        }
+      }
+
+      &.nsw-card--highlight {
+        .nsw-card__image::after {
+          top: 0;
+          bottom: 0;
+          left: auto;
+          right: -6px;
+          width: 6px;
+          height: auto;
+        }
+      }
+    }
+
+    @include breakpoint('lg') {
+      .nsw-card__content > .nsw-material-icons {
+        left: calc(50% + #{rem(32px)});
+      }
+    }
   }
 }

package/src/components/content-block/_content-block.scss

@@ -1,73 +1,44 @@
 .nsw-content-block {
-  @include font-stack;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
   &__title {
-    @include font-stack('heading');
     @include font-size('lg');
-    margin: 0;
-  }
-
-  &__content {
-    @include font-size('sm');
-    display: flex;
-    flex-direction: column;
-    order: 2;
-
-    a {
-      @include text-link;
-    }
-  }
-
-  &__copy {
-    margin: rem(16px) 0 0 0;
-
-    a {
-      font-weight: normal;
-    }
+    font-weight: var(--nsw-font-bold);
   }
 
   &__list {
-    margin: rem(16px) 0 0 0;
     padding: 0;
     list-style-type: none;
 
     li {
-      padding: rem(8px) 0 rem(8px) rem(18px);
+      margin: 0;
+      padding: rem(8px) 0 rem(8px) rem(14px);
       position: relative;
 
       &::before {
-        content: '•';
+        content: '';
         position: absolute;
-        top: 0;
+        width: rem(4px);
+        height: rem(4px);
+        border-radius: 100%;
+        background-color: var(--nsw-text-dark);
+        top: rem(18px);
         left: 0;
-        font-size: rem(34px);
-        line-height: rem(34px);
       }
     }
-
-    a {
-      font-weight: normal;
-    }
   }
 
   &__link {
-    margin: rem(16px) 0 0 0;
+    margin-top: rem(16px);
   }
 
-  &__image-area {
-    order: 1;
+  &__image {
     max-height: rem(200px);
     margin-bottom: rem(24px);
-  }
 
-  &__image {
-    width: 100%;
-    height: rem(200px);
-    object-fit: cover;
+    img {
+      width: 100%;
+      height: rem(200px);
+      object-fit: cover;      
+    }
   }
 
   &__icon {

package/src/components/filters/_filters.scss

@@ -1,5 +1,5 @@
-.nsw-filters {
-  .nsw-page-layout__sidebar & {
+.nsw-filters {  
+  .nsw-layout__sidebar & {
     margin: rem(-8px) 0 rem(-16px) 0;
 
     @include breakpoint('lg') {
@@ -8,8 +8,8 @@
   }
 
   &__title {
-    @include font-stack('heading');
     @include font-size('lg');
+    font-weight: var(--nsw-font-bold);
     padding: rem(24px) 0;
 
     @include breakpoint('lg') {
@@ -20,49 +20,36 @@
 
   &__controls {
     padding: rem(24px) 0;
-    border-bottom: 1px solid $light20;
+    border-bottom: 1px solid var(--nsw-grey-04);
 
     @include breakpoint('lg') {
       display: none;
     }
 
     button {
+      @include link-button;
       display: flex;
       align-items: center;
-      cursor: pointer;
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      color: $nsw-primary-blue;
-
-      &:hover {
-        @include nsw-hover;
-        outline: 4px solid $hover-colour;
-      }
-
-      &:focus {
-        @include nsw-focus;
-      }
+      text-decoration: none;
 
       span {
-        @include font-stack('heading');
-        @include font-size('sm');
         text-decoration: underline;
         padding-left: rem(8px);
       }
     }
 
     .nsw-material-icons {
-      @include border-radius;
-      font-size: rem(24px);
+      font-size: rem(map-get($nsw-icon-sizes, 24));
+      border-radius: var(--nsw-border-radius);
       padding: rem(1px);
-      border: 2px solid $nsw-primary-blue;
+      border: 2px solid var(--nsw-brand-dark);
+      text-decoration: none;
     }
 
-    &--active {
+    &.active {
       .nsw-material-icons {
-        background-color: $nsw-primary-blue;
-        color: $white;        
+        background-color: var(--nsw-brand-dark);
+        color: var(--nsw-text-light);        
       }
     }
   }
@@ -73,42 +60,13 @@
     top: 0;
     left: 0;
     right: 0;
-    background-color: $white;
-    padding: rem(24px) rem(16px);
-    border-bottom: 1px solid $light20;
+    background-color: var(--nsw-white);
+    padding: rem(16px) rem(8px);
+    border-bottom: 1px solid var(--nsw-grey-04);
 
     @include breakpoint('lg') {
       display: none;
     }
-
-    button {
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      color: $nsw-primary-blue;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      &:hover {
-        @include nsw-hover;
-      }
-
-      &:focus {
-        @include nsw-focus;
-      }
-
-      span {
-        @include font-stack('heading');
-        @include font-size('sm');
-        text-decoration: underline;
-      }
-
-      i {
-        font-size: rem(24px);
-        margin-right: rem(4px);
-      }      
-    }
   }
 
   &__wrapper {
@@ -121,7 +79,7 @@
       left: 0;
       right: 0;
       overflow-y: auto;
-      background-color: $white;
+      background-color: var(--nsw-white);
       padding: rem(73px) rem(16px) rem(101px) rem(16px);
 
       @include breakpoint('lg') {
@@ -144,7 +102,7 @@
 
   &__item {
     padding: rem(24px) 0;
-    border-top: 1px solid $light20;
+    border-top: 1px solid var(--nsw-grey-04);
   }
 
   &__all {
@@ -153,7 +111,7 @@
 
   &__accept {
     padding: rem(32px) 0;
-    border-top: 1px solid $light20;
+    border-top: 1px solid var(--nsw-grey-04);
 
     .nsw-filters--fixed & {
       @include z-index('upper');
@@ -161,7 +119,7 @@
       bottom: 0;
       left: 0;
       right: 0;
-      background-color: $white;
+      background-color: var(--nsw-white);
       padding: rem(24px) rem(16px);
 
       @include breakpoint('lg') {
@@ -169,17 +127,13 @@
         padding: rem(32px) 0;
       }
     }
-
-    button {
-      margin: 0;
-    }
   }
 
   &__cancel {   
     padding-bottom: rem(32px);
 
     .nsw-filters--fixed & {
-      border-top: 1px solid $light20;
+      border-top: 1px solid var(--nsw-grey-04);
       padding: rem(32px) 0;
 
       @include breakpoint('lg') {
@@ -189,32 +143,18 @@
     }
 
     .nsw-filters--instant & {
-      border-top: 1px solid $light20;
+      border-top: 1px solid var(--nsw-grey-04);
       padding: rem(32px) 0;
     }
 
     button {
-      @include text-link;
-      @include font-size('sm');
-      font-weight: normal;
-      text-decoration: underline;
-      cursor: pointer;
-      background-color: transparent;
-      border: 0;
-      padding: 0;
+      @include link-button;
     }
   }
 
   &__more,
-  &__less {
-    @include text-link;
-    @include font-size('sm');
-    font-weight: normal;
-    text-decoration: underline;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    padding: 0;
+  &__less { 
+    @include link-button;
     margin-top: rem(24px);
   }
 

package/src/components/filters/filters.js

@@ -13,14 +13,9 @@ class Filters {
   }
 
   init() {
-    this.setUpDom()
     this.controls()
   }
 
-  setUpDom() {
-    this.filters.classList.add('is-ready')
-  }
-
   controls() {
     this.openButton.addEventListener('click', this.showEvent, false)