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

@@ -38,7 +38,7 @@
       },
       {
         "text": "Problem with date input",
-        "href": "#dateinput-day"
+        "href": "#dateinput"
       },
       {
         "text": "Problem with date input year",

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')

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>

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,

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', () => {

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'],