darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-06 20:58:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update radio-select to use govuk-frontend buttons

Browse Source
This commit is contained in:
Katie Smith
2020-02-06 14:49:07 +00:00
parent 0d0b71af63
commit e53a97423b
3 changed files with 48 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/javascripts/radioSelect.js
View File

@@ -7,43 +7,43 @@
let states = { let states = {
'initial': Hogan.compile(` 'initial': Hogan.compile(`
<div class="radio-select-column"> <div class="radio-select__column">
<div class="multiple-choice js-multiple-choice"> <div class="multiple-choice js-multiple-choice">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value=""> <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="block-label js-block-label" for="{{name}}-0">Now</label> <label class="block-label js-block-label" for="{{name}}-0">Now</label>
</div> </div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select__column">
{{#categories}} {{#categories}}
<input type='button' class='js-category-button' value='{{.}}' /> <input type='button' class='govuk-button govuk-button--secondary radio-select__button--category' value='{{.}}' />
{{/categories}} {{/categories}}
</div> </div>
`), `),
'choose': Hogan.compile(` 'choose': Hogan.compile(`
<div class="radio-select-column"> <div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option"> <div class="multiple-choice js-multiple-choice js-initial-option">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value=""> <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label> <label for="{{name}}-0">Now</label>
</div> </div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select__column">
{{#choices}} {{#choices}}
<div class="multiple-choice js-multiple-choice js-option"> <div class="multiple-choice js-multiple-choice js-option">
<input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" /> <input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label for="{{id}}">{{label}}</label> <label for="{{id}}">{{label}}</label>
</div> </div>
{{/choices}} {{/choices}}
<input type='button' class='js-done-button js-done-button-block' value='Done' /> <input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' value='Done' />
</div> </div>
`), `),
'chosen': Hogan.compile(` 'chosen': Hogan.compile(`
<div class="radio-select-column"> <div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option"> <div class="multiple-choice js-multiple-choice js-initial-option">
<input id="{{name}}-0" name="{{name}}" type="radio" value=""> <input id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label> <label for="{{name}}-0">Now</label>
</div> </div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select__column">
{{#choices}} {{#choices}}
<div class="multiple-choice js-multiple-choice"> <div class="multiple-choice js-multiple-choice">
<input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" /> <input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
@@ -51,8 +51,8 @@
</div> </div>
{{/choices}} {{/choices}}
</div> </div>
<div class="radio-select-column"> <div class="radio-select__column">
<input type='button' class='category-link js-reset-button' value='Choose a different time' /> <input type='button' class='govuk-button govuk-button--secondary radio-select__button--reset' value='Choose a different time' />
</div> </div>
`) `)
}; };
@@ -110,7 +110,7 @@
}; };
$component $component
.on('click', '.js-category-button', function(event) { .on('click', '.radio-select__button--category', function(event) {
event.preventDefault(); event.preventDefault();
let wordsInDay = $(this).attr('value').split(' '); let wordsInDay = $(this).attr('value').split(' ');
@@ -143,7 +143,7 @@
selectOption(value); selectOption(value);
}) })
.on('click', '.js-done-button', function(event) { .on('click', '.radio-select__button--done', function(event) {
event.preventDefault(); event.preventDefault();
let $selection = $('input[type=radio]:checked', this.parentNode); let $selection = $('input[type=radio]:checked', this.parentNode);
@@ -164,7 +164,7 @@
focusSelected(component); focusSelected(component);
}) })
.on('click', '.js-reset-button', function(event) { .on('click', '.radio-select__button--reset', function(event) {
event.preventDefault(); event.preventDefault();
reset(); reset();

18
app/assets/stylesheets/components/radios.scss
View File

@@ -2,7 +2,7 @@
min-height: 39px; min-height: 39px;
&-column { &__column {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@@ -14,25 +14,23 @@
} }
.js-done-button, &__button--category {
.js-category-button,
.js-reset-button {
@include button($grey-3); margin-right: govuk-spacing(3);
margin-right: $gutter-half; width: auto;
} }
.js-done-button-block { &__button--done {
display: block; display: block;
clear: both; clear: both;
margin: 0 0 $gutter 0; margin: 0 0 govuk-spacing(6) 0;
position: relative; position: relative;
top: $gutter-half; top: govuk-spacing(3);
&:active { &:active {
top: $gutter-half + 2px; top: govuk-spacing(3) + 2px;
} }
} }

54
tests/javascripts/radioSelect.test.js
View File

@@ -29,7 +29,7 @@ describe('RadioSelect', () => {
const clickButtonForCategory = (category) => { const clickButtonForCategory = (category) => {
// click the button for this category // click the button for this category
const categoryButton = document.querySelector(`.radio-select-column:nth-child(2) input[value="${category}"]`); const categoryButton = document.querySelector(`.radio-select__column:nth-child(2) input[value="${category}"]`);
helpers.triggerEvent(categoryButton, 'click'); helpers.triggerEvent(categoryButton, 'click');
}; };
@@ -100,7 +100,7 @@ describe('RadioSelect', () => {
When should Notify send these messages? When should Notify send these messages?
</legend> </legend>
<div class="radio-select" data-module="radio-select" data-categories="${CATEGORIES.join(',')}"> <div class="radio-select" data-module="radio-select" data-categories="${CATEGORIES.join(',')}">
<div class="radio-select-column"> <div class="radio-select__column">
<div class="multiple-choice"> <div class="multiple-choice">
<input checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value=""> <input checked="" id="scheduled_for-0" name="scheduled_for" type="radio" value="">
<label for="scheduled_for-0"> <label for="scheduled_for-0">
@@ -108,13 +108,13 @@ describe('RadioSelect', () => {
</label> </label>
</div> </div>
</div> </div>
<div class="radio-select-column"> <div class="radio-select__column">
${options()} ${options()}
</div> </div>
</div> </div>
</fieldset>`; </fieldset>`;
originalOptionsForAllCategories = Array.from(document.querySelector('.radio-select-column:nth-child(2) .multiple-choice')) originalOptionsForAllCategories = Array.from(document.querySelector('.radio-select__column:nth-child(2) .multiple-choice'))
.map(option => getDataFromOption(option)); .map(option => getDataFromOption(option));
}); });
@@ -131,7 +131,7 @@ describe('RadioSelect', () => {
// start module // start module
window.GOVUK.modules.start(); window.GOVUK.modules.start();
categoryButtons = document.querySelectorAll('.radio-select-column:nth-child(2) .js-category-button'); categoryButtons = document.querySelectorAll('.radio-select__column:nth-child(2) .radio-select__button--category');
}); });
@@ -147,7 +147,7 @@ describe('RadioSelect', () => {
CATEGORIES.forEach((category, idx) => { CATEGORIES.forEach((category, idx) => {
expect(categoryButtons[idx].getAttribute('value')).toEqual(category); expect(categoryButtons[idx].getAttribute('value')).toEqual(category);
}); });
}); });
}); });
@@ -167,18 +167,18 @@ describe('RadioSelect', () => {
window.GOVUK.modules.start(); window.GOVUK.modules.start();
clickButtonForCategory(category); clickButtonForCategory(category);
}); });
test("show the options for it, with the right label and value", () => { test("show the options for it, with the right label and value", () => {
// check options this reveals against those originally in the page for this category // check options this reveals against those originally in the page for this category
const options = document.querySelector('.radio-select-column:nth-child(2) .multiple-choice'); const options = document.querySelector('.radio-select__column:nth-child(2) .multiple-choice');
const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => { const optionsThatMatchOriginals = Array.from(options).filter((option, idx) => {
const optionData = getDataFromOption(option); const optionData = getDataFromOption(option);
const originalOption = originalOptionsForCategory[idx]; const originalOption = originalOptionsForCategory[idx];
return optionData.value === originalOption.value && optionData.label === originalOption.label; return optionData.value === originalOption.value && optionData.label === originalOption.label;
}); });
@@ -203,7 +203,7 @@ describe('RadioSelect', () => {
clickButtonForCategory(CATEGORIES[0]); clickButtonForCategory(CATEGORIES[0]);
const button = document.querySelector('.radio-select-column:nth-child(2) input[type=button]'); const button = document.querySelector('.radio-select__column:nth-child(2) input[type=button]');
expect(button).not.toBeNull(); expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Done'); expect(button.getAttribute('value')).toEqual('Done');
@@ -231,7 +231,7 @@ describe('RadioSelect', () => {
beforeEach(() => { beforeEach(() => {
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
const firstOption = optionsColumn.querySelector('input[type=radio]'); const firstOption = optionsColumn.querySelector('input[type=radio]');
firstOptionLabel = firstOption.parentNode.querySelector('label').textContent.trim(); firstOptionLabel = firstOption.parentNode.querySelector('label').textContent.trim();
@@ -243,7 +243,7 @@ describe('RadioSelect', () => {
test("remove all the other options", () => { test("remove all the other options", () => {
// module replaces the column node so this needs querying again // module replaces the column node so this needs querying again
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1); expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(firstOptionLabel); expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(firstOptionLabel);
@@ -252,7 +252,7 @@ describe('RadioSelect', () => {
test("add a button for choosing a different time", () => { test("add a button for choosing a different time", () => {
const button = document.querySelector('.radio-select-column:nth-child(3) input[type=button]'); const button = document.querySelector('.radio-select__column:nth-child(3) input[type=button]');
expect(button).not.toBeNull(); expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Choose a different time'); expect(button.getAttribute('value')).toEqual('Choose a different time');
@@ -261,7 +261,7 @@ describe('RadioSelect', () => {
test("focus the selected option", () => { test("focus the selected option", () => {
selectedOption = document.querySelector('.radio-select-column:nth-child(2) input[checked=checked]'); selectedOption = document.querySelector('.radio-select__column:nth-child(2) input[checked=checked]');
expect(document.activeElement).toBe(selectedOption); expect(document.activeElement).toBe(selectedOption);
@@ -276,7 +276,7 @@ describe('RadioSelect', () => {
beforeEach(() => { beforeEach(() => {
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
const options = optionsColumn.querySelectorAll('input[type=radio]'); const options = optionsColumn.querySelectorAll('input[type=radio]');
secondOptionLabel = options[1].parentNode.querySelector('label').textContent.trim(); secondOptionLabel = options[1].parentNode.querySelector('label').textContent.trim();
@@ -288,7 +288,7 @@ describe('RadioSelect', () => {
test("remove all the other options", () => { test("remove all the other options", () => {
// module replaces the column node so this needs querying again // module replaces the column node so this needs querying again
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1); expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel); expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel);
@@ -297,7 +297,7 @@ describe('RadioSelect', () => {
test("add a button for choosing a different time", () => { test("add a button for choosing a different time", () => {
const button = document.querySelector('.radio-select-column:nth-child(3) input[type=button]'); const button = document.querySelector('.radio-select__column:nth-child(3) input[type=button]');
expect(button).not.toBeNull(); expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Choose a different time'); expect(button.getAttribute('value')).toEqual('Choose a different time');
@@ -313,7 +313,7 @@ describe('RadioSelect', () => {
beforeEach(() => { beforeEach(() => {
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
const options = optionsColumn.querySelectorAll('input[type=radio]'); const options = optionsColumn.querySelectorAll('input[type=radio]');
secondOptionLabel = options[1].parentNode.querySelector('label').textContent.trim(); secondOptionLabel = options[1].parentNode.querySelector('label').textContent.trim();
@@ -339,7 +339,7 @@ describe('RadioSelect', () => {
test("remove all the other options", () => { test("remove all the other options", () => {
// module replaces the column node so this needs querying again // module replaces the column node so this needs querying again
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1); expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel); expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel);
@@ -348,7 +348,7 @@ describe('RadioSelect', () => {
test("add a button for choosing a different time", () => { test("add a button for choosing a different time", () => {
const button = document.querySelector('.radio-select-column:nth-child(3) input[type=button]'); const button = document.querySelector('.radio-select__column:nth-child(3) input[type=button]');
expect(button).not.toBeNull(); expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Choose a different time'); expect(button.getAttribute('value')).toEqual('Choose a different time');
@@ -359,10 +359,10 @@ describe('RadioSelect', () => {
test("clicking the 'Done' button should choose whatever time is selected", () => { test("clicking the 'Done' button should choose whatever time is selected", () => {
let optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); let optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
const secondOption = optionsColumn.querySelectorAll('input[type=radio]')[1]; const secondOption = optionsColumn.querySelectorAll('input[type=radio]')[1];
const secondOptionLabel = document.querySelector('label[for=' + secondOption.getAttribute('id')).textContent.trim(); const secondOptionLabel = document.querySelector('label[for=' + secondOption.getAttribute('id')).textContent.trim();
const doneButton = document.querySelector('.radio-select-column:nth-child(2) input[type=button]'); const doneButton = document.querySelector('.radio-select__column:nth-child(2) input[type=button]');
// select second option // select second option
secondOption.checked = true; secondOption.checked = true;
@@ -370,7 +370,7 @@ describe('RadioSelect', () => {
helpers.triggerEvent(doneButton, 'click'); helpers.triggerEvent(doneButton, 'click');
optionsColumn = document.querySelector('.radio-select-column:nth-child(2)'); optionsColumn = document.querySelector('.radio-select__column:nth-child(2)');
expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1); expect(optionsColumn.querySelectorAll('input[type=radio]').length).toEqual(1);
expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel); expect(optionsColumn.querySelector('label').textContent.trim()).toEqual(secondOptionLabel);
@@ -382,19 +382,19 @@ describe('RadioSelect', () => {
beforeEach(() => { beforeEach(() => {
// select the first option // select the first option
const firstOption = document.querySelector('.radio-select-column:nth-child(2) input[type=radio]'); const firstOption = document.querySelector('.radio-select__column:nth-child(2) input[type=radio]');
helpers.clickElementWithMouse(firstOption); helpers.clickElementWithMouse(firstOption);
// click the 'Choose a different time' button // click the 'Choose a different time' button
const resetButton = document.querySelector('.radio-select-column:nth-child(3) input[type=button]'); const resetButton = document.querySelector('.radio-select__column:nth-child(3) input[type=button]');
helpers.triggerEvent(resetButton, 'click'); helpers.triggerEvent(resetButton, 'click');
}); });
test("reset the module", () => { test("reset the module", () => {
categoryButtons = document.querySelectorAll('.radio-select-column:nth-child(2) .js-category-button'); categoryButtons = document.querySelectorAll('.radio-select__column:nth-child(2) .radio-select__button--category');
expect(categoryButtons.length).toEqual(CATEGORIES.length); expect(categoryButtons.length).toEqual(CATEGORIES.length);