From 8106a9265bf4be2395d0e0af8972f56cbb3c6f4c Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 18 Sep 2024 10:36:32 +0100 Subject: [PATCH 1/7] Update changelog with description of date input changes --- CHANGELOG.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f8c08cc3b..503c2b5b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,6 +62,67 @@ You should have this:

``` +- Updated default `name` attributes for Date input component + +The default name attributes for the date input elements now use square brackets around the date part, for instance `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`). + +The square brackets mean that the date parts will get combined into an object when using the NHS Prototype Kit, like this: + +```json +{ + "dob": { + "day": "13", + "month": "12", + "year": "1984" + } +} +``` + +This allows the values to be more easily pre-filled, which you can now do by passing an object to the `values` key: + +```njk +{{ dateInput({ + namePrefix: "dob", + fieldset: { + legend: { + text: "What is your date of birth?" + } + }, + values: data.dob +}) }} +``` + +You can override this new default by setting the `name` attribute on the individual date parts within `items`: + +```njk +{{ dateInput({ + fieldset: { + legend: { + text: "What is your date of birth?" + } + }, + items: [ + { + name: "dob-day", + label: "Day", + classes: "nhsuk-input--width-2" + }, + { + name: "dob-month", + label: "Month", + classes: "nhsuk-input--width-2" + }, + { + name: "dob-year", + label: "Year", + classes: "nhsuk-input--width-4" + } + ] +}) }} +``` + +This change was made in [PR 994](https://github.com/nhsuk/nhsuk-frontend/pull/994). + :recycle: **Changes** - Large headings, legends and labels updated to use 36px rather than 32px. ([PR 989](https://github.com/nhsuk/nhsuk-frontend/pull/989)) From 3142df55d6f68634e8a665e93e13a5b5a510f9aa Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 18 Sep 2024 12:05:06 +0100 Subject: [PATCH 2/7] Apply suggestions from code review Co-authored-by: Ed Horsford --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 503c2b5b5..7a1c6ae7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -64,9 +64,9 @@ You should have this: - Updated default `name` attributes for Date input component -The default name attributes for the date input elements now use square brackets around the date part, for instance `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`). +The default name attributes for the date input elements now use square brackets around the date part. For example: `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`, `dob-month`, `dob-year`). -The square brackets mean that the date parts will get combined into an object when using the NHS Prototype Kit, like this: +The square brackets mean that the date parts will be saved as an object when using the NHS Prototype Kit, like this: ```json { From fa046e1c052c3ef7b170300b3a8cc3363978a8ec Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 18 Sep 2024 12:06:18 +0100 Subject: [PATCH 3/7] Move link --- CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a1c6ae7c..39a21cf6a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,7 +62,7 @@ You should have this:

``` -- Updated default `name` attributes for Date input component +- Updated default `name` attributes for Date input component ([PR 994](https://github.com/nhsuk/nhsuk-frontend/pull/994)) The default name attributes for the date input elements now use square brackets around the date part. For example: `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`, `dob-month`, `dob-year`). @@ -121,8 +121,6 @@ You can override this new default by setting the `name` attribute on the individ }) }} ``` -This change was made in [PR 994](https://github.com/nhsuk/nhsuk-frontend/pull/994). - :recycle: **Changes** - Large headings, legends and labels updated to use 36px rather than 32px. ([PR 989](https://github.com/nhsuk/nhsuk-frontend/pull/989)) From 26d72c6698f346bd428d38b5b539cccaab6a8308 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 18 Sep 2024 12:16:33 +0100 Subject: [PATCH 4/7] Add description of how to used nested properties in nunjucks --- CHANGELOG.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39a21cf6a..d97e4ddda 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -78,7 +78,13 @@ The square brackets mean that the date parts will be saved as an object when usi } ``` -This allows the values to be more easily pre-filled, which you can now do by passing an object to the `values` key: +This means you can access the data in Nunjucks like this: + +```njk +Your year of birth is {{ data.dob.year }}. +``` + +You can also now pass the object to the `values` key of the date input to set the values for the 3 inputs: ```njk {{ dateInput({ From b78685ccb4568c4859faba2c93d2fe8b8b83fa76 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Wed, 18 Sep 2024 13:23:20 +0100 Subject: [PATCH 5/7] Use lowercase for prototype kit Co-authored-by: Ed Horsford --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d97e4ddda..61cfdf096 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,7 +66,7 @@ You should have this: The default name attributes for the date input elements now use square brackets around the date part. For example: `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`, `dob-month`, `dob-year`). -The square brackets mean that the date parts will be saved as an object when using the NHS Prototype Kit, like this: +The square brackets mean that the date parts will be saved as an object when using the NHS prototype kit, like this: ```json { From 48572e16645bf1945a7f2f62750bf0de6deccde0 Mon Sep 17 00:00:00 2001 From: Ananda Maryon <159916913+anandamaryon1@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:29:52 +0100 Subject: [PATCH 6/7] Update CHANGELOG with PR link and subheadings --- CHANGELOG.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61cfdf096..3837bb0da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ :boom: **Breaking changes** -- Updated back link and breadcrumbs ([PR 1002](https://github.com/nhsuk/nhsuk-frontend/pull/1002)) +#### Updated back link and breadcrumbs ([PR 1002](https://github.com/nhsuk/nhsuk-frontend/pull/1002)) The breadcrumbs component no longer contains its own `

` container. @@ -46,7 +46,7 @@ The back link should also be placed within the `
``` -- Updated default `name` attributes for Date input component ([PR 994](https://github.com/nhsuk/nhsuk-frontend/pull/994)) +#### Updated default `name` attributes for Date input component ([PR 994](https://github.com/nhsuk/nhsuk-frontend/pull/994)) The default name attributes for the date input elements now use square brackets around the date part. For example: `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`, `dob-month`, `dob-year`). @@ -129,8 +129,8 @@ You can override this new default by setting the `name` attribute on the individ :recycle: **Changes** -- Large headings, legends and labels updated to use 36px rather than 32px. ([PR 989](https://github.com/nhsuk/nhsuk-frontend/pull/989)) -- Medium headings, legends and labels updated to use 26px rather than 24px. ([Issue 445](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/445)) +- Large headings, legends and labels updated to use 36px rather than 32px ([PR 989](https://github.com/nhsuk/nhsuk-frontend/pull/989)) +- Medium headings, legends and labels updated to use 26px rather than 24px ([Issue 445](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/445)) - Add sizing classes for table caption - Reduce heading caption sizes - Adjust print styles, making headings and body type smaller From 68e2bc8f923e560bad9400027c50f846450d8d0c Mon Sep 17 00:00:00 2001 From: anandamaryon1 Date: Wed, 18 Sep 2024 13:33:42 +0100 Subject: [PATCH 7/7] fix linting --- CHANGELOG.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3837bb0da..67d045b39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -64,7 +64,7 @@ You should have this: #### Updated default `name` attributes for Date input component ([PR 994](https://github.com/nhsuk/nhsuk-frontend/pull/994)) -The default name attributes for the date input elements now use square brackets around the date part. For example: `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`, `dob-month`, `dob-year`). +The default name attributes for the date input elements now use square brackets around the date part. For example: `dob[day]`, `dob[month]`, `dob[year]`. Previously they used hyphens (`dob-day`, `dob-month`, `dob-year`). The square brackets mean that the date parts will be saved as an object when using the NHS prototype kit, like this: @@ -74,7 +74,7 @@ The square brackets mean that the date parts will be saved as an object when usi "day": "13", "month": "12", "year": "1984" - } + } } ``` @@ -95,7 +95,7 @@ You can also now pass the object to the `values` key of the date input to set th } }, values: data.dob -}) }} +}) }} ``` You can override this new default by setting the `name` attribute on the individual date parts within `items`: