Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

govuk-frontend

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

govuk-frontend - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

tools/_px-to-rem.scss

all.js

		@@ -1680,4 +1680,6 @@ (function (global, factory) {
		function initAll () {
		// Find all buttons with [role=button] on the document to enhance.
		new Button(document).init();

		// Find all global details elements to enhance.
		var $details = document.querySelectorAll('details');
		@@ -1693,3 +1695,3 @@ nodeListForEach($details, function ($detail) {

		// Find first Error Summary module to enhance.
		// Find first error summary module to enhance.
		var $errorSummary = document.querySelector('[data-module="error-summary"]');
		@@ -1696,0 +1698,0 @@ new ErrorSummary($errorSummary).init();

components/back-link/README.md

		@@ -9,23 +9,39 @@ # Back link

		Find out when to use the Back link component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/back-link).
		Find out when to use the back link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/back-link).

		## Quick start examples

		### Component default
		### Back link

		[Preview the back-link component](http://govuk-frontend-review.herokuapp.com/components/back-link/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/back-link/preview)

		#### Markup

		<a href="https://gov.uk" class="govuk-back-link">Back</a>
		<a href="#" class="govuk-back-link">Back</a>

		#### Macro

		{% from 'back-link/macro.njk' import govukBackLink %}
		{% from "back-link/macro.njk" import govukBackLink %}

		{{ govukBackLink({
		"href": "https://gov.uk",
		"text": "Back"
		"href": "#"
		}) }}

		### Back link with custom text

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/back-link/with-custom-text/preview)

		#### Markup

		<a href="#" class="govuk-back-link">Back to home</a>

		#### Macro

		{% from "back-link/macro.njk" import govukBackLink %}

		{{ govukBackLink({
		"href": "#",
		"text": "Back to home"
		}) }}

		## Requirements
		@@ -32,0 +48,0 @@

components/breadcrumbs/README.md

		@@ -9,9 +9,9 @@ # Breadcrumbs

		Find out when to use the Breadcrumbs component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/breadcrumbs).
		Find out when to use the breadcrumbs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/breadcrumbs).

		## Quick start examples

		### Component default
		### Breadcrumbs

		[Preview the breadcrumbs component](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/preview)

		@@ -24,3 +24,3 @@ #### Markup
		<li class="govuk-breadcrumbs__list-item">
		<a class="govuk-breadcrumbs__link" href="/section">Section 1</a>
		<a class="govuk-breadcrumbs__link" href="/section">Section</a>
		</li>
		@@ -37,3 +37,3 @@

		{% from 'breadcrumbs/macro.njk' import govukBreadcrumbs %}
		{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

		@@ -43,3 +43,3 @@ {{ govukBreadcrumbs({
		{
		"text": "Section 1",
		"text": "Section",
		"href": "/section"
		@@ -54,5 +54,5 @@ },

		### Breadcrumbs--single-section
		### Breadcrumbs with one level

		[Preview the breadcrumbs--single-section example](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/single-section/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/with-one-level/preview)

		@@ -65,3 +65,3 @@ #### Markup
		<li class="govuk-breadcrumbs__list-item">
		<a class="govuk-breadcrumbs__link" href="/section">Section 1</a>
		<a class="govuk-breadcrumbs__link" href="/section">Section</a>
		</li>
		@@ -74,3 +74,3 @@

		{% from 'breadcrumbs/macro.njk' import govukBreadcrumbs %}
		{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

		@@ -80,3 +80,3 @@ {{ govukBreadcrumbs({
		{
		"text": "Section 1",
		"text": "Section",
		"href": "/section"
		@@ -87,5 +87,5 @@ }

		### Breadcrumbs--many-breadcrumbs
		### Breadcrumbs with multiple levels

		[Preview the breadcrumbs--many-breadcrumbs example](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/many-breadcrumbs/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/with-multiple-levels/preview)

		@@ -102,11 +102,11 @@ #### Markup
		<li class="govuk-breadcrumbs__list-item">
		<a class="govuk-breadcrumbs__link" href="/section">Section 3</a>
		<a class="govuk-breadcrumbs__link" href="/section">Section</a>
		</li>

		<li class="govuk-breadcrumbs__list-item">
		<a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section 1</a>
		<a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
		</li>

		<li class="govuk-breadcrumbs__list-item">
		<a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-sub-section">Sub Sub-section 1</a>
		<a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
		</li>
		@@ -119,3 +119,3 @@

		{% from 'breadcrumbs/macro.njk' import govukBreadcrumbs %}
		{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

		@@ -129,11 +129,11 @@ {{ govukBreadcrumbs({
		{
		"text": "Section 3",
		"text": "Section",
		"href": "/section"
		},
		{
		"text": "Sub-section 1",
		"text": "Sub-section",
		"href": "/section/sub-section"
		},
		{
		"text": "Sub Sub-section 1",
		"text": "Sub Sub-section",
		"href": "/section/sub-section/sub-sub-section"
		@@ -144,5 +144,5 @@ }

		### Breadcrumbs--no-home-section
		### Breadcrumbs without the home section

		[Preview the breadcrumbs--no-home-section example](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/no-home-section/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/without-the-home-section/preview)

		@@ -167,3 +167,3 @@ #### Markup

		{% from 'breadcrumbs/macro.njk' import govukBreadcrumbs %}
		{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

		@@ -183,5 +183,5 @@ {{ govukBreadcrumbs({

		### Breadcrumbs--last-breadcrumb-is-current-page
		### Breadcrumbs with last breadcrumb as current page

		[Preview the breadcrumbs--last-breadcrumb-is-current-page example](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/last-breadcrumb-is-current-page/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/with-last-breadcrumb-as-current-page/preview)

		@@ -208,3 +208,3 @@ #### Markup

		{% from 'breadcrumbs/macro.njk' import govukBreadcrumbs %}
		{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

		@@ -211,0 +211,0 @@ {{ govukBreadcrumbs({

components/button/README.md

		@@ -9,3 +9,3 @@ # Button

		Find out when to use the Button component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/button).
		Find out when to use the button component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/button).

		@@ -16,5 +16,5 @@ ## Quick start examples

		### Component default
		### Button

		[Preview the button component](http://govuk-frontend-review.herokuapp.com/components/button/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/preview)

		@@ -29,3 +29,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -36,5 +36,5 @@ {{ govukButton({

		### Button--disabled
		### Button disabled

		[Preview the button--disabled example](http://govuk-frontend-review.herokuapp.com/components/button/disabled/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/disabled/preview)

		@@ -49,3 +49,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -57,5 +57,5 @@ {{ govukButton({

		### Button--link
		### Button link

		[Preview the button--link example](http://govuk-frontend-review.herokuapp.com/components/button/link/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/link/preview)

		@@ -70,3 +70,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -78,5 +78,5 @@ {{ govukButton({

		### Button--disabled-link
		### Button link disabled

		[Preview the button--disabled-link example](http://govuk-frontend-review.herokuapp.com/components/button/disabled-link/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/link-disabled/preview)

		@@ -91,3 +91,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -100,5 +100,5 @@ {{ govukButton({

		### Button--start-link
		### Button start link

		[Preview the button--start-link example](http://govuk-frontend-review.herokuapp.com/components/button/start-link/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/start-link/preview)

		@@ -113,3 +113,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -122,5 +122,5 @@ {{ govukButton({

		### Button--explicit-input-button
		### Button input

		[Preview the button--explicit-input-button example](http://govuk-frontend-review.herokuapp.com/components/button/explicit-input-button/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/input/preview)

		@@ -133,3 +133,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -142,5 +142,5 @@ {{ govukButton({

		### Button--explicit-input-button-disabled
		### Button input disabled

		[Preview the button--explicit-input-button-disabled example](http://govuk-frontend-review.herokuapp.com/components/button/explicit-input-button-disabled/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/input-disabled/preview)

		@@ -153,3 +153,3 @@ #### Markup

		{% from 'button/macro.njk' import govukButton %}
		{% from "button/macro.njk" import govukButton %}

		@@ -156,0 +156,0 @@ {{ govukButton({

142

components/checkboxes/README.md

		@@ -9,9 +9,9 @@ # Checkboxes

		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)

		@@ -62,3 +62,3 @@ #### Markup

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -92,5 +92,5 @@ {{ govukCheckboxes({

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

		@@ -134,3 +134,3 @@ #### Markup

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -162,5 +162,5 @@ {{ govukCheckboxes({

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

		@@ -200,3 +200,3 @@ #### Markup

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -222,5 +222,5 @@ {{ govukCheckboxes({

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

		@@ -233,4 +233,6 @@ #### Markup

		<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>
		@@ -272,3 +274,3 @@

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -279,3 +281,5 @@ {{ govukCheckboxes({
		"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
		}
		@@ -302,8 +306,92 @@ },

		### Checkboxes--without-fieldset
		### Checkboxes with a medium legend

		[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/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 this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/without-fieldset/preview)

		#### Markup

		<div class="govuk-form-group">
		@@ -340,3 +428,3 @@

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -361,5 +449,5 @@ {{ govukCheckboxes({

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

		@@ -414,3 +502,3 @@ #### Markup

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -452,5 +540,5 @@ {{ govukCheckboxes({

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

		@@ -464,3 +552,3 @@ #### Markup
		<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>
		@@ -502,3 +590,3 @@

		{% from 'checkboxes/macro.njk' import govukCheckboxes %}
		{% from "checkboxes/macro.njk" import govukCheckboxes %}

		@@ -512,3 +600,3 @@ {{ govukCheckboxes({
		"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?"
		}
		@@ -515,0 +603,0 @@ },

202

components/date-input/README.md

		@@ -9,9 +9,9 @@ # Date input

		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)

		@@ -33,3 +33,3 @@ #### Markup

		<div class="govuk-date-input__item govuk-date-input__item--day">
		<div class="govuk-date-input__item">
		<div class="govuk-form-group">
		@@ -40,7 +40,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-day">

		<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">
		@@ -51,7 +51,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-month">

		<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">
		@@ -62,3 +62,3 @@ <label class="govuk-label govuk-date-input__label" for="dob-year">

		<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>
		@@ -74,3 +74,3 @@ </div>

		{% from 'date-input/macro.njk' import govukDateInput %}
		{% from "date-input/macro.njk" import govukDateInput %}

		@@ -90,9 +90,12 @@ {{ govukDateInput({
		{
		"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"
		}
		@@ -102,5 +105,5 @@ ]

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

		@@ -126,3 +129,3 @@ #### Markup

		<div class="govuk-date-input__item govuk-date-input__item--day">
		<div class="govuk-date-input__item">
		<div class="govuk-form-group">
		@@ -133,7 +136,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-errors-day">

		<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">
		@@ -144,7 +147,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-errors-month">

		<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">
		@@ -155,3 +158,3 @@ <label class="govuk-label govuk-date-input__label" for="dob-errors-year">

		<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>
		@@ -167,3 +170,3 @@ </div>

		{% from 'date-input/macro.njk' import govukDateInput %}
		{% from "date-input/macro.njk" import govukDateInput %}

		@@ -186,11 +189,11 @@ {{ govukDateInput({
		"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"
		}
		@@ -200,5 +203,5 @@ ]

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

		@@ -224,3 +227,3 @@ #### Markup

		<div class="govuk-date-input__item govuk-date-input__item--day">
		<div class="govuk-date-input__item">
		<div class="govuk-form-group">
		@@ -231,7 +234,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">

		<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">
		@@ -242,7 +245,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-day-error-month">

		<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">
		@@ -253,3 +256,3 @@ <label class="govuk-label govuk-date-input__label" for="dob-day-error-year">

		<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>
		@@ -265,3 +268,3 @@ </div>

		{% from 'date-input/macro.njk' import govukDateInput %}
		{% from "date-input/macro.njk" import govukDateInput %}

		@@ -285,9 +288,11 @@ {{ govukDateInput({
		"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"
		}
		@@ -297,5 +302,5 @@ ]

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

		@@ -321,3 +326,3 @@ #### Markup

		<div class="govuk-date-input__item govuk-date-input__item--day">
		<div class="govuk-date-input__item">
		<div class="govuk-form-group">
		@@ -328,7 +333,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">

		<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">
		@@ -339,7 +344,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-month-error-month">

		<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">
		@@ -350,3 +355,3 @@ <label class="govuk-label govuk-date-input__label" for="dob-month-error-year">

		<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>
		@@ -362,3 +367,3 @@ </div>

		{% from 'date-input/macro.njk' import govukDateInput %}
		{% from "date-input/macro.njk" import govukDateInput %}

		@@ -381,10 +386,12 @@ {{ govukDateInput({
		{
		"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"
		}
		@@ -394,5 +401,5 @@ ]

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

		@@ -418,3 +425,3 @@ #### Markup

		<div class="govuk-date-input__item govuk-date-input__item--day">
		<div class="govuk-date-input__item">
		<div class="govuk-form-group">
		@@ -425,7 +432,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">

		<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">
		@@ -436,7 +443,7 @@ <label class="govuk-label govuk-date-input__label" for="dob-year-error-month">

		<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">
		@@ -447,3 +454,3 @@ <label class="govuk-label govuk-date-input__label" for="dob-year-error-year">

		<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>
		@@ -459,3 +466,3 @@ </div>

		{% from 'date-input/macro.njk' import govukDateInput %}
		{% from "date-input/macro.njk" import govukDateInput %}

		@@ -478,10 +485,12 @@ {{ govukDateInput({
		{
		"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"
		}
		@@ -491,2 +500,73 @@ ]

		### 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
		@@ -493,0 +573,0 @@

components/details/README.md

		@@ -9,9 +9,9 @@ # Details

		Find out when to use the Details component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/details).
		Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/details).

		## Quick start examples

		### Component default
		### Details

		[Preview the details component](http://govuk-frontend-review.herokuapp.com/components/details/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/preview)

		@@ -33,3 +33,3 @@ #### Markup

		{% from 'details/macro.njk' import govukDetails %}
		{% from "details/macro.njk" import govukDetails %}

		@@ -41,5 +41,5 @@ {{ govukDetails({

		### Details--expanded
		### Details expanded

		[Preview the details--expanded example](http://govuk-frontend-review.herokuapp.com/components/details/expanded/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/expanded/preview)

		@@ -61,3 +61,3 @@ #### Markup

		{% from 'details/macro.njk' import govukDetails %}
		{% from "details/macro.njk" import govukDetails %}

		@@ -71,5 +71,5 @@ {{ govukDetails({

		### Details--with-html
		### Details with html

		[Preview the details--with-html example](http://govuk-frontend-review.herokuapp.com/components/details/with-html/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/with-html/preview)

		@@ -99,3 +99,3 @@ #### Markup

		{% from 'details/macro.njk' import govukDetails %}
		{% from "details/macro.njk" import govukDetails %}

		@@ -102,0 +102,0 @@ {{ govukDetails({

components/error-message/README.md

		@@ -9,9 +9,9 @@ # Error message

		Find out when to use the Error message component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/error-message).
		Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).

		## Quick start examples

		### Component default
		### Error message

		[Preview the error-message component](http://govuk-frontend-review.herokuapp.com/components/error-message/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/error-message/preview)

		@@ -26,3 +26,3 @@ #### Markup

		{% from 'error-message/macro.njk' import govukErrorMessage %}
		{% from "error-message/macro.njk" import govukErrorMessage %}

		@@ -29,0 +29,0 @@ {{ govukErrorMessage({

components/error-summary/README.md

		@@ -9,9 +9,9 @@ # Error summary

		Find out when to use the Error summary component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/error-summary).
		Find out when to use the error summary component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-summary).

		## Quick start examples

		### Component default
		### Error summary

		[Preview the error-summary component](http://govuk-frontend-review.herokuapp.com/components/error-summary/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/error-summary/preview)

		@@ -50,3 +50,3 @@ #### Markup

		{% from 'error-summary/macro.njk' import govukErrorSummary %}
		{% from "error-summary/macro.njk" import govukErrorSummary %}

		@@ -63,3 +63,3 @@ {{ govukErrorSummary({
		{
		"html": "Descriptive link to the question with an error",
		"text": "Descriptive link to the question with an error",
		"href": "#example-error-1"
		@@ -66,0 +66,0 @@ }

components/fieldset/README.md

		@@ -9,9 +9,9 @@ # Fieldset

		Find out when to use the Fieldset component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/fieldset).
		Find out when to use the fieldset component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/fieldset).

		## Quick start examples

		### Component default
		### Fieldset

		[Preview the fieldset component](http://govuk-frontend-review.herokuapp.com/components/fieldset/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/fieldset/preview)

		@@ -30,3 +30,3 @@ #### Markup

		{% from 'fieldset/macro.njk' import govukFieldset %}
		{% from "fieldset/macro.njk" import govukFieldset %}

		@@ -39,5 +39,5 @@ {{ govukFieldset({

		### Fieldset--as page heading
		### Fieldset as page heading

		[Preview the fieldset--as page heading example](http://govuk-frontend-review.herokuapp.com/components/fieldset/as page heading/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/fieldset/as-page-heading/preview)

		@@ -58,3 +58,3 @@ #### Markup

		{% from 'fieldset/macro.njk' import govukFieldset %}
		{% from "fieldset/macro.njk" import govukFieldset %}

		@@ -61,0 +61,0 @@ {{ govukFieldset({

components/file-upload/README.md

		@@ -9,9 +9,9 @@ # File upload

		Find out when to use the File upload component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/file-upload).
		Find out when to use the file upload component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/file-upload).

		## Quick start examples

		### Component default
		### File upload

		[Preview the file-upload component](http://govuk-frontend-review.herokuapp.com/components/file-upload/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/preview)

		@@ -30,3 +30,3 @@ #### Markup

		{% from 'file-upload/macro.njk' import govukFileUpload %}
		{% from "file-upload/macro.njk" import govukFileUpload %}

		@@ -41,5 +41,5 @@ {{ govukFileUpload({

		### File-upload--with-hint-text
		### File upload with hint text

		[Preview the file-upload--with-hint-text example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-hint-text/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-hint-text/preview)

		@@ -62,3 +62,3 @@ #### Markup

		{% from 'file-upload/macro.njk' import govukFileUpload %}
		{% from "file-upload/macro.njk" import govukFileUpload %}

		@@ -76,5 +76,5 @@ {{ govukFileUpload({

		### File-upload--with-error-message
		### File upload with error message

		[Preview the file-upload--with-error-message example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-error-message/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-error-message/preview)

		@@ -101,3 +101,3 @@ #### Markup

		{% from 'file-upload/macro.njk' import govukFileUpload %}
		{% from "file-upload/macro.njk" import govukFileUpload %}

		@@ -118,5 +118,5 @@ {{ govukFileUpload({

		### File-upload--with-value-and-attributes
		### File upload with value and attributes

		[Preview the file-upload--with-value-and-attributes example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-value-and-attributes/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-value-and-attributes/preview)

		@@ -135,3 +135,3 @@ #### Markup

		{% from 'file-upload/macro.njk' import govukFileUpload %}
		{% from "file-upload/macro.njk" import govukFileUpload %}

		@@ -150,5 +150,5 @@ {{ govukFileUpload({

		### File-upload--with-label-as-page-heading
		### File upload with label as page heading

		[Preview the file-upload--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-label-as-page-heading/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-label-as-page-heading/preview)

		@@ -170,3 +170,3 @@ #### Markup

		{% from 'file-upload/macro.njk' import govukFileUpload %}
		{% from "file-upload/macro.njk" import govukFileUpload %}

		@@ -173,0 +173,0 @@ {{ govukFileUpload({

components/footer/README.md

		@@ -9,9 +9,9 @@ # Footer

		Find out when to use the Footer component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/footer).
		Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).

		## Quick start examples

		### Component default
		### Footer

		[Preview the footer component](http://govuk-frontend-review.herokuapp.com/components/footer/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/footer/preview)

		@@ -52,3 +52,3 @@ #### Markup
		class="govuk-footer__link govuk-footer__copyright-logo"
		href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"
		href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
		>© Crown copyright</a>
		@@ -62,3 +62,3 @@ </div>

		{% from 'footer/macro.njk' import govukFooter %}
		{% from "footer/macro.njk" import govukFooter %}

		@@ -65,0 +65,0 @@ {{ govukFooter({}) }}

components/header/README.md

		@@ -9,9 +9,9 @@ # Header

		Find out when to use the Header component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/header).
		Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header).

		## Quick start examples

		### Component default
		### Header

		[Preview the header component](http://govuk-frontend-review.herokuapp.com/components/header/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/preview)

		@@ -49,5 +49,4 @@ #### Markup
		</a>
		</div><div class="govuk-header__content">
		</div>

		</div>
		</div>
		@@ -58,9 +57,9 @@ </header>

		{% from 'header/macro.njk' import govukHeader %}
		{% from "header/macro.njk" import govukHeader %}

		{{ govukHeader({}) }}

		### Header--with-service-name
		### Header with service name

		[Preview the header--with-service-name example](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name/preview)

		@@ -98,4 +97,6 @@ #### Markup
		</a>
		</div><div class="govuk-header__content">
		</div>

		<div class="govuk-header__content">

		<a href="/components/header" class="govuk-header__link govuk-header__link--service-name">
		@@ -106,2 +107,3 @@ Service Name
		</div>

		</div>
		@@ -112,3 +114,3 @@ </header>

		{% from 'header/macro.njk' import govukHeader %}
		{% from "header/macro.njk" import govukHeader %}

		@@ -120,5 +122,5 @@ {{ govukHeader({

		### Header--with-navigation
		### Header with navigation

		[Preview the header--with-navigation example](http://govuk-frontend-review.herokuapp.com/components/header/with-navigation/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/with-navigation/preview)

		@@ -156,4 +158,6 @@ #### Markup
		</a>
		</div><div class="govuk-header__content">
		</div>

		<div class="govuk-header__content">

		<button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
		@@ -191,2 +195,3 @@ <nav>
		</div>

		</div>
		@@ -197,3 +202,3 @@ </header>

		{% from 'header/macro.njk' import govukHeader %}
		{% from "header/macro.njk" import govukHeader %}

		@@ -222,5 +227,5 @@ {{ govukHeader({

		### Header--with-service-name-and-navigation
		### Header with service name and navigation

		[Preview the header--with-service-name-and-navigation example](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name-and-navigation/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name-and-navigation/preview)

		@@ -258,4 +263,6 @@ #### Markup
		</a>
		</div><div class="govuk-header__content">
		</div>

		<div class="govuk-header__content">

		<a href="/components/header" class="govuk-header__link govuk-header__link--service-name">
		@@ -297,2 +304,3 @@ Service Name
		</div>

		</div>
		@@ -303,3 +311,3 @@ </header>

		{% from 'header/macro.njk' import govukHeader %}
		{% from "header/macro.njk" import govukHeader %}

		@@ -306,0 +314,0 @@ {{ govukHeader({

components/hint/README.md

		@@ -9,5 +9,5 @@ # Hint

		### Component default
		### Hint

		[Preview the hint component](http://govuk-frontend-review.herokuapp.com/components/hint/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/preview)

		@@ -17,3 +17,5 @@ #### Markup
		<span class="govuk-hint">
		It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		It’s on your National Insurance card, benefit letter, payslip or P60.
		For example, ‘QQ 12 34 56 C’.

		</span>
		@@ -23,11 +25,11 @@

		{% from 'hint/macro.njk' import govukHint %}
		{% from "hint/macro.njk" import govukHint %}

		{{ govukHint({
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60.\nFor example, ‘QQ 12 34 56 C’.\n"
		}) }}

		### Hint--with html
		### Hint with html

		[Preview the hint--with html example](http://govuk-frontend-review.herokuapp.com/components/hint/with html/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/with-html/preview)

		@@ -37,3 +39,5 @@ #### Markup
		<span class="govuk-hint">
		It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>. For example, ‘QQ 12 34 56 C’.
		It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.
		For example, ‘QQ 12 34 56 C’.

		</span>
		@@ -43,6 +47,6 @@

		{% from 'hint/macro.njk' import govukHint %}
		{% from "hint/macro.njk" import govukHint %}

		{{ govukHint({
		"html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>. For example, ‘QQ 12 34 56 C’."
		"html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, ‘QQ 12 34 56 C’.\n"
		}) }}
		@@ -49,0 +53,0 @@

196

components/input/README.md

		@@ -9,9 +9,9 @@ # Input

		Find out when to use the Input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).
		Find out when to use the input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).

		## Quick start examples

		### Component default
		### Input

		[Preview the input component](http://govuk-frontend-review.herokuapp.com/components/input/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/preview)

		@@ -30,3 +30,3 @@ #### Markup

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -41,5 +41,5 @@ {{ govukInput({

		### Input--with-hint-text
		### Input with hint text

		[Preview the input--with-hint-text example](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)

		@@ -62,3 +62,3 @@ #### Markup

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -76,5 +76,5 @@ {{ govukInput({

		### Input--with-error-message
		### Input with error message

		[Preview the input--with-error-message example](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)

		@@ -89,3 +89,3 @@ #### Markup
		<span id="input-with-error-message-hint" class="govuk-hint">
		It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		</span>
		@@ -102,3 +102,3 @@

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -110,3 +110,3 @@ {{ govukInput({
		"hint": {
		"html": "It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		},
		@@ -120,5 +120,5 @@ "id": "input-with-error-message",

		### Input--width-10
		### Input with width-2 class

		[Preview the input--width-10 example](http://govuk-frontend-review.herokuapp.com/components/input/width-10/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-2-class/preview)

		@@ -128,2 +128,138 @@ #### Markup
		<div class="govuk-form-group">
		<label class="govuk-label" for="input-width-2">
		National insurance number
		</label>

		<span id="input-width-2-hint" class="govuk-hint">
		It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		</span>

		<input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
		</div>

		#### Macro

		{% from "input/macro.njk" import govukInput %}

		{{ govukInput({
		"label": {
		"text": "National insurance number"
		},
		"hint": {
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		},
		"id": "input-width-2",
		"name": "test-width-2",
		"classes": "govuk-input--width-2"
		}) }}

		### Input with width-3 class

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-3-class/preview)

		#### Markup

		<div class="govuk-form-group">
		<label class="govuk-label" for="input-width-3">
		National insurance number
		</label>

		<span id="input-width-3-hint" class="govuk-hint">
		It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		</span>

		<input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
		</div>

		#### Macro

		{% from "input/macro.njk" import govukInput %}

		{{ govukInput({
		"label": {
		"text": "National insurance number"
		},
		"hint": {
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		},
		"id": "input-width-3",
		"name": "test-width-3",
		"classes": "govuk-input--width-3"
		}) }}

		### Input with width-4 class

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-4-class/preview)

		#### Markup

		<div class="govuk-form-group">
		<label class="govuk-label" for="input-width-4">
		National insurance number
		</label>

		<span id="input-width-4-hint" class="govuk-hint">
		It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		</span>

		<input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
		</div>

		#### Macro

		{% from "input/macro.njk" import govukInput %}

		{{ govukInput({
		"label": {
		"text": "National insurance number"
		},
		"hint": {
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		},
		"id": "input-width-4",
		"name": "test-width-4",
		"classes": "govuk-input--width-4"
		}) }}

		### Input with width-5 class

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-5-class/preview)

		#### Markup

		<div class="govuk-form-group">
		<label class="govuk-label" for="input-width-5">
		National insurance number
		</label>

		<span id="input-width-5-hint" class="govuk-hint">
		It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
		</span>

		<input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
		</div>

		#### Macro

		{% from "input/macro.njk" import govukInput %}

		{{ govukInput({
		"label": {
		"text": "National insurance number"
		},
		"hint": {
		"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
		},
		"id": "input-width-5",
		"name": "test-width-5",
		"classes": "govuk-input--width-5"
		}) }}

		### Input with width-10 class

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-10-class/preview)

		#### Markup

		<div class="govuk-form-group">
		<label class="govuk-label" for="input-width-10">
		@@ -137,3 +273,3 @@ National insurance number

		<input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-name-4" type="text" aria-describedby="input-width-10-hint">
		<input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
		</div>
		@@ -143,3 +279,3 @@

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -154,9 +290,9 @@ {{ govukInput({
		"id": "input-width-10",
		"name": "test-name-4",
		"name": "test-width-10",
		"classes": "govuk-input--width-10"
		}) }}

		### Input--width-20
		### Input with width-20 class

		[Preview the input--width-20 example](http://govuk-frontend-review.herokuapp.com/components/input/width-20/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-20-class/preview)

		@@ -174,3 +310,3 @@ #### Markup

		<input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-name-5" type="text" aria-describedby="input-width-20-hint">
		<input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
		</div>
		@@ -180,3 +316,3 @@

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -191,9 +327,9 @@ {{ govukInput({
		"id": "input-width-20",
		"name": "test-name-5",
		"name": "test-width-20",
		"classes": "govuk-input--width-20"
		}) }}

		### Input--width-30
		### Input with width-30 class

		[Preview the input--width-30 example](http://govuk-frontend-review.herokuapp.com/components/input/width-30/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-30-class/preview)

		@@ -211,3 +347,3 @@ #### Markup

		<input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-name-6" type="text" aria-describedby="input-width-30-hint">
		<input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
		</div>
		@@ -217,3 +353,3 @@

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -228,9 +364,9 @@ {{ govukInput({
		"id": "input-width-30",
		"name": "test-name-6",
		"name": "test-width-30",
		"classes": "govuk-input--width-30"
		}) }}

		### Input--with-label-as-page-heading
		### Input with label as page heading

		[Preview the input--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)

		@@ -252,3 +388,3 @@ #### Markup

		{% from 'input/macro.njk' import govukInput %}
		{% from "input/macro.njk" import govukInput %}

		@@ -255,0 +391,0 @@ {{ govukInput({

components/inset-text/README.md

		@@ -9,5 +9,5 @@ # Inset text

		### Component default
		### Inset text

		[Preview the inset-text component](http://govuk-frontend-review.herokuapp.com/components/inset-text/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/inset-text/preview)

		@@ -22,3 +22,3 @@ #### Markup

		{% from 'inset-text/macro.njk' import govukInsetText %}
		{% from "inset-text/macro.njk" import govukInsetText %}

		@@ -29,5 +29,5 @@ {{ govukInsetText({

		### Inset-text--with html
		### Inset text with html

		[Preview the inset-text--with html example](http://govuk-frontend-review.herokuapp.com/components/inset-text/with html/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/inset-text/with-html/preview)

		@@ -42,3 +42,3 @@ #### Markup

		{% from 'inset-text/macro.njk' import govukInsetText %}
		{% from "inset-text/macro.njk" import govukInsetText %}

		@@ -45,0 +45,0 @@ {{ govukInsetText({

components/label/README.md

		@@ -9,5 +9,5 @@ # Label

		### Component default
		### Label

		[Preview the label component](http://govuk-frontend-review.herokuapp.com/components/label/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/preview)

		@@ -22,3 +22,3 @@ #### Markup

		{% from 'label/macro.njk' import govukLabel %}
		{% from "label/macro.njk" import govukLabel %}

		@@ -29,5 +29,5 @@ {{ govukLabel({

		### Label--with bold text
		### Label with bold text

		[Preview the label--with bold text example](http://govuk-frontend-review.herokuapp.com/components/label/with bold text/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/with-bold-text/preview)

		@@ -42,3 +42,3 @@ #### Markup

		{% from 'label/macro.njk' import govukLabel %}
		{% from "label/macro.njk" import govukLabel %}

		@@ -50,5 +50,5 @@ {{ govukLabel({

		### Label--as page heading
		### Label as page heading

		[Preview the label--as page heading example](http://govuk-frontend-review.herokuapp.com/components/label/as page heading/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/as-page-heading/preview)

		@@ -66,3 +66,3 @@ #### Markup

		{% from 'label/macro.njk' import govukLabel %}
		{% from "label/macro.njk" import govukLabel %}

		@@ -69,0 +69,0 @@ {{ govukLabel({

components/panel/README.md

		@@ -9,9 +9,9 @@ # Panel

		Find out when to use the Panel component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/panel).
		Find out when to use the panel component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/panel).

		## Quick start examples

		### Component default
		### Panel

		[Preview the panel component](http://govuk-frontend-review.herokuapp.com/components/panel/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/panel/preview)

		@@ -33,6 +33,33 @@ #### Markup

		{% from 'panel/macro.njk' import govukPanel %}
		{% from "panel/macro.njk" import govukPanel %}

		{{ govukPanel({
		"titleHtml": "Application complete",
		"text": "Your reference number: HDJ2123F"
		}) }}

		### Panel custom heading level

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/panel/custom-heading-level/preview)

		#### Markup

		<div class="govuk-panel govuk-panel--confirmation">
		<h1 class="govuk-panel__title">
		Application complete
		</h1>

		<div class="govuk-panel__body">
		Your reference number: HDJ2123F
		</div>

		</div>

		#### Macro

		{% from "panel/macro.njk" import govukPanel %}

		{{ govukPanel({
		"titleText": "Application complete",
		"headingLevel": 1,
		"text": "Your reference number: HDJ2123F"
		@@ -97,2 +124,14 @@ }) }}

		<th class="govuk-table__header" scope="row">headingLevel</th>

		<td class="govuk-table__cell ">number</td>

		<td class="govuk-table__cell ">no</td>

		<td class="govuk-table__cell ">Optional heading level, from 1 to 6\. Default is 2.</td>

		</tr>

		<tr class="govuk-table__row">

		<th class="govuk-table__header" scope="row">text (or) html</th>
		@@ -99,0 +138,0 @@

components/phase-banner/README.md

		@@ -9,9 +9,9 @@ # Phase banner

		Find out when to use the Phase banner component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/phase-banner).
		Find out when to use the phase banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/phase-banner).

		## Quick start examples

		### Component default
		### Phase banner

		[Preview the phase-banner component](http://govuk-frontend-review.herokuapp.com/components/phase-banner/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/phase-banner/preview)

		@@ -32,3 +32,3 @@ #### Markup

		{% from 'phase-banner/macro.njk' import govukPhaseBanner %}
		{% from "phase-banner/macro.njk" import govukPhaseBanner %}

		@@ -35,0 +35,0 @@ {{ govukPhaseBanner({

129

components/radios/README.md

		@@ -9,9 +9,9 @@ # Radios

		Find out when to use the Radios component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/radios).
		Find out when to use the radios component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/radios).

		## Quick start examples

		### Component default
		### Radios

		[Preview the radios component](http://govuk-frontend-review.herokuapp.com/components/radios/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/preview)

		@@ -55,3 +55,3 @@ #### Markup

		{% from 'radios/macro.njk' import govukRadios %}
		{% from "radios/macro.njk" import govukRadios %}

		@@ -82,5 +82,5 @@ {{ govukRadios({

		### Radios--inline
		### Radios inline

		[Preview the radios--inline example](http://govuk-frontend-review.herokuapp.com/components/radios/inline/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/inline/preview)

		@@ -91,3 +91,3 @@ #### Markup

		<fieldset class="govuk-fieldset" aria-describedby="example-hint">
		<fieldset class="govuk-fieldset" aria-describedby="example'-hint">

		@@ -98,3 +98,3 @@ <legend class="govuk-fieldset__legend">

		<span id="example-hint" class="govuk-hint">
		<span id="example'-hint" class="govuk-hint">
		This includes changing your last name or spelling your name differently.
		@@ -106,4 +106,4 @@ </span>
		<div class="govuk-radios__item">
		<input class="govuk-radios__input" id="example-1" name="example" type="radio" value="yes">
		<label class="govuk-label govuk-radios__label" for="example-1">
		<input class="govuk-radios__input" id="example'-1" name="example" type="radio" value="yes">
		<label class="govuk-label govuk-radios__label" for="example'-1">
		Yes
		@@ -114,4 +114,4 @@ </label>
		<div class="govuk-radios__item">
		<input class="govuk-radios__input" id="example-2" name="example" type="radio" value="no" checked>
		<label class="govuk-label govuk-radios__label" for="example-2">
		<input class="govuk-radios__input" id="example'-2" name="example" type="radio" value="no" checked>
		<label class="govuk-label govuk-radios__label" for="example'-2">
		No
		@@ -128,6 +128,6 @@ </label>

		{% from 'radios/macro.njk' import govukRadios %}
		{% from "radios/macro.njk" import govukRadios %}

		{{ govukRadios({
		"idPrefix": "example",
		"idPrefix": "example'",
		"classes": "govuk-radios--inline",
		@@ -156,5 +156,5 @@ "name": "example",

		### Radios--with-disabled
		### Radios with disabled

		[Preview the radios--with-disabled example](http://govuk-frontend-review.herokuapp.com/components/radios/with-disabled/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-disabled/preview)

		@@ -198,3 +198,3 @@ #### Markup

		{% from 'radios/macro.njk' import govukRadios %}
		{% from "radios/macro.njk" import govukRadios %}

		@@ -226,5 +226,5 @@ {{ govukRadios({

		### Radios--with-html
		### Radios with legend as page heading

		[Preview the radios--with-html example](http://govuk-frontend-review.herokuapp.com/components/radios/with-html/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-legend-as-page-heading/preview)

		@@ -237,4 +237,6 @@ #### Markup

		<legend class="govuk-fieldset__legend">
		<h1 class="govuk-heading-l">Which part of the Housing Act was your licence issued under?</h1>
		<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
		<h1 class="govuk-fieldset__heading">
		Which part of the Housing Act was your licence issued under?
		</h1>
		</legend>
		@@ -269,3 +271,3 @@

		{% from 'radios/macro.njk' import govukRadios %}
		{% from "radios/macro.njk" import govukRadios %}

		@@ -277,3 +279,5 @@ {{ govukRadios({
		"legend": {
		"html": "<h1 class=\"govuk-heading-l\">Which part of the Housing Act was your licence issued under?</h1>"
		"text": "Which part of the Housing Act was your licence issued under?",
		"classes": "govuk-fieldset__legend--l",
		"isPageHeading": true
		}
		@@ -296,5 +300,5 @@ },

		### Radios--without-fieldset
		### Radios with a medium legend

		[Preview the radios--without-fieldset example](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-a-medium-legend/preview)

		@@ -305,5 +309,72 @@ #### Markup

		<fieldset class="govuk-fieldset" aria-describedby="housing-act-hint">

		<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
		Which part of the Housing Act was your licence issued under?
		</legend>

		<span id="housing-act-hint" class="govuk-hint">
		Select one of the options below.
		</span>

		<div class="govuk-radios">

		<div class="govuk-radios__item">
		<input class="govuk-radios__input" id="housing-act-1" name="housing-act" type="radio" value="part-2">
		<label class="govuk-label govuk-radios__label" for="housing-act-1">
		<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people
		</label>
		</div>

		<div class="govuk-radios__item">
		<input class="govuk-radios__input" id="housing-act-2" name="housing-act" type="radio" value="part-3">
		<label class="govuk-label govuk-radios__label" for="housing-act-2">
		<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council
		</label>
		</div>

		</div>
		</fieldset>

		</div>

		#### Macro

		{% from "radios/macro.njk" import govukRadios %}

		{{ govukRadios({
		"idPrefix": "housing-act",
		"name": "housing-act",
		"fieldset": {
		"legend": {
		"text": "Which part of the Housing Act was your licence issued under?",
		"classes": "govuk-fieldset__legend--m"
		}
		},
		"hint": {
		"text": "Select one of the options below."
		},
		"items": [
		{
		"value": "part-2",
		"html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people"
		},
		{
		"value": "part-3",
		"html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council"
		}
		]
		}) }}

		### Radios without fieldset

		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview)

		#### Markup

		<div class="govuk-form-group">

		<div class="govuk-radios">

		<div class="govuk-radios__item">
		<input class="govuk-radios__input" id="colours-1" name="colours" type="radio" value="red">
		@@ -335,3 +406,3 @@ <label class="govuk-label govuk-radios__label" for="colours-1">

		{% from 'radios/macro.njk' import govukRadios %}
		{% from "radios/macro.njk" import govukRadios %}

		@@ -356,5 +427,5 @@ {{ govukRadios({

		### Radios--with-extreme-fieldset
		### Radios with all fieldset attributes

		[Preview the radios--with-extreme-fieldset example](http://govuk-frontend-review.herokuapp.com/components/radios/with-extreme-fieldset/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-all-fieldset-attributes/preview)

		@@ -402,3 +473,3 @@ #### Markup

		{% from 'radios/macro.njk' import govukRadios %}
		{% from "radios/macro.njk" import govukRadios %}

		@@ -405,0 +476,0 @@ {{ govukRadios({

components/select/README.md

		@@ -9,9 +9,9 @@ # Select

		Find out when to use the Select component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/select).
		Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).

		## Quick start examples

		### Component default
		### Select

		[Preview the select component](http://govuk-frontend-review.herokuapp.com/components/select/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/preview)

		@@ -38,3 +38,3 @@ #### Markup

		{% from 'select/macro.njk' import govukSelect %}
		{% from "select/macro.njk" import govukSelect %}

		@@ -45,3 +45,3 @@ {{ govukSelect({
		"label": {
		"html": "Label text goes here"
		"text": "Label text goes here"
		},
		@@ -66,5 +66,5 @@ "items": [

		### Select--with-hint-text-and-error
		### Select with hint text and error message

		[Preview the select--with-hint-text-and-error example](http://govuk-frontend-review.herokuapp.com/components/select/with-hint-text-and-error/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-hint-text-and-error-message/preview)

		@@ -99,3 +99,3 @@ #### Markup

		{% from 'select/macro.njk' import govukSelect %}
		{% from "select/macro.njk" import govukSelect %}

		@@ -130,5 +130,5 @@ {{ govukSelect({

		### Select--with-label-as-page-heading
		### Select with label as page heading

		[Preview the select--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/select/with-label-as-page-heading/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-label-as-page-heading/preview)

		@@ -158,3 +158,3 @@ #### Markup

		{% from 'select/macro.njk' import govukSelect %}
		{% from "select/macro.njk" import govukSelect %}

		@@ -165,3 +165,3 @@ {{ govukSelect({
		"label": {
		"html": "Label text goes here",
		"text": "Label text goes here",
		"isPageHeading": true
		@@ -168,0 +168,0 @@ },

components/skip-link/README.md

		@@ -9,9 +9,9 @@ # Skip link

		Find out when to use the Skip link component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/skip-link).
		Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).

		## Quick start examples

		### Component default
		### Skip link

		[Preview the skip-link component](http://govuk-frontend-review.herokuapp.com/components/skip-link/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/skip-link/preview)

		@@ -24,3 +24,3 @@ #### Markup

		{% from 'skip-link/macro.njk' import govukSkipLink %}
		{% from "skip-link/macro.njk" import govukSkipLink %}

		@@ -27,0 +27,0 @@ {{ govukSkipLink({

components/table/README.md

		@@ -9,9 +9,9 @@ # Table

		Find out when to use the Table component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/table).
		Find out when to use the table component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/table).

		## Quick start examples

		### Component default
		### Table

		[Preview the table component](http://govuk-frontend-review.herokuapp.com/components/table/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/preview)

		@@ -59,3 +59,3 @@ #### Markup

		{% from 'table/macro.njk' import govukTable %}
		{% from "table/macro.njk" import govukTable %}

		@@ -106,5 +106,5 @@ {{ govukTable({

		### Table--table-with-head
		### Table table with head

		[Preview the table--table-with-head example](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head/preview)

		@@ -164,3 +164,3 @@ #### Markup

		{% from 'table/macro.njk' import govukTable %}
		{% from "table/macro.njk" import govukTable %}

		@@ -224,5 +224,5 @@ {{ govukTable({

		### Table--table-with-caption-and-head
		### Table table with head and caption

		[Preview the table--table-with-caption-and-head example](http://govuk-frontend-review.herokuapp.com/components/table/table-with-caption-and-head/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head-and-caption/preview)

		@@ -233,3 +233,3 @@ #### Markup

		<caption class="govuk-table__caption govuk-heading-m">Caption 1 : Months and rates</caption>
		<caption class="govuk-table__caption govuk-heading-m">Caption 1: Months and rates</caption>

		@@ -285,6 +285,6 @@ <thead class="govuk-table__head">

		{% from 'table/macro.njk' import govukTable %}
		{% from "table/macro.njk" import govukTable %}

		{{ govukTable({
		"caption": "Caption 1 : Months and rates",
		"caption": "Caption 1: Months and rates",
		"captionClasses": "govuk-heading-m",
		@@ -291,0 +291,0 @@ "firstCellIsHeader": true,

components/tabs/README.md

		@@ -9,9 +9,9 @@ # Tabs

		Find out when to use the Tabs component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/tabs).
		Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).

		## Quick start examples

		### Component default
		### Tabs

		[Preview the tabs component](http://govuk-frontend-review.herokuapp.com/components/tabs/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tabs/preview)

		@@ -181,3 +181,3 @@ #### Markup

		{% from 'tabs/macro.njk' import govukTabs %}
		{% from "tabs/macro.njk" import govukTabs %}

		@@ -184,0 +184,0 @@ {{ govukTabs({

components/tag/README.md

		@@ -9,9 +9,9 @@ # Tag

		Find out when to use the Tag component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/tag).
		Find out when to use the tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).

		## Quick start examples

		### Component default
		### Tag

		[Preview the tag component](http://govuk-frontend-review.herokuapp.com/components/tag/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/preview)

		@@ -26,3 +26,3 @@ #### Markup

		{% from 'tag/macro.njk' import govukTag %}
		{% from "tag/macro.njk" import govukTag %}

		@@ -33,5 +33,5 @@ {{ govukTag({

		### Tag--inactive
		### Tag inactive

		[Preview the tag--inactive example](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)

		@@ -46,3 +46,3 @@ #### Markup

		{% from 'tag/macro.njk' import govukTag %}
		{% from "tag/macro.njk" import govukTag %}

		@@ -49,0 +49,0 @@ {{ govukTag({

components/textarea/README.md

		@@ -9,9 +9,9 @@ # Textarea

		Find out when to use the Textarea component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/textarea).
		Find out when to use the textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).

		## Quick start examples

		### Component default
		### Textarea

		[Preview the textarea component](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)

		@@ -34,3 +34,3 @@ #### Markup

		{% from 'textarea/macro.njk' import govukTextarea %}
		{% from "textarea/macro.njk" import govukTextarea %}

		@@ -48,5 +48,5 @@ {{ govukTextarea({

		### Textarea--with error message
		### Textarea with error message

		[Preview the textarea--with error message example](http://govuk-frontend-review.herokuapp.com/components/textarea/with error message/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-error-message/preview)

		@@ -69,3 +69,3 @@ #### Markup

		{% from 'textarea/macro.njk' import govukTextarea %}
		{% from "textarea/macro.njk" import govukTextarea %}

		@@ -83,5 +83,5 @@ {{ govukTextarea({

		### Textarea--with default value
		### Textarea with default value

		[Preview the textarea--with default value example](http://govuk-frontend-review.herokuapp.com/components/textarea/with default value/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-default-value/preview)

		@@ -103,3 +103,3 @@ #### Markup

		{% from 'textarea/macro.njk' import govukTextarea %}
		{% from "textarea/macro.njk" import govukTextarea %}

		@@ -115,5 +115,5 @@ {{ govukTextarea({

		### Textarea--with custom rows
		### Textarea with custom rows

		[Preview the textarea--with custom rows example](http://govuk-frontend-review.herokuapp.com/components/textarea/with custom rows/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-custom-rows/preview)

		@@ -132,3 +132,3 @@ #### Markup

		{% from 'textarea/macro.njk' import govukTextarea %}
		{% from "textarea/macro.njk" import govukTextarea %}

		@@ -144,5 +144,5 @@ {{ govukTextarea({

		### Textarea--with label as page heading
		### Textarea with label as page heading

		[Preview the textarea--with label as page heading example](http://govuk-frontend-review.herokuapp.com/components/textarea/with label as page heading/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-label-as-page-heading/preview)

		@@ -164,3 +164,3 @@ #### Markup

		{% from 'textarea/macro.njk' import govukTextarea %}
		{% from "textarea/macro.njk" import govukTextarea %}

		@@ -167,0 +167,0 @@ {{ govukTextarea({

components/warning-text/README.md

		@@ -9,9 +9,9 @@ # Warning text

		Find out when to use the Warning text component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/warning-text).
		Find out when to use the warning text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/warning-text).

		## Quick start examples

		### Component default
		### Warning text

		[Preview the warning-text component](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)
		[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)

		@@ -30,3 +30,3 @@ #### Markup

		{% from 'warning-text/macro.njk' import govukWarningText %}
		{% from "warning-text/macro.njk" import govukWarningText %}

		@@ -33,0 +33,0 @@ {{ govukWarningText({

package.json

		{
		"name": "govuk-frontend",
		"description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
		"version": "1.0.0",
		"version": "1.1.0",
		"main": "all.js",
		"sass": "all.scss",
		"engines": {
		"node": ">=6.0"
		"node": ">= 4.2.0"
		},
		@@ -13,3 +14,2 @@ "author": {
		},
		"sass": "all.scss",
		"repository": {
		@@ -22,3 +22,10 @@ "type": "git",
		},
		"homepage": "https://github.com/alphagov/govuk-frontend#readme",
		"keywords": [
		"govuk",
		"frontend",
		"design system",
		"template"
		],
		"license": "MIT"
		}

README.md

		@@ -19,3 +19,3 @@ # GOV.UK Frontend
		Once installed, you will be able to use the code from the examples in the
		[GOV.UK Design System](https://www.gov.uk/design-system in your service.
		[GOV.UK Design System](https://www.gov.uk/design-system) in your service.

		@@ -22,0 +22,0 @@ ### 1. Install with npm (recommended)

components/back-link/back-link.njk

components/breadcrumbs/breadcrumbs.njk

components/button/button.njk

components/checkboxes/checkboxes.njk

components/date-input/date-input.njk

components/details/details.njk

components/error-message/error-message.njk

components/error-summary/error-summary.njk

components/fieldset/fieldset.njk

components/file-upload/file-upload.njk

components/footer/footer.njk

components/header/header.njk

components/hint/hint.njk

components/input/input.njk

components/inset-text/inset-text.njk

components/label/label.njk

components/panel/panel.njk

components/phase-banner/phase-banner.njk

components/radios/radios.njk

components/select/select.njk

components/skip-link/skip-link.njk

components/table/table.njk

components/tabs/tabs.njk

components/tag/tag.njk

components/textarea/textarea.njk

components/warning-text/warning-text.njk

components/checkboxes/_checkboxes.scss