Use component for primary navigation

app/components/primary_navigation_component.html.erb

@@ -0,0 +1,17 @@
+<nav class="app-primary-navigation" aria-label="primary">
+  <div class="govuk-width-container">
+    <ul class="app-primary-navigation__list">
+      <% items.each do |item| %>
+        <% if item.fetch(:current, false) || current_page?(item.fetch(:url)) || current_page?("#{item.fetch(:url)}/details") %>
+          <li class="app-primary-navigation__item app-primary-navigation__item--current">
+            <%= govuk_link_to item[:name], item[:url], class: "app-primary-navigation__link", aria: { current: "page" } %>
+          </li>
+        <% else %>
+          <li class="app-primary-navigation__item">
+            <%= govuk_link_to item[:name], item[:url], class: "app-primary-navigation__link" %>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+</nav>

app/components/primary_navigation_component.rb

@@ -0,0 +1,8 @@
+class PrimaryNavigationComponent < ViewComponent::Base
+  attr_reader :items
+
+  def initialize(items:)
+    @items = items
+    super
+  end
+end

app/views/layouts/_primary_navigation.html.erb

@@ -1,18 +0,0 @@
-<nav class="app-primary-navigation">
-<div class="govuk-width-container">
-  <ul class="app-primary-navigation__list">   
-
-  <% items.each do |item| %>
-    <% if current_page?(item.fetch(:url)) || current_page?("#{item.fetch(:url)}/details") %>
-      <li class="app-primary-navigation__item app-primary-navigation__item--current">
-        <%= govuk_link_to item[:name], item[:url], class: 'app-primary-navigation__link', aria: { current: 'page' } %>
-      </li>
-    <% else %>
-      <li class="app-primary-navigation__item">
-        <%= govuk_link_to item[:name], item[:url], class: 'app-primary-navigation__link' %>
-      </li>
-    <% end %>
-  <% end %>
-    </ul>
-</div>
-</nav>

app/views/layouts/application.html.erb

@@ -76,7 +76,7 @@
           { name: "About your organisation", url: "/organisations/#{current_user.organisation.id}" },
         ] %>
       <% end %>
-      <%= render partial: "layouts/primary_navigation", locals: {items: items} %>
+      <%= render PrimaryNavigationComponent.new(items:) %>
     <% end %>
 
     <div class="govuk-width-container">

spec/components/primary_navigation_component_spec.rb

@@ -0,0 +1,27 @@
+require "rails_helper"
+
+RSpec.describe PrimaryNavigationComponent, type: :component do
+  let(:items) do
+    [{ name: "Organisations", url: "#", current: true },
+     { name: "Users", url: "#" },
+     { name: "Logs ", url: "#" }]
+  end
+
+  context "when the item is 'current' in nav tabs" do
+    it "then that tab appears as selected" do
+      result = render_inline(described_class.new(items:))
+
+      expect(result.css('.app-primary-navigation__link[aria-current="page"]').text).to include("Organisations")
+    end
+  end
+
+  context "when rendering tabs" do
+    it "all of the nav tabs specified in the items hash are passed to it" do
+      result = render_inline(described_class.new(items:))
+
+      expect(result.text).to include("Organisations")
+      expect(result.text).to include("Users")
+      expect(result.text).to include("Logs")
+    end
+  end
+end