vanilla-framework 3.7.1 → 3.8.0

package/package.json

@@ -47,7 +47,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.7.1",
+  "version": "3.8.0",
   "files": [
     "_index.scss",
     "/scss",

package/scss/_patterns_side-navigation.scss

@@ -8,6 +8,8 @@
             Side navigation in default variant.
         .p-side-navigation--icons:
             Side navigation with item icons.
+        .p-side-navigation--accordion:
+            Side navigation with expanding accordion items.
         .p-side-navigation--raw-html:
             Raw HTML version of side navigation (used with links generated by an external service).
         "&.is-drawer-expanded":
@@ -67,6 +69,10 @@
         .p-side-navigation__text:
             Single text item in side navigation (for items that are not linked).
 
+    Item accordion button:
+        .p-side-navigation__accordion-button:
+            Single accordion button item in side navigation with `.p-side-navigation--accordion` variant.
+
     Item icon:
         .p-side-navigation__icon:
             An icon in side navigation item (used with `.p-side-navigation--icons` variant).
@@ -264,6 +270,10 @@
       @include vf-side-navigation-spacing-left($prop: left, $multiplier: 2, $offset: $sp-sidenav--icon-width);
     }
 
+    .p-side-navigation--accordion &::after {
+      @include vf-side-navigation-spacing-left($prop: left, $multiplier: 2);
+    }
+
     &:last-of-type::after {
       content: none;
     }
@@ -271,6 +281,26 @@
 
   .p-side-navigation__list {
     @extend %side-navigation__list;
+
+    // accordion styles
+    &[aria-expanded] {
+      @include vf-transition(#{transform, opacity}, fast);
+      &.has-tick-elements {
+        padding-left: 1em;
+      }
+    }
+    &[aria-expanded='false'] {
+      height: 0;
+      opacity: 0;
+      transform: translate3d(0, -0.5rem, 0);
+      visibility: hidden;
+    }
+    &[aria-expanded='true'] {
+      height: auto;
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
+    }
   }
 
   %side-navigation__text {
@@ -322,17 +352,66 @@
     @extend %side-navigation__link;
   }
 
+  .p-side-navigation__accordion-button {
+    // reset default button styles
+    border: 0;
+    border-radius: 0;
+    font-size: inherit;
+    justify-content: flex-start;
+    margin-bottom: 0;
+    text-align: left;
+    width: 100%;
+
+    &::before {
+      @extend %icon;
+      @include vf-transition($property: transform, $duration: fast);
+
+      align-self: center;
+      content: '';
+      flex-shrink: 0;
+      margin-left: calc(-1 * ($sph--large + $sp-sidenav--icon-width));
+      margin-right: $sph--large;
+    }
+
+    // aria-selected controls the open and closed state for the accordion tab
+    &[aria-expanded='true'] {
+      // override base expanded button styles
+      background-color: inherit;
+
+      &:hover {
+        background-color: $colors--light-theme--background-hover;
+      }
+      @include vf-transition(#{background-color, border-color});
+    }
+
+    &[aria-expanded='false'] {
+      &::before {
+        transform: rotate(-90deg);
+      }
+
+      @include vf-transition(#{background-color, border-color});
+    }
+  }
+
   .p-side-navigation__heading,
   .p-side-navigation__text,
-  .p-side-navigation__link {
+  .p-side-navigation__link,
+  .p-side-navigation__accordion-button {
     @extend %side-navigation__text;
 
+    // offset for accordion chevrons is icon size + twice spacing around it
+    // we don't use grid width spacing for accordion (as we do in icon version)
+    $sp-sidenav--accordion-offset: $sp-sidenav--icon-width + 2 * $sph--large;
+
     .p-side-navigation--icons & {
       @include vf-side-navigation-spacing-left($multiplier: 2, $offset: $sp-sidenav--icon-width);
-
       position: relative;
     }
 
+    .p-side-navigation--accordion & {
+      @include vf-side-navigation-spacing-left($multiplier: 0, $offset: $sp-sidenav--accordion-offset);
+    }
+
     // nested 2nd level of navigation
     .p-side-navigation__item--title .p-side-navigation__item &,
     .p-side-navigation__item .p-side-navigation__item & {
@@ -342,6 +421,11 @@
       .p-side-navigation--icons & {
         @include vf-side-navigation-spacing-left($multiplier: 3, $offset: $sp-sidenav--icon-width);
       }
+
+      // add spacing for variant with accordions
+      .p-side-navigation--accordion & {
+        @include vf-side-navigation-spacing-left($multiplier: 1, $offset: $sp-sidenav--accordion-offset);
+      }
     }
 
     // nested 3rd level of navigation
@@ -353,6 +437,11 @@
       .p-side-navigation--icons & {
         @include vf-side-navigation-spacing-left($multiplier: 4, $offset: $sp-sidenav--icon-width);
       }
+
+      // add spacing for variant with accordions
+      .p-side-navigation--accordion & {
+        @include vf-side-navigation-spacing-left($multiplier: 2, $offset: $sp-sidenav--accordion-offset);
+      }
     }
   }
 
@@ -475,10 +564,6 @@
   @media (min-width: $threshold-4-6-col) {
     #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
   }
-
-  @media (min-width: $threshold-6-12-col) {
-    #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
-  }
 }
 
 // theme
@@ -592,6 +677,19 @@
     color: $color-sidenav-text-active;
   }
 
+  .p-side-navigation__accordion-button {
+    background-color: inherit;
+    color: inherit;
+    &::before {
+      @include vf-icon-chevron($color-sidenav-toggle-icon);
+    }
+
+    &:hover {
+      background: $color-sidenav-item-background-hover;
+      color: $color-sidenav-text-active;
+    }
+  }
+
   // styles applied when side nav is used in application layout
   @if mixin-exists(vf-application-layout--when-collapsed) {
     .p-side-navigation__item.has-active-child {

package/scss/_settings_breakpoints.scss

@@ -2,6 +2,6 @@
 $breakpoint-x-small: 460px !default;
 $breakpoint-small: 620px !default;
 $breakpoint-large: 1036px !default;
-$breakpoint-navigation-threshold: $breakpoint-small !default;
+$breakpoint-navigation-threshold: $breakpoint-large !default;
 $breakpoint-heading-threshold: $breakpoint-large !default;
 $breakpoint-x-large: 1681px !default; // exclude most laptops