darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-09 04:43:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add buttons for list entries

Browse Source 
As part of updating the stylesheet, moved `.button-secondary` to the
global stylesheet, since this is not related to list entries but instead
affects all buttons with that class (this class wlil be removed once all
the buttons are using the new macro).
This commit is contained in:
Katie Smith
2020-02-05 17:22:52 +00:00
parent 4e42fa6f5d
commit 583a925e89
4 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/listEntry.js
View File

@@ -11,7 +11,7 @@
if (!idPattern) { return false; }
this.idPattern = idPattern;
this.elementSelector = '.list-entry, .list-entry-remove, .list-entry-add';
this.elementSelector = '.list-entry, .input-list__button--remove, .input-list__button--add';
this.entries = [];
this.$wrapper = $elm;
this.minEntries = 2;
@@ -37,14 +37,14 @@
' {{{sharedAttributes}}}' +
'/>' +
'{{#button}}' +
'<button type="button" class="button-secondary list-entry-remove">' +
'<button type="button" class="govuk-button govuk-button--secondary input-list__button--remove">' +
'Remove<span class="govuk-visually-hidden"> {{listItemName}} number {{number}}</span>' +
'</button>' +
'{{/button}}' +
'</div>'
);
ListEntry.prototype.addButtonTemplate = Hogan.compile(
'<button type="button" class="button-secondary list-entry-add">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
'<button type="button" class="govuk-button govuk-button--secondary input-list__button--add">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
);
ListEntry.prototype.getSharedAttributes = function () {
var $inputs = this.$wrapper.find('input'),
@@ -126,10 +126,10 @@
}
};
ListEntry.prototype.bindEvents = function () {
this.$wrapper.on('click', '.list-entry-remove', function (e) {
this.$wrapper.on('click', '.input-list__button--remove', function (e) {
this.removeEntry($(e.target));
}.bind(this));
this.$wrapper.on('click', '.list-entry-add', function (e) {
this.$wrapper.on('click', '.input-list__button--add', function (e) {
this.addEntry();
}.bind(this));
};

4
app/assets/stylesheets/app.scss
View File

@@ -220,3 +220,7 @@ details .arrow {
.heading-upcoming-jobs {
margin-top: $gutter-half;
}
.button-secondary {
@include button($grey-3);
}

20
app/assets/stylesheets/components/list-entry.scss
View File

@@ -6,8 +6,12 @@
position: relative;
}
.list-entry-remove {
@include core-19;
&__button--remove,
&__button--add {
width: auto;
}
&__button--remove {
display: block;
margin-bottom: 15px;
margin-top: 5px;
@@ -23,6 +27,10 @@
}
}
&__button--add {
margin: 0 0 20px 0;
}
.form-control {
padding-left: 1.84em;
width: 100%;
@@ -45,12 +53,4 @@
pointer-events: none;
}
.list-entry-add {
@include core-19;
margin: 0 0 20px 0;
}
}
.button-secondary {
@include button($grey-3);
}

38
tests/javascripts/listEntry.test.js
View File

@@ -104,7 +104,7 @@ describe("List entry", () => {
// start module
window.GOVUK.modules.start();
// re-select fields, based on updated DOM
fields = inputList.querySelectorAll('.list-entry input[type=text]');
@@ -125,7 +125,7 @@ describe("List entry", () => {
// re-select fields, based on updated DOM
fields = inputList.querySelectorAll('.list-entry input[type=text]');
expect(fields.length).toEqual(2);
expect(fields[1].getAttribute('value')).toEqual(domains[1]);
@@ -160,9 +160,9 @@ describe("List entry", () => {
inputList.querySelectorAll('.list-entry').forEach((listEntry, idx) => {
if (idx === 0) {
expect(listEntry.querySelector('.list-entry-remove')).toBeNull();
expect(listEntry.querySelector('.input-list__button--remove')).toBeNull();
} else {
expect(listEntry.querySelector('.list-entry-remove')).not.toBeNull();
expect(listEntry.querySelector('.input-list__button--remove')).not.toBeNull();
}
});
@@ -211,7 +211,7 @@ describe("List entry", () => {
test("Should remove the associated field", () => {
triggerEvent(inputList.querySelectorAll('.list-entry-remove')[0], 'click');
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[0], 'click');
// list started with 10 fields
expect(inputList.querySelectorAll('.list-entry').length).toEqual(9);
@@ -220,7 +220,7 @@ describe("List entry", () => {
test("Should leave the list with the right numbers", () => {
triggerEvent(inputList.querySelectorAll('.list-entry-remove')[0], 'click');
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[0], 'click');
const newNums = Array.from(
inputList.querySelectorAll('.text-box-number-label')
@@ -236,7 +236,7 @@ describe("List entry", () => {
test("Should leave the list with the right values if you remove the last one", () => {
// the first list item doesn't have a 'remove' button so there are only 9 for 10 items
triggerEvent(inputList.querySelectorAll('.list-entry-remove')[8], 'click');
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[8], 'click');
// the items have their values set to the 10 domains
const expectedValues = domains.slice(0, -1);
@@ -252,7 +252,7 @@ describe("List entry", () => {
test("Should leave the list with the right values if you remove the second one", () => {
// the first 'remove' button is attached to the second list item
triggerEvent(inputList.querySelectorAll('.list-entry-remove')[0], 'click');
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[0], 'click');
// the items have their values set to the 10 domains
const expectedValues = domains.slice();
@@ -270,10 +270,10 @@ describe("List entry", () => {
test("Should add the 'add' button if the added question is the 10th field", () => {
triggerEvent(inputList.querySelectorAll('.list-entry-remove')[8], 'click');
expect(inputList.querySelector('.list-entry-add')).not.toBeNull();
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[8], 'click');
expect(inputList.querySelector('.input-list__button--add')).not.toBeNull();
});
});
@@ -285,7 +285,7 @@ describe("List entry", () => {
// start module
window.GOVUK.modules.start();
triggerEvent(inputList.querySelector('.list-entry-add'), 'click');
triggerEvent(inputList.querySelector('.input-list__button--add'), 'click');
// inputList defaults to 2 items
expect(inputList.querySelectorAll('.list-entry').length).toEqual(3);
@@ -296,9 +296,9 @@ describe("List entry", () => {
// start module
window.GOVUK.modules.start();
triggerEvent(inputList.querySelectorAll('.list-entry-remove')[0], 'click');
triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[0], 'click');
expect(inputList.querySelector('.list-entry-add').textContent.trim())
expect(inputList.querySelector('.input-list__button--add').textContent.trim())
.toEqual('Add another domain (9 remaining)');
});
@@ -307,9 +307,9 @@ describe("List entry", () => {
// start module
window.GOVUK.modules.start();
triggerEvent(inputList.querySelector('.list-entry-add'), 'click');
triggerEvent(inputList.querySelector('.input-list__button--add'), 'click');
expect(inputList.querySelector('.list-entry-add').textContent.trim())
expect(inputList.querySelector('.input-list__button--add').textContent.trim())
.toEqual('Add another domain (7 remaining)');
});
@@ -320,9 +320,9 @@ describe("List entry", () => {
// start module
window.GOVUK.modules.start();
triggerEvent(inputList.querySelector('.list-entry-add'), 'click');
triggerEvent(inputList.querySelector('.input-list__button--add'), 'click');
expect(inputList.querySelector('.list-entry-add')).toBeNull();
expect(inputList.querySelector('.input-list__button--add')).toBeNull();
});
});