Update file upload component to use govuk-frontend buttons

app/assets/javascripts/fileUpload.js

@@ -6,13 +6,17 @@
     this.submit = () => this.$form.trigger('submit');
 
     this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
-      <a href="" class='file-upload-button-cancel'>Cancel upload</a>
+      <a href="" class='govuk-button govuk-button--warning govuk-!-margin-right-1'>Cancel upload</a>
     `);
 
     this.start = function(component) {
 
       this.$form = $(component);
 
+      // The label gets styled like a button and is used to hide the native file upload control. This is so that
+      // users see a button that looks like the others on the site.
+      this.$form.find('label.file-upload-button').addClass('govuk-button govuk-!-margin-right-1');
+
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
 

app/assets/stylesheets/components/file-upload.scss

@@ -28,18 +28,6 @@
 
     }
 
-    &-button {
-      @include button($button-colour);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
-    &-button-cancel {
-      @include button($error-colour);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
     &-filename {
       @include bold-19;
       display: inline-block;

app/templates/components/file-upload.html

@@ -1,3 +1,5 @@
+{% from "components/button/macro.njk" import govukButton %}
+
 {% macro file_upload(
   field,
   action=None,
@@ -35,6 +37,6 @@
     {% endif %}
     <label class="file-upload-filename" for="{{ field.name }}"></label>
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-    <button type="submit" class="file-upload-submit">Submit</button>
+    {{ govukButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
   </form>
 {% endmacro %}

tests/javascripts/fileUpload.test.js

@@ -26,7 +26,7 @@ describe('File upload', () => {
           Upload logo
         </label>
         <label class="file-upload-filename" for="file"></label>
-        <button type="submit" class="file-upload-submit">Submit</button>
+        <button type="submit" class="govuk-button file-upload-submit">Submit</button>
       </form>`;
 
     form = document.querySelector('form');