Add side navigation component with default styling

scss/_base_placeholders.scss

@@ -42,6 +42,13 @@
     padding-top: calc(#{$table-cell-vertical-padding} - 1px);
   }
 
+  // Default list styling
+  %vf-list {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+  }
+
   // Bars and borders
   %vf-pseudo-border {
     background-color: $color-mid-light;
@@ -53,13 +60,17 @@
   }
 
   %vf-pseudo-border--bottom {
+    position: relative;
+
     &::after {
       @extend %vf-pseudo-border;
       bottom: 0;
     }
   }
 
   %vf-pseudo-border--top {
+    position: relative;
+
     &::after {
       @extend %vf-pseudo-border;
       top: 0;

scss/_patterns_accordion.scss

@@ -10,9 +10,7 @@
   }
 
   .p-accordion__group {
-    position: relative;
-
-    & + &::after {
+    & + & {
       @extend %vf-pseudo-border--top;
     }
   }

scss/_patterns_lists.scss

@@ -263,13 +263,6 @@ $spv-list-item--inner: null;
 @mixin vf-p-lists {
   //Placeholders
 
-  // Default list styling
-  %vf-list {
-    list-style: none;
-    margin-left: 0;
-    padding-left: 0;
-  }
-
   %numbered-step-container {
     counter-reset: li;
     display: flex;

scss/_patterns_side-navigation.scss

@@ -0,0 +1,96 @@
+@import 'settings';
+
+@mixin vf-p-side-navigation {
+  .p-side-navigation__list {
+    @extend %vf-list;
+
+    .p-side-navigation > &:first-child {
+      // nudge from top to put text on baseline grid
+      padding-top: 0.5 * $spv-inner--x-small;
+    }
+
+    & + & {
+      @extend %vf-pseudo-border--top;
+
+      &::after {
+        left: $sph-inner;
+        top: -0.5 * $spv-outer--scaleable; // place border in the middle of the margin
+      }
+    }
+  }
+
+  .p-side-navigation__item--title {
+    font-weight: $font-weight-bold;
+  }
+
+  .p-side-navigation__text,
+  .p-side-navigation__link {
+    display: block;
+    padding: $spv-inner--x-small $sph-inner--small $spv-inner--x-small $sph-inner;
+
+    // nested 2 or 3 levels
+    .p-side-navigation__item .p-side-navigation__item & {
+      padding-left: 2 * $sph-inner;
+    }
+
+    .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
+      padding-left: 3 * $sph-inner;
+    }
+  }
+
+  .p-side-navigation__link {
+    @include vf-focus;
+
+    // vf-highlight-bar is rendered above focus outline
+    // so we need to hide it on focus
+    &:focus::before {
+      display: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // default light theme
+  @include vf-side-navigation-theme;
+}
+
+// theme
+@mixin vf-side-navigation-theme(
+  // default text color in sidebar
+    $color-sidenav-text-default: $colors--light-theme--text-muted,
+  // text color of highlighted items
+    $color-sidenav-text-active: $colors--light-theme--text-default,
+  // background color of active/hovered items
+    $color-sidenav-item-background-highlight: $colors--light-theme--background-highlighted,
+  // border color of active item
+    $color-sidenav-item-border-highlight: $color-brand,
+  // border color of items list
+    $color-sidenav-list-border: $colors--light-theme--border-default
+) {
+  .p-side-navigation {
+    color: $color-sidenav-text-default;
+  }
+
+  .p-side-navigation__list::after {
+    background: $color-sidenav-list-border;
+  }
+
+  .p-side-navigation__link {
+    &,
+    &:visited {
+      color: $color-sidenav-text-default;
+    }
+
+    &:hover,
+    &.is-active {
+      background: $color-sidenav-item-background-highlight;
+      color: $color-sidenav-text-active;
+    }
+
+    &.is-active {
+      @include vf-highlight-bar($color-sidenav-item-border-highlight, left);
+    }
+  }
+}

scss/_settings_colors.scss

@@ -41,6 +41,7 @@ $colors--light-theme--border-default: #cdcdcd !default;
 $colors--light-theme--border-high-contrast: #999 !default;
 $colors--light-theme--text-hover: #757575 !default;
 $colors--light-theme--text-disabled: #666 !default;
+$colors--light-theme--text-muted: #666 !default;
 $colors--light-theme--text-default: #111 !default;
 
 //text-hover: minimum contrast on primary that satisfies contrast checker AA
@@ -49,4 +50,6 @@ $colors--dark-theme--background-highlighted: hsl(0, 0%, 20%) !default;
 $colors--dark-theme--border-default: hsl(0, 0%, 27%) !default;
 $colors--dark-theme--border-high-contrast: hsl(0, 0%, 42%) !default;
 $colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default;
+// TODO: add --text-disabled
+// TODO: add --text-muted
 $colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;

scss/_vanilla.scss

@@ -33,6 +33,7 @@
 @import 'patterns_pagination';
 @import 'patterns_pull-quotes';
 @import 'patterns_search-box';
+@import 'patterns_side-navigation';
 @import 'patterns_slider';
 @import 'patterns_strip';
 @import 'patterns_switch';
@@ -102,6 +103,7 @@
   @include vf-p-pagination;
   @include vf-p-pull-quotes;
   @include vf-p-search-box;
+  @include vf-p-side-navigation;
   @include vf-p-slider;
   @include vf-p-strip;
   @include vf-p-switch;

scss/standalone/patterns_side-navigation.scss

@@ -0,0 +1,5 @@
+@import '../base';
+@include vf-base;
+
+@import '../patterns_side-navigation';
+@include vf-p-side-navigation;

templates/_layouts/docs.html

@@ -88,7 +88,7 @@
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/media-object' %}is-active{% endif %}" href="/docs/patterns/media-object">Media object</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/modal' %}is-active{% endif %}" href="/docs/patterns/modal">Modal</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/muted-heading' %}is-active{% endif %}" href="/docs/patterns/muted-heading">Muted heading</a></li>
-                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--updated u-float-right u-no-margin--bottom">Updated</div></li>
+                  <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--new u-float-right u-no-margin--bottom">New</div></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/notification' %}is-active{% endif %}" href="/docs/patterns/notification">Notifications</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pagination' %}is-active{% endif %}" href="/docs/patterns/pagination">Pagination</a></li>
                   <li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pull-quote' %}is-active{% endif %}" href="/docs/patterns/pull-quote">Quotes</a></li>

templates/docs/component-status.md

@@ -10,29 +10,23 @@ context:
 
 When we add, make significant updates, or deprecate a component we update their status so that it’s clear what’s available to use. Check back here anytime to see current status information.
 
-### What's new in Vanilla 2.8
+### What's new in Vanilla 2.9
 
 <table>
   <thead>
     <tr>
       <th style="width: 20%">Component</th>
-      <th style="width: 10%">Status</th>
+      <th style="width: 15%">Status</th>
       <th style="width: 10%">Version</th>
-      <th style="width: 60%">Notes</th>
+      <th style="width: 55%">Notes</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th><a href="/docs/patterns/navigation">Navigation</a></th>
-      <td><div class="p-label--updated">Updated</div></td>
-      <td>2.8.0</td>
-      <td>New navigation classes (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) were added to replace existing (<code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code>).</td>
-    </tr>
-    <tr>
-      <th><a href="/docs/patterns/navigation">Navigation</a></th>
-      <td><div class="p-label--deprecated">Deprecated</div></td>
-      <td>2.8.0</td>
-      <td>Navigation classes <code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code> are deprecated and will be removed in future release v3.0. Please use new class names (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) instead.</td>
+      <th><a href="/docs/patterns/navigation#side-navigation">Side navigation</a></th>
+      <td><div class="p-label--new">New</div></td>
+      <td>2.9.0</td>
+      <td>New side navigation component was added.</td>
     </tr>
   </tbody>
 </table>
@@ -43,12 +37,25 @@ When we add, make significant updates, or deprecate a component we update their
   <thead>
     <tr>
       <th style="width: 20%">Component</th>
-      <th style="width: 10%">Status</th>
+      <th style="width: 15%">Status</th>
       <th style="width: 10%">Version</th>
-      <th style="width: 60%">Notes</th>
+      <th style="width: 55%">Notes</th>
     </tr>
   </thead>
   <tbody>
+    <!-- 2.8.0 -->
+    <tr>
+      <th><a href="/docs/patterns/navigation">Navigation</a></th>
+      <td><div class="p-label--updated">Updated</div></td>
+      <td>2.8.0</td>
+      <td>New navigation classes (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) were added to replace existing (<code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code>).</td>
+    </tr>
+    <tr>
+      <th><a href="/docs/patterns/navigation">Navigation</a></th>
+      <td><div class="p-label--deprecated">Deprecated</div></td>
+      <td>2.8.0</td>
+      <td>Navigation classes <code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code> are deprecated and will be removed in future release v3.0. Please use new class names (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) instead.</td>
+    </tr>
     <!-- 2.7.0 -->
     <tr>
       <th><a href="/docs/patterns/contextual-menu#theming">Contextual menu</a></th>

templates/docs/examples/patterns/side-navigation/default.html

@@ -0,0 +1,87 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Default{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+<div class="p-side-navigation">
+  <ul class="p-side-navigation__list">
+    <li class="p-side-navigation__item--title">
+      <a class="p-side-navigation__link" href="#">Title that is a link</a>
+    </li>
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link" href="#">First level link</a>
+    </li>
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link" href="#">Link with children</a>
+      <ul class="p-side-navigation__list">
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">Second level link</a>
+        </li>
+        <li class="p-side-navigation__item ">
+          <span class="p-side-navigation__text">Second level text</span>
+        </li>
+        <li class="p-side-navigation__item ">
+          <a class="p-side-navigation__link" href="#">Second level link with children</a>
+          <ul class="p-side-navigation__list">
+            <li class="p-side-navigation__item">
+              <span class="p-side-navigation__text">Third level text</span>
+            </li>
+            <li class="p-side-navigation__item ">
+              <a class="p-side-navigation__link is-active" href="#">Third level active link</a>
+            </li>
+            <li class="p-side-navigation__item ">
+              <a class="p-side-navigation__link" href="#">Third level link</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li class="p-side-navigation__item ">
+      <span class="p-side-navigation__text">First level item that is not a link</span>
+    </li>
+    <li class="p-side-navigation__item ">
+      <a class="p-side-navigation__link" href="#">First level link</a>
+    </li>
+  </ul>
+  <ul class="p-side-navigation__list">
+    <li class="p-side-navigation__item--title">
+      <span class="p-side-navigation__text">Title that is not a link</span>
+    </li>
+    <li class="p-side-navigation__item">
+      <span class="p-side-navigation__text">First level text</span>
+    </li>
+    <li class="p-side-navigation__item">
+      <span class="p-side-navigation__text">Text item with children</span>
+      <ul class="p-side-navigation__list">
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">Second level link</a>
+        </li>
+        <li class="p-side-navigation__item ">
+          <span class="p-side-navigation__text">Second level text</span>
+        </li>
+        <li class="p-side-navigation__item ">
+          <span class="p-side-navigation__text">Second level text with children</span>
+          <ul class="p-side-navigation__list">
+            <li class="p-side-navigation__item">
+              <span class="p-side-navigation__text">Third level text</span>
+            </li>
+            <li class="p-side-navigation__item ">
+              <a class="p-side-navigation__link is-active" href="#">Third level active item</a>
+            </li>
+            <li class="p-side-navigation__item ">
+              <a class="p-side-navigation__link" href="#">Third level link</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li class="p-side-navigation__item ">
+      <span class="p-side-navigation__text">First level item that is not a link</span>
+    </li>
+    <li class="p-side-navigation__item ">
+      <a class="p-side-navigation__link" href="#">First level link</a>
+    </li>
+  </ul>
+</div>
+{% endblock %}