Cldc 275 focus styling 2 (#32)

app/javascript/controllers/tasklist_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  addHighlight() {
+    let section_to_highlight = this.element.dataset.info;
+    document.getElementById(section_to_highlight).classList.add('tasklist_item_highlight');
+  }
+}

app/javascript/styles/_task-list.scss

@@ -85,3 +85,9 @@
 //   display: block;
 //   border: 1px solid blue
 // }
+
+.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/views/case_logs/edit.html.erb

@@ -8,11 +8,15 @@
         <%= @case_log.status %></h2>
       <p class="govuk-body govuk-!-margin-bottom-7">You've completed <%= get_sections_count(@form, @case_log, :completed) %> of <%= get_sections_count(@form, @case_log, :all) %> sections.</p>
       <p class="govuk-body govuk-!-margin-bottom-7">
-        <a href="#<%= get_next_incomplete_section(@form, @case_log) %>">Skip to next incomplete section</a>
+        <% next_incomplete_section=get_next_incomplete_section(@form, @case_log) %>
+        <a href="#<%= next_incomplete_section %>"
+           data-controller="tasklist"
+           data-action="tasklist#addHighlight"
+           data-info=<%= next_incomplete_section %>>
+          Skip to next incomplete section
+        </a>
       </p>
-
       <%= render "tasklist", locals: { form: @form } %>
-
     </div>
   </div>
 <% end %>