Add option to File Upload macro to enable JS enhancements

The option also controls the rendering of the translation strings,
as they're not needed if the component does not run JavaScript enhancements.

In the unlikely case that someone would want the translation strings,
but not run our JavaScript enhancements, we could add a new option. In the meantime,
the `attributes` option allows them to manually add the data attributes.

packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml

@@ -77,6 +77,10 @@ params:
             type: string
             required: true
             description: HTML to add after the input. If `html` is provided, the `text` option will be ignored.
+  - name: javascript
+    type: boolean
+    required: false
+    description: Whether to enable JavaScript enhancements for the component
   - name: selectFilesButtonText
     type: string
     required: false
@@ -170,13 +174,22 @@ examples:
         text: Upload a file
       formGroup:
         classes: extra-class
+  - name: javascript
+    options:
+      id: file-upload-1
+      name: file-upload-1
+      label:
+        text: Upload a file
+      javascript: true
+      multiple: true
   - name: translated
     options:
       id: file-upload-1
       name: file-upload-1
       label:
         text: Llwythwch ffeil i fyny
       multiple: true
+      javascript: true
       selectFilesButtonText: Dewiswch ffeil
       filesSelectedDefaultText: Dim ffeiliau wedi'u dewis
       filesSelectedText:
@@ -258,3 +271,16 @@ examples:
         text: Error message
       hint:
         text: hint
+  - name: translated, no javascript enhancement
+    hidden: true
+    options:
+      id: file-upload-1
+      name: file-upload-1
+      label:
+        text: Llwythwch ffeil i fyny
+      multiple: true
+      selectFilesButtonText: Dewiswch ffeil
+      filesSelectedDefaultText: Dim ffeiliau wedi'u dewis
+      filesSelectedText:
+        other: "%{count} ffeil wedi'u dewis"
+        one: "%{count} ffeil wedi'i dewis"

packages/govuk-frontend/src/govuk/components/file-upload/template.njk

@@ -43,23 +43,28 @@
 {% if params.formGroup.beforeInput %}
   {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
-  <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file" data-module="govuk-file-upload"
+  {{params.javascript}}
+  <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
   {%- if params.value %} value="{{ params.value }}"{% endif %}
   {%- if params.disabled %} disabled{% endif %}
   {%- if params.multiple %} multiple{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {{- govukI18nAttributes({
-    key: 'select-files-button',
-    message: params.selectFilesButtonText
-  }) -}}
-  {{- govukI18nAttributes({
-    key: 'files-selected-default',
-    message: params.filesSelectedDefaultText
-  }) -}}
-  {{- govukI18nAttributes({
-    key: 'files-selected',
-    messages: params.filesSelectedText
-  }) -}}
+  {%- if params.javascript %}
+    data-module="govuk-file-upload"
+
+    {{- govukI18nAttributes({
+      key: 'select-files-button',
+      message: params.selectFilesButtonText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'files-selected-default',
+      message: params.filesSelectedDefaultText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'files-selected',
+      messages: params.filesSelectedText
+    }) -}}
+  {%- endif %}
   {{- govukAttributes(params.attributes) }}>
 {% if params.formGroup.afterInput %}
   {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}

packages/govuk-frontend/src/govuk/components/file-upload/template.test.js

@@ -208,6 +208,64 @@ describe('File upload', () => {
     })
   })
 
+  describe('`javascript` option', () => {
+    it('is falsy by default', () => {
+      const $ = render('file-upload', examples.javascript)
+
+      const $input = $('.govuk-form-group > .govuk-file-upload input')
+      expect($input.attr('data-module')).toBeUndefined()
+    })
+
+    it('adds the data-module attribute to the input when `true`', () => {
+      const $ = render('file-upload', examples.javascript)
+
+      const $input = $('.govuk-form-group > .govuk-file-upload')
+
+      expect($input.attr('data-module')).toBe('govuk-file-upload')
+    })
+
+    it('adds the data-module attribute when receiving an object', () => {
+      const $ = render('file-upload', examples.translated)
+
+      const $input = $('.govuk-form-group > .govuk-file-upload')
+
+      expect($input.attr('data-module')).toBe('govuk-file-upload')
+    })
+
+    it('enables the rendering of translation messages when true', () => {
+      const $ = render('file-upload', examples.translated)
+
+      const $input = $('.govuk-form-group > .govuk-file-upload')
+
+      expect($input.attr('data-i18n.select-files-button')).toBe(
+        'Dewiswch ffeil'
+      )
+      expect($input.attr('data-i18n.files-selected-default')).toBe(
+        "Dim ffeiliau wedi'u dewis"
+      )
+      expect($input.attr('data-i18n.files-selected.one')).toBe(
+        "%{count} ffeil wedi'i dewis"
+      )
+      expect($input.attr('data-i18n.files-selected.other')).toBe(
+        "%{count} ffeil wedi'u dewis"
+      )
+    })
+
+    it('prevents the rendering of translation messages when false', () => {
+      const $ = render(
+        'file-upload',
+        examples['translated, no javascript enhancement']
+      )
+
+      const $input = $('.govuk-form-group > .govuk-file-upload')
+
+      expect($input.attr('data-i18n.select-files-button')).toBeUndefined()
+      expect($input.attr('data-i18n.files-selected-default')).toBeUndefined()
+      expect($input.attr('data-i18n.files-selected.one')).toBeUndefined()
+      expect($input.attr('data-i18n.files-selected.other')).toBeUndefined()
+    })
+  })
+
   describe('with dependant components', () => {
     it('have correct nesting order', () => {
       const $ = render('file-upload', examples.error)