merged major release and solved all conflicts

.github/workflows/check-labels.yml

@@ -17,6 +17,6 @@ jobs:
         steps:
             - uses: docker://onsdigital/github-pr-label-checker:latest
               with:
-                  one_of: Accessibility,Bug,Documentation,Dependencies,Enhancement,Example,Component,Pattern,CI/CD,Tech improvements
+                  one_of: Accessibility,Bug,Documentation,Dependencies,Enhancement,Example,Component,Pattern,CI/CD,Tech improvements,Breaking changes
                   none_of: Awaiting resource,Do not merge,Duplicate,Needs validating,Not doing
                   repo_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/macro-and-script-tests.yml

@@ -18,5 +18,7 @@ jobs:
                   node-version-file: '.nvmrc'
             - name: Install dependencies
               run: yarn install
+            - name: Clear jest cache
+              run: yarn test:clear-cache
             - name: Run macro and script tests
               run: yarn test

.github/workflows/npm-bundle.yml

@@ -26,4 +26,4 @@ jobs:
             - run: yarn npm-bundle
             - run: npm publish --access public
               env:
-                  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
             - name: Zip templates
               run: zip -r templates.zip templates/*
             - name: Release
-              uses: softprops/action-gh-release@v1
+              uses: softprops/action-gh-release@v2
               with:
                   files: templates.zip
               env:

.gitignore

@@ -15,6 +15,10 @@ backstop_data/bitmaps_test/
 backstop_data/html_report/
 backstop.config-for-docker.json
 
+# Generated from lighthouse tests
+.lighthouseci/
+lighthouse/urls.json
+
 # npm package folders
 /components/
 /page-templates/

.nvmrc

@@ -1 +1 @@
-v20.10.0
+v20.16.0

README.md

@@ -106,13 +106,13 @@ _Note_: This command is of limited use since JavaScript and SCSS files will only
 
 It is sometimes useful to adjust the following settings when writing tests or diagnosing issues:
 
--   `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await page.waitForTimeout(100000)` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
+-   `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await new Promise(r => setTimeout(r, 100000));` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
 
 -   `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
 
 ## Testing - Visual regression tests
 
-This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Puppeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
 
 The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
 
@@ -144,6 +144,42 @@ Generate a build into `./build`.
 yarn build
 ```
 
+## Manually publish to NPM
+
+Make sure you are logged into the CLI with the DS shared npm account
+
+Make sure dependencies are installed:
+
+```bash
+yarn install
+```
+
+Set the version (replacing "<DS release version>" with actual release version e.g. 70.0.0):
+
+```bash
+npm version <DS release version>
+```
+
+Create an NPM package by running:
+
+```bash
+yarn npm-bundle
+```
+
+**_Once you have published to npm, the version you have published can never be used again so you want to make sure you have the right files included to do this run:_**
+
+```bash
+npm pack
+```
+
+Then compare this list with the list of the current version here (https://www.npmjs.com/package/@ons/design-system?activeTab=code)
+
+If these match or have some expected changes then run this to publish:
+
+```bash
+npm publish --access public
+```
+
 ## Recommended Visual Studio Code Extensions for this project
 
 -   [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)

__snapshots__/layout/_template.spec.js.snap

@@ -165,7 +165,7 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
 
         <div class="ons-header__top">
             <div class="ons-container">
-                <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto">
 
                                 <div class="ons-header__org-logo ons-header__org-logo--large">
@@ -236,7 +236,7 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
         </div>
         <div class="ons-header__main">
             <div class="ons-container">
-                <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
 
 
@@ -404,7 +404,7 @@ exports[`base page template matches the footer block override snapshot 1`] = `
 
         <div class="ons-header__top">
             <div class="ons-container">
-                <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto">
 
                                 <div class="ons-header__org-logo ons-header__org-logo--large">
@@ -475,7 +475,7 @@ exports[`base page template matches the footer block override snapshot 1`] = `
         </div>
         <div class="ons-header__main">
             <div class="ons-container">
-                <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
 
 
@@ -671,7 +671,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
     <div class="ons-phase-banner">
         <div class="ons-container">
-            <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
+            <div class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-top ons-grid-flex--no-wrap">
 
                     <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
                         <strong class="ons-phase-banner__badge">BETA</strong>
@@ -687,7 +687,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
         <div class="ons-header__top">
             <div class="ons-container">
-                <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto"><a class="ons-header__org-logo-link" href="#0">
                                 <div class="ons-header__org-logo ons-header__org-logo--large">
                                     <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
@@ -884,7 +884,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
         </div>
         <div class="ons-header__main">
             <div class="ons-container">
-                <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
+                <div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
 
 
@@ -1326,7 +1326,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
-
+    
 
 
     <footer class="ons-footer">
@@ -1393,6 +1393,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1458,6 +1462,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1523,6 +1531,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1588,7 +1600,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                 </div>
 
-                <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
+                <div class="ons-grid ons-grid-flex--vertical-top ons-grid-flex--between">
                     <div class="ons-grid__col">
 
                             <!-- Legal -->
@@ -1604,6 +1616,10 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
+
+
 
 
 
@@ -1689,9 +1705,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                             </div>
 
+
+
+
+
 
-                            <a class="ons-footer__poweredBy-link" href="https://www.ons.gov.uk/">
-                                <div class="ons-footer__poweredby-logo ons-u-mb-l">
+
+                        <div class="ons-footer__logo-container ons-u-mb-l ons-grid-flex ons-grid-flex--vertical-top">
+                            <a class="ons-footer__logo-link" href="https://www.ons.gov.uk/">
         <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-footer-alt" role="img">
             <title id="ons-logo-en-footer-alt">
                 Office for National Statistics
@@ -1732,14 +1753,15 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                 <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9"></path>
             </g>
         </svg>
-    </div>
-                            </a>
-
+    </a>
+
+
+
+                        </div>
                     </div>
 
                 </div>
 
-
             </div>
         </div>
     </footer>
@@ -1870,7 +1892,7 @@ exports[`base page template matches the meta block override snapshot 1`] = `
 
         <div class="ons-header__top">
             <div class="ons-container">
-                <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto">
 
                                 <div class="ons-header__org-logo ons-header__org-logo--large">
@@ -1941,7 +1963,7 @@ exports[`base page template matches the meta block override snapshot 1`] = `
         </div>
         <div class="ons-header__main">
             <div class="ons-container">
-                <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
 
 
@@ -2093,7 +2115,7 @@ exports[`base page template matches the social block override snapshot 1`] = `
 
         <div class="ons-header__top">
             <div class="ons-container">
-                <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto">
 
                                 <div class="ons-header__org-logo ons-header__org-logo--large">
@@ -2164,7 +2186,7 @@ exports[`base page template matches the social block override snapshot 1`] = `
         </div>
         <div class="ons-header__main">
             <div class="ons-container">
-                <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
+                <div class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">