darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-03 07:31:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Only show the folder icon if fields are folders

Browse Source
This commit is contained in:
Tom Byers
2019-05-09 11:04:43 +01:00
parent 3dc2130926
commit 1ffa8c8915
3 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@
this.addFooterAndDoneButton(legendText);
// create summary from component pieces and match text to current selection
this.summary.addContent(legendText);
this.summary.addContent(legendText, this.fieldLabel);
this.summary.update(this.getSelection(), this.total, this.fieldLabel);
this.$fieldset.before(this.summary.$el);
@@ -56,7 +56,7 @@
}
}
},
addContent: function(legendText) {
addContent: function(legendText, fieldLabel) {
const $content = $(`<p>
<span class="selection-summary__text"></span>
<button class="button button-secondary">Change<span class="visuallyhidden"> ${legendText}</span></button>
@@ -65,6 +65,8 @@
this.$text = $content.find('.selection-summary__text');
this.$changeButton = $content.find('button');
if (fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); }
this.$el.append($content);
},
update: function(selection, total, field) {

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

@@ -2,20 +2,23 @@
.selection-summary__text {
display: inline-block;
padding: .526315em .789473em .263157em 40px;
padding-left: 51px;
background-image: file-url('folder-black.svg');
background-repeat: no-repeat;
background-size: 39px auto;
background-position: 0px 4px;
padding: .526315em .789473em .263157em 0px;
&:focus {
outline: none;
}
}
@include ie-lte(8) {
background-image: file-url('folder-blue-bold.png');
.selection-summary__text--folders {
padding-left: 51px;
background-image: file-url('folder-black.svg');
background-repeat: no-repeat;
background-size: 39px auto;
background-position: 0px 4px;
@include ie-lte(8) {
background-image: file-url('folder-blue-bold.png');
}
}
// revert full-width button for smaller screens

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

@@ -99,12 +99,14 @@ describe('Collapsible fieldset', () => {
});
test("adds the right content to the summary", () => {
test("adds the right content and classes to the summary", () => {
const summary = formGroup.querySelector('.selection-summary');
expect(summary.querySelector('p')).not.toBeNull();
expect(summary.querySelector('p .selection-summary__text')).not.toBeNull();
debugger;
expect(summary.querySelector('p .selection-summary__text').classList.contains('selection-summary__text--folders')).toBe(true);
});
@@ -202,6 +204,19 @@ describe('Collapsible fieldset', () => {
});
test("the summary doesn't have a folder icon if fields aren't called 'folder'", () => {
formGroup.dataset.fieldLabel = 'team member';
// start module
window.GOVUK.modules.start();
const summaryText = document.querySelector('.selection-summary__text');
expect(summaryText.classList.contains('.selection-summary__text-label')).toBe(false);
});
describe("when 'change' is clicked", () => {
let changeButton;