From 99901b47f6a524396cd0e8c237b8e818faad531c Mon Sep 17 00:00:00 2001 From: Peter Guntrip Date: Mon, 5 Dec 2016 12:23:44 +0000 Subject: [PATCH] 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 --- Gemfile.lock | 4 +-- app/assets/javascripts/application.js | 2 ++ app/assets/javascripts/checkbox-radio-init.js | 12 +++++++ app/views/booking_requests/step_two.html.erb | 34 ++++++++++--------- 4 files changed, 34 insertions(+), 18 deletions(-) create mode 100644 app/assets/javascripts/checkbox-radio-init.js diff --git a/Gemfile.lock b/Gemfile.lock index 0059924e9..23aebb12d 100644 --- 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 index b6e386ef0..1b04760c5 100644 --- 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 new file mode 100644 index 000000000..372fa5d6f --- /dev/null +++ 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 index b2f52f0b8..a9089102e 100644 --- a/app/views/booking_requests/step_two.html.erb +++ b/app/views/booking_requests/step_two.html.erb @@ -142,42 +142,44 @@ <%= @booking_request.errors[:dc_pot].to_sentence %> <% 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 %>
- <%= f.label :accessibility_requirements do %> + <%= f.label :accessibility_requirements, class: 'block-label t-accessibility-requirements' do %> <% if @booking_request.errors.include?(:accessibility_requirements) %> <%= @booking_request.errors[:accessibility_requirements].to_sentence %> <% 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 %>
- <%= f.label :opt_in do %> - <% if @booking_request.errors.include?(:opt_in) %> - <%= @booking_request.errors[:opt_in].to_sentence %> +
+ + Terms and conditions + <% if @booking_request.errors.include?(:opt_in) %> + <%= @booking_request.errors[:opt_in].to_sentence %> + <% end %> + + <%= f.label :opt_in, class: 'block-label selection-button-checkbox t-opt-in' do %> + <%= f.check_box :opt_in %> I accept the terms and conditions <% end %> - <%= f.check_box :opt_in, class: 't-opt-in' %> I accept the terms and conditions - <% end %> +