From e21b799b561ae24b81969886b0ed363f8d585fd2 Mon Sep 17 00:00:00 2001
From: Arthur Campbell <arfa.camble@gmail.com>
Date: Mon, 13 May 2024 14:12:14 +0100
Subject: [PATCH] view partial changes to accommodate design changes, decouple
 box with counter and blue link boxes since various boxes show or not or in a
 different order depending on whether the org logs sales and whether we are in
 the crossover period I have also made grid and row partials to improve
 readability on the index page.

---
 app/frontend/styles/_data_box.scss           | 26 +++++++-------------
 app/views/home/_blue_box_link.html.erb       |  3 +++
 app/views/home/_data_box.html.erb            |  7 ++----
 app/views/home/_data_box_row_of_two.html.erb |  8 ++++++
 app/views/home/_data_box_two_by_two.html.erb |  8 ++++++
 5 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 app/views/home/_blue_box_link.html.erb
 create mode 100644 app/views/home/_data_box_row_of_two.html.erb
 create mode 100644 app/views/home/_data_box_two_by_two.html.erb

diff --git a/app/frontend/styles/_data_box.scss b/app/frontend/styles/_data_box.scss
index 0844ffa51..2706817c3 100644
--- a/app/frontend/styles/_data_box.scss
+++ b/app/frontend/styles/_data_box.scss
@@ -1,11 +1,15 @@
-.app-data-box-group {
+.app-data-box-section {
   @include govuk-font($size: 19);
   font-weight: bold;
   white-space: nowrap;
 }
 
+.app-data-box-group {
+  @include govuk-responsive-margin(4, "top")
+}
+
 @media (min-width: 54.0625em) {
-  .app-data-box-group-one-third {
+  .app-data-box-group-row {
     display: flex;
     justify-content: space-between;
     column-gap: govuk-spacing(4);
@@ -13,32 +17,20 @@
     min-width: 733.33px;
   }
 }
-@media (min-width: 54.0625em) {
-  .app-data-box-one-third {
-    width: 33.3333%;
-    float: left;
-  }
-}
+
 @media (min-width: 54.0625em) {
   .app-data-box__underline {
     min-width: 733.33px;
   }
 }
-@media (min-width: 54.0625em) {
-  .app-data-box-group-one-half {
-    display: flex;
-    justify-content: space-between;
-    column-gap: govuk-spacing(4);
-    width: 100%;
-    min-width: 733.33px;
-  }
-}
+
 @media (min-width: 54.0625em) {
   .app-data-box-one-half {
     width: 50%;
     float: left;
   }
 }
+
 @media (min-width: 54.0625em) {
   .app-data-box-one-half__underline {
     min-width: 733.33px;
diff --git a/app/views/home/_blue_box_link.html.erb b/app/views/home/_blue_box_link.html.erb
new file mode 100644
index 000000000..58af7b9bb
--- /dev/null
+++ b/app/views/home/_blue_box_link.html.erb
@@ -0,0 +1,3 @@
+<div class="app-data-box__lower">
+  <%= govuk_link_to text, path, class: "govuk-link--inverse" %>
+</div>
diff --git a/app/views/home/_data_box.html.erb b/app/views/home/_data_box.html.erb
index f1d04fb2f..2000e85a1 100644
--- a/app/views/home/_data_box.html.erb
+++ b/app/views/home/_data_box.html.erb
@@ -1,9 +1,6 @@
 <div class="app-data-box__upper">
   <div class="app-data-box__count">
-    <%= govuk_link_to data_count(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state govuk-link--no-underline" %>
+    <%= govuk_link_to data_box[:count], data_box[:path], class: "govuk-link--no-visited-state govuk-link--no-underline" %>
   </div>
-  <%= govuk_link_to data_subheading(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state" %>
-</div>
-<div class="app-data-box__lower">
-  <%= govuk_link_to view_all_text(type), view_all_path(type), class: "govuk-link--inverse" %>
+  <%= govuk_link_to data_box[:text], data_box[:path], class: "govuk-link--no-visited-state" %>
 </div>
diff --git a/app/views/home/_data_box_row_of_two.html.erb b/app/views/home/_data_box_row_of_two.html.erb
new file mode 100644
index 000000000..5c509971a
--- /dev/null
+++ b/app/views/home/_data_box_row_of_two.html.erb
@@ -0,0 +1,8 @@
+<div class="app-data-box-one-half">
+  <%= render partial: "home/data_box", object: left_data_box %>
+</div>
+<% if right_data_box %>
+  <div class="app-data-box-one-half">
+    <%= render partial: "home/data_box", object: right_data_box %>
+  </div>
+<% end %>
diff --git a/app/views/home/_data_box_two_by_two.html.erb b/app/views/home/_data_box_two_by_two.html.erb
new file mode 100644
index 000000000..dfac2bb5c
--- /dev/null
+++ b/app/views/home/_data_box_two_by_two.html.erb
@@ -0,0 +1,8 @@
+<div class="app-data-box-one-half">
+  <%= render partial: "home/data_box", object: top_left_data_box %>
+  <%= render partial: "home/data_box", object: bottom_left_data_box %>
+</div>
+<div class="app-data-box-one-half">
+  <%= render partial: "home/data_box", object: top_right_data_box %>
+  <%= render partial: "home/data_box", object: bottom_right_data_box %>
+</div>