Date input macro styling breaks if item name is changed

[olliewilliams-CH]

Issue type: Bug
Component: Date Input
Location: Macro - template.njk
Version: 1.0.0
Prototype Kit Version: 7.0.0-beta.9

Details:
When using the nunjucks macro to produce a date input component, changing the name of the year object inside items with break the styling on the year input field that makes it 4 characters in width rather than the default 2 characters. This happens because the value of item.name for each input field provided via the macro is recycled to also set the CSS class on the inputs container div. This is a fixed class name that, if changed, will result in a loss of styles for that class.

Reproduction:
Use the default macro code from the docs to create a date input component. Change item.name for the year field from "year" to "Year" or any other string.

Code Sample:

<div class="govuk-date-input__item govuk-date-input__item--year">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="illness-end-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input" id="illness-end-year" name="illnessEnd-year" type="number" pattern="[0-9]*">
      </div>
    </div>