Update styles on task list page

app/views/case_logs/_tasklist.html.erb

@@ -1,10 +1,8 @@
-<ol class="app-task-list app-task-list--no-numbers">
+<ol class="app-task-list govuk-!-margin-top-8">
   <% @case_log.form.sections.map do |section| %>
     <li>
-      <h2 class="app-task-list__section">
-        <span class="app-task-list__section-number">
-          <%= section.label %>
-        </span>
+      <h2 class="app-task-list__section-heading">
+        <%= section.label %>
       </h2>
       <% if section.description %>
         <p class="govuk-body"><%= section.description.html_safe %></p>

app/views/case_logs/edit.html.erb

@@ -7,23 +7,25 @@
 <%= turbo_frame_tag "case_log_form", target: "_top" do %>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
-      <h1 class="govuk-heading-l">
+      <h1 class="govuk-heading-xl">
         <%= content_for(:title) %>
       </h1>
 
       <h2 class="govuk-heading-s govuk-!-margin-bottom-2">
-        This submission is
+        This log is
         <%= @case_log.status.to_s.humanize.downcase %>
       </h2>
 
-      <p class="govuk-body govuk-!-margin-bottom-7">You’ve completed <%= get_subsections_count(@case_log, :completed) %> of <%= get_subsections_count(@case_log, :all) %> sections.</p>
-      <p class="govuk-body govuk-!-margin-bottom-7">
-        <% next_incomplete_section = get_next_incomplete_section(@case_log).id %>
-        <a class="govuk-link" href="#<%= next_incomplete_section %>"
+      <p class="govuk-body govuk-!-margin-bottom-7">You have completed <%= get_subsections_count(@case_log, :completed) %> of <%= get_subsections_count(@case_log, :all) %> sections.</p>
+      <p class="govuk-body govuk-!-margin-bottom-2">
+        <% next_incomplete_section = get_next_incomplete_section(@case_log) %>
+      </p>
+      <p>
+        <a class="app-section-skip-link" href="#<%= next_incomplete_section.id %>"
            data-controller="tasklist"
            data-action="tasklist#addHighlight"
-           data-info=<%= next_incomplete_section %>>
-          Skip to next incomplete section
+           data-info=<%= next_incomplete_section.id %>>
+          Skip to next incomplete section: <%= next_incomplete_section.label %>
         </a>
       </p>
       <%= render "tasklist" %>

app/webpacker/styles/_section-skip-link.scss

@@ -0,0 +1,9 @@
+.app-section-skip-link {
+  @include govuk-visually-hidden-focusable;
+  @include govuk-typography-common;
+  @include govuk-link-decoration;
+  @include govuk-link-style-text;
+
+  display: inline-block;
+  padding: govuk-spacing(2) govuk-spacing(3);
+}

app/webpacker/styles/_task-list.scss

@@ -1,28 +1,19 @@
-
-// Task list pattern
-
 .app-task-list {
   list-style-type: none;
   padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
+
   @include govuk-media-query($from: tablet) {
-    min-width: 550px;
+    min-width: 400px;
   }
 }
 
-.app-task-list__section {
-  display: table;
+.app-task-list__section-heading {
   @include govuk-font($size:24, $weight: bold);
-}
-
-.app-task-list__section-number {
-  display: table-cell;
-
-  @include govuk-media-query($from: tablet) {
-    min-width: govuk-spacing(6);
-    padding-right: 0;
-  }
+  display: table;
+  margin-top: govuk-spacing(0);
+  margin-bottom: govuk-spacing(4);
 }
 
 .app-task-list__items {
@@ -30,17 +21,13 @@
   @include govuk-responsive-margin(9, "bottom");
   list-style: none;
   padding-left: 0;
-  @include govuk-media-query($from: tablet) {
-    padding-left: govuk-spacing(6);
-  }
 }
 
 .app-task-list__item {
+  @include govuk-clearfix;
   border-bottom: 1px solid $govuk-border-colour;
-  margin-bottom: 0 !important;
   padding-top: govuk-spacing(2);
   padding-bottom: govuk-spacing(2);
-  @include govuk-clearfix;
 }
 
 .app-task-list__item:first-child {
@@ -49,16 +36,13 @@
 
 .app-task-list__task-name {
   display: block;
+
   @include govuk-media-query($from: 450px) {
     float: left;
   }
 }
 
-// The `app-task-list__task-completed` class was previously used on the task
-// list for the completed tag (changed in 86c90ec) – it's still included here to
-// avoid breaking task lists in existing prototypes.
-.app-task-list__tag,
-.app-task-list__task-completed {
+.app-task-list__tag {
   margin-top: govuk-spacing(2);
   margin-bottom: govuk-spacing(1);
 
@@ -68,21 +52,3 @@
     margin-bottom: 0;
   }
 }
-
-
-//custom
-.app-task-list {
-  &__item:target {
-  }
-  &--no-numbers &__items {
-    @include govuk-media-query($from: tablet) {
-      padding-left: 0;
-    }
-  }
-}
-
-.app-task-list__item:target,
-.tasklist_item_highlight{
-  background-color: $govuk-focus-colour;
-  box-shadow: 0 -2px  $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
-}

app/webpacker/styles/application.scss

@@ -15,6 +15,7 @@ $govuk-global-styles: true;
 @import "accessible-autocomplete";
 @import "input";
 @import "related-navigation";
+@import "section-skip-link";
 @import "task-list";
 @import "tab-navigation";
 

spec/features/form/tasklist_page_spec.rb

@@ -33,12 +33,12 @@ RSpec.describe "Task List" do
 
   it "shows the number of completed sections if no sections are completed" do
     visit("/logs/#{empty_case_log.id}")
-    expect(page).to have_content("You’ve completed 0 of 9 sections.")
+    expect(page).to have_content("You have completed 0 of 9 sections.")
   end
 
   it "shows the number of completed sections if one section is completed" do
     answer_all_questions_in_income_subsection(empty_case_log)
     visit("/logs/#{empty_case_log.id}")
-    expect(page).to have_content("You’ve completed 1 of 9 sections.")
+    expect(page).to have_content("You have completed 1 of 9 sections.")
   end
 end