nsw-design-system 2.14.2 → 3.0.3

package/src/components/card/_card.scss

@@ -1,21 +1,15 @@
 .nsw-card {
-  font-family: var(--nsw-font-family);
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   height: 100%;
-  border: 0;
-  border-top-left-radius: var(--nsw-border-radius);
-  border-top-right-radius: var(--nsw-border-radius);
+  color: var(--nsw-text-dark);
+  border-radius: var(--nsw-border-radius);
 
   &:hover {
     color: var(--nsw-text-light);
 
-    .nsw-card__link {
-      color: var(--nsw-text-light);
-    }
-
     .nsw-card__content {
       background-color: var(--nsw-brand-dark);
       border-color: transparent;
@@ -25,165 +19,119 @@
       }
     }
 
-    .nsw-card__image-area {
+    .nsw-card__image {
       &::after {
-        background-color: var(--nsw-brand-dark);
+        background-color: transparent;
       }
     }
 
-    .nsw-material-icons {
+    a {
       color: var(--nsw-text-light);
     }
 
-    .nsw-icon {
-      fill: 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-size('md');
-    font-weight: var(--nsw-font-bold);
-    margin: 0;
-  }
-
   &__content {
     @include font-size('sm');
-    @include nsw-spacing(padding, md md xxxxl md);
+    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 $transition-duration, border $transition-duration;
-
-    &::before {
-      content: '';
-      height: 6px;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 6px;
-      background-color: var(--nsw-brand-accent);
-      transition: background $transition-duration;
-    }
+    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);
     }
   }
 
-  &__copy {
-    margin: rem(16px) 0 0;
-    transition: color $transition-duration;
-  }
-
-  &__tag {
+  &__title {
+    @include font-size('md');
     font-weight: var(--nsw-font-bold);
-    order: 1;
-    margin: 0 0 1rem;
 
-    + .nsw-card__date {
-      margin-top: rem(-8);
+    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;
+      }
     }
   }
 
-  &__date {
-    order: 2;
-    margin: 0 0 1rem;
+  &__copy {
+    margin-top: rem(16px);
+    transition: color $nsw-transition-duration;
   }
 
   &__tag,
   &__date {
     @include font-size('xs');
-    transition: color $transition-duration;
+    transition: color $nsw-transition-duration;
+    margin-bottom: rem(16px);
   }
 
-  &__title,
-  &__copy,
-  &__icon {
-    order: 3;
-  }
-
-  &__icon {
-    @include nsw-spacing(margin, md none none none);
-    position: absolute;
-    bottom: rem(13px);
-    left: rem(13px);
-    transition: color $transition-duration;
-
-    &.nsw-icon {
-      @include nsw-spacing(bottom, md);
-      width: rem(24px);
-      height: rem(24px);
-      left: auto;
-    }
-
-    @include breakpoint('lg') {
-      @include nsw-spacing(margin, xl none none none);
-      bottom: rem(29px);
-      left: rem(28px);
+  &__tag {
+    font-weight: var(--nsw-font-bold);
 
-      &.nsw-icon {
-        @include nsw-spacing(bottom, xl);
-        transition: color $transition-duration;
-      }
+    + .nsw-card__date {
+      margin-top: rem(-8);
     }
   }
 
-  &__link {
-    @include pseudo-clickable-block;
-    text-decoration: none;
-    color: var(--nsw-text-dark);
-    transition: color $transition-duration;
+  .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;
 
-    &:focus {
-      outline: none;
-      text-decoration: underline;
+    @include breakpoint('lg') {
+      bottom: rem(32px);
+      left: rem(32px);
     }
   }
 
-  &__image-area {
-    order: 1;
+  &__image {
+    min-height: rem(200px);
     height: rem(200px);
     position: relative;
-    background-color: var(--nsw-white);
 
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: -6px;
-      left: 0;
-      right: 0;
-      height: 6px;
-      background-color: var(--nsw-brand-accent);
-      transition: background $transition-duration, border $transition-duration;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
-  }
 
-  &__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+    + .nsw-card__content {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top-width: 0;
 
-  &--headline {
-    .nsw-card__title {
-      @include font-size('lg');
+      &::after {
+        display: none;
+      }
     }
   }
 
@@ -191,10 +139,17 @@
     .nsw-card__content {
       background-color: var(--nsw-brand-light);
       border-color: transparent;
+
+      &::before,
+      &::after {
+        display: none;
+      }
     }
 
-    .nsw-card__image-area {
-      background-color: var(--nsw-brand-light);
+    .nsw-card__image {
+      &::after {
+        display: none;
+      }
     }
   }
 
@@ -207,107 +162,123 @@
       .nsw-card__content {
         background-color: var(--nsw-white);
         border-color: var(--nsw-grey-03);
-
-        &::after {
-          display: block;
-        }
       }
 
-      .nsw-card__image-area {
-        &::after {
-          background-color: var(--nsw-brand-accent);
-        }
-      }
-
-      .nsw-card__link {
+      .nsw-card__title a {
         color: var(--nsw-text-dark);
       }
 
       .nsw-material-icons {
         color: var(--nsw-brand-dark);
       }
-
-      .nsw-icon {
-        fill: var(--nsw-brand-dark);
-      }
-    }
-
-    .nsw-card__image-area {
-      background-color: var(--nsw-brand-dark);
     }
 
     .nsw-card__content {
       background-color: var(--nsw-brand-dark);
       border-color: transparent;
+
+      &::before,
+      &::after {
+        display: none;
+      }
     }
 
-    .nsw-card__link {
+    .nsw-card__image {
+      &::after {
+        display: none;
+      }
+    }
+
+    .nsw-card__title a {
       color: var(--nsw-text-light);
     }
 
     .nsw-material-icons {
       color: var(--nsw-text-light);
     }
+  }
 
-    .nsw-icon {
-      fill: var(--nsw-text-light);
+  &--headline {
+    .nsw-card__title {
+      @include font-size('lg');
     }
   }
 
-  &--content {
+  &--highlight {
     .nsw-card__content {
-      &::before,
+      &::before {
+        content: '';
+        height: 4px;
+      }
+
       &::after {
-        display: none;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background-color: var(--nsw-brand-accent);
+        transition: background $nsw-transition-duration;
       }
     }
 
-    .nsw-card__image-area {
+    .nsw-card__image {
       &::after {
-        background-color: var(--nsw-white);
-        border-left: 1px solid var(--nsw-grey-03);
-        border-right: 1px solid var(--nsw-grey-03);
+        content: '';
+        position: absolute;
+        bottom: -4px;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background-color: var(--nsw-brand-accent);
+        transition: background $nsw-transition-duration;
       }
     }
+  }
+
+  &--horizontal {
+    @include breakpoint('md') {
+      flex-direction: row;
+      align-items: stretch;
 
-    &:hover {
       .nsw-card__content {
-        &::after {
-          display: none;
+        flex: 1 1 50%;
+        height: auto;
+
+        > .nsw-material-icons {
+          left: calc(50% + #{rem(16px)});
         }
       }
 
-      .nsw-card__image-area::after {
-        background-color: var(--nsw-brand-dark);
-        border-color: transparent;
-      }
+      .nsw-card__image {
+        flex: 1 1 50%;
+        position: relative;
+        height: auto;
 
-      &.nsw-card--light {
-        .nsw-card__image-area::after {
-          background-color: var(--nsw-brand-dark);
-          border-color: transparent;
+        + .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--dark {
-        .nsw-card__image-area::after {
-          background-color: var(--nsw-white);
-          border-color: var(--nsw-grey-03);
+      &.nsw-card--highlight {
+        .nsw-card__image::after {
+          top: 0;
+          bottom: 0;
+          left: auto;
+          right: -4px;
+          width: 4px;
+          height: auto;
         }
       }
     }
 
-    &.nsw-card--light {
-      .nsw-card__image-area::after {
-        background-color: var(--nsw-brand-light);
-        border-color: transparent;
-      }
-    }
-
-    &.nsw-card--dark {
-      .nsw-card__image-area::after {
-        background-color: var(--nsw-brand-dark);
-        border-color: transparent;
+    @include breakpoint('lg') {
+      .nsw-card__content > .nsw-material-icons {
+        left: calc(50% + #{rem(32px)});
       }
     }
   }

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

@@ -1,41 +1,15 @@
 .nsw-content-block {
-  font-family: var(--nsw-font-family);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
   &__title {
     @include font-size('lg');
     font-weight: var(--nsw-font-bold);
-    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: var(--nsw-font-normal);
-    }
   }
 
   &__list {
-    margin: rem(16px) 0 0 0;
     padding: 0;
     list-style-type: none;
 
     li {
+      margin: 0;
       padding: rem(8px) 0 rem(8px) rem(14px);
       position: relative;
 
@@ -50,26 +24,21 @@
         left: 0;
       }
     }
-
-    a {
-      font-weight: var(--nsw-font-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,11 +1,5 @@
-.nsw-filters {
-  font-family: var(--nsw-font-family);
-
-  button {
-    font-family: var(--nsw-font-family);
-  }
-  
-  .nsw-page-layout__sidebar & {
+.nsw-filters {  
+  .nsw-layout__sidebar & {
     margin: rem(-8px) 0 rem(-16px) 0;
 
     @include breakpoint('lg') {
@@ -33,39 +27,26 @@
     }
 
     button {
+      @include link-button;
       display: flex;
       align-items: center;
-      cursor: pointer;
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      color: var(--nsw-brand-dark);
-
-      &:hover {
-        @include nsw-hover;
-        outline: 4px solid var(--nsw-text-hover);
-      }
-
-      &:focus {
-        @include nsw-focus;
-      }
+      text-decoration: none;
 
       span {
-        @include font-size('sm');
-        font-weight: var(--nsw-font-bold);
         text-decoration: underline;
         padding-left: rem(8px);
       }
     }
 
     .nsw-material-icons {
+      font-size: rem(map-get($nsw-icon-sizes, 24));
       border-radius: var(--nsw-border-radius);
-      font-size: rem(24px);
       padding: rem(1px);
       border: 2px solid var(--nsw-brand-dark);
+      text-decoration: none;
     }
 
-    &--active {
+    &.active {
       .nsw-material-icons {
         background-color: var(--nsw-brand-dark);
         color: var(--nsw-text-light);        
@@ -80,41 +61,12 @@
     left: 0;
     right: 0;
     background-color: var(--nsw-white);
-    padding: rem(24px) rem(16px);
+    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: var(--nsw-brand-dark);
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      &:hover {
-        @include nsw-hover;
-      }
-
-      &:focus {
-        @include nsw-focus;
-      }
-
-      span {
-        @include font-size('sm');
-        font-weight: var(--nsw-font-bold);
-        text-decoration: underline;
-      }
-
-      i {
-        font-size: rem(24px);
-        margin-right: rem(4px);
-      }      
-    }
   }
 
   &__wrapper {
@@ -175,10 +127,6 @@
         padding: rem(32px) 0;
       }
     }
-
-    button {
-      margin: 0;
-    }
   }
 
   &__cancel {   
@@ -200,27 +148,13 @@
     }
 
     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)