From 86691d9c0a6ba279ab5e7bf696030748667bd5b1 Mon Sep 17 00:00:00 2001
From: kosiakkatrina <54268893+kosiakkatrina@users.noreply.github.com>
Date: Tue, 5 Oct 2021 14:34:22 +0100
Subject: [PATCH] Cldc 275 focus styling 2 (#32)

---
 app/javascript/controllers/tasklist_controller.js |  8 ++++++++
 app/javascript/styles/_task-list.scss             |  6 ++++++
 app/views/case_logs/edit.html.erb                 | 10 +++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/controllers/tasklist_controller.js

diff --git a/app/javascript/controllers/tasklist_controller.js b/app/javascript/controllers/tasklist_controller.js
new file mode 100644
index 000000000..be94797f8
--- /dev/null
+++ b/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');
+  }
+}
diff --git a/app/javascript/styles/_task-list.scss b/app/javascript/styles/_task-list.scss
index d0f929f86..755836e3f 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_highlight{
+  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..f4e2d346d 100644
--- a/app/views/case_logs/edit.html.erb
+++ b/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 %>