Release v3.7.0 🚀

[36degrees]

New features

Add extra spacing between list items

If a list is hard to read because the items run across multiple lines, you can now add extra spacing between list items using the new govuk-list--spaced class.

This was added in pull request #1775: Add list--spaced modifier. Thanks to @frankieroberto for raising this issue.

Use HTML for navigation items in the header

You can now use HTML for a navigation item in the header component, using the new html option.

This was added in pull request #1819: Add the ability to specify HTML for a navigation item. Thanks to @adamsilver.

Import settings, tools and helpers CSS in one line

You can now import node_modules/govuk-frontend/govuk/base, instead of importing settings, helpers and tools separately.

Sass now compiles faster

GOV.UK Frontend's Sass files now compile to CSS faster, because we've changed the way dependencies work when you import them.

If you already import node_modules/govuk-frontend/govuk/all in your Sass file, you do not need to do anything. Sass will automatically compile faster.

If you import specific parts of GOV.UK Frontend in your Sass file instead, you can now make Sass compile faster by importing base then a component's index file. This will avoid GOV.UK Frontend importing dependencies multiple times.

For example:

@import "node_modules/govuk-frontend/govuk/base";

@import "node_modules/govuk-frontend/govuk/core/all";
@import "node_modules/govuk-frontend/govuk/objects/all";

@import "node_modules/govuk-frontend/govuk/components/button/index";
@import "node_modules/govuk-frontend/govuk/components/footer/index";
@import "node_modules/govuk-frontend/govuk/components/header/index";

Find out more about importing CSS.

This was added in pull request #1804: Allow components to be imported without dependencies. Thanks to @kevindew for raising this issue.

Collapse breadcrumb component on mobile

You can now collapse the breadcrumb component on mobile using the new collapseOnMobile option, so it:

• shows only the first and last items
• does not wrap

This was added in pull request #1754: Add collapseOnMobile breadcrumbs flag. Thanks to @vanitabarrett and @miaallers.

Back links are easier to select

The back link component is now:

• bigger, so it's easier to select if you're using a touch screen
• more consistent with the design of the breadcrumb component

This was added in pull request #1753: Make back link arrow consistent with breadcrumb component. Thanks to @vanitabarrett and @miaallers.

Deprecated features

Importing from the core and overrides layers without base

If you import specific files from the core or overrides layers, you’ll now see a deprecation warning when compiling Sass if you do not import node_modules/govuk-frontend/govuk/base first.

To fix the warning, import node_modules/govuk-frontend/govuk/base first. For example:

@import "node_modules/govuk-frontend/govuk/base";
@import "node_modules/govuk-frontend/core/typography";

If you do not import node_modules/govuk-frontend/govuk/base first, your service will no longer work from GOV.UK Frontend v4.0.0.

This was added in pull request #1807: Warn if importing core, overrides without dependencies.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

• #1778: Fix accordion underline hover state being removed when hovering plus/minus symbol
• #1765: Import textarea from character count
• #1796: Standardise accordion section headings font size (reduce height of section headings on mobile)

[hannalaakso]

🚢

[36degrees]

Changes to dist

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index 4808b3d8..a3f166fc 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-3.6.0
+3.7.0
diff --git a/dist/govuk-frontend-3.6.0.min.css b/dist/govuk-frontend-3.7.0.min.css
similarity index 6%
rename from dist/govuk-frontend-3.6.0.min.css
rename to dist/govuk-frontend-3.7.0.min.css
index 5ff042a5..48c4db77 100644
--- a/dist/govuk-frontend-3.6.0.min.css
+++ b/dist/govuk-frontend-3.7.0.min.css
@@ -177,6 +177,16 @@
     }
 }
 
+.govuk-list--spaced>li {
+    margin-bottom: 10px
+}
+
+@media (min-width:40.0625em) {
+    .govuk-list--spaced>li {
+        margin-bottom: 15px
+    }
+}
+
 .govuk-template {
     background-color: #f3f2f1;
     -webkit-text-size-adjust: 100%;
@@ -1031,10 +1041,38 @@
 }
 
 .govuk-accordion__section-heading {
+    font-family: GDS Transport, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 18px;
+    font-size: 1.125rem;
+    line-height: 1.11111;
     margin-top: 0;
     margin-bottom: 0
 }
 
+@media print {
+    .govuk-accordion__section-heading {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-accordion__section-heading {
+        font-size: 24px;
+        font-size: 1.5rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-accordion__section-heading {
+        font-size: 18pt;
+        line-height: 1.15
+    }
+}
+
 .govuk-accordion__section-button {
     font-family: GDS Transport, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -1336,30 +1374,42 @@
 }
 
 .govuk-back-link[href] {
-    border-bottom: 1px solid #0b0c0c;
-    text-decoration: none
+    text-decoration: underline
 }
 
 .govuk-back-link[href]:focus {
-    border-bottom-color: rgba(0, 0, 0, 0)
+    text-decoration: none
+}
+
+.govuk-back-link[href]:focus:before {
+    border-color: #0b0c0c
 }
 
 .govuk-back-link:before {
-    display: block;
-    width: 0;
-    height: 0;
-    -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
-    clip-path: polygon(0 50%, 100% 100%, 100% 0);
-    border-color: rgba(0, 0, 0, 0);
-    border-style: solid;
-    border-width: 5px 6px 5px 0;
-    border-right-color: inherit;
     content: "";
+    display: block;
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 0;
-    margin: auto
+    left: 3px;
+    width: 7px;
+    height: 7px;
+    margin: auto 0;
+    -webkit-transform: rotate(225deg);
+    -ms-transform: rotate(225deg);
+    transform: rotate(225deg);
+    border: solid;
+    border-width: 1px 1px 0 0;
+    border-color: #626a6e
+}
+
+.govuk-back-link:after {
+    content: "";
+    position: absolute;
+    top: -14px;
+    right: 0;
+    bottom: -14px;
+    left: 0
 }
 
 .govuk-breadcrumbs {
@@ -1485,6 +1535,28 @@
     }
 }
 
+@media (max-width:40.0525em) {
+    .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item {
+        display: none
+    }
+
+    .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item:first-child,
+    .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item:last-child {
+        display: inline-block
+    }
+
+    .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item:before {
+        top: 6px;
+        margin: 0
+    }
+
+    .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex
+    }
+}
+
 .govuk-button {
     font-family: GDS Transport, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -2350,6 +2422,68 @@
     }
 }
 
+.govuk-textarea {
+    font-family: GDS Transport, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    margin-bottom: 20px;
+    padding: 5px;
+    resize: vertical;
+    border: 2px solid #0b0c0c;
+    border-radius: 0;
+    -webkit-appearance: none
+}
+
+@media print {
+    .govuk-textarea {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-textarea {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-textarea {
+        font-size: 14pt;
+        line-height: 1.25
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-textarea {
+        margin-bottom: 30px
+    }
+}
+
+.govuk-textarea:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px
+}
+
+.govuk-textarea--error {
+    border: 4px solid #d4351c
+}
+
+.govuk-textarea--error:focus {
+    border-color: #0b0c0c;
+    box-shadow: none
+}
+
 .govuk-character-count {
     margin-bottom: 20px
 }
@@ -4750,68 +4884,6 @@ only screen and (min-resolution:192dpi) {
     text-align: left
 }
 
-.govuk-textarea {
-    font-family: GDS Transport, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 400;
-    font-size: 16px;
-    font-size: 1rem;
-    line-height: 1.25;
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    min-height: 40px;
-    margin-bottom: 20px;
-    padding: 5px;
-    resize: vertical;
-    border: 2px solid #0b0c0c;
-    border-radius: 0;
-    -webkit-appearance: none
-}
-
-@media print {
-    .govuk-textarea {
-        font-family: sans-serif
-    }
-}
-
-@media (min-width:40.0625em) {
-    .govuk-textarea {
-        font-size: 19px;
-        font-size: 1.1875rem;
-        line-height: 1.25
-    }
-}
-
-@media print {
-    .govuk-textarea {
-        font-size: 14pt;
-        line-height: 1.25
-    }
-}
-
-@media (min-width:40.0625em) {
-    .govuk-textarea {
-        margin-bottom: 30px
-    }
-}
-
-.govuk-textarea:focus {
-    outline: 3px solid #fd0;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 2px
-}
-
-.govuk-textarea--error {
-    border: 4px solid #d4351c
-}
-
-.govuk-textarea--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
-}
-
 .govuk-warning-text {
     position: relative;
     margin-bottom: 20px;
diff --git a/dist/govuk-frontend-3.6.0.min.js b/dist/govuk-frontend-3.7.0.min.js
similarity index 99%
rename from dist/govuk-frontend-3.6.0.min.js
rename to dist/govuk-frontend-3.7.0.min.js
index 6b658f0b..5fcdd329 100644
--- a/dist/govuk-frontend-3.6.0.min.js
+++ b/dist/govuk-frontend-3.7.0.min.js
@@ -271,7 +271,7 @@
                 e.classList.remove(n.sectionHeaderFocusedClass)
             }), null != r && s.setAttribute("aria-describedby", this.moduleId + "-summary-" + (t + 1)), s.innerHTML = o.innerHTML, i.removeChild(o), i.appendChild(s);
             var l = document.createElement("span");
-            l.className = this.iconClass, l.setAttribute("aria-hidden", "true"), i.appendChild(l)
+            l.className = this.iconClass, l.setAttribute("aria-hidden", "true"), s.appendChild(l)
         }, n.prototype.onSectionToggle = function(t) {
             var e = this.isExpanded(t);
             this.setExpanded(!e, t), this.storeState(t)
diff --git a/dist/govuk-frontend-ie8-3.6.0.min.css b/dist/govuk-frontend-ie8-3.7.0.min.css
similarity index 5%
rename from dist/govuk-frontend-ie8-3.6.0.min.css
rename to dist/govuk-frontend-ie8-3.7.0.min.css
index 94e8f375..0ec0732e 100644
--- a/dist/govuk-frontend-ie8-3.6.0.min.css
+++ b/dist/govuk-frontend-ie8-3.7.0.min.css
@@ -98,6 +98,10 @@
     margin-bottom: 5px
 }
 
+.govuk-list--spaced>li {
+    margin-bottom: 15px
+}
+
 .govuk-template {
     background-color: #f3f2f1;
     -webkit-text-size-adjust: 100%;
@@ -495,23 +499,27 @@
 }
 
 .govuk-accordion__section-heading {
-    margin-top: 0;
-    margin-bottom: 0
+    font-weight: 400;
+    margin-top: 0
 }
 
-.govuk-accordion__section-button {
+.govuk-accordion__section-button,
+.govuk-accordion__section-heading {
     font-family: GDS Transport, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-weight: 700;
     font-size: 18px;
     font-size: 1.125rem;
     line-height: 1.11111;
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1.25;
+    margin-bottom: 0
+}
+
+.govuk-accordion__section-button {
+    font-weight: 700;
     display: inline-block;
-    margin-bottom: 0;
     padding-top: 15px
 }
 
@@ -716,30 +724,45 @@
 }
 
 .govuk-back-link[href] {
-    border-bottom: 1px solid #0b0c0c;
-    text-decoration: none
+    text-decoration: underline
 }
 
 .govuk-back-link[href]:focus {
-    border-bottom-color: transparent
+    text-decoration: none
+}
+
+.govuk-back-link[href]:focus:before {
+    border-color: #0b0c0c
 }
 
 .govuk-back-link:before {
-    display: block;
-    width: 0;
-    height: 0;
-    -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
-    clip-path: polygon(0 50%, 100% 100%, 100% 0);
-    border-color: transparent;
-    border-style: solid;
-    border-width: 5px 6px 5px 0;
-    border-right-color: inherit;
     content: "";
+    display: block;
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 0;
-    margin: auto
+    left: 3px;
+    width: 7px;
+    height: 7px;
+    margin: auto 0;
+    -webkit-transform: rotate(225deg);
+    -ms-transform: rotate(225deg);
+    transform: rotate(225deg);
+    content: "\003c";
+    width: auto;
+    height: auto;
+    border: 0;
+    color: #626a6e;
+    font-family: Arial, sans-serif
+}
+
+.govuk-back-link:after {
+    content: "";
+    position: absolute;
+    top: -14px;
+    right: 0;
+    bottom: -14px;
+    left: 0
 }
 
 .govuk-breadcrumbs {
@@ -1395,6 +1418,44 @@
     box-shadow: 0 0 0 3px #fd0, 0 0 0 10px #b1b4b6
 }
 
+.govuk-textarea {
+    font-family: GDS Transport, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.25;
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    margin-bottom: 30px;
+    padding: 5px;
+    resize: vertical;
+    border: 2px solid #0b0c0c;
+    border-radius: 0;
+    -webkit-appearance: none
+}
+
+.govuk-textarea:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px;
+    border-width: 4px
+}
+
+.govuk-textarea--error {
+    border: 4px solid #d4351c
+}
+
+.govuk-textarea--error:focus {
+    border-color: #0b0c0c;
+    box-shadow: none
+}
+
 .govuk-character-count {
     margin-bottom: 30px
 }
@@ -2983,44 +3044,6 @@
     text-align: left
 }
 
-.govuk-textarea {
-    font-family: GDS Transport, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 400;
-    font-size: 16px;
-    font-size: 1rem;
-    font-size: 19px;
-    font-size: 1.1875rem;
-    line-height: 1.25;
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    min-height: 40px;
-    margin-bottom: 30px;
-    padding: 5px;
-    resize: vertical;
-    border: 2px solid #0b0c0c;
-    border-radius: 0;
-    -webkit-appearance: none
-}
-
-.govuk-textarea:focus {
-    outline: 3px solid #fd0;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 2px;
-    border-width: 4px
-}
-
-.govuk-textarea--error {
-    border: 4px solid #d4351c
-}
-
-.govuk-textarea--error:focus {
-    border-color: #0b0c0c;
-    box-shadow: none
-}
-
 .govuk-warning-text {
     position: relative;
     margin-bottom: 30px;