Add status icons and labels to side navigation

canonical · Mar 16, 2020 · 64ee9b4 · 64ee9b4
1 parent ecdff2b
commit 64ee9b4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/scss/_patterns_label.scss b/scss/_patterns_label.scss
@@ -7,6 +7,7 @@
     border-radius: $border-radius;
     display: inline-block;
     font-weight: 400;
+    margin: 0;
     padding: map-get($nudges, nudge--x-small) $sph-inner--small;
     text-align: center;
     text-decoration: none;

diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
@@ -25,7 +25,7 @@
 
   .p-side-navigation__text,
   .p-side-navigation__link {
-    display: block;
+    display: flex;
     padding: $spv-inner--x-small $sph-inner--small $spv-inner--x-small $sph-inner;
 
     // nested 2 or 3 levels
@@ -52,6 +52,11 @@
     }
   }
 
+  .p-side-navigation__status {
+    margin-left: auto;
+    padding-left: $spv-outer--small;
+  }
+
   // default light theme
   @include vf-side-navigation-theme;
 }

diff --git a/templates/docs/examples/patterns/side-navigation/default.html b/templates/docs/examples/patterns/side-navigation/default.html
@@ -12,11 +12,14 @@
     <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="#">First level link with status<div class="p-side-navigation__status"><i class="p-icon--error"></i></div></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>
+          <a class="p-side-navigation__link" href="#">Second level link<div class="p-side-navigation__status"><i class="p-icon--warning"></i></div></a>
         </li>
         <li class="p-side-navigation__item ">
           <span class="p-side-navigation__text">Second level text</span>
@@ -31,7 +34,7 @@
               <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>
+              <a class="p-side-navigation__link" href="#">Third level link with status<div class="p-side-navigation__status"><i class="p-icon--success"></i></div></a>
             </li>
           </ul>
         </li>
@@ -41,7 +44,7 @@
       <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>
+      <a class="p-side-navigation__link" href="#">First level link with a label<div class="p-side-navigation__status"><span class="p-label--new">New</span></div></a>
     </li>
   </ul>
   <ul class="p-side-navigation__list">