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

@@ -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;

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>

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" %>
+  <%= govuk_link_to data_box[:text], data_box[:path], 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" %>
 </div>

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 %>

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>