From cd544b744f6ab15529732f4e392ca3948d66c9a6 Mon Sep 17 00:00:00 2001
From: Kat <katrina@madetech.com>
Date: Tue, 5 Oct 2021 11:32:20 +0100
Subject: [PATCH] Toggle the highlight styling when the skip to next incomplete
 section is clicked

---
 app/javascript/packs/application.js   | 2 ++
 app/javascript/packs/tasklist.js      | 3 +++
 app/javascript/styles/_task-list.scss | 6 ++++++
 app/views/case_logs/edit.html.erb     | 7 ++++---
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/packs/tasklist.js

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index dc909ede8..081e41d89 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -17,3 +17,5 @@ ActiveStorage.start()
 initAll()
 
 import "controllers"
+import './tasklist'
+
diff --git a/app/javascript/packs/tasklist.js b/app/javascript/packs/tasklist.js
new file mode 100644
index 000000000..77f2db887
--- /dev/null
+++ b/app/javascript/packs/tasklist.js
@@ -0,0 +1,3 @@
+window.addHighlight = function(elementId) {
+  document.getElementById(elementId).classList.add('tasklist_item_highligh');
+}
diff --git a/app/javascript/styles/_task-list.scss b/app/javascript/styles/_task-list.scss
index d0f929f86..2570f7579 100644
--- a/app/javascript/styles/_task-list.scss
+++ b/app/javascript/styles/_task-list.scss
@@ -85,3 +85,9 @@
 //   display: block;
 //   border: 1px solid blue
 // }
+
+.app-task-list__item:target,
+.tasklist_item_highligh{
+  background-color: $govuk-focus-colour;
+  box-shadow: 0 -2px  $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+}
diff --git a/app/views/case_logs/edit.html.erb b/app/views/case_logs/edit.html.erb
index 074c8ff90..4a77253f6 100644
--- a/app/views/case_logs/edit.html.erb
+++ b/app/views/case_logs/edit.html.erb
@@ -8,11 +8,12 @@
         <%= @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 %>" onclick="addHighlight('<%= next_incomplete_section %>')">
+          Skip to next incomplete section
+        </a>
       </p>
-
       <%= render "tasklist", locals: { form: @form } %>
-
     </div>
   </div>
 <% end %>