From 560026956a187b6c020133563a687253b83bf38e Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 10 Sep 2024 13:20:48 +0100 Subject: [PATCH 1/2] Make it easier to set date values (#994) This updates the `dateInput` component to make it easier to set the values (for example, if going back to a page), without having to set the individual items. --- app/components/date-input/index.njk | 16 +------ .../date-input/month-and-year-with-values.njk | 45 +++++++++++++++++++ app/components/date-input/with-values.njk | 36 +++++++++++++++ app/pages/examples.njk | 2 + packages/components/date-input/README.md | 4 ++ packages/components/date-input/template.njk | 13 +++--- 6 files changed, 96 insertions(+), 20 deletions(-) create mode 100644 app/components/date-input/month-and-year-with-values.njk create mode 100644 app/components/date-input/with-values.njk diff --git a/app/components/date-input/index.njk b/app/components/date-input/index.njk index b91a7c738..e2c49522d 100644 --- a/app/components/date-input/index.njk +++ b/app/components/date-input/index.njk @@ -20,21 +20,7 @@ }, "hint": { "text": "For example, 31 3 1980" - }, - "items": [ - { - "name": "day", - "classes": "nhsuk-input--width-2" - }, - { - "name": "month", - "classes": "nhsuk-input--width-2" - }, - { - "name": "year", - "classes": "nhsuk-input--width-4" - } - ] + } }) }} diff --git a/app/components/date-input/month-and-year-with-values.njk b/app/components/date-input/month-and-year-with-values.njk new file mode 100644 index 000000000..9cf6f56b6 --- /dev/null +++ b/app/components/date-input/month-and-year-with-values.njk @@ -0,0 +1,45 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Date input' %} +{% from 'components/date-input/macro.njk' import dateInput %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+ {{ dateInput({ + "id": "dob", + "namePrefix": "dob", + "fieldset": { + "legend": { + "text": "When did you start your job?" + } + }, + "hint": { + "text": "For example, 11 2023" + }, + values: { + month: "8", + year: "2024" + }, + "items": [ + { + "name": "month", + "classes": "nhsuk-input--width-2" + }, + { + "name": "year", + "classes": "nhsuk-input--width-4" + } + ] + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/date-input/with-values.njk b/app/components/date-input/with-values.njk new file mode 100644 index 000000000..43d24cff5 --- /dev/null +++ b/app/components/date-input/with-values.njk @@ -0,0 +1,36 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Date input' %} +{% from 'components/date-input/macro.njk' import dateInput %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+ {{ dateInput({ + "id": "dob", + "namePrefix": "dob", + "fieldset": { + "legend": { + "text": "What is your date of birth?" + } + }, + "hint": { + "text": "For example, 31 3 1980" + }, + values: { + day: "5", + month: "8", + year: "2024" + } + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index d36919ff8..a640b6287 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -60,6 +60,8 @@
  • Date input with autocomplete attribute
  • Date input with error
  • Date input with multiple errors
    • +
  • Date input with values
    • +
  • Date (month and year) input with values
  • Details
  • Do and Don't list
  • Error message
    • diff --git a/packages/components/date-input/README.md b/packages/components/date-input/README.md index 54f559f8d..ed3d50e35 100644 --- a/packages/components/date-input/README.md +++ b/packages/components/date-input/README.md @@ -366,6 +366,10 @@ The date input Nunjucks macro takes the following arguments: | **pattern** | string | No | Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value. | | **classes** | string | No | Optional additional classes to add to the date-input container. Separate each class with a space. | | **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the date-input component. | +| **values** | object | No | An optional object use to specify value attributes for the date parts without setting rows. | +| **values.day** | string | No | Value attribute for the day input. | +| **values.month** | string | No | Value attribute for the month input. | +| **values.year** | string | No | Value attribute for the year input. | If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). diff --git a/packages/components/date-input/template.njk b/packages/components/date-input/template.njk index 89bb2ffbc..428c5d9d3 100644 --- a/packages/components/date-input/template.njk +++ b/packages/components/date-input/template.njk @@ -14,15 +14,18 @@ {% set dateInputItems = [ { name: "day", - classes: "nhsuk-input--width-2" + classes: "nhsuk-input--width-2", + value: params.values.day }, { name: "month", - classes: "nhsuk-input--width-2" + classes: "nhsuk-input--width-2", + value: params.values.month }, { name: "year", - classes: "nhsuk-input--width-4" + classes: "nhsuk-input--width-4", + value: params.values.year } ] %} {% endif %} @@ -64,8 +67,8 @@ }, id: item.id if item.id else (params.id + "-" + item.name), classes: "nhsuk-date-input__input " + (item.classes if item.classes), - name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name, - value: item.value, + name: (params.namePrefix + "[" + item.name + "]") if params.namePrefix else item.name, + value: item.value or params.values[item.name], inputmode: item.inputmode if item.inputmode else "numeric", autocomplete: item.autocomplete, pattern: item.pattern, From a66882b518c03bf80703d72b1cc12e75514ab485 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 10 Sep 2024 16:07:01 +0100 Subject: [PATCH 2/2] Fix encoding issue introduce in gulp v5.0 (#1013) Fix encoding issue introduce in gulp v5.0 Co-authored-by: Adam Chrimes --- CHANGELOG.md | 1 + gulpfile.js | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f1f29533..c2243a727 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Change "Contact us" in the footer link examples to "Give us feedback" ([PR 972](https://github.com/nhsuk/nhsuk-frontend/pull/972)) - Adjusted default spacing of back link component ([PR 964](https://github.com/nhsuk/nhsuk-frontend/pull/964)) - Reduce main wrapper padding on mobile ([PR 1003](https://github.com/nhsuk/nhsuk-frontend/pull/1003)) +- Fix image encoding issue introduced in Gulp v5.0 ([PR 1013](https://github.com/nhsuk/nhsuk-frontend/pull/1013)) ## 8.3.0 - 24 July 2024 diff --git a/gulpfile.js b/gulpfile.js index 66fd8890f..7569ffefe 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -125,7 +125,7 @@ function versionJS() { * Copy assets such as icons and images into the distribution */ function assets() { - return gulp.src('packages/assets/**').pipe(gulp.dest('dist/assets/')) + return gulp.src('packages/assets/**', { encoding: false }).pipe(gulp.dest('dist/assets/')) } /** @@ -145,7 +145,10 @@ function cssFolder() { function createZip() { return gulp - .src(['dist/css/*.min.css', 'dist/js/*.min.js', 'dist/assets/**', '!dist/js/nhsuk.min.js'], { base: 'dist' }) + .src(['dist/css/*.min.css', 'dist/js/*.min.js', 'dist/assets/**', '!dist/js/nhsuk.min.js'], { + base: 'dist', + encoding: false + }) .pipe(zip(`nhsuk-frontend-${version}.zip`)) .pipe(gulp.dest('dist')) }