govuk_publishing_components 9.5.1 → 9.5.2

data/node_modules/govuk-frontend/components/checkboxes/README.md

@@ -6,13 +6,13 @@ Let users select one or more options.
 
 ## Guidance
 
-Find out when to use the Checkboxes component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/checkboxes).
+Find out when to use the checkboxes component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/checkboxes).
 
 ## Quick start examples
 
-### Component default
+### Checkboxes
 
-[Preview the checkboxes component](http://govuk-frontend-review.herokuapp.com/components/checkboxes/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/preview)
 
 #### Markup
 
@@ -58,7 +58,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "idPrefix": "nationality",
@@ -87,9 +87,9 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
-### Checkboxes--with-id-plus-name
+### Checkboxes with id and name
 
-[Preview the checkboxes--with-id-plus-name example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-id-plus-name/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-id-and-name/preview)
 
 #### Markup
 
@@ -128,7 +128,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "fieldset": {
@@ -155,9 +155,9 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
-### Checkboxes--with-disabled
+### Checkboxes with disabled item
 
-[Preview the checkboxes--with-disabled example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled-item/preview)
 
 #### Markup
 
@@ -192,7 +192,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "name": "colours",
@@ -213,9 +213,9 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
-### Checkboxes--with-html
+### Checkboxes with legend as a page heading
 
-[Preview the checkboxes--with-html example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-html/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-legend-as-a-page-heading/preview)
 
 #### Markup
 
@@ -223,8 +223,10 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
       <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
 
-      <legend class="govuk-fieldset__legend">
-        <h3 class="govuk-heading-m">Which types of waste do you transport regularly?</h3>
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+        <h1 class="govuk-fieldset__heading">
+          Which types of waste do you transport regularly?
+        </h1>
       </legend>
 
       <span id="waste-hint" class="govuk-hint">
@@ -261,13 +263,15 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "name": "waste",
       "fieldset": {
         "legend": {
-          "html": "<h3 class=\"govuk-heading-m\">Which types of waste do you transport regularly?</h3>"
+          "text": "Which types of waste do you transport regularly?",
+          "classes": "govuk-fieldset__legend--l",
+          "isPageHeading": true
         }
       },
       "hint": {
@@ -289,9 +293,93 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
-### Checkboxes--without-fieldset
+### Checkboxes with a medium legend
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-a-medium-legend/preview)
+
+#### Markup
+
+    <div class="govuk-form-group govuk-form-group--error">
+
+      <fieldset class="govuk-fieldset" aria-describedby="waste-hint waste-error">
+
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+        Which types of waste do you transport regularly?
+      </legend>
+
+      <span id="waste-hint" class="govuk-hint">
+        Select all that apply
+      </span>
+
+      <span id="waste-error" class="govuk-error-message">
+        Select which types of waste you transport regularly
+      </span>
+
+      <div class="govuk-checkboxes">
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
+          <label class="govuk-label govuk-checkboxes__label" for="waste-1">
+            Waste from animal carcasses
+          </label>
+        </div>
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
+          <label class="govuk-label govuk-checkboxes__label" for="waste-2">
+            Waste from mines or quarries
+          </label>
+        </div>
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
+          <label class="govuk-label govuk-checkboxes__label" for="waste-3">
+            Farm or agricultural waste
+          </label>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
+
+    {{ govukCheckboxes({
+      "name": "waste",
+      "fieldset": {
+        "legend": {
+          "text": "Which types of waste do you transport regularly?",
+          "classes": "govuk-fieldset__legend--m"
+        }
+      },
+      "hint": {
+        "text": "Select all that apply"
+      },
+      "errorMessage": {
+        "text": "Select which types of waste you transport regularly"
+      },
+      "items": [
+        {
+          "value": "animal",
+          "text": "Waste from animal carcasses"
+        },
+        {
+          "value": "mines",
+          "text": "Waste from mines or quarries"
+        },
+        {
+          "value": "farm",
+          "text": "Farm or agricultural waste"
+        }
+      ]
+    }) }}
+
+### Checkboxes without fieldset
 
-[Preview the checkboxes--without-fieldset example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/without-fieldset/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/without-fieldset/preview)
 
 #### Markup
 
@@ -326,7 +414,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "name": "colours",
@@ -346,9 +434,9 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
-### Checkboxes--with-extreme-fieldset
+### Checkboxes with all fieldset attributes
 
-[Preview the checkboxes--with-extreme-fieldset example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-extreme-fieldset/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-all-fieldset-attributes/preview)
 
 #### Markup
 
@@ -398,7 +486,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "idPrefix": "example",
@@ -435,9 +523,9 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
-### Checkboxes--with-error
+### Checkboxes with error message
 
-[Preview the checkboxes--with-error example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-error/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-error-message/preview)
 
 #### Markup
 
@@ -446,7 +534,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       <fieldset class="govuk-fieldset" aria-describedby="waste-error">
 
       <legend class="govuk-fieldset__legend">
-        <h3 class="govuk-heading-m">Which types of waste do you transport regularly?</h3>
+        Which types of waste do you transport regularly?
       </legend>
 
       <span id="waste-error" class="govuk-error-message">
@@ -483,7 +571,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+    {% from "checkboxes/macro.njk" import govukCheckboxes %}
 
     {{ govukCheckboxes({
       "name": "waste",
@@ -492,7 +580,7 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       },
       "fieldset": {
         "legend": {
-          "html": "<h3 class=\"govuk-heading-m\">Which types of waste do you transport regularly?</h3>"
+          "text": "Which types of waste do you transport regularly?"
         }
       },
       "items": [

data/node_modules/govuk-frontend/components/checkboxes/_checkboxes.scss

@@ -57,7 +57,8 @@
   }
 
   .govuk-checkboxes__label {
-    display: block;
+    display: inline-block;
+    margin-bottom: 0;
     padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1);
     cursor: pointer;
     // remove 300ms pause on mobile
@@ -107,6 +108,11 @@
 
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+    // Since box-shadows are removed when users customise their colours
+    // We set a transparent outline that is shown instead.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: $govuk-focus-width;
     -webkit-box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
             box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }

data/node_modules/govuk-frontend/components/date-input/README.md

@@ -6,13 +6,13 @@ A component for entering dates, for example - date of birth.
 
 ## Guidance
 
-Find out when to use the Date input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/date-input).
+Find out when to use the date input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/date-input).
 
 ## Quick start examples
 
-### Component default
+### Date input
 
-[Preview the date-input component](http://govuk-frontend-review.herokuapp.com/components/date-input/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/preview)
 
 #### Markup
 
@@ -29,33 +29,33 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
       <div class="govuk-date-input" id="dob">
 
-        <div class="govuk-date-input__item govuk-date-input__item--day">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-day">
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--month">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-month">
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--year">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-year">
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -66,7 +66,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'date-input/macro.njk' import govukDateInput %}
+    {% from "date-input/macro.njk" import govukDateInput %}
 
     {{ govukDateInput({
       "id": "dob",
@@ -81,20 +81,23 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
       },
       "items": [
         {
-          "name": "day"
+          "name": "day",
+          "classes": "govuk-input--width-2"
         },
         {
-          "name": "month"
+          "name": "month",
+          "classes": "govuk-input--width-2"
         },
         {
-          "name": "year"
+          "name": "year",
+          "classes": "govuk-input--width-4"
         }
       ]
     }) }}
 
-### Date-input--with-errors
+### Date input with errors
 
-[Preview the date-input--with-errors example](http://govuk-frontend-review.herokuapp.com/components/date-input/with-errors/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-errors/preview)
 
 #### Markup
 
@@ -115,33 +118,33 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
       <div class="govuk-date-input" id="dob-errors">
 
-        <div class="govuk-date-input__item govuk-date-input__item--day">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-errors-day" name="undefined-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--month">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-errors-month" name="undefined-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--year">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-errors-year" name="undefined-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -152,7 +155,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'date-input/macro.njk' import govukDateInput %}
+    {% from "date-input/macro.njk" import govukDateInput %}
 
     {{ govukDateInput({
       "id": "dob-errors",
@@ -170,22 +173,22 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
       "items": [
         {
           "name": "day",
-          "classes": "govuk-input--error"
+          "classes": "govuk-input--width-2 govuk-input--error"
         },
         {
           "name": "month",
-          "classes": "govuk-input--error"
+          "classes": "govuk-input--width-2 govuk-input--error"
         },
         {
           "name": "year",
-          "classes": "govuk-input--error"
+          "classes": "govuk-input--width-4 govuk-input--error"
         }
       ]
     }) }}
 
-### Date-input--with-day-error
+### Date input with error on day input
 
-[Preview the date-input--with-day-error example](http://govuk-frontend-review.herokuapp.com/components/date-input/with-day-error/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-error-on-day-input/preview)
 
 #### Markup
 
@@ -206,33 +209,33 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
       <div class="govuk-date-input" id="dob-day-error">
 
-        <div class="govuk-date-input__item govuk-date-input__item--day">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--month">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--year">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -243,7 +246,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'date-input/macro.njk' import govukDateInput %}
+    {% from "date-input/macro.njk" import govukDateInput %}
 
     {{ govukDateInput({
       "id": "dob-day-error",
@@ -262,20 +265,22 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
       "items": [
         {
           "name": "day",
-          "classes": "govuk-input--error"
+          "classes": "govuk-input--width-2 govuk-input--error"
         },
         {
-          "name": "month"
+          "name": "month",
+          "classes": "govuk-input--width-2"
         },
         {
-          "name": "year"
+          "name": "year",
+          "classes": "govuk-input--width-4"
         }
       ]
     }) }}
 
-### Date-input--with-month-error
+### Date input with error on month input
 
-[Preview the date-input--with-month-error example](http://govuk-frontend-review.herokuapp.com/components/date-input/with-month-error/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-error-on-month-input/preview)
 
 #### Markup
 
@@ -296,33 +301,33 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
       <div class="govuk-date-input" id="dob-month-error">
 
-        <div class="govuk-date-input__item govuk-date-input__item--day">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--month">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--year">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -333,7 +338,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'date-input/macro.njk' import govukDateInput %}
+    {% from "date-input/macro.njk" import govukDateInput %}
 
     {{ govukDateInput({
       "id": "dob-month-error",
@@ -351,21 +356,23 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
       },
       "items": [
         {
-          "name": "day"
+          "name": "day",
+          "classes": "govuk-input--width-2"
         },
         {
           "name": "month",
-          "classes": "govuk-input--error"
+          "classes": "govuk-input--width-2 govuk-input--error"
         },
         {
-          "name": "year"
+          "name": "year",
+          "classes": "govuk-input--width-4"
         }
       ]
     }) }}
 
-### Date-input--with-year-error
+### Date input with error on year input
 
-[Preview the date-input--with-year-error example](http://govuk-frontend-review.herokuapp.com/components/date-input/with-year-error/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-error-on-year-input/preview)
 
 #### Markup
 
@@ -386,33 +393,33 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
       <div class="govuk-date-input" id="dob-year-error">
 
-        <div class="govuk-date-input__item govuk-date-input__item--day">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
               Day
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--month">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
               Month
             </label>
 
-            <input class="govuk-input govuk-date-input__input" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
           </div>
         </div>
 
-        <div class="govuk-date-input__item govuk-date-input__item--year">
+        <div class="govuk-date-input__item">
           <div class="govuk-form-group">
             <label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
               Year
             </label>
 
-            <input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
           </div>
         </div>
 
@@ -423,7 +430,7 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
 
 #### Macro
 
-    {% from 'date-input/macro.njk' import govukDateInput %}
+    {% from "date-input/macro.njk" import govukDateInput %}
 
     {{ govukDateInput({
       "id": "dob-year-error",
@@ -441,18 +448,91 @@ Find out when to use the Date input component in your service in the [GOV.UK Des
       },
       "items": [
         {
-          "name": "day"
+          "name": "day",
+          "classes": "govuk-input--width-2"
         },
         {
-          "name": "month"
+          "name": "month",
+          "classes": "govuk-input--width-2"
         },
         {
           "name": "year",
-          "classes": "govuk-input--error"
+          "classes": "govuk-input--width-4 govuk-input--error"
         }
       ]
     }) }}
 
+### Date input with default items
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-default-items/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+    <fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
+
+      <legend class="govuk-fieldset__legend">
+        What is your date of birth?
+      </legend>
+
+      <span id="dob-hint" class="govuk-hint">
+        For example, 31 3 1980
+      </span>
+
+      <div class="govuk-date-input" id="dob">
+
+        <div class="govuk-date-input__item">
+          <div class="govuk-form-group">
+            <label class="govuk-label govuk-date-input__label" for="dob-day">
+              Day
+            </label>
+
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
+          </div>
+        </div>
+
+        <div class="govuk-date-input__item">
+          <div class="govuk-form-group">
+            <label class="govuk-label govuk-date-input__label" for="dob-month">
+              Month
+            </label>
+
+            <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
+          </div>
+        </div>
+
+        <div class="govuk-date-input__item">
+          <div class="govuk-form-group">
+            <label class="govuk-label govuk-date-input__label" for="dob-year">
+              Year
+            </label>
+
+            <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
+          </div>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from "date-input/macro.njk" import govukDateInput %}
+
+    {{ govukDateInput({
+      "id": "dob",
+      "name": "dob",
+      "fieldset": {
+        "legend": {
+          "text": "What is your date of birth?"
+        }
+      },
+      "hint": {
+        "text": "For example, 31 3 1980"
+      }
+    }) }}
+
 ## Requirements
 
 ### Build tool configuration