feat(styleguide): style secondary nav

[Finishes #81391814]
pivotal-cf · Oct 31, 2014 · 4c92d5c · 4c92d5c
1 parent 7123753
commit 4c92d5c
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 42 deletions.
diff --git a/hologram/doc_assets/_header.html b/hologram/doc_assets/_header.html
@@ -24,10 +24,20 @@
         <a href="/" class="styleguide-logo"><img src="/images/pui-logo@2x.png" alt="Introduction to Pivotal UI" height="28px"></a>
         <div id="styleguide-first-level-nav-wrapper">
           <ul id="styleguide-first-level-nav">
-            <% ['Layout', 'Elements', 'Objects', 'Utilities', 'JavaScript', 'Forms', 'by Product'].each do |category_name| %>
+            <% categories = ['Layout', 'Elements', 'Objects', 'Utilities', 'JavaScript', 'Forms', 'by Product'] %>
+
+            <% categories.each_with_index do |category_name, index| %>
               <%= "\"#{category_name}\" CATEGORY NOT FOUND ERROR, fool." unless @categories.has_key?(category_name) %>
               <% file_name = @categories[category_name] %>
-              <li><a href="<%= file_name %>"><%= category_name %></a>
+
+              <li id="category-<%= index %>" class="styleguide-category">
+                <a class="category-link" href="<%= file_name %>">
+                  <%= category_name %>
+                </a>
+                <a class="styleguide-second-level-nav-link" href="#" data-target="category-<%= index %>">
+                  <span class="sr-only">Expand <%= category_name %></span>
+                  <i class="fa fa-chevron-down"></i>
+                </a>
                 <ul class="styleguide-second-level-nav">
                   <% @pages[file_name][:blocks].each do |b| %>
                     <% if (b[:categories].include?(category_name)) && (b[:parent] == nil) %>
@@ -41,7 +51,9 @@
                 </ul>
               </li>
             <% end %>
-            <li><a href="all.html">All</a></li>
+            <li>
+              <a class="category-link" href="all.html">All</a>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/src/styleguide/styleguide.js b/src/styleguide/styleguide.js
@@ -39,4 +39,18 @@ $(document).ready(function() {
   $('#navbar-hamburger').click(function() {
     $('ul#styleguide-first-level-nav').slideToggle(300);
   });
+
+  $('.styleguide-second-level-nav-link').click(function(e) {
+    e.preventDefault();
+
+    var $targetCategory = $('#' + $(e.currentTarget).data('target'));
+    var targetCategoryClosed = !$targetCategory.hasClass('active');
+
+    $('li.styleguide-category').removeClass('active');
+    $('ul.styleguide-second-level-nav').slideUp();
+    if (targetCategoryClosed) {
+      $targetCategory.addClass('active');
+      $targetCategory.find('ul.styleguide-second-level-nav').slideDown();
+    }
+  });
 });
diff --git a/src/styleguide/styleguide.scss b/src/styleguide/styleguide.scss
@@ -35,9 +35,12 @@ h6.styleguide {
   color: $brand-3;
   font-weight: 600;
   margin-top: 0;
-  padding-top: 50px;
+  @media screen and (min-width: $screen-md-min) {
+    padding-top: 50px;
+  }
 }
 
+
 h1.styleguide {
   font-size: $font-size-title;
 }
@@ -140,41 +143,61 @@ blockquote {
     clear: both;
     margin: 0;
     padding: 0;
-    background: $dark-2;
+    background: $dark-1;
     list-style-type: none;
 
     > li {
       @include transition-pui(background);
 
-      a {
+      > a {
         color: $neutral-11;
       }
 
-      > a {
-        display: inline-block;
-        width: 100%;
+      a.category-link, a.styleguide-second-level-nav-link {
         padding: 8px 10px;
+      }
+
+      a.category-link {
+        display: inline-block;
+        width: 55%;
         @include transition-pui(color);
+      }
 
-        &:after {
-          float: right;
-          content: '\f054';
-          font-family: 'FontAwesome';
-          font-size: $font-size-small;
-          line-height: 24px;
-        }
+      a.styleguide-second-level-nav-link {
+        float: right;
+        width: 40%;
+        text-align: right;
       }
 
       ul.styleguide-second-level-nav {
         display: none;
+        padding-left: 0;
         list-style-type: none;
+        background-color: $neutral-1;
+
+        > li {
+          padding-bottom: 5px;
+          font-size: $font-size-base;
+
+          a {
+            display: block;
+            color: $neutral-10;
+            padding: 8px 10px 8px 30px;
+          }
+
+          &:hover {
+            a {
+              color: $blue-3;
+            }
+          }
+        }
       }
 
-      &:hover {
-        background: $dark-1;
+      &:hover, &.active {
+        background: $neutral-1;
 
-        > a {
-          color: $brand-4;
+        a.category-link, a.styleguide-second-level-nav-link {
+          color: $brand-3;
         }
       }
     }
@@ -189,7 +212,6 @@ blockquote {
     }
 
     ul#styleguide-first-level-nav {
-      position: relative;
       display: block;
       clear: none;
       top: 0;
@@ -198,19 +220,17 @@ blockquote {
       > li {
         position: relative;
         display: inline-block;
+        vertical-align: middle;
         padding: 10px 15px;
         font-size: $font-size-small;
 
-        > a {
+        a.category-link {
           padding: 0;
           display: inline;
+        }
 
-          &:after {
-            float: none;
-            margin-left: 7px;
-            content: '\f078';
-            font-size: $font-size-extra-small;
-          }
+        a.styleguide-second-level-nav-link {
+          float: none;
         }
 
         ul.styleguide-second-level-nav {
@@ -219,27 +239,15 @@ blockquote {
           left: 0;
           width: 200px;
           padding: 10px 20px;
-          background-color: $neutral-1;
 
           > li {
-            padding-bottom: 5px;
-            font-size: $font-size-base;
-
-            &:hover {
-              a {
-                color: $link-hover-color;
-              }
+            a {
+              padding: 0;
             }
           }
         }
 
         &:hover {
-          background: $neutral-1;
-
-          > a {
-            color: $brand-3;
-          }
-
           ul.styleguide-second-level-nav {
             display: block;
           }

diff --git a/test/styleguide/features/styleguide_nav_spec.rb b/test/styleguide/features/styleguide_nav_spec.rb
@@ -8,6 +8,18 @@
       expect(page).not_to have_content 'Layout'
       click_on 'Toggle navigation'
       expect(page).to have_content 'Layout'
+
+      expect(page).not_to have_content 'Grids'
+      click_on 'Expand Layout'
+      expect(page).to have_content 'Grids'
+
+      click_on 'Expand Objects'
+      expect(page).not_to have_content 'Grids'
+      expect(page).to have_content 'Alerts'
+
+      click_on 'Expand Objects'
+      expect(page).not_to have_content 'Alerts'
+
       click_on 'Toggle navigation'
       expect(page).not_to have_content 'Layout'
     end