Merge pull request #334 from alphagov/government-navigation

Move the Government navigation component from Static

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Move the Title component from static (PR #324)
 * Move the Lead paragraph component from static (PR #325)
 * Add a Phase banner component to replace the Alpha/Beta banners in Static (PR #333)
+* Move the Government navigation component from static (PR #334)
 
 ### Upgrade instructions
 
@@ -23,6 +24,7 @@ Replace the component by running the following:
 ```
 find app/views -type f -print0 | xargs -0 sed -i '' 's/govuk_component\/title/govuk_publishing_components\/components\/title/g'
 find app/views -type f -print0 | xargs -0 sed -i '' 's/govuk_component\/lead_paragraph/govuk_publishing_components\/components\/lead_paragraph/g'
+find app/views -type f -print0 | xargs -0 sed -i '' 's/govuk_component\/government_navigation/govuk_publishing_components\/components\/government_navigation/g'
 ```
 
 Your tests are likely to need updating as well.

app/views/govuk_publishing_components/components/_government_navigation.html.erb

@@ -0,0 +1,53 @@
+<%
+  active ||= nil
+%>
+
+<nav id="proposition-menu" class="no-proposition-name">
+  <ul id="proposition-links">
+    <li>
+      <a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
+        <%= t("govuk_component.government_navigation.departments", default: "Departments") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'worldwide' %>" href="/government/world">
+        <%= t("govuk_component.government_navigation.worldwide", default: "Worldwide") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'how-government-works' %>" href="/government/how-government-works">
+        <%= t("govuk_component.government_navigation.how-government-works", default: "How government works") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'get-involved' %>" href="/government/get-involved">
+        <%= t("govuk_component.government_navigation.get-involved", default: "Get involved") %>
+      </a>
+    </li>
+    <li class="clear-child">
+      <a class="<%= 'active' if active == 'policies' %>" href="/government/policies">
+        <%= t("govuk_component.government_navigation.policies", default: "Policies") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'publications' %>" href="/government/publications">
+        <%= t("govuk_component.government_navigation.publications", default: "Publications") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'consultations' %>" href="/government/publications?publication_filter_option=consultations">
+        <%= t("govuk_component.government_navigation.consultations", default: "Consultations") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'statistics' %>" href="/government/statistics">
+        <%= t("govuk_component.government_navigation.statistics", default: "Statistics") %>
+      </a>
+    </li>
+    <li>
+      <a class="<%= 'active' if active == 'announcements' %>" href="/government/announcements">
+        <%= t("govuk_component.government_navigation.announcements", default: "Announcements") %>
+      </a>
+    </li>
+  </ul>
+</nav>

app/views/govuk_publishing_components/components/docs/government_navigation.yml

@@ -0,0 +1,18 @@
+name: Government navigation
+description: Navigation placed in the header by Slimmer and used by pages which sit
+  under the /government path. This is a markup only component and is not available
+  for preview here. It can be passed a string to mark a link as being active.
+accessibility_criteria: |
+  The government navigation component must:
+
+  - Be identified as a [navigation landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_navigation)
+shared_accessibility_criteria:
+  - link
+accessibility_excluded_rules:
+  - 'duplicate-id' # ids used in this component are for slimmer to use when moving this component into the header
+examples:
+  default:
+    data: {}
+  with_active_item:
+    data:
+      active: departments

spec/components/government_navigation_spec.rb

@@ -0,0 +1,31 @@
+require 'rails_helper'
+
+describe "Government navigation", type: :view do
+  def component_name
+    "government_navigation"
+  end
+
+  it "renders a list of government links" do
+    render_component({})
+
+    assert_select "\#proposition-links li a", text: "Departments"
+    assert_link_with_text("/government/organisations", "Departments")
+    assert_link_with_text("/government/announcements", "Announcements")
+  end
+
+  it "has no active links by default" do
+    render_component({})
+
+    assert_select "a.active", false
+  end
+
+  it "can mark a link as active" do
+    render_component(active: 'departments')
+
+    assert_select "a.active", text: "Departments"
+  end
+
+  def assert_link_with_text(link, text)
+    assert_select "a[href=\"#{link}\"]", text: text
+  end
+end