[CAPT-1729] Form tweaks to reminders journey

app/helpers/govuk_form_helper.rb

@@ -83,24 +83,6 @@ def errors_tag(object, attribute)
     content_tag(:span, messages.join("<br>").html_safe, {class: "govuk-error-message", id: error_id(object.model_name.singular, attribute)})
   end
 
-  # Returns a string of the GOVUK css classes for the +<select>+ html element along with any
-  # existing css classes provided.
-  #
-  # When _object_ contains errors for _attribute_ the 'govuk-input--error' css class is added.
-  #
-  # === Example
-  #
-  # css_classes_for_select(object, :attribute, "another-css-class")
-  #
-  #   "govuk-select another-css-class"
-  #
-  def css_classes_for_select(object, attribute, css_classes = "")
-    css_classes = css_classes.split
-    css_classes << "govuk-select"
-    css_classes << "govuk-select--error" if object.errors.key?(attribute)
-    css_classes.join(" ")
-  end
-
   # Returns a string of the GOVUK css classes for the +<input>+ html element along with any
   # existing css classes provided.
   #

app/views/additional_payments/reminders/_one_time_password.html.erb

@@ -1,35 +1,35 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render("shared/error_summary", instance: @form) if @form.errors.any? %>
-
     <span class="govuk-caption-xl">Email verification</span>
 
-    <%= form_for @form, url: reminder_path(current_journey_routing_name) do |f| %>
-      <%= form_group_tag @form do %>
-        <h1 class="govuk-label-wrapper">
-          <label class="govuk-label govuk-label--l" for="form_one_time_password"><%= t("one_time_password.title") %></label>
-        </h1>
+    <%= form_for @form, url: reminder_path(current_journey_routing_name), builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
+      <%= f.govuk_error_summary %>
 
-        <div id="one-time-password-hint" class="govuk-hint">
-          <%= t("one_time_password.hint1_html", email_or_mobile_message: "an email", email_or_mobile_value: @form.email_address) %>
-          <br><br>
-          <%= t("one_time_password.validity_duration", duration_valid: one_time_password_validity_duration) %>
-        </div>
+      <%= f.govuk_text_field :one_time_password,
+        autocomplete: "off",
+        width: 5,
+        label: {
+          text: t("one_time_password.title"),
+          size: "l",
+          tag: "h1"
+        },
+        hint: -> do %>
+          <p>
+            <%= t("one_time_password.hint1_html", email_or_mobile_message: "an email", email_or_mobile_value: @form.email_address) %>
+          </p>
 
-        <%= errors_tag @form, :one_time_password %>
-        <%= f.text_field :one_time_password,
-                            autocomplete: "off",
-                            class: css_classes_for_input(@form, :one_time_password, 'govuk-input--width-5'),
-                            "aria-describedby" => "one-time-password-hint" %>
-      <% end %>
+          <p>
+            <%= t("one_time_password.validity_duration", duration_valid: one_time_password_validity_duration) %>
+          </p>
+        <% end %>
 
       <div class="govuk-body govuk-!-margin-bottom-6">
-        <%= link_to "Resend passcode (you will be sent back to the email address page)", new_reminder_path, class: "govuk-link govuk-link--no-visited-state" %>
+        <%= govuk_link_to "Resend passcode (you will be sent back to the email address page)", new_reminder_path, no_visited_state: true %>
       </div>
 
       <div class="govuk-button-group">
-        <%= f.submit "Confirm", class: "govuk-button" %>
-        <%= link_to "Change email address", new_reminder_path, class: "govuk-button govuk-button--secondary", role: "button", data: {module: "govuk-button"} %>
+        <%= f.govuk_submit "Confirm" %>
+        <%= govuk_button_link_to "Change email address", new_reminder_path, secondary: true %>
       </div>
     <% end %>
   </div>

app/views/additional_payments/reminders/personal_details.html.erb

@@ -2,52 +2,47 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render("shared/error_summary", instance: @form) if @form.errors.any? %>
+    <%= form_for @form, url: reminder_path(current_journey_routing_name), builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
+      <%= f.govuk_error_summary %>
 
-    <%= form_for @form, url: reminder_path(current_journey_routing_name) do |f| %>
       <h1 class="govuk-heading-xl">
         <%= t("questions.personal_details") %>
       </h1>
 
-      <%= form_group_tag @form, :full_name do %>
-        <h1 class="govuk-label-wrapper">
-          <%= f.label :full_name, t("additional_payments.reminders.full_name"), {class: "govuk-label govuk-label--l"}  %>
-        </h1>
-        <%= errors_tag @form, :full_name %>
-        <%= f.text_field :full_name, class: css_classes_for_input(@form, :full_name), type: "text", spellcheck: "false", autocomplete: "name" %>
-      <% end %>
+      <%= f.govuk_text_field :full_name,
+        label: {
+          text: t("additional_payments.reminders.full_name"),
+          size: "l"
+        },
+        spellcheck: "false", autocomplete: "name" %>
 
-      <%= form_group_tag @form, :email_address do %>
-        <h1 class="govuk-label-wrapper">
-          <%= f.label :email_address, t("questions.email_address"), {class: "govuk-label govuk-label--l"}  %>
-        </h1>
-        <div class="govuk-hint" id="email_address-hint">
+      <%= f.govuk_text_field :email_address,
+        label: {
+          text: t("questions.email_address"),
+          size: "l"
+        },
+        spellcheck: "false",
+        autocomplete: "email",
+        hint: -> do %>
           <p>
             Tell us the email you want us to send reminders to.
             We recommend you use a non-work email address in case your circumstances change.
           </p>
+
           <p>
             To verify your email address we will send you an email with a 6-digit passcode.
             You can enter the passcode on the next screen.
           </p>
-        </div>
-        <%= errors_tag @form, :email_address %>
-         <%= f.text_field :email_address, class: css_classes_for_input(@form, :email_address), type: "text", spellcheck: "false", autocomplete: "email" %>
       <% end %>
 
-      <details class="govuk-details" data-module="govuk-details">
-        <summary class="govuk-details__summary">
-          <span class="govuk-details__summary-text">Get help with access codes</span>
-        </summary>
-        <div class="govuk-details__text">
-          <p class="govuk-body">
-            If you have any issues with the passcode, email us at:
-            <%= mail_to support_email_address, support_email_address, class: "govuk-link" -%>.
-          </p>
-        </div>
-      </details>
+      <%= govuk_details(summary_text: "Get help with access codes") do %>
+        <p class="govuk-body">
+          If you have any issues with the passcode, email us at:
+          <%= govuk_mail_to support_email_address, support_email_address -%>.
+        </p>
+      <% end %>
 
-      <%= f.submit "Continue", class: "govuk-button", data: {module: "govuk-button"} %>
+      <%= f.govuk_submit "Continue" %>
     <% end %>
   </div>
 </div>

spec/features/reminders_spec.rb

@@ -67,7 +67,7 @@
           fill_in "Full name", with: "David Tau"
           fill_in "Email address", with: "[email protected]"
           click_on "Continue"
-          fill_in "form_one_time_password", with: get_otp_from_email
+          fill_in "form-one-time-password-field", with: get_otp_from_email
           click_on "Confirm"
           reminder = Reminder.order(:created_at).last
 
@@ -153,7 +153,7 @@
           expect(page).to have_text("Personal details")
           click_on "Continue"
 
-          fill_in "form_one_time_password", with: get_otp_from_email
+          fill_in "form-one-time-password-field", with: get_otp_from_email
           click_on "Confirm"
           reminder = Reminder.order(:created_at).last
 

spec/features/trainee_teacher_subjourney_for_lup_schools_spec.rb

@@ -41,7 +41,7 @@
     fill_in "Full name", with: "David Tau"
     fill_in "Email address", with: "[email protected]"
     click_on "Continue"
-    fill_in "form_one_time_password", with: get_otp_from_email
+    fill_in "form-one-time-password-field", with: get_otp_from_email
     click_on "Confirm"
     reminder = Reminder.order(:created_at).last
 
@@ -76,7 +76,7 @@
     fill_in "Full name", with: "David Tau"
     fill_in "Email address", with: "[email protected]"
     click_on "Continue"
-    fill_in "form_one_time_password", with: get_otp_from_email
+    fill_in "form-one-time-password-field", with: get_otp_from_email
     click_on "Confirm"
     reminder = Reminder.order(:created_at).last
 

spec/helpers/govuk_form_helper_spec.rb

@@ -66,16 +66,4 @@
       expect(helper.css_classes_for_input(claim, :attribute, "class-one class-two") {}).to eq("class-one class-two govuk-input")
     end
   end
-
-  describe "#css_classes_for_select" do
-    it "adds the correct css class" do
-      expect(helper.css_classes_for_select(claim, :attribute) {}).to eq("govuk-select")
-    end
-
-    it "adds the error class when there are errors" do
-      claim.errors.add(:attribute, "Test error")
-
-      expect(helper.css_classes_for_select(claim, :attribute) {}).to eq("govuk-select govuk-select--error")
-    end
-  end
 end