From c051566483ebf5cfd593bef9e377f66094bc1dcf Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 09:29:03 +0000 Subject: [PATCH 1/7] Update govuk-elements-sass to 3.0.1 Changelog for GOV.UK elements: https://github.com/alphagov/govuk_elements/blob/master/CHANGELOG.md Changelog for the GOV.UK frontend toolkit: https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0f18627538..55c76f39a2 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "express": "4.13.3", "express-session": "^1.13.0", "express-writer": "0.0.4", - "govuk-elements-sass": "2.2.1", - "govuk_frontend_toolkit": "5.1.1", + "govuk-elements-sass": "3.0.1", + "govuk_frontend_toolkit": "5.1.2", "govuk_template_jinja": "0.19.2", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", From e0121960e2de0a34dec22431e627187b984ccb67 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 09:36:04 +0000 Subject: [PATCH 2/7] Remove DEPRECATED selection-buttons.js This is no longer required with the radios and checkboxes released in govuk-elements-sass v3.0.0. --- app/assets/javascripts/application.js | 5 ----- app/views/includes/scripts.html | 1 - docs/assets/javascripts/docs.js | 5 ----- docs/views/includes/scripts.html | 1 - 4 files changed, 12 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 30e0ff367c..62df420e75 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -11,11 +11,6 @@ if ( } $(document).ready(function () { - // Use GOV.UK selection-buttons.js to set selected - // and focused states for block labels - var $blockLabels = $(".block-label input[type='radio'], .block-label input[type='checkbox']") - new GOVUK.SelectionButtons($blockLabels) // eslint-disable-line - // Use GOV.UK shim-links-with-button-role.js to trigger a link styled to look like a button, // with role="button" when the space key is pressed. GOVUK.shimLinksWithButtonRole.init() diff --git a/app/views/includes/scripts.html b/app/views/includes/scripts.html index f571a3eb91..899f34f1fa 100644 --- a/app/views/includes/scripts.html +++ b/app/views/includes/scripts.html @@ -1,7 +1,6 @@ - diff --git a/docs/assets/javascripts/docs.js b/docs/assets/javascripts/docs.js index 30e0ff367c..62df420e75 100644 --- a/docs/assets/javascripts/docs.js +++ b/docs/assets/javascripts/docs.js @@ -11,11 +11,6 @@ if ( } $(document).ready(function () { - // Use GOV.UK selection-buttons.js to set selected - // and focused states for block labels - var $blockLabels = $(".block-label input[type='radio'], .block-label input[type='checkbox']") - new GOVUK.SelectionButtons($blockLabels) // eslint-disable-line - // Use GOV.UK shim-links-with-button-role.js to trigger a link styled to look like a button, // with role="button" when the space key is pressed. GOVUK.shimLinksWithButtonRole.init() diff --git a/docs/views/includes/scripts.html b/docs/views/includes/scripts.html index 9bb3e70a91..8fad6725c5 100644 --- a/docs/views/includes/scripts.html +++ b/docs/views/includes/scripts.html @@ -1,7 +1,6 @@ - From 1e9d3d8e3d238d894173d98f29913c5207e284d3 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 09:45:16 +0000 Subject: [PATCH 3/7] Update the radio buttons and checkboxes example page To use the new markup released in GOV.UK elements 3.0.0. --- .../elements/radio-buttons-checkboxes.html | 126 +++++++++--------- 1 file changed, 60 insertions(+), 66 deletions(-) diff --git a/docs/views/examples/elements/radio-buttons-checkboxes.html b/docs/views/examples/elements/radio-buttons-checkboxes.html index 33205f7e29..ef26b12367 100644 --- a/docs/views/examples/elements/radio-buttons-checkboxes.html +++ b/docs/views/examples/elements/radio-buttons-checkboxes.html @@ -19,81 +19,75 @@

- This test page demonstrates selection-buttons.js from the govuk frontend toolkit, which - sets 'focused' and 'selected' states for the large hit area labels that wrap checkboxes and radio buttons. + This test page demonstrates the new `.multiple-choice` radio buttons and checkboxes, released in GOV.UK elements v3.0.0.

+ + +

Where do you live?

+
+
+
+ + + +
+ + +
+
+ + +
+

or

+
+ + +
+ +
+
+
+

- It also demonstrates setting ARIA attributes when showing and hiding additional content. + It also demonstrates the updated show-hide-content.js - release in GOV.UK frontend toolkit v5.1.2, click on "Citizen of a different country" to see how this works.

-

- What is your nationality? -

- -

If you have dual nationality, select all options that are relevant to you.

- -
-
- - What is your nationality? - - - - - - - -
- - -
- -
-
- -

- Which part of the Housing Act was your licence isued under? -

+ +

+ What is your nationality? +

- Select one of the options below. + Select all options that are relevant to you.

-
-
- - - Which part of the Housing Act was your licence isued under? - - - - - - -
-
- - +
+
+
+ + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
From da3fdfcebdf29c8b39c6dd29b806ffc57abaa6ad Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 09:58:32 +0000 Subject: [PATCH 4/7] Replace .block-label with .multiple-choice MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update examples of radio buttons and checkboxes. Replace ‘.block-label` with `.multiple-choice` as the block-label class no longer exists. --- app/assets/javascripts/application.js | 2 +- docs/assets/javascripts/docs.js | 2 +- docs/views/examples/branching.html | 18 +++--- .../examples/elements/toggled-content.html | 58 +++++++++---------- 4 files changed, 37 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 62df420e75..758f39a0b5 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -16,7 +16,7 @@ $(document).ready(function () { GOVUK.shimLinksWithButtonRole.init() // Show and hide toggled content - // Where .block-label uses the data-target attribute + // Where .multiple-choice uses the data-target attribute // to toggle hidden content var showHideContent = new GOVUK.ShowHideContent() showHideContent.init() diff --git a/docs/assets/javascripts/docs.js b/docs/assets/javascripts/docs.js index 62df420e75..758f39a0b5 100644 --- a/docs/assets/javascripts/docs.js +++ b/docs/assets/javascripts/docs.js @@ -16,7 +16,7 @@ $(document).ready(function () { GOVUK.shimLinksWithButtonRole.init() // Show and hide toggled content - // Where .block-label uses the data-target attribute + // Where .multiple-choice uses the data-target attribute // to toggle hidden content var showHideContent = new GOVUK.ShowHideContent() showHideContent.init() diff --git a/docs/views/examples/branching.html b/docs/views/examples/branching.html index f7b1a9a0fa..b986aebd6d 100644 --- a/docs/views/examples/branching.html +++ b/docs/views/examples/branching.html @@ -40,15 +40,15 @@

Are you 18 or over? - - - +
+ + +
+ +
+ + +
diff --git a/docs/views/examples/elements/toggled-content.html b/docs/views/examples/elements/toggled-content.html index d50d19a501..a93664b7ad 100644 --- a/docs/views/examples/elements/toggled-content.html +++ b/docs/views/examples/elements/toggled-content.html @@ -25,28 +25,23 @@

- What is your nationality? - - - - - - - -
- - + + +
+ + +
+
+ + +
+
+ + +
+
+ +
@@ -63,15 +58,14 @@

Where should we send your new passport? - - - +
+ + +
+
+ + +
@@ -81,7 +75,7 @@

- + From 496497a5b98bd473bbbb1e116677e58129ffb4a8 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 10:09:00 +0000 Subject: [PATCH 5/7] Add a .form-section wrapper to examples Increase the spacing between the radio button and checkbox examples. --- .../elements/radio-buttons-checkboxes.html | 124 +++++++++--------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/docs/views/examples/elements/radio-buttons-checkboxes.html b/docs/views/examples/elements/radio-buttons-checkboxes.html index ef26b12367..2a773fc10b 100644 --- a/docs/views/examples/elements/radio-buttons-checkboxes.html +++ b/docs/views/examples/elements/radio-buttons-checkboxes.html @@ -19,75 +19,75 @@

- This test page demonstrates the new `.multiple-choice` radio buttons and checkboxes, released in GOV.UK elements v3.0.0. + This test page demonstrates the new .multiple-choice radio buttons and checkboxes, released in GOV.UK elements v3.0.0.

-

Where do you live?

-
-
-
- - - -
- - -
-
- - -
-

or

-
- - -
- -
-
-
- -

- It also demonstrates the updated show-hide-content.js - release in GOV.UK frontend toolkit v5.1.2, click on "Citizen of a different country" to see how this works. -

+
+

Where do you live?

+
+
+
+ + + +
+ + +
+
+ + +
+

or

+
+ + +
+ +
+
+
+
-

- What is your nationality? -

-

- Select all options that are relevant to you. -

- -
-
-
- - - -
- - -
-
- - -
-
- - -
-
- - -
- -
-
-
+
+

+ What is your nationality? +

+

+ Select all options that are relevant to you. +

+ +
+
+
+ + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+

From 90e1a4a244362f36263c702538434e5bb2051fc8 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 10:09:34 +0000 Subject: [PATCH 6/7] Mention requirement for show-hide-content.js --- docs/views/examples/elements/toggled-content.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/views/examples/elements/toggled-content.html b/docs/views/examples/elements/toggled-content.html index a93664b7ad..642d9ca7bf 100644 --- a/docs/views/examples/elements/toggled-content.html +++ b/docs/views/examples/elements/toggled-content.html @@ -21,6 +21,9 @@

This page shows how to use the data-target attribute to show and hide content when a radio button or checkbox is selected.

+

+ These examples require show-hide-content.js - updated in GOV.UK frontend toolkit v5.1.2. +

From 8972fc5ba35d5352c5a595fba42c1ee5f20a9d06 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 21 Mar 2017 17:05:29 +0000 Subject: [PATCH 7/7] Fix radios and checkbox example page This had nested form elements, which was a mistake. Removing these. --- .../elements/radio-buttons-checkboxes.html | 109 +++++++++--------- 1 file changed, 52 insertions(+), 57 deletions(-) diff --git a/docs/views/examples/elements/radio-buttons-checkboxes.html b/docs/views/examples/elements/radio-buttons-checkboxes.html index 2a773fc10b..a39d30840d 100644 --- a/docs/views/examples/elements/radio-buttons-checkboxes.html +++ b/docs/views/examples/elements/radio-buttons-checkboxes.html @@ -24,71 +24,66 @@

-
-

Where do you live?

-
-
-
- - - -
- - -
-
- - -
-

or

-
- - -
- -
+

Where do you live?

+ +
+
+ + + +
+ + +
+
+ +
- +

or

+
+ + +
+ +
-
-

- What is your nationality? -

-

- Select all options that are relevant to you. -

- -
-
-
- - - -
- - -
-
- - -
-
- - -
-
- - -
- -
+

+ What is your nationality? +

+

+ Select all options that are relevant to you. +

+ +
+
+ + + +
+ + +
+
+ +
- +
+ + +
+
+ + +
+ +
+ +