WIP

alphagov · Aug 15, 2024 · 45d6390 · 45d6390
1 parent 27ee92f
commit 45d6390
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 110 deletions.
diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
@@ -53,87 +53,15 @@
   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 {
+.gem-c-cards__list-item-wrapper {
+  .gem-c-cards__sub-heading,
+  .gem-c-cards__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;
-    }
+    max-width: 100%;
   }
 }
 
@@ -264,4 +192,4 @@
   @media (min-width: 1281px) { // stylelint-disable-line media-feature-range-notation
     padding-top: govuk-spacing(8);
   }
-}
+}
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)
+    <%= 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
         } %>
-      <% end %>
-    </ul>
   </section>
 </div>
diff --git a/app/views/homepage/_services_and_information.html.erb b/app/views/homepage/_services_and_information.html.erb
@@ -3,27 +3,34 @@
     <div class="govuk-grid-column-full">
       <div class="homepage-section__heading">
         <%= render "govuk_publishing_components/components/heading", {
-          font_size: "l",
-          heading_level: 2,
-          margin_bottom: 6,
-          text: t("homepage.index.services_and_information"),
-        } %>
+                     font_size: "l",
+                     heading_level: 2,
+                     margin_bottom: 6,
+                     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>