Introduce GOVUK components

Gemfile

@@ -66,6 +66,8 @@ gem "daemons"
 # Gov form builder to structure claims
 gem "govuk_design_system_formbuilder", "~> 5.3.2"
 
+gem "govuk-components"
+
 # See https://github.com/typhoeus/ethon/issues/185
 gem "ethon", "~> 0.16.0"
 gem "typhoeus", "~> 1.4.1"

Gemfile.lock

@@ -210,6 +210,10 @@ GEM
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
+    govuk-components (5.4.0)
+      html-attributes-utils (~> 1.0.0, >= 1.0.0)
+      pagy (>= 6, < 9)
+      view_component (>= 3.9, < 3.13)
     govuk_design_system_formbuilder (5.3.3)
       actionview (>= 6.1)
       activemodel (>= 6.1)
@@ -517,6 +521,10 @@ GEM
     validate_url (1.0.15)
       activemodel (>= 3.0.0)
       public_suffix
+    view_component (3.12.1)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -559,6 +567,7 @@ DEPENDENCIES
   faker (~> 3.4)
   faraday_middleware
   foreman
+  govuk-components
   govuk_design_system_formbuilder (~> 5.3.2)
   httpclient
   jbuilder (~> 2.12)

app/views/additional_payments/landing_page.html.erb

@@ -67,29 +67,25 @@
       Payments are given up to 16 weeks from applying. You will receive an approval email with further information on your application.
     </p>
 
-    <details class="govuk-details" data-module="govuk-details">
-      <summary class="govuk-details__summary">
-        <span class="govuk-details__summary-text">The different additional payments</span>
-      </summary>
-      <div class="govuk-details__text">
-        <p class="govuk-body">
-          There are 2 types of additional payment. You may be eligible for both payments, but you will only be able to apply for one each year.
-        </p>
-
-        <ul class='govuk-list govuk-list--bullet'>
-          <li>
-            <a href="<%= Policies::EarlyCareerPayments.eligibility_page_url %>" class="govuk-link govuk-link--no-visited-state" target="_blank">Early-career payment (opens in new tab)</a> - payment of up to £7,500 for eligible teachers including language teachers.
-          </li>
-          <li>
-            <a href="<%= Policies::LevellingUpPremiumPayments.eligibility_page_url %>" class="govuk-link govuk-link--no-visited-state" target="_blank">Levelling up premium payment (opens in new tab)</a> - payment of up to £3,000 for eligible teachers in certain schools, including computing teachers.
-          </li>
-        </ul>
-
-        <p class="govuk-body">
-          Both schemes offer the largest payments to those teaching in more disadvantaged areas and schools.
-        </p>
-      </div>
-    </details>
+    <%= govuk_details(summary_text: "The different additional payments") do %>
+      <p class="govuk-body">
+        There are 2 types of additional payment. You may be eligible for both payments, but you will only be able to apply for one each year.
+      </p>
+
+      <ul class='govuk-list govuk-list--bullet'>
+        <li>
+          <%= govuk_link_to "Early-career payment (opens in new tab)", Policies::EarlyCareerPayments.eligibility_page_url, no_visited_state: true, target: "_blank" %> - payment of up to £7,500 for eligible teachers including language teachers.
+        </li>
+
+        <li>
+          <%= govuk_link_to "Levelling up premium payment (opens in new tab)", Policies::LevellingUpPremiumPayments.eligibility_page_url, no_visited_state: true, target: "_blank" %> - payment of up to £3,000 for eligible teachers in certain schools, including computing teachers.
+        </li>
+      </ul>
+
+      <p class="govuk-body">
+        Both schemes offer the largest payments to those teaching in more disadvantaged areas and schools.
+      </p>
+    <% end %>
 
     <h3 class="govuk-heading-s govuk-!-margin-top-6">Claim back your student loan repayments</h3>
 

config/application.rb

@@ -24,6 +24,8 @@
 require_relative "../lib/dqt"
 require_relative "../lib/notify_sms_message"
 
+require "govuk/components"
+
 # Require the gems listed in Gemfile, including any gems
 # you've limited to :test, :development, or :production.
 Bundler.require(*Rails.groups)