v9.5.0

New features

• Pull request #852: Update to GOV.UK Frontend v3.5.0.

Fixes

Use Prototype Kit-specific patterns in the unbranded template

You can now use patterns like step by step navigation and task lists in the unbranded template.

You do not need to do anything if you're installing this version for the first time.

If you're upgrading from an older version, make the following changes.

1. In the app/assets/sass/unbranded.scss file, change @import "node_modules/govuk-frontend/govuk/all"; to @import "application";.
2. In the app/views/layout_unbranded.html file, change {% extends "govuk/template.njk" %} to {% extends "layout.html" %}.

#842: Allow Kit specific patterns to be used with the unbranded template.

Other fixes

• Pull request #840: Update Kit to use latest active LTS Node.js version 12.x.
• Pull request #847: Update step by step patterns to latest.

v9.4.0

New features

• Pull request #837: Update GOV.UK Frontend to version 3.4.0.

Fixes

• Pull request #815: Prevent exceptions thrown from 'compatibility mode' routes from being silently caught, disabling compatibility mode.

v9.3.0

New features

• Pull request #814: Update GOV.UK Frontend to version 3.3.0.

v9.2.0

New features

• Pull request #800: Update GOV.UK Frontend to version 3.2.0.

v9.1.0

New features

• Pull request #797: Update GOV.UK Frontend to version 3.1.0.

Fixes

• Pull request #796: Update focus states on step-by-step navigation.

v9.0.0

This release updates GOV.UK Prototype Kit to v3.0.0 of GOV.UK Frontend.

In v3.0.0 of GOV.UK Frontend, we’ve made some important changes to improve the accessibility of pages. This includes making sure that the styles, components and patterns in GOV.UK Frontend meet WCAG 2.1 level AA.

You must follow our guidance on updating your version of the Prototype Kit.

If you need help updating or installing the Prototype Kit, you can:

• contact the GOV.UK Design System team
• talk to a developer on your team

Breaking changes

You must make the following changes when you migrate to this release, or your prototype may break.

1. Update files in the /app folder - unless you updated via the command line.
2. Update HTML in GOV.UK Frontend components.

If you’ve created custom code or components, read the release notes for GOV.UK Frontend v3.0.0 for more changes you may need to make.

Update files in the app folder

To make sure GOV.UK Frontend's files do not conflict with your code, we've moved our package files into a directory called govuk.

If you downloaded this version of the Prototype Kit as a zip file, you must:

• add an assets path in the Sass file
• replace old colours
• update asset paths
• update the layout file
• update the layout_unbranded file

Pull requests:

• #1458: Namespace nunjucks and components
• #1467: Update the main entry point in package.json

Add an assets path in the Sass file

In the app/assets/sass/application.scss file, add $govuk-assets-path: '/govuk/assets/'; at the top.

Replace old colours

In the app/assets/sass/patterns/_step-by-step-navigation.scss file, replace:

• “grey-4” with "light-grey", $legacy: "grey-4"
• “grey-3” with "light-grey", $legacy: "grey-3"
• “grey-2” with "mid-grey", $legacy: "grey-2"
• “grey-1” with "dark-grey", $legacy: "grey-1"
• “bright-red” with "red", $legacy: "bright-red"

You must make this change even if you are not using the step by step navigation pattern in your prototype.

Read our blog post about why we changed the colour palette.

Update asset paths

In the app/assets/sass/unbranded.scss file, add govuk/ after govuk-frontend/ in the 3 @import paths. For example:

@import "node_modules/govuk-frontend/govuk/settings/colours-palette";

Update the layout file

1. Go to the app/views/layout.html file.
2. Add {%- set assetPath = '/govuk/assets' -%} at the top.
3. Replace {% extends "template.njk" %} with {% extends "govuk/template.njk" %}.
4. In each import line that starts {% from, add govuk/components/ to the start of the file path. For example:

{% from "govuk/components/accordion/macro.njk"        import govukAccordion %}

5. Add {% set mainClasses = mainClasses | default("govuk-main-wrapper--auto-spacing") %} before {% if useAutoStoreData %}

Update the layout_unbranded file

In the app/views/layout_unbranded.html file:

1. Add {%- set assetPath = '/govuk/assets' -%} at the top.
2. Replace {% extends "template.njk" %} with {% extends "govuk/template.njk" %}.

Pull request #769: Update to GOV.UK Frontend 3.0.0.

Update HTML in GOV.UK Frontend components

Update and add data-module attributes

If you’re using HTML versions of GOV.UK Frontend components, add a govuk- prefix to data-module attribute values. For example:

<div class="govuk-accordion" data-module="govuk-accordion">
...
</div>

If you’re using HTML versions of the button or details component, add:

• data-module="govuk-button" to each <button> HTML tag
• data-module="govuk-details" to each <details> HTML tag

Pull request #1443: Ensure GOV.UK Frontend component selectors cannot conflict when initialised.

Update the character count CSS class name

If you're using the HTML version of the character count component, change js-character-count to govuk-js-character-count.

Pull request #1444: Renames js- css prefix to govuk-js-.

Update links from error summary components to radios and checkboxes

If you've linked from an error summary component to the first input in a radios or checkboxes component, the link will no longer work.

This is because the id of the first input no longer has the suffix -1.

If there are links back to radios or checkboxes components in your error summary component, remove -1 from the end of the href attribute.

Pull request #1426: Make radios and checkboxes components easier to link to from error summary.

Update markup if you’re using the tab component

If you’re using the HTML version of the tabs component, remove the govuk-tabs__tab--selected class from the first tab's link, then add the govuk-tabs__list-item--selected class to the link's parent list item.

For example:

<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
  <a class="govuk-tabs__tab" href="#tab1">
    Tab 1
  </a>
</li>

Pull request #1496: Update the focus state for tabs.

Update markup if you’re using the task list component

Update every item in your task list, removing the app-task-list__task-name class from the link and wrapping the link in a new <span class="app-task-list__task-name">.

For example:

<li class="app-task-list__item">
 <span class="app-task-list__task-name">
   <a href="#" aria-describedby="eligibility-completed">
     Check eligibility
   </a>
 </span>
</li>

Pull request #770: Update the task list focus state.

Update start button icon

Start buttons have a new icon. Your start buttons will lose their current icons unless you replace the old icon with the new one.

If you're using Nunjucks:

• set the isStartButton option to true
• remove the .govuk-button--start class

For example:

govukButton({
  text: "Start now",
  href: "#",
  isStartButton: true
})

If you're using HTML, add the SVG code from the start button example in the Design System.

Pull request #1341: Add new start button icon.

New features

Page wrappers now use auto spacing

The <main> element in layouts now has a .govuk-main-wrapper--auto-spacing class by default.

This will add the correct amount of padding above the content, depending on whether there are elements above the <main> element inside the govuk-width-container wrapper. Elements above the <main> element could include a back link or breadcrumb component.

If govuk-main-wrapper--auto-spacing does not work for your service, you can set the correct amount of padding by adding the .govuk-main-wrapper--l class to your page or layout by using:

{% set mainClasses = "govuk-main-wrapper--l" %}

You can also turn off the .govuk-main-wrapper--auto-spacing class by using:

{% set mainClasses = "" %}

Continue to use the old colours

If you want to continue using old colours in your prototype, you can turn on compatibility mode.

v8.12.1

Fixes:

• #763 Fix a Sass compilation error in the unbranded stylesheet, which was introduced in 8.12.0.

v8.12.0

Features:

• #760 Update to GOV.UK Frontend version 2.12.0 (See GOV.UK Frontend 2.12.0 release notes)

Fixes:

• #751 Remove unnecessary settings import from the 'unbranded' stylesheet

v8.11.0

Features:

• #741 Update to GOV.UK Frontend version 2.11.0 (See GOV.UK Frontend 2.11.0 release notes)

v8.10.0

Features:

• #722 Update to GOV.UK Frontend version 2.10.0 (See GOV.UK Frontend 2.10.0 release notes)