diff --git a/CHANGELOG.md b/CHANGELOG.md index 4cb7016c007..efc13131765 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,22 @@ Visit The National Archives' [documentation on OGL and Crown copyright](https:// This was added in [pull request #2702: Allow localisation of content licence and copyright notices in Footer](https://github.com/alphagov/govuk-frontend/pull/2702). +#### Pass HTML directly into compatible components + +If using the Nunjucks macros, you can now pass HTML content directly into compatible components using [the Nunjucks `call` syntax](https://mozilla.github.io/nunjucks/templating.html#call). If HTML is provided through the call syntax, the `html` and `text` options will be ignored. + +Components that have been updated to support this syntax are: + +- Details +- Error summary (mapped to `descriptionHtml` parameter) +- Inset text +- Notification banner +- Panel + +These are in addition to the Fieldset component, which can already be used with the call syntax. + +This was added in [pull request #2734: Update various components to be callable](https://github.com/alphagov/govuk-frontend/pull/2734). + ### Deprecated features #### Remove deprecated `govuk-header__navigation--no-service-name` class in the header @@ -127,17 +143,17 @@ Because we're shipping ES modules in addition to how we currently publish our co If you want to import using ES modules, we recommend you only use `import` to import the JavaScript for components you're using in your service. For example: ```javascript -import { SkipLink, Radios } from 'govuk-frontend' +import { SkipLink, Radios } from "govuk-frontend"; -var $skipLink = document.querySelector('[data-module="govuk-skip-link"]') +var $skipLink = document.querySelector('[data-module="govuk-skip-link"]'); if ($skipLink) { - new SkipLink($skipLink).init() + new SkipLink($skipLink).init(); } -var $radios = document.querySelectorAll('[data-module="govuk-radios]') +var $radios = document.querySelectorAll('[data-module="govuk-radios]'); if ($radios) { for (var i = 0; i < $radios.length; i++) { - new Radios($radios[i]).init() + new Radios($radios[i]).init(); } } ``` @@ -145,8 +161,8 @@ if ($radios) { If you need to import all of GOV.UK Frontend's components, then use the `initAll` function to initialise them: ```javascript -import { initAll } from 'govuk-frontend' -initAll() +import { initAll } from "govuk-frontend"; +initAll(); ``` Depending on the bundler you use, you may also need to make changes to your JavaScript bundler configuration file. You can [read more in our installation instructions about importing JavaScript using a bundler](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#import-javascript-using-a-bundler). @@ -212,6 +228,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: ## 4.0.0 (Breaking release) ### Breaking changes + This release contains a lot of breaking changes, but we expect many of them will only affect a small number of users. However, to make sure your service still works after you upgrade, you should read the release notes and make any required changes. #### Check your accordions still display as expected @@ -247,7 +264,7 @@ We've updated the HTML for the summary list component to avoid nesting `` If you're not using Nunjucks macros, do not include an empty `` in rows without actions. Instead, add the `govuk-summary-list__row--no-actions` modifier class to the row. -This change was introduced in [pull request #2323: Avoid invalid nesting of `` within a `
` in summary list](https://github.com/alphagov/govuk-frontend/pull/2323). Thanks to [Malcolm Hire]( https://github.com/malcolmhire) for reporting this issue. +This change was introduced in [pull request #2323: Avoid invalid nesting of `` within a `
` in summary list](https://github.com/alphagov/govuk-frontend/pull/2323). Thanks to [Malcolm Hire](https://github.com/malcolmhire) for reporting this issue. #### Update the HTML for navigation in the header @@ -291,9 +308,7 @@ If you're [importing JavaScript for individual components](https://frontend.desi If you're not using Nunjucks macros, add a `data-module="govuk-skip-link"` attribute to the component HTML. For example: ```html -
-... -
+
...
``` Once you've made the changes, check the skip link JavaScript works. To do this, select the skip link and check the linked element (usually the `
` element) in the browser has a `tabindex` attribute. @@ -441,7 +456,7 @@ Replace it with `type="text"` and `inputmode="numeric"`. For example: ``` -This change was introduced in [pull request #1704: Update date input to use `type=text` and `inputmode=numeric`](https://github.com/alphagov/govuk-frontend/pull/1704). +This change was introduced in [pull request #1704: Update date input to use `type=text` and `inputmode=numeric`](https://github.com/alphagov/govuk-frontend/pull/1704). #### Fix fallback logo so Chrome will not flag it to screen readers @@ -590,6 +605,7 @@ This was added in [pull request #2183: Updates to link styles and link hover sta #### Style links to remove underlines You can now remove underlines from links by using either the: + - [`govuk-link-style-no-underline` mixin](http://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-link-style-no-underline) in your Sass, or - [`govuk-link--no-underline` class](https://design-system.service.gov.uk/styles/typography/#links-without-underlines) in your HTML @@ -600,6 +616,7 @@ This was added in [pull request #2214: Add no-underline mixin and modifier class #### Style links on dark backgrounds You can now style links on dark backgrounds to use white text colour by using either the: + - [`govuk-link-style-inverse` mixin](http://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-link-style-inverse) in your Sass, or - [`govuk-link--inverse` class](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds) in your HTML @@ -741,10 +758,14 @@ You can use the new: For example: ```javascript -{{ govukHeader({ - navigationLabel: "Custom navigation section aria-label", - menuButtonLabel: "Custom menu button aria-label" -}) }} +{ + { + govukHeader({ + navigationLabel: "Custom navigation section aria-label", + menuButtonLabel: "Custom menu button aria-label", + }); + } +} ``` The default labels are now: @@ -825,9 +846,13 @@ You can now turn spellcheck on or off in the input, textarea and character count For example: ```javascript -{{ govukInput({ - spellcheck: true -}) }} +{ + { + govukInput({ + spellcheck: true, + }); + } +} ``` This was added in pull requests: @@ -920,7 +945,6 @@ The [back link](https://design-system.service.gov.uk/components/back-link/) comp This was added in [pull request #1753: Make back link arrow consistent with breadcrumb component](https://github.com/alphagov/govuk-frontend/pull/1753). Thanks to [@vanitabarrett](https://github.com/vanitabarrett) and [@miaallers](https://github.com/miaallers). - ### Deprecated features #### Importing from the `core` and `overrides` layers without `base` @@ -938,7 +962,6 @@ If you do not import `node_modules/govuk-frontend/govuk/base` first, your servic This was added in [pull request #1807: Warn if importing core, overrides without dependencies](https://github.com/alphagov/govuk-frontend/pull/1807). - ### Fixes We’ve made fixes to GOV.UK Frontend in the following pull requests: @@ -947,7 +970,6 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#1765: Import textarea from character count](https://github.com/alphagov/govuk-frontend/pull/1765) - [#1796: Standardise accordion section headings font size (reduce height of section headings on mobile)](https://github.com/alphagov/govuk-frontend/pull/1796) - ## 3.6.0 (Feature release) ### New features @@ -1075,6 +1097,7 @@ Align ‘Warning text’ icon with first line of the content fixing [#1352](http - [Pull request #1578: Change position and spacing relationship of warning text icon](https://github.com/alphagov/govuk-frontend/pull/1578) ### Fixes + - [Pull request #1574: Make form elements scale correctly when text resized by user](https://github.com/alphagov/govuk-frontend/pull/1574). - [Pull request #1584: Fix text resize issue with warning text icon](https://github.com/alphagov/govuk-frontend/pull/1584) - [Pull request #1570: Prevent inputs ending up off screen or obscured by keyboards when linking from the error summary to inputs within a large fieldset](https://github.com/alphagov/govuk-frontend/pull/1570) @@ -1094,9 +1117,9 @@ You can now add classes to the form group wrapper of the character count compone ```javascript govukCharacterCount({ formGroup: { - classes: 'app-character-count--custom-modifier' - } -}) + classes: "app-character-count--custom-modifier", + }, +}); ``` - [Pull request #1553: Include formGroup on character count and pass through to textarea to allow class to be added to character count form group](https://github.com/alphagov/govuk-frontend/pull/1553). Thanks to [Emma Lewis](https://github.com/LBHELewis). @@ -1129,13 +1152,12 @@ You can now pass [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/G ```javascript govukInput({ - inputmode: 'email' -}) + inputmode: "email", +}); ``` - [Pull request #1527: Add inputmode option to the input component](https://github.com/alphagov/govuk-frontend/pull/1527) - ### Fixes - [Pull request #1523: Improve accessibility of details component by polyfilling only where the native element is not available](https://github.com/alphagov/govuk-frontend/pull/1523). @@ -1146,9 +1168,11 @@ govukInput({ ## 3.0.0 (Breaking release) ### Breaking changes + You must make the following changes when you migrate to this release, or your service may break. #### Update file paths, attributes and class names + 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’re using Sass @@ -1160,13 +1184,14 @@ For example: ```scss @import "node_modules/govuk-frontend/govuk/all"; ``` + If you’ve [added `node_modules/govuk-frontend` as a Sass include path](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#optional-resolving-scss-import-paths), add `govuk/` to your `@import` paths: ```scss @import "govuk/all"; ``` -##### If you’re using Javascript +##### If you’re using Javascript You must do the following. @@ -1193,9 +1218,7 @@ You do not need to do anything if you're using Nunjucks macros and the [`initAll If you are not using Nunjucks macros, add a `govuk-` prefix to `data-module` attribute values. For example: ```html -
-... -
+
...
``` The [button](https://design-system.service.gov.uk/components/button/) and [details](https://design-system.service.gov.uk/components/details/) components now also use the `data-module` attribute for initialisation. If you are not using Nunjucks macros, add: @@ -1249,8 +1272,14 @@ In the assets path, add `govuk/` after `govuk-frontend/`: If your code uses Express.js, you must also use the following code in your configuration file: ```javascript -app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets'))) +app.use( + "/assets", + express.static( + path.join(__dirname, "/node_modules/govuk-frontend/govuk/assets") + ) +); ``` + Pull requests: - [#1458: Namespace nunjucks and components](https://github.com/alphagov/govuk-frontend/pull/1458) @@ -1284,7 +1313,6 @@ Pull requests: - [#1326: Update tabs component to WCAG 2.1 compliant focus style](https://github.com/alphagov/govuk-frontend/pull/1326) - [#1361: Remove `govuk-focusable`, `govuk-focusable-fill` mixins, introduce `govuk-focus-text` mixin](https://github.com/alphagov/govuk-frontend/pull/1361) - #### Update colours You can now use the following new colour variables that we've added to the [colour palette](https://design-system.service.gov.uk/styles/colour#main-colours): @@ -1296,30 +1324,30 @@ You can now use the following new colour variables that we've added to the [colo 5 Sass colour variables no longer exist. Replace the following colour variables if you're using Sass: -Colour variable removed|Suggested replacement -| --- | --- | -bright-red|red -grey-1|dark-grey -grey-2|mid-grey -grey-3|light-grey -grey-4|light-grey +| Colour variable removed | Suggested replacement | +| ----------------------- | --------------------- | +| bright-red | red | +| grey-1 | dark-grey | +| grey-2 | mid-grey | +| grey-3 | light-grey | +| grey-4 | light-grey | You should check the [contrast ratio of your colours](https://design-system.service.gov.uk/styles/colour#colour-contrast). If you're not using Sass, change the values of the following colours: -Colour name|Old value|Replace with -| --- | --- | --- | -purple|#2e358b|#4c2c92 -red|#b10e1e|#d4351c -yellow|#ffbf47|#ffdd00 -green|#006435|#00703c -grey-2|#bfc1c3|#b1b4b6 -grey-3|#dee0e2|#f3f2f1 -grey-4|#f8f8f8|#f3f2f1 -light-blue|#2b8cc4|#5694ca -blue|#005ea5|#1d70b8 -bright-red|#df3034|#d4351c +| Colour name | Old value | Replace with | +| ----------- | --------- | ------------ | +| purple | #2e358b | #4c2c92 | +| red | #b10e1e | #d4351c | +| yellow | #ffbf47 | #ffdd00 | +| green | #006435 | #00703c | +| grey-2 | #bfc1c3 | #b1b4b6 | +| grey-3 | #dee0e2 | #f3f2f1 | +| grey-4 | #f8f8f8 | #f3f2f1 | +| light-blue | #2b8cc4 | #5694ca | +| blue | #005ea5 | #1d70b8 | +| bright-red | #df3034 | #d4351c | We've also changed the background of the following components: @@ -1366,9 +1394,7 @@ For example: ```html
  • - - Tab 1 - + Tab 1
    • ``` @@ -1389,8 +1415,8 @@ For example: govukButton({ text: "Start now", href: "#", - isStartButton: true -}) + isStartButton: true, +}); ``` If you're using HTML, add the SVG code from the [start button example in the Design System](https://design-system.service.gov.uk/components/button/#start-buttons). @@ -1421,7 +1447,7 @@ If you're passing a class name, put the mixin inside your selector. For example: ```scss .your-class-name { - @include govuk-grid-column(...) + @include govuk-grid-column(...); } ``` @@ -1449,7 +1475,6 @@ You can now add attributes like classes, rowspan and colspan to table row header [Pull request #1367: Allow for classes, rowspan, colspan and attributes on row headers](https://github.com/alphagov/govuk-frontend/pull/1367). Thanks to [edwardhorsford](https://github.com/edwardhorsford). - #### Use page wrapper auto spacing You can now add the `.govuk-main-wrapper--auto-spacing` modifier class to your `
    ` element to add responsive padding to the top and bottom of the page. @@ -1473,7 +1498,7 @@ This is because IE8 requires a very large Embedded Open Type (.eot) font file fo ### Fixes - [Pull request #1310: The border on error summaries is now the correct width on mobile. -GOV.UK Template's focused link colour no longer overrides GOV.UK Frontend](https://github.com/alphagov/govuk-frontend/pull/1310). + GOV.UK Template's focused link colour no longer overrides GOV.UK Frontend](https://github.com/alphagov/govuk-frontend/pull/1310). - [Pull request #1316: Checkboxes and radios no longer have a transparent outline - because it's no longer needed to fix custom focus state colours](https://github.com/alphagov/govuk-frontend/pull/1316). - [Pull request #1324: There’s no longer an outline when a user focuses an accordion element in Firefox](https://github.com/alphagov/govuk-frontend/pull/1324). - [Pull request #1330: We've changed the spacing around lists in tabs on mobile and with JavasScript disabled, so they're consistent with other lists](https://github.com/alphagov/govuk-frontend/pull/1330). @@ -1494,18 +1519,19 @@ GOV.UK Template's focused link colour no longer overrides GOV.UK Frontend](https 🆕 New features - You can now override the visually hidden 'Support links' text in the footer by -setting `meta.visuallyHiddenTitle`. + setting `meta.visuallyHiddenTitle`. ([Pull request #1387](https://github.com/alphagov/govuk-frontend/pull/1387)) 🔧 Fixes - Secondary buttons and warning buttons now have the correct background colour -when they're disabled. + when they're disabled. ([Pull request #1392](https://github.com/alphagov/govuk-frontend/pull/1392)) - The crown logo image in the header now: + - has height and width attributes set - aligns better with 'GOV.UK' in IE8 @@ -1578,10 +1604,10 @@ when they're disabled. - Add various fixes to the summary list component: 1. Fixes the 1px row height change when borders are removed - Padding is now adjusted by 1px instead + Padding is now adjusted by 1px instead 2. Fixes the text alignment when the actions column isn't added - So the key column always stays at 30% width + So the key column always stays at 30% width ([PR #1259](https://github.com/alphagov/govuk-frontend/pull/1259)) @@ -1659,26 +1685,34 @@ If you're using your own components that rely on the overflow state of the docum macros: ```js - {{ govukInput({ - name: "example", - pattern: "[0-9]*" - }) }} + { + { + govukInput({ + name: "example", + pattern: "[0-9]*", + }); + } + } ``` As well as `pattern`, custom attributes can also be added on day/month/year inputs (e.g. `data-example`) shown below: ```js - {{ govukDateInput({ - items: [ - { - pattern: "[0-9]*", - attributes: { - "data-example": "value" - } - } - ] - }) }} + { + { + govukDateInput({ + items: [ + { + pattern: "[0-9]*", + attributes: { + "data-example": "value", + }, + }, + ], + }); + } + } ``` ([PR #1172](https://github.com/alphagov/govuk-frontend/pull/1172)) @@ -1693,7 +1727,6 @@ If you're using your own components that rely on the overflow state of the docum ([PR #1230](https://github.com/alphagov/govuk-frontend/pull/1230)) - - Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc) On newer devices with "camera notches", browsers reserve a safe area in @@ -1704,13 +1737,11 @@ If you're using your own components that rely on the overflow state of the docum ([PR #1176](https://github.com/alphagov/govuk-frontend/pull/1176)) - - Prefix error messages with a visually hidden "Error:", to make it clearer to users of assistive technologies ([PR #1221](https://github.com/alphagov/govuk-frontend/pull/1221)) - - Prevent accidental multiple submissions of forms If a user double clicks a submit button in a form, we debounce this event and @@ -1719,23 +1750,24 @@ If you're using your own components that rely on the overflow state of the docum HTML data attribute: ```html - + ``` Nunjucks macro: ```js - {{ govukButton({ - text: "Submit", - preventDoubleClick: true - }) }} + { + { + govukButton({ + text: "Submit", + preventDoubleClick: true, + }); + } + } ``` ([PR #1018](https://github.com/alphagov/govuk-frontend/pull/1018)) - 🔧 Fixes: - Ensure that files within the core, objects and overrides layers can be @@ -1754,14 +1786,12 @@ If you're using your own components that rely on the overflow state of the docum ([PR #1235](https://github.com/alphagov/govuk-frontend/pull/1235)) - - Ensure inset component does not misalign nested components Thanks to [Paul Hayes](https://github.com/fofr) for raising this issue. ([PR #1232](https://github.com/alphagov/govuk-frontend/pull/1232)) - - Improve word wrapping in summary list component Thanks to [Edward Horsford](https://github.com/edwardhorsford) and [Lee Kowalkowski](https://github.com/leekowalkowski-hmrc) for their help on this one. @@ -1770,7 +1800,6 @@ If you're using your own components that rely on the overflow state of the docum ([PR #1220](https://github.com/alphagov/govuk-frontend/pull/1220)) - ## 2.7.0 (Feature release) 🆕 New features: @@ -2021,7 +2050,6 @@ If you're using your own components that rely on the overflow state of the docum ([PR #959](https://github.com/alphagov/govuk-frontend/pull/959)) - 🔧 Fixes: - Apply max-width to the `