Update name and description of macro options in docs and code

packages/govuk-frontend-review/src/views/examples/translated/index.njk

@@ -347,9 +347,9 @@
       text: "Llwythwch ffeil i fyny"
     },
     javascript: true,
-    selectFilesButtonText: "Dewiswch ffeil",
-    filesSelectedDefaultText: "Dim ffeiliau wedi'u dewis",
-    filesSelectedText: {
+    chooseFilesButtonText: "Dewiswch ffeil",
+    noFileChosenText: "Dim ffeiliau wedi'u dewis",
+    multipleFilesChosenText: {
         other: "%{count} ffeil wedi'u dewis",
         one: "%{count} ffeil wedi'i dewis"
     }

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

@@ -105,7 +105,7 @@ export class FileUpload extends ConfigurableComponent {
     // Create status element that shows what/how many files are selected
     const $status = document.createElement('span')
     $status.className = 'govuk-body govuk-file-upload__status'
-    $status.innerText = this.i18n.t('filesSelectedDefault')
+    $status.innerText = this.i18n.t('noFileChosen')
 
     $button.appendChild($status)
 
@@ -122,7 +122,7 @@ export class FileUpload extends ConfigurableComponent {
     const buttonSpan = document.createElement('span')
     buttonSpan.className =
       'govuk-button govuk-button--secondary govuk-file-upload__pseudo-button'
-    buttonSpan.innerText = this.i18n.t('selectFilesButton')
+    buttonSpan.innerText = this.i18n.t('chooseFilesButton')
 
     containerSpan.appendChild(buttonSpan)
 
@@ -132,7 +132,7 @@ export class FileUpload extends ConfigurableComponent {
 
     const instructionSpan = document.createElement('span')
     instructionSpan.className = 'govuk-body govuk-file-upload__instruction'
-    instructionSpan.innerText = this.i18n.t('instruction')
+    instructionSpan.innerText = this.i18n.t('dropInstruction')
 
     containerSpan.appendChild(instructionSpan)
 
@@ -231,7 +231,7 @@ export class FileUpload extends ConfigurableComponent {
           ) {
             this.$button.classList.add('govuk-file-upload__button--dragging')
             this.$input.classList.add('govuk-file-upload--dragging')
-            this.$announcements.innerText = this.i18n.t('dropZoneEntered')
+            this.$announcements.innerText = this.i18n.t('enteredDropZone')
           }
         }
       } else {
@@ -253,7 +253,7 @@ export class FileUpload extends ConfigurableComponent {
   hideDropZone() {
     this.$button.classList.remove('govuk-file-upload__button--dragging')
     this.$input.classList.remove('govuk-file-upload--dragging')
-    this.$announcements.innerText = this.i18n.t('dropZoneLeft')
+    this.$announcements.innerText = this.i18n.t('leftDropZone')
   }
 
   /**
@@ -264,7 +264,7 @@ export class FileUpload extends ConfigurableComponent {
 
     if (fileCount === 0) {
       // If there are no files, show the default selection text
-      this.$status.innerText = this.i18n.t('filesSelectedDefault')
+      this.$status.innerText = this.i18n.t('noFileChosen')
       this.$button.classList.add('govuk-file-upload__button--empty')
     } else {
       if (
@@ -274,7 +274,7 @@ export class FileUpload extends ConfigurableComponent {
         this.$status.innerText = this.$input.files[0].name
       } else {
         // Otherwise, tell the user how many files are selected
-        this.$status.innerText = this.i18n.t('filesSelected', {
+        this.$status.innerText = this.i18n.t('multipleFilesChosen', {
           count: fileCount
         })
       }
@@ -359,17 +359,17 @@ export class FileUpload extends ConfigurableComponent {
    */
   static defaults = Object.freeze({
     i18n: {
-      selectFilesButton: 'Choose file',
-      filesSelectedDefault: 'No file chosen',
-      filesSelected: {
+      chooseFilesButton: 'Choose file',
+      dropInstruction: 'or drop file',
+      noFileChosen: 'No file chosen',
+      multipleFilesChosen: {
         // the 'one' string isn't used as the component displays the filename
         // instead, however it's here for coverage's sake
         one: '%{count} file chosen',
         other: '%{count} files chosen'
       },
-      dropZoneEntered: 'Entered drop zone',
-      dropZoneLeft: 'Left drop zone',
-      instruction: 'or drop file'
+      enteredDropZone: 'Entered drop zone',
+      leftDropZone: 'Left drop zone'
     }
   })
 
@@ -424,13 +424,15 @@ function isContainingFiles(dataTransfer) {
  * @typedef {object} FileUploadTranslations
  *
  * Messages used by the component
- * @property {string} [selectFiles] - Text of button that opens file browser
- * @property {TranslationPluralForms} [filesSelected] - Text indicating how
- *   many files have been selected
- * @property {string} [dropZoneEntered] - Text announced to assistive technology
- *   when users entered the drop zone while dragging
- * @property {string} [dropZoneLeft] - Text announced to assistive technology
- *   when users left the drop zone while dragging
+ * @property {string} [chooseFile] - The text of the button that opens the file picker
+ * @property {string} [dropInstruction] - The text informing users they can drop files
+ * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+ *   have been chosen by the user
+ * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+ * @property {string} [enteredDropZone] - The text announced by assistive technology
+ *   when user drags files and enters the drop zone
+ * @property {string} [leftDropZone] - The text announced by assistive technology
+ *   when user drags files and leaves the drop zone without dropping
  */
 
 /**

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

@@ -415,7 +415,7 @@ describe('/components/file-upload', () => {
           )
 
           expect(buttonElementText).toBe('Dewiswch ffeil')
-          expect(statusElementText).toBe("Dim ffeiliau wedi'u dewis")
+          expect(statusElementText).toBe("Dim ffeil wedi'i dewis")
         })
 
         describe('status element', () => {
@@ -424,7 +424,7 @@ describe('/components/file-upload', () => {
               el.innerHTML.trim()
             )
 
-            expect(statusText).toBe("Dim ffeiliau wedi'u dewis")
+            expect(statusText).toBe("Dim ffeil wedi'i dewis")
           })
 
           it('uses the correct translation when multiple files are selected', async () => {

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

@@ -80,23 +80,31 @@ params:
   - name: javascript
     type: boolean
     required: false
-    description: Whether to enable JavaScript enhancements for the component
-  - name: selectFilesButtonText
+    description: Can be used to enable JavaScript enhancements for the component.
+  - name: chooseFilesButtonText
     type: string
     required: false
-    description: The text of the button that opens the file picker. JavaScript enhanced version of the component only. Default is "Choose file".
-  - name: instructionText
+    description: The text of the button that opens the file picker. Default is `"Choose file"`. If `javascript` is not provided, this option will be ignored.
+  - name: dropInstructionText
     type: string
     required: false
-    description: The text of the instruction text that follows the button that opens the file picker. JavaScript enhanced version of the component only. Default is "or drop file".
-  - name: filesSelected
+    description: The text informing users they can drop files. Default is `"or drop file"`. If `javascript` is not provided, this option will be ignored.
+  - name: multipleFilesChosenText
     type: object
     required: false
-    description: The text to display when multiple files has been chosen by the user. JavaScript enhanced version of the component only. The component will replace the `%{count}` placeholder with the number of files selected. This is a [pluralised list of messages](https://frontend.design-system.service.gov.uk/localise-govuk-frontend).
-  - name: filesSelectedDefault
+    description: The text displayed when multiple files have been chosen by the user. The component will replace the `%{count}` placeholder with the number of files selected. [Our pluralisation rules apply to this macro option](https://frontend.design-system.service.gov.uk/localise-govuk-frontend/#understanding-pluralisation-rules). If `javascript` is not provided, this option will be ignored.
+  - name: noFileChosenText
     type: string
     required: false
-    description: The text to display when no file has been chosen by the user. JavaScript enhanced version of the component only. Default is "No file chosen".
+    description: The text displayed when no file has been chosen by the user. Default is `"No file chosen"`. If `javascript` is not provided, this option will be ignored.
+  - name: enteredDropZoneText
+    type: string
+    required: false
+    description: The text announced by assistive technology when user drags files and enters the drop zone. Default is `"Entered drop zone"`. If `javascript` is not provided, this option will be ignored.
+  - name: leftDropZoneText
+    type: string
+    required: false
+    description: The text announced by assistive technology when user drags files and leaves the drop zone without dropping. Default is `"Left drop zone"`. If `javascript` is not provided, this option will be ignored.
   - name: classes
     type: string
     required: false
@@ -214,12 +222,14 @@ examples:
         text: Llwythwch ffeil i fyny
       multiple: true
       javascript: true
-      selectFilesButtonText: Dewiswch ffeil
-      instructionText: neu ollwng ffeil
-      filesSelectedDefaultText: Dim ffeiliau wedi'u dewis
-      filesSelectedText:
+      chooseFilesButtonText: Dewiswch ffeil
+      dropInstructionText: neu ollwng ffeil
+      noFileChosenText: Dim ffeil wedi'i dewis
+      multipleFilesChosenText:
         other: "%{count} ffeil wedi'u dewis"
         one: "%{count} ffeil wedi'i dewis"
+      enteredDropZoneText: Wedi mynd i mewn i'r parth gollwng
+      leftDropZoneText: Parth gollwng i'r chwith
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: with value
@@ -311,8 +321,10 @@ examples:
       label:
         text: Llwythwch ffeil i fyny
       multiple: true
-      selectFilesButtonText: Dewiswch ffeil
-      filesSelectedDefaultText: Dim ffeiliau wedi'u dewis
-      filesSelectedText:
+      chooseFilesButtonText: Dewiswch ffeil
+      noFileChosenText: Dim ffeiliau wedi'u dewis
+      multipleFilesChosenText:
         other: "%{count} ffeil wedi'u dewis"
         one: "%{count} ffeil wedi'i dewis"
+      enteredDropZoneText: Wedi mynd i mewn i'r parth gollwng
+      leftDropZoneText: Parth gollwng i'r chwith

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

@@ -50,20 +50,28 @@
     class="govuk-file-upload-wrapper"
     data-module="govuk-file-upload"
     {{- govukI18nAttributes({
-      key: 'select-files-button',
-      message: params.selectFilesButtonText
+      key: 'choose-files-button',
+      message: params.chooseFilesButtonText
     }) -}}
     {{- govukI18nAttributes({
-      key: 'files-selected-default',
-      message: params.filesSelectedDefaultText
+      key: 'no-file-chosen',
+      message: params.noFileChosenText
     }) -}}
     {{- govukI18nAttributes({
-      key: 'files-selected',
-      messages: params.filesSelectedText
+      key: 'multiple-files-chosen',
+      messages: params.multipleFilesChosenText
     }) -}}
     {{- govukI18nAttributes({
-      key: 'instruction',
-      message: params.instructionText
+      key: 'drop-instruction',
+      message: params.dropInstructionText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'entered-drop-zone',
+      message: params.enteredDropZoneText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'left-drop-zone',
+      message: params.leftDropZoneText
     }) -}}
   >
 {% endif %}

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

@@ -245,18 +245,27 @@ describe('File upload', () => {
 
       const $wrapper = $('.govuk-form-group > .govuk-file-upload-wrapper')
 
-      expect($wrapper.attr('data-i18n.select-files-button')).toBe(
+      expect($wrapper.attr('data-i18n.choose-files-button')).toBe(
         'Dewiswch ffeil'
       )
-      expect($wrapper.attr('data-i18n.files-selected-default')).toBe(
-        "Dim ffeiliau wedi'u dewis"
+      expect($wrapper.attr('data-i18n.drop-instruction')).toBe(
+        'neu ollwng ffeil'
       )
-      expect($wrapper.attr('data-i18n.files-selected.one')).toBe(
+      expect($wrapper.attr('data-i18n.no-file-chosen')).toBe(
+        "Dim ffeil wedi'i dewis"
+      )
+      expect($wrapper.attr('data-i18n.multiple-files-chosen.one')).toBe(
         "%{count} ffeil wedi'i dewis"
       )
-      expect($wrapper.attr('data-i18n.files-selected.other')).toBe(
+      expect($wrapper.attr('data-i18n.multiple-files-chosen.other')).toBe(
         "%{count} ffeil wedi'u dewis"
       )
+      expect($wrapper.attr('data-i18n.entered-drop-zone')).toBe(
+        "Wedi mynd i mewn i'r parth gollwng"
+      )
+      expect($wrapper.attr('data-i18n.left-drop-zone')).toBe(
+        "Parth gollwng i'r chwith"
+      )
     })
 
     it('prevents the rendering of translation messages when false', () => {