Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix examples that use the file upload in the review app #5666

Merged

Conversation

romaricpascal
Copy link
Member

  • Enable the enhanced version in some of the existing examples or duplicates file upload fields to display both enhanced and not enhanced
  • Fix the labelling of the enhanced version on the File Upload page so it reads correctly
  • Make the enhanced example with hint and errors visible

Not quite sure how to implement the 'Form controls state' for the enhanced version.

Verified

This commit was signed with the committer’s verified signature.
DanielaE Daniela Engert
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5666 January 28, 2025 19:03 Inactive
Copy link

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 120.03 KiB
dist/govuk-frontend-development.min.js 47.01 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 100.92 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 94.8 KiB
packages/govuk-frontend/dist/govuk/all.mjs 1.32 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 1.74 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 120.02 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 47 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs 7.5 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 88.93 KiB 44.54 KiB
accordion.mjs 26.58 KiB 13.41 KiB
button.mjs 9.09 KiB 3.78 KiB
character-count.mjs 25.39 KiB 10.9 KiB
checkboxes.mjs 7.81 KiB 3.42 KiB
error-summary.mjs 10.99 KiB 4.54 KiB
exit-this-page.mjs 20.2 KiB 10.34 KiB
file-upload.mjs 19.5 KiB 10.13 KiB
header.mjs 6.46 KiB 3.22 KiB
notification-banner.mjs 9.35 KiB 3.7 KiB
password-input.mjs 18.24 KiB 8.33 KiB
radios.mjs 6.81 KiB 2.98 KiB
service-navigation.mjs 6.44 KiB 3.26 KiB
skip-link.mjs 6.4 KiB 2.76 KiB
tabs.mjs 12.04 KiB 6.67 KiB

View stats and visualisations on the review app


Action run for c4b5751

Copy link

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html
new file mode 100644
index 000000000..01486bdc9
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-with-error-message-and-hint.html
@@ -0,0 +1,12 @@
+<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>
+  <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"    data-module="govuk-file-upload">
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-javascript.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html
similarity index 100%
rename from packages/govuk-frontend/dist/govuk/components/file-upload/template-javascript.html
rename to packages/govuk-frontend/dist/govuk/components/file-upload/template-enhanced.html

Action run for c4b5751

Copy link

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
index 9bae7f165..09d9a8427 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
@@ -159,7 +159,7 @@
             "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": "javascript",
+            "name": "enhanced",
             "options": {
                 "id": "file-upload-1",
                 "name": "file-upload-1",
@@ -174,6 +174,28 @@
             "screenshot": true,
             "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\"    data-module=\"govuk-file-upload\">\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  <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\"    data-module=\"govuk-file-upload\">\n</div>"
+        },
         {
             "name": "translated",
             "options": {
@@ -341,28 +363,6 @@
             "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": "javascript, 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": true,
-            "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  <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\"    data-module=\"govuk-file-upload\">\n</div>"
-        },
         {
             "name": "translated, no javascript enhancement",
             "options": {

Action run for c4b5751

@romaricpascal romaricpascal marked this pull request as ready for review January 30, 2025 11:08
@romaricpascal romaricpascal merged commit 2e256f5 into spike-enhanced-file-upload Jan 30, 2025
47 checks passed
@romaricpascal romaricpascal deleted the enhanced-file-upload-example-fixes branch January 30, 2025 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants