Use cards component on homepage

- update en.yml to allow iteration

app/helpers/application_helper.rb

@@ -25,4 +25,19 @@ def dgu_page_entries_info(collection, entry_name: nil)
       t("helpers.page_entries_info.more_pages.display_entries", entry_name:, first: from, last: to, total: collection.total_count)
     end.html_safe
   end
+
+  def homepage_categories
+    items = []
+    t('pages.home.homepage_links').each do |link|
+      items << {
+        link: {
+          text: link[:text],
+          path: search_path(filters: { topic: link[:text] }),
+        },
+        description: link[:description],
+      }
+    end
+
+    items
+  end
 end

app/views/pages/_topics.html.erb

@@ -1,63 +1,4 @@
-<div class="govuk-grid-row">
-  <h2 class="govuk-visually-hidden"><%= t('.topics_heading') %></h2>
-  <div class="govuk-grid-column-full">
-    <ul class="govuk-list dgu-topics__list">
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.business_and_economy_label'), search_path(filters: { topic: 'Business and economy' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.business_and_economy_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.crime_and_justice_label'), search_path(filters: { topic: 'Crime and justice' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.crime_and_justice_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.defence_label'), search_path(filters: { topic: 'Defence' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.defence_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.education_label'), search_path(filters: { topic: 'Education' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.education_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.environment_label'), search_path(filters: { topic: 'Environment' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.environment_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.government_label'), search_path(filters: { topic: 'Government' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.government_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.government_spending_label'), search_path(filters: { topic: 'Government spending' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.government_spending_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.health_label'), search_path(filters: { topic: 'Health' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.health_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.mapping_label'), search_path(filters: { topic: 'Mapping' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.mapping_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.society_label'), search_path(filters: { topic: 'Society' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.society_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.towns_and_cities_label'), search_path(filters: { topic: 'Towns and cities' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.towns_and_cities_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.transport_label'), search_path(filters: { topic: 'Transport' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.transport_description') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.digital_service_performance_label'), search_path(filters: { topic: 'Digital service performance' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.digital_service_performance') %></p>
-      </li>
-      <li>
-        <h3 class="govuk-heading-s dgu-topics__heading"><%= link_to t('.government_reference_data_label'), search_path(filters: { topic: 'Government reference data' }), class: 'govuk-link' %></h3>
-        <p class="govuk-body"><%= t('.government_reference_data') %></p>
-      </li>
-    </ul>
-  </div>
-</div>
+<%= render "govuk_publishing_components/components/cards", {
+  heading: t('pages.home.topics_heading'),
+  items: homepage_categories
+} %>

config/locales/views/pages/en.yml

@@ -3,36 +3,36 @@ en:
     search:
       accessibility:
         search_button_label: "Search data.gov.uk"
-    topics:
-      topics_heading: "Data topics"
-      business_and_economy_label: "Business and economy"
-      business_and_economy_description: "Small businesses, industry, imports, exports and trade"
-      crime_and_justice_label: "Crime and justice"
-      crime_and_justice_description: "Courts, police, prison, offenders, borders and immigration"
-      defence_label: "Defence"
-      defence_description: "Armed forces, health and safety, search and rescue"
-      education_label: "Education"
-      education_description: "Students, training, qualifications and the National Curriculum"
-      environment_label: "Environment"
-      environment_description: "Weather, flooding, rivers, air quality, geology and agriculture"
-      government_label: "Government"
-      government_description: "Staff numbers and pay, local councillors and department business plans"
-      government_spending_label: "Government spending"
-      government_spending_description: "Includes all payments by government departments over £25,000"
-      health_label: "Health"
-      health_description: "Includes smoking, drugs, alcohol, medicine performance and hospitals"
-      mapping_label: "Mapping"
-      mapping_description: "Addresses, boundaries, land ownership, aerial photographs, seabed and land terrain"
-      government_reference_data_label: "Government reference data"
-      government_reference_data: "Trusted data that is referenced and shared across government departments"
-      digital_service_performance_label: "Digital service performance"
-      digital_service_performance: "Cost, usage, completion rate, digital take-up, satisfaction"
-      society_label: "Society"
-      society_description: "Employment, benefits, household finances, poverty and population"
-      towns_and_cities_label: "Towns and cities"
-      towns_and_cities_description: "Includes housing, urban planning, leisure, waste and energy, consumption"
-      transport_label: "Transport"
-      transport_description: "Airports, roads, freight, electric vehicles, parking, buses and footpaths"
     home:
       find_open_data: "Find open data"
       lede: "Find data published by central government, local authorities and public bodies to help you build products and services"
+      topics_heading: "Data topics"
+      homepage_links:
+        - text: "Business and economy"
+          description: "Small businesses, industry, imports, exports and trade"
+        - text: "Crime and justice"
+          description: "Courts, police, prison, offenders, borders and immigration"
+        - text: "Defence"
+          description: "Armed forces, health and safety, search and rescue"
+        - text: "Education"
+          description: "Students, training, qualifications and the National Curriculum"
+        - text: "Environment"
+          description: "Weather, flooding, rivers, air quality, geology and agriculture"
+        - text: "Government"
+          description: "Staff numbers and pay, local councillors and department business plans"
+        - text: "Government spending"
+          description: "Includes all payments by government departments over £25,000"
+        - text: "Health"
+          description: "Includes smoking, drugs, alcohol, medicine performance and hospitals"
+        - text: "Mapping"
+          description: "Addresses, boundaries, land ownership, aerial photographs, seabed and land terrain"
+        - text: "Government reference data"
+          description: "Trusted data that is referenced and shared across government departments"
+        - text: "Digital service performance"
+          description: "Cost, usage, completion rate, digital take-up, satisfaction"
+        - text: "Society"
+          description: "Employment, benefits, household finances, poverty and population"
+        - text: "Towns and cities"
+          description: "Includes housing, urban planning, leisure, waste and energy, consumption"
+        - text: "Transport"
+          description: "Airports, roads, freight, electric vehicles, parking, buses and footpaths"