Bump govuk-frontend from 4.7.0 to 5.3.0

[dependabot]

Bumps govuk-frontend from 4.7.0 to 5.3.0.

Release notes

Sourced from govuk-frontend's releases.

GOV.UK Frontend v5.3.0

To install this version with npm, run npm install govuk-frontend@5.3.0. You can also find more information about how to stay up to date in our documentation.

New features

Use the Password input component to help users accessibly enter passwords

The Password input component allows users to choose:

• whether their passwords are visible or not
• to enter their passwords in plain text

This helps users use longer and more complex passwords without needing to remember what they've already typed.

This change was introduced in [pull request #4442: Create password input component](alphagov/govuk-frontend#4442). Thanks to @​andysellick for the original contribution.

Recommended changes

Update the HTML for the Character count component

We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

If you're not using Nunjucks macros, then you should:

• move all classes and attributes from the form group <div> to the component wrapper <div>
• remove the opening <div> and closing </div> tags used by the form group
• check the count message is now directly after the <textarea>

The following example shows some HTML and the difference once it’s updated.

HTML before:

<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
    <!-- // Label, hint, error and textarea -->
  </div>
  <!-- // Count message -->
</div>

HTML after:

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <!-- // Label, hint, error, textarea and count message -->
</div>

Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.

... (truncated)

Changelog

Sourced from govuk-frontend's changelog.

GOV.UK Frontend v5.3.0 (Feature release)

New features

Use the Password input component to help users accessibly enter passwords

The Password input component allows users to choose:

• whether their passwords are visible or not
• to enter their passwords in plain text

This helps users use longer and more complex passwords without needing to remember what they've already typed.

This change was introduced in [pull request #4442: Create password input component](alphagov/govuk-frontend#4442). Thanks to @​andysellick for the original contribution.

Recommended changes

Update the HTML for the Character count component

We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

If you're not using Nunjucks macros, then you should:

• move all classes and attributes from the form group <div> to the component wrapper <div>
• remove the opening <div> and closing </div> tags used by the form group
• check the count message is now directly after the <textarea>

The following example shows some HTML and the difference once it’s updated.

HTML before:

<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
    <!-- // Label, hint, error and textarea -->
  </div>
  <!-- // Count message -->
</div>

HTML after:

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <!-- // Label, hint, error, textarea and count message -->
</div>

Check your changes against the Character count example in the Design System to make sure you’ve correctly implemented them.

... (truncated)

Commits

• 0801b62 Merge pull request #4896 from alphagov/release-5.3.0
• 05bea72 Release v5.3.0
• 8dae1da Merge pull request #4889 from alphagov/dependabot/npm_and_yarn/types-e8219633e3
• f655ff0 Merge pull request #4888 from alphagov/dependabot/npm_and_yarn/test-b842278729
• c3685e9 Bump the types group with 1 update
• 2d22c6e Bump the test group with 1 update
• 2238606 Merge pull request #4894 from alphagov/dependabot/npm_and_yarn/postcss-1a9d4a...
• 15f55d7 Bump the postcss group with 3 updates
• ad66ea7 Merge pull request #4885 from alphagov/dependabot/npm_and_yarn/lint-0bc2769b6d
• 58aea13 Merge pull request #4882 from alphagov/dependabot/npm_and_yarn/babel-569e292a9e
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

[dependabot]

Superseded by #779.