Migrate GOV.UK components to USWDS

- Convert previous/next navigation to USWDS pagination component
  - Update radio buttons and checkboxes to use USWDS classes
  - Migrate guest list inputs with proper USWDS styling
  - Replace GOV.UK button patterns with USWDS button variants
  - Update form field spacing to use USWDS utilities
  - Scope fieldset legend styles to specific form contexts
  - Update visual regression test references for new components

app/assets/javascripts/listEntry.js

@@ -17,6 +17,7 @@
     this.minEntries = 2;
     this.listItemName = this.$wrapper.data('listItemName');
     this.getSharedAttributes();
+    this.getOriginalClasses();
 
     this.getValues();
     this.maxEntries = this.entries.length;
@@ -26,30 +27,31 @@
   };
   ListEntry.optionalAttributes = ['aria-describedby'];
   ListEntry.prototype.entryTemplate = Hogan.compile(
-    '<div class="list-entry">' +
-      '<label for="{{{id}}}" class="govuk-input--numbered__label">' +
+    '<div class="list-entry margin-bottom-2">' +
+      '<label for="{{{id}}}" class="usa-label">' +
         '<span class="usa-sr-only">{{listItemName}} number </span>{{number}}.' +
       '</label>' +
       '<input' +
+        ' class="usa-input {{classes}}"' +
         ' name="{{name}}"' +
         ' id="{{id}}"' +
         ' {{#value}}value="{{value}}{{/value}}"' +
         ' {{{sharedAttributes}}}' +
       '/>' +
       '{{#button}}' +
-        '<button type="button" class="usa-button input-list__button--remove">' +
+        '<button type="button" class="usa-button--unstyled text-primary margin-top-1 input-list__button--remove">' +
           'Remove<span class="usa-sr-only"> {{listItemName}} number {{number}}</span>' +
         '</button>' +
       '{{/button}}' +
     '</div>'
   );
   ListEntry.prototype.addButtonTemplate = Hogan.compile(
-    '<button type="button" class="usa-button input-list__button--add">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
+    '<button type="button" class="usa-button usa-button--outline input-list__button--add margin-top-2">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
   );
   ListEntry.prototype.getSharedAttributes = function () {
     var $inputs = this.$wrapper.find('input'),
         attributeTemplate = Hogan.compile(' {{name}}="{{value}}"'),
-        generatedAttributes = ['id', 'name', 'value'],
+        generatedAttributes = ['id', 'name', 'value', 'class'],
         attributes = [],
         attrIdx,
         elmAttributes,
@@ -94,6 +96,27 @@
 
     this.sharedAttributes = (attributes.length) ? getAttributesHTML(attributes) : '';
   };
+  ListEntry.prototype.getOriginalClasses = function () {
+    var $firstInput = this.$wrapper.find('input').first();
+    if ($firstInput.length) {
+      var classList = $firstInput.attr('class');
+      if (classList) {
+        // Remove any GOV.UK or USA numbered classes, keep others
+        this.additionalClasses = classList
+          .split(' ')
+          .filter(function(cls) {
+            return cls &&
+                   !cls.match(/^(govuk-input|usa-input)/) &&
+                   cls !== 'usa-input--numbered';
+          })
+          .join(' ');
+      } else {
+        this.additionalClasses = '';
+      }
+    } else {
+      this.additionalClasses = '';
+    }
+  };
   ListEntry.prototype.getValues = function () {
     this.entries = [];
     this.$wrapper.find('input').each(function (idx, elm) {
@@ -182,7 +205,8 @@
             'name' : this.getId(entryNumber),
             'value' : entry,
             'listItemName' : this.listItemName,
-            'sharedAttributes': this.sharedAttributes
+            'sharedAttributes': this.sharedAttributes,
+            'classes': this.additionalClasses
           };
 
       if (entryNumber > 1) {

app/assets/javascripts/main.js

@@ -7,9 +7,6 @@ $(() => GOVUK.modules.start());
 
 $(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
 
-$(() => $('.govuk-header__container').on('click', function() {
-  $(this).css('border-color', '#005ea5');
-}));
 
 // Applies our expanded focus style to the siblings of links when that link is wrapped in a heading.
 //

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -1092,3 +1092,8 @@ nav.nav {
 .selection-content .usa-form-group--nested li.usa-checkbox {
   margin-top: 0;
 }
+
+// Global styling for radio button legends
+fieldset legend.usa-legend {
+  font-weight: 700;
+}