govuk-frontend - npm Package Versions

published 3.10.2 • 4 years ago

Changelog

3.10.2 (Patch release)

Fixes

We’ve made fixes to the fixtures you can use to check your HTML matches GOV.UK Frontend.

These changes were made in the following pull requests:

#2031: Include hidden status of the component examples in published fixtures – thanks to @andymantell for contributing this
#2043: Fixes for a couple of component examples / fixtures – thanks to @andymantell for contributing this as well!
#2071: Use non-bool type strings for attributes in test fixtures – thanks to @matthew-shaw for contributing this

There are no other changes to GOV.UK Frontend in this release.

3.10.1

published 3.10.1 • 4 years ago

Changelog

3.10.1 (Patch release)

Fixes

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

3.10.0

published 3.10.0 • 4 years ago

Changelog

3.10.0 (Feature release)

New features

Update users with notification banners

You can now use notification banners to tell users about events that occur elsewhere in your service. For example, when they need to complete tasks.

This was added in pull request #1935: Create notification banner component.

Customise input mode in the date component

You can now change which keyboard type displays for mobile and tablet users. This enables users to enter characters other than numbers when they use the date input. To change the keyboard type, set the inputmode when you use the Nunjucks macro options.

This was added in pull request #1975: Enable custom inputmode for date input component. Thanks to @foaly-nr1 for contributing this issue.

3.9.1

published 3.9.1 • 4 years ago

Changelog

3.9.1 (Fix release)

Fixes

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

#1967: Fix navigation links in the header not being announced by screen readers

3.9.0

published 3.9.0 • 4 years ago

Changelog

3.9.0 (Feature release)

New features

Add a prefix or suffix to a text input component

You can now use prefixes and suffixes in the text input component to help users enter things like currencies and measurements.

This was added in pull request #1816: Add input prefix and suffix. Thanks to @simonwhatley and the GOV.UK Coronavirus Services Team.

3.8.1

published 3.8.1 • 4 years ago

Changelog

3.8.1 (Fix release)

Fixes

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

#1912: Fix character count shrinking as you go over limit

3.8.0

published 3.8.0 • 4 years ago

Changelog

3.8.0 (Feature release)

New features

The secondary text colour is now darker

$govuk-secondary-text-colour and govuk-colour("dark-grey") are now darker so users can more clearly read hint text that uses the colour.

The colour now has a contrast ratio of 7:1 against a white background, and helps hint text meet the WCAG 2.1 (AAA) accessibility standard.

This was added in pull request #1827: Make dark grey darker.

Error styling for field border thickness is now the same with and without an error

The error styling for the:

text input, select and textarea components no longer makes the border thicker
file upload component no longer includes a border around the file upload input

This means it’s easier for users to tell the difference between a field with an error and a field that's focused.

When an error message is about several fields, make sure you're clear which field has the error. You must not rely on users being able to tell which field has the error styling.

This was added in pull request #1870: Reduce border width of form inputs in the error state.

Set spellcheck with a new option

You can now turn spellcheck on or off in the input, textarea and character count components using the new spellcheck option instead of the attributes option.

For example:

{{ govukInput({
    spellcheck: true
}) }}

This was added in pull requests:

Deprecated features

$govuk-border-width-form-element-error

From GOV.UK Frontend v4.0.0, you'll no longer be able to reference the $govuk-border-width-form-element-error Sass setting.

Change any references to $govuk-border-width-form-element-error in your Sass code so they reference $govuk-border-width-form-element instead.

This was changed in pull request #1870: Reduce border width of form inputs in the error state.

Fixes

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

3.7.0

published 3.7.0 • 4 years ago

Changelog

3.7.0 (Feature release)

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:

3.6.0

published 3.6.0 • 5 years ago

Changelog