Bump govuk-frontend from 5.12.0 to 5.13.0

[dependabot]

Bumps govuk-frontend from 5.12.0 to 5.13.0.

Release notes

Sourced from govuk-frontend's releases.

GOV.UK Frontend v5.13.0

New features

Use Sass functions to create custom media queries

We've added new Sass functions to help write @media and @container queries, mixins and functions whilst still using GOV.UK Frontend's $govuk-breakpoints setting.

You can create min-width and max-width queries using the govuk-from-breakpoint and govuk-until-breakpoint functions:

.element {
  color: red;
@​media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
color: blue;
}
}

You can get the configured value of a breakpoint using govuk-breakpoint-value:

@function wider-than-tablet($width) {
  @return $width > govuk-breakpoint-value(tablet);
}

Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring @container queries.

$component-breakpoints: (
  small: 300px,
  medium: 500px,
  large: 750px
);
.element {
color: red;
@​container #{govuk-from-breakpoint(small, $component-breakpoints)} {
color: blue;
}
}

We've rewritten the internals of the govuk-media-query mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected.

We made these changes in the following pull requests:

... (truncated)

Changelog

Sourced from govuk-frontend's changelog.

v5.13.0 (Feature release)

New features

Use Sass functions to create custom media queries

We've added new Sass functions to help write @media and @container queries, mixins and functions whilst still using GOV.UK Frontend's $govuk-breakpoints setting.

You can create min-width and max-width queries using the govuk-from-breakpoint and govuk-until-breakpoint functions:

.element {
  color: red;
@​media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
color: blue;
}
}

You can get the configured value of a breakpoint using govuk-breakpoint-value:

@function wider-than-tablet($width) {
  @return $width > govuk-breakpoint-value(tablet);
}

Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring @container queries.

$component-breakpoints: (
  small: 300px,
  medium: 500px,
  large: 750px
);
.element {
color: red;
@​container #{govuk-from-breakpoint(small, $component-breakpoints)} {
color: blue;
}
}

We've rewritten the internals of the govuk-media-query mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected.

We made these changes in the following pull requests:

... (truncated)

Commits

• 33e5c9b Release 5.13.0
• fa51c53 Merge pull request #6316 from alphagov/task-list-forced-hover-state
• e6cf36e Fix file upload filenames not wrapping
• 040bf1c Fix mistakes in component option descriptions
• 0ea7220 Add forced hover state example to task list
• d852dbc Account for multiple attribute when enhancing a File Input
• 5ce8a7f Rename ellipses html class to ellipsis
• 714e798 Merge pull request #6280 from alphagov/dependabot/npm_and_yarn/test-6c074fb7db
• e78f210 Expect errors from failing moduleResolution
• f5209a5 Bump the test group with 4 updates
• 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)