From 21d89da8cdeca4895ec1c330ec15b7c7bde52059 Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Fri, 1 Sep 2023 11:21:03 +0100
Subject: [PATCH] Change layout of homepage

Services and information and Featured sections are now in a grid layout.
Font size of the header of the promotion slot cards has been changed to
's', the same size as those in the Services and information section.

This is part of a live test of several incremental changes being made
to the homepage.
---
 app/assets/stylesheets/views/_homepage.scss   |  45 ++---
 .../homepage/_government_activity.html.erb    | 191 +++++++++---------
 app/views/homepage/_links_and_search.html.erb |  81 ++++----
 app/views/homepage/_promotion-slots.html.erb  |  11 +-
 app/views/homepage/index.html.erb             |  10 +-
 config/locales/en.yml                         |   4 +-
 6 files changed, 174 insertions(+), 168 deletions(-)

diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
index a0a00ee3dc..ea679a8ea7 100644
--- a/app/assets/stylesheets/views/_homepage.scss
+++ b/app/assets/stylesheets/views/_homepage.scss
@@ -145,28 +145,9 @@
 }
 
 .homepage-services-and-info__list {
-  @include columns($items: 16, $columns: 1, $selector: "li");
   list-style: none;
   margin: 0 govuk-spacing(-3);
   padding: 0;
-
-  @include govuk-media-query($from: "tablet") {
-    @include columns($items: 16, $columns: 2, $selector: "li");
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    @include columns($items: 16, $columns: 3, $selector: "li");
-  }
-
-  .homepage-section__government-activity & {
-    @include columns($items: 6, $columns: 1, $selector: "li");
-    margin-bottom: govuk-spacing(4);
-
-    @include govuk-media-query($from: "tablet") {
-      @include columns($items: 6, $columns: 2, $selector: "li");
-      margin-bottom: 0;
-    }
-  }
 }
 
 .chevron-card {
@@ -181,7 +162,7 @@
 }
 
 .chevron-card__description {
-  margin: 0 govuk-spacing(-6) 0 0;
+  margin: 0 govuk-spacing(6) 0 0;
 }
 
 .chevron-card__link {
@@ -206,7 +187,7 @@
     height: $dimension;
     position: absolute;
     right: govuk-spacing(1);
-    top: govuk-spacing(3);
+    top: 50%;
     @include prefixed-transform($rotate: 45deg);
     width: $dimension;
   }
@@ -228,6 +209,10 @@
   padding: govuk-spacing(4) 0 govuk-spacing(6);
 }
 
+.homepage-section--promotion-slots {
+  padding-top: govuk-spacing(6);
+}
+
 .homepage-section--links-and-search {
   background: govuk-colour("light-grey");
   padding: govuk-spacing(6) 0 govuk-spacing(8);
@@ -235,6 +220,10 @@
 
 .homepage-section--services-and-info {
   padding: govuk-spacing(6) 0 0;
+
+  @include govuk-media-query($from: "desktop") {
+    padding-right: 32px;
+  }
 }
 
 .homepage-section__heading {
@@ -245,6 +234,10 @@
   padding: govuk-spacing(3) 0 0;
 }
 
+.homepage-section__container {
+  padding-right: 32px;
+}
+
 .homepage-section__heading-wrapper {
   margin-bottom: govuk-spacing(1);
 
@@ -277,19 +270,21 @@
     padding-bottom: 0;
   }
 
-  & > li {
+  & > div li {
     margin-bottom: govuk-spacing(4);
 
     @include govuk-media-query($from: "desktop") {
-      margin-bottom: govuk-spacing(3);
+      margin-bottom: govuk-spacing(6);
+      padding-right: govuk-spacing(4);
     }
   }
 
-  & > li:last-child {
+  & > div:last-child li:last-child {
     margin-bottom: 0;
   }
 }
 
-.homepage-most-viewed-list__item {
+.homepage-most-viewed-list__item-link {
+  padding-right: govuk-spacing(8);
   @include govuk-font($size: 19, $weight: "bold");
 }
diff --git a/app/views/homepage/_government_activity.html.erb b/app/views/homepage/_government_activity.html.erb
index 126209b225..0c6fd7da64 100644
--- a/app/views/homepage/_government_activity.html.erb
+++ b/app/views/homepage/_government_activity.html.erb
@@ -1,110 +1,111 @@
 <section class="homepage-section homepage-section__government-activity">
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
-      <div class="homepage-section__heading">
-        <div class="homepage-section__heading-wrapper">
+      <div class="homepage-section__container">
+        <div class="homepage-section__heading">
+          <div class="homepage-section__heading-wrapper">
+            <%= render "govuk_publishing_components/components/heading", {
+              font_size: "m",
+              text: t("homepage.index.government_activity"),
+              data_attributes: {
+                ga4_scroll_marker: true,
+              },
+            } %>
+          </div>
+
+          <%= render "govuk_publishing_components/components/lead_paragraph", {
+            text: t("homepage.index.government_activity_description"),
+            margin_bottom: 0
+          } %>
+        </div>
+
+        <ul class="homepage-services-and-info__list">
+          <% t("homepage.government_activity").each_with_index do | item, index | %>
+            <%= render partial: "homepage/chevron_card", locals: {
+              description: item[:description],
+              link: item[:link],
+              title: item[:title],
+              track_action: "governmentactivityLink",
+              index_values: {
+                index_section: 3,
+                index_link: index + 1,
+                index_section_count: 6,
+              },
+              index_total: t("homepage.government_activity").length,
+              section: t("homepage.index.government_activity", locale: :en)
+            } %>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+      <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+        <div class="homepage-section__heading">
           <%= render "govuk_publishing_components/components/heading", {
             font_size: "m",
-            text: t("homepage.index.government_activity"),
+            text: t("homepage.index.departments_and_organisations"),
             data_attributes: {
               ga4_scroll_marker: true,
             },
           } %>
         </div>
 
-        <%= render "govuk_publishing_components/components/lead_paragraph", {
-          text: t("homepage.index.government_activity_description"),
-          margin_bottom: 0
-        } %>
-      </div>
-
-      <ul class="homepage-services-and-info__list">
-        <% t("homepage.government_activity").each_with_index do | item, index | %>
-          <%= render partial: "homepage/chevron_card", locals: {
-            description: item[:description],
-            link: item[:link],
-            title: item[:title],
-            track_action: "governmentactivityLink",
-            index_values: {
-              index_section: 3,
-              index_link: index + 1,
-              index_section_count: 6,
+        <%#
+          The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
+        %>     
+        <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
+          <%= render "govuk_publishing_components/components/big_number", {
+            number: t("homepage.index.ministerial_departments_count"),
+            label: t("homepage.index.ministerial_departments"),
+            href: "/government/organisations#ministerial_departments",
+            margin_bottom: 6,
+            data_attributes: {
+              "track-category": "homepageClicked",
+              "track-action": "departmentsLink",
+              "track-label": "/government/organisations#ministerial_departments",
+              "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
+              "track-dimension-index": 29,
+              "track-value": 1,
+              "ga4_link": {
+                "event_name": "navigation",
+                "type": "homepage",
+                "index": {
+                  "index_section": 4,
+                  "index_link": 1,
+                  "index_section_count": 6,
+                },
+                "index_total": 2,
+                "section": t("homepage.index.departments_and_organisations", locale: :en),
+                "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
+              }
             },
-            index_total: t("homepage.government_activity").length,
-            section: t("homepage.index.government_activity", locale: :en)
           } %>
-        <% end %>
-      </ul>
-    </div>
-
-    <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
-      <div class="homepage-section__heading">
-        <%= render "govuk_publishing_components/components/heading", {
-          font_size: "m",
-          text: t("homepage.index.departments_and_organisations"),
-          data_attributes: {
-            ga4_scroll_marker: true,
-          },
-        } %>
-      </div>
-
-      <%#
-        The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
-      %>     
-      <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
-        <%= render "govuk_publishing_components/components/big_number", {
-          number: t("homepage.index.ministerial_departments_count"),
-          label: t("homepage.index.ministerial_departments"),
-          href: "/government/organisations#ministerial_departments",
-          margin_bottom: 6,
-          data_attributes: {
-            "track-category": "homepageClicked",
-            "track-action": "departmentsLink",
-            "track-label": "/government/organisations#ministerial_departments",
-            "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
-            "track-dimension-index": 29,
-            "track-value": 1,
-            "ga4_link": {
-              "event_name": "navigation",
-              "type": "homepage",
-              "index": {
-                "index_section": 4,
-                "index_link": 1,
-                "index_section_count": 6,
-              },
-              "index_total": 2,
-              "section": t("homepage.index.departments_and_organisations", locale: :en),
-              "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
-            }
-          },
-        } %>
-        <%= render "govuk_publishing_components/components/big_number", {
-          number: t("homepage.index.other_agencies_count"),
-          label: t("homepage.index.other_agencies"),
-          href: "/government/organisations#agencies_and_other_public_bodies",
-          margin_bottom: 6,
-          data_attributes: {
-            "track-category": "homepageClicked",
-            "track-action": "departmentsLink",
-            "track-label": "/government/organisations#agencies_and_other_public_bodies",
-            "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
-            "track-dimension-index": 29,
-            "track-value": 1,
-            "ga4_link": {
-              "event_name": "navigation",
-              "type": "homepage",
-              "index": {
-                "index_section": 4,
-                "index_link": 2,
-                "index_section_count": 6,
-              },
-              "index_total": 2,
-              "section": t("homepage.index.departments_and_organisations", locale: :en),
-              "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
-            }
-          },
-        } %>
-      </div>
-    </div>
+          <%= render "govuk_publishing_components/components/big_number", {
+            number: t("homepage.index.other_agencies_count"),
+            label: t("homepage.index.other_agencies"),
+            href: "/government/organisations#agencies_and_other_public_bodies",
+            margin_bottom: 6,
+            data_attributes: {
+              "track-category": "homepageClicked",
+              "track-action": "departmentsLink",
+              "track-label": "/government/organisations#agencies_and_other_public_bodies",
+              "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
+              "track-dimension-index": 29,
+              "track-value": 1,
+              "ga4_link": {
+                "event_name": "navigation",
+                "type": "homepage",
+                "index": {
+                  "index_section": 4,
+                  "index_link": 2,
+                  "index_section_count": 6,
+                },
+                "index_total": 2,
+                "section": t("homepage.index.departments_and_organisations", locale: :en),
+                "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
+              }
+            },
+          } %>
+        </div>        
+      </div>    
   </div>
 </section>
diff --git a/app/views/homepage/_links_and_search.html.erb b/app/views/homepage/_links_and_search.html.erb
index 862e7c1d90..3b04ac7f74 100644
--- a/app/views/homepage/_links_and_search.html.erb
+++ b/app/views/homepage/_links_and_search.html.erb
@@ -31,45 +31,52 @@
         </form>
       </div>
     </div>
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half homepage-popular">
-        <%= render "govuk_publishing_components/components/heading", {
-          font_size: "m",
-          margin_bottom: 4,
-          text: t("homepage.index.popular_links_heading"),
-          data_attributes: {
-            ga4_scroll_marker: true,
-          },
-        } %>
-        <ul class="homepage-most-viewed-list" data-module="gem-track-click ga4-link-tracker">
-          <% t("homepage.index.popular_links").each_with_index do | item, index | %>
-            <li>
-              <%= link_to(item[:text], item[:href], {
-                class: "govuk-link homepage-most-viewed-list__item",
-                data: {
-                  track_category: "homepageClicked",
-                  track_action: "popularLink",
-                  track_label: item[:href],
-                  track_value: 1,
-                  track_dimension_index: 29,
-                  track_dimension: item[:text],
-                  ga4_link: {
-                    'event_name': 'navigation',
-                    'type': 'homepage',
-                    'index': {
-                      'index_section': 1,
-                      'index_link': index + 1,
-                      'index_section_count': 6,
-                    },
-                    'index_total': t("homepage.index.popular_links").length,
-                    'section': "#{t("homepage.index.popular_links_heading", locale: :en)}"
-                  }
+    <div class="homepage-popular">
+      <%= render "govuk_publishing_components/components/heading", {
+        font_size: "m",
+        margin_bottom: 4,
+        text: t("homepage.index.popular_links_heading"),
+        data_attributes: {
+          ga4_scroll_marker: true,
+        },
+      } %>
+      <ul class="homepage-most-viewed-list " data-module="gem-track-click ga4-link-tracker">
+        <% t("homepage.index.popular_links").each_with_index do | item, index | %>
+
+          <% if index % 3 == 0 %>
+            <div class="govuk-grid-row">
+          <% end %>
+
+          <li class="govuk-link govuk-grid-column-one-third homepage-most-viewed-list__item">
+            <%= link_to(item[:text], item[:href], {
+              class: "govuk-link homepage-most-viewed-list__item-link",
+              data: {
+                track_category: "homepageClicked",
+                track_action: "popularLink",
+                track_label: item[:href],
+                track_value: 1,
+                track_dimension_index: 29,
+                track_dimension: item[:text],
+                ga4_link: {
+                  'event_name': 'navigation',
+                  'type': 'homepage',
+                  'index': {
+                    'index_section': 1,
+                    'index_link': index + 1,
+                    'index_section_count': 6,
+                  },
+                  'index_total': t("homepage.index.popular_links").length,
+                  'section': "#{t("homepage.index.popular_links_heading", locale: :en)}"
                 }
-              }) %>
-            </li>
+              }
+            }) %>
+          </li>
+
+          <% if index % 3 == 2 %>
+            </div>
           <% end %>
-        </ul>
-      </div>
+        <% end %>
+      </ul>
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/app/views/homepage/_promotion-slots.html.erb b/app/views/homepage/_promotion-slots.html.erb
index bb6bd20b27..6b61c50e8d 100644
--- a/app/views/homepage/_promotion-slots.html.erb
+++ b/app/views/homepage/_promotion-slots.html.erb
@@ -3,20 +3,17 @@
   See: https://docs.publishing.service.gov.uk/repos/frontend/update-homepage-promotion-slots.html
 %>
 
-<section class="homepage-section">
-  <div class="homepage-section__heading">
+<section class="homepage-section homepage-section--promotion-slots">
     <%= render "govuk_publishing_components/components/heading", {
       text: t("homepage.index.featured"),
       font_size: "m",
+      margin_bottom: 6,
       data_attributes: {
         ga4_scroll_marker: true,
       },
     } %>
-  </div>
 
-  <div class="govuk-grid-row">
     <% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
-      <div class="govuk-grid-column-one-third">
         <%= render "govuk_publishing_components/components/image_card", {
           href: item[:href],
           href_data_attributes: {
@@ -44,11 +41,9 @@
           heading_level: 3,
           heading_text: item[:title],
           description: item[:text],
-          font_size: "m",
+          font_size: "s",
           sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px",
           srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence
         } %>
-      </div>
     <% end %>
-  </div>
 </section>
diff --git a/app/views/homepage/index.html.erb b/app/views/homepage/index.html.erb
index 7ac80a4e15..0fe5a31bd7 100644
--- a/app/views/homepage/index.html.erb
+++ b/app/views/homepage/index.html.erb
@@ -17,8 +17,14 @@
   <%= render "homepage/links_and_search" %>
 
   <div class="govuk-width-container">
-    <%= render "homepage/services_and_information" %>
-    <%= render "homepage/promotion-slots" %>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop">
+        <%= render "homepage/services_and_information" %>
+      </div>
+      <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+        <%= render "homepage/promotion-slots" %>
+      </div>
+    </div>
     <%= render "homepage/government_activity" %>
     <%= render "homepage/more_on_govuk" %>
   </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 335e20d70f..7e635968f1 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -565,7 +565,7 @@ en:
       ministerial_departments_count: 24
       meta_description: GOV.UK - The place to find government services and information - simpler, clearer, faster.
       more: More on GOV.UK
-      popular_links_heading: Popular on GOV.UK
+      popular_links_heading: Popular
       popular_links:
         - text: Get support with the cost of living
           href: /cost-of-living
@@ -577,6 +577,8 @@ en:
           href: /sign-in-universal-credit
         - text: 'Check your National Insurance record'
           href: /check-national-insurance-record
+        - text: 'Check MOT history of a vehicle'
+          href: /check-mot-history
       # If adding or removing items remember to update the `columns()` mixin in
       # the homepage-most-active-list class in _homepage.scss.
       more_links: