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

@@ -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));
   };

app/assets/stylesheets/app.scss

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

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);
 }