Release v2.8.0 🚀

[36degrees]

🆕  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:
  Content on pages move horizontally depending on if a scrollbar is on screen or not #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)

This also updates the documentation for a number of components to document missing options.

[NickColley]

We need to make sure to credit in the release notes @colinrotherham and @quis as they're not explicitly in the CHANGELOG notes.