Merge pull request #4202 from alphagov/Apply-card-component-to-homepage

Apply card component to homepage
alphagov · Aug 29, 2024 · b84de09 · b84de09
2 parents 3fbe048 + eef30ec
commit b84de09
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 154 deletions.
diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
@@ -53,87 +53,10 @@
   font-weight: bold;
 }
 
-.homepage-services-and-info__list {
-  list-style: none;
-  margin: 0 govuk-spacing(-3);
-  padding: 0;
-}
-
-.chevron-card {
-  border-top: 1px solid $govuk-border-colour;
-  margin: 0 govuk-spacing(3);
-  padding: govuk-spacing(1) 0 govuk-spacing(4);
-
-  &:first-child {
-    border-top: none;
-    padding-top: 0;
-
-    .chevron-card__wrapper {
-      padding-top: 0;
-
-      @include govuk-media-query($media-type: print) {
-        padding-top: 19px;
-      }
-    }
-  }
-}
-
-.chevron-card__wrapper {
-  padding: 19px 0 4px;
-  position: relative;
-
-  .govuk-heading-s,
-  .chevron-card__description {
-    // Ensure font-size is 19px on mobile for the new homepage design
-    @include govuk-media-query($until: "tablet") {
-      font-size: 19px;
-      font-size: govuk-px-to-rem(19);
-    }
-  }
-}
-
-.chevron-card__description {
-  margin: 0 govuk-spacing(6) 0 0;
-}
-
-.chevron-card__link {
-  &::after {
-    bottom: 0;
-    content: "";
-    display: block;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  &::before {
-    $dimension: 7px;
-    $width: 3px;
-
-    border-right: $width solid $govuk-brand-colour;
-    border-top: $width solid $govuk-brand-colour;
-    content: "";
-    display: block;
-    height: $dimension;
-    position: absolute;
-    right: govuk-spacing(1);
-    top: 50%;
-    margin-top: 5px;
-    @include prefixed-transform($rotate: 45deg);
-    width: $dimension;
-  }
-
-  &:hover {
-    &::before {
-      border-color: $govuk-link-hover-colour;
-    }
-  }
-
-  &:focus {
-    &::before {
-      border-color: $govuk-focus-text-colour;
-    }
+.gem-c-cards__list-item-wrapper {
+  .gem-c-cards__sub-heading,
+  .gem-c-cards__description {
+    max-width: 100%;
   }
 }
 
@@ -264,4 +187,4 @@
   @media (min-width: 1281px) { // stylelint-disable-line media-feature-range-notation
     padding-top: govuk-spacing(8);
   }
-}
+}
diff --git a/app/views/homepage/_chevron_card.html.erb b/app/views/homepage/_chevron_card.html.erb
diff --git a/app/views/homepage/_government_activity.html.erb b/app/views/homepage/_government_activity.html.erb
@@ -12,19 +12,27 @@
       <p class="govuk-body"><%= t("homepage.index.government_activity_description") %></p>
     </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],
-          index_section: locals[:index_section],
-          index_link: index + 1,
-          index_section_count: locals[:index_section_count],
-          index_total: t("homepage.government_activity").length,
-          section: t("homepage.index.government_activity", locale: :en)
-        } %>
-      <% end %>
-    </ul>
+    <%= render "govuk_publishing_components/components/cards", {
+      items: t("homepage.government_activity").map.with_index do |item, index|
+        {
+          link: {
+            text: raw(item[:title]),
+            path: item[:link],
+            data_attributes: {
+              ga4_link: {
+                event_name: "navigation",
+                type: "homepage",
+                index_link: index + 1,
+                index_section: locals[:index_section],
+                index_section_count: locals[:index_section_count],
+                index_total: t("homepage.government_activity").length,
+                section: t("homepage.index.government_activity", locale: :en),
+              },
+            },
+          },
+          description: raw(item[:description]),
+        }
+      end,
+    } %>
   </section>
 </div>
diff --git a/app/views/homepage/_services_and_information.html.erb b/app/views/homepage/_services_and_information.html.erb
@@ -1,4 +1,4 @@
-<section class="homepage-section homepage-section--services-and-info">
+<section class="homepage-section homepage-section--services-and-info" data-module="ga4-link-tracker">
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       <div class="homepage-section__heading">
@@ -9,21 +9,29 @@
           text: t("homepage.index.services_and_information"),
         } %>
       </div>
-
-      <ul class="homepage-services-and-info__list" data-module="ga4-link-tracker">
-        <% t("homepage.categories").each_with_index do | item, index | %>
-          <%= render partial: "homepage/chevron_card", locals: {
-            description: item[:description],
-            link: item[:link],
-            title: item[:title],
-            index_section: locals[:index_section],
-            index_link: index + 1,
-            index_section_count: locals[:index_section_count],
-            index_total: t("homepage.categories").length,
-            section: t("homepage.index.services_and_information", locale: :en)
-          } %>
-        <% end %>
-      </ul>
+
+      <%= render "govuk_publishing_components/components/cards", {
+        items: t("homepage.categories").map.with_index do |item, index|
+          {
+            link: {
+              text: raw(item[:title]),
+              path: item[:link],
+              data_attributes: {
+                ga4_link: {
+                  event_name: "navigation",
+                  type: "homepage",
+                  index_link: index + 1,
+                  index_section: locals[:index_section],
+                  index_section_count: locals[:index_section_count],
+                  index_total: t("homepage.categories").length,
+                  section: t("homepage.index.services_and_information", locale: :en),
+                },
+              },
+            },
+            description: raw(item[:description]),
+          }
+        end,
+      } %>
     </div>
   </div>
 </section>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -480,8 +480,6 @@ en:
       service_not_listed_text: If you’re looking for a different service, you can search for it.
   homepage:
     categories:
-      # If adding or removing items remember to update the `columns()` mixin in
-      # the homepage-services-and-info__list class in _homepage.scss.
       - title: Benefits
         description: Includes eligibility, appeals, tax credits and Universal Credit
         link: /browse/benefits
@@ -530,8 +528,6 @@ en:
       - title: Working, jobs and&nbsp;pensions
         description: Includes holidays, finding a job and redundancy
         link: /browse/working
-    # If adding or removing items remember to update the `columns()` mixin in
-    # the homepage-section__government-activity homepage-services-and-info__list class in _homepage.scss.
     government_activity:
       - title: Departments
         description: Departments, agencies and public bodies
@@ -585,8 +581,6 @@ en:
           url: /sign-in-childcare-account
         - title: 'Check your State Pension forecast'
           url: /check-state-pension
-      # If adding or removing items remember to update the `columns()` mixin in
-      # the homepage-most-active-list class in _homepage.scss.
       more_links:
         - title: 'HMRC services: sign in'
           link: /log-in-register-hmrc-online-services
@@ -631,8 +625,6 @@ en:
       tax_account: Sign in to your personal tax account
       uk_bank_holidays: UK bank holidays
       universal_credit: Sign in to your Universal Credit account
-    # If adding or removing items remember to update the `columns()` mixin in
-    # the homepage-most-active-list class in _homepage.scss.
     most_active:
       - title: Find a job
         link: /find-a-job