View component init

Gemfile

@@ -35,6 +35,7 @@ gem "json-schema"
 gem "devise"
 gem "turbo-rails", "~> 0.8"
 gem "uk_postcode"
+gem "view_component"
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

Gemfile.lock

@@ -438,6 +438,7 @@ DEPENDENCIES
   turbo-rails (~> 0.8)
   tzinfo-data
   uk_postcode
+  view_component
   web-console (>= 4.1.0)
   webpacker (~> 5.0)
 

app/components/tab_navigation_component.html.erb

@@ -0,0 +1,13 @@
+<nav class="app-tab-navigation" aria-label="sub menu">
+  <ul class="app-tab-navigation__list">
+    <% items.each do |item| %>
+      <li class="app-tab-navigation__item">
+        <% if item.fetch(:current, false) || current_page?(strip_query(item.fetch(:url))) %>
+          <%= govuk_link_to item[:name], item[:url], class: 'app-tab-navigation__link', aria: { current: 'page' } %>
+        <% else %>
+          <%= govuk_link_to item[:name], item[:url], class: 'app-tab-navigation__link' %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</nav>

app/components/tab_navigation_component.rb

@@ -0,0 +1,13 @@
+class TabNavigationComponent < ViewComponent::Base
+  attr_reader :items
+
+  def initialize(items:)
+    @items = items
+  end
+
+  def strip_query(url)
+    url = Addressable::URI.parse(url)
+    url.query_values = nil
+    url.to_s
+  end
+end

app/javascript/styles/_tab-navigation.scss

@@ -0,0 +1,76 @@
+.app-tab-navigation {
+  @include govuk-font(19, $weight: bold);
+  @include govuk-responsive-margin(6, "bottom");
+}
+
+.app-tab-navigation__list {
+  @include govuk-clearfix;
+  // left: govuk-spacing(-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  // right: govuk-spacing(-3);
+  width: calc(100% + #{govuk-spacing(6)});
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+  }
+}
+
+.app-tab-navigation__item {
+  box-sizing: border-box;
+  display: block;
+  line-height: 40px;
+  height: 40px;
+  padding: 0 govuk-spacing(3);
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: none;
+    display: block;
+    float: left;
+    line-height: 50px;
+    height: 50px;
+    padding: 0 govuk-spacing(3);
+    position: relative;
+  }
+}
+
+.app-tab-navigation__item--current {
+  @include govuk-media-query($until: tablet) {
+    border-left: 4px solid $govuk-link-colour;
+    padding-left: 11px;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    border-bottom: 4px solid $govuk-link-colour;
+    padding-left: govuk-spacing(3);
+  }
+}
+
+.app-tab-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  @include govuk-typography-weight-bold;
+
+  &:not(:focus):hover {
+    color: $govuk-link-colour;
+  }
+
+  // Extend the touch area of the link to the list
+  &:after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.app-tab-navigation__item--current .app-tab-navigation__link {
+  &:hover {
+    text-decoration: none;
+  }
+}

app/javascript/styles/application.scss

@@ -12,6 +12,7 @@ $govuk-image-url-function: frontend-image-url;
 @import "~govuk-frontend/govuk/all";
 
 @import '_task-list';
+@import '_tab-navigation';
 
 $govuk-global-styles: true;
 

app/views/organisations/_details.html.erb

@@ -0,0 +1,8 @@
+<%= govuk_summary_list do |summary_list| %>
+  <% @organisation.display_attributes.each do |attr, val| %>
+    <%= summary_list.row do |row|
+      row.key { attr.to_s.humanize }
+      row.value { simple_format(val, {}, wrapper_tag: "div") }
+    end %>
+  <% end %>
+<% end %>

app/views/organisations/show.html.erb

@@ -9,35 +9,7 @@
   Your Organisation
 </h1>
 
-<%= govuk_tabs(title: "Your Organisation") do |component| %>
+<%= render TabNavigationComponent.new(items: [
-  <%= component.tab(label: "Details") do |tab| %>
+  { name: t('Details'), partial: '_details' },
-    <%= govuk_summary_list do |summary_list| %>
+  { name: t('Users'), url: '#' },
-      <% @organisation.display_attributes.each do |attr, val| %>
+]) %>
-        <%= summary_list.row do |row|
-          row.key { attr.to_s.humanize }
-          row.value { simple_format(val, {}, wrapper_tag: "div") }
-        end %>
-      <% end %>
-    <% end %>
-  <% end %>
-  <%= component.tab(label: "Users") do |tab| %>
-    <%= govuk_table do |table| %>
-      <%= table.head do |head| %>
-        <%= head.row do |row|
-          row.cell(header: true, text: "Name and email adress")
-          row.cell(header: true, text: "Organisation and role")
-          row.cell(header: true, text: "Last logged in")
-        end %>
-      <% end %>
-      <% @organisation.users.each do |user| %>
-        <%= table.body do |body| %>
-          <%= body.row do |row|
-            row.cell(text: simple_format(user.name_email_display, {}, wrapper_tag: "div"))
-            row.cell(text: simple_format(user.org_role_display, {}, wrapper_tag: "div"))
-            row.cell(text: user.last_sign_in_at_display )
-          end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>