govuk_publishing_components 55.0.1 → 55.1.0

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/fixtures.json

@@ -4,7 +4,6 @@
         {
             "name": "default",
             "options": {
-                "id": "file-upload-1",
                 "name": "file-upload-1",
                 "label": {
                     "text": "Upload a file"
@@ -16,6 +15,74 @@
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
+        {
+            "name": "allows multiple files",
+            "options": {
+                "id": "file-upload-1",
+                "name": "file-upload-1",
+                "label": {
+                    "text": "Upload a file"
+                },
+                "multiple": true
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n</div>"
+        },
+        {
+            "name": "allows image files only",
+            "options": {
+                "id": "file-upload-1",
+                "name": "file-upload-1",
+                "label": {
+                    "text": "Upload a file"
+                },
+                "attributes": {
+                    "accept": "image/*"
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" accept=\"image/*\">\n</div>"
+        },
+        {
+            "name": "allows direct media capture",
+            "options": {
+                "id": "file-upload-1",
+                "name": "file-upload-1",
+                "label": {
+                    "text": "Upload a file"
+                },
+                "attributes": {
+                    "capture": "user"
+                }
+            },
+            "hidden": false,
+            "description": "Currently only works on mobile devices.",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" capture=\"user\">\n</div>"
+        },
+        {
+            "name": "disabled",
+            "options": {
+                "id": "file-upload-1",
+                "name": "file-upload-1",
+                "label": {
+                    "text": "Upload a file"
+                },
+                "disabled": true
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" disabled>\n</div>"
+        },
         {
             "name": "with hint text",
             "options": {
@@ -56,55 +123,139 @@
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-3\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n  <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>"
         },
         {
-            "name": "with value",
+            "name": "with label as page heading",
             "options": {
-                "id": "file-upload-4",
-                "name": "file-upload-4",
-                "value": "C:\\fakepath\\myphoto.jpg",
+                "id": "file-upload-1",
+                "name": "file-upload-1",
                 "label": {
-                    "text": "Upload a photo"
+                    "text": "Upload a file",
+                    "classes": "govuk-label--l",
+                    "isPageHeading": true
                 }
             },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-4\">\n    Upload a photo\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\" value=\"C:&#92;fakepath&#92;myphoto.jpg\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"file-upload-1\">\n      Upload a file\n    </label>\n  </h1>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
         {
-            "name": "with label as page heading",
+            "name": "with optional form-group classes",
             "options": {
                 "id": "file-upload-1",
                 "name": "file-upload-1",
                 "label": {
-                    "text": "Upload a file",
-                    "classes": "govuk-label--l",
-                    "isPageHeading": true
+                    "text": "Upload a file"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
                 }
             },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"file-upload-1\">\n      Upload a file\n    </label>\n  </h1>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
         {
-            "name": "with optional form-group classes",
+            "name": "enhanced",
             "options": {
                 "id": "file-upload-1",
                 "name": "file-upload-1",
                 "label": {
                     "text": "Upload a file"
                 },
-                "formGroup": {
-                    "classes": "extra-class"
+                "javascript": true
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": true,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n  </div>\n</div>"
+        },
+        {
+            "name": "enhanced, disabled",
+            "options": {
+                "javascript": true,
+                "disabled": true,
+                "id": "file-upload-error",
+                "name": "file-upload-error",
+                "label": {
+                    "text": "Upload a file"
+                },
+                "hint": {
+                    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
                 }
             },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-error\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-error-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload\" id=\"file-upload-error\" name=\"file-upload-error\" type=\"file\" disabled aria-describedby=\"file-upload-error-hint\">\n  </div>\n</div>"
+        },
+        {
+            "name": "enhanced, with error message and hint",
+            "options": {
+                "javascript": true,
+                "id": "file-upload-3",
+                "name": "file-upload-3",
+                "label": {
+                    "text": "Upload a file"
+                },
+                "hint": {
+                    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                }
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-3\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n  <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\">\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n  </div>\n</div>"
+        },
+        {
+            "name": "translated",
+            "options": {
+                "id": "file-upload-1",
+                "name": "file-upload-1",
+                "label": {
+                    "text": "Llwythwch ffeil i fyny"
+                },
+                "multiple": true,
+                "javascript": true,
+                "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": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Llwythwch ffeil i fyny\n  </label>\n  <div\n    class=\"govuk-drop-zone\"\n    data-module=\"govuk-file-upload\" data-i18n.choose-files-button=\"Dewiswch ffeil\" data-i18n.no-file-chosen=\"Dim ffeil wedi&#39;i dewis\" data-i18n.multiple-files-chosen.other=\"%{count} ffeil wedi&#39;u dewis\" data-i18n.multiple-files-chosen.one=\"%{count} ffeil wedi&#39;i dewis\" data-i18n.drop-instruction=\"neu ollwng ffeil\" data-i18n.entered-drop-zone=\"Wedi mynd i mewn i&#39;r parth gollwng\" data-i18n.left-drop-zone=\"Parth gollwng i&#39;r chwith\">\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n  </div>\n</div>"
+        },
+        {
+            "name": "with value",
+            "options": {
+                "id": "file-upload-4",
+                "name": "file-upload-4",
+                "value": "C:\\fakepath\\myphoto.jpg",
+                "label": {
+                    "text": "Upload a photo"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-4\">\n    Upload a photo\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\" value=\"C:&#92;fakepath&#92;myphoto.jpg\">\n</div>"
         },
         {
             "name": "attributes",
@@ -140,6 +291,21 @@
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-classes\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>"
         },
+        {
+            "name": "id",
+            "options": {
+                "id": "file-upload-id",
+                "name": "test-name",
+                "label": {
+                    "text": "Upload a file"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-id\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-id\" name=\"test-name\" type=\"file\">\n</div>"
+        },
         {
             "name": "with describedBy",
             "options": {
@@ -233,6 +399,31 @@
             "previewLayoutModifiers": [],
             "screenshot": false,
             "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n    hint\n  </div>\n  <p id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"test-target-element file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>"
+        },
+        {
+            "name": "translated, no javascript enhancement",
+            "options": {
+                "id": "file-upload-1",
+                "name": "file-upload-1",
+                "label": {
+                    "text": "Llwythwch ffeil i fyny"
+                },
+                "multiple": true,
+                "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": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Llwythwch ffeil i fyny\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\" multiple>\n</div>"
         }
     ]
 }

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/macro-options.json

@@ -8,14 +8,15 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "The ID of the input."
+        "required": false,
+        "description": "The ID of the input. Defaults to the value of `name`."
     },
     {
         "name": "value",
         "type": "string",
         "required": false,
-        "description": "Deprecated. Optional initial value of the input."
+        "description": "Optional initial value of the input.",
+        "deprecated": "5.7.1"
     },
     {
         "name": "disabled",
@@ -23,6 +24,12 @@
         "required": false,
         "description": "If `true`, file input will be disabled."
     },
+    {
+        "name": "multiple",
+        "type": "boolean",
+        "required": false,
+        "description": "If `true`, a user may select multiple files at the same time. The exact mechanism to do this differs depending on operating system."
+    },
     {
         "name": "describedBy",
         "type": "string",
@@ -110,6 +117,48 @@
             }
         ]
     },
+    {
+        "name": "javascript",
+        "type": "boolean",
+        "required": false,
+        "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. Default is `\"Choose file\"`. If `javascript` is not provided, this option will be ignored."
+    },
+    {
+        "name": "dropInstructionText",
+        "type": "string",
+        "required": false,
+        "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 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 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",

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-allows-direct-media-capture.html

@@ -0,0 +1,6 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
+    Upload a file
+  </label>
+  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" capture="user">
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-allows-image-files-only.html

@@ -0,0 +1,6 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
+    Upload a file
+  </label>
+  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" accept="image/*">
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-allows-multiple-files.html

@@ -0,0 +1,6 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
+    Upload a file
+  </label>
+  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" multiple>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-disabled.html

@@ -0,0 +1,6 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
+    Upload a file
+  </label>
+  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" disabled>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-disabled.html

@@ -0,0 +1,13 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-error">
+    Upload a file
+  </label>
+  <div id="file-upload-error-hint" class="govuk-hint">
+    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
+  </div>
+  <div
+    class="govuk-drop-zone"
+    data-module="govuk-file-upload">
+  <input class="govuk-file-upload" id="file-upload-error" name="file-upload-error" type="file" disabled aria-describedby="file-upload-error-hint">
+  </div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html

@@ -0,0 +1,16 @@
+<div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="file-upload-3">
+    Upload a file
+  </label>
+  <div id="file-upload-3-hint" class="govuk-hint">
+    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
+  </div>
+  <p id="file-upload-3-error" class="govuk-error-message">
+    <span class="govuk-visually-hidden">Error:</span> Error message goes here
+  </p>
+  <div
+    class="govuk-drop-zone"
+    data-module="govuk-file-upload">
+  <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
+  </div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html

@@ -0,0 +1,10 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
+    Upload a file
+  </label>
+  <div
+    class="govuk-drop-zone"
+    data-module="govuk-file-upload">
+  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
+  </div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-translated.html

@@ -0,0 +1,10 @@
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
+    Llwythwch ffeil i fyny
+  </label>
+  <div
+    class="govuk-drop-zone"
+    data-module="govuk-file-upload" data-i18n.choose-files-button="Dewiswch ffeil" data-i18n.no-file-chosen="Dim ffeil wedi&#39;i dewis" data-i18n.multiple-files-chosen.other="%{count} ffeil wedi&#39;u dewis" data-i18n.multiple-files-chosen.one="%{count} ffeil wedi&#39;i dewis" data-i18n.drop-instruction="neu ollwng ffeil" data-i18n.entered-drop-zone="Wedi mynd i mewn i&#39;r parth gollwng" data-i18n.left-drop-zone="Parth gollwng i&#39;r chwith">
+  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file" multiple>
+  </div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template.njk

@@ -1,11 +1,14 @@
 {% from "../../macros/attributes.njk" import govukAttributes %}
+{% from "../../macros/i18n.njk" import govukI18nAttributes %}
 {% from "../error-message/macro.njk" import govukErrorMessage %}
 {% from "../hint/macro.njk" import govukHint %}
 {% from "../label/macro.njk" import govukLabel %}
 
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
+{%- set describedBy = params.describedBy if params.describedBy else "" -%}
+{%- set id = params.id if params.id else params.name -%}
+
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}"
   {{- govukAttributes(params.formGroup.attributes) }}>
   {{ govukLabel({
@@ -14,10 +17,10 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   }) | trim | indent(2) }}
 {% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
+  {% set hintId = id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ govukHint({
     id: hintId,
@@ -28,7 +31,7 @@
   }) | trim | indent(2) }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ govukErrorMessage({
     id: errorId,
@@ -42,11 +45,45 @@
 {% 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"
+{% if params.javascript %}
+  <div
+    class="govuk-drop-zone"
+    data-module="govuk-file-upload"
+    {{- govukI18nAttributes({
+      key: 'choose-files-button',
+      message: params.chooseFilesButtonText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'no-file-chosen',
+      message: params.noFileChosenText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'multiple-files-chosen',
+      messages: params.multipleFilesChosenText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'drop-instruction',
+      message: params.dropInstructionText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'entered-drop-zone',
+      message: params.enteredDropZoneText
+    }) -}}
+    {{- govukI18nAttributes({
+      key: 'left-drop-zone',
+      message: params.leftDropZoneText
+    }) -}}
+  >
+{% endif %}
+  <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ 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 %}
   {{- govukAttributes(params.attributes) }}>
+{% if params.javascript %}
+  </div>
+{% endif %}
 {% if params.formGroup.afterInput %}
   {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
 {% endif %}

data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss

@@ -204,18 +204,9 @@
 
   .govuk-header__menu-button {
     @include govuk-font($size: 16);
-    position: absolute;
-    // calculate top offset by:
-    // - getting the vertical spacing for the top and the bottom of the header
-    // - adding that to the crown height
-    // - dividing it by 2 so you have the vertical centre of the header
-    // - subtracting half the height of the menu button
-    top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
-      ($govuk-header-menu-button-height / 2);
-    right: 0;
     max-width: $govuk-header-menu-button-width;
     min-height: $govuk-header-menu-button-height;
-    margin: 0;
+    margin-bottom: govuk-spacing(1);
     padding: 0;
     border: 0;
     color: govuk-colour("white");
@@ -246,6 +237,19 @@
       @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
     }
 
+    @include govuk-media-query($from: mobile) {
+      position: absolute;
+      // calculate top offset by:
+      // - getting the vertical spacing for the top and the bottom of the header
+      // - adding that to the crown height
+      // - dividing it by 2 so you have the vertical centre of the header
+      // - subtracting half the height of the menu button
+      top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
+        ($govuk-header-menu-button-height / 2);
+      right: 0;
+      margin: 0;
+    }
+
     @include govuk-media-query($from: tablet) {
       top: govuk-spacing(3);
     }