Change "get-involved" Page

- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328

app/assets/stylesheets/application.scss

@@ -6,12 +6,13 @@ $govuk-new-link-styles: true;
 
 // Components from govuk_publishing_components gem
 @import 'govuk_publishing_components/govuk_frontend_support';
+@import 'govuk_publishing_components/component_support';
+
 @import 'govuk_publishing_components/components/attachment';
 @import 'govuk_publishing_components/components/back-link';
 @import 'govuk_publishing_components/components/big-number';
 @import 'govuk_publishing_components/components/breadcrumbs';
 @import 'govuk_publishing_components/components/button';
-@import 'govuk_publishing_components/component_support';
 @import 'govuk_publishing_components/components/contents-list';
 @import 'govuk_publishing_components/components/contextual-sidebar';
 @import 'govuk_publishing_components/components/details';
@@ -25,6 +26,7 @@ $govuk-new-link-styles: true;
 @import 'govuk_publishing_components/components/govspeak-html-publication';
 @import 'govuk_publishing_components/components/heading';
 @import 'govuk_publishing_components/components/hint';
+@import 'govuk_publishing_components/components/inset-text';
 @import 'govuk_publishing_components/components/image-card';
 @import 'govuk_publishing_components/components/input';
 @import 'govuk_publishing_components/components/intervention';
@@ -93,7 +95,7 @@ $govuk-new-link-styles: true;
 @import 'views/answer';
 @import 'views/help-page';
 @import 'views/guide';
-@import 'views/get-involved';
+// @import 'views/get-involved';
 
 .travel-advice-notice {
   background-color: govuk-colour("light-grey");

app/controllers/get_involved_controller.rb

@@ -5,6 +5,8 @@ def show
     load_content_item
     load_get_involved_data
     @do_not_show_breadcrumbs = true
+    @recently_opened = filtered_links(@recently_opened_consultations, t("get_involved.closes"))
+    @recent_outcomes = filtered_links(@recent_consultation_outcomes, t("get_involved.closed_with_date"))
     render template: "content_items/get_involved"
   end
 
@@ -88,4 +90,46 @@ def retrieve_consultation_outcomes
 
     Services.search_api.search(query)["results"]
   end
+
+  def time_until_closure(consultation)
+    days_left = (consultation["end_date"].to_date - Time.zone.now.to_date).to_i
+    case days_left
+    when :negative?.to_proc
+      t("get_involved.closed")
+    when :zero?.to_proc
+      t("get_involved.closing_today")
+    when 1
+      t("get_involved.closing_tomorrow")
+    else
+      t("get_involved.days_left", number_of_days: days_left)
+    end
+  end
+
+  def date_microformat(attribute_name)
+    attribute_name.to_date.strftime("%d %B %Y")
+  end
+
+  def filtered_links(array, close_status)
+    array.map do |item|
+      org_acronym = item["organisations"].map { |org|
+        org["acronym"]
+      }.join(", ")
+
+      org_time = item["organisations"].map { |org|
+        org["public_timestamp"]
+      }.join(", ")
+
+      {
+        link: {
+          text: item["title"],
+          path: item["link"],
+          description: "#{close_status} #{date_microformat(item['end_date'])}",
+        },
+        metadata: {
+          public_updated_at: Time.zone.parse(org_time),
+          document_type: org_acronym,
+        },
+      }
+    end
+  end
 end

app/helpers/get_involved_helper.rb

@@ -1,8 +1,4 @@
 module GetInvolvedHelper
-  def date_microformat(attribute_name)
-    attribute_name.to_date.strftime("%d %B %Y")
-  end
-
   # Gets the link to the search page for all consultations
   def get_consultations_link(filters = %w[open_consultations closed_consultations])
     "/search/policy-papers-and-consultations?#{filters.to_query('content_store_document_type')}"
@@ -16,8 +12,6 @@ def page_class(css_class)
     content_for(:page_class, css_class)
   end
 
-private
-
   def time_until_closure(consultation)
     days_left = (consultation["end_date"].to_date - Time.zone.now.to_date).to_i
     case days_left