govuk-frontend - npm Package Versions

published 2.8.0 • 6 years ago

Changelog

2.8.0 (Feature release)

Considerations for fixed components such as modals

We have been made aware that the change to force scroll bars to appear at all times can change the behaviour of some components such as modals.

If you're using your own components that rely on the overflow state of the document (such as modals) you should make sure you test those components when updating to this version.

🆕 New features:

Enable pattern attribute for input

You can now set the pattern attribute on input fields using the component macros:
```
{{ 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:
```
{{ govukDateInput({
  items: [
    {
      pattern: "[0-9]*",
      attributes: {
        "data-example": "value"
      }
    }
  ]
}) }}
```
(PR #1172)
Prevent horizontal jump as scrollbars appear

As content vertical height grows (e.g. autocomplete results appear), browsers may add scroll bars causing the page to jump horizontally in position.

To avoid this, re-introduce fix from GOV.UK Template: https://github.com/alphagov/govuk-frontend/issues/1204

(PR #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 landscape orientation (known as pillarboxing) so content isn't obscured.

To avoid this, support has been added for viewport-fit=cover as shown here: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

(PR #1176)
Prefix error messages with a visually hidden "Error:", to make it clearer to users of assistive technologies

(PR #1221)
Prevent accidental multiple submissions of forms

If a user double clicks a submit button in a form, we debounce this event and ignore the second click.

HTML data attribute:
```
<button class="govuk-button" data-prevent-double-click="true">
  Submit
</button>
```
Nunjucks macro:
```
{{ govukButton({
  text: "Submit",
  preventDoubleClick: true
}) }}
```
(PR #1018)

🔧 Fixes:

Ensure that files within the core, objects and overrides layers can be imported individually

Unlike components, the files within these layers did not previously import their dependencies (for example, most of them require the govuk-exports mixin but did not import it).

We've also added tests to ensure that files within these layers can be imported and rendered to CSS without erroring, which should catch this in the future.

Thanks to Alasdair McLeay for originally raising a PR to fix this.

(PR #1235)
Ensure inset component does not misalign nested components

Thanks to Paul Hayes for raising this issue.

(PR #1232)
Improve word wrapping in summary list component

Thanks to Edward Horsford and Lee Kowalkowski for their help on this one.

Also thanks to Malcolm Butler for exploring a previous version of this fix.

(PR #1220)

2.7.0

published 2.7.0 • 6 years ago

Changelog

2.7.0 (Feature release)

🆕 New features:

Added config file for prototype kit.

Added a configuration file for an experimental feature in Prototype kit to allow departments to use their own frontend alongside govuk-frontend

Thanks @matcarey (HMRC) for this contribution

(PR #1102)
Disable incorrect iOS/Edge text size adjustments

To cater for non-responsive websites, iOS and Edge automatically increase font sizes (iOS in landscape, Edge in portrait on HiDPI displays).

Since we have already considered typography at these device sizes, this feature is now turned off.

(PR #1178)

🔧 Fixes:

Fix wrapping of long lines of text in summary list

Thanks to @MoJ-Longbeard for raising the issue.

(PR #1169)

2.6.0

published 2.6.0 • 6 years ago

Changelog

2.6.0 (Feature release)

🆕 New features:

Enable autocomplete attributes for input components.

You can now set the autocomplete attribute on input, date input and textarea components using the component macros.

This was already possible to do with the attributes option but this change highlights the new WCAG 2.1 success criteria Identify Input Purpose which "is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities".

See autofill for the full list of attributes that can be used.

(PR #1146)

🔧 Fixes:

Include Accordion component in global namespace

Accordion component was not exported and was therefore unavailable in global namespace

(PR #1157)
Fix Checkboxes and Radios targeting selectors outside it's scope

Thanks to @andysellick and @bilbof for helping us with this issue.

(PR #1156)
Fixes styling of the accordion component when there is no JavaScript or it has been turned off

Thanks @dankmitchell for reporting this issue (#1130)

(PR #1149)
Remove hover state for accordion sections on mobile

(PR #1148)
Fix container not being centered in IE8

Since the header and the footer component use this container it also fixes centering for these components.

(PR #1147)
Make gutters in the header consistent with the grid

This means that the header will now line up with the grid.

Thanks to @edwardhorsford for raising this issue.

(PR #1144)

2.5.1

published 2.5.1 • 6 years ago

Changelog

2.5.1 (Fix release)

🔧 Fixes:

Update summary list to simplify actions

Only output actions in a list when there's multiple actions.

(PR #1131)

2.5.0

published 2.5.0 • 6 years ago

Changelog

2.5.0 (Feature release)

🆕 New features:

Accordion component 🎉

Contributed by @frankieroberto, as well as @injms, @hannalaakso, @joelanman and others.

The accordion component lets users show and hide sections of related content on a page.

For more information see guidance.

(PR #958)
Add desktop specific grid column widths

This allow you to define different grid behaviour for the tablet and desktop breakpoints. For example, you can make a column two-thirds on desktop but expand to full-width on smaller tablet sized screens.

(PR #1094)
Add summary list component

This component was initially developed to allow us to build the 'check your answers' pattern.

It is mostly the same as in the original pattern with some notable differences:
- On smaller screens it wraps by default
- It's possible to have multiple actions
(PR #1065)

🔧 Fixes:

Update visually hidden class to fix ordering issue in VoiceOver OSX

We have fixed an issue in VoiceOver OSX where using the govuk-visually-hidden class in links would result in the text being announced out of order.

We also now recommend to use aria-label or aria-labelledby where appropriate.

Thanks to @stevenaproctor and the accessibility team at HMRC for letting us know about this issue.

(PR #1109)
Improve rendering in older Internet Explorer

Added a meta tag to ensure that older IE versions always render with the correct rendering engine

(PR #1119)

2.4.1

published 2.4.1 • 6 years ago

Changelog

2.4.1 (Fix release)

🔧 Fixes:

Remove unused hint, error message and label imports from the Character Count component

(PR #1087)
Warning text component, remove negative margin left and reduce padding left to match.

(PR #1084)
Add 5px bottom margin to list items within lists that do not have bullets or numbers on mobile breakpoints to make each item visually distinct.

(PR #1078)
Add error message attributes to all components

(PR #1086)

2.4.0

published 2.4.0 • 6 years ago

Changelog

2.4.0 (Feature release)

🆕 New features:

Scroll to label or legend when linked from error summary

When users click links in the error summary, the corresponding label or legend will now be moved to the top of the viewport, rather than the input. This means that the context for the input remains on-screen.

(PR #1056)
Label or legend are announced for NVDA users when navigating to an input from the error summary

(PR #1056)
Allow form group classes on date, file upload, input, select and textarea

All remaining form groups should allow additional classes, like with radios and checkboxes

(PR #1059)

🔧 Fixes:

Remove implicit dependency on Element for classList

(PR #1063)
Single field with error should have 'aria-describeby' attribute

Although we discourage using checkboxes without fieldsets, this fix ensures that if there are no fieldset then the aria-describeby will still be usable by screenreaders by adding the element ids to the checkbox input elements 'aria-describeby' attribute.

(PR #1054)

2.3.0

published 2.3.0 • 6 years ago

Changelog

2.3.0 (Feature release)

🆕 New features:

Add important parameter to visually hidden sass mixins

Optional parameter added to govuk-visually-hidden and govuk-visually-hidden-focusable mixins (defaults to true)

(PR #1037)
Add support for attributes on table cells

Can now use the familiar attrubutes: {} pattern to add various attributes such as id or data-attr to cells within tables

(PR #1045)
Allow form group classes on radios and checkboxes

We now provide a way to add classes to the radio and checkbox form-group wrapper

(PR #1043)

🔧 Fixes:

Fix anchor links in tabs component panels

(PR #1031)
Fix IE8 support in builds in the dist/ folder

(PR #1035)

2.2.0

published 2.2.0 • 6 years ago

Changelog