Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use GOV.UK elements v3.0.1 #364

Merged
merged 7 commits into from
Mar 21, 2017
Merged

Use GOV.UK elements v3.0.1 #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c051566
Update govuk-elements-sass to 3.0.1
gemmaleigh Mar 21, 2017
e012196
Remove DEPRECATED selection-buttons.js
gemmaleigh Mar 21, 2017
1e9d3d8
Update the radio buttons and checkboxes example page
gemmaleigh Mar 21, 2017
da3fdfc
Replace .block-label with .multiple-choice
gemmaleigh Mar 21, 2017
496497a
Add a .form-section wrapper to examples
gemmaleigh Mar 21, 2017
90e1a4a
Mention requirement for show-hide-content.js
gemmaleigh Mar 21, 2017
8972fc5
Fix radios and checkbox example page
gemmaleigh Mar 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions app/assets/javascripts/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
1 change: 0 additions & 1 deletion app/views/includes/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 1 addition & 6 deletions docs/assets/javascripts/docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
18 changes: 9 additions & 9 deletions docs/views/examples/branching.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
89 changes: 39 additions & 50 deletions docs/views/examples/elements/radio-buttons-checkboxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 28 additions & 31 deletions docs/views/examples/elements/toggled-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">

Expand All @@ -81,7 +78,7 @@ <h2 class="heading-medium">

<fieldset>

<legend class="visuallyhidden">
<legend class="visually-hidden">
Your other address
</legend>

Expand Down
1 change: 0 additions & 1 deletion docs/views/includes/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down