Merge pull request #4260 from DFE-Digital/1720-page-updates-to-course…

…-details-page-tabs

[1720] Replace tabs with secondary navigation component

app/assets/stylesheets/components/publish/_secondary-navigation.scss

@@ -0,0 +1,98 @@
+.app-secondary-navigation {
+  margin-bottom: govuk-spacing(7);
+}
+
+.app-secondary-navigation__list {
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+    width: 100%;
+  }
+}
+
+.app-secondary-navigation__item {
+  @include govuk-font(19);
+  box-shadow: inset 0 -1px 0 $govuk-border-colour;
+  display: block;
+  margin-top: -1px;
+
+  &:last-child {
+    box-shadow: none;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    box-shadow: none;
+    display: inline-block;
+    margin-right: govuk-spacing(4);
+    margin-top: 0;
+  }
+}
+
+.app-secondary-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  display: block;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(3);
+  padding-left: govuk-spacing(3);
+  text-decoration: none;
+  position: relative;
+  font-weight: bold;
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: 0;
+  }
+
+  &:link,
+  &:visited {
+    color: govuk-colour("blue");
+  }
+
+  &:focus {
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
+    position: relative; // Ensure focus sits above everything else.
+    box-shadow: none;
+  }
+
+  &:focus:before {
+    background-color: govuk-colour("black");
+    content: "";
+    display: block;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: govuk-spacing(1);
+  }
+}
+
+.app-secondary-navigation__link[aria-current="page"] {
+  color: govuk-colour("black");
+  position: relative;
+  text-decoration: none;
+
+  &:before {
+    background-color: govuk-colour("blue");
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: govuk-spacing(1);
+
+    @include govuk-media-query($from: tablet) {
+      height: govuk-spacing(1);
+      width: 100%;
+    }
+  }
+
+  &:focus:before {
+    background-color: govuk-colour("black");
+  }
+}

app/assets/stylesheets/publish_application.scss

@@ -25,6 +25,7 @@
 @import "components/publish/tabs";
 @import "components/publish/title-bar";
 @import "components/publish/code";
+@import "components/publish/secondary-navigation";
 
 .app-list--dash {
   padding-left: govuk-spacing(3);

app/components/secondary_navigation_component.html.erb

@@ -0,0 +1,7 @@
+<div class="app-secondary-navigation">
+  <ul class="app-secondary-navigation__list">
+    <% navigation_items.each do |navigation_item| %>
+      <%= navigation_item %>
+    <% end %>
+  </ul>
+</div>

app/components/secondary_navigation_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class SecondaryNavigationComponent < ViewComponent::Base
+  renders_many :navigation_items, 'NavigationItemComponent'
+
+  class NavigationItemComponent < ViewComponent::Base
+    attr_reader :name, :url
+
+    def initialize(name, url, classes: [], html_attributes: {})
+      @name = name
+      @url = url
+
+      super(classes:, html_attributes:)
+    end
+
+    def call
+      content_tag(:li, class: 'app-secondary-navigation__item') do
+        link_to name, url, class: 'app-secondary-navigation__link', aria: { current: current_page?(url) && 'page' }
+      end
+    end
+  end
+end

app/views/publish/courses/_course_navigation.html.erb

@@ -0,0 +1,4 @@
+<%= render SecondaryNavigationComponent.new do |component| %>
+  <% component.with_navigation_item t("secondary_navigation.description"), publish_provider_recruitment_cycle_course_path(@provider.provider_code, course.recruitment_cycle_year, course.course_code) %>
+  <% component.with_navigation_item t("secondary_navigation.basic_details"), details_publish_provider_recruitment_cycle_course_path(@provider.provider_code, course.recruitment_cycle_year, course.course_code) %>
+<% end %>

app/views/publish/courses/_description_content.html.erb

@@ -1,4 +1,4 @@
-<h3 class="govuk-heading-m">Course information</h3>
+<h2 class="govuk-heading-m">Course information</h2>
 
 <%= govuk_summary_list do |summary_list| %>
   <% enrichment_summary(
@@ -32,13 +32,13 @@
   ) %>
 <% end %>
 
-<h3 class="govuk-heading-m">
+<h2 class="govuk-heading-m">
   <% if course.has_fees? %>
     Course length and fees
   <% else %>
     Course length and salary
   <% end %>
-</h3>
+</h2>
 <%= govuk_summary_list do |summary_list| %>
   <% if course.has_fees? %>
     <% enrichment_summary(
@@ -119,7 +119,7 @@
   <% end %>
 <% end %>
 
-<h3 class="govuk-heading-m">Requirements and eligibility</h3>
+<h2 class="govuk-heading-m">Requirements and eligibility</h2>
 
   <%= govuk_summary_list do |summary_list| %>
     <% if course.show_degree_requirements_row? %>

app/views/publish/courses/details.html.erb

@@ -8,43 +8,12 @@
 <%= render partial: "course_button_panel" %>
 <%= render partial: "rolled_over_link" %>
 
-<div class="govuk-tabs app-tabs app-tabs--course">
-  <h2 class="govuk-tabs__title">Contents</h2>
+<%= render partial: "publish/courses/course_navigation" %>
 
-  <ul class="govuk-tabs__list" role="tablist">
-    <li class="govuk-tabs__list-item" role="presentation">
-      <%= govuk_link_to(
-        publish_provider_recruitment_cycle_course_path(@provider.provider_code, course.recruitment_cycle_year, course.course_code),
-        class: "govuk-tabs__tab",
-        role: "tab",
-        tabindex: "0",
-        aria: { selected: false }
-      ) do %>
-        Description<br>
-        <span class="govuk-body-s govuk-!-font-weight-regular pointer-events-none">Content, fees and eligibility</span>
-      <% end %>
-    </li>
-
-    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected" role="presentation">
-      <%= govuk_link_to(
-        "#basic_details",
-        class: "govuk-tabs__tab",
-        id: "basic_details_tab",
-        role: "tab",
-        tabindex: "-1",
-        aria: { selected: true }
-      ) do %>
-        Basic details<br>
-        <span class="govuk-body-s govuk-!-font-weight-regular pointer-events-none">Schools, outcome, subject</span>
-      <% end %>
-    </li>
-  </ul>
-
-  <section class="govuk-tabs__panel" id="basic_details" role="tabpanel" aria-labelledby="basic_details_tab">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <%= render partial: "basic_details_tab" %>
-      </div>
+<section class="app-section" id="basic_details" role="tabpanel" aria-labelledby="basic_details_tab">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render partial: "basic_details_tab" %>
     </div>
-  </section>
-</div>
+  </div>
+</section>

app/views/publish/courses/show.html.erb

@@ -33,42 +33,12 @@
 <%= render partial: "course_button_panel" %>
 <%= render partial: "rolled_over_link" %>
 
-<div class="govuk-tabs app-tabs app-tabs--course">
-  <h2 class="govuk-tabs__title">Contents</h2>
+<%= render partial: "publish/courses/course_navigation" %>
 
-  <ul class="govuk-tabs__list" role="tablist">
-    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected" role="presentation">
-      <%= govuk_link_to(
-        "#description",
-        class: "govuk-tabs__tab",
-        role: "tab",
-        tabindex: "-1",
-        aria: { selected: true }
-      ) do %>
-        Description<br>
-        <span class="govuk-body-s govuk-!-font-weight-regular pointer-events-none">Content, fees and eligibility</span>
-      <% end %>
-    </li>
-
-    <li class="govuk-tabs__list-item" role="presentation">
-      <%= govuk_link_to(
-        details_publish_provider_recruitment_cycle_course_path(@provider.provider_code, course.recruitment_cycle_year, course.course_code),
-        class: "govuk-tabs__tab",
-        role: "tab",
-        tabindex: "1",
-        aria: { selected: false }
-      ) do %>
-        Basic details<br>
-        <span class="govuk-body-s govuk-!-font-weight-regular pointer-events-none">Schools, outcome, subject</span>
-      <% end %>
-    </li>
-  </ul>
-
-  <section class="govuk-tabs__panel" id="description">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
-        <%= render partial: "description_content" %>
-      </div>
+<section class="app-section" id="description">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render partial: "description_content" %>
     </div>
-  </section>
-</div>
+  </div>
+</section>

config/locales/en.yml

@@ -67,6 +67,9 @@ en:
     training_partners: "Training partners"
     organisation_details: "Organisation details"
     accredited_provider: "Accredited providers"
+  secondary_navigation:
+    description: Description
+    basic_details: Basic details
   qualifications:
     description:
       qts: QTS

spec/support/page_objects/publish/provider_courses_show.rb

@@ -27,8 +27,8 @@ class ProviderCoursesShow < PageObjects::Base
       section :other_requirements, Sections::SummaryList, '[data-qa="enrichment__other_requirements"]'
       section :course_button_panel, Sections::CourseButtonPanel, '[data-qa="course__button_panel"]'
 
-      element :description_link, 'a.govuk-link.govuk-tabs__tab', text: 'Description'
-      element :basic_details_link, 'a.govuk-link.govuk-tabs__tab', text: 'Basic details'
+      element :description_link, 'a.app-secondary-navigation__link', text: 'Description'
+      element :basic_details_link, 'a.app-secondary-navigation__link', text: 'Basic details'
       element :content_status, '[data-qa="course__content-status"]'
       element :rolled_over_course_link, '[data-qa="course__rolled-over-link"]'
       element :publish_button, 'button[type=submit]'