From 583a925e89edc4f2951be8f75be4e42dfd0f0f04 Mon Sep 17 00:00:00 2001 From: Katie Smith Date: Wed, 5 Feb 2020 17:22:52 +0000 Subject: [PATCH] Add buttons for list entries 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). --- app/assets/javascripts/listEntry.js | 10 ++--- app/assets/stylesheets/app.scss | 4 ++ .../stylesheets/components/list-entry.scss | 20 +++++----- tests/javascripts/listEntry.test.js | 38 +++++++++---------- 4 files changed, 38 insertions(+), 34 deletions(-) diff --git a/app/assets/javascripts/listEntry.js b/app/assets/javascripts/listEntry.js index 211d42764..cca48c9c0 100644 --- a/app/assets/javascripts/listEntry.js +++ b/app/assets/javascripts/listEntry.js @@ -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}}' + '' ); ListEntry.prototype.addButtonTemplate = Hogan.compile( - '' + '' ); 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)); }; diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index c195d3eed..58664ed16 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -220,3 +220,7 @@ details .arrow { .heading-upcoming-jobs { margin-top: $gutter-half; } + +.button-secondary { + @include button($grey-3); +} diff --git a/app/assets/stylesheets/components/list-entry.scss b/app/assets/stylesheets/components/list-entry.scss index 7bc67d355..b4927b2e4 100644 --- a/app/assets/stylesheets/components/list-entry.scss +++ b/app/assets/stylesheets/components/list-entry.scss @@ -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); } diff --git a/tests/javascripts/listEntry.test.js b/tests/javascripts/listEntry.test.js index dd58bdeb3..03f18e737 100644 --- a/tests/javascripts/listEntry.test.js +++ b/tests/javascripts/listEntry.test.js @@ -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(); }); });