Merge pull request #364 from alphagov/use-elements-3.0.1

Use GOV.UK elements v3.0.1
alphagov · Mar 21, 2017 · a21f35a · a21f35a
2 parents c80fc49 + 8972fc5
commit a21f35a
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 106 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -11,17 +11,12 @@ 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()
 
   // 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/app/views/includes/scripts.html b/app/views/includes/scripts.html
@@ -1,7 +1,6 @@
 <!-- Javascript -->
 <script src="/public/javascripts/details.polyfill.js"></script>
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
-<script src="/public/javascripts/govuk/selection-buttons.js"></script>
 <script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
 <script src="/public/javascripts/govuk/show-hide-content.js"></script>
 <script src="/public/javascripts/application.js"></script>
diff --git a/docs/assets/javascripts/docs.js b/docs/assets/javascripts/docs.js
@@ -11,17 +11,12 @@ 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()
 
   // 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
@@ -40,15 +40,15 @@ <h2 class="heading-medium">
 
             <legend class="visuallyhidden">Are you 18 or over?</legend>
 
-            <label for="over18True" class="block-label">
-              <input type="radio" name="over18" value="true" id="over18True">
-              Yes
-            </label>
-
-            <label for="over18False" class="block-label">
-              <input type="radio" name="over18" value="false" id="over18False">
-              No
-            </label>
+            <div class="multiple-choice">
+              <input id="over18True" type="radio" name="over18" value="true">
+              <label for="over18True">Yes</label>
+            </div>
+
+            <div class="multiple-choice">
+              <input id="over18False" type="radio" name="over18" value="false">
+              <label for="over18False">No</label>
+            </div>
 
           </fieldset>
         </div>

diff --git a/docs/views/examples/elements/radio-buttons-checkboxes.html b/docs/views/examples/elements/radio-buttons-checkboxes.html
@@ -19,76 +19,65 @@ <h1 class="heading-xlarge">
         </h1>
 
         <p>
-          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 <code class="code">.multiple-choice</code> radio buttons and checkboxes, released in GOV.UK elements v3.0.0.
         </p>
 
-        <p>
-          It also demonstrates setting ARIA attributes when showing and hiding additional content.
-        </p>
-
-        <h2 class="heading-large">
-          What is your nationality?
-        </h2>
+        <!-- Copied from https://govuk-elements.herokuapp.com/form-elements/#form-radio-buttons -->
 
-        <p>If you have dual nationality, select all options that are relevant to you.</p>
+        <h2 class="heading-medium">Where do you live?</h2>
 
         <div class="form-group">
           <fieldset>
 
-            <legend class="visuallyhidden">What is your nationality?</legend>
+            <legend class="visually-hidden">Where do you live?</legend>
 
-            <label for="nationality_british" class="block-label">
-              <input type="checkbox" name="nationality_british" value="British" id="nationality_british">
-              British
-            </label>
-
-            <label for="nationality_irish" class="block-label">
-              <input type="checkbox" name="nationality_irish" value="Irish" id="nationality_irish">
-              Irish
-            </label>
-
-            <label for="nationality_other" class="block-label" data-target="example_nationality_other">
-              <input type="checkbox" name="nationality_other" value="Wales" id="nationality_other">
-              Citizen of another country
-            </label>
-
-            <div class="panel panel-border-narrow js-hidden" id="example_nationality_other">
-              <label for="nationality_other_countries" class="form-label">
-                Country name
-              </label>
-              <input class="form-control" type="text" id="nationality_other_countries">
+            <div class="multiple-choice">
+              <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
+              <label for="radio-1">Northern Ireland</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
+              <label for="radio-2">Isle of Man or the Channel Islands</label>
+            </div>
+            <p class="form-block">or</p>
+            <div class="multiple-choice">
+              <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
+              <label for="radio-3">I am a British citizen living abroad</label>
             </div>
 
           </fieldset>
         </div>
 
-        <h2 class="heading-large">
-          Which part of the Housing Act was your licence isued under?
-        </h2>
+        <!-- Copied from https://govuk-elements.herokuapp.com/form-elements/#form-toggle-content-checkboxes -->
 
+        <h2 class="heading-medium">
+          What is your nationality?
+        </h2>
         <p>
-          Select one of the options below.
+          Select all options that are relevant to you.
         </p>
 
         <div class="form-group">
           <fieldset>
 
-            <legend class="visuallyhidden">
-              Which part of the Housing Act was your licence isued under?
-            </legend>
-
-            <label for="radio-part-2" class="block-label">
-              <input id="radio-part-2" type="radio" name="housing-act" value="Part 2">
-              <span class="heading-small">Part 2 of the Housing Act 2004</span><br>
-              For properties that are 3 or more stories high and occupied by 5 or more people
-            </label>
-
-            <label for="radio-part-3" class="block-label">
-              <input id="radio-part-3" type="radio" name="housing-act" value="Part 3">
-              <span class="heading-small">Part 3 of the Housing Act 2004</span><br>
-              For properties that are within a geographical area defined by a local council
-            </label>
+            <legend class="visually-hidden">What is your nationality?</legend>
+
+            <div class="multiple-choice">
+              <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
+              <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
+              <label for="nationalities-irish">Irish</label>
+            </div>
+            <div class="multiple-choice" data-target="example-different-country">
+              <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
+              <label for="nationalities-other">Citizen of a different country</label>
+            </div>
+            <div class="panel panel-border-narrow js-hidden" id="example-different-country">
+              <label class="form-label" for="nationalities-other-country">Country name</label>
+              <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
+            </div>
 
           </fieldset>
         </div>

diff --git a/docs/views/examples/elements/toggled-content.html b/docs/views/examples/elements/toggled-content.html
@@ -21,32 +21,30 @@ <h1 class="heading-xlarge">
         <p>
           This page shows how to use the <code class="code">data-target</code> attribute to show and hide content when a radio button or checkbox is selected.
         </p>
+        <p>
+          These examples require show-hide-content.js - updated in GOV.UK frontend toolkit v5.1.2.
+        </p>
 
         <div class="form-group">
           <fieldset>
 
-            <legend class="visuallyhidden">What is your nationality?</legend>
-
-            <label class="block-label" for="nationality_british">
-              <input type="checkbox" name="nationality_british" value="British" id="nationality_british">
-              British
-            </label>
+            <legend class="visually-hidden">What is your nationality?</legend>
 
-            <label class="block-label" for="nationality_irish">
-              <input type="checkbox" name="nationality_irish" value="Irish" id="nationality_irish">
-              Irish
-            </label>
-
-            <label class="block-label" for="nationality_other" data-target="example_nationality_other">
-              <input type="checkbox" name="nationality_other" value="Wales" id="nationality_other">
-              Citizen of another country
-            </label>
-
-            <div class="panel panel-border-narrow js-hidden" id="example_nationality_other">
-              <label class="form-label" for="nationality_other_countries">
-                Country name
-              </label>
-              <input class="form-control" type="text" id="nationality_other_countries">
+            <div class="multiple-choice">
+              <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
+              <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
+              <label for="nationalities-irish">Irish</label>
+            </div>
+            <div class="multiple-choice" data-target="example-different-country">
+              <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
+              <label for="nationalities-other">Citizen of a different country</label>
+            </div>
+            <div class="panel panel-border-narrow js-hidden" id="example-different-country">
+              <label class="form-label" for="nationalities-other-country">Country name</label>
+              <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
             </div>
 
           </fieldset>
@@ -63,15 +61,14 @@ <h1 class="heading-large">
               Where should we send your new passport?
             </legend>
 
-            <label class="block-label" for="radio-home-address" >
-              <input id="radio-home-address" type="radio" name="radio-indent-group" value="Yes">
-              Home address
-            </label>
-
-            <label class="block-label" for="radio-other-address" data-target="example-other-address">
-              <input id="radio-other-address" type="radio" name="radio-indent-group" value="No">
-              Other address
-            </label>
+            <div class="multiple-choice">
+              <input id="radio-home-address" type="radio" name="radio-indent-group" value="Home">
+              <label for="radio-home-address">Home address</label>
+            </div>
+            <div class="multiple-choice" data-target="example-other-address">
+              <input id="radio-other-address" type="radio" name="radio-indent-group" value="Other">
+              <label for="radio-other-address">Other address</label>
+            </div>
 
             <div class="panel panel-border-narrow js-hidden" id="example-other-address">
 
@@ -81,7 +78,7 @@ <h2 class="heading-medium">
 
               <fieldset>
 
-                <legend class="visuallyhidden">
+                <legend class="visually-hidden">
                   Your other address
                 </legend>
 

diff --git a/docs/views/includes/scripts.html b/docs/views/includes/scripts.html
@@ -1,7 +1,6 @@
 <!-- Javascript -->
 <script src="/public/javascripts/details.polyfill.js"></script>
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
-<script src="/public/javascripts/govuk/selection-buttons.js"></script>
 <script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
 <script src="/public/javascripts/govuk/show-hide-content.js"></script>
 <script src="/public/javascripts/docs.js"></script>
diff --git 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",