darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-06 18:48:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update file upload component to use govuk-frontend buttons

Browse Source
This commit is contained in:
Katie Smith
2020-02-06 13:35:08 +00:00
parent 2cbfaf1b6f
commit e53c5e17b3
4 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/fileUpload.js
View File

@@ -6,13 +6,17 @@
this.submit = () => this.$form.trigger('submit'); this.submit = () => this.$form.trigger('submit');
this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(` 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.start = function(component) {
this.$form = $(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 // Clear the form if the user navigates back to the page
$(window).on("pageshow", () => this.$form[0].reset()); $(window).on("pageshow", () => this.$form[0].reset());

12
app/assets/stylesheets/components/file-upload.scss
View File

@@ -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 { &-filename {
@include bold-19; @include bold-19;
display: inline-block; display: inline-block;

4
app/templates/components/file-upload.html
View File

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

2
tests/javascripts/fileUpload.test.js
View File

@@ -26,7 +26,7 @@ describe('File upload', () => {
Upload logo Upload logo
</label> </label>
<label class="file-upload-filename" for="file"></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>`;
form = document.querySelector('form'); form = document.querySelector('form');