From d41467da8dafd2b259cd06daa66bf4a7266a9d5d Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Tue, 4 Jun 2019 17:34:22 +0100
Subject: [PATCH] Make date input easier to link to from error summary

If the user has not specified an id for the first item, it will by default render without a suffix name which will make it easier to link to from the error summary as it'll match the `name` attribute.
---
 app/views/examples/error-summary/index.njk       |  2 +-
 .../full-page-examples/passport-details/index.js |  2 +-
 .../__snapshots__/template.test.js.snap          |  2 +-
 src/components/date-input/template.njk           | 15 ++++++++++++---
 src/components/date-input/template.test.js       | 16 +++++-----------
 .../error-summary/error-summary.test.js          |  2 +-
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/app/views/examples/error-summary/index.njk b/app/views/examples/error-summary/index.njk
index d3478acc01..23aceb6c25 100644
--- a/app/views/examples/error-summary/index.njk
+++ b/app/views/examples/error-summary/index.njk
@@ -38,7 +38,7 @@
       },
       {
         "text": "Problem with date input",
-        "href": "#dateinput-day"
+        "href": "#dateinput"
       },
       {
         "text": "Problem with date input year",
diff --git a/app/views/full-page-examples/passport-details/index.js b/app/views/full-page-examples/passport-details/index.js
index d5e80ddee1..64efc1f915 100644
--- a/app/views/full-page-examples/passport-details/index.js
+++ b/app/views/full-page-examples/passport-details/index.js
@@ -8,7 +8,7 @@ module.exports = (app) => {
       body('passport-number')
         .exists()
         .not().isEmpty().withMessage('Enter your passport number'),
-      body('expiry-day')
+      body('expiry')
         .exists()
         .not().isEmpty().withMessage('Enter your expiry day'),
       body('expiry-month')
diff --git a/src/components/date-input/__snapshots__/template.test.js.snap b/src/components/date-input/__snapshots__/template.test.js.snap
index 7eff055d91..ae6da4a808 100644
--- a/src/components/date-input/__snapshots__/template.test.js.snap
+++ b/src/components/date-input/__snapshots__/template.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Date input nested dependant components passes through label params without breaking 1`] = `
 
 <label class="govuk-label govuk-date-input__label"
-       for="dob-day"
+       for="dob"
 >
   Day
 </label>
diff --git a/src/components/date-input/template.njk b/src/components/date-input/template.njk
index b7d4cbacea..3cb8c936f9 100644
--- a/src/components/date-input/template.njk
+++ b/src/components/date-input/template.njk
@@ -52,16 +52,25 @@
   }) | indent(2) | trim }}
 {% endif %}
   <div class="govuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-    {%- if params.id %} id="{{ params.id }}"{% endif %}>
+    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {% for item in dateInputItems %}
+    {#- If the user explicitly sets an id, use this instead of the regular id parameter -#}
+    {%- if item.id -%}
+      {%- set id = item.id -%}
+    {%- else -%}
+      {%- set id = params.id  -%}
+      {#- The first id should not have a prefix so it's easy to link to from the error summary component -#}
+      {%- if not loop.first -%}
+        {%- set id = id + "-" + item.name -%}
+      {%- endif -%}
+    {%- endif -%}
     <div class="govuk-date-input__item">
       {{ govukInput({
         label: {
           text: item.label if item.label else item.name | capitalize,
           classes: "govuk-date-input__label"
         },
-        id: item.id if item.id else (params.id + "-" + item.name),
+        id: id,
         classes: "govuk-date-input__input " + (item.classes if item.classes),
         name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
         value: item.value,
diff --git a/src/components/date-input/template.test.js b/src/components/date-input/template.test.js
index 09a8ac99b8..2f1bc46a36 100644
--- a/src/components/date-input/template.test.js
+++ b/src/components/date-input/template.test.js
@@ -30,15 +30,6 @@ describe('Date input', () => {
       expect($component.hasClass('app-date-input--custom-modifier')).toBeTruthy()
     })
 
-    it('renders with id', () => {
-      const $ = render('date-input', {
-        id: 'my-date-input'
-      })
-
-      const $component = $('.govuk-date-input')
-      expect($component.attr('id')).toEqual('my-date-input')
-    })
-
     it('renders with attributes', () => {
       const $ = render('date-input', {
         attributes: {
@@ -283,8 +274,11 @@ describe('Date input', () => {
         ]
       })
 
-      const $firstItems = $('.govuk-date-input__item:first-child input')
-      expect($firstItems.attr('id')).toEqual('my-date-input-day')
+      const $firstItem = $('.govuk-date-input__item:first-child input')
+      expect($firstItem.attr('id')).toEqual('my-date-input')
+
+      const $lastItem = $('.govuk-date-input__item:last-child input')
+      expect($lastItem.attr('id')).toEqual('my-date-input-year')
     })
 
     it('renders items with value', () => {
diff --git a/src/components/error-summary/error-summary.test.js b/src/components/error-summary/error-summary.test.js
index 73bc06f68b..3b67fe6fdb 100644
--- a/src/components/error-summary/error-summary.test.js
+++ b/src/components/error-summary/error-summary.test.js
@@ -18,7 +18,7 @@ describe('Error Summary', () => {
     ['an input', 'input', 'label[for="input"]'],
     ['a textarea', 'textarea', 'label[for="textarea"]'],
     ['a select', 'select', 'label[for="select"]'],
-    ['a date input', 'dateinput-day', '.test-date-input-legend'],
+    ['a date input', 'dateinput', '.test-date-input-legend'],
     ['a specific field in a date input', 'dateinput2-year', '.test-date-input2-legend'],
     ['a file upload', 'file', 'label[for="file"]'],
     ['a group of radio buttons', 'radios', '#test-radios legend'],