Update govuk_elements to version 2.2.1

- made some minor adjustments to form to look good with new radio/checkbox styles 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 · 99901b4 · 99901b4
1 parent f4b5b0e
commit 99901b4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 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">