Merge pull request #4285 from alphagov/active-links-helper

Add a helper to get active links

app/helpers/contents_list_helper.rb

@@ -0,0 +1,15 @@
+module ContentsListHelper
+  def contents_list(current_path, links)
+    links.map do |link|
+      content = {
+        href: link["href"],
+        text: link["text"],
+      }
+
+      content[:active] = true if current_path == link["href"]
+      content[:items] = contents_list(current_path, link["items"]) if link["items"].present?
+
+      content
+    end
+  end
+end

app/views/landing_page/blocks/_main_navigation.html.erb

@@ -8,31 +8,31 @@
 
   <nav id="app-b-main-nav__nav">
     <ul class="app-b-main-nav__ul">
-      <% block.data["links"].each do |link| %>
+      <% contents_list(request.path, block.data["links"]).each do |link| %>
         <%
           li_classes = "app-b-main-nav__listitem"
-          li_aria = { current: true } if link["active"]
+          li_aria = { current: true } if link[:active]
         %>
         <%= tag.li(class: li_classes, aria: li_aria) do %>
           <%
             link_classes = "app-b-main-nav__link govuk-link govuk-link--no-underline"
-            link_classes << " app-b-main-nav__link--active" if link["active"]
+            link_classes << " app-b-main-nav__link--active" if link[:active]
           %>
-          <%= tag.a(href: link["link"], class: link_classes) do %>
+          <%= tag.a(href: link[:href], class: link_classes) do %>
             <span class="app-b-main-nav__mobile-border"></span>
-            <%= link["label"] %>
+            <%= link[:text] %>
           <% end %>
-          <% if link["children"] %>
+          <% if link[:items] %>
             <ul class="app-b-main-nav__childlist">
-              <% link["children"].each do |child_link| %>
+              <% link[:items].each do |child_link| %>
                 <%
                   child_link_classes = "app-b-main-nav__link govuk-link govuk-link--no-underline"
-                  child_link_classes << " app-b-main-nav__link--active" if child_link["active"]
+                  child_link_classes << " app-b-main-nav__link--active" if child_link[:active]
                 %>
                 <li class="app-b-main-nav__listitem">
-                  <%= tag.a(href: child_link["link"], class: child_link_classes) do %>
+                  <%= tag.a(href: child_link[:href], class: child_link_classes) do %>
                     <span class="app-b-main-nav__mobile-border"></span>
-                    <%= child_link["label"] %>
+                    <%= child_link[:text] %>
                   <% end %>
                 </li>
               <% end %>

lib/data/landing_page_content_items/landing_page.yaml

@@ -1,19 +1,15 @@
 blocks:
 - type: main_navigation
   links:
-  - label: Ipsums for Lorem
-    link: /ipsum
-    active: true
-  - label: Our Lorem
-    link: /our-lorem
-    active: false
+  - text: Ipsums for Lorem
+    href: /ipsum
+  - text: Our Lorem
+    href: /landing-page/sub-page-1
     children:
-      - label: Child 1
-        link: /a
-        active: false
-      - label: Child 2
-        link: /b
-        active: false
+      - text: Child 1
+        href: /a
+      - text: Child 2
+        href: /b
   title: Service name
   title_link: /landing-page
 - type: hero

lib/data/landing_page_content_items/sub_page_1.yaml

@@ -1,4 +1,17 @@
 blocks:
+- type: main_navigation
+  links:
+  - text: Ipsums for Lorem
+    href: /ipsum
+  - text: Our Lorem
+    href: /landing-page/sub-page-1
+    children:
+      - text: Child 1
+        href: /a
+      - text: Child 2
+        href: /b
+  title: Service name
+  title_link: /landing-page
 - type: govspeak
   content: |
     <h2>Sub Page 1</h2>

spec/fixtures/landing_page.yaml

@@ -1,4 +1,17 @@
 blocks:
+- type: main_navigation
+  links:
+  - text: Ipsums for Lorem
+    href: /ipsum
+  - text: Our Lorem
+    href: /landing-page/sub-page-1
+    children:
+      - text: Child 1
+        href: /a
+      - text: Child 2
+        href: /b
+  title: Service name
+  title_link: /landing-page
 - type: hero
   image:
     alt: "Placeholder alt text"

spec/helpers/contents_list_helper_spec.rb

@@ -0,0 +1,131 @@
+RSpec.describe ContentsListHelper do
+  include ContentsListHelper
+
+  describe "#contents_list" do
+    let(:current_path) { "/active-page" }
+
+    it "returns a list of links" do
+      links = [{
+        "href" => "/landing-page",
+        "text" => "Landing page",
+      }]
+
+      expected = [{
+        href: "/landing-page",
+        text: "Landing page",
+      }]
+
+      expect(contents_list(current_path, links)).to eq(expected)
+    end
+
+    it "sets a link to active if it matches the current path" do
+      links = [{
+        "href" => "/active-page",
+        "text" => "Active page",
+      }]
+
+      expected = [{
+        href: "/active-page",
+        text: "Active page",
+        active: true,
+      }]
+
+      expect(contents_list(current_path, links)).to eq(expected)
+    end
+
+    context "when there are nested links" do
+      it "returns a list of nested links" do
+        links = [
+          {
+            "href" => "/landing-page",
+            "text" => "Landing page",
+          },
+          {
+            "href" => "/our-lorem",
+            "text" => "Our Lorem",
+            "items" => [
+              {
+                "href" => "/a",
+                "text" => "Child 1",
+              },
+              {
+                "href" => "/b",
+                "text" => "Child 2",
+              },
+            ],
+          },
+        ]
+
+        expected = [
+          {
+            href: "/landing-page",
+            text: "Landing page",
+          },
+          {
+            href: "/our-lorem",
+            text: "Our Lorem",
+            items: [
+              {
+                href: "/a",
+                text: "Child 1",
+              },
+              {
+                href: "/b",
+                text: "Child 2",
+              },
+            ],
+          },
+        ]
+
+        expect(contents_list(current_path, links)).to eq(expected)
+      end
+
+      it "sets nested link to active if it matches the current path" do
+        links = [
+          {
+            "href" => "/landing-page",
+            "text" => "Landing page",
+          },
+          {
+            "href" => "/our-lorem",
+            "text" => "Our Lorem",
+            "items" => [
+              {
+                "href" => "/a",
+                "text" => "Child 1",
+              },
+              {
+                "href" => "/active-page",
+                "text" => "Active page",
+              },
+            ],
+          },
+        ]
+
+        expected = [
+          {
+            href: "/landing-page",
+            text: "Landing page",
+          },
+          {
+            href: "/our-lorem",
+            text: "Our Lorem",
+            items: [
+              {
+                href: "/a",
+                text: "Child 1",
+              },
+              {
+                href: "/active-page",
+                text: "Active page",
+                active: true,
+              },
+            ],
+          },
+        ]
+
+        expect(contents_list(current_path, links)).to eq(expected)
+      end
+    end
+  end
+end

spec/system/landing_page_spec.rb

@@ -62,5 +62,11 @@
 
       assert_selector ".landing-page .blocks-container"
     end
+
+    it "renders main navigation" do
+      visit base_path
+
+      assert_selector ".app-b-main-nav .app-b-main-nav__heading-p"
+    end
   end
 end