Update govuk_elements to version 2.2.1

- made some minor adjustments to form to look good with new radio/checkbox styles - removed field_with_errors wrapping div which conflicts with new radio/checkbox JS modules Full list of changes: Remove the images path override from the helpers partial alphagov/govuk_elements#292 Bump govuk frontend toolkit to 4.16.1 alphagov/govuk_elements#288 Form validation patterns for conditionally revealing content alphagov/govuk_elements#286 Centre text on full-width buttons alphagov/govuk_elements#289 Lint JS code using StandardJS alphagov/govuk_elements#290 Update govuk_frontend_toolkit to 5.0.0 and govuk_template to 0.19.0 alphagov/govuk_elements#333 Add a select box example alphagov/govuk_elements#303 Add bullet points describing use of disabled buttons alphagov/govuk_elements#304 Add reasoning for native over custom file inputs Clear floats on details elements alphagov/govuk_elements#328 Add a .bold utility class alphagov/govuk_elements#321 Remove external link styles alphagov/govuk_elements#274 Remove rounded corners on form inputs elements and textareas in iOS alphagov/govuk_elements#342 Fix focus outline on form fields in Chrome / Safari alphagov/govuk_elements#346 Updates the contribution guidelines alphagov/govuk_elements#339 Recommend .visually-hidden over .visuallyhidden alphagov/govuk_elements#341 Add snippets for data visualisation examples alphagov/govuk_elements#350 alphagov/govuk_elements#351 Fix the grey left hand border example for Radios and checkboxes alphagov/govuk_elements#349 Fix the spacing underneath the "inline" block label example alphagov/govuk_elements#348 Custom radios / checkboxes alphagov/govuk_elements#296 Fix contrast issues with phase banners. Use $govuk-blue for the phase tag and update the examples alphagov/govuk_elements#364
guidance-guarantee-programme · Dec 5, 2016 · 3f3fc94 · 3f3fc94
1 parent f4b5b0e
commit 3f3fc94
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 28 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -116,8 +116,8 @@ GEM
       kramdown (~> 1.5.0)
       nokogiri (~> 1.5)
       sanitize (~> 2.1.0)
-    govuk_elements_rails (1.2.2)
-      govuk_frontend_toolkit (>= 4.14.1)
+    govuk_elements_rails (2.2.1)
+      govuk_frontend_toolkit (>= 5.0.2)
       rails (>= 4.1.0)
       sass (>= 3.2.0)
     govuk_frontend_toolkit (5.0.2)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,4 +1,6 @@
 //= require jquery/dist/jquery.min.js
+//= require govuk_toolkit
+//= require checkbox-radio-init.js
 //= require click-tracker.js
 //= require mobile-nav-toggler.js
 //= require calculators.js

diff --git a/app/assets/javascripts/checkbox-radio-init.js b/app/assets/javascripts/checkbox-radio-init.js
@@ -0,0 +1,12 @@
+/* global GOVUK */
+$(function() {
+  'use strict';
+
+  var $blockLabels = $('.block-label').find('input[type="radio"], input[type="checkbox"]');
+  new GOVUK.SelectionButtons($blockLabels);
+
+  var showHideContent = new GOVUK.ShowHideContent();
+  showHideContent.init();
+
+  GOVUK.shimLinksWithButtonRole.init();
+});
diff --git a/app/views/booking_requests/step_two.html.erb b/app/views/booking_requests/step_two.html.erb
@@ -142,42 +142,44 @@
             <span class="error-message"><%= @booking_request.errors[:dc_pot].to_sentence %></span>
           <% end %>
 
-          <%= f.label :dc_pot, value: 'yes', class: 'block-label' do %>
-              <%= f.radio_button :dc_pot, 'yes',
-                                 class: 't-dc-pot-1' %>
+          <%= f.label :dc_pot, value: 'yes', class: 'block-label t-dc-pot-1' do %>
+              <%= f.radio_button :dc_pot, 'yes' %>
               Yes
           <% end %>
 
-          <%= f.label :dc_pot, value: 'no', class: 'block-label' do %>
-              <%= f.radio_button :dc_pot, 'no',
-                                 class: 't-dc-pot-2' %>
+          <%= f.label :dc_pot, value: 'no', class: 'block-label t-dc-pot-2' do %>
+              <%= f.radio_button :dc_pot, 'no' %>
               No
           <% end %>
 
-          <%= f.label :dc_pot, value: 'not-sure', class: 'block-label' do %>
-            <%= f.radio_button :dc_pot, 'not-sure',
-                                 class: 't-dc-pot-3' %>
+          <%= f.label :dc_pot, value: 'not-sure', class: 'block-label t-dc-pot-3' do %>
+            <%= f.radio_button :dc_pot, 'not-sure' %>
             Not sure
           <% end %>
         </fieldset>
       </div>
 
       <div class="form-group <%= 'error' if @booking_request.errors.include?(:accessibility_requirements) %>">
-        <%= f.label :accessibility_requirements do %>
+        <%= f.label :accessibility_requirements, class: 'block-label t-accessibility-requirements' do %>
           <% if @booking_request.errors.include?(:accessibility_requirements) %>
             <span class="error-message"><%= @booking_request.errors[:accessibility_requirements].to_sentence %></span>
           <% end %>
-          <%= f.check_box :accessibility_requirements, class: 't-accessibility-requirements' %> I have accessibility needs, eg wheelchair access
+          <%= f.check_box :accessibility_requirements %> I have accessibility needs, eg wheelchair access
         <% end %>
       </div>
 
       <div class="form-group <%= 'error' if @booking_request.errors.include?(:opt_in) %>">
-        <%= f.label :opt_in do %>
-          <% if @booking_request.errors.include?(:opt_in) %>
-            <span class="error-message"><%= @booking_request.errors[:opt_in].to_sentence %></span>
+        <fieldset>
+          <legend>
+            Terms and conditions
+            <% if @booking_request.errors.include?(:opt_in) %>
+              <span class="error-message"><%= @booking_request.errors[:opt_in].to_sentence %></span>
+            <% end %>
+          </legend>
+          <%= f.label :opt_in, class: 'block-label selection-button-checkbox t-opt-in' do %>
+            <%= f.check_box :opt_in %> I accept the <a href="/privacy" target="_blank">terms and conditions</a>
           <% end %>
-          <%= f.check_box :opt_in, class: 't-opt-in' %> I accept the <a href="/privacy" target="_blank">terms and conditions</a>
-        <% end %>
+        </fieldset>
       </div>
 
       <div class="form-group">

diff --git a/features/pages/booking_complete.rb b/features/pages/booking_complete.rb
@@ -1,5 +1,5 @@
 module Pages
-  class BookingComplete < SitePrism::Page
+  class BookingComplete < Page
     set_url '/locations/{id}/booking-request/complete'
 
     element :error, '.t-errors'

diff --git a/features/pages/booking_confirmation.rb b/features/pages/booking_confirmation.rb
@@ -1,5 +1,5 @@
 module Pages
-  class BookingConfirmation < SitePrism::Page
+  class BookingConfirmation < Page
     set_url '/locations/{id}/booking-request/completed'
   end
 end
diff --git a/features/pages/booking_ineligible.rb b/features/pages/booking_ineligible.rb
@@ -1,5 +1,5 @@
 module Pages
-  class BookingIneligible < SitePrism::Page
+  class BookingIneligible < Page
     set_url '/locations/{id}/booking-request/ineligible'
   end
 end
diff --git a/features/pages/booking_step_one.rb b/features/pages/booking_step_one.rb
@@ -1,7 +1,7 @@
 require_relative '../sections/feedback'
 
 module Pages
-  class BookingStepOne < SitePrism::Page
+  class BookingStepOne < Page
     set_url '/locations/{id}/booking-request/step-one'
 
     element :location_name, '.t-location-name'

diff --git a/features/pages/booking_step_two.rb b/features/pages/booking_step_two.rb
@@ -1,5 +1,5 @@
 module Pages
-  class BookingStepTwo < SitePrism::Page
+  class BookingStepTwo < Page
     set_url '/locations/{id}/booking-request/step-two'
 
     element :error, '.t-errors'

diff --git a/features/pages/feedback_page.rb b/features/pages/feedback_page.rb
@@ -1,7 +1,7 @@
 require_relative '../sections/feedback'
 
 module Pages
-  class Feedback < SitePrism::Page
+  class Feedback < Page
     set_url '/feedback/new'
 
     section :feedback, Sections::Feedback, '.t-feedback'

diff --git a/features/pages/page.rb b/features/pages/page.rb
@@ -6,5 +6,17 @@ class Page < SitePrism::Page
     elements :link_promo_items, '.t-link-promo__item'
 
     section :footer, Sections::Footer, '#footer'
+
+    def check_hidden_checkbox(element, check)
+      input = element.find('input[type=checkbox]')
+      input.trigger('click') if input['checked'] != check
+
+      raise 'value did not change' if input['checked'] != check
+    end
+
+    def check_hidden_radio(element)
+      input = element.find('input[type=radio]')
+      input.trigger('click')
+    end
   end
 end
diff --git a/features/step_definitions/customer_booking_request_steps.rb b/features/step_definitions/customer_booking_request_steps.rb
@@ -71,16 +71,15 @@
   @step_two.email.set 'rick@example.com'
   @step_two.telephone_number.set '07715 930 459'
   @step_two.memorable_word.set 'birdperson'
-  @step_two.accessibility_requirements.set false
-  @step_two.opt_in.set true
+  @step_two.check_hidden_checkbox(@step_two.accessibility_requirements, true)
+  @step_two.check_hidden_checkbox(@step_two.opt_in, true)
 end
 
 When(/^I pass the basic eligibility requirements$/) do
   @step_two.date_of_birth_day.set '01'
   @step_two.date_of_birth_month.set '01'
   @step_two.date_of_birth_year.set '1950'
-
-  @step_two.dc_pot_yes.set true
+  @step_two.check_hidden_radio(@step_two.dc_pot_yes)
 end
 
 When(/^I submit my completed Booking Request$/) do