Merge branch '415-v2' into 'master'

Feat: Update left navigation to allow more levels

Closes #415

See merge request gitlab-org/gitlab-docs!1625

5 files changed, 114 insertions, 23 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index ad4f3af1..8be8c191 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -112,7 +112,9 @@ $link-color-nav-hover: $gds-gray-900;
 // Global nav
 $global-nav-link-level0: $link-color-nav;
 $global-nav-link-level1: $link-color-nav;
-$global-nav-link-level2: $gds-gray-700;
+$global-nav-link-level2: $link-color-nav;
+$global-nav-link-level3: $link-color-nav;
+$global-nav-link-level4: $gds-gray-900;
 $global-nav-link-shadow: $gds-gray-200;
 
 // Table of contents
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 34a6663e..1fa5469e 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 105
+version: 106
 ---
 
 @import "variables";
@@ -595,7 +595,9 @@ h6 {
         color: $gds-indigo-800;
       }
       &.level-1,
-      &.level-2 {
+      &.level-2,
+      &.level-3,
+      &.level-4 {
         background-color: $gds-gray-200;
       }
     }
@@ -671,7 +673,7 @@ h6 {
 
   .level-0 {
     color: $global-nav-link-level0;
-    padding-left: 18px;
+    padding-left: 1.2rem;
     &:visited {
       color: $global-nav-link-level0;
     }
@@ -679,7 +681,7 @@ h6 {
 
   .level-1 {
     color: $global-nav-link-level1;
-    padding-left: 35px;
+    padding-left: 2.333rem;
     &:visited {
       color: $global-nav-link-level1;
     }
@@ -687,12 +689,28 @@ h6 {
 
   .level-2 {
     color: $global-nav-link-level2;
-    padding-left: 53px;
+    padding-left: 3.533rem;
     &:visited {
       color: $global-nav-link-level2;
     }
   }
 
+  .level-3 {
+    color: $global-nav-link-level3;
+    padding-left: 4.733rem;
+    &:visited {
+      color: $global-nav-link-level3;
+    }
+  }
+
+  .level-4 {
+    color: $global-nav-link-level4;
+    padding-left: 5.933rem;
+    &:visited {
+      color: $global-nav-link-level4;
+    }
+  }
+
   .global-nav-badges {
     fill: $gds-gray-700;
   }
diff --git a/layouts/global_nav.html b/layouts/global_nav.html
index 6e94d93e..d98fbb96 100644
--- a/layouts/global_nav.html
+++ b/layouts/global_nav.html
@@ -17,36 +17,79 @@
       <div class="collapse <%= navigation.show_element?(sec) ? 'show' : '' %>" id="sec_<%= sec_uuid %>">
         <% sec.children.each do |cat| %>
           <% cat_uuid = SecureRandom.uuid %>
-        <span class="global-nav-cat nav-link">
-          <% if cat.external_url %>
-          <a class="global-nav-link level-1 <%= cat.has_children? ? 'has-collapse' : '' %>" href="<%= cat.url %>" target="_blank">
-            <%= cat.title %>
-          </a>
-          <% else %>
-          <a class="global-nav-link level-1 <%= cat.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(cat) ? 'active' : '' %>" href="<%= navigation.element_href(cat) %>">
-                <%= cat.title %>
-                <%= navigation.optional_ee_badge(cat) %>
-              </a>
-            <% end %><!-- end of if cat[:external_url] -->
+            <span class="global-nav-cat nav-link">
+              <% if cat.external_url %>
+                <a class="global-nav-link level-1 <%= cat.has_children? ? 'has-collapse' : '' %>" href="<%= cat.url %>" target="_blank">
+                  <%= cat.title %>
+                </a>
+              <% else %>
+                <a class="global-nav-link level-1 <%= cat.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(cat) ? 'active' : '' %>" href="<%= navigation.element_href(cat) %>">
+                  <%= cat.title %>
+                  <%= navigation.optional_ee_badge(cat) %>
+                </a>
+              <% end %><!-- end of if cat[:external_url] -->
             <div class="<%= cat.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(cat) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#cat_<%= cat_uuid %>"></div>
-          </span>
+            </span>
 
           <!-- nav docs -->
           <% if cat.has_children? %>
             <div class="collapse <%= navigation.show_element?(cat) ? 'show' : '' %>" id="cat_<%= cat_uuid %>">
             <% cat.children.each do |doc| %>
+            <% doc_uuid = SecureRandom.uuid %>
               <span class="nav-link">
                 <% if doc.external_url %>
-                  <a class="global-nav-link level-2" href="<%= doc.url %>" target="_blank">
+                  <a class="global-nav-link level-2 <%= doc.has_children? ? 'has-collapse' : '' %>" href="<%= doc.url %>" target="_blank">
                     <%= doc.title %>
                   </a>
                 <% else%>
-                  <a class="global-nav-link level-2 <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
+                  <a class="global-nav-link level-2 <%= doc.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
                     <%= doc.title %>
                     <%= navigation.optional_ee_badge(doc) %>
                   </a>
                 <% end %><!-- end of if doc[:external_url] -->
+                <div class="<%= doc.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
               </span>
+
+              <!-- nav docs -->
+              <% if doc.has_children? %>
+              <div class="collapse <%= navigation.show_element?(doc) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
+              <% doc.children.each do |doc| %>
+                <% doc_uuid = SecureRandom.uuid %>
+                <span class="nav-link">
+                  <% if doc.external_url %>
+                    <a class="global-nav-link level-3 <%= doc.has_children? ? 'has-collapse' : '' %>" href="<%= doc.url %>" target="_blank">
+                      <%= doc.title %>
+                    </a>
+                  <% else%>
+                    <a class="global-nav-link level-3 <%= doc.has_children? ? 'has-collapse' : '' %> <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
+                      <%= doc.title %>
+                      <%= navigation.optional_ee_badge(doc) %>
+                    </a>
+                  <% end %><!-- end of if doc[:external_url] -->
+                  <div class="<%= doc.has_children? ? 'collapse-toggle' : '' %> <%= navigation.show_element?(doc) ? 'active' : 'collapsed' %>" data-toggle="collapse" aria-expanded="false" data-target="#doc_<%= doc_uuid %>"></div>
+                </span>
+
+                <!-- nav docs -->
+                <% if doc.has_children? %>
+                  <div class="collapse <%= navigation.show_element?(doc) ? 'show' : '' %>" id="doc_<%= doc_uuid %>">
+                  <% doc.children.each do |doc| %>
+                    <span class="nav-link">
+                      <% if doc.external_url %>
+                        <a class="global-nav-link level-4" href="<%= doc.url %>" target="_blank">
+                          <%= doc.title %>
+                        </a>
+                      <% else%>
+                        <a class="global-nav-link level-4 <%= navigation.show_element?(doc) ? 'active' : '' %>" href="<%= navigation.element_href(doc) %>">
+                          <%= doc.title %>
+                          <%= navigation.optional_ee_badge(doc) %>
+                        </a>
+                      <% end %><!-- end of if doc[:external_url] -->
+                    </span>
+                  <% end %><!-- end of cat[:docs] -->
+                  </div>
+                <% end %><!-- end of if cat[:docs].nil? -->
+                <% end %><!-- end of doc[:docs] -->
+              <% end %><!-- end of doc[:docs] -->
             <% end %><!-- end of cat[:docs] -->
             </div>
           <% end %><!-- end of if cat[:docs].nil? -->
diff --git a/lib/gitlab/navigation/doc.rb b/lib/gitlab/navigation/doc.rb
index 8bed2d43..27c75d7d 100644
--- a/lib/gitlab/navigation/doc.rb
+++ b/lib/gitlab/navigation/doc.rb
@@ -25,8 +25,12 @@ module Gitlab
         doc[:ee_tier]
       end
 
+      def has_children?
+        !children.empty?
+      end
+
       def children
-        []
+        @children ||= doc.fetch(:docs, []).map { |doc| Doc.new(doc) }
       end
 
       private
diff --git a/spec/gitlab/navigation/doc_spec.rb b/spec/gitlab/navigation/doc_spec.rb
index 08581b45..32198ec2 100644
--- a/spec/gitlab/navigation/doc_spec.rb
+++ b/spec/gitlab/navigation/doc_spec.rb
@@ -10,7 +10,8 @@ describe Gitlab::Navigation::Doc do
       external_url: external_url,
       doc_url: url,
       ee_only: ee_only,
-      ee_tier: ee_tier
+      ee_tier: ee_tier,
+      docs: docs
     }
   end
 
@@ -19,6 +20,7 @@ describe Gitlab::Navigation::Doc do
   let(:url) { 'README.html' }
   let(:ee_only) { true }
   let(:ee_tier) { 'GitLab Premium' }
+  let(:docs) { [{ doc_title: 'Doc Title' }] }
 
   describe '#title' do
     subject { doc.title }
@@ -50,9 +52,31 @@ describe Gitlab::Navigation::Doc do
     it { is_expected.to eq(ee_tier) }
   end
 
+  describe '#has_children?' do
+    subject { doc.has_children? }
+
+    it { is_expected.to be_truthy }
+
+    context 'when docs are empty' do
+      let(:docs) { [] }
+
+      it { is_expected.to be_falsey }
+    end
+  end
+
   describe '#children' do
     subject { doc.children }
 
-    it { is_expected.to eq([]) }
+    it 'returns a list of children' do
+      children = subject
+
+      expect(children.first.title).to eq('Doc Title')
+    end
+
+    context 'when docs are empty' do
+      let(:docs) { [] }
+
+      it { is_expected.to eq([]) }
+    end
   end
 end