Merge pull request #259 from AtlasOfLivingAustralia/feature/issue258

Updated to bs4 styles #258

grails-app/assets/components/javascript/multi-input.js

@@ -3,6 +3,7 @@ ko.components.register('multi-input', {
         var self = this;
 
         self.observableValues = ko.observableArray();
+        self.addValueText = params.addValueText;
 
         // This method updates the values parameter with the contents of the managed array.
         function syncValues() {

grails-app/assets/components/template/multi-input.html

@@ -1,8 +1,11 @@
 <div data-bind="foreach: observableValues">
-    <div class="input-append">
-        <span data-bind="template:{nodes:$componentTemplateNodes}"></span><span class="add-on"
-                                                                                data-bind="click:$parent.removeValue"><i
-            class="fa fa-remove"></i></span>
+    <div class="input-group mb-1">
+        <!-- ko template: { nodes: $componentTemplateNodes } -->
+        <!-- /ko -->
+        <div class="input-group-append">
+            <span class="input-group-text" data-bind="click:$parent.removeValue"><i class="fa fa-remove"></i></span>
+        </div>
+
     </div>
 </div>
-<i class="fa fa-plus" data-bind="click:addValue"></i>
+<span><i class="fa fa-plus" data-bind="click:addValue"></i> <span data-bind="text:addValueText || 'Click to add'"></span></span>

package.json

@@ -21,7 +21,7 @@
     "@turf/convex": "^6.0.2",
     "@turf/length": "^6.0.2",
     "@turf/simplify": "^5.1.5",
-    "chromedriver": "125.0.3",
+    "chromedriver": "127.0.3",
     "geojson2svg": "^1.2.3",
     "handlebars": "^4.7.7",
     "jasmine-ajax": "^4.0.0",

src/integration-test/groovy/pages/MultiInput.groovy

@@ -6,6 +6,6 @@ class MultiInput extends Module {
     static content = {
         addItem(required: true) { $("multi-input i.fa-plus.fa") }
         inputItem(required: false) { $("multi-input input") }
-        removeItem(required: false) { $("multi-input span.add-on") }
+        removeItem(required: false) { $("multi-input span.input-group-text") }
     }
 }