darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 11:23:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update buttons for collapsible checkboxes

Browse Source 
We use collapsible checkboxes when setting which folders team members
can see (on the manage folder page and on the edit team member page).
This commit is contained in:
Katie Smith
2020-02-05 11:57:43 +00:00
parent ba8ac41953
commit 4e42fa6f5d
3 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/collapsibleCheckboxes.js
View File

@@ -62,7 +62,7 @@
return $(`<div class="selection-footer${stickyClass}">
<button
class="button button-secondary"
class="govuk-button govuk-button--secondary selection-footer__button"
aria-expanded="${expanded ? 'true' : 'false'}"
aria-controls="${this.fieldsetId}">
${buttonContent}
@@ -159,7 +159,7 @@
CollapsibleCheckboxes.prototype.bindEvents = function() {
const self = this;
this.$formGroup.on('click', '.button', this.handleClick.bind(this));
this.$formGroup.on('click', '.govuk-button', this.handleClick.bind(this));
this.$checkboxes.on('click', this.handleSelection.bind(this));
this.summary.bindEvents(this);

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

@@ -18,14 +18,6 @@
background-position: 0px 4px;
}
// revert full-width button for smaller screens
.button {
display: inline-block;
width: auto;
position: relative;
top: 1px;
}
}
.checkboxes-nested {
@@ -83,12 +75,12 @@
.selection-footer {
clear: both;
}
.button-secondary {
// revert full-width button for smaller screens
display: inline-block;
width: auto;
}
.selection-footer__button {
// revert full-width button for smaller screens
display: inline-block;
width: auto;
}
// styles specific to the collapsible checkboxes module

24
tests/javascripts/collapsibleCheckboxes.test.js
View File

@@ -119,7 +119,7 @@ describe('Collapsible fieldset', () => {
test("has a button to expand the fieldset", () => {
const button = formGroup.querySelector('.button');
const button = formGroup.querySelector('.govuk-button');
expect(button).not.toBeNull();
expect(button.textContent.trim()).toEqual('Choose folders');
@@ -128,7 +128,7 @@ describe('Collapsible fieldset', () => {
test("has the correct aria attributes on the button", () => {
expect(helpers.element(formGroup.querySelector('.button')).hasAttributesSetTo({
expect(helpers.element(formGroup.querySelector('.govuk-button')).hasAttributesSetTo({
'aria-controls': fieldset.getAttribute('id'),
'aria-expanded': 'false'
})).toBe(true);
@@ -205,7 +205,7 @@ describe('Collapsible fieldset', () => {
// start module
window.GOVUK.modules.start();
helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
});
@@ -223,13 +223,13 @@ describe('Collapsible fieldset', () => {
test("it uses ARIA to mark the checkboxes as expanded", () => {
expect(formGroup.querySelector('.button').getAttribute('aria-expanded')).toEqual('true');
expect(formGroup.querySelector('.govuk-button').getAttribute('aria-expanded')).toEqual('true');
});
test("it changes it's text to indicate it's new action", () => {
expect(formGroup.querySelector('.button').textContent.trim()).toEqual("Done choosing folders");
expect(formGroup.querySelector('.govuk-button').textContent.trim()).toEqual("Done choosing folders");
});
@@ -243,10 +243,10 @@ describe('Collapsible fieldset', () => {
window.GOVUK.modules.start();
// show the checkboxes
helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
// click the button
helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
});
@@ -264,13 +264,13 @@ describe('Collapsible fieldset', () => {
test("it uses ARIA to mark the checkboxes as collapsed", () => {
expect(formGroup.querySelector('.button').getAttribute('aria-expanded')).toEqual('false');
expect(formGroup.querySelector('.govuk-button').getAttribute('aria-expanded')).toEqual('false');
});
test("it changes it's text to indicate it's new action", () => {
expect(formGroup.querySelector('.button').textContent.trim()).toEqual("Choose folders");
expect(formGroup.querySelector('.govuk-button').textContent.trim()).toEqual("Choose folders");
});
});
@@ -286,7 +286,7 @@ describe('Collapsible fieldset', () => {
window.GOVUK.modules.start();
// show the checkboxes
helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
});
@@ -300,7 +300,7 @@ describe('Collapsible fieldset', () => {
test("has its stickiness removed when the fieldset is collapsed", () => {
// click the button to collapse the fieldset
helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
expect(window.GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toBe(2);
@@ -311,7 +311,7 @@ describe('Collapsible fieldset', () => {
describe("when the selection changes", () => {
const showCheckboxes = () => {
helpers.triggerEvent(formGroup.querySelector('.button'), 'click');
helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
};
const checkFirstCheckbox = () => {