CLDC-3730 Update tasklist styling (#2822)

* Update tasklist styling

* Update tasklist

* Update test

app/helpers/tag_helper.rb

@@ -30,8 +30,7 @@ module TagHelper
   }.freeze
 
   COLOUR = {
-    not_started: "grey",
-    cannot_start_yet: "grey",
+    not_started: "light-blue",
     in_progress: "blue",
     completed: "green",
     active: "green",
@@ -58,6 +57,8 @@ module TagHelper
   }.freeze
 
   def status_tag(status, classes = [])
+    return nil if COLOUR[status.to_sym].nil?
+
     govuk_tag(
       classes:,
       colour: COLOUR[status.to_sym],
@@ -65,6 +66,10 @@ module TagHelper
     )
   end
 
+  def status_text(status)
+    TEXT[status.to_sym]
+  end
+
   def status_tag_from_resource(resource, classes = [])
     status = resource.status
     status = :active if resource.deactivates_in_a_long_time?

app/helpers/tasklist_helper.rb

@@ -41,12 +41,19 @@ module TasklistHelper
   def subsection_link(subsection, log, current_user)
     if subsection.status(log) != :cannot_start_yet
       next_page_path = next_page_or_check_answers(subsection, log, current_user).to_s
-      govuk_link_to(subsection.label, next_page_path.dasherize, aria: { describedby: subsection.id.dasherize })
+      govuk_link_to(subsection.label, next_page_path.dasherize, class: "govuk-task-list__link", aria: { describedby: subsection.id.dasherize })
     else
       subsection.label
     end
   end
 
+  def subsection_href(subsection, log, current_user)
+    if subsection.status(log) != :cannot_start_yet
+      next_page_path = next_page_or_check_answers(subsection, log, current_user).to_s
+      next_page_path.dasherize
+    end
+  end
+
   def review_log_text(log)
     if log.collection_period_open?
       path = log.sales? ? review_sales_log_path(id: log, sales_log: true) : review_lettings_log_path(log)
@@ -59,6 +66,10 @@ module TasklistHelper
     end
   end
 
+  def tasklist_link_class(status)
+    status == :cannot_start_yet ? "" : "govuk-task-list__item--with-link"
+  end
+
 private
 
   def breadcrumb_organisation(log)

app/views/logs/_tasklist.html.erb

@@ -8,19 +8,21 @@
       <% if section.description %>
         <p class="govuk-body"><%= section.description.html_safe %></p>
       <% end %>
-      <ul class="app-task-list__items">
-        <% section.subsections.each do |subsection| %>
-          <% if subsection.displayed_in_tasklist?(@log) && (subsection.applicable_questions(@log).count > 0 || !subsection.enabled?(@log)) %>
-            <% subsection_status = subsection.status(@log) %>
-            <li class="app-task-list__item">
-              <span class="app-task-list__task-name" id="<%= subsection.id.dasherize %>">
-                <%= subsection_link(subsection, @log, current_user) %>
-              </span>
-              <%= status_tag(subsection_status, "app-task-list__tag") %>
-            </li>
-          <% end %>
-        <% end %>
-      </ul>
+      <%= govuk_task_list(id_prefix: "logs", classes: "app-task-list__items") do |task_list|
+            section.subsections.each do |subsection|
+              next unless subsection.displayed_in_tasklist?(@log) && (subsection.applicable_questions(@log).count.positive? || !subsection.enabled?(@log))
+
+              subsection_status = subsection.status(@log)
+              task_list.with_item(classes: "#{tasklist_link_class(subsection_status)} app-task-list__item") do |item|
+                item.with_title(text: subsection.label, href: subsection_href(subsection, @log, current_user), classes: "app-task-list__name-and-hint--my-modifier")
+                if status_tag(subsection_status, "app-task-list__tag").present?
+                  item.with_status(text: status_tag(subsection_status), classes: "app-task-list__tag")
+                else
+                  item.with_status(text: status_text(subsection_status), classes: "app-task-list__tag")
+                end
+              end
+            end
+          end %>
     </li>
   <% end %>
 </ol>

spec/helpers/tag_helper_spec.rb

@@ -10,8 +10,8 @@ RSpec.describe TagHelper do
     end
 
     it "returns tag with correct status text and colour and custom class" do
-      expect(status_tag("not_started", "app-tag--small")).to eq("<strong class=\"govuk-tag govuk-tag--grey app-tag--small\">Not started</strong>")
-      expect(status_tag("cannot_start_yet", "app-tag--small")).to eq("<strong class=\"govuk-tag govuk-tag--grey app-tag--small\">Cannot start yet</strong>")
+      expect(status_tag("not_started", "app-tag--small")).to eq("<strong class=\"govuk-tag govuk-tag--light-blue app-tag--small\">Not started</strong>")
+      expect(status_tag("cannot_start_yet", "app-tag--small")).to eq(nil)
       expect(status_tag("in_progress", "app-tag--small")).to eq("<strong class=\"govuk-tag govuk-tag--blue app-tag--small\">In progress</strong>")
       expect(status_tag("completed", "app-tag--small")).to eq("<strong class=\"govuk-tag govuk-tag--green app-tag--small\">Completed</strong>")
       expect(status_tag("active", "app-tag--small")).to eq("<strong class=\"govuk-tag govuk-tag--green app-tag--small\">Active</strong>")