The default build of the GOV.UK Frontend JavaScript now does not initialize all components automatically.

This allows you to initialize only the components you need, and gives you finer control over when the JavaScript for GOV.UK Frontend runs.

To migrate your project you need to change
```
  <script src="{path-to-govuk-frontend}/all.js"></script>
```
to
```
  <script src="{path-to-govuk-frontend}/all.js"></script>
  <script>window.GOVUKFrontend.initAll()</script>
```
Now, if you only want to initialize a specific component you can now do so by:
```
  <script src="{path-to-govuk-frontend}/all.js"></script>
  <script>
    var Button = window.GOVUKFrontend.Button
    new Button(document).init()
  </script>
```
Note: If you are importing JavaScript with a bundler, this is not likely to change anything for you. (PR #759)

Consistently structure the Details and Button component, so that they can be instantiated the same as the other components.

If you're using GOVUKFrontend.initAll() you do not need to make any changes, otherwise you need to change

  <script>
    new Button().init()
    new Details().init()
  </script>

  <script>
    new Button(document).init()

    var $details = document.querySelectorAll('details')
    nodeListForEach($details, function ($detail) {
      new Details($detail).init()
    })
  </script>

(PR #761)

All sass-mq settings have now been made private. We are now exposing new settings to allow you to customise breakpoints and responsive behaviour:
- $govuk-breakpoints - Map of breakpoint definitions
- $govuk-show-breakpoints - Whether to show the current breakpoint in the top right corner
- $govuk-ie8-breakpoint - Breakpoint to rasterize to for IE8
If you are overriding any settings prefixed with $mq- in your application you will need to update to the use the new $govuk- prefixed settings.

(PR #748)
Font settings have been renamed:
- $govuk-font-stack has been renamed to $govuk-font-family
- $govuk-font-stack-tabular has been renamed to $govuk-font-family-tabular
- $govuk-font-stack-print has been renamed to $govuk-font-family-print
(PR #748)
Spacing has been refactored. You will need to update Sass that currently uses GOV.UK Frontend spacing:
- Instead of
```
$govuk-spacing-scale-*
```
use
```
govuk-spacing(*)
```
where * is the number on the spacing scale. The scale itself has remained the same so that $govuk-spacing-scale-3 corresponds to govuk-spacing(3). This change allows us to control the error messaging when incorrect values are used and to deprecate variables. The values of spacing variables can also be overridden by consumers.
- Instead of:
```
@include govuk-responsive-margin($govuk-spacing-responsive-2, "bottom");
@include govuk-responsive-padding($govuk-spacing-responsive-2, "bottom");
```
use
```
@include govuk-responsive-margin(2, "bottom");
@include govuk-responsive-padding(2, "bottom");
```
This change, again, allows us to control the error messaging since spacing variables are not exposed directly. Also, the spacing scale itself has not changed so that $govuk-spacing-responsive-2 corresponds to 2 when passed to the padding and margin mixins.

This PR also updates tests and sass-docs of spacing variables and helpers.

Additionally, this PR hardcodes the value of $govuk-gutter, see PR for more details.

(PR #779)
Remove pageStart block from template, as could result in rendering issues in older IE. (PR #765)
You should no longer call the mq mixin directly - you should replace any calls to it from your own code with govuk-media-query which accepts the same arguments. All mixins and settings that start with mq- should be considered private – they could be removed in the future without notice. (PR #763)
All of the shorthand 'font' mixins (e.g. govuk-font-bold-80, govuk-font-regular-tabular-19), have been removed and replaced with calls to a new mixin govuk-font. If you are using these mixins in your application you will need to update your code to call govuk-font instead.

(PR #772)
The font maps are no longer as individual variables (e.g. $govuk-font-80) - they are all now part of one single $govuk-typography-scale map. Instead of passing font maps to govuk-typography-responsive you should now pass the desktop font size (e.g. govuk-typography-responsive(80) or govuk-typography-responsive($size: 80).

(PR #772)
All organisation variables (e.g. $govuk-cabinet-office) have been moved into a single $govuk-colours-organisations map. If you need to use an organisation colour in your own code, you should use the new govuk-organisation-colour function:
```
.element {
  color: govuk-organisation-colour(cabinet-office);
}
```
Note that this function will return 'web-safe' colours by default. You can pass $websafe: false to get the non-websafe colour.
The colour palette variables (e.g. $govuk-green) have been moved into a new single $govuk-colours map. If you need to reference a colour within your application you should use the new govuk-colour function:
```
.element {
  color: govuk-colour("green");
}
```
Tints ($govuk-green-50, $govuk-green-25) have been removed from the colour palette.
A number of the colours have been renamed to use more neutral names:
- mauve → light-purple
- fuchsia → bright-purple
- baby-pink → light-pink
- mellow-red → bright-red
- grass-green → light-green
The 'circle shape' object (.govuk-circle) which was used by the warning text component's '!' icon has been removed and the govuk-warning-text__icon class has been updated to make it circular without the need for another class.

(PR #782)
Removal of govuk-prose-scope We don't have confidence that the prose scope is well understood – without further research / better documentation it's safer to remove it for now.

If you are currently using prose-scope, you should revert to applying classes to individual headings, lists and hr elements. In version 0.0.29-alpha release we have added the option to enable global link and paragraph styles.

If you're using a recent version of the Private Beta Prototype kit, this is enabled by default.

(PR #778)
Make override classes consistently verbose Based on feedback from the community we have made the override classes consistent where previously some where verbose and some where shorthand.

We've made the decision to remove the 'r' for responsive, this was hard to remember and users found this confusing.

To migrate you will need to replace any instances of:
- .govuk-!-f-{size} with .govuk-!-font-size-{size}
- .govuk-!-w-{weight} with .govuk-!-font-weight-{weight}
- .govuk-!-m{direction}-r{scale} with .govuk-!-margin-{direction}-{scale}
- .govuk-!-p{direction}-r{scale} with .govuk-!-padding-{direction}-{scale}
For example if you were using:
- .govuk-!-mb-r5 you would need to change this to .govuk-!-margin-bottom-5
- .govuk-!-f-24 you would need to change this to .govuk-!-font-size-24
See the original Pull Request for the full list of classes before and after.

(PR #786)

🔧 Fixes:

Fix govuk-equilateral-height function usage in shape-arrow helper (PR ##766)
The <label> element will now be omitted for form controls where no label text or html is provided. If you call the label component directly whilst passing neither text nor html, no HTML will be outputted. (PR #740)
Add govuk-main-wrapper to <main> element by default. (PR #742)
Use relative imports whenever a component imports another component, to allow for cases where users don't want to add the components folder itself to their nunjucks paths. (PR #743)
Update JavaScript global namespace from 'all' to 'GOVUKFrontend', we intend to allow users to initialize components from this namespace. (PR #747)
Tabular numbers will now correctly use the $govuk-font-family-tabular setting rather than being hardcoded to use NTA tabular. (PR #748)
Prevents focus from being lost to the inline SVGs in the header (the crown) and footer (the OGL logo) by marking them as non-focusable elements (PR #774)
Use the correct class name in bold label example (govuk-label--s rather than govuk-label--bold) (PR #784)
Update table of arguments for each component to ensure they're accurate. (PR #769)
Add explicit dependency on colour maps (PR #790)

🆕 New features:

Components are now available to use from the GOVUKFrontend global. You can now initialize individual components like so:

  <script>
    var Radios = window.GOVUKFrontend.Radios
    new Radios(document).init()
  </script>

(PR #759)

Add beforeContent block to the template, for content that does not belong inside <main> element. For example: Back links. (PR #742)
Most of the settings, helpers and tools layers is now documented using Sassdoc, with variables, functions and mixins being marked as private or public. (PR #748) (PR #762)
Most of the settings can now be overridden in your application (they are now marked as !default) (PR #748)

🏠 Internal:

Fix review application templates to give them the correct HTML structure. (PR #742)
Improve release steps (PR #745)
Reintroduce mistakenly deleted HTML5Shiv required for IE8 (PR #749)
Fix issues with canvas colour bleeding into main review page (PR #741)
Add header with service name and navigation variant to header README (PR #781)

…

6 7

govuk-frontend - npm Package Versions

0.0.32

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}0.0.32 (Breaking release)

0.0.32 (Breaking release)