govuk_frontend_toolkit 5.0.0 → 5.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ff8f1703a8d15e9962e1a8c93c443accd075c4c6
-  data.tar.gz: a494d718895df6b12456aad04b7dd88ad91990d6
+  metadata.gz: 9323b826f363ecc6b9568dcc5db77a364425fac2
+  data.tar.gz: db6f03750e7435ee005300a65deabb26bc5cd136
 SHA512:
-  metadata.gz: d780600b4e3d022d7c7ca4ba0a9bf093f5a87d1c89e98362f51db2441132a0c5e12d4b89d686d3ca4c4efe6dcdb8db36add955f8d21c123e5231b12a190f6593
-  data.tar.gz: 3899d64d9b3d12e427ba54b728767af1ed1e6a709bd68c140b4a2ef9045b140ed23ec03a5d0a1ce7614c99230251c83d88cb080acbb58bfc65377fc521b07250
+  metadata.gz: 4eef6173b14e493c9f8e2c82346663c793769b005574db6bd8778c5e7366a0bae880a0b65b23c9723009ea46ada2d60343b52edd24291e82f6f8b0c6cd082e02
+  data.tar.gz: 9fab80347956b8e584c7d4bf46da2de0a72ca36362c90d1de4fb72ee32762844f73a9e04c759c7b29051843a76538276262ed48f8c84b962bcd3cbe1efe49dd0

data/app/assets/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 5.0.1
+
+- Fix role="button" click shim ([PR #347](https://github.com/alphagov/govuk_frontend_toolkit/pull/347))
+- Make font variables lowercase ([PR #348](https://github.com/alphagov/govuk_frontend_toolkit/pull/348))
+- Update selection button documentation ([PR #350](https://github.com/alphagov/govuk_frontend_toolkit/pull/350))
+
 # 5.0.0
 
 This release includes two breaking changes:

data/app/assets/VERSION.txt

@@ -1 +1 @@
-5.0.0
+5.0.1

data/app/assets/docs/javascript.md

@@ -51,7 +51,7 @@ The simplest module looks like:
 ```javascript
 ;(function(Modules) {
   'use strict'
-  
+
   Modules.SomeModule = function() {
     this.start = function($element) {
       // module code
@@ -342,40 +342,67 @@ and stop the elements before they get to the bottom.
 
 ## Selection buttons
 
-Script to support a design of radio buttons and checkboxes requiring them to be wrapped in `<label>` tags:
+`GOVUK.SelectionButtons` adds classes to a parent `<label>` of a radio button or checkbox, allowing you to style it based on the input’s state. Given this example HTML structure:
 
-    <label>
-      <input type="radio" name="size" value="medium" />
-    </label>
+```html
+<label>
+  <input type="radio" name="size" value="medium" />
+  Medium size
+</label>
+```
 
-When the input is focused or its `checked` attribute is set, classes are added to their parent labels so their styling can show this.
+When the input is focused or its `checked` attribute is set, representative classes are added to the label.
 
 ### Usage
 
 #### GOVUK.SelectionButtons
 
-To apply this behaviour to elements with the above HTML pattern, call the `GOVUK.SelectionButtons` constructor with their inputs:
+To apply this behaviour to elements that follow the above HTML, call the `GOVUK.SelectionButtons` constructor with a jQuery collection of the inputs:
 
-```
-var $buttons = $("label input[type='radio'], label input[type='checkbox']")
+```javascript
+var $buttons = $('label input[type=radio], label input[type=checkbox]')
 var selectionButtons = new GOVUK.SelectionButtons($buttons)
 ```
 
-You can also call `GOVUK.SelectionButtons` with a selector:
+If you want to bind your events to the document instead of the elements directly (delegated events) you can call `GOVUK.SelectionButtons` with a selector string:
 
+```javascript
+var selectionButtons = new GOVUK.SelectionButtons('label input[type=radio], label input[type=checkbox]')
 ```
-var selectionButtons = new GOVUK.SelectionButtons("label input[type='radio'], label input[type='checkbox']")
+
+This will bind all events to the document meaning any new elements (for example, by AJAX) that match this selector will automatically gain this functionality.
+
+If you do add elements that need this functionality dynamically to the page, you will need to initialise their state. You can do this by calling `SelectionButtons.setInitialState` with the same selector string:
+
+```javascript
+var buttonSelector = 'label input[type=radio], label input[type=checkbox]'
+var selectionButtons = new GOVUK.SelectionButtons(buttonSelector)
 ```
 
-This will bind all events to the document, meaning any changes to content (for example, by AJAX) will not effect the button's behaviour.
+then later, after adding more elements:
+
+```javascript
+selectionButtons.setInitialState(buttonSelector)
+```
 
 The classes that get added to the `<label>` tags can be passed in as options:
 
+```javascript
+var $buttons = $('label input[type=radio], label input[type=checkbox]')
+var selectionButtons = new GOVUK.SelectionButtons($buttons, {
+  focusedClass: 'selectable-focused',
+  selectedClass: 'selectable-selected'
+})
 ```
-var $buttons = $("label input[type='radio'], label input[type='checkbox']")
-var selectionButtons = new GOVUK.SelectionButtons($buttons, { focusedClass : 'selectable-focused', selectedClass : 'selectable-selected' })
 
-var selectionButtons = new GOVUK.SelectionButtons("label input[type='radio'], label input[type='checkbox']", { focusedClass : 'selectable-focused', selectedClass : 'selectable-selected' })
+or, using delegated events:
+
+```javascript
+var buttonSelector = 'label input[type=radio], label input[type=checkbox]'
+var selectionButtons = new GOVUK.SelectionButtons($buttonSelector, {
+  focusedClass: 'selectable-focused',
+  selectedClass: 'selectable-selected'
+})
 ```
 
 #### destroy method
@@ -384,7 +411,7 @@ The returned instance object includes a `destroy` method to remove all events bo
 
 Using any of the `selectionButtons` objects created above, it can be called like so:
 
-```
+```javascript
 selectionButtons.destroy();
 ```
 
@@ -392,7 +419,7 @@ selectionButtons.destroy();
 
 The previous method of calling selection buttons is now deprecated. If you need to call them using this method, you will need to define this function:
 
-```
+```javascript
 GOVUK.selectionButtons = function (elms, opts) {
   new GOVUK.SelectionButtons(elms, opts)
 }

data/app/assets/javascripts/govuk/shim-links-with-button-role.js

@@ -1,13 +1,12 @@
 // javascript 'shim' to trigger the click event of element(s)
 // when the space key is pressed.
 //
-// usage instructions:
-// GOVUK.shimLinksWithButtonRole.init();
+// Created since some Assistive Technologies (for example some Screenreaders)
+// Will tell a user to press space on a 'button', so this functionality needs to be shimmed
+// See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
 //
-// If you want to customise the shim you can pass in a custom configuration
-// object with your own selector for the target elements and addional keyup
-// codes if there becomes a need to do so. For example:
-// GOVUK.shimLinksWithButtonRole.init({ selector: '[role="button"]' });
+// Usage instructions:
+// GOVUK.shimLinksWithButtonRole.init();
 ;(function (global) {
   'use strict'
 
@@ -16,40 +15,16 @@
 
   GOVUK.shimLinksWithButtonRole = {
 
-    // default configuration that can be overridden by passing object as second parameter to module
-    config: {
-      // the target element(s) to attach the shim event to
-      selector: 'a[role="button"]',
-      // array of keys to match against upon the keyup event
-      keycodes: [
-        32 // spacekey
-      ]
-    },
-
-    // event behaviour (not a typical anonymous function for resuse if needed)
-    triggerClickOnTarget: function triggerClickOnTarget (event) {
-      // if the code from this event is in the keycodes array then
-      if ($.inArray(event.which, this.config.keycodes) !== -1) {
-        event.preventDefault()
-        // trigger the target's click event
-        event.target.click()
-      }
-    },
-
-    // By default this will find all links with role attribute set to
-    // 'button' and will trigger their click event when the space key (32) is pressed.
-    // @method init
-    // @param  {Object}   customConfig                object to override default configuration
-    //         {String}   customConfig.selector       a selector for the elements to be 'clicked'
-    //         {Array}    customConfig.keycodes       an array of javascript keycode values to match against that when pressed will trigger the click
-    init: function init (customConfig) {
-      // extend the default config with any custom attributes passed in
-      this.config = $.extend(this.config, customConfig)
-      // if we have found elements then:
-      if ($(this.config.selector).length > 0) {
-        // listen to 'document' for keyup event on the elements and fire the triggerClickOnTarget
-        $(document).on('keyup', this.config.selector, this.triggerClickOnTarget.bind(this))
-      }
+    init: function init () {
+      // listen to 'document' for keydown event on the any elements that should be buttons.
+      $(document).on('keydown', '[role="button"]', function (event) {
+        // if the keyCode (which) is 32 it's a space, let's simulate a click.
+        if (event.which === 32) {
+          event.preventDefault()
+          // trigger the target's click event
+          event.target.click()
+        }
+      })
     }
 
   }

data/app/assets/spec/unit/shim-links-with-button-role.spec.js

@@ -7,7 +7,7 @@ describe('shim-links-with-button-role', function () {
   var GOVUK = window.GOVUK
 
   var $buttonLink
-  var keyupEvent
+  var keyDownEvent
 
   beforeEach(function () {
     $buttonLink = $('<a role="button">Button</a>')
@@ -15,8 +15,8 @@ describe('shim-links-with-button-role', function () {
       $buttonLink.addClass('clicked')
     })
     $(document.body).append($buttonLink)
-    keyupEvent = $.Event('keyup')
-    keyupEvent.target = $buttonLink.get(0)
+    keyDownEvent = $.Event('keydown')
+    keyDownEvent.target = $buttonLink.get(0)
     GOVUK.shimLinksWithButtonRole.init()
   })
 
@@ -28,14 +28,14 @@ describe('shim-links-with-button-role', function () {
   it('should trigger event on space', function () {
     // Ideally we’d test the page loading functionality but that seems hard to
     // do within a Jasmine context. Settle for checking a bound event trigger.
-    keyupEvent.which = 32 // Space character
-    $(document).trigger(keyupEvent)
+    keyDownEvent.which = 32 // Space character
+    $(document).trigger(keyDownEvent)
     expect($buttonLink.hasClass('clicked')).toBe(true)
   })
 
   it('should not trigger event on tab', function () {
-    keyupEvent.which = 9 // Tab character
-    $(document).trigger(keyupEvent)
+    keyDownEvent.which = 9 // Tab character
+    $(document).trigger(keyDownEvent)
     expect($buttonLink.hasClass('clicked')).toBe(false)
   })
 })

data/app/assets/stylesheets/_font_stack.scss

@@ -1,19 +1,25 @@
 //  GOV.UK font stacks, referred to in typography.scss
 
-// Allow uppercase letters in font stack variable names
-// scss-lint:disable NameFormat
-
 // New Transport Light
-$NTA-Light: "nta", Arial, sans-serif;
-$NTA-Light-Tabular: "ntatabularnumbers", $NTA-Light;
+$nta-light: "nta", Arial, sans-serif;
+$nta-light-tabular: "ntatabularnumbers", $nta-light;
 
 // Helvetica Regular
-$Helvetica-Regular: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
+$helvetica-regular: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
 // Allow font stack to be overridden
 // Not all apps using toolkit use New Transport
-$toolkit-font-stack: $NTA-Light !default;
-$toolkit-font-stack-tabular: $NTA-Light-Tabular !default;
+$toolkit-font-stack: $nta-light !default;
+$toolkit-font-stack-tabular: $nta-light-tabular !default;
 
 // Font reset for print
-$Print-reset: sans-serif;
+$print-reset: sans-serif;
+
+// Fallback variable names after renaming previous uppercase names to be lowercase
+// @deprecated, please only use the lowercase versions
+// Make an exception to the linting as these are still used a lot
+// scss-lint:disable NameFormat
+$NTA-Light: $nta-light;
+$NTA-Light-Tabular: $nta-light-tabular;
+$Helvetica-Regular: $helvetica-regular;
+$Print-reset: $print-reset;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 5.0.0
+  version: 5.0.1
 platform: ruby
 authors:
 - Government Digital Service
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-10-25 00:00:00.000000000 Z
+date: 2016-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails