Merge pull request #3554 from alphagov/convert-single-line-textboxes-to-govuk-frontend

Convert single line textboxes to govuk frontend

app/assets/javascripts/colourPreview.js

@@ -8,9 +8,9 @@
 
     this.start = component => {
 
-      this.$input = $('input', component);
+      this.$input = $(component);
 
-      $(component).append(
+      this.$input.closest('.govuk-form-group').append(
         this.$preview = $('<span class="textbox-colour-preview"></span>')
       );
 

app/assets/javascripts/listEntry.js

@@ -27,13 +27,13 @@
   ListEntry.optionalAttributes = ['aria-describedby'];
   ListEntry.prototype.entryTemplate = Hogan.compile(
     '<div class="list-entry">' +
-      '<label for="{{{id}}}" class="text-box-number-label">' +
+      '<label for="{{{id}}}" class="govuk-input--numbered__label">' +
         '<span class="govuk-visually-hidden">{{listItemName}} number </span>{{number}}.' +
       '</label>' +
       '<input' +
-        ' name="{{name}}-{{index}}"' +
+        ' name="{{name}}"' +
         ' id="{{id}}"' +
-        ' value="{{value}}"' +
+        ' {{#value}}value="{{value}}{{/value}}"' +
         ' {{{sharedAttributes}}}' +
       '/>' +
       '{{#button}}' +
@@ -122,7 +122,7 @@
     if ("undefined" === typeof num) {
       return pattern;
     } else {
-      return "input-" + pattern + "-" + num;
+      return pattern + "-" + num;
     }
   };
   ListEntry.prototype.bindEvents = function () {
@@ -179,7 +179,7 @@
             'id' : this.getId(entryNumber),
             'number' : entryNumber,
             'index': idx,
-            'name' : this.getId(),
+            'name' : this.getId(entryNumber),
             'value' : entry,
             'listItemName' : this.listItemName,
             'sharedAttributes': this.sharedAttributes

app/assets/stylesheets/components/list-entry.scss

@@ -4,6 +4,11 @@
     vertical-align: middle;
     margin-bottom: 15px;
     position: relative;
+
+    // move the left border, signifying the error, out of the main column
+    .govuk-form-group--error {
+      margin-left: ($govuk-border-width + $govuk-gutter-half) * -1;
+    }
   }
 
   &__button--remove,
@@ -31,26 +36,4 @@
     margin: 0 0 20px 0;
   }
 
-  .form-control {
-    padding-left: 1.84em;
-    width: 100%;
-    margin-bottom: 0;
-
-    @include media(desktop) {
-      @include inline-block;
-    }
-  }
-
-  .text-box-number-label {
-    @include core-19;
-    float: left;
-    width: 1.6em;
-    margin: 6px -1.6em 0 0;
-    position: relative;
-    left: 10px;
-    color: $secondary-text-colour;
-    font-weight: bold;
-    pointer-events: none;
-  }
-
 }

app/assets/stylesheets/components/page-footer.scss

@@ -53,11 +53,11 @@
 .search-form__button {
   @include media(desktop) {
     position: relative;
-    top: 32px;
+    top: 30px;
     left: -30px;
     width: 100%;
     margin-right: -30px;
-    padding-top: 7px;
+    padding-top: 9px;
     box-sizing: content-box;
 
     &:active {

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -27,6 +27,7 @@ $govuk-assets-path: "/static/";
 @import 'components/details/_details';
 @import 'components/radios/_radios';
 @import 'components/checkboxes/_checkboxes';
+@import 'components/input/_input';
 
 @import "utilities/all";
 @import "overrides/all";

app/assets/stylesheets/govuk-frontend/extensions.scss

@@ -48,3 +48,36 @@ $govuk-grid-widths: (
   seven-eighths: 87.5%,
   full: 100%
 );
+
+.govuk-input--width-6 {
+  max-width: 14ex;
+}
+
+// extensions to govuk-input to allow numbering by label
+.govuk-input--numbered {
+  padding-left: 1.84em;
+
+  @include media(desktop) {
+    @include inline-block;
+  }
+}
+
+.govuk-input--numbered__label {
+  float: left;
+  width: 1.6em;
+  margin: 8px -1.6em 0 0;
+  position: relative;
+  left: 10px;
+  color: $govuk-secondary-text-colour;
+  font-weight: bold;
+  pointer-events: none;
+}
+
+.govuk-input--numbered__label--error {
+  position: absolute;
+  bottom: 10px;
+
+  @include govuk-media-query(desktop) {
+    bottom: 7px;
+  }
+}