From 6e8a9794fee04d3061052ee107e9d362c918ca37 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 16 Aug 2024 14:58:36 +0100 Subject: [PATCH 1/3] Make it easier to set date values --- app/components/date-input/index.njk | 16 +-------- app/components/date-input/with-values.njk | 36 +++++++++++++++++++++ app/pages/examples.njk | 1 + packages/components/date-input/template.njk | 11 ++++--- 4 files changed, 45 insertions(+), 19 deletions(-) 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/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 d384727bd..a258adedb 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -60,6 +60,7 @@
  • Date input with autocomplete attribute
  • Date input with error
  • Date input with multiple errors
    • +
  • Date input with values
  • Details
  • Do and Don't list
  • Error message
    • diff --git a/packages/components/date-input/template.njk b/packages/components/date-input/template.njk index 0670c6a39..26e819ae7 100644 --- a/packages/components/date-input/template.njk +++ b/packages/components/date-input/template.njk @@ -13,15 +13,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 %} @@ -63,7 +66,7 @@ }, 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, + name: (params.namePrefix + "[" + item.name + "]") if params.namePrefix else item.name, value: item.value, inputmode: item.inputmode if item.inputmode else "numeric", autocomplete: item.autocomplete, From 8a703057b4ed3bbf64fabd2d55dcb5296bcc1aa7 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 20 Aug 2024 18:47:33 +0100 Subject: [PATCH 2/3] Allow values to be set as an object for custom items Thanks @edwardhorsford for the suggestion! --- .../date-input/month-and-year-with-values.njk | 45 +++++++++++++++++++ app/pages/examples.njk | 1 + packages/components/date-input/template.njk | 2 +- 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 app/components/date-input/month-and-year-with-values.njk 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/pages/examples.njk b/app/pages/examples.njk index a258adedb..970553246 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -61,6 +61,7 @@
  • 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/template.njk b/packages/components/date-input/template.njk index 26e819ae7..514554147 100644 --- a/packages/components/date-input/template.njk +++ b/packages/components/date-input/template.njk @@ -67,7 +67,7 @@ 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, + value: item.value or params.values[item.name], inputmode: item.inputmode if item.inputmode else "numeric", autocomplete: item.autocomplete, pattern: item.pattern, From eab71f17d9aa95d3ad784b329f2dc75321bca044 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Mon, 9 Sep 2024 17:06:28 +0100 Subject: [PATCH 3/3] Update README for date input --- packages/components/date-input/README.md | 4 ++++ 1 file changed, 4 insertions(+) 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).