[DO NOT MERGE] Post Election Changes

app/assets/stylesheets/components/_email-link.scss

@@ -1,16 +1,19 @@
 .app-c-email-link {
   display: block;
-  font-weight: bold;
   padding: govuk-spacing(4);
-  background: govuk-colour('grey-4');
+  background: govuk-colour("light-grey", $legacy: "grey-4");
+
+  .app-c-email-link__title {
+    font-weight: bold;
+  }
+
+  .app-c-email-link__icon {
+    position: relative;
+    margin-right: govuk-spacing(2);
+    top: govuk-spacing(1);
+  }
 
   .app-c-email-link__link {
-    .app-c-email-link__icon {
-      position: relative;
-      margin-right: govuk-spacing(2);
-      top: govuk-spacing(1);
-      fill: $govuk-link-colour;
-    }
 
     &:visited .app-c-email-link__icon {
       fill: $govuk-link-visited-colour;

app/assets/stylesheets/views/_brexit_checker_results_page.scss

@@ -1,26 +1,84 @@
 .brexit-checker-results-page {
-  .govuk-section-break--bold {
-    border-bottom: 3px solid govuk-colour('blue');
+  .brexit-checker-results {
+    margin-top: govuk-spacing(6);
   }
 
-  .govuk-section-break--visible-mobile-only {
+  .brexit-checker-actions {
+    margin-top: govuk-spacing(6);
+    margin-bottom: govuk-spacing(6);
+  }
+
+  .brexit-checker__action {
+    margin: 0 0 govuk-spacing(2);
     @include govuk-media-query($from: tablet) {
-      display: none;
+      margin: 0 0 govuk-spacing(6);
     }
   }
 
+  .brexit-checker__criteria {
+    border-bottom: 1px solid $govuk-border-colour;
+    margin-bottom: govuk-spacing(3);
+    padding-bottom: govuk-spacing(1);
+    @include govuk-media-query($from: tablet) {
+      border-bottom: none;
+    }
+  }
+
+  .brexit-checker__content-wrapper {
+    padding: 0 0 govuk-spacing(3) 0;
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .brexit-checker__action:last-child .brexit-checker__content-wrapper {
+    border-bottom: none;
+  }
+
   .brexit-checker-actions__description {
     padding: govuk-spacing(4);
     background-color: govuk-colour('grey-4');
   }
 
-  .stay-updated__heading,
-  .action-audience__heading {
-    @include govuk-font($size: 27, $weight: bold);
+  .brexit-checker-actions__group {
+    padding-top: govuk-spacing(6);
+    border-bottom: 1px solid $govuk-border-colour;
 
     @include govuk-media-query($until: tablet) {
-      @include govuk-font($size: 36, $weight: bold);
-      @include govuk-responsive-margin(6, "bottom");
+      padding-top: govuk-spacing(4);
     }
   }
+
+  .brexit-checker__stay_updated {
+    border-top: 1px solid $govuk-border-colour;
+    padding-top: govuk-spacing(4);
+  }
+
+  .brexit-checker-actions__group:last-child {
+    border-bottom: none;
+  }
+
+  .brexit-checker__subscribe-description {
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .stay-updated__heading {
+    margin-top: govuk-spacing(3);
+  }
+
+  .brexit-checker__no-results {
+    margin-top: govuk-spacing(6);
+    padding-top: govuk-spacing(6);
+    border-top: 3px solid $govuk-brand-colour;
+  }
+
+  .brexit-checker__no-results-warning {
+    background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    padding: govuk-spacing(4);
+  }
+
+  .action-audience__heading {
+    border-top: 3px solid $govuk-brand-colour;
+    border-bottom: 1px solid $govuk-border-colour;
+    padding: govuk-spacing(4) 0;
+    margin-bottom: 0;
+  }
 }

app/helpers/brexit_checker_helper.rb

@@ -1,25 +1,83 @@
 require "addressable/uri"
 
 module BrexitCheckerHelper
-  def format_criteria_list(criteria)
-    criteria.map { |criterion| { readable_text: criterion.text } }
+  def select_criteria(criteria, actions)
+    criteria.select do |criterion|
+      actions.any? do |action|
+        action.all_criteria.include? criterion.key
+      end
+    end
+  end
+
+  def format_criteria(criteria, actions = [])
+    selected_criteria = if !actions.empty?
+                          select_criteria(criteria, actions)
+                        else
+                          criteria
+                        end
+    selected_criteria.map { |criterion| { readable_text: criterion.text } }
   end
 
-  def format_action_audiences(actions)
+  def format_action_audiences(actions, criteria)
     business, citizen = actions.partition { |action| action.audience == "business" }
-    business_results = {
-      heading: I18n.t("brexit_checker.results.audiences.business.heading"),
-      actions: order_actions_by_priority(business),
-    }
-    citizen_results = {
-      heading: I18n.t("brexit_checker.results.audiences.citizen.heading"),
-      actions: order_actions_by_priority(citizen),
-    }
-    [business_results, citizen_results]
+    business_groups = format_business_group(business, criteria)
+    citizens_groups = format_citizen_groups(citizen, criteria)
+    business_results = if !business_groups.empty?
+                         {
+                           heading: I18n.t("brexit_checker.results.audiences.business.heading"),
+                           groups: business_groups,
+                         }
+                       end
+    citizen_results = if !citizens_groups.empty?
+                        {
+                          heading: I18n.t("brexit_checker.results.audiences.citizen.heading"),
+                          groups: citizens_groups,
+                        }
+                      end
+    [business_results, citizen_results].compact
+  end
+
+  def format_business_group(actions, criteria)
+    business_actions = order_actions_by_priority(actions)
+    if business_actions.any?
+      [{
+        heading: nil,
+        priority: 10,
+        actions: business_actions,
+        criteria: format_criteria(criteria, business_actions),
+      }]
+    else
+      []
+    end
+  end
+
+  def format_citizen_groups(actions, criteria)
+    all_groups = actions.map(&:groups).flatten.uniq
+    citizen_groups = all_groups.map do |group|
+      grouped_actions = format_citizen_actions(actions, group["key"])
+      if grouped_actions.any?
+        {
+          heading: group["text"],
+          priority: group["priority"],
+          actions: grouped_actions,
+          criteria: format_criteria(criteria, grouped_actions),
+        }
+      end
+    end
+    order_citizen_groups(citizen_groups)
+  end
+
+  def format_citizen_actions(actions, group_key)
+    grouped_actions = actions.select { |action| action.result_groups.include?(group_key) }
+    order_actions_by_priority(grouped_actions)
+  end
+
+  def order_citizen_groups(citizen_groups)
+    citizen_groups.sort_by { |group| -group[:priority] }
   end
 
-  def order_actions_by_priority(action_group)
-    action_group.sort_by.with_index do |action, index|
+  def order_actions_by_priority(actions)
+    actions.sort_by.with_index do |action, index|
       [-action.priority, index]
     end
   end

app/views/brexit_checker/_action_audiences.html.erb

@@ -1,27 +1,41 @@
-<% if audiences.any? %>
-  <% audiences.each.with_index do |audience, index| %>
-    <% if audience[:actions].any? %>
-      <div class="govuk-grid-row govuk-!-margin-bottom-6">
-        <div class="govuk-grid-column-full">
-          <h2 class="govuk-heading-l action-audience__heading"><%= audience[:heading] %></h2>
-        </div>
-        <div class="govuk-grid-column-full" data-analytics-ecommerce data-ecommerce-start-index="1" data-list-title="Brexit checker results: <%= audience[:heading] %>" data-search-query>
-          <%= render "action_list", {
-            audience_heading: audience[:heading],
-            audience_index: index + 1,
-            items: audience[:actions]
-          } %>
-        </div>
-      </div>
+<% if audiences.any?  %>
+  <section class="brexit-checker-actions">
+    <% audiences.each do |audience| %>
+      <section class="brexit-checker-audience">
+        <% if audience[:groups].any? %>
+          <header>
+            <h2 class="govuk-heading-l action-audience__heading">
+              <%= audience[:heading] %>
+            </h2>
+          </header>
+          <% audience[:groups].each.with_index do |group, group_index| %>
+            <section class="brexit-checker-actions__group">
+              <div class="govuk-grid-row">
+                <%= render 'results_criteria', criteria: group[:criteria], heading: group[:heading] %>
+                <div class="govuk-grid-column-two-thirds">
+                  <% analytics_group = "#{audience[:heading]} #{" - #{group[:heading]} - " if !group[:heading].nil?}#{group_index + 1}." %>
+                  <%= render "action_list", {
+                    analytics_group: analytics_group,
+                    priority: group[:priority],
+                    actions: group[:actions]
+                  } %>
+                </div>
+              </div>
+            </section>
+          <% end %>
+        <% end %>
+      </section>
     <% end %>
-  <% end %>
-  <p class="govuk-body brexit-checker-actions__description">
-    <%= action_based_description %>
-  </p>
+  </section>
 <% else %>
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-full">
-      <p class="govuk-body"><%= t("brexit_checker.action_audiences.no_results") %></p>
+  <div class="brexit-checker__no-results">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-third">
+        <%= render 'results_criteria', criteria: format_criteria(@criteria) %>
+      </div>
+      <div class="govuk-grid-column-two-thirds">
+        <p class="govuk-body brexit-checker__no-results-warning"><%= t("brexit_checker.action_audiences.no_results") %></p>
+      </div>
     </div>
   </div>
 <% end %>

app/views/brexit_checker/_action_list.html.erb

@@ -1,14 +1,13 @@
-<% items.each.with_index do | action, index | %>
-  <% action_index = "#{audience_index}.#{'%02d' % (index + 1)}"%>
-  <div class="govuk-grid-row govuk-!-margin-bottom-3">
-    <div class="govuk-grid-column-three-quarters">
+<% actions.each.with_index do | action, index | %>
+  <div class="govuk-grid-row brexit-checker__action">
+    <div class="brexit-checker__content-wrapper">
       <p class="govuk-body govuk-!-font-weight-bold">
         <% if action.title_url.present? %>
           <a
             class="govuk-link"
             href="<%= action.title_url %>"
             data-module="track-click"
-            data-track-action="<%= audience_heading %> <%= action_index %> - Action"
+            data-track-action="<%= "#{analytics_group}#{index + 1}"%> - Action"
             data-track-category="brexit-checker-results"
             data-track-label="<%= action.title_url %>"
             data-ecommerce-row
@@ -18,45 +17,44 @@
           <%= action.title %>
         <% end %>
       </p>
+      <% if action.lead_time.present? %>
+        <div class="govuk-body govuk-!-font-weight-bold">
+          <div class="govuk-inset-text">
+            <%= action.lead_time %>
+          </div>
+        </div>
+      <% end %>
 
       <% if action.consequence.present? %>
-        <p class="govuk-body govuk-!-font-size-16">
+        <p class="govuk-body">
           <%= action.consequence %>
         </p>
       <% end %>
       <% if action.exception.present? %>
-        <p class="govuk-body govuk-!-font-size-16">
+        <p class="govuk-body">
           <%= action.exception %>
         </p>
       <% end %>
 
       <% if action.guidance_url.present? %>
-        <p class="govuk-body govuk-!-font-size-16">
-          <% prompt = action.guidance_prompt || t("brexit_checker.action_list.guidance_prompt") %>
-          <%= prompt %>:
+        <div class="govuk-body govuk-!-font-size-16"> 
+          <p>
+            <%= action.guidance_prompt || t("brexit_checker.action_list.guidance_prompt") %>:
+          </p>
+          <p>
             <a
               href="<%= action.guidance_url %>"
               class="govuk-link"
               data-module="track-click"
-              data-track-action="<%= audience_heading %> <%= action_index %> - Guidance"
+              data-track-action="<%= "#{analytics_group}#{index + 1}"%> - Guidance"
               data-track-category="brexit-checker-results"
               data-track-label="<%= action.guidance_url %>"
               data-ecommerce-row
               data-ecommerce-path="<%= action.guidance_path %>"
             ><%= action.guidance_link_text %></a>
-        </p>
+          </p>
+        </div>
       <% end %>
     </div>
-
-    <div class="govuk-grid-column-one-quarter">
-      <% if action.lead_time.present? %>
-        <p class="govuk-body govuk-!-font-size-16 govuk-!-font-weight-bold brexit-checker-result__leadtime">
-          <%= action.lead_time %>
-        </p>
-      <% end %>
-    </div>
-    <div class="govuk-grid-column-full">
-      <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
-    </div>
   </div>
 <% end %>