diff --git a/.github/workflows/check-labels.yml b/.github/workflows/check-labels.yml index e92c31fe7e..790058fcec 100644 --- a/.github/workflows/check-labels.yml +++ b/.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 }} diff --git a/.github/workflows/macro-and-script-tests.yml b/.github/workflows/macro-and-script-tests.yml index e34598dfd5..668862b922 100644 --- a/.github/workflows/macro-and-script-tests.yml +++ b/.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 diff --git a/.github/workflows/npm-bundle.yml b/.github/workflows/npm-bundle.yml index 6482768624..a70a3b3448 100644 --- a/.github/workflows/npm-bundle.yml +++ b/.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 }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c62e1bc34b..139385b57e 100644 --- a/.github/workflows/release.yml +++ b/.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: diff --git a/.gitignore b/.gitignore index f267d1ba6a..a94eba5847 100644 --- a/.gitignore +++ b/.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/ diff --git a/.nvmrc b/.nvmrc index 790e1105f2..80a9956e1e 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v20.10.0 +v20.16.0 diff --git a/README.md b/README.md index acdf2ac56d..5be9bcc5ac 100644 --- a/README.md +++ b/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 "" with actual release version e.g. 70.0.0): + +```bash +npm 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) diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 89d20c9c64..f6bfb952a5 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -165,7 +165,7 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
-
+
-
+
@@ -404,7 +404,7 @@ exports[`base page template matches the footer block override snapshot 1`] = `
-
+
-
+
@@ -671,7 +671,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
+
BETA @@ -687,7 +687,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
+
-
+
@@ -1326,7 +1326,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - +
@@ -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`] = `
-
+
@@ -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`] = `
+ + + + - -
-
@@ -1870,7 +1892,7 @@ exports[`base page template matches the meta block override snapshot 1`] = `
-
+
-
+
@@ -2093,7 +2115,7 @@ exports[`base page template matches the social block override snapshot 1`] = `
-
+
-
+
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_address-output_example-address-output_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-output_example-address-output_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_address-output_example-address-output_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_address-output_example-address-output_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_address-output_example-address-output_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-output_example-address-output_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_address-output_example-address-output_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_address-output_example-address-output_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_address-output_example-address-output_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-output_example-address-output_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_address-output_example-address-output_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_address-output_example-address-output_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_0_desktop.png index 7de9d6cf01..f22917f9a5 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1def5dbd3416b81d15a1f4fac3d445fee51f949f2504e8e190b5fc369dd15b3b -size 36942 +oid sha256:d9f9903dcbe7f52d884f1fa9a2ac9464c064a43521354cdddedc77f541925c93 +size 40917 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_1_tablet.png index 112463f6e7..c0c7922a68 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f105fb07a368895dd729faac7e2b453aeef58e187fa51e042eea30cc90c3731f -size 37794 +oid sha256:5518395bde39cada8dcac3de2d2aae0ced332790966d857029bc1107228a3f5d +size 38232 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_2_mobile.png index 3ef015d3d7..366ef90cf9 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_card_example-card-set-with-images_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b01dfdc97e91f2172d5d92f48547ebfa1c8b87fa98970b4462c527b3ffb19a3 -size 45602 +oid sha256:fa76f3d8854da2e97900bccf3b82fdc0e5ab743bacc22bc3e82e0e586b11d08b +size 48648 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_0_desktop.png index 9297f5fc4e..01e31c8651 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9a5575aa5cf6ba77fca663d22cc65ae3df90c5e4522297be69e3763292f4e8f2 -size 149068 +oid sha256:cc6a841a66205f3f0ac928db73a43fa84699a5fc8363126fcac44a37203430b3 +size 149085 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_1_tablet.png index ca2ef0d445..d14476e99b 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9cd906402291fc167f1fcf257ebebb6c3e41b990f239a27388ff8e4e2b4dc543 -size 147336 +oid sha256:cf75fea0004a65601f2949aea05f80b094ba8cf77dc00215dd355f7f05815f5b +size 147399 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_2_mobile.png index 3de66ee1d8..8676c51a95 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-articles_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:799040d1a9044e371974309e08db907ec71756386776851ea800bdf995b98707 -size 155501 +oid sha256:12b6f55ed3af2d2bf74e408df168a191623e0c240952651d16fc35630bc9fec9 +size 155530 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_0_desktop.png index eb39dc9024..7bc2e57361 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ccdb190020700b011f6453854ae1f70ccdbe645a0f82d85b41192b390f07ffda -size 62657 +oid sha256:6b1a70a46026a3be67c0251fe0838361f846da23d73700dcf678f53cefc81ca2 +size 62783 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_1_tablet.png index 1d32c0d088..10aac0eaa0 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d2ba7273f28fc66918f09e7dd13bc85a7818b1a72fd4ae8c9830909d920c68b -size 55780 +oid sha256:253320e30cd28c26b3c64b37e296e1128903683db72ec7436511301b4f3ce833 +size 55912 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_2_mobile.png index 4431d491e4..4e4dc1bc02 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-downloads_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6701f5630448c7668949f0461d0e9c778aef171f8b55b576d2ae94a62345a876 -size 61131 +oid sha256:f3b1fa342eb612291d4b4fe596b305e1281f6a4c6509516e8838b145edb5b445 +size 61226 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png index 49e320e3a8..9f8c995921 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:170b7e4ca95bd366e665ac236e468c1ffbb1ac9a7f34508c7892ba3303e38a18 -size 30799 +oid sha256:48054a275a1d66d48be09968227c600aa0e2044f445d9fe559c0b690b1f6df82 +size 27648 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png index 27e7f86fa7..eeca17c1be 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a457332415c14b03dd19080da74bac857ac16aef552ab0a905365ee95ce5a2c9 -size 27941 +oid sha256:cbf6e19c3c96df00895d12dd00fffde7c84444a54e35e3e1b2cdb26ac73ff72e +size 24914 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png index 3ea0f8b85f..cf83694ea7 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:504d81dc4993cb1aefcc15731bb04bd9f039159bfcc12da3823f52156d8211a8 -size 26450 +oid sha256:6cbe8d8c2155f188874d074edce170636263f77c799a9834cc5501f0b1cc9cf4 +size 23709 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png new file mode 100644 index 0000000000..fda71b08fb --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:67c6aa1273a487d57b287f9cb9900e3b4102485a9bb68ac2dfa1fd76de49bcba +size 50992 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png new file mode 100644 index 0000000000..ff7582ac38 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b9a62a00863003cc1468c02a9a1e0bcaf8c674d5c28a81426c11d2214e293c00 +size 50291 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png new file mode 100644 index 0000000000..43a47af316 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e23ca5051f65ae2cb832487f75bc35c6693f0be506d9612f6907d82559cd2b1f +size 54695 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png new file mode 100644 index 0000000000..1eef7cbc3d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bc8716811f5b369141a59e2f03e1c9dad42b1e0be76d02fecec2e37e9ce1c426 +size 50969 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png new file mode 100644 index 0000000000..7fc048e029 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f675066ec41588d5366a7ef93874bf714de1679a5b6e4e2c7f955a6f7280adf6 +size 50293 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png new file mode 100644 index 0000000000..a7ae336b7d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0b4cf86f911bb2b967fb34ff9f72fbdae110b427763a0c69039df97c549b7b0a +size 54697 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bare-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bare-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bare-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bare-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bare-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bare-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bare-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bare-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bare-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bare-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bare-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bare-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bulleted-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bulleted-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bulleted-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bulleted-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bulleted-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bulleted-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bulleted-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bulleted-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bulleted-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bulleted-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-bulleted-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-bulleted-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-dashed-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-dashed-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-dashed-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-dashed-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-dashed-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-dashed-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-dashed-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-dashed-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-dashed-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-dashed-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-dashed-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-dashed-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-inline-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-prefix_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-prefix_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-prefix_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-prefix_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-prefix_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-prefix_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-suffix_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-suffix_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-suffix_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-suffix_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-suffix_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-list-with-icon-suffix_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-nested-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-nested-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-nested-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-nested-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-nested-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-nested-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-nested-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-nested-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-nested-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-nested-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-nested-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-nested-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-numbered-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-numbered-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-numbered-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-numbered-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-numbered-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-numbered-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-numbered-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-numbered-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-numbered-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-numbered-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-numbered-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-numbered-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-prefixed-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-prefixed-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-prefixed-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-prefixed-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-prefixed-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-prefixed-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-prefixed-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-prefixed-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-prefixed-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-prefixed-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-prefixed-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-prefixed-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-suffixed-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-suffixed-list_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-suffixed-list_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-suffixed-list_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-suffixed-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-suffixed-list_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-suffixed-list_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-suffixed-list_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-suffixed-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-suffixed-list_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-suffixed-list_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_list_example-suffixed-list_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png new file mode 100644 index 0000000000..6a1cbc60e7 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a80837903241b6c9c9046cb9734b16944c992969e90625a964320f0f473d7ee3 +size 16714 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png new file mode 100644 index 0000000000..cef50594ff --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ee9c3aedb9fc7ecbd54df53141be63e18085387efa1396b2b2cb7ba8f5ac6bf4 +size 11625 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png new file mode 100644 index 0000000000..875088032e --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_list_example-summary-list_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:13ec35b4dd6ee7546d0671f19b1e48b6e8089218f2f8c0e6cca3acdf292e8f95 +size 8534 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_quote_example-quote_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_quote_example-quote_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_quote_example-quote_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_quote_example-quote_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_quote_example-quote_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_quote_example-quote_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_quote_example-quote_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_quote_example-quote_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_quote_example-quote_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_quote_example-quote_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_quote_example-quote_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_quote_example-quote_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_text-indent_example-text-indent_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_text-indent_example-text-indent_0_document_0_desktop.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_text-indent_example-text-indent_0_document_0_desktop.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_text-indent_example-text-indent_0_document_0_desktop.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_text-indent_example-text-indent_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_text-indent_example-text-indent_0_document_1_tablet.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_text-indent_example-text-indent_0_document_1_tablet.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_text-indent_example-text-indent_0_document_1_tablet.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_text-indent_example-text-indent_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_text-indent_example-text-indent_0_document_2_mobile.png similarity index 100% rename from backstop_data/bitmaps_reference/ds-vr-test__foundations_text-indent_example-text-indent_0_document_2_mobile.png rename to backstop_data/bitmaps_reference/ds-vr-test__components_text-indent_example-text-indent_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_0_desktop.png deleted file mode 100644 index e1f1b1df74..0000000000 --- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_0_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bb13667ddddf83ddda3c6386854e6d69e2f7c7fea3a8a32120af5ed95ed450df -size 16478 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_1_tablet.png deleted file mode 100644 index cac1c01469..0000000000 --- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_1_tablet.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ead2dab152a3bbdd2af28b6465d62ac4553dc4721e3c2e48c260d7b874f671c6 -size 11399 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_2_mobile.png deleted file mode 100644 index df759651e7..0000000000 --- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-summary-list_0_document_2_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dad0ab15906634fa5fd940c8c1cc8b85d184f84db30d6c27039870900815bf4e -size 8326 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_0_desktop.png index 8d88b63199..7cf2ff1b6f 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:617904f65278504a4fc160fc25b2a6718b427ec9dbbc06b9fc0586e8839e6cea -size 231262 +oid sha256:cc92047fabc7218cd1f666356d6970a3e91cca8439098268252f007e63de53a7 +size 231714 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_1_tablet.png index 668bd56e23..ac9d23e113 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:db6195ada2750c494ad5119e0489c9a13ad8b63260fc735e4644fc87820fbd4a -size 224975 +oid sha256:8db48bea02b941073fe47dfb35b69e522b19074f138b9685848c71b39e298229 +size 225428 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_2_mobile.png index 90f4753e5f..c8c9707d22 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_download-resources_example-download-resources_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5bdd59617d80e59d9ab471e6622d56e97197dc325d1d1e069395051251445fae -size 192896 +oid sha256:b28a89ec74ebd3a13e4c7dcded24e7cb17b4a8010c06f79bbdc0e7f7ae088441 +size 193181 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png index 62888db553..dfd0b0652f 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f89f0af13ff0268148c2508e1775d8d0075e2557e2d5ab70a125ed9efc811d22 -size 293797 +oid sha256:f52dea6b02fe7ce7e26f4a508ca8758060c8231d37d079bd199c011a21a0ade2 +size 293926 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png index 03f35ea115..42ea892c3c 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6bfbc1b39b03f2c0b50ac347c61cb8726cc3c1f07bcb1234ffc8dc72aeb030e3 -size 308691 +oid sha256:b9817ed65c0ce49a482655d95cc13164468cd88ca22abc07ce2b1945d2260f3c +size 308914 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png index 03f0cd3af3..77577f8500 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dd74e61d094bcea43e3d3518c5a10578af78ac4242bbf83903766ac1dec92261 -size 268088 +oid sha256:5d56d2bc2e8c0266b56c20d70e650a5f0129a2097ef14229cb43d1d30207c5f7 +size 268170 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png index 705f55edf3..fe7e8be9d2 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9c7f8f94709f8bdafb0fc1cfe516f13c242a8b38e89262c628d940b49adf4c21 -size 497313 +oid sha256:33728873217e25b636bdac19e164d4c2ae2dc9d6c4fd3a103c4a72e59f610166 +size 497366 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png index c44a9e2486..2920f76242 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6e14f758bbd6b94d6dbfe6354fac53ada9f4ea6f3ddde2be6f8471958aea5b2a -size 510533 +oid sha256:78d4187593de059caa2921f9f8749b9298f83ea25e7de1388fcd7356a861a61c +size 510686 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png index 9db85805e4..4dcb225a41 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b9487dc04bb037f79b471a3ec04d458b69c91fde7873bb769ddb20c1626af9db -size 375490 +oid sha256:aac1a025aa8c34aab0909d247429e5fbb0c06342a3b72f4e0edb95830df720b3 +size 375542 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png index 9a9b096067..ff29fdca9b 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:46837196b92427707c348144abf1b7fb057ed74d6df6e59e25484b4185a97f9c -size 181218 +oid sha256:d0bc10cc74b93907d0a716f271280a99ba74369c6a148cf92d48964a2095f62b +size 181286 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png index e467c01267..08dd537182 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b9b2f86f277c240f6799fb5a7736aa4fcbebf2f9e162363f68ae6ec25595dab8 -size 182344 +oid sha256:28b9ab7a915616b5aa8becfe2f6858274e769a486a7634fa4f6eb1289482181b +size 182399 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png index 571038787d..d3614d6064 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e204a271d785c46945b0f0045a87a0d7cd0e5b96111d420299bc3df56bfbdaae -size 162436 +oid sha256:d7f496701ecc9e97f390c1d2af41b851d03f7752a5986aac2addc2f6659acac6 +size 162487 diff --git a/gulpfile.js b/gulpfile.js index b5f17d6c0f..27b87f2b24 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -15,7 +15,7 @@ require('@babel/register'); const babelEsmConfig = require('./babel.conf.esm'); const babelNomoduleConfig = require('./babel.conf.nomodule'); const postCssPlugins = require('./postcss.config').default; -const generateURLs = require('./src/tests/helpers/url-generator.js').default; +const generateUrls = require('./src/tests/helpers/url-generator.js').default; const generateStaticPages = require('./lib/generate-static-pages').default; const isProduction = process.env.NODE_ENV === 'production'; @@ -92,13 +92,13 @@ gulp.task('generate-pages', async function () { }); gulp.task('generate-urls', async () => { - const urls = await generateURLs(); + const urls = await generateUrls(); return urls; }); function createBackstopTask(task) { return (backstopTestTask = async () => { - const urls = await generateURLs(); + const urls = await generateUrls(); const backstopConfig = require('./backstop.config.js'); backstopConfig.scenarios = urls; await backstop(task, { diff --git a/lighthouse/lighthouse-get-urls.js b/lighthouse/lighthouse-get-urls.js index bd6dfc0710..06c13f2309 100644 --- a/lighthouse/lighthouse-get-urls.js +++ b/lighthouse/lighthouse-get-urls.js @@ -3,9 +3,9 @@ const util = require('util'); const { glob } = require('glob'); const readdir = util.promisify(fs.readdir); -async function createURLsFile() { +async function createUrlsFile() { try { - const urls = await getURLs(); + const urls = await getUrls(); fs.writeFileSync('./lighthouse/urls.json', urls); } catch (e) { console.error(e); @@ -13,7 +13,7 @@ async function createURLsFile() { } } -async function getURLs() { +async function getUrls() { let data = {}; data.urls = []; const directories = [ @@ -39,4 +39,4 @@ async function getURLs() { return JSON.stringify(data); } -createURLsFile(); +createUrlsFile(); diff --git a/lighthouse/lighthouse.sh b/lighthouse/lighthouse.sh index ec00540100..cb17c08fc3 100755 --- a/lighthouse/lighthouse.sh +++ b/lighthouse/lighthouse.sh @@ -5,7 +5,7 @@ npm install -g @lhci/cli@0.12.x lhci healthcheck --fatal for url in $(jq '.urls[]' ./lighthouse/urls.json); do sem lhci collect "--url=$url" --additive --config=./lighthouse/lighthouserc.js & -done +done sem --wait lhci assert --config=./lighthouse/lighthouserc.js lhci upload --config=./lighthouse/lighthouserc.js diff --git a/migration_guides/70.x.x-to-71.0.0-migration-guide.md b/migration_guides/70.x.x-to-71.0.0-migration-guide.md new file mode 100644 index 0000000000..52dad754fb --- /dev/null +++ b/migration_guides/70.x.x-to-71.0.0-migration-guide.md @@ -0,0 +1,1042 @@ +# Migration Guide from version 70.x.x to 71.0.0 + +# Introduction + +This document outlines the steps needed to migrate to version 71.0.0 of our Design System library from versions 70.x.x. This release includes several breaking-changes that may impact your projects. Please follow this guide to ensure a smooth transition. + +## Global changes + +This section will list the changes that will impact more than one component + +### **_Standardisation of setting heading level across components_** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3111) + +- **Description of change:** `titleTag` which usually expects a string like `h3` is being replace by a `headingLevel` which now expects an integer. +- **Reason for change:** In this update, we are addressing an inconsistency in the components/patterns within our system. Some components use `titleTag` while others use `headingLevel` to set the HTML tag for titles/headings. This update aims to standardise the usage by migrating all components using `titleTag` to using `headingLevel`. + + It's important to note that while a default value is set for the heading level, this could be a breaking change as it may alter the heading level in existing use cases and that the new `headingLevel` param will need an integer from now on and not the whole tag. + +- **Components impacted:** + + - accordion + - details + - document-list + - panel + - share-page + - tabs + - timeline + +- **Migration steps:** + + 1. Locate all instances of `titleTag` in your codebase. + 2. Replace `titleTag` with `headingLevel` and replace the heading tag you had with the relevant integer like below + + -
+ Click for example: + + ```njk + OLD + {{ + onsTimeline({ + "titleTag": "h3" + }) + }} + + NEW + {{ + onsTimeline({ + "headingLevel" : 3 + }) + }} + ``` + +
+ +### **_Update parameter names to camel case naming standard_** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3188) + +- **Description of change:** Many parameter names have been updated. +- **Reason for change:** Updated various parameters to use the camel case naming standard. + + This will be a breaking change and will require the renaming of some parameters for the following components and parameters: + +- **Components impacted:** + + - Card - `image.placeholderURL` will need to be renamed `image.placeholderUrl` + - Cookies Banner - `settingsLinkTextURL` will need to be renamed `settingsLinkTextUrl` + - Header - `logo.logoURL` will need to be renamed `logo.logoUrl` + - Header - `ISOCode` will need to be renamed `isoCode` + - Header - `navigation.subNavigation.overviewURL` will need to be renamed `navigation.subNavigation.overviewUrl` + - Share Page -`pageURL` will need to be renamed `pageUrl` + - Video - `videoLinkURL` will need to be renamed `videoLinkUrl` + - Page Template - `assetsURL` will need to be renamed `assetsUrl` + - Footer - `OGLLink` will need to be renamed `oglLink` + - Message - `messageID` will need to be renamed `messageId` + - Access Code - `maxlength` will need to be renamed `maxLength` + - Address input - `APIDomain` will need to be renamed `apiDomain` + - Address input - `APIDomainBearerToken` will need to be renamed `apiDomainBearerToken` + - Address input - `APIManualQueryParams` will need to be renamed `apiManualQueryParams` + - Address input - `errorMessageAPI` will need to be renamed `errorMessageApi` + - Address input - `errorMessageAPILinkText` will need to be renamed `errorMessageApiLinkText` + +- **Migration steps:** + + 1. Locate all instances of the above parameters in your codebase. + 2. Replace `oldParameter` with `newParameter`. + + -
+ Click for example: + + ```njk + OLD + {{ + onsHeader({ + "title": 'Page title', + "mastheadLogoUrl": { + "multipleLogos": { + "logo1": { + "logoURL" : "https..." + } + } + }, + "titleUrl": '#0', + "language": { + "languages": [ + { + "url": '#0', + "ISOCode": 'en', + "text": 'English', + "current": true + }, + { + "url": '#0', + "ISOCode": 'cy', + "text": 'Cymraeg', + "current": false + } + ] + }, + "navigation": { + "subNavigation": { + "overviewURL": "https..." + } + } + }) + }} + NEW + {{ + onsHeader({ + "title": 'Page title', + "mastheadLogoUrl": { + "multipleLogos": { + "logo1": { + "logoUrl" : "https..." + } + } + }, + "titleUrl": '#0', + "language": { + "languages": [ + { + "url": '#0', + "isoCode": 'en', + "text": 'English', + "current": true + }, + { + "url": '#0', + "isoCode": 'cy', + "text": 'Cymraeg', + "current": false + } + ] + }, + "navigation": { + "subNavigation": { + "overviewUrl": "https..." + } + } + }) + }} + ``` + +
+ +### **_Renamed utility class from ons-grid--flex to ons-grid-flex_** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3268) + +- **Description of change:** The following classes have been renamed: + + - `ons-grid--flex` to `ons-grid-flex` + - `ons-grid--center` to `ons-grid-flex--center` + - `ons-grid--between` to `ons-grid-flex--between` + - `ons-grid--vertical-top` to `ons-grid-flex--vertical-top` + - `ons-grid--vertical-center` to `ons-grid-flex--vertical-center` + +- **Reason for change:** The `ons-grid--flex` utility class has been updated to follow the correct BEM model. + + This will be a breaking change and will require the update of the old classes name with the new one: + +- **Components impacted:** + + Any component that used the old class name. + +- **Migration steps:** + + 1. Locate all instances of the above classes in your codebase. + 2. Replace the old class name with the new one. + + -
+ Click for example: + + ```html + OLD +
+ NEW +
+
+ ``` + +
+ +## Components + +This section will list all the changes that are specific to one component. + +### List of components + +- [Metadata](#metadata) +- [Call to action](#call-to-action) +- [Message](#message) +- [Footer](#footer) +- [Image](#image) +- [Header](#header) +- [Feedback](#feedback) +- [Summary](#summary) +- [Timeline](#timeline) +- [Document List](#document-list) +- [Cookies Banner](#cookies-banner) +- [Card](#card) +- [External links](#external-links) +- [Section navigation](#section-navigation) +- [Video](#video) +- [Address input](#address-input) + +### **_Metadata_** + +**Removed metadata component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3275) + +- **Description of change:** The `onsMetadata` component has been removed. +- **Reason for change:** The component was removed as it has been replaced by the `descriptionList` component. +- **Migration steps:** + + 1. Locate all instances of `onsMetadata` in your codebase. + 2. You could update any instance of `onsMetadata` with `onsDescriptionList`. + + -
+ Click for example: + + ```njk + OLD + {% from "components/onsMetadata/_macro.njk" import onsMetadata %} + + {{- + onsMetadata({ ... }) + }} + + NEW + {% from "components/description-list/_macro.njk" import onsDescriptionList %} + + {{ + onsDescriptionList({ ... }) + }} + ``` + +
+ +### **_Call to action_** + +**Remove call to action component and all references** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3143) + +- **Description of change:** The `onsCallToAction` component has been removed. +- **Reason for change:** The component was removed as it was only developed for use on the Census website. +- **Migration steps:** + + 1. Locate all instances of `onsCallToAction` in your codebase. + 2. You could update any instance of `onsCallToAction` with `onsButton`. The `onsButton` component is not a replacement for the `onsCallToAction` component so transition will not be like for like. + + -
+ Click for example: + + ```njk + OLD + {% from "components/call-to-action/_macro.njk" import onsCallToAction %} + + {{- + onsCallToAction({ + "headingText": 'Call to action heading.', + "paragraphText": 'Descriptive text about call to action', + "button": { + "text": 'Start', + "url": '#0' + } + }) + }} + SUGGESTED REPLACEMENT + {% from "components/button/_macro.njk" import onsButton %} + + {{ + onsButton({ + "text": 'Get started', + "url": '#0' + }) + }} + ``` + +
+ +### **_Message_** + +**Update parameter from UnreadLink to UnreadLinkUrl in Message component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3290) + +- **Description of change:** The `unreadLink` parameter has been renamed to `unreadLinkUrl` in the Message component. +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `unreadLink` in your codebase. + 2. Replace `unreadLink` with `unreadLinkUrl`. + + -
+ Click for example: + + ```njk + OLD + {{ + onsMessage({ + "unreadLink": "www.google.com" + }) + }} + + NEW + {{ + onsMessage({ + "unreadLinkUrl": "www.gooogle.com" + }) + }} + ``` + +
+ +**Update parameter subject from text to object type in Message list component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3291) + +- **Description of change:** In Message List component, `subject` parameter is changed to an object which contains `text` and `url` parameter. `url` parameter is moved inside subject +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `subject` parameter, and include `text` and `url` within the `subject`. + + -
+ Click for example + + ```njk + OLD + {{ + onsMessageList({ + "messages": [{ + "url": "#0", + "subject": "survey response query", + }] + }) + }} + NEW + {{ + onsMessageList({ + "messages": [{ + "subject":{ + "url": "#0", + "text":"survey response query", + } + }] + }) + }} + ``` + +
+ +### **_Footer_** + +**Add option for additional logo in footer** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3227) + +- **Description of change:** The `poweredBy` parameter has been removed in favour of `footerLogo`. +- **Reason for change:** This updates the footer component to support an additional logo, allowing for two logos instead of just one. It introduces the `link` param for each logo and offers an alternative layout option to display the logos on opposite sides of the footer. The default layout positions the logos next to each other. Additionally, the implementation is aligned with the header component's multipleLogo feature to ensure consistency across the application. The focus and hover states are also adjusted to avoid extra underlines and to ensure the highlight colour wraps only the SVG. +- **Migration steps:** + + 1. Locate all instances of `poweredBy` in your codebase. + 2. Replace `poweredBy` with `footerLogo`. + + -
+ Click for example: + + ```njk + OLD + {{ + onsFooter({ + "poweredBy": "" + }) + }} + NEW + {{ + onsFooter({ + "footerLogo": { + "logos": { + "logo1": { + "logoImage": '', + "logoUrl": "#0" + }, + } + } + }) + }} + ``` + +
+ +**Update parameter from link to text in Footer Component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3294) + +- **Description of change:** The `link` parameter has been renamed to`text` in the Footer component. +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `link` in the Footer component within your codebase. + 2. Replace `link` with `text`. + + -
+ Click for example: + + ```njk + OLD + {{- + onsFooter({ + "OGLLink": { + "link": "www.google.com" + } + }) + }} + + NEW + {{ + onsFooter({ + "OGLLink": { + "text": "www.google.com" + } + }) + }} + ``` + +
+ +### **_Image_** + +**Update parameter name from url to src in Image Component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3293) + +- **Description of change:** The `url` parameter has been renamed to `src` in the Image component. +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `url` in the Image component within your codebase. + 2. Replace `url` with `src`. + + -
+ Click for example: + + ```njk + OLD + {{ + onsImage({ + "url": "www.google.com" + }) + }} + + NEW + {{ + onsImage({ + "src": "www.gooogle.com" + }) + }} + ``` + +
+ +### **_Header_** + +**Update parameter names from LogoImage and LogoURL to image and url in header component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3292) + +- **Description of change:** In header component, renamed the `LogoImage` parameter to `image` and `LogoURL` to `url`. +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `LogoImage` and `LogoURL`. + 2. Replace `LogoImage` to `image` and `LogoURL` to `url`. + + -
+ Click for example + + ```njk + OLD + {{ + onsHeader({ + "mastheadLogo": { + "multipleLogos":{ + "logo1": { + "LogoImage": "ONS Logo", + "LogoURL": "https://www.ons.gov.uk/" + } + } + } + }) + }} + + NEW + {{ + onsHeader({ + "mastheadLogo": { + "multipleLogos":{ + "logo1": { + "image": "ONS Logo", + "url": "https://www.ons.gov.uk/" + } + } + } + }) + }} + ``` + +
+ +### **_Feedback_** + +**Update parameter name from url to linkUrl in feedback component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3295) + +- **Description of change:** `url` parameter is named to `linkUrl` +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `url` parameter + 2. Replace `url` to `linkUrl`. + + -
+ Click for example + + ```njk + OLD + {{ + onsFeedback({ + "url": "#0", + }) + }} + + NEW + {{ + onsFeedback({ + "linkUrl": "#0", + }) + }} + ``` + +
+ +### **_Summary_** + +**Rename summary component parameters** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3224) + +- **Description of change:** + - `summary.summaryTitle` is renamed to `summary.title` + - `group.groupTitle` is renamed to `group.title` + - `row.rowTitle` is renamed to `row.title` + - `row.rowItems` is renamed to `row.items` + - `rowItem.rowTitle` is renamed to `item.title` + - `rowItem.rowTitleAttributes` is renamed to `item.titleAttributes` +- **Reason for change:** In this update, we are addressing an inconsistency in the naming of parameters within the summary component. This change aims to standardise the parameter names for clarity and consistency. +- **Migration steps:** + + 1. Locate all instances of the above parameters in your codebase. + 2. Replace old parameters with new parameters as per below example. + + -
+ Click for example: + + ```njk + OLD + {{ + onsSummary({ + "summaries": [ + { + "groups": [ + { + "placeholderText": 'test', + "id": "turnover", + "groupTitle": "Turnover", + "rows": [ + { + "id": "sales-dates-row", + "rowTitle": "What are the dates of the sales period you are reporting for?", + "rowItems": [ + { + "id": "sales-dates", + "valueList": [ + { + "text": "1 January 2015 to 2 February 2017" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ] + } + ] + } + ] + }) + }} + NEW + {{ + onsSummary({ + "summaries": [ + { + "groups": [ + { + "placeholderText": 'test', + "id": "turnover", + "title": "Turnover", + "rows": [ + { + "id": "sales-dates-row", + "title": "What are the dates of the sales period you are reporting for?", + "items": [ + { + "id": "sales-dates", + "valueList": [ + { + "text": "1 January 2015 to 2 February 2017" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ] + } + ] + } + ] + }) + }} + ``` + +
+ +### **_Timeline_** + +**Refactor timeline macro for compatibility with Jinja2 templates** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3180) + +- **Description of change:** We have made a breaking change to the timeline macro by renaming the `items` parameter to `timelineItems`. +- **Reason for change:** The reason the parameter is being renamed is to fix a bug which takes place in Jinja environments where "items" is a reserved word. +- **Migration steps:** + + 1. Locate all instances of `items` in your codebase within the timeline component. + 2. Replace `items` with `timelineItems`. + + -
+ Click for example: + + ```njk + OLD + {{ + onsTimeline({ + "items": [. . . ], + "titleTag": "h3" + }) + }} + NEW + {{ + onsTimeline({ + "timelineItems": [. . . ], + "headingLevel" : 3 + }) + }} + ``` + +
+ +### **_Document List_** + +**Update parameter names in document list component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3299) + +- **Description of change:**: + + 1. `type` has been renamed to `object `within the metadata object. + 2. The title and url parameters have been combined into an object named title, which now contains text and url. + +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `type` parameter and replace with `object`. + 2. Locate all instances where `url` and `title` were separate parameters. + 3. Restructure title to include both text and url + + -
+ Click for example + + ```njk + OLD + {{ + onsDocumentList({ + "url": '#0', + "title": 'ONS launches Integrated Data Service to boost government collaboration on data sharing', + "metadata": { + "type": { + "text": 'Press releases', + "ref": 'Ref 008052' + }, + }) + }} + + NEW + {{ + onsDocumentList({ + "title": { + "text": 'ONS launches Integrated Data Service to boost government collaboration on data sharing', + "url": '#0' + }, + "metadata": { + "object": { + "text": 'Press releases', + "ref": 'Ref 008052' + }, + }) + }} + ``` + +
+ +### **_Cookies Banner_** + +**Update param name settingsLinkTextURL to settingsLinkURL in Cookies Banner component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3300) + +- **Description of change:** `settingsLinkTextURL` parameter is named to `settingsLinkURL` +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `settingsLinkTextURL` parameter + 2. Replace `settingsLinkTextURL` to `settingsLinkURL`. + + -
+ Click for example + + ```njk + OLD + {{ + onsCookiesBanner({ + "settingsLinkTextURL": "/cookiesoverride", + }) + }} + + NEW + {{ + onsCookiesBanner({ + "settingsLinkURL": "/cookiesoverride", + }) + }} + ``` + +
+ +### **_Card_** + +**Update parameter names in card component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3303) + +- **Description of change:** + + 1. `headingLevel`, `id`, `titleClasses`, `title`, and `url` are now combined into a `title` object with `headingLevel`, `id`, `classes`, `text`, and `url` properties. + 2. `text`, `textId`, and `itemsList` have been consolidated into a `body` object with `text`, `id`, and `itemsList` properties. + +- **Reason for change:** This update ensures consistency in parameter naming across the project. + +- **Migration steps:** + + 1. Locate all instances of the `headingLevel`, `id`, `titleClasses`, `title`, and `url` parameters. + 2. Restructure these parameters into the `title` object, including `headingLevel`, `id`, `classes`, `text`, and `url`. + 3. Locate all instances of the `text`, `textId`, and `itemsList` parameters. + 4. Restructure these into the `body` object, containing `text`, `id`, and `itemsList`. + + -
+ Click for example + + ```njk + OLD + {{ + onsCard({ + "id": 'card-example', + "textId": 'text', + "title": 'Your data and security', + "url": '#0', + "text": 'How we keep your data safe and what happens to your personal information.', + "headingLevel": 2, + "classes": "random-class", + "itemsList": [ + { + "url": '#0', + "text": 'List item 1 about the census' + }, + { + "url": '#0', + "text": 'List item 2 about the census' + } + ] + }) + }} + + NEW + {{ + onsCard({ + "title": { + "id": 'card-example', + "text": 'Your data and security', + "url": '#0' + "headingLevel": 2, + "titleClasses": "random-class" + }, + "body":{ + "id": 'text', + "text": 'How we keep your data safe and what happens to your personal information.', + "itemsList": [ + { + "url": '#0', + "text": 'List item 1 about the census' + }, + { + "url": '#0', + "text": 'List item 2 about the census' + } + ] + } + }) + }} + ``` + +
+ +### **_External links_** + +**Update parameter from linkText to text in external link component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3304) + +- **Description of change:** `linkText` parameter is named to `text` +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `linkText` parameter in external link component + 2. Replace `linkText` to `text`. + + -
+ Click for example + + ```njk + OLD + {{ + onsExternalLink({ + "url": "#0", + "linkText": "link to an external website" + }) + }} + + NEW + {{ + onsExternalLink({ + "url": "#0", + "text": "link to an external website" + }) + }} + ``` + +
+ +### **_Section navigation_** + +**Update param name from title to text in section navigation component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3305) + +- **Description of change:** The `title` parameter for the objects itemsList and anchor is renamed to `text` +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of the `title` parameter in the objects itemList and anchor + 2. Replace `title` with `text`. + + -
+ Click for example + + ```njk + OLD + {{ + onsSectionNavigation({ + "sections":[{ + "itemsList": [{ + "title": "Section 1" + "anchors": [{ + "title": "Sub section 1" + }] + }] + }] + }) + }} + NEW + {{ + onsSectionNavigation({ + "sections":[{ + "itemsList": [{ + "text": "Section 1" + "anchors": [{ + "text": "Sub section 1" + }] + }] + }] + }) + }} + ``` + +
+ +### **_Video_** + +**Update parameter from linkText to videoLinkText in Video Component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3306) + +- **Description of change:** `linkText` parameter is named to `videoLinkText` +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of `linkText` parameter in video component + 2. Replace `linkText` to `videoLinkText`. + + -
+ Click for example + + ```njk + OLD + {{ + onsVideo({ + "linkText": "Example link text" + }) + }} + + NEW + {{ + onsVideo({ + "videoLinkText": "Example link text" + }) + }} + ``` + +
+ +### **_Address input_** + +**Update parameter from manualLink to manualLinkUrl in Address Input component** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3307) + +- **Description of change:** `manualLink` parameter is renamed `manualLinkUrl` +- **Reason for change:** This update helps to standardise the parameter names within the project. +- **Migration steps:** + + 1. Locate all instances of the `manualLink` parameter in the Address Input component + 2. Replace `manualLink` with `manualLinkUrl`. + + -
+ Click for example + + ```njk + OLD + {{ + onsAddressInput({ + "manualLink": "Example-manual-link" + }) + }} + + NEW + {{ + onsAddressInput({ + "manualLinkUrl": "Example-manual-link" + }) + }} + ``` + +
+ +**Ensure list item custom attributes are always set on list item** + +[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3336) + +- **Description of change:** Custom list item attributes are now always set on the `
  • ` element not the `` when using the `url` param. +- **Reason for change:** To make the application of custom attributes more consistent and allow they to be used without the need for a link. +- **Migration steps:** + + Some selectors (e.g. in automated tests or triggers in GA) may need to be updated as the attributes will now be on the parent element for the link element it was on before. + +## Contact Information + +For further assistance, please reach out to our support team: + +- **Email:** ons.design.system@ons.gov.uk diff --git a/package.json b/package.json index 024b795f99..ca466fed19 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "start": "gulp start", "watch": "gulp watch", "test": "gulp build-assets && TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'", + "test:clear-cache": "jest --clearCache", "test:no-build": "TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'", "test:with-log": "yarn test --no-color 2>test.log", "test:start-server": "TEST_PORT=3020 gulp start-dev-server", @@ -98,7 +99,7 @@ "jest": "^29.6.1", "jest-axe": "^8.0.0", "jest-environment-jsdom": "^29.6.1", - "jest-puppeteer": "^9.0.0", + "jest-puppeteer": "^10.0.0", "lighthouse": "^11.0.0", "lint-staged": "^15.2.0", "lodash": "^4.17.21", @@ -111,7 +112,7 @@ "prepend-file": "^2.0.1", "prettier": "^3.2.5", "prettier-plugin-jinja-template": "^1.4.0", - "puppeteer": "^21.0.2", + "puppeteer": "^22.0.0", "remark-cli": "^12.0.0", "remark-lint": "^9.1.2", "remark-preset-lint-recommended": "^6.1.3", diff --git a/src/components/access-code/_macro-options.md b/src/components/access-code/_macro-options.md index 8249284e55..2bc9d626ce 100644 --- a/src/components/access-code/_macro-options.md +++ b/src/components/access-code/_macro-options.md @@ -5,7 +5,7 @@ | label | `Label` [_(ref)_](/components/label) | true | Settings for the input label | | type | string | false | Sets the `type` attribute on the access code [input](/components/input). Defaults to `text` | | name | string | false | Sets the `name` attribute for the access code input | -| maxlength | integer | false | Maximum length for the access code not including spaces. Defaults to 16. | +| maxLength | integer | false | Maximum length for the access code not including spaces. Defaults to 16. | | groupSize | integer | false | Number of characters or digits before a space is automatically added. Defaults to 4. | | securityMessage | string | false | The security message to place below the input. If not set, the message and icon will not be displayed. | | postTextboxLinkText | string | false | The text for the link following the access code input | diff --git a/src/components/access-code/_macro.njk b/src/components/access-code/_macro.njk index 74edb2f943..188585f9ab 100644 --- a/src/components/access-code/_macro.njk +++ b/src/components/access-code/_macro.njk @@ -3,8 +3,8 @@ {% macro onsAccessCode(params) %} {% set groupSize = params.groupSize | default(4) %} - {% set extraSpaces = (params.maxlength | default(16) / groupSize) - 1 %} - {% set maxlength = params.maxlength | default(16) + extraSpaces %} + {% set extraSpaces = (params.maxLength | default(16) / groupSize) - 1 %} + {% set maxLength = params.maxLength | default(16) + extraSpaces %} {% set content %} {{ @@ -14,8 +14,8 @@ "name": params.name, "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-2xs" if params.postTextboxLinkText else ""), "label": params.label, + "maxLength": maxLength, "attributes": { - "maxlength": maxlength, "data-group-size": groupSize, "autocomplete": "off", "autocapitalize": "characters" diff --git a/src/components/access-code/_macro.spec.js b/src/components/access-code/_macro.spec.js index fca3234649..b8e631eaf2 100644 --- a/src/components/access-code/_macro.spec.js +++ b/src/components/access-code/_macro.spec.js @@ -5,150 +5,184 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -describe('macro: access-code', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('access-code', { - id: 'example-access-code', - label: { - text: 'Enter your 16-character access code', - description: 'Keep this code safe. You will need to enter it every time you access your study', - }, - }), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); +describe('FOR: access-code', () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: all required params are provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + id: 'example-access-code', + label: { + text: 'Enter your 16-character access code', + description: 'Keep this code safe. You will need to enter it every time you access your study', + }, + }), + ); + test('THEN: jest-axe tests pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + test('THEN: autocomplete is disabled on text input', () => { + expect($('input').attr('autocomplete')).toBe('off'); + }); + test('THEN: text input has automatic capitalisation', () => { + expect($('input').attr('autocapitalize')).toBe('characters'); + }); + }); }); - - it('has the provided `id` attribute', () => { - const $ = cheerio.load( - renderComponent('access-code', { - id: 'example-id', - }), - ); - - expect($('#example-id').length).toBe(1); + describe('GIVEN: Params: id', () => { + describe('WHEN: id is provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + id: 'example-id', + }), + ); + test('THEN: renders with id provided', () => { + expect($('#example-id').length).toBe(1); + }); + }); }); - - it('has the provided `name` attribute', () => { - const $ = cheerio.load( - renderComponent('access-code', { - name: 'special-name', - }), - ); - - expect($('input').attr('name')).toBe('special-name'); + describe('GIVEN: Params: classes', () => { + describe('WHEN: additional style classes are provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + classes: 'extra-class another-extra-class', + }), + ); + test('THEN: renders with additional classes provided', () => { + expect($('.ons-panel--info').hasClass('extra-class')).toBe(true); + expect($('.ons-panel--info').hasClass('another-extra-class')).toBe(true); + }); + }); }); - - it('has a default `type` of "text"', () => { - const $ = cheerio.load(renderComponent('access-code')); - - expect($('input').attr('type')).toBe('text'); + describe('GIVEN: Params: label', () => { + describe('WHEN: label text and description params are provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + label: { + text: 'Enter your 16-character access code', + description: 'Keep this code safe. You will need to enter it every time you access your study', + }, + }), + ); + test('THEN: renders with provided text and description', () => { + expect($('.ons-label--with-description').text()).toBe('Enter your 16-character access code'); + expect($('.ons-input--with-description').text()).toBe( + 'Keep this code safe. You will need to enter it every time you access your study', + ); + }); + }); }); - - it('has the provided `type` attribute', () => { - const $ = cheerio.load( - renderComponent('access-code', { - type: 'number', - }), - ); - - expect($('input').attr('inputmode')).toBe('numeric'); + describe('GIVEN: Params: type', () => { + describe('WHEN: param is at default state', () => { + const $ = cheerio.load(renderComponent('access-code')); + test('THEN: renders with default type of "text"', () => { + expect($('input').attr('type')).toBe('text'); + }); + }); + describe('WHEN: type param is provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + type: 'number', + }), + ); + test('THEN: renders with provided type', () => { + expect($('input').attr('inputmode')).toBe('numeric'); + }); + }); }); - - it('has additionally provided style classes', () => { - const $ = cheerio.load( - renderComponent('access-code', { - classes: 'extra-class another-extra-class', - }), - ); - - expect($('.ons-panel--info').hasClass('extra-class')).toBe(true); - expect($('.ons-panel--info').hasClass('another-extra-class')).toBe(true); + describe('GIVEN: Params: name', () => { + describe('WHEN: name param is provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + name: 'special-name', + }), + ); + test('THEN: renders with provided name', () => { + expect($('input').attr('name')).toBe('special-name'); + }); + }); }); - - it('has provided label text and description', () => { - const $ = cheerio.load( - renderComponent('access-code', { - label: { - text: 'Enter your 16-character access code', - description: 'Keep this code safe. You will need to enter it every time you access your study', - }, - }), - ); - - expect($('.ons-label--with-description').text()).toBe('Enter your 16-character access code'); - expect($('.ons-input--with-description').text()).toBe( - 'Keep this code safe. You will need to enter it every time you access your study', - ); + describe('GIVEN: Params: maxLength & groupSize', () => { + describe('WHEN: params are at default state', () => { + const $ = cheerio.load(renderComponent('access-code')); + test('THEN: renders input with total maxLength of 19', () => { + expect($('input').attr('maxlength')).toBe('19'); + }); + test('THEN: renders input with groupSize of 4', () => { + expect($('input').attr('data-group-size')).toBe('4'); + }); + }); + describe('WHEN: maxLength param is provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + maxLength: 8, + }), + ); + test('THEN: renders input with provided maxLength', () => { + expect($('input').attr('maxlength')).toBe('9'); + }); + }); + describe('WHEN: groupSize param is provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + groupSize: 2, + }), + ); + test('THEN: renders input with provided groupSize', () => { + expect($('input').attr('data-group-size')).toBe('2'); + }); + }); + describe('WHEN: maxLength and groupSize params are provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + maxLength: 6, + groupSize: 3, + }), + ); + test('THEN: renders input with provided maxLength accounting for provided groupSize', () => { + expect($('input').attr('maxlength')).toBe('7'); + }); + }); }); - - it('has provided maximum length attribute including spaces required for groupSize', () => { - const $ = cheerio.load( - renderComponent('access-code', { - maxlength: 6, - groupSize: 3, - }), - ); - - expect($('input').attr('maxlength')).toBe('7'); + describe('GIVEN: Params: securityMessage', () => { + describe('WHEN: securityMessage param is provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + securityMessage: 'Example security message.', + }), + ); + test('THEN: renders with provided security message', () => { + expect($('.ons-panel__body').text().trim()).toBe('Example security message.'); + }); + }); }); - - it('has provided group size attribute', () => { - const $ = cheerio.load( - renderComponent('access-code', { - groupSize: 2, - }), - ); - - expect($('input').attr('data-group-size')).toBe('2'); - }); - - it('has autocomplete disabled on its text input', () => { - const $ = cheerio.load(renderComponent('access-code')); - - expect($('input').attr('autocomplete')).toBe('off'); + describe('GIVEN: Params: postTextboxLinkText & postTextBoxLinkUrl', () => { + describe('WHEN: postTextboxLinkText & postTextBoxLinkUrl params are provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + postTextboxLinkText: 'Example link text', + postTextboxLinkUrl: '#3', + }), + ); + test('THEN: renders link with provided link and text', () => { + expect($('a[href="#3"]').text().trim()).toBe('Example link text'); + }); + }); }); - - it('has automatic capitalization on its text input', () => { - const $ = cheerio.load(renderComponent('access-code')); - - expect($('input').attr('autocapitalize')).toBe('characters'); - }); - - it('has provided security message text', () => { - const $ = cheerio.load( - renderComponent('access-code', { - securityMessage: 'Example security message.', - }), - ); - - expect($('.ons-panel__body').text().trim()).toBe('Example security message.'); - }); - - it('has provided `postTextBoxLinkText` and `postTextBoxLinkUrl`', () => { - const $ = cheerio.load( - renderComponent('access-code', { - postTextboxLinkText: 'Example link text', - postTextboxLinkUrl: '#3', - }), - ); - - expect($('a[href="#3"]').text().trim()).toBe('Example link text'); - }); - - it('has provided `error` output', () => { - const $ = cheerio.load( - renderComponent('access-code', { - error: { - id: 'access-code-error', - text: 'Enter an access code', - }, - }), - ); - - expect($('#access-code-error').length).toBe(1); - expect($('.ons-panel__error > strong').text()).toBe('Enter an access code'); + describe('GIVEN: Params: error', () => { + describe('WHEN: error id & text params are provided', () => { + const $ = cheerio.load( + renderComponent('access-code', { + error: { + id: 'access-code-error', + text: 'Enter an access code', + }, + }), + ); + test('THEN: renders error with provided id and text', () => { + expect($('#access-code-error').length).toBe(1); + expect($('.ons-panel__error > strong').text()).toBe('Enter an access code'); + }); + }); }); }); diff --git a/src/components/accordion/_macro-options.md b/src/components/accordion/_macro-options.md index 163ade0549..e20bb0606d 100644 --- a/src/components/accordion/_macro-options.md +++ b/src/components/accordion/_macro-options.md @@ -9,14 +9,14 @@ ## AccordionItem -| Name | Type | Required | Description | -| ----------------- | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------- | -| title | string | true | The title of the accordion item | -| titleTag | string | false | The HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an `h2` | -| content | string | true | The content of the accordion item | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element | -| headingAttributes | object | false | HTML attributes (for example, data attributes) to add to the details header element | -| contentAttributes | object | false | HTML attributes (for example, data attributes) to add to the details content element | +| Name | Type | Required | Description | +| ----------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| title | string | true | The title of the accordion item | +| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | +| content | string | true | The content of the accordion item | +| attributes | object | false | HTML attributes (for example, data attributes) to add to the details element | +| headingAttributes | object | false | HTML attributes (for example, data attributes) to add to the details header element | +| contentAttributes | object | false | HTML attributes (for example, data attributes) to add to the details content element | ## AccordionButton diff --git a/src/components/accordion/_macro.njk b/src/components/accordion/_macro.njk index e9134a67fd..8e3e740879 100644 --- a/src/components/accordion/_macro.njk +++ b/src/components/accordion/_macro.njk @@ -32,7 +32,7 @@ "headingAttributes": item.headingAttributes, "contentAttributes": item.contentAttributes, "title": item.title, - "titleTag": item.titleTag, + "headingLevel": item.headingLevel, "content": item.content, "group": params.id, "saveState": params.saveState, diff --git a/src/components/accordion/_macro.spec.js b/src/components/accordion/_macro.spec.js index b9629a4ca2..024722b6ea 100644 --- a/src/components/accordion/_macro.spec.js +++ b/src/components/accordion/_macro.spec.js @@ -67,7 +67,7 @@ describe('macro: accordion', () => { itemsList: [ { title: 'Title for item 1', - titleTag: 'h5', + headingLevel: 5, content: 'Content for item 1', }, ], diff --git a/src/components/address-input/_macro-options.md b/src/components/address-input/_macro-options.md index c4a56ee2b1..065d4dbe57 100644 --- a/src/components/address-input/_macro-options.md +++ b/src/components/address-input/_macro-options.md @@ -9,8 +9,9 @@ | isEditable | boolean | true | Used with the address macro to invoke population of manual fields upon selection of suggestion | | manualEntry | boolean | false | Only display manual fields and do not invoke autosuggest/api functionality | | mandatory | boolean | false | Set the autosuggest input to be mandatory and use client side validation for empty form submission | -| APIDomain | string | false | Set an api domain when using an external API to suggest results | -| APIDomainBearerToken | string | false | Set a bearer token for api authorization on the AIMS address api. | +| apiDomain | string | false | Set an api domain when using an external API to suggest results | +| apiDomainBearerToken | string | false | Set a bearer token for api authorization on the AIMS address api | +| apiManualQueryParams | string | false | Sets the `data-query-params` attribute on the autosuggest container element. This will be then used to add query params to the the api URL | | minChars | integer | false | Minimum number of characters to run a query. Default is 3 | | instructions | string | true | Instructions on how to use the autosuggest that will be read out by screen readers | | ariaYouHaveSelected | string | true | Aria message to tell the user that they have selected an answer | @@ -28,8 +29,8 @@ | errorTitle | string | false | Error message title displayed in the error panel | | errorMessageEnter | string | false | Error message description displayed in the error panel when the input is empty | | errorMessageSelect | string | false | Error message description displayed in the error panel when a suggestion has not been selected | -| errorMessageAPI | string | false | Error message displayed when the API has failed during a search | -| errorMessageAPILinkText | string | false | Link text used to toggle to a manual mode when using the address macro | +| errorMessageApi | string | false | Error message displayed when the API has failed during a search | +| errorMessageApiLinkText | string | false | Link text used to toggle to a manual mode when using the address macro | | manualLink | string | false | url for the link displayed below the input | | manualLinkText | string | false | Link text shown for the manual link. If using the editable address, including this parameter will toggle the mode to manual entry | | options | `Object` | false | Option to provide key value pairs that will be added as data attributes to the component that will be added as parameters to the address index api | diff --git a/src/components/address-input/_macro.njk b/src/components/address-input/_macro.njk index 4e12a8ac90..252e2f1d0f 100644 --- a/src/components/address-input/_macro.njk +++ b/src/components/address-input/_macro.njk @@ -132,9 +132,9 @@ "mutuallyExclusive": params.mutuallyExclusive }, "externalInitialiser": true, - "APIDomain": params.APIDomain, - "APIDomainBearerToken": params.APIDomainBearerToken, - "APIManualQueryParams": params.APIManualQueryParams, + "apiDomain": params.apiDomain, + "apiDomainBearerToken": params.apiDomainBearerToken, + "apiManualQueryParams": params.apiManualQueryParams, "allowMultiple": params.allowMultiple, "mandatory": params.mandatory, "instructions": params.instructions, @@ -157,15 +157,15 @@ "errorTitle": params.errorTitle, "errorMessageEnter": params.errorMessageEnter, "errorMessageSelect": params.errorMessageSelect, - "errorMessageAPI": params.errorMessageAPI, - "errorMessageAPILinkText": params.errorMessageAPILinkText, + "errorMessageApi": params.errorMessageApi, + "errorMessageApiLinkText": params.errorMessageApiLinkText, "options": params.options, - "manualLink": params.manualLink, + "manualLinkUrl": params.manualLinkUrl, "manualLinkText": params.manualLinkText }) }} {% if params.manualLinkText %} - {{ params.manualLinkText }} {% endif %} diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 6498f09fb5..7f39ae6934 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -312,9 +312,9 @@ describe('macro: address-input', () => { error: '[params.error]', name: '[params.name]', mutuallyExclusive: '[params.mutuallyExclusive]', - APIDomain: '[params.APIDomain]', - APIDomainBearerToken: '[params.APIDomainBearerToken]', - APIManualQueryParams: '[params.APIManualQueryParams]', + apiDomain: '[params.apiDomain]', + apiDomainBearerToken: '[params.apiDomainBearerToken]', + apiManualQueryParams: '[params.apiManualQueryParams]', allowMultiple: '[params.allowMultiple]', mandatory: '[params.mandatory]', instructions: '[params.instructions]', @@ -338,10 +338,10 @@ describe('macro: address-input', () => { errorTitle: '[params.errorTitle]', errorMessageEnter: '[params.errorMessageEnter]', errorMessageSelect: '[params.errorMessageSelect]', - errorMessageAPI: '[params.errorMessageAPI]', - errorMessageAPILinkText: '[params.errorMessageAPILinkText]', + errorMessageApi: '[params.errorMessageApi]', + errorMessageApiLinkText: '[params.errorMessageApiLinkText]', options: '[params.options]', - manualLink: '[params.manualLink]', + manualLinkUrl: '[params.manualLinkUrl]', manualLinkText: '[params.manualLinkText]', }); @@ -362,9 +362,9 @@ describe('macro: address-input', () => { mutuallyExclusive: '[params.mutuallyExclusive]', }, externalInitialiser: true, - APIDomain: '[params.APIDomain]', - APIDomainBearerToken: '[params.APIDomainBearerToken]', - APIManualQueryParams: '[params.APIManualQueryParams]', + apiDomain: '[params.apiDomain]', + apiDomainBearerToken: '[params.apiDomainBearerToken]', + apiManualQueryParams: '[params.apiManualQueryParams]', allowMultiple: '[params.allowMultiple]', mandatory: '[params.mandatory]', instructions: '[params.instructions]', @@ -387,18 +387,19 @@ describe('macro: address-input', () => { errorTitle: '[params.errorTitle]', errorMessageEnter: '[params.errorMessageEnter]', errorMessageSelect: '[params.errorMessageSelect]', - errorMessageAPI: '[params.errorMessageAPI]', - errorMessageAPILinkText: '[params.errorMessageAPILinkText]', + errorMessageApi: '[params.errorMessageApi]', + errorMessageApiLinkText: '[params.errorMessageApiLinkText]', options: '[params.options]', - manualLink: '[params.manualLink]', + manualLinkUrl: '[params.manualLinkUrl]', manualLinkText: '[params.manualLinkText]', }); }); - it('renders manualLinkText` when provided with a default value for `manualLink`', () => { + it('renders manualLinkText` when provided with a default value for `manualLinkUrl`', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, + manualLinkUrl: '#0', manualLinkText: 'Manually enter address', }), ); @@ -407,11 +408,11 @@ describe('macro: address-input', () => { expect($('.ons-js-address-manual-btn').text().trim()).toBe('Manually enter address'); }); - it('renders `manualLinkText` with `manualLink` when provided', () => { + it('renders `manualLinkText` with `manualLinkUrl` when provided', () => { const $ = cheerio.load( renderComponent('address-input', { ...EXAMPLE_AUTOSUGGEST_ADDRESS_MINIMAL, - manualLink: 'https://example.com/edit-address', + manualLinkUrl: 'https://example.com/edit-address', manualLinkText: 'Manually enter address', }), ); diff --git a/src/components/address-input/autosuggest.address.js b/src/components/address-input/autosuggest.address.js index 5bc0ca4bd7..72f8ee03dd 100644 --- a/src/components/address-input/autosuggest.address.js +++ b/src/components/address-input/autosuggest.address.js @@ -57,10 +57,10 @@ export default class AutosuggestAddress { }); // Set up AIMS api variables and auth - this.APIDomain = this.container.getAttribute('data-api-domain'); - this.lookupURL = `${this.APIDomain}/addresses/eq?input=`; - this.lookupGroupURL = `${this.APIDomain}/addresses/eq/bucket?`; - this.retrieveURL = `${this.APIDomain}/addresses/eq/uprn/`; + this.apiDomain = this.container.getAttribute('data-api-domain'); + this.lookupUrl = `${this.apiDomain}/addresses/eq?input=`; + this.lookupGroupUrl = `${this.apiDomain}/addresses/eq/bucket?`; + this.retrieveUrl = `${this.apiDomain}/addresses/eq/uprn/`; // Query string options this.manualQueryParams = this.container.getAttribute('data-query-params'); @@ -77,7 +77,7 @@ export default class AutosuggestAddress { } async checkAPIStatus() { - this.fetch = abortableFetch(this.lookupURL + 'cf142&limit=10', { + this.fetch = abortableFetch(this.lookupUrl + 'cf142&limit=10', { method: 'GET', headers: this.setAuthorization(this.authorizationToken), }); @@ -109,24 +109,24 @@ export default class AutosuggestAddress { } async findAddress(text, grouped) { - let queryURL, fullQueryURL; + let queryUrl, fullQueryUrl; if (this.manualQueryParams) { const manualQueryParams = this.container.getAttribute('data-query-params'); - fullQueryURL = this.lookupURL + text + manualQueryParams; + fullQueryUrl = this.lookupUrl + text + manualQueryParams; } else { const fullPostcodeQuery = this.testFullPostcodeQuery(text); let limit = fullPostcodeQuery ? 100 : 10; - queryURL = grouped ? this.lookupGroupURL + this.groupQuery : this.lookupURL + text + '&limit=' + limit; + queryUrl = grouped ? this.lookupGroupUrl + this.groupQuery : this.lookupUrl + text + '&limit=' + limit; - fullQueryURL = this.generateURLParams(queryURL); + fullQueryUrl = this.generateUrlParams(queryUrl); if (fullPostcodeQuery && grouped !== false) { - fullQueryURL = fullQueryURL + '&groupfullpostcodes=combo'; + fullQueryUrl = fullQueryUrl + '&groupfullpostcodes=combo'; } } - this.fetch = abortableFetch(fullQueryURL, { + this.fetch = abortableFetch(fullQueryUrl, { method: 'GET', headers: this.setAuthorization(this.authorizationToken), }); @@ -248,11 +248,11 @@ export default class AutosuggestAddress { } async retrieveAddress(id, type = null) { - let retrieveUrl = this.retrieveURL + id; + let retrieveUrl = this.retrieveUrl + id; - const fullUPRNURL = this.generateURLParams(retrieveUrl, id, type); + const fullUprnUrl = this.generateUrlParams(retrieveUrl, id, type); - this.fetch = abortableFetch(fullUPRNURL, { + this.fetch = abortableFetch(fullUprnUrl, { method: 'GET', headers: this.setAuthorization(this.authorizationToken), }); @@ -315,8 +315,8 @@ export default class AutosuggestAddress { }; } - generateURLParams(baseURL, uprn, type) { - let fullURL = baseURL, + generateUrlParams(baseUrl, uprn, type) { + let fullUrl = baseUrl, addressType; const classificationFilterParam = '&classificationfilter=', @@ -336,37 +336,37 @@ export default class AutosuggestAddress { if (!uprn) { if (this.classificationFilter && this.classificationFilter !== 'residential') { - fullURL = fullURL + classificationFilterParam + this.classificationFilter; + fullUrl = fullUrl + classificationFilterParam + this.classificationFilter; } if (this.classificationFilter === 'workplace') { if (this.regionCode === 'gb-eng') { - fullURL = fullURL + eboostParam; + fullUrl = fullUrl + eboostParam; } else if (this.regionCode === 'gb-wls') { - fullURL = fullURL + wboostParam; + fullUrl = fullUrl + wboostParam; } } if (this.regionCode === 'gb-nir') { if (this.classificationFilter === 'educational') { - fullURL = fullURL + nionlyParam; + fullUrl = fullUrl + nionlyParam; } else { - fullURL = fullURL + niboostParam; + fullUrl = fullUrl + niboostParam; } } if (this.lang === 'cy') { - fullURL = fullURL + favourwelshParam; + fullUrl = fullUrl + favourwelshParam; } } else if (uprn) { - fullURL = baseURL + addresstypeParam + addressType; + fullUrl = baseUrl + addresstypeParam + addressType; } if (this.epoch === 'true') { - fullURL = fullURL + epochParam; + fullUrl = fullUrl + epochParam; } - return fullURL; + return fullUrl; } handleAPIError() { diff --git a/src/components/address-input/autosuggest.address.spec.js b/src/components/address-input/autosuggest.address.spec.js index 065f3f273f..9c2636d988 100644 --- a/src/components/address-input/autosuggest.address.spec.js +++ b/src/components/address-input/autosuggest.address.spec.js @@ -30,8 +30,8 @@ const EXAMPLE_ADDRESS_INPUT = { errorTitle: 'There is a problem with your answer', errorMessageEnter: 'Enter an address', errorMessageSelect: 'Select an address', - errorMessageAPI: 'Sorry, there is a problem loading addresses', - errorMessageAPILinkText: 'Enter address manually', + errorMessageApi: 'Sorry, there is a problem loading addresses', + errorMessageApiLinkText: 'Enter address manually', options: { regionCode: 'gb-eng', addressType: 'residential', @@ -52,18 +52,21 @@ const EXAMPLE_ADDRESS_INPUT = { label: 'Postcode', }, searchButton: 'Search for an address', + manualLinkUrl: '#0', manualLinkText: 'Manually enter address', }; const EXAMPLE_ADDRESS_INPUT_WITH_API = { ...EXAMPLE_ADDRESS_INPUT, - APIDomain: '/fake/api', - APIDomainBearerToken: 'someToken', + apiDomain: '/fake/api', + apiDomainBearerToken: 'someToken', externalInitialiser: true, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: address-input', () => { - const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.APIDomain); + const apiFaker = new PuppeteerEndpointFaker(EXAMPLE_ADDRESS_INPUT_WITH_API.apiDomain); apiFaker.setOverrides( [ @@ -184,7 +187,7 @@ describe('script: address-input', () => { describe('When the component initializes', () => { it('checks api status by trying a request', async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); + await setTimeout(50); expect(apiFaker.getRequestCount('/addresses/eq?input=cf142&limit=10')).toBe(1); }); @@ -192,7 +195,7 @@ describe('script: address-input', () => { describe('when api status is okay', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); + await setTimeout(50); }); it('does not switch to manual input', async () => { @@ -216,7 +219,7 @@ describe('script: address-input', () => { }); await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); - await page.waitForTimeout(50); + await setTimeout(50); }); it('switches to manual input', async () => { @@ -271,6 +274,7 @@ describe('script: address-input', () => { }); it('has expected suggestion entries', async () => { + await setTimeout(100); const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.map((node) => node.textContent.trim())); expect(suggestions).toEqual(['196 College Road, Birmingham, B44 8HF', '196 College Road, Whitchurch, Cardiff, CF14 2NZ']); }); @@ -305,7 +309,7 @@ describe('script: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'Penlline Road, Whitchurch, Cardiff, CF14 2N')); await page.type('.ons-js-autosuggest-input', 'Z'); - await page.waitForTimeout(100); + await setTimeout(100); }); it('provides expected parameters to the address API', async () => { @@ -328,7 +332,7 @@ describe('script: address-input', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); }); it('makes expected request when a suggestion is selected', async () => { @@ -352,7 +356,7 @@ describe('script: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = 'CF14 ')); await page.type('.ons-js-autosuggest-input', '2'); - await page.waitForTimeout(200); + await setTimeout(200); }); it('provides expected parameters to the address API', async () => { @@ -371,7 +375,7 @@ describe('script: address-input', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(200); + await setTimeout(200); }); it('makes expected request', async () => { @@ -393,7 +397,7 @@ describe('script: address-input', () => { beforeEach(async () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(200); + await setTimeout(200); }); it('populates manual input fields with address from selection', async () => { @@ -437,7 +441,7 @@ describe('script: address-input', () => { await page.type('.ons-js-autosuggest-input', '2', { delay: 20 }); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); const isManualElementHidden = await page.$eval('.ons-js-address-input__manual', (node) => node.classList.contains('ons-u-db-no-js_enabled'), @@ -480,7 +484,7 @@ describe('script: address-input', () => { await page.type('.ons-js-autosuggest-input', 'T', { delay: 20 }); await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); const urpnValueBefore = await page.$eval('.ons-js-hidden-uprn', (node) => node.value); expect(urpnValueBefore).toBe('100070332099'); @@ -599,6 +603,8 @@ describe('script: address-input', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API)); await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy')); + + await setTimeout(50); }); it('then the fetch url should contain the favour Welsh parameter', async () => { @@ -619,7 +625,7 @@ describe('script: address-input', () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await setTimeout(50); }); it('then the retrieveAddress function will be called', async () => { @@ -730,6 +736,8 @@ describe('script: address-input', () => { await page.$eval('.ons-js-autosuggest-input', (node) => (node.value = '196 coll')); await page.type('.ons-js-autosuggest-input', 'e'); + await setTimeout(50); + expect(apiFaker.getRequestCount(searchEndpoint)).toBe(1); }); @@ -739,7 +747,7 @@ describe('script: address-input', () => { await page.keyboard.press('ArrowDown'); await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await setTimeout(50); expect(apiFaker.getRequestCount(uprnEndpoint)).toBe(1); }); diff --git a/src/components/address-input/example-address-input-editable.njk b/src/components/address-input/example-address-input-editable.njk index 122df07ab7..79df8fef97 100644 --- a/src/components/address-input/example-address-input-editable.njk +++ b/src/components/address-input/example-address-input-editable.njk @@ -10,8 +10,8 @@ }, "isEditable": true, "mandatory": true, - "APIDomain": "https://mock-address-api.gcp.onsdigital.uk", - 'APIDomainBearerToken': "some_token", + "apiDomain": "https://mock-address-api.gcp.onsdigital.uk", + 'apiDomainBearerToken': "some_token", "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.", "ariaYouHaveSelected": "You have selected", "ariaMinChars": "Enter 3 or more characters for suggestions.", @@ -30,8 +30,8 @@ "errorTitle": "There is a problem with your answer", "errorMessageEnter": "Enter an address", "errorMessageSelect": "Select an address", - "errorMessageAPI": "Sorry, there is a problem loading addresses.", - "errorMessageAPILinkText": "Enter address manually", + "errorMessageApi": "Sorry, there is a problem loading addresses.", + "errorMessageApiLinkText": "Enter address manually", "options": { "regionCode": "gb-eng", "addressType": "residential" @@ -49,6 +49,7 @@ "label": "Postcode" }, "searchButton": "Search for an address", + "manualLinkUrl": "#0", "manualLinkText": "Manually enter address" }) }} diff --git a/src/components/address-input/example-address-input.njk b/src/components/address-input/example-address-input.njk index f55d4867c2..9dc2a09575 100644 --- a/src/components/address-input/example-address-input.njk +++ b/src/components/address-input/example-address-input.njk @@ -12,8 +12,8 @@ "mandatory": true, "externalInitialiser": true, "autocomplete": "off", - "APIDomain": "https://mock-address-api.gcp.onsdigital.uk", - 'APIDomainBearerToken': "some_token", + "apiDomain": "https://mock-address-api.gcp.onsdigital.uk", + 'apiDomainBearerToken': "some_token", "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.", "ariaYouHaveSelected": "You have selected", "ariaMinChars": "Enter 3 or more characters for suggestions.", @@ -31,9 +31,8 @@ "errorTitle": "There is a problem with your answer", "errorMessageEnter": "Enter an address", "errorMessageSelect": "Select an address", - "errorMessageAPI": "Sorry, there is a problem. We are working to fix it. Please try again later or", - "errorMessageAPILinkText": "contact us for more help", - "errorMessageAPILink": "#0", + "errorMessageApi": "Sorry, there is a problem. We are working to fix it. Please try again later or", + "errorMessageApiLinkText": "contact us for more help", "options": { "regionCode": "gb-eng", "addressType": "residential" diff --git a/src/foundations/address-output/example-address-output.njk b/src/components/address-output/example-address-output.njk similarity index 100% rename from src/foundations/address-output/example-address-output.njk rename to src/components/address-output/example-address-output.njk diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index 4e6c3df3c0..b8c2f4c52f 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -15,9 +15,9 @@ data-results-title="{{ params.resultsTitle }}" data-no-results="{{ params.noResults }}" data-type-more="{{ params.typeMore }}" - {% if params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %} - {% if params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %} - {% if params.APIManualQueryParams == true %}data-query-params=""{% endif %} + {% if params.apiDomain %}data-api-domain="{{ params.apiDomain }}"{% endif %} + {% if params.apiDomainBearerToken %}data-authorization-token="{{ params.apiDomainBearerToken }}"{% endif %} + {% if params.apiManualQueryParams == true %}data-query-params=""{% endif %} {% if params.allowMultiple == true %}data-allow-multiple="true"{% endif %} {% if params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %} {% if params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %} @@ -26,8 +26,8 @@ {% if params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %} {% if params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %} {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %} - {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %} - {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %} + {% if params.errorMessageApi %}data-error-api="{{ params.errorMessageApi }}"{% endif %} + {% if params.errorMessageApiLinkText %}data-error-api-link-text="{{ params.errorMessageApiLinkText }}"{% endif %} {% if params.language %}data-lang="{{ params.language }}"{% endif %} {% if params.options %} {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %} diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index ff502c29e0..7948fd4a71 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -53,6 +53,8 @@ const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = { language: 'en-gb', }; +const { setTimeout } = require('node:timers/promises'); + describe('script: autosuggest', () => { const apiFaker = new PuppeteerEndpointFaker('/test/fake/api'); @@ -298,11 +300,11 @@ describe('script: autosuggest', () => { const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); expect(suggestionCountSample1).toBe(2); - await page.waitForTimeout(200); + await setTimeout(200); const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); expect(suggestionCountSample2).toBe(2); - await page.waitForTimeout(320); + await setTimeout(320); const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); expect(suggestionCountSample3).toBe(0); }); @@ -312,7 +314,7 @@ describe('script: autosuggest', () => { await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); await page.keyboard.press('Tab'); - await page.waitForTimeout(320); + await setTimeout(320); const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML); expect(listboxInnerHTML).toBe(''); @@ -323,7 +325,7 @@ describe('script: autosuggest', () => { await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); await page.keyboard.press('Tab'); - await page.waitForTimeout(320); + await setTimeout(320); const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results')); expect(hasClass).toBe(false); @@ -334,7 +336,7 @@ describe('script: autosuggest', () => { await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); await page.keyboard.press('Tab'); - await page.waitForTimeout(320); + await setTimeout(320); const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); expect(attributes['aria-activedescendant']).toBeUndefined(); @@ -595,7 +597,7 @@ describe('script: autosuggest', () => { ...EXAMPLE_AUTOSUGGEST, errorTitle: 'There is a problem with your answer', errorMessage: 'Enter an address ', - errorMessageAPI: 'Sorry, there is a problem.', + errorMessageApi: 'Sorry, there is a problem.', }), ); diff --git a/src/components/back-to-top/_macro.spec.js b/src/components/back-to-top/_macro.spec.js index b44be197ed..a8ac0b81eb 100644 --- a/src/components/back-to-top/_macro.spec.js +++ b/src/components/back-to-top/_macro.spec.js @@ -5,56 +5,50 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -describe('macro: back-to-top', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('back-to-top', { - description: 'Back to top', - anchor: 'example-target', - }), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has back to top link with the provided description', async () => { - const $ = cheerio.load( - renderComponent('back-to-top', { - description: 'Scroll to top', - anchor: 'example-target', - }), - ); - expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Scroll to top'); - }); - - it('has back to top link with the provided anchor', async () => { - const $ = cheerio.load( - renderComponent('back-to-top', { - description: 'Back to top', - anchor: 'example-target', - }), - ); - - expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#example-target'); +describe('FOR: Back-to-top', () => { + describe('GIVEN: Params: default', () => { + describe('WHEN: params are at default', () => { + const $ = cheerio.load(renderComponent('back-to-top')); + test('THEN: jest-axe tests pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + }); }); - - it('has back to top link with the default description if no description provided', async () => { - const $ = cheerio.load( - renderComponent('back-to-top', { - anchor: 'example-target', - }), - ); - - expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Back to top'); + describe('GIVEN: Params: description', () => { + describe('WHEN: description text is not provided', () => { + const $ = cheerio.load(renderComponent('back-to-top')); + test('THEN: renders with default description text', () => { + expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Back to top'); + }); + }); + describe('WHEN: description text is provided', () => { + const $ = cheerio.load( + renderComponent('back-to-top', { + description: 'Scroll to top', + }), + ); + test('THEN: renders button with provided text', () => { + expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Scroll to top'); + }); + }); }); - - it('has back to top link with the default anchor if no anchor provided', async () => { - const renderedComponent = renderComponent('back-to-top', { - description: 'Back to top', + describe('GIVEN: Params: anchor', () => { + describe('WHEN: anchor is not provided', () => { + const $ = cheerio.load(renderComponent('back-to-top')); + test('THEN: renders with default anchor id', () => { + expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#top'); + }); + }); + describe('WHEN: anchor is provided', () => { + const $ = cheerio.load( + renderComponent('back-to-top', { + anchor: 'example-target', + }), + ); + test('THEN: renders button with provided anchor id', () => { + expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#example-target'); + }); }); - const $ = cheerio.load(renderedComponent); - - expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#top'); }); }); diff --git a/src/components/back-to-top/back-to-top.spec.js b/src/components/back-to-top/back-to-top.spec.js index b0033b340b..157db0e293 100644 --- a/src/components/back-to-top/back-to-top.spec.js +++ b/src/components/back-to-top/back-to-top.spec.js @@ -1,5 +1,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; +const { setTimeout } = require('node:timers/promises'); + describe('script: back-to-top', () => { beforeEach(async () => { await setTestPage( @@ -98,7 +100,7 @@ describe('script: back-to-top', () => { await page.evaluate(() => { window.scrollTo(0, window.innerHeight * 2); }); - await new Promise((r) => setTimeout(r, 250)); + await setTimeout(250); const previousWidth = await page.evaluate(() => { const node = document.querySelector('.ons-back-to-top > .ons-back-to-top__link').children[0]; return window.getComputedStyle(node).marginLeft; @@ -107,7 +109,7 @@ describe('script: back-to-top', () => { await page.evaluate(() => { window.scrollTo(0, window.innerHeight * 2); }); - await new Promise((r) => setTimeout(r, 250)); + await setTimeout(250); const newWidth = await page.evaluate(() => { const node = document.querySelector('.ons-back-to-top > .ons-back-to-top__link').children[0]; return window.getComputedStyle(node).marginLeft; diff --git a/src/components/browser-banner/_macro.spec.js b/src/components/browser-banner/_macro.spec.js index 0263410bd9..518213f577 100644 --- a/src/components/browser-banner/_macro.spec.js +++ b/src/components/browser-banner/_macro.spec.js @@ -5,102 +5,101 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -const EXAMPLE_BROWSER_BANNER_DEFAULT = {}; - -describe('macro: browser-banner', () => { - it('passes jest-axe checks with', async () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the default `bannerLeadingText`', () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); - expect(bannerLeadingText).toBe('This website no longer supports your browser.'); - }); - - it('has the default `bannerCTA`', () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); - expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.'); - }); - - it('has the default `bannerLinkUrl`', () => { - const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT)); - - expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers'); - }); - - it('has `container--wide` class when `wide` is true', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - wide: true, - }), - ); - - expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); +describe('FOR: browser-banner', () => { + describe('GIVEN: Params: default', () => { + describe('WHEN: params are at default state', () => { + const $ = cheerio.load(renderComponent('browser-banner', {})); + + it('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + it('THEN: has the english default bannerLeadingText', () => { + const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); + expect(bannerLeadingText).toBe('This website no longer supports your browser.'); + }); + + it('THEN: has the english default bannerCTA', () => { + const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); + expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.'); + }); + + it('THEN: has the english default bannerLinkUrl', () => { + expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers'); + }); + }); + + describe('WHEN: params are at default and language is set to welsh', () => { + const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' })); + + it('THEN: has the welsh default bannerLeadingText', () => { + const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); + expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.'); + }); + + it('THEN: has the welsh default bannerCTA', () => { + const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); + expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.'); + }); + + it('THEN: has the welsh default bannerLinkUrl', () => { + expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers'); + }); + }); }); - it('does not have `container--wide` class when `wide` is not set', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - }), - ); - - expect($('.ons-container').hasClass('ons-container--wide')).toBe(false); - }); - - it('has `container--full-width` class when `fullWidth` is true', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - fullWidth: true, - }), - ); - - expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true); - }); - - it('does not have `container--full-width` class when `fullWidth` is not set', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - }), - ); - - expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false); + describe('GIVEN: Params: wide', () => { + describe('WHEN: wide is set to true', () => { + it('THEN: has container--wide class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + wide: true, + }), + ); + + expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); + }); + }); + + describe('WHEN: wide is not set', () => { + it('THEN: does not have container--wide class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + }), + ); + + expect($('.ons-container').hasClass('ons-container--wide')).toBe(false); + }); + }); }); -}); - -describe('mode: Welsh language', () => { - it('has the welsh version of default `bannerLeadingText`', () => { - const $ = cheerio.load( - renderComponent('browser-banner', { - ...EXAMPLE_BROWSER_BANNER_DEFAULT, - lang: 'cy', - }), - ); - - const bannerLeadingText = $('.ons-browser-banner__lead').text().trim(); - expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.'); - }); - - it('has the welsh version of default `bannerCTA`', () => { - const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' })); - - const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim(); - expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.'); - }); - - it('has the welsh version of default `bannerLinkUrl`', () => { - const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' })); - expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers'); + describe('GIVEN: Params: fullWidth', () => { + describe('WHEN: fullWidth is set to true', () => { + it('THEN: has container--full-width class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + fullWidth: true, + }), + ); + + expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true); + }); + }); + + describe('WHEN: fullWidth is not set', () => { + it('THEN: does not have container--full-width class', () => { + const $ = cheerio.load( + renderComponent('browser-banner', { + ...{}, + }), + ); + + expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false); + }); + }); }); }); diff --git a/src/components/call-to-action/_call-to-action.scss b/src/components/call-to-action/_call-to-action.scss deleted file mode 100644 index 0e0ec82338..0000000000 --- a/src/components/call-to-action/_call-to-action.scss +++ /dev/null @@ -1,8 +0,0 @@ -.ons-call-to-action { - background: var(--ons-color-cta-bg); - padding: 0.85rem 0; - - &__heading { - padding-right: 0.2rem; - } -} diff --git a/src/components/call-to-action/_macro-options.md b/src/components/call-to-action/_macro-options.md deleted file mode 100644 index f54eb46f72..0000000000 --- a/src/components/call-to-action/_macro-options.md +++ /dev/null @@ -1,12 +0,0 @@ -| Name | Type | Required | Description | -| ------------- | ------------------- | -------- | ------------------------------------------------- | -| headingText | string | true | The heading for the component | -| paragraphText | string | false | The descriptive text for the component | -| button | `Object` | true | Settings for the [call to action button](#button) | - -## CTAButton - -| Name | Type | Required | Description | -| ---- | ------ | -------- | --------------------------------------------------- | -| text | string | true | The text label for the button | -| url | string | true | The URL for the `href` attribute of the button link | diff --git a/src/components/call-to-action/_macro.njk b/src/components/call-to-action/_macro.njk deleted file mode 100644 index 63b144470d..0000000000 --- a/src/components/call-to-action/_macro.njk +++ /dev/null @@ -1,24 +0,0 @@ -{% macro onsCallToAction(params) %} - {% from "components/button/_macro.njk" import onsButton %} -
    -
    -
    -
    -

    {{ params.headingText }}

    - {% if params.paragraphText %} -

    {{ params.paragraphText }}

    - {% endif %} -
    -
    - {{ - onsButton({ - "text": params.button.text, - "url": params.button.url, - "variants": "small" - }) - }} -
    -
    -
    -
    -{% endmacro %} diff --git a/src/components/call-to-action/_macro.spec.js b/src/components/call-to-action/_macro.spec.js deleted file mode 100644 index b0396300b0..0000000000 --- a/src/components/call-to-action/_macro.spec.js +++ /dev/null @@ -1,48 +0,0 @@ -/** @jest-environment jsdom */ - -import * as cheerio from 'cheerio'; - -import axe from '../../tests/helpers/axe'; -import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; - -const EXAMPLE_CALL_TO_ACTION = { - headingText: 'Call to action heading.', - paragraphText: 'Descriptive text about call to action', - button: { - text: 'Start', - url: 'https://example.com/start', - }, -}; - -describe('macro: call-to-action', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the provided `headingText`', () => { - const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION)); - - const headingText = $('.ons-call-to-action__heading').text().trim(); - expect(headingText).toBe('Call to action heading.'); - }); - - it('has the provided `paragraphText`', () => { - const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION)); - - const paragraphText = $('.ons-call-to-action__text').text().trim(); - expect(paragraphText).toBe('Descriptive text about call to action'); - }); - - it('outputs the expected call-to-action button', () => { - const faker = templateFaker(); - const buttonSpy = faker.spy('button'); - - faker.renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION); - - expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Start'); - expect(buttonSpy.occurrences[0]).toHaveProperty('url', 'https://example.com/start'); - }); -}); diff --git a/src/components/call-to-action/example-call-to-action-default.njk b/src/components/call-to-action/example-call-to-action-default.njk deleted file mode 100644 index acace3b2bc..0000000000 --- a/src/components/call-to-action/example-call-to-action-default.njk +++ /dev/null @@ -1,15 +0,0 @@ ---- -'fullWidth': true ---- - -{% from "components/call-to-action/_macro.njk" import onsCallToAction %} -{{- - onsCallToAction({ - "headingText": 'Call to action heading.', - "paragraphText": 'Descriptive text about call to action', - "button": { - "text": 'Start', - "url": '#0' - } - }) --}} diff --git a/src/components/card/_macro-options.md b/src/components/card/_macro-options.md index abfd40ae78..16b731906c 100644 --- a/src/components/card/_macro-options.md +++ b/src/components/card/_macro-options.md @@ -1,14 +1,8 @@ -| Name | Type | Required | Description | -| ------------ | ----------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | true | The title for the card heading | -| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to `2` | -| titleClasses | string | false | Font size classes for the card heading. Defaults to `ons-u-fs-m` | -| url | string | true | The URL for the title link `href` attribute | -| id | string | true | The HTML `id` attribute for the card heading | -| text | string | true | The excerpt text for the card element | -| textId | string | true | The HTML `id` for the card text excerpt. Used for the card’s `aria-describedBy` attribute | -| image | `Object` or `true` | false | An object containing path attributes for [the card’s image](#image). If value is `true` will show placeholder with root as `placeholderURL` base path | -| itemsList | `Array` [_(ref)_](/foundations/typography/#lists) | false | A list of links for child items of the card | +| Name | Type | Required | Description | +| ----- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| title | `Object` | true | An object containing title attributes for [the card’s title](#title). | +| image | `Object<Image>` or `true` | false | An object containing path attributes for [the card’s image](#image). If value is `true` will show placeholder with root as `placeholderURL` base path | +| body | `Object<Body>` | true | An object containing body attributes for [the card’s body](#body). | ## Image @@ -17,4 +11,22 @@ | smallSrc | string | true | Path to the non-retina version of the image | | largeSrc | string | false | Path to the retina version of the image | | alt | string | false | The HTML `alt` tag to explain the appearance and function of the image. Not required if the image is only decorative | -| placeholderURL | string | false | Optional base path for placeholder image | +| placeholderUrl | string | false | Optional base path for placeholder image | + +## Title + +| Name | Type | Required | Description | +| ------------ | ------ | -------- | ----------------------------------------------------------------------------- | +| text | string | true | The text for the card title | +| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to `2` | +| classes | string | false | Font size classes for the card title. Defaults to `ons-u-fs-m` | +| url | string | true | The URL for the title link `href` attribute | +| id | string | true | The HTML `id` attribute for the card title | + +## Body + +| Name | Type | Required | Description | +| --------- | ----------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------- | +| text | string | true | The excerpt text for the card element | +| id | string | true | The HTML `id` for the card text excerpt. Used for the card’s `aria-describedBy` attribute | +| itemsList | `Array<ListItem>` [_(ref)_](/foundations/typography/#lists) | false | A list of links for child items of the card | diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk index 8898d54015..16aed4dfa4 100644 --- a/src/components/card/_macro.njk +++ b/src/components/card/_macro.njk @@ -1,11 +1,11 @@ {%- macro onsCard(params) -%} - {% set headingLevel = params.headingLevel | default(2) | string %} + {% set headingLevel = params.title.headingLevel | default(2) | string %} {% set openingHeadingTag = "<h" + headingLevel %} {% set closingHeadingTag = "</h" + headingLevel + ">" %} - {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL) + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %} + {% set placeholderSrcset = (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/large/placeholder-card.png 2x" %} <div class="ons-card"> - <a href="{{ params.url }}" class="ons-card__link"> + <a href="{{ params.title.url }}" class="ons-card__link"> {%- if params.image -%} {% if params.image.smallSrc %} <img @@ -17,31 +17,31 @@ alt="{{ params.image.alt }}" loading="lazy" /> - {% elif params.image == true or params.image.placeholderURL %} + {% elif params.image == true or params.image.placeholderUrl %} <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ placeholderSrcset }}" - src="{{- params.image.placeholderURL if params.image.placeholderURL -}}/img/small/placeholder-card.png" + src="{{- params.image.placeholderUrl if params.image.placeholderUrl -}}/img/small/placeholder-card.png" alt="" loading="lazy" /> {% endif %} {%- endif -%} {{ openingHeadingTag | safe }} - class="{{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}"> {{ params.title }} + class="ons-card__title {{ params.title.classes | default('ons-u-fs-m') }}" id="{{ params.title.id }}"> {{ params.title.text }} {{ closingHeadingTag | safe }} </a> - <p id="{{ params.textId }}">{{ params.text }}</p> + <p id="{{ params.body.id }}">{{ params.body.text }}</p> - {%- if params.itemsList -%} + {%- if params.body.itemsList -%} {% from "components/list/_macro.njk" import onsList %} {{ onsList({ "variants": 'dashed', - "itemsList": params.itemsList + "itemsList": params.body.itemsList }) }} {% endif %} diff --git a/src/components/card/_macro.spec.js b/src/components/card/_macro.spec.js index 16ac10e6d6..a88a05f115 100644 --- a/src/components/card/_macro.spec.js +++ b/src/components/card/_macro.spec.js @@ -6,17 +6,18 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_CARD_WITHOUT_IMAGE = { - title: 'Example card title', - id: 'example-title-id', - text: 'Example card text.', - textId: 'example-text-id', + title: { + text: 'Example card title', + id: 'example-title-id', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, }; const EXAMPLE_CARD_WITH_IMAGE = { - title: 'Example card title', - id: 'example-title-id', - text: 'Example card text.', - textId: 'example-text-id', + ...EXAMPLE_CARD_WITHOUT_IMAGE, image: { smallSrc: 'example-small.png', largeSrc: 'example-large.png', @@ -25,18 +26,14 @@ const EXAMPLE_CARD_WITH_IMAGE = { }; const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE = { - title: 'Example card title', - text: 'Example card text.', - textId: 'example-text-id', + ...EXAMPLE_CARD_WITHOUT_IMAGE, image: true, }; const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH = { - title: 'Example card title', - text: 'Example card text.', - textId: 'example-text-id', + ...EXAMPLE_CARD_WITHOUT_IMAGE, image: { - placeholderURL: '/placeholder-image-url', + placeholderUrl: '/placeholder-image-url', }, }; @@ -61,8 +58,15 @@ describe('macro: card', () => { ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => { const $ = cheerio.load( renderComponent('card', { - ...EXAMPLE_CARD_WITHOUT_IMAGE, - headingLevel, + title: { + text: 'Example card title', + headingLevel: headingLevel, + id: 'example-title-id', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, }), ); @@ -80,8 +84,14 @@ describe('macro: card', () => { const listsSpy = faker.spy('list'); faker.renderComponent('card', { - ...EXAMPLE_CARD_WITHOUT_IMAGE, - itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }], + title: { + text: 'Example card title', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }], + }, }); expect(listsSpy.occurrences[0]).toEqual({ @@ -93,8 +103,14 @@ describe('macro: card', () => { it('outputs a hyperlink with the provided `url`', () => { const $ = cheerio.load( renderComponent('card', { - ...EXAMPLE_CARD_WITHOUT_IMAGE, - url: 'https://example.com', + title: { + text: 'Example card title', + url: 'https://example.com', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, }), ); @@ -122,8 +138,20 @@ describe('macro: card', () => { ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => { const $ = cheerio.load( renderComponent('card', { - ...EXAMPLE_CARD_WITH_IMAGE, - headingLevel, + title: { + text: 'Example card title', + headingLevel: headingLevel, + id: 'example-title-id', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, + image: { + smallSrc: 'example-small.png', + largeSrc: 'example-large.png', + alt: 'Example alt text', + }, }), ); @@ -143,8 +171,14 @@ describe('macro: card', () => { it('outputs a hyperlink with the provided `url`', () => { const $ = cheerio.load( renderComponent('card', { - ...EXAMPLE_CARD_WITH_IMAGE, - url: 'https://example.com', + title: { + text: 'Example card title', + url: 'https://example.com', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, }), ); @@ -208,7 +242,7 @@ describe('macro: card', () => { }); }); - describe('with a default placeholder image with `placeholderURL`', () => { + describe('with a default placeholder image with `placeholderUrl`', () => { it('outputs an `img` element', () => { const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH)); diff --git a/src/components/card/example-card-set-with-images.njk b/src/components/card/example-card-set-with-images.njk index ce2b7844c0..ab1d634ace 100644 --- a/src/components/card/example-card-set-with-images.njk +++ b/src/components/card/example-card-set-with-images.njk @@ -4,12 +4,16 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-with-image-1', - "textId": 'text1', - "title": 'About the census', - "url": '#0', - "text": 'The census is a survey that gives us information about all the households in England and Wales.', - "image": true + "image": true, + "title": { + "id": 'card-with-image-1', + "text": 'About the census', + "url": '#0' + }, + "body":{ + "text": 'The census is a survey that gives us information about all the households in England and Wales.', + "id": 'text1' + } }) }} </div> @@ -17,12 +21,16 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-with-image-2', - "textId": 'text2', - "title": 'Working on the census', - "url": '#0', - "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.', - "image": true + "image": true, + "title": { + "id": 'card-with-image-2', + "text": 'Working on the census', + "url": '#0' + }, + "body":{ + "id": 'text2', + "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.' + } }) }} </div> @@ -30,12 +38,16 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-with-image-3', - "textId": 'text3', - "title": 'Your data and security', - "url": '#0', - "text": 'How we keep your data safe and what happens to your personal information.', - "image": true + "image": true, + "title": { + "id": 'card-with-image-3', + "text": 'Your data and security', + "url": '#0' + }, + "body":{ + "id": 'text3', + "text": 'How we keep your data safe and what happens to your personal information.' + } }) }} </div> diff --git a/src/components/card/example-card-set-with-lists.njk b/src/components/card/example-card-set-with-lists.njk index 9f2dab6b50..3919c5ecad 100644 --- a/src/components/card/example-card-set-with-lists.njk +++ b/src/components/card/example-card-set-with-lists.njk @@ -4,21 +4,25 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-with-list-1', - "textId": 'text1', - "title": 'About the census', - "url": '#0', - "text": 'The census is a survey that gives us information about all the households in England and Wales.', - "itemsList": [ - { - "url": '#0', - "text": 'List item 1 about the census' - }, - { - "url": '#0', - "text": 'List item 2 about the census' - } - ] + "title": { + "id": 'card-with-list-1', + "text": 'About the census', + "url": '#0' + }, + "body":{ + "id": 'text1', + "text": 'The census is a survey that gives us information about all the households in England and Wales.', + "itemsList": [ + { + "url": '#0', + "text": 'List item 1 about the census' + }, + { + "url": '#0', + "text": 'List item 2 about the census' + } + ] + } }) }} </div> @@ -26,21 +30,25 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-with-list-2', - "textId": 'text2', - "title": 'Working on the census', - "url": '#0', - "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.', - "itemsList": [ - { - "url": '#0', - "text": 'List item 1 about working on the census' - }, - { - "url": '#0', - "text": 'List item 2 about working on the census' - } - ] + "title": { + "id": 'card-with-list-2', + "text": 'Working on the census', + "url": '#0' + }, + "body":{ + "id": 'text2', + "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.', + "itemsList": [ + { + "url": '#0', + "text": 'List item 1 about working on the census' + }, + { + "url": '#0', + "text": 'List item 2 about working on the census' + } + ] + } }) }} </div> @@ -48,21 +56,25 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-with-list-3', - "textId": 'text3', - "title": 'Your data and security', - "url": '#0', - "text": 'How we keep your data safe and what happens to your personal information.', - "itemsList": [ - { - "url": '#0', - "text": 'List item 1 about your data and security' - }, - { - "url": '#0', - "text": 'List item 2 about your data and security' - } - ] + "title": { + "id": 'card-with-list-3', + "text": 'Your data and security', + "url": '#0' + }, + "body":{ + "id": 'text3', + "text": 'How we keep your data safe and what happens to your personal information.', + "itemsList": [ + { + "url": '#0', + "text": 'List item 1 about your data and security' + }, + { + "url": '#0', + "text": 'List item 2 about your data and security' + } + ] + } }) }} </div> diff --git a/src/components/card/example-card-set.njk b/src/components/card/example-card-set.njk index 106c169906..5683b83c11 100644 --- a/src/components/card/example-card-set.njk +++ b/src/components/card/example-card-set.njk @@ -4,11 +4,15 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-set-1', - "textId": 'text1', - "title": 'About the census', - "url": '#0', - "text": 'The census is a survey that gives us information about all the households in England and Wales.' + "title": { + "id": 'card-set-1', + "text": 'About the census', + "url": '#0' + }, + "body":{ + "id": 'text1', + "text": 'The census is a survey that gives us information about all the households in England and Wales.' + } }) }} </div> @@ -16,11 +20,15 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-set-2', - "textId": 'text2', - "title": 'Working on the census', - "url": '#0', - "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.' + "title": { + "id": 'card-set-2', + "text": 'Working on the census', + "url": '#0' + }, + "body":{ + "id": 'text2', + "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.' + } }) }} </div> @@ -28,11 +36,15 @@ <div class="ons-grid__col ons-col-4@m"> {{ onsCard({ - "id": 'card-set-3', - "textId": 'text3', - "title": 'Your data and security', - "url": '#0', - "text": 'How we keep your data safe and what happens to your personal information.' + "title": { + "id": 'card-set-3', + "text": 'Your data and security', + "url": '#0' + }, + "body":{ + "id": 'text3', + "text": 'How we keep your data safe and what happens to your personal information.' + } }) }} </div> diff --git a/src/components/card/example-card.njk b/src/components/card/example-card.njk index 933926935e..a917d809d4 100644 --- a/src/components/card/example-card.njk +++ b/src/components/card/example-card.njk @@ -2,10 +2,14 @@ {{ onsCard({ - "id": 'card-example', - "textId": 'text', - "title": 'Your data and security', - "url": '#0', - "text": 'How we keep your data safe and what happens to your personal information.' + "title": { + "id": 'card-example', + "text": 'Your data and security', + "url": '#0' + }, + "body":{ + "id": 'text', + "text": 'How we keep your data safe and what happens to your personal information.' + } }) }} diff --git a/src/components/checkboxes/example-checkboxes-with-hidden-label.njk b/src/components/checkboxes/example-checkboxes-with-hidden-label.njk index c1abd4412b..e8d56380d8 100644 --- a/src/components/checkboxes/example-checkboxes-with-hidden-label.njk +++ b/src/components/checkboxes/example-checkboxes-with-hidden-label.njk @@ -1,12 +1,12 @@ {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %} -<div class="ons-grid ons-grid--flex ons-grid--between"> +<div class="ons-grid ons-grid-flex ons-grid-flex--between"> <div class="ons-grid__col"> <h1 class="ons-u-fs-l u-mb-2xs" name="page-manage-account-title">{{ name }}</h1> </div> </div> -<div class="ons-grid ons-grid--flex ons-grid--between"> +<div class="ons-grid ons-grid-flex ons-grid-flex--between"> <div class="ons-grid__col"> <h2 class="ons-u-fs-m u-mb-2xs" name="page-manage-account-subtitle">Select user permissions</h2> </div> diff --git a/src/components/cookies-banner/_macro-options.md b/src/components/cookies-banner/_macro-options.md index c5d3dfe295..0a9dc15b9e 100644 --- a/src/components/cookies-banner/_macro-options.md +++ b/src/components/cookies-banner/_macro-options.md @@ -13,6 +13,6 @@ | confirmationButtonText | string | false | Text for the confirmation banner button (default is 'Hide') | | contextSuffix | string | false | Additional descriptive text for the confirmation banner button to assist screen readers (default is 'the cookie message') | | settingsLinkText | string | false | Text for link to cookie settings page (default is 'View cookies') | -| settingsLinkTextURL | string | false | URL for the cookies settings page (default is '/cookies') | +| settingsLinkUrl | string | false | URL for the cookies settings page (default is '/cookies') | | wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px | | fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport | diff --git a/src/components/cookies-banner/_macro.njk b/src/components/cookies-banner/_macro.njk index b81000709a..35c28feeac 100644 --- a/src/components/cookies-banner/_macro.njk +++ b/src/components/cookies-banner/_macro.njk @@ -13,8 +13,8 @@ {% set rejectedText = 'Rydych chi wedi gwrthod yr holl gwcis ychwanegol.' %} {% set confirmationButtonText = 'Cuddio' %} {% set contextSuffix = 'neges hon' %} - {% set beforeLinkPreferencesURL = 'Gallwch chi' %} - {% set afterLinkPreferencesURL = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %} + {% set beforeLinkPreferencesUrl = 'Gallwch chi' %} + {% set afterLinkPreferencesUrl = '"newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %} {% set beforeLinkStatementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod' %} {% set afterLinkStatementText = 'cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %} {% else %} @@ -29,19 +29,19 @@ {% set rejectedText = 'You have rejected all additional cookies.' %} {% set confirmationButtonText = 'Hide' %} {% set contextSuffix = 'cookie message' %} - {% set beforeLinkPreferencesURL = 'You can' %} - {% set afterLinkPreferencesURL = 'change your cookie preferences</a> at any time.' %} + {% set beforeLinkPreferencesUrl = 'You can' %} + {% set afterLinkPreferencesUrl = 'change your cookie preferences</a> at any time.' %} {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %} {% set afterLinkStatementText = 'additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %} {% endif %} {% if not isDesignSystemExample %} - {% set settingsLinkURL = params.settingsLinkTextURL | default(defaultCookiesLink) %} + {% set settingsLinkUrl = params.settingsLinkUrl | default(defaultCookiesLink) %} {% else %} - {% set settingsLinkURL = '#0' %} + {% set settingsLinkUrl = '#0' %} {% endif %} - {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkURL + '">' + afterLinkStatementText %} - {% set preferencesText = beforeLinkPreferencesURL + ' <a href="' + settingsLinkURL + '">' + afterLinkPreferencesURL %} + {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkUrl + '">' + afterLinkStatementText %} + {% set preferencesText = beforeLinkPreferencesUrl + ' <a href="' + settingsLinkUrl + '">' + afterLinkPreferencesUrl %} <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel) }}"> <div @@ -55,7 +55,7 @@ <div class="ons-cookies-banner__statement">{{ params.statementText | default(statementText) | safe }}</div> </div> </div> - <div class="ons-grid ons-grid--flex ons-u-mt-s"> + <div class="ons-grid ons-grid-flex ons-u-mt-s"> <div class="ons-grid__col"> {{ onsButton({ @@ -81,7 +81,7 @@ }} </div> <div class="ons-grid__col"> - <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}" + <a class="ons-cookies-banner__link" href="{{ settingsLinkUrl }}" >{{ params.settingsLinkText | default(settingsLinkText) }}</a > </div> @@ -90,8 +90,10 @@ <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no" > - <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center"> - <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s"> + <div + class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid--gutterless ons-grid-flex--no-wrap@s ons-grid-flex--vertical-center" + > + <div class="ons-grid__col ons-grid__col-flex ons-col-auto ons-u-flex-shrink@s"> <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"> <span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span ><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span diff --git a/src/components/cookies-banner/_macro.spec.js b/src/components/cookies-banner/_macro.spec.js index 2bfa65b3f5..64b839c249 100644 --- a/src/components/cookies-banner/_macro.spec.js +++ b/src/components/cookies-banner/_macro.spec.js @@ -10,7 +10,7 @@ const EXAMPLE_COOKIES_BANNER_PARAMS = { serviceName: 'ons.gov.uk override', statementTitle: 'Cookies on override', settingsLinkText: 'Cookie settings override', - settingsLinkTextURL: '/cookiesoverride', + settingsLinkUrl: '/cookiesoverride', statementText: 'Statement override', acceptButtonText: 'Accept additional cookies override', rejectButtonText: 'Reject additional cookies override', diff --git a/src/components/cookies-banner/cookies-banner.spec.js b/src/components/cookies-banner/cookies-banner.spec.js index 7fdd4e262e..7263016b16 100644 --- a/src/components/cookies-banner/cookies-banner.spec.js +++ b/src/components/cookies-banner/cookies-banner.spec.js @@ -4,7 +4,7 @@ const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {}); describe('script: cookies-banner', () => { beforeEach(async () => { - const client = await page.target().createCDPSession(); + const client = await page.createCDPSession(); await client.send('Network.clearBrowserCookies'); }); diff --git a/src/components/details/_macro-options.md b/src/components/details/_macro-options.md index 35edf822d0..f0f1329cf1 100644 --- a/src/components/details/_macro-options.md +++ b/src/components/details/_macro-options.md @@ -1,12 +1,12 @@ -| Name | Type | Required | Description | -| ----------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------- | -| id | string | true | HTML `id` attribute for the details | -| classes | string | false | Classes to add to the details outer element | -| title | string | true | The title text for the details heading | -| titleTag | string | false | The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2` | -| content | string | true | HTML content for the details | -| saveState | boolean | false | Saves the opened state of the details to local storage so it remains open when the page reloads | -| open | boolean | false | Forces the details to be open when the page loads | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the details | -| headingAttributes | object | false | HTML attributes (for example, data attributes) to add to the details header element | -| contentAttributes | object | false | HTML attributes (for example, data attributes) to add to the details content element | +| Name | Type | Required | Description | +| ----------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| id | string | true | HTML `id` attribute for the details | +| classes | string | false | Classes to add to the details outer element | +| title | string | true | The title text for the details heading | +| headingLevel | int | false | Number used to determine the heading level of the title text. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | +| content | string | true | HTML content for the details | +| saveState | boolean | false | Saves the opened state of the details to local storage so it remains open when the page reloads | +| open | boolean | false | Forces the details to be open when the page loads | +| attributes | object | false | HTML attributes (for example, data attributes) to add to the details | +| headingAttributes | object | false | HTML attributes (for example, data attributes) to add to the details header element | +| contentAttributes | object | false | HTML attributes (for example, data attributes) to add to the details content element | diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk index ffac38e1ca..8f22143e1f 100644 --- a/src/components/details/_macro.njk +++ b/src/components/details/_macro.njk @@ -12,9 +12,9 @@ role="button" {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %} > - {% set titleTag = params.titleTag | default("h2") %} - {% set openingTag = "<" + titleTag %} - {% set closingTag = "</" + titleTag + ">" %} + {% set titleTag = params.headingLevel | default(2) %} + {% set openingTag = "<h" + titleTag %} + {% set closingTag = "</h" + titleTag + ">" %} {{ openingTag | safe }} class="ons-details__title ons-u-fs-r--b">{{ params.title }}{{ closingTag | safe }} <span class="ons-details__icon"> diff --git a/src/components/details/_macro.spec.js b/src/components/details/_macro.spec.js index 3a3bec494d..208df730d6 100644 --- a/src/components/details/_macro.spec.js +++ b/src/components/details/_macro.spec.js @@ -48,7 +48,7 @@ describe('macro: details', () => { const $ = cheerio.load( renderComponent('details', { ...EXAMPLE_DETAILS_BASIC, - titleTag: 'h4', + headingLevel: 4, }), ); diff --git a/src/components/document-list/document-list.scss b/src/components/document-list/_document-list.scss similarity index 94% rename from src/components/document-list/document-list.scss rename to src/components/document-list/_document-list.scss index 186f714bda..34235d0172 100644 --- a/src/components/document-list/document-list.scss +++ b/src/components/document-list/_document-list.scss @@ -114,7 +114,7 @@ &__item-image--file & { &__image-link { - border-color: var(--ons-color-borders-document-image); + border-color: var(--ons-color-borders); &--placeholder { height: 136px; @@ -129,16 +129,16 @@ width: 100%; &:focus { - background-color: var(--ons-color-image-placeholder) !important; + background-color: var(--ons-color-placeholder) !important; border: 2px solid var(--ons-color-borders-document-image-focus); box-shadow: none; outline: 4px solid var(--ons-color-focus) !important; - outline-offset: 0; + outline-offset: 0 !important; } &--placeholder { background-clip: padding-box; - background-color: var(--ons-color-borders-document-image); + background-color: var(--ons-color-placeholder); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e"); background-position: center; background-repeat: no-repeat; diff --git a/src/components/document-list/_macro-options.md b/src/components/document-list/_macro-options.md index b0201f65cc..e6a6857cc8 100644 --- a/src/components/document-list/_macro-options.md +++ b/src/components/document-list/_macro-options.md @@ -1,10 +1,10 @@ -| Name | Type | Required | Description | -| ---------- | ----------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | false | The HTML `id` attribute for the document list element | -| classes | string | false | Classes for the document list element | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the document list element | -| documents | `Array<Document>` | true | An array of [document items](#document) in the documents list | -| titleTag | string | false | The HTML heading tag to wrap each document list item’s title to make sure the headings have the correct semantic order on the page. Defaults to `h2` | +| Name | Type | Required | Description | +| ------------ | ----------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| id | string | false | The HTML `id` attribute for the document list element | +| classes | string | false | Classes for the document list element | +| attributes | object | false | HTML attributes (for example, data attributes) to add to the document list element | +| documents | `Array<Document>` | true | An array of [document items](#document) in the documents list | +| headingLevel | int | false | Number used to determine the heading level of the list item title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | ## Document @@ -12,8 +12,7 @@ | ----------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | classes | string | false | Custom classes to add to each document list item | | attributes | object | false | HTML attributes (for example, data attributes) to add to each document list item | -| title | string | true | The title for the document | -| url | string | true | The URL for the document link (either a file or web page) | +| title | `Object<Title>` | true | An object containing text and url of the [title](#title) | | description | string | false | A short HTML extract of text (for example, a short sentence to give some context of the document) | | thumbnail | `Object<Thumbnail>` | false | An object containing path and filename attributes for the [thumbnail image](#thumbnail). Renders a placeholder instead if set to `true` | | metadata | `Object<Metadata>` | false | An object for a [list of information about document](#metadata), for example, date, type and size | @@ -30,13 +29,13 @@ ### Metadata -| Name | Type | Required | Description | -| ---- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------- | -| type | `<Object>Type` | false | An object for a list item describing the [type of document](#type), for example, “Dataset” or “Press release” | -| date | `<Object>Date` | false | An object for the [date](#date) the document was published or updated | -| file | `<Object>File` | false | An object to describe the [details of the downloadable file](#file) such as format and size | +| Name | Type | Required | Description | +| ------ | ---------------- | -------- | --------------------------------------------------------------------------------------------------------------- | +| object | `Object<Object>` | false | An object for a list item describing the [type of document](#object), for example, “Dataset” or “Press release” | +| date | `Object<Date>` | false | An object for the [date](#date) the document was published or updated | +| file | `Object<File>` | false | An object to describe the [details of the downloadable file](#file) such as format and size | -#### Type +#### Object | Name | Type | Required | Description | | ---- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | @@ -60,3 +59,10 @@ | fileType | string | true | Format of the file, for example, PDF, DOC, XLS | | fileSize | string | true | Size of the file in megabytes or kilobytes, for example, “850KB” | | filePages | string | false | Number of pages in the file, for example, “16 pages” | + +#### Title + +| Name | Type | Required | Description | +| ---- | ------ | -------- | --------------------------------------------------------- | +| text | string | true | The title for the document | +| url | string | true | The URL for the document link (either a file or web page) | diff --git a/src/components/document-list/_macro.njk b/src/components/document-list/_macro.njk index f2c3a08307..bb6c9ab08b 100644 --- a/src/components/document-list/_macro.njk +++ b/src/components/document-list/_macro.njk @@ -4,9 +4,9 @@ {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %} > {% for document in params.documents %} - {% set titleTag = params.titleTag | default("h2") %} - {% set openingTag = "<" + titleTag %} - {% set closingTag = "</" + titleTag + ">" %} + {% set titleTag = params.headingLevel | default(2) %} + {% set openingTag = "<h" + titleTag %} + {% set closingTag = "</h" + titleTag + ">" %} {% set documentItem %} {% if document.thumbnail %} <div @@ -15,7 +15,7 @@ > <a class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}" - href="{{ document.url }}" + href="{{ document.title.url }}" tabindex="-1" > {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %} @@ -35,8 +35,8 @@ class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}" > {{ openingTag | safe }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs"> - <a href="{{ document.url }}" - >{{ document.title }} + <a href="{{ document.title.url }}" + >{{ document.title.text }} {%- if document.metadata and document.metadata.file -%} <span class="ons-u-vh"> {% @@ -63,23 +63,23 @@ </li> {% endif %} - {%- if document.metadata.type and document.metadata.type.text -%} + {%- if document.metadata.object and document.metadata.object.text -%} <li class="ons-document-list__item-attribute{{ ' ons-u-mr-no' if document.metadata.file }}"> - {% set metadataType %} + {% set metadataObject %} <span - {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %} - >{{ document.metadata.type.text }}{%- if document.metadata.type.ref -%}:{% elif document.metadata.file %},{% endif %}</span + {% if not document.metadata.file and not document.metadata.object.url %}class="ons-u-fw-b"{% endif %} + >{{ document.metadata.object.text }}{%- if document.metadata.object.ref -%}:{% elif document.metadata.file %},{% endif %}</span > {% endset %} - {%- if document.metadata.type.url -%} - <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}"> - {{ metadataType | safe }} + {%- if document.metadata.object.url -%} + <a class="ons-document-list__attribute-link" href="{{ document.metadata.object.url }}"> + {{ metadataObject | safe }} </a> {% else %} - {{ metadataType | safe }} + {{ metadataObject | safe }} {% endif %} - {%- if document.metadata.type.ref -%} - <span>{{ document.metadata.type.ref }}</span> + {%- if document.metadata.object.ref -%} + <span>{{ document.metadata.object.ref }}</span> {% endif %} </li> {% endif %} diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index d382751cf2..1af96d5c57 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -6,8 +6,10 @@ import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; const EXAMPLE_DOCUMENT_LIST_BASIC = { - url: '#0', - title: 'Crime and justice', + title: { + text: 'Crime and justice', + url: '#0', + }, description: 'Some description', }; @@ -30,10 +32,10 @@ const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE = { }, }; -const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE = { +const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT = { ...EXAMPLE_DOCUMENT_LIST_BASIC, metadata: { - type: { + object: { text: 'Poster', url: '#0', ref: 'some ref', @@ -49,7 +51,7 @@ const EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE = { largeSrc: '/example-large.png', }, metadata: { - type: { + object: { text: 'Poster', url: '#0', ref: 'some ref', @@ -154,15 +156,15 @@ describe('macro: document list', () => { expect($('.ons-document-list__item-header--reverse').length).toBe(1); }); - it('overrides the heading title tag when `titleTag` is provided', () => { + it('overrides the heading title tag when `headingLevel` is provided', () => { const $ = cheerio.load( renderComponent('document-list', { - titleTag: 'h1', + headingLevel: 1, documents: [EXAMPLE_DOCUMENT_LIST_BASIC], }), ); - const titleTag = $('.ons-document-list__item-title')[0].tagName; - expect(titleTag).toBe('h1'); + const headingLevel = $('.ons-document-list__item-title')[0].tagName; + expect(headingLevel).toBe('h1'); }); it('has expected `title`', () => { @@ -256,11 +258,11 @@ describe('macro: document list', () => { }); }); - describe('mode: with metadata `type` configuration', () => { + describe('mode: with metadata `object` configuration', () => { it('passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE], + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], }), ); @@ -271,7 +273,7 @@ describe('macro: document list', () => { it('has the provided `url`', () => { const $ = cheerio.load( renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE], + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], }), ); @@ -280,13 +282,13 @@ describe('macro: document list', () => { }); it('has expected `text`', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] })); + const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] })); const text = $('.ons-document-list__attribute-link > span').text().trim(); expect(text).toBe('Poster:'); }); it('has expected `ref`', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] })); + const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] })); const text = $('.ons-document-list__attribute-link + span').text().trim(); expect(text).toBe('some ref'); }); diff --git a/src/components/document-list/example-document-list-article-featured.njk b/src/components/document-list/example-document-list-article-featured.njk index d1aa536c5e..40f5e97211 100644 --- a/src/components/document-list/example-document-list-article-featured.njk +++ b/src/components/document-list/example-document-list-article-featured.njk @@ -14,10 +14,12 @@ "smallSrc": '/img/small/census-monuments-lights-featured.jpg', "largeSrc": '/img/large/census-monuments-lights-featured.jpg' }, - "url": '#0', - "title": 'Landmarks are lighting up purple to mark Census Day', + "title": { + "text": 'Landmarks are lighting up purple to mark Census Day', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Press releases', "url": '#0' }, diff --git a/src/components/document-list/example-document-list-articles.njk b/src/components/document-list/example-document-list-articles.njk index 494ad0596c..0e12376c0a 100644 --- a/src/components/document-list/example-document-list-articles.njk +++ b/src/components/document-list/example-document-list-articles.njk @@ -8,10 +8,12 @@ "smallSrc": '/img/small/census-monuments-lights.jpg', "largeSrc": '/img/large/census-monuments-lights.jpg' }, - "url": '#0', - "title": 'Landmarks are lighting up purple to mark Census Day', + "title": { + "text": 'Landmarks are lighting up purple to mark Census Day', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Press releases', "url": '#0' }, @@ -27,10 +29,12 @@ "smallSrc": '/img/small/ons-award-winners.jpg', "largeSrc": '/img/large/ons-award-winners.jpg' }, - "url": '#0', - "title": 'Office for National Statistics win top Royal Statistical Society award', + "title": { + "text": 'Office for National Statistics win top Royal Statistical Society award', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Press releases', "url": '#0' }, @@ -43,10 +47,12 @@ }, { "thumbnail": true, - "url": '#0', - "title": 'Five Office for National Statistics names in New Year’s Honours', + "title": { + "text": 'Five Office for National Statistics names in New Year’s Honours', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Press releases', "url": '#0' }, diff --git a/src/components/document-list/example-document-list-downloads.njk b/src/components/document-list/example-document-list-downloads.njk index 2b8201e5fe..1e34719579 100644 --- a/src/components/document-list/example-document-list-downloads.njk +++ b/src/components/document-list/example-document-list-downloads.njk @@ -4,10 +4,12 @@ "documents": [ { "thumbnail": true, - "url": '#', - "title": 'Including everyone in Census 2021', + "title": { + "text": 'Including everyone in Census 2021', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Poster' }, "file": { @@ -20,10 +22,12 @@ }, { "thumbnail": true, - "url": '#', - "title": 'Community handbook for Census 2021', + "title": { + "text": 'Community handbook for Census 2021', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Booklet' }, "file": { @@ -36,10 +40,12 @@ }, { "thumbnail": true, - "url": '#', - "title": 'Census 2021 matters to everyone', + "title": { + "text": 'Census 2021 matters to everyone', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Poster' }, "file": { diff --git a/src/components/document-list/example-document-list-search-result-featured.njk b/src/components/document-list/example-document-list-search-result-featured.njk index 41016a8167..c48ca5fc27 100644 --- a/src/components/document-list/example-document-list-search-result-featured.njk +++ b/src/components/document-list/example-document-list-search-result-featured.njk @@ -6,10 +6,12 @@ { "featured": true, "showMetadataFirst": true, - "url": '#0', - "title": 'Crime and justice', + "title": { + "text": 'Crime and justice', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Topic' } }, diff --git a/src/components/document-list/example-document-list-search-results.njk b/src/components/document-list/example-document-list-search-results.njk index 9b97873b0a..258a410832 100644 --- a/src/components/document-list/example-document-list-search-results.njk +++ b/src/components/document-list/example-document-list-search-results.njk @@ -6,10 +6,12 @@ { "featured": true, "showMetadataFirst": true, - "url": '#0', - "title": 'Crime and justice', + "title": { + "text": 'Crime and justice', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Topic' } }, @@ -17,10 +19,12 @@ <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>' }, { - "url": '#0', - "title": 'Disability and crime', + "title": { + "text": 'Disability and crime', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Dataset' }, "date": { @@ -33,10 +37,12 @@ "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>' }, { - "url": '#0', - "title": 'Disability and crime, UK: 2019 (Latest release)', + "title": { + "text": 'Disability and crime, UK: 2019 (Latest release)', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'Statistical bulletin' }, "date": { @@ -49,10 +55,12 @@ "description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>' }, { - "url": '#0', - "title": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016', + "title": { + "text": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016', + "url": '#0' + }, "metadata": { - "type": { + "object": { "text": 'User requested data', "ref": 'Ref 008052' }, diff --git a/src/components/download-resources/download-resources.spec.js b/src/components/download-resources/download-resources.spec.js index fd88dd196b..c01d0c8ed3 100644 --- a/src/components/download-resources/download-resources.spec.js +++ b/src/components/download-resources/download-resources.spec.js @@ -147,8 +147,10 @@ const EXAMPLE_PAGE = ` 'data-filter': 'general-public booklet', 'data-sort-index': '1', }, - url: '/example-booklet-1', - title: 'Example booklet 1', + title: { + url: '/example-booklet-1', + text: 'Example booklet 1', + }, description: 'The first example booklet.', }, { @@ -157,8 +159,10 @@ const EXAMPLE_PAGE = ` 'data-filter': 'general-public booklet logo', 'data-sort-index': '2', }, - url: '/example-booklet-2', - title: 'Example booklet 2 with logo', + title: { + url: '/example-booklet-2', + text: 'Example booklet 2 with logo', + }, description: 'The second example booklet with a logo.', }, { @@ -167,8 +171,10 @@ const EXAMPLE_PAGE = ` 'data-filter': 'logo', 'data-sort-index': '3', }, - url: '/example-logo', - title: 'Example logo', + title: { + url: '/example-logo', + text: 'Example logo', + }, description: 'An example logo.', }, ], diff --git a/src/components/external-link/_macro-options.md b/src/components/external-link/_macro-options.md index 6c80a16f43..49af1cce70 100644 --- a/src/components/external-link/_macro-options.md +++ b/src/components/external-link/_macro-options.md @@ -1,6 +1,6 @@ | Name | Type | Required | Description | | -------------------- | ------ | -------- | -------------------------------------------------------------------------------------------------- | | url | string | true | The URL for the `href` attribute of the external link | -| linkText | string | true | Text for the external link | +| text | string | true | Text for the external link | | classes | string | false | Classes to apply to the link | | newWindowDescription | string | false | Use to set context after the `linkText` label for screen readers. Defaults to “opens in a new tab” | diff --git a/src/components/external-link/_macro.njk b/src/components/external-link/_macro.njk index f1318d76ba..73e5f14a21 100644 --- a/src/components/external-link/_macro.njk +++ b/src/components/external-link/_macro.njk @@ -2,7 +2,7 @@ {% macro onsExternalLink(params) %} <a href="{{ params.url }}" class="ons-external-link{{ ' ' + params.classes if params.classes else '' }}" target="_blank" rel="noopener"> - <span class="ons-external-link__text"> {{- params.linkText | safe -}} </span + <span class="ons-external-link__text"> {{- params.text | safe -}} </span ><span class="ons-external-link__icon"> {{- onsIcon({"iconType": 'external-link'}) -}} </span ><span class="ons-external-link__new-window-description ons-u-vh" >({{- params.newWindowDescription | default("opens in a new tab") -}})</span diff --git a/src/components/external-link/_macro.spec.js b/src/components/external-link/_macro.spec.js index 2e75b33d15..547e88d9a7 100644 --- a/src/components/external-link/_macro.spec.js +++ b/src/components/external-link/_macro.spec.js @@ -7,7 +7,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_EXTERNAL_LINK = { url: 'http://example.com', - linkText: 'Example link', + text: 'Example link', }; describe('macro: external-link', () => { diff --git a/src/components/external-link/example-external-link.njk b/src/components/external-link/example-external-link.njk index 2e67a4836d..401acf621d 100644 --- a/src/components/external-link/example-external-link.njk +++ b/src/components/external-link/example-external-link.njk @@ -5,7 +5,7 @@ {{ onsExternalLink({ "url": "#0", - "linkText": "link to an external website" + "text": "link to an external website" }) }} </p> diff --git a/src/components/feedback/_macro-options.md b/src/components/feedback/_macro-options.md index b91b5019ee..5e5e0587e2 100644 --- a/src/components/feedback/_macro-options.md +++ b/src/components/feedback/_macro-options.md @@ -6,5 +6,5 @@ | headingLevel | int | false | Number used to determine the heading level to ensure it has the correct semantic order on the page. Defaults to `2` | | headingClasses | string | false | Classes to be applied to the heading element | | content | string | true | The text content for the body of the feedback call to action | -| url | string | true | The URL of the feedback form | +| linkUrl | string | true | The URL of the feedback form | | linkText | string | true | The text for the feedback call to action link | diff --git a/src/components/feedback/_macro.njk b/src/components/feedback/_macro.njk index 1f65163caa..fb61ecd513 100644 --- a/src/components/feedback/_macro.njk +++ b/src/components/feedback/_macro.njk @@ -7,6 +7,6 @@ {{ params.heading }} {{ closingHeadingTag | safe }} <p class="ons-feedback__content">{{- params.content | safe -}}</p> - <a href="{{ params.url }}" class="ons-feedback__link">{{- params.linkText -}}</a> + <a href="{{ params.linkUrl }}" class="ons-feedback__link">{{- params.linkText -}}</a> </div> {% endmacro %} diff --git a/src/components/feedback/_macro.spec.js b/src/components/feedback/_macro.spec.js index e2c7345ada..9fd087c444 100644 --- a/src/components/feedback/_macro.spec.js +++ b/src/components/feedback/_macro.spec.js @@ -8,7 +8,7 @@ import { renderComponent } from '../../tests/helpers/rendering'; const EXAMPLE_FEEDBACK_MINIMAL = { heading: 'Feedback heading', content: 'Feedback content...', - url: 'http://example.com', + linkUrl: 'http://example.com', linkText: 'Feedback link text', }; @@ -19,7 +19,7 @@ const EXAMPLE_FEEDBACK_FULL = { headingLevel: 5, headingClasses: 'extra-heading-class another-extra-heading-class', content: 'Feedback content...', - url: 'http://example.com', + linkUrl: 'http://example.com', linkText: 'Feedback link text', }; @@ -92,7 +92,7 @@ describe('macro: feedback', () => { expect($('p').text().trim()).toBe('Feedback content...'); }); - it('has a link with the provided `url`', () => { + it('has a link with the provided `linkUrl`', () => { const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL)); expect($('.ons-feedback__link').attr('href')).toBe('http://example.com'); diff --git a/src/components/feedback/example-feedback-call-to-action.njk b/src/components/feedback/example-feedback-call-to-action.njk index da84e511a5..1b08e6fd85 100644 --- a/src/components/feedback/example-feedback-call-to-action.njk +++ b/src/components/feedback/example-feedback-call-to-action.njk @@ -6,7 +6,7 @@ "heading": "What do you think about this service?", "headingClasses": 'test', "content": "Your comments will help us make improvements", - "url": "#0", + "linkUrl": "#0", "linkText": "Give feedback" }) }} diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index d75e6309b9..ba9d0fcb06 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -30,11 +30,13 @@ vertical-align: middle; } - &__poweredBy-link { - &:focus { - .ons-icon--logo { - @extend %a-focus; - } + &__logo-container { + gap: 1rem; + + svg, + img { + max-height: 30px; + width: auto; } } diff --git a/src/components/footer/_macro-options.md b/src/components/footer/_macro-options.md index 505e4688b9..94878a1465 100644 --- a/src/components/footer/_macro-options.md +++ b/src/components/footer/_macro-options.md @@ -5,23 +5,23 @@ | cols | array`<FooterCol>` | false | An array of objects for each of the 3 allowed [footer columns](#footercol) | | rows | array`<FooterRow>` | false | An array for the first [footer row](#footerrow) | | legal | array`<LegalRow>` | false | An array of for the [row of legal links](#legalrow) | -| poweredBy | HTML | false | Any HTML to render an image for example embedded `<svg>` or `<img>` to override the default ONS logo | +| footerLogo | object`<FooterLogo>` | false | Settings for a [footer logo](#footerLogo) in the footer to override the default ONS logo. | | lang | string | false | Set the ISO language code for current page to display the correct language ONS logo. Defaults to “en”. | | newTabWarning | string | false | Leading line of text to warn users that all footer links will open a new tab | -| OGLLink | object`<OGLLink>` | false | An object containing settings for the [Open Government Licence content](#ogllink). Set to “true” to display the default values for English and Welsh | +| oglLink | object`<oglLink>` | false | An object containing settings for the [Open Government Licence content](#ogllink). Set to “true” to display the default values for English and Welsh | | copyrightDeclaration | object`<copyrightDeclaration>` | false | Settings for the [Copyright Declaration](#copyrightdeclaration) | | crest | boolean | false | Set to “true” display the UK Royal Coat or Arms in the footer | | wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px | | fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport | | attributes | object | false | HTML attributes (for example, data attributes) to add to the footer | -## OGLLink +## oglLink | Name | Type | Required | Description | | ---- | ------ | --------------------------- | ----------------------------------------------------- | | pre | string | true (unless `HTML` is set) | The text before the OGL link | | url | string | true (unless `HTML` is set) | The URL for the HTML `href` attribute of the OGL link | -| link | string | true (unless `HTML` is set) | The text label for the OGL link | +| text | string | true (unless `HTML` is set) | The text label for the OGL link | | post | string | true (unless `HTML` is set) | The text after the OGL link | | HTML | string | false | The alternative HTML for the OGL content | @@ -50,3 +50,26 @@ | Name | Type | Required | Description | | --------- | ----------------------------------------------------------- | -------- | --------------------------- | | itemsList | array`<ListItem>` [_(ref)_](/foundations/typography/#lists) | true | A list of links for the row | + +## FooterLogo + +| Name | Type | Required | Description | +| ------- | --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| classes | string | false | Classes to be added. | +| logos | Object`<Logos>` | false | Allows for up to two logos to be used in the footer. | +| display | string | false | Allowed values are 'split' or 'default'. The 'split' display positions the additional logo on the opposite side of the page, while the 'default' display places the logos next to each other. | + +## Logos + +| Name | Type | Required | Description | +| ------- | -------------- | -------- | --------------------------------- | +| classes | string | false | Classes to be added. | +| logo1 | object`<Logo>` | false | First Logo. Defaults to ONS logo. | +| logo2 | object`<Logo>` | false | Second Logo | + +## Logo + +| Name | Type | Required | Description | +| --------- | -------------- | -------- | --------------------------------------------------------------------------------------- | +| logoImage | HTML or string | false | Any HTML to render an image for example embedded `<svg>` or `<img>`. | +| logoUrl | string | false | Wraps the extra logo in a link. Set the URL for the HTML `href` attribute for the link. | diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk index 2bf35b4bf2..274a3cefb1 100644 --- a/src/components/footer/_macro.njk +++ b/src/components/footer/_macro.njk @@ -7,12 +7,12 @@ {% else %} {% set lang = 'en' %} {% endif %} - + {% set extraLogo = params.footerLogo.logos.logo2 %} {% set onsLogo %} {% if params.lang == 'cy' %} {{- onsIcon({ - "iconType": 'ons-logo-cy', + "iconType": 'ons-logo-stacked-cy' if extraLogo else 'ons-logo-cy', "altText": 'Swyddfa Ystadegau Gwladol', "altTextId": 'ons-logo-cy-footer-alt' }) @@ -20,7 +20,7 @@ {% else %} {{- onsIcon({ - "iconType": 'ons-logo-en', + "iconType": 'ons-logo-stacked-en' if extraLogo else 'ons-logo-en' , "altText": 'Office for National Statistics', "altTextId": 'ons-logo-en-footer-alt' }) @@ -69,7 +69,9 @@ data-analytics="footer" {% if params.attributes %}{% for attribute, value in (params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %} > - <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}"> + <div + class="ons-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}" + > <div class="ons-grid"> {% if params.newTabWarning %} <div class="ons-grid__col"> @@ -115,7 +117,7 @@ {% endif %} </div> - <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between"> + <div class="ons-grid{{ ' ons-grid-flex' if params.crest else "" }} ons-grid-flex--vertical-top ons-grid-flex--between"> <div class="ons-grid__col"> {% if params.legal %} <!-- Legal --> @@ -130,7 +132,7 @@ {% endfor %} {% endif %} - {% if params.OGLLink %} + {% if params.oglLink %} <!-- OGL --> <div class="ons-footer__license ons-u-mb-l"> {{- @@ -138,38 +140,59 @@ "iconType": 'ogl' }) -}} - {% if params.OGLLink.HTML %} - {{ params.OGLLink.HTML | safe }} - {% elif params.OGLLink %} + {% if params.oglLink.HTML %} + {{ params.oglLink.HTML | safe }} + {% elif params.oglLink %} {% from "components/external-link/_macro.njk" import onsExternalLink %} {% if params.lang == 'cy' %} - {{ params.OGLLink.pre | default('Mae’r holl gynnwys ar gael o dan y') }} + {{ params.oglLink.pre | default('Mae’r holl gynnwys ar gael o dan y') }} {{ onsExternalLink({ - "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'), - "linkText": params.OGLLink.link | default('Drwydded Llywodraeth Leol v3.0') + "url": params.oglLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'), + "text": params.oglLink.text | default('Drwydded Llywodraeth Leol v3.0') }) - }}{{ params.OGLLink.post | default(', oni bai y nodir fel arall') }} + }}{{ params.oglLink.post | default(', oni bai y nodir fel arall') }} {% else %} - {{ params.OGLLink.pre | default('All content is available under the') }} + {{ params.oglLink.pre | default('All content is available under the') }} {{ onsExternalLink({ - "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'), - "linkText": params.OGLLink.link | default('Open Government Licence v3.0') + "url": params.oglLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'), + "text": params.oglLink.text | default('Open Government Licence v3.0') }) - }}{{ params.OGLLink.post | default(', except where otherwise stated') }} + }}{{ params.oglLink.post | default(', except where otherwise stated') }} {% endif %} {% endif %} </div> {% endif %} - {% if not params.poweredBy %} - <a - class="ons-footer__poweredBy-link" - {% if lang == "cy" %}href="https://cy.ons.gov.uk/"{% else %}href="https://www.ons.gov.uk/"{% endif %} - > - <div class="ons-footer__poweredby-logo ons-u-mb-l">{{ onsLogo | safe }}</div> - </a> + + {% if not params.footerLogo.logos.logo1 %} + {% + set logo1 = { + 'logoUrl': 'https://cy.ons.gov.uk/' if lang == 'cy' else 'https://www.ons.gov.uk/', + 'logoImage': onsLogo | safe + } + %} + {% set logos = [logo1, params.footerLogo.logos.logo2] %} + {% else %} + {% set logos = [params.footerLogo.logos.logo1, params.footerLogo.logos.logo2] %} {% endif %} + + <div + class="ons-footer__logo-container ons-u-mb-l ons-grid-flex ons-grid-flex--vertical-top{{ ' ons-grid-flex--between' if params.footerLogo.display == 'split' else "" }}" + > + {% for logo in logos %} + {%- if logo.logoUrl -%} + <a + class="ons-footer__logo-link{{ ' ons-u-mr-s' if extraLogo and loop.index == 1 else "" }}" + href="{{ logo.logoUrl }}" + >{{ logo.logoImage | safe }}</a + > + {%- else -%} + + {{ logo.logoImage | safe }} + {% endif %} + {% endfor %} + </div> </div> {% if params.crest %} <!-- Crest --> @@ -182,13 +205,10 @@ </div> {% endif %} </div> - {% if params.poweredBy %} - {{ params.poweredBy | safe }} - {% endif %} {% if params.copyrightDeclaration %} <!-- Copyright --> {% set copyrightDeclaration = '© ' + params.copyrightDeclaration.copyright + '<br /> ' + params.copyrightDeclaration.text %} - <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between"> + <div class="ons-grid ons-grid-flex ons-grid-flex--between"> <div class="ons-grid__col"> <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p> </div> diff --git a/src/components/footer/_macro.spec.js b/src/components/footer/_macro.spec.js index d7da956cb9..fd054a535c 100644 --- a/src/components/footer/_macro.spec.js +++ b/src/components/footer/_macro.spec.js @@ -8,7 +8,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_OGL_LINK_PARAM = { pre: 'All content is available under the', - link: 'Open Government Licence v3.0', + text: 'Open Government Licence v3.0', url: 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', post: ', except where otherwise stated', }; @@ -125,7 +125,7 @@ describe('macro: footer', () => { describe('OGL link', () => { const params = { - OGLLink: EXAMPLE_OGL_LINK_PARAM, + oglLink: EXAMPLE_OGL_LINK_PARAM, }; it('passes jest-axe checks', async () => { @@ -147,8 +147,8 @@ describe('macro: footer', () => { it('renders raw HTML when `HTML` is provided', () => { const $ = cheerio.load( renderComponent('footer', { - OGLLink: { - ...params.OGLLink, + oglLink: { + ...params.oglLink, HTML: '<strong>Bold text.</strong>', }, }), @@ -167,7 +167,7 @@ describe('macro: footer', () => { expect(externalLinkSpy.occurrences).toContainEqual( expect.objectContaining({ url: 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', - linkText: 'Open Government Licence v3.0', + text: 'Open Government Licence v3.0', }), ); }); @@ -179,11 +179,11 @@ describe('macro: footer', () => { expect(licenseHtml).toContain(', except where otherwise stated'); }); - it('renders welsh `post` content when `lang:cy` provided and `OGLLink` is "true"', () => { + it('renders welsh `post` content when `lang:cy` provided and `oglLink` is "true"', () => { const $ = cheerio.load( renderComponent('footer', { lang: 'cy', - OGLLink: true, + oglLink: true, }), ); @@ -354,8 +354,8 @@ describe('macro: footer', () => { }); }); - describe('poweredBy logo', () => { - describe('default poweredBy logo', () => { + describe('Footer logo', () => { + describe('default footer logo', () => { describe.each([ [ 'the `lang` parameter is not provided', @@ -387,7 +387,7 @@ describe('macro: footer', () => { }); }); }); - describe('provided poweredBy logo', () => { + describe('provided footer logo', () => { describe.each([ [ 'the `lang` parameter is "cy"', @@ -415,54 +415,74 @@ describe('macro: footer', () => { it('has the Welsh lang link when the default Welsh lang ons icon is present', () => { const $ = cheerio.load(renderComponent('footer', { lang: 'cy' })); - expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://cy.ons.gov.uk/'); + expect($('.ons-footer__logo-link').attr('href')).toBe('https://cy.ons.gov.uk/'); }); it('has the English lang link when the default English lang ons icon is present', () => { const $ = cheerio.load(renderComponent('footer', { lang: 'en' })); - expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://www.ons.gov.uk/'); + expect($('.ons-footer__logo-link').attr('href')).toBe('https://www.ons.gov.uk/'); }); }); - describe('provided poweredBy logo', () => { + describe('provided footer logo', () => { describe.each([ [ - 'the `poweredBy` and `OGLLink` parameters are provided', + 'the `footerLogo` and `oglLink` parameters are provided', { - poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">', - OGLLink: EXAMPLE_OGL_LINK_PARAM, + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + }, + }, + oglLink: EXAMPLE_OGL_LINK_PARAM, }, ], [ - 'the `poweredBy` and `legal` parameters are provided', + 'the `footerLogo` and `legal` parameters are provided', { - poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">', + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + }, + }, legal: EXAMPLE_LEGAL_PARAM, }, ], [ - 'the `poweredBy` and `crest` parameters are provided', + 'the `footerLogo` and `crest` parameters are provided', { - poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">', + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + }, + }, crest: true, }, ], [ - 'the `poweredBy`, `legal` and `crest` parameters are provided', + 'the `footerLogo`, `legal` and `crest` parameters are provided', { - poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">', + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + }, + }, legal: EXAMPLE_LEGAL_PARAM, crest: true, }, ], [ - 'the `poweredBy` parameter is provided but the `legal` and `crest` parameters are not provided', + 'the `footerLogo` parameter is provided but the `legal` and `crest` parameters are not provided', { - poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">', + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + }, + }, }, ], - ])('where %s', (_, poweredByParams) => { + ])('where %s', (_, footerLogoParams) => { const params = { - ...poweredByParams, + ...footerLogoParams, }; it('passes jest-axe checks', async () => { @@ -478,6 +498,48 @@ describe('macro: footer', () => { expect($('.custom-logo').length).toBe(1); }); }); + + it('has the extra footer logo image and link', () => { + const $ = cheerio.load( + renderComponent('footer', { + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + logo2: { + logoUrl: '#0', + logoImage: '<img src="a-logo.svg">', + }, + }, + }, + legal: EXAMPLE_LEGAL_PARAM, + crest: true, + }), + ); + + expect($('.ons-footer__logo-link').attr('href')).toBe('#0'); + expect($('.ons-footer__logo-link > img').attr('src')).toBe('a-logo.svg'); + }); + + it('has the correct class applied for opposite display of logos', () => { + const $ = cheerio.load( + renderComponent('footer', { + footerLogo: { + logos: { + logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' }, + logo2: { + logoUrl: '#0', + logoImage: '<img src="a-logo.svg">', + }, + }, + display: 'split', + }, + legal: EXAMPLE_LEGAL_PARAM, + crest: true, + }), + ); + + expect($('.ons-footer__logo-container').attr('class')).toContain('ons-grid-flex--between'); + }); }); }); diff --git a/src/components/footer/example-footer-cymraeg.njk b/src/components/footer/example-footer-cymraeg.njk index 3afb669b1b..63694c4d85 100644 --- a/src/components/footer/example-footer-cymraeg.njk +++ b/src/components/footer/example-footer-cymraeg.njk @@ -50,6 +50,6 @@ ] } ], - "OGLLink": true + "oglLink": true }) }} diff --git a/src/components/footer/example-footer-transactional.njk b/src/components/footer/example-footer-transactional.njk index f3d901400a..1f4ac5c0ba 100644 --- a/src/components/footer/example-footer-transactional.njk +++ b/src/components/footer/example-footer-transactional.njk @@ -58,6 +58,6 @@ ] } ], - "OGLLink": true + "oglLink": true }) }} diff --git a/src/components/footer/example-footer-warning.njk b/src/components/footer/example-footer-warning.njk index dea0694938..fd1d9aabe2 100644 --- a/src/components/footer/example-footer-warning.njk +++ b/src/components/footer/example-footer-warning.njk @@ -28,6 +28,6 @@ ] } ], - "OGLLink": true + "oglLink": true }) }} diff --git a/src/components/footer/example-footer-with-alternative-organisation.njk b/src/components/footer/example-footer-with-alternative-organisation.njk index a6a51da7f4..a4fa552447 100644 --- a/src/components/footer/example-footer-with-alternative-organisation.njk +++ b/src/components/footer/example-footer-with-alternative-organisation.njk @@ -5,99 +5,104 @@ {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ - "poweredBy": '<svg class="ons-icon--logo ons-icon--logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54" aria-labelledby="poweredby-alt"> - <title id="poweredby-alt">NISRA - Northern Ireland Statistics and Research Agency - - - - - - - - - - - - - ', + "footerLogo": { + "logos": { + "logo1": { + "logoImage": '' + } + } + }, "legal": [ { "itemsList": [ @@ -120,6 +125,6 @@ ] } ], - "OGLLink": true + "oglLink": true }) }} diff --git a/src/components/footer/example-footer-with-coat-of-arms.njk b/src/components/footer/example-footer-with-coat-of-arms.njk index 64059eafdf..30592fe959 100644 --- a/src/components/footer/example-footer-with-coat-of-arms.njk +++ b/src/components/footer/example-footer-with-coat-of-arms.njk @@ -28,6 +28,6 @@ ] } ], - "OGLLink": true + "oglLink": true }) }} diff --git a/src/components/footer/example-footer-with-copyright.njk b/src/components/footer/example-footer-with-copyright.njk index 6325dad7fb..53623405fe 100644 --- a/src/components/footer/example-footer-with-copyright.njk +++ b/src/components/footer/example-footer-with-copyright.njk @@ -27,7 +27,7 @@ ] } ], - "OGLLink": true, + "oglLink": true, "copyrightDeclaration": { "copyright": 'Crown copyright and database rights 2020 OS 100019153.', "text": 'Use of address data is subject to the terms and conditions.' diff --git a/src/components/footer/example-footer-with-multiple-logos-and-split-display.njk b/src/components/footer/example-footer-with-multiple-logos-and-split-display.njk new file mode 100644 index 0000000000..ccb2aec0a7 --- /dev/null +++ b/src/components/footer/example-footer-with-multiple-logos-and-split-display.njk @@ -0,0 +1,173 @@ +--- +'fullWidth': true +--- + +{% from "components/footer/_macro.njk" import onsFooter %} +{{ + onsFooter({ + "cols": [ + { + "title": 'Business surveys', + "itemsList": [ + { + "text": 'About our surveys', + "url": '#0' + }, + { + "text": 'Lists of all surveys', + "url": '#0' + }, + { + "text": 'Respondent Charter', + "url": '#0' + } + ] + }, + { + "title": 'About ONS', + "itemsList": [ + { + "text": 'What we do', + "url": '#0' + }, + { + "text": 'Transparency and governance', + "url": '#0' + }, + { + "text": 'Contact us', + "url": '#0' + } + ] + }, + { + "title": 'Statistics', + "itemsList": [ + { + "text": 'UK Statistics Authority', + "external": true, + "url": '#0' + }, + { + "text": 'Release calendar', + "url": '#0' + }, + { + "text": 'News', + "url": '#0' + } + ] + } + ], + "legal": [ + { + "itemsList": [ + { + "text": 'Cookies', + "url": '#0' + }, + { + "text": 'Accessibility statement', + "url": '#0' + }, + { + "text": 'Privacy and data protection', + "url": '#0' + }, + { + "text": 'Terms and conditions', + "url": '#0' + } + ] + } + ], + "footerLogo": { + "logos": { + "logo2": { + "logoImage": '', + "logoUrl": "#0" + } + }, + "display": "split" + }, + "oglLink": true + }) +}} diff --git a/src/components/footer/example-footer-with-multiple-logos.njk b/src/components/footer/example-footer-with-multiple-logos.njk new file mode 100644 index 0000000000..f5424ed859 --- /dev/null +++ b/src/components/footer/example-footer-with-multiple-logos.njk @@ -0,0 +1,172 @@ +--- +'fullWidth': true +--- + +{% from "components/footer/_macro.njk" import onsFooter %} +{{ + onsFooter({ + "cols": [ + { + "title": 'Business surveys', + "itemsList": [ + { + "text": 'About our surveys', + "url": '#0' + }, + { + "text": 'Lists of all surveys', + "url": '#0' + }, + { + "text": 'Respondent Charter', + "url": '#0' + } + ] + }, + { + "title": 'About ONS', + "itemsList": [ + { + "text": 'What we do', + "url": '#0' + }, + { + "text": 'Transparency and governance', + "url": '#0' + }, + { + "text": 'Contact us', + "url": '#0' + } + ] + }, + { + "title": 'Statistics', + "itemsList": [ + { + "text": 'UK Statistics Authority', + "external": true, + "url": '#0' + }, + { + "text": 'Release calendar', + "url": '#0' + }, + { + "text": 'News', + "url": '#0' + } + ] + } + ], + "legal": [ + { + "itemsList": [ + { + "text": 'Cookies', + "url": '#0' + }, + { + "text": 'Accessibility statement', + "url": '#0' + }, + { + "text": 'Privacy and data protection', + "url": '#0' + }, + { + "text": 'Terms and conditions', + "url": '#0' + } + ] + } + ], + "footerLogo": { + "logos": { + "logo2": { + "logoImage": '', + "logoUrl": "#" + } + } + }, + "oglLink": true + }) +}} diff --git a/src/components/footer/example-footer.njk b/src/components/footer/example-footer.njk index 0abb6ecd83..30f8bde531 100644 --- a/src/components/footer/example-footer.njk +++ b/src/components/footer/example-footer.njk @@ -81,6 +81,6 @@ ] } ], - "OGLLink": true + "oglLink": true }) }} diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index 772598d8a8..aee369ce31 100644 --- a/src/components/header/_macro-options.md +++ b/src/components/header/_macro-options.md @@ -20,35 +20,35 @@ ## MastheadLogo -| Name | Type | Required | Description | -| ------------- | ----------------------- | -------- | ------------------------------------------------------------------------------ | -| classes | string | false | Classes to be added. Helpful to add a margin utility class to control spacing. | -| large | HTML | false | Any HTML to render an image for example embedded `` or `` | -| small | HTML | false | Optionally provide a version of the logo more suited to mobile viewports | -| multipleLogos | object`` | false | Allows for up to three logos to be used in the masthead. | +| Name | Type | Required | Description | +| ------------- | ----------------------- | -------- | ------------------------------------------------------------------------ | +| classes | string | false | Classes to be added to the masthead logo | +| large | HTML | false | Any HTML to render an image for example embedded `` or `` | +| small | HTML | false | Optionally provide a version of the logo more suited to mobile viewports | +| multipleLogos | object`` | false | Allows for up to three logos to be used in the masthead | ## MultipleLogos -| Name | Type | Required | Description | -| ----- | -------------------- | -------- | ----------- | -| logo1 | object`` | true | First Logo | -| logo2 | object`` | false | Second Logo | -| logo3 | object`` | false | Third Logo | +| Name | Type | Required | Description | +| ----- | -------------- | -------- | ----------- | +| logo1 | object`` | true | First Logo | +| logo2 | object`` | false | Second Logo | +| logo3 | object`` | false | Third Logo | -## LogoObject +## Logo -| Name | Type | Required | Description | -| --------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------- | -| logoImage | HTML or string | false | Any HTML to render an image for example embedded `` or ``. Use 'ONS Logo' for the default ONS icon. | -| logoURL | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. | +| Name | Type | Required | Description | +| ----- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------- | +| image | HTML or string | false | Any HTML to render an image for example embedded `` or ``. Use 'ONS Logo' for the default ONS icon. | +| url | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. | ## TitleLogo -| Name | Type | Required | Description | -| ------- | ------ | -------- | ------------------------------------------------------------------------------ | -| classes | string | false | Classes to be added. Helpful to add a margin utility class to control spacing. | -| large | HTML | true | Any HTML to render an image for example embedded `` or `` | -| small | HTML | false | Optionally provide a version of the logo more suited to mobile viewports | +| Name | Type | Required | Description | +| ------- | ------ | -------- | ------------------------------------------------------------------------ | +| classes | string | false | Classes to be added to the masthead logo | +| large | HTML | true | Any HTML to render an image for example embedded `` or `` | +| small | HTML | false | Optionally provide a version of the logo more suited to mobile viewports | ## ServiceLinks @@ -72,7 +72,7 @@ | Name | Type | Required | Description | | ---------- | ------- | -------- | --------------------------------------------------------------------------------------------------- | | url | string | true | URL to change the application language | -| ISOCode | string | true | The ISO language code for the language | +| isoCode | string | true | The ISO language code for the language | | text | string | true | The name of the language to display | | abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports | | current | boolean | true | The current selected language | @@ -92,10 +92,10 @@ ## ToggleButton -| Name | Type | Required | Description | -| --------- | ------ | -------- | ---------------------------------------------------------------------------- | -| text | string | false | The text for the toggle button label. Defaults to “Menu”. | -| ariaLabel | string | false | The `aria-label` attribute for the toggle button. Defaults to “Toggle menu”. | +| Name | Type | Required | Description | +| --------- | ------ | -------- | --------------------------------------------------------------------------- | +| text | string | false | The text for the toggle button label. Defaults to “Menu” | +| ariaLabel | string | false | The `aria-label` attribute for the toggle button. Defaults to “Toggle menu” | ## Item diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk index 0fec4d6e79..d3f904396e 100644 --- a/src/components/header/_macro.njk +++ b/src/components/header/_macro.njk @@ -6,11 +6,11 @@ {% set titleTag = "h1" if params.titleAsH1 else "div" %} {% set openingTag = "<" + titleTag %} {% set closingTag = "" %} - {% set currentLanguageISOCode = "en" %} + {% set currentLanguageIsoCode = "en" %} {% if params.language and params.language.languages %} {% set currentLanguage = params.language.languages | selectattr("current") | first %} - {% set currentLanguageISOCode = currentLanguage.ISOCode %} + {% set currentLanguageIsoCode = currentLanguage.isoCode %} {% endif %}
    {{ onsBrowserBanner({ - "lang": currentLanguageISOCode, + "lang": currentLanguageIsoCode, "wide": params.wide, "fullWidth": params.fullWidth }) @@ -39,7 +39,7 @@
    {%- if not params.mastheadLogo.multipleLogos -%} @@ -51,7 +51,7 @@ {% else %} {{- onsIcon({ - "iconType": 'ons-logo-' + currentLanguageISOCode, + "iconType": 'ons-logo-' + currentLanguageIsoCode, "altText": 'Office for National Statistics homepage' }) -}} @@ -65,7 +65,7 @@ {% else %} {{- onsIcon({ - "iconType": 'ons-logo-stacked-' + currentLanguageISOCode, + "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode, "altText": 'Office for National Statistics logo' }) -}} @@ -83,19 +83,19 @@ {% set logos = [params.mastheadLogo.multipleLogos.logo1, params.mastheadLogo.multipleLogos.logo2, params.mastheadLogo.multipleLogos.logo3] %} {% for logo in logos %} {% set mastheadLogo %} - {% if logo.logoImage != "ONS Logo" %} - {{ logo.logoImage | safe }} + {% if logo.image != "ONS Logo" %} + {{ logo.image | safe }} {% else %} {{- onsIcon({ - "iconType": 'ons-logo-stacked-' + currentLanguageISOCode, + "iconType": 'ons-logo-stacked-' + currentLanguageIsoCode, "altText": 'Office for National Statistics logo' }) -}} {% endif %} {% endset %} - {% if logo.logoURL %} - {{ mastheadLogo | safe }} + {% if logo.url %} + {{ mastheadLogo | safe }} {% else %} {{ mastheadLogo | safe }} {% endif %} @@ -221,7 +221,7 @@
    {% if params.titleLogo.large %} diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js index c3f90e42d9..a31fdc18ff 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -14,7 +14,7 @@ import { EXAMPLE_HEADER_LANGUAGE_CONFIG, EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, -} from './_test_examples'; +} from './_test-examples'; describe('FOR: Header', () => { describe('GIVEN: Params: none', () => { @@ -140,7 +140,7 @@ describe('FOR: Header', () => { }); }); describe('GIVEN: Params: multipleLogos', () => { - describe('WHEN: logoImage parameter is set to "ONS Logo"', () => { + describe('WHEN: image parameter is set to "ONS Logo"', () => { const faker = templateFaker(); const iconsSpy = faker.spy('icon'); @@ -149,7 +149,7 @@ describe('FOR: Header', () => { mastheadLogo: { multipleLogos: { logo1: { - logoImage: 'ONS Logo', + image: 'ONS Logo', }, }, }, @@ -158,15 +158,15 @@ describe('FOR: Header', () => { expect(iconsSpy.occurrences[0].iconType).toBe('ons-logo-stacked-en'); }); }); - describe('WHEN: logoURL parameter is set ', () => { + describe('WHEN: url parameter is set ', () => { const $ = cheerio.load( renderComponent('header', { ...EXAMPLE_HEADER_BASIC, mastheadLogo: { multipleLogos: { logo1: { - logoImage: '', - logoURL: '#0', + image: '', + url: '#0', }, }, }, @@ -183,13 +183,13 @@ describe('FOR: Header', () => { mastheadLogo: { multipleLogos: { logo1: { - logoImage: '', + image: '', }, logo2: { - logoImage: '', + image: '', }, logo3: { - logoImage: '', + image: '', }, }, }, @@ -209,7 +209,7 @@ describe('FOR: Header', () => { large: '', multipleLogos: { logo1: { - logoImage: '', + image: '', }, }, }, diff --git a/src/components/header/_test_examples.js b/src/components/header/_test-examples.js similarity index 85% rename from src/components/header/_test_examples.js rename to src/components/header/_test-examples.js index 988bd6f892..2668867a75 100644 --- a/src/components/header/_test_examples.js +++ b/src/components/header/_test-examples.js @@ -1,17 +1,8 @@ -export { - EXAMPLE_HEADER_BASIC, - EXAMPLE_SERVICE_LINKS_CONFIG, - EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE, - EXAMPLE_HEADER_SERVICE_LINKS_SINGLE, - EXAMPLE_HEADER_LANGUAGE_CONFIG, - EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG, - EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, -}; - -const EXAMPLE_HEADER_BASIC = { +export const EXAMPLE_HEADER_BASIC = { title: 'Header title', }; -const EXAMPLE_SERVICE_LINKS_CONFIG = { + +export const EXAMPLE_SERVICE_LINKS_CONFIG = { id: 'service-links', ariaLabel: 'Services menu', classes: 'custom-class', @@ -20,7 +11,8 @@ const EXAMPLE_SERVICE_LINKS_CONFIG = { ariaLabel: 'Toggle services menu', }, }; -const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = { + +export const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = { ...EXAMPLE_HEADER_BASIC, serviceLinks: { ...EXAMPLE_SERVICE_LINKS_CONFIG, @@ -40,7 +32,8 @@ const EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE = { ], }, }; -const EXAMPLE_HEADER_SERVICE_LINKS_SINGLE = { + +export const EXAMPLE_HEADER_SERVICE_LINKS_SINGLE = { ...EXAMPLE_HEADER_BASIC, serviceLinks: { ...EXAMPLE_SERVICE_LINKS_CONFIG, @@ -52,7 +45,8 @@ const EXAMPLE_HEADER_SERVICE_LINKS_SINGLE = { ], }, }; -const EXAMPLE_HEADER_LANGUAGE_CONFIG = { + +export const EXAMPLE_HEADER_LANGUAGE_CONFIG = { language: { languages: [ { @@ -74,7 +68,8 @@ const EXAMPLE_HEADER_LANGUAGE_CONFIG = { ], }, }; -const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { + +export const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { navigation: { id: 'main-nav', ariaLabel: 'Main menu', @@ -117,7 +112,8 @@ const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { }, }, }; -const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = { + +export const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = { navigation: { id: 'main-nav', ariaLabel: 'Main menu', diff --git a/src/components/header/example-header-external-for-surveys.njk b/src/components/header/example-header-external-for-surveys.njk index 2769d6a59a..f79fc6c70d 100644 --- a/src/components/header/example-header-external-for-surveys.njk +++ b/src/components/header/example-header-external-for-surveys.njk @@ -18,13 +18,13 @@ "languages": [ { "url": '#0', - "ISOCode": 'en', + "isoCode": 'en', "text": 'English', "current": true }, { "url": '#0', - "ISOCode": 'cy', + "isoCode": 'cy', "text": 'Cymraeg', "current": false } diff --git a/src/components/header/example-header-external-welsh.njk b/src/components/header/example-header-external-welsh.njk index 2fecc27804..d7db5d8dd6 100644 --- a/src/components/header/example-header-external-welsh.njk +++ b/src/components/header/example-header-external-welsh.njk @@ -13,13 +13,13 @@ fullWidth: true "languages": [ { "url": '#0', - "ISOCode": 'en', + "isoCode": 'en', "text": 'English', "current": false }, { "url": '#0', - "ISOCode": 'cy', + "isoCode": 'cy', "text": 'Cymraeg', "current": true } diff --git a/src/components/header/example-header-external-with-sub-navigation-removed.njk b/src/components/header/example-header-external-with-sub-navigation-removed.njk index c443dcaaf3..9020f8ffa5 100644 --- a/src/components/header/example-header-external-with-sub-navigation-removed.njk +++ b/src/components/header/example-header-external-with-sub-navigation-removed.njk @@ -42,7 +42,7 @@ }, "subNavigation": { "id": 'sub-nav', - "overviewURL": '#design-system', + "overviewUrl": '#design-system', "overviewText": 'Overview', "ariaLabel": 'Section menu', "currentPath": '#access-codes', diff --git a/src/components/header/example-header-external-with-sub-navigation.njk b/src/components/header/example-header-external-with-sub-navigation.njk index 0062011437..f0c7ade676 100644 --- a/src/components/header/example-header-external-with-sub-navigation.njk +++ b/src/components/header/example-header-external-with-sub-navigation.njk @@ -42,7 +42,7 @@ }, "subNavigation": { "id": 'sub-nav', - "overviewURL": '#design-system', + "overviewUrl": '#design-system', "overviewText": 'Overview', "ariaLabel": 'Section menu', "currentPath": '#access-codes', diff --git a/src/components/header/example-header-multiple-logos.njk b/src/components/header/example-header-multiple-logos.njk index 19404632cc..dd29470895 100644 --- a/src/components/header/example-header-multiple-logos.njk +++ b/src/components/header/example-header-multiple-logos.njk @@ -10,14 +10,14 @@ "mastheadLogo": { "multipleLogos":{ "logo1": { - "logoImage": "ONS Logo", - "logoURL": "https://www.ons.gov.uk/" + "image": "ONS Logo", + "url": "https://www.ons.gov.uk/" }, "logo2": { - "logoImage": 'Northern Ireland Department of Finance logo' + "image": 'Northern Ireland Department of Finance logo' }, "logo3": { - "logoImage": ' + "image": ' Department for Business and Trade logo diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index 4231ef9ba8..d5c86de075 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -21,7 +21,7 @@ {% if params.button %} {% from "components/button/_macro.njk" import onsButton %} - {% set btnClasses = params.button.classes if params.button.classes %} + {% set btnClasses = params.button.classes if params.button.classes else '' %} {% if params.variants and 'dark' in params.variants %} {% set btnClasses = btnClasses + ' ons-btn--ghost' %} {% endif %} diff --git a/src/components/image/_macro-options.md b/src/components/image/_macro-options.md index 4c70347123..72d39b860e 100644 --- a/src/components/image/_macro-options.md +++ b/src/components/image/_macro-options.md @@ -1,6 +1,6 @@ | Name | Type | Required | Description | | ------- | --------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| url | string | true (unless `image` is set) | The complete source path of the image including filename and extension | +| src | string | true (unless `image` is set) | The complete source path of the image including filename and extension | | image | `Object` | true (unless `url` is set) | Settings for the path and filename attributes for the [image](#image) | | alt | string | false | The HTML `alt` tag used to explain the appearance and function of the image. Not required if the image is only decorative. | | caption | string | false | A short visible caption describing the contents of the image | diff --git a/src/components/image/_macro.njk b/src/components/image/_macro.njk index fa8a835e90..7bc5e78478 100644 --- a/src/components/image/_macro.njk +++ b/src/components/image/_macro.njk @@ -7,7 +7,7 @@ alt="{{ params.alt if params.alt }}" /> {% else %} - {{ params.alt }} + {{ params.alt }} {% endif %} {% if params.caption %} diff --git a/src/components/image/_macro.spec.js b/src/components/image/_macro.spec.js index 920313a783..8956133f85 100644 --- a/src/components/image/_macro.spec.js +++ b/src/components/image/_macro.spec.js @@ -5,8 +5,8 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -const EXAMPLE_IMAGE_URL_MINIMAL = { - url: 'example.png', +const EXAMPLE_IMAGE_SRC_URL_MINIMAL = { + src: 'example.png', }; const EXAMPLE_IMAGE_IMAGE_MINIMAL = { @@ -18,7 +18,7 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = { describe('macro: image', () => { it('outputs a `figure` element', () => { - const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL)); + const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_SRC_URL_MINIMAL)); expect($('.ons-image')[0].tagName).toBe('figure'); }); @@ -26,7 +26,7 @@ describe('macro: image', () => { it('outputs a `figurecaption` element when `caption` is provided', () => { const $ = cheerio.load( renderComponent('image', { - ...EXAMPLE_IMAGE_URL_MINIMAL, + ...EXAMPLE_IMAGE_SRC_URL_MINIMAL, caption: 'Example image caption', }), ); @@ -37,7 +37,7 @@ describe('macro: image', () => { it('outputs a `figurecaption` element with provided `caption` text', () => { const $ = cheerio.load( renderComponent('image', { - ...EXAMPLE_IMAGE_URL_MINIMAL, + ...EXAMPLE_IMAGE_SRC_URL_MINIMAL, caption: 'Example image caption', }), ); @@ -45,22 +45,22 @@ describe('macro: image', () => { expect($('.ons-image__caption').text().trim()).toBe('Example image caption'); }); - describe('mode: url', () => { + describe('mode: src', () => { it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL)); + const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_SRC_URL_MINIMAL)); const results = await axe($.html()); expect(results).toHaveNoViolations(); }); it('outputs an `img` element', () => { - const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL)); + const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_SRC_URL_MINIMAL)); expect($('.ons-image__img')[0].tagName).toBe('img'); }); it('outputs an `img` element with the expected `src`', () => { - const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL)); + const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_SRC_URL_MINIMAL)); expect($('.ons-image__img').attr('src')).toBe('example.png'); }); @@ -68,7 +68,7 @@ describe('macro: image', () => { it('outputs an `img` element with the expected alt text', () => { const $ = cheerio.load( renderComponent('image', { - ...EXAMPLE_IMAGE_URL_MINIMAL, + ...EXAMPLE_IMAGE_SRC_URL_MINIMAL, alt: 'Example alt text', }), ); diff --git a/src/components/image/example-image-for-regular-screens.njk b/src/components/image/example-image-for-regular-screens.njk index 3fc8484b45..25ae523ff0 100644 --- a/src/components/image/example-image-for-regular-screens.njk +++ b/src/components/image/example-image-for-regular-screens.njk @@ -1,7 +1,7 @@ {% from "components/image/_macro.njk" import onsImage %} {{ onsImage({ - "url": '/img/small/woman-in-purple-dress-shirt.jpg', + "src": '/img/small/woman-in-purple-dress-shirt.jpg', "alt": 'Woman in a purple dress shirt using a laptop', "caption": 'Image 1 - Woman in a purple dress shirt using a laptop' }) diff --git a/src/components/input/_macro.njk b/src/components/input/_macro.njk index 9e49ee966b..80d3e773dc 100644 --- a/src/components/input/_macro.njk +++ b/src/components/input/_macro.njk @@ -103,13 +103,13 @@ aria-label="{{ abbr.title }}" role="figure" {% endif %} {% if abbr.title %}title="{{ abbr.title }}"{% endif %} - >{{ abbr.text }} + >{{- abbr.text -}} {{ endTag | safe }} {% endif %} {% elif params.searchButton %} - + {% if params.accessiblePlaceholder %} {{ onsLabel({ @@ -150,7 +150,7 @@ {% else %} {% if params.accessiblePlaceholder %} - + {{ onsLabel({ "for": params.id, diff --git a/src/components/label/_label.scss b/src/components/label/_label.scss index 64586ba3ea..d2116cba2c 100644 --- a/src/components/label/_label.scss +++ b/src/components/label/_label.scss @@ -18,7 +18,7 @@ &--placeholder { font-weight: $font-weight-regular; - color: var(--ons-color-text-placeholder); + color: var(--ons-color-placeholder); left: 10px; position: absolute; top: 6px; diff --git a/src/components/language-selector/_macro-options.md b/src/components/language-selector/_macro-options.md index b2c9653010..a9f34e5ea8 100644 --- a/src/components/language-selector/_macro-options.md +++ b/src/components/language-selector/_macro-options.md @@ -7,7 +7,7 @@ | Name | Type | Required | Description | | ---------- | ------- | -------- | --------------------------------------------------------------------------------------------------- | | url | string | true | URL to change the application language | -| ISOCode | string | true | The ISO language code for the language | +| isoCode | string | true | The ISO language code for the language | | text | string | true | The name of the language to display | | abbrText | string | false | Abbreviated version of the language text can be provided. This will be displayed on small viewports | | current | boolean | true | The current selected language | diff --git a/src/components/language-selector/_macro.njk b/src/components/language-selector/_macro.njk index d314ffec1e..39db30f9ce 100644 --- a/src/components/language-selector/_macro.njk +++ b/src/components/language-selector/_macro.njk @@ -7,7 +7,7 @@
  • {% if language.abbrText %} {{ language.abbrText }}{{- language.text -}} diff --git a/src/components/language-selector/_macro.spec.js b/src/components/language-selector/_macro.spec.js index 322c05ee3b..99d201fb9a 100644 --- a/src/components/language-selector/_macro.spec.js +++ b/src/components/language-selector/_macro.spec.js @@ -9,14 +9,14 @@ const EXAMPLE_WITH_TWO_LANGUAGES = { languages: [ { url: '/english', - ISOCode: 'en', + isoCode: 'en', text: 'English', abbrText: 'EN', current: true, }, { url: '/cymraeg', - ISOCode: 'cy', + isoCode: 'cy', text: 'Cymraeg', abbrText: 'CY', current: false, @@ -32,19 +32,19 @@ const EXAMPLE_WITH_THREE_LANGUAGES = { languages: [ { url: '/english', - ISOCode: 'en', + isoCode: 'en', text: 'English', current: false, }, { url: '/cymraeg', - ISOCode: 'cy', + isoCode: 'cy', text: 'Cymraeg', current: true, }, { url: '/polski', - ISOCode: 'pl', + isoCode: 'pl', text: 'Polski', current: false, }, diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss index 2b2ebe08fb..34587c838c 100644 --- a/src/components/list/_list.scss +++ b/src/components/list/_list.scss @@ -108,6 +108,14 @@ @extend .ons-u-pb-s; @extend .ons-u-m-no; } + .ons-list__prefix, + .ons-list__suffix { + @extend .ons-u-m-no; + &--icon-check .ons-icon { + fill: var(--ons-color-leaf-green) !important; + @extend .ons-u-mr-s; + } + } } } diff --git a/src/components/list/_macro-options.md b/src/components/list/_macro-options.md index 685284e29d..0377de1937 100644 --- a/src/components/list/_macro-options.md +++ b/src/components/list/_macro-options.md @@ -27,5 +27,5 @@ | suffix | string | false | Will suffix the list item with the parameter’s value | | current | boolean | false | Set to “true” to indicate the current page in a list of content navigational links | | iconType | string | false | Adds an icon to the individual list item when set to the name of one of the [available icons](/foundations/icons#a-to-z) | -| attributes | object | false | HTML attributes (for example, data attributes) to add to list item link | +| attributes | object | false | HTML attributes (for example, data attributes) to add to list item | | itemsList | `Array` | false | Settings for each [list item](#listitem) | diff --git a/src/components/list/_macro.njk b/src/components/list/_macro.njk index 6f4f771255..5a09b0a824 100644 --- a/src/components/list/_macro.njk +++ b/src/components/list/_macro.njk @@ -20,11 +20,19 @@ {% else %} {% set listEl = 'ul' %} {% endif %} + + {% if listLength < 2 and not params.attributes %} + {% set attributes = [params.itemsList[0].attributes] %} + {% elif listLength < 2 and params.attributes and params.itemsList[0].attributes and listEl == 'p' %} + {% set attributes = [params.attributes, params.itemsList[0].attributes] %} + {% else %} + {% set attributes = [params.attributes] %} + {% endif %} {% set openingTag = "<" + listEl %} {% set closingTag = "" %} {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %} - class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}> + class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attributeList in attributes %}{% for attribute, value in (attributeList.items() if attributeList is mapping and attributeList.items else attributeList) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endfor %}{% endif %}> {%- for item in params.itemsList -%} {% set sublistClasses = item.listClasses if item.listClasses %} {% @@ -48,7 +56,10 @@ {% endif %} {%- if item.prefix or (params.iconPosition == 'before') -%} - + {%- if item.prefix -%} {{- item.prefix -}}. {% elif params.iconPosition == 'before' %} @@ -68,14 +79,14 @@ {{ onsExternalLink({ "url": item.url, - "linkText": itemText + "text": itemText }) }} {%- else -%} {%- if item.prefix -%}{{- item.prefix -}}{%- endif -%} {{- itemText | safe -}} {%- if item.target == "_blank" -%} @@ -87,7 +98,10 @@ {{- itemText | safe -}} {%- endif -%} {%- if item.suffix or (params.iconPosition == 'after') -%} - + {%- if item.suffix -%} {{- item.suffix -}} {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%} @@ -113,6 +127,7 @@
  • {{- listItem | safe -}}
    • diff --git a/src/components/list/_macro.spec.js b/src/components/list/_macro.spec.js index 09ca3c85f2..69fb844604 100644 --- a/src/components/list/_macro.spec.js +++ b/src/components/list/_macro.spec.js @@ -109,6 +109,32 @@ describe('macro: list', () => { expect($('.ons-list').hasClass('ons-list--icons')).toBe(true); }); + it('has the correct icon class when variants is `summary`, `iconType` is `check` and `iconPosition` is before', () => { + const $ = cheerio.load( + renderComponent('list', { + ...EXAMPLE_LIST_TEXT_ITEMS, + iconPosition: 'before', + iconType: 'check', + variants: 'summary', + }), + ); + + expect($('.ons-list__prefix').hasClass('ons-list__prefix--icon-check')).toBe(true); + }); + + it('has the correct icon class when variants is `summary`, `iconType` is `check` and `iconPosition` is `after`', () => { + const $ = cheerio.load( + renderComponent('list', { + ...EXAMPLE_LIST_TEXT_ITEMS, + iconPosition: 'after', + iconType: 'check', + variants: 'summary', + }), + ); + + expect($('.ons-list__suffix').hasClass('ons-list__suffix--icon-check')).toBe(true); + }); + it('renders a
    - {{ params.hiddenReadLabel }}: {{ message.subject }} + {{ params.hiddenReadLabel }}: {{ message.subject.text }}
    • {% endfor %} diff --git a/src/components/message-list/_macro.spec.js b/src/components/message-list/_macro.spec.js index 8d7333066f..0ef6f93be4 100644 --- a/src/components/message-list/_macro.spec.js +++ b/src/components/message-list/_macro.spec.js @@ -14,16 +14,20 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = { { id: 'message1', unread: true, - url: 'https://example.com/message/1', - subject: 'Example message subject', + subject: { + url: 'https://example.com/message/1', + text: 'Example message subject', + }, fromText: 'Example Sender 1', dateText: 'Tue 4 Jul 2020 at 7:47', body: 'An example message.', }, { id: 'message2', - url: 'https://example.com/message/2', - subject: 'Another example message subject', + subject: { + url: 'https://example.com/message/2', + text: 'Another example message subject', + }, fromText: 'Example Sender 2', dateText: 'Mon 1 Oct 2019 at 9:52', body: 'Another example message.', diff --git a/src/components/message/_macro-options.md b/src/components/message/_macro-options.md index 8772df9be5..4f9bc1285e 100644 --- a/src/components/message/_macro-options.md +++ b/src/components/message/_macro-options.md @@ -11,6 +11,6 @@ | sentId | string | false | The HTML `id` of the `sentValue` element | | sentName | string | false | The HTML `name` attribute of the `sentValue` element | | unreadLinkText | string | false | Text for the the “Mark unread” link element | -| unreadLink | string | false | The URL for the “Mark unread” link element’s `href` attribute | +| unreadLinkUrl | string | false | The URL for the “Mark unread” link element’s `href` attribute | | unreadLinkId | string | false | The HTML `id` of the “Mark unread” link element | -| messageID | string | false | The HTML `id` of the message body | +| messageId | string | false | The HTML `id` of the message body | diff --git a/src/components/message/_macro.njk b/src/components/message/_macro.njk index a584c54ebb..0f2d4f4870 100644 --- a/src/components/message/_macro.njk +++ b/src/components/message/_macro.njk @@ -21,15 +21,15 @@
    - {% if params.unreadLink %} + {% if params.unreadLinkUrl %} {{ params.unreadLinkText }} {% endif %}
    -
    {{ caller() }}
    +
    {{ caller() }}
    {%- endmacro -%} diff --git a/src/components/message/_macro.spec.js b/src/components/message/_macro.spec.js index 335cfabdcf..a8384d1d64 100644 --- a/src/components/message/_macro.spec.js +++ b/src/components/message/_macro.spec.js @@ -15,13 +15,13 @@ const EXAMPLE_MESSAGE_MINIMAL = { const EXAMPLE_MESSAGE = { ...EXAMPLE_MESSAGE_MINIMAL, - unreadLink: 'https://example.com/message/1', + unreadLinkUrl: 'https://example.com/message/1', unreadLinkText: 'Unread message', id: 'message1', fromId: 'from1', sentId: 'sent1', unreadLinkId: 'unreadLink1', - messageID: 'messageBody1', + messageId: 'messageBody1', }; describe('macro: message', () => { @@ -92,7 +92,7 @@ describe('macro: message', () => { expect($('.ons-message__timestamp .ons-message__value').attr('id')).toBe('sent1'); }); - it('has the provided `unreadLink`', () => { + it('has the provided `unreadLinkUrl`', () => { const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...'])); expect($('.ons-message__unread-link').attr('href')).toBe('https://example.com/message/1'); diff --git a/src/components/metadata/_macro.njk b/src/components/metadata/_macro.njk deleted file mode 100644 index 5f11c923ac..0000000000 --- a/src/components/metadata/_macro.njk +++ /dev/null @@ -1,14 +0,0 @@ -{% from "components/description-list/_macro.njk" import onsDescriptionList %} - -{% macro onsMetadata(params) %} - {{ - onsDescriptionList({ - "id": params.id, - "classes": params.classes, - "descriptionListLabel": params.metadataLabel, - "termCol": params.termCol, - "descriptionCol": params.descriptionCol, - "itemsList": params.itemsList - }) - }} -{% endmacro %} diff --git a/src/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js b/src/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js index 091ad1cb12..6432d3b9ae 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js @@ -60,6 +60,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: mutually-exclusive', () => { describe('checkboxes', () => { beforeEach(async () => { @@ -93,7 +95,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should reflect the removed non exclusive options', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.'); @@ -125,7 +127,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should reflect the removed exclusive option', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('No central heating deselected.'); @@ -137,7 +139,7 @@ describe('script: mutually-exclusive', () => { }); it('the aria-live message should not be updated', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('No central heating deselected.'); @@ -166,7 +168,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should say nothing', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -192,7 +194,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should say nothing', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/mutually-exclusive/mutually-exclusive.date.spec.js b/src/components/mutually-exclusive/mutually-exclusive.date.spec.js index 6a44ede9fc..2e55b845b6 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.date.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.date.spec.js @@ -70,6 +70,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: mutually-exclusive', () => { describe('date', () => { beforeEach(async () => { @@ -103,7 +105,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the date input has been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Day cleared. Month cleared. Year cleared.'); @@ -129,7 +131,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I have never had a paid job deselected.'); @@ -146,7 +148,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -159,7 +161,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -193,7 +195,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the date input has been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('What year was your last MOT? cleared.'); @@ -217,7 +219,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I have never had a paid job deselected.'); @@ -232,7 +234,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -245,7 +247,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/mutually-exclusive/mutually-exclusive.duration.spec.js b/src/components/mutually-exclusive/mutually-exclusive.duration.spec.js index d8161383b3..3704e22389 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.duration.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.duration.spec.js @@ -70,6 +70,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: mutually-exclusive', () => { describe('duration', () => { beforeEach(async () => { @@ -100,7 +102,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the inputs have been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Years cleared. Months cleared.'); @@ -125,7 +127,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I have not moved in to this address yet deselected.'); @@ -141,7 +143,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -154,7 +156,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -189,7 +191,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the inputs have been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('How long have you lived at this address? cleared.'); @@ -213,7 +215,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I have not moved in to this address yet deselected.'); @@ -228,7 +230,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -241,7 +243,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/mutually-exclusive/mutually-exclusive.email.spec.js b/src/components/mutually-exclusive/mutually-exclusive.email.spec.js index 24794ac21d..1c289e1163 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.email.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.email.spec.js @@ -27,6 +27,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: mutually-exclusive', () => { describe('email input', () => { beforeEach(async () => { @@ -54,7 +56,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the email input has been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Enter an email cleared.'); @@ -78,7 +80,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I dont want to receive a confirmation email deselected.'); @@ -93,7 +95,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -106,7 +108,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js b/src/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js index 2a7b6f79f3..396ecdd21a 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js @@ -67,6 +67,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: mutually-exclusive', () => { describe('checkboxes', () => { beforeEach(async () => { @@ -100,7 +102,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should reflect the removed non exclusive options', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.'); @@ -133,7 +135,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should reflect the removed exclusive option', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Dont know deselected.'); @@ -145,7 +147,7 @@ describe('script: mutually-exclusive', () => { }); it('the aria-live message should not be updated', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Dont know deselected.'); @@ -175,7 +177,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should say nothing', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -202,7 +204,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria-live message should say nothing', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/mutually-exclusive/mutually-exclusive.number.spec.js b/src/components/mutually-exclusive/mutually-exclusive.number.spec.js index d2dd0cbe16..3fb34423a3 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.number.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.number.spec.js @@ -33,6 +33,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: mutually-exclusive', () => { describe('number input', () => { beforeEach(async () => { @@ -60,7 +62,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the number input has been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Gross annual income cleared.'); @@ -84,7 +86,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I prefer not to say deselected.'); @@ -99,7 +101,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -112,7 +114,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/mutually-exclusive/mutually-exclusive.textarea.spec.js b/src/components/mutually-exclusive/mutually-exclusive.textarea.spec.js index d7fea99544..7449837e34 100644 --- a/src/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +++ b/src/components/mutually-exclusive/mutually-exclusive.textarea.spec.js @@ -34,6 +34,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS = { }, }; +const { setTimeout } = require('node:timers/promises'); + const FAKE_TEXTAREA_INPUT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; describe('script: mutually-exclusive', () => { @@ -68,7 +70,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the textarea has been cleared', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('Enter your feedback cleared.'); @@ -92,7 +94,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe('I dont want to provide feedback deselected.'); @@ -107,7 +109,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); @@ -120,7 +122,7 @@ describe('script: mutually-exclusive', () => { }); it('then the aria alert shouldnt say anything', async () => { - await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY); + await setTimeout(SCREEN_READER_TIMEOUT_DELAY); const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent); expect(alertText).toBe(''); diff --git a/src/components/navigation/_macro.njk b/src/components/navigation/_macro.njk index 49b76c7d48..f0fb0d175d 100644 --- a/src/components/navigation/_macro.njk +++ b/src/components/navigation/_macro.njk @@ -134,9 +134,9 @@ >
    • - {{ params.navigation.subNavigation.overviewText | default('Overview') }}
      • diff --git a/src/components/navigation/_macro.spec.js b/src/components/navigation/_macro.spec.js index c11242e45e..37b6bc9587 100644 --- a/src/components/navigation/_macro.spec.js +++ b/src/components/navigation/_macro.spec.js @@ -29,7 +29,7 @@ const PARAMS = { ], subNavigation: { id: 'sub-nav', - overviewURL: '#overview', + overviewUrl: '#overview', overviewText: 'Overview', ariaLabel: 'Section menu', itemsList: [ diff --git a/src/components/navigation/navigation.spec.js b/src/components/navigation/navigation.spec.js index 39709977ab..c4264abdd5 100644 --- a/src/components/navigation/navigation.spec.js +++ b/src/components/navigation/navigation.spec.js @@ -49,7 +49,7 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = { ], subNavigation: { id: 'sub-nav', - overviewURL: '#overview', + overviewUrl: '#overview', overviewText: 'Overview', ariaLabel: 'Section menu', currentPath: '#1', @@ -108,7 +108,7 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED = { ], subNavigation: { id: 'sub-nav-hidden', - overviewURL: '#overview', + overviewUrl: '#overview', overviewText: 'Overview', ariaLabel: 'Section menu', currentPath: '#1', @@ -230,12 +230,14 @@ describe('script: navigation', () => { }); describe('when the toggle button is clicked to close the navigation list', () => { + const { setTimeout } = require('node:timers/promises'); + beforeEach(async () => { await page.focus(buttonEl); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await setTimeout(100); }); it('has aria-hidden set as `true` on the navigation list', async () => { @@ -270,14 +272,14 @@ describe('script: navigation', () => { it('has the aria-hidden attribute removed from the navigation list', async () => { const nav = await page.$(navEl); - const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null); - expect(hasAriaAttribute).toBe(false); + const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === null); + expect(hasAriaAttribute).toBe(true); }); it('has aria-expanded removed from the navigation toggle button', async () => { const button = await page.$(buttonEl); - const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') !== null); - expect(hasAriaExpanded).toBe(false); + const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') === null); + expect(hasAriaExpanded).toBe(true); }); it('has the hide class removed from the navigation list', async () => { diff --git a/src/components/panel/_macro-options.md b/src/components/panel/_macro-options.md index 15dc6574dd..7d0b893587 100644 --- a/src/components/panel/_macro-options.md +++ b/src/components/panel/_macro-options.md @@ -2,7 +2,7 @@ | ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | body | string | true | The contents of the panel. This can contain HTML. | | title | string | false | The title for the error summary panel | -| titleTag | string | false | The HTML heading tag for the `title`. Use to ensure the title has a correct semantic order on the page. Will default to an `h2` | +| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | | type | string | false | A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement” | | spacious | boolean | false | Set to “true” to double the padding spacing surrounding the body content if required | | classes | string | false | Custom classes to add to the panel | diff --git a/src/components/panel/_macro.njk b/src/components/panel/_macro.njk index 603c52e986..80ddc75e7f 100644 --- a/src/components/panel/_macro.njk +++ b/src/components/panel/_macro.njk @@ -52,11 +52,12 @@ {% if params.title %} {% if params.variant == 'error' %} - {% set defaultTitleTag = "h2" %} + {% set defaultTitleTag = "h" + 2 %} {% else %} {% set defaultTitleTag = "div" %} {% endif %} - {% set titleTag = params.titleTag | default(defaultTitleTag) %} + {% set headingLevel = "h" + params.headingLevel if params.headingLevel else undefined %} + {% set titleTag = headingLevel | default(defaultTitleTag) %} {% set openingTag = "<" + titleTag %} {% set closingTag = "" %}
      diff --git a/src/components/panel/_macro.spec.js b/src/components/panel/_macro.spec.js index 33f582c214..fb7c35d0db 100644 --- a/src/components/panel/_macro.spec.js +++ b/src/components/panel/_macro.spec.js @@ -147,12 +147,12 @@ describe('macro: panel', () => { expect(titleTag).toBe('div'); }); - it('has the provided `titleTag`', () => { + it('has the provided `headingLevel`', () => { const $ = cheerio.load( renderComponent('panel', { ...EXAMPLE_PANEL_BASIC, title: 'Panel title', - titleTag: 'h3', + headingLevel: 3, }), ); diff --git a/src/components/phase-banner/_macro.njk b/src/components/phase-banner/_macro.njk index 8f6861c2d1..d1d662b08e 100644 --- a/src/components/phase-banner/_macro.njk +++ b/src/components/phase-banner/_macro.njk @@ -1,7 +1,7 @@ {% macro onsPhaseBanner(params) %}
      -
      +
      {% if not params.hideBadge %}
      {{ params.badge | default("Beta") }} diff --git a/src/components/phase-banner/example-phase-banner-alpha.njk b/src/components/phase-banner/example-phase-banner-alpha.njk index 99db7f4ee7..26b90d130e 100644 --- a/src/components/phase-banner/example-phase-banner-alpha.njk +++ b/src/components/phase-banner/example-phase-banner-alpha.njk @@ -9,7 +9,7 @@ {{ onsExternalLink({ "url": "#0", - "linkText": "give feedback" + "text": "give feedback" }) }} {% endset %} diff --git a/src/components/phase-banner/example-phase-banner-beta.njk b/src/components/phase-banner/example-phase-banner-beta.njk index ce962c8908..4e60232a2c 100644 --- a/src/components/phase-banner/example-phase-banner-beta.njk +++ b/src/components/phase-banner/example-phase-banner-beta.njk @@ -9,7 +9,7 @@ {{ onsExternalLink({ "url": "#0", - "linkText": "give feedback" + "text": "give feedback" }) }} {% endset %} diff --git a/src/foundations/quote/example-quote.njk b/src/components/quote/example-quote.njk similarity index 100% rename from src/foundations/quote/example-quote.njk rename to src/components/quote/example-quote.njk diff --git a/src/components/reply/_macro.njk b/src/components/reply/_macro.njk index 1c5a639471..1b083009b8 100644 --- a/src/components/reply/_macro.njk +++ b/src/components/reply/_macro.njk @@ -14,8 +14,10 @@ "rows": params.textarea.rows }) }} -
      -
      +
      +
      {{ onsButton({ "id": params.button.id, diff --git a/src/components/section-navigation/_macro-options.md b/src/components/section-navigation/_macro-options.md index 167602c322..707558072f 100644 --- a/src/components/section-navigation/_macro-options.md +++ b/src/components/section-navigation/_macro-options.md @@ -24,12 +24,12 @@ | ------- | ---------------- | -------- | -------------------------------------------------- | | classes | string | false | Additional classes for the list item element | | url | string | true | The URL for the HTML `href` attribute for the link | -| title | string | true | The text for the link | +| text | string | true | The text for the link | | anchors | `Array` | false | An array of [sub-section list anchors](#anchors) | ## Anchors -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------------- | -| url | string | true | The HTML `id` of the heading tag on the page to link to | -| title | string | true | The text for the anchor link | +| Name | Type | Required | Description | +| ---- | ------ | -------- | ------------------------------------------------------- | +| url | string | true | The HTML `id` of the heading tag on the page to link to | +| text | string | true | The text for the anchor link | diff --git a/src/components/section-navigation/_macro.njk b/src/components/section-navigation/_macro.njk index 6514a6601f..2c79b08f14 100644 --- a/src/components/section-navigation/_macro.njk +++ b/src/components/section-navigation/_macro.njk @@ -22,7 +22,7 @@ {% endif %}
        {% for item in section.itemsList %} - {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title | lower) %} + {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.text | lower) %} {% set isCurrent = true %} {% else %} {% set isCurrent = false %} @@ -33,16 +33,16 @@ {% if isCurrent == true %} {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" - aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }} + aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }} {% else %} - {{ item.title }} + {{ item.text }} {% endif %} {% if item.anchors and isCurrent == true %}
          {% for anchor in item.anchors %}
        • {{ anchor.title }}{{ anchor.text }}
          • {% endfor %} @@ -62,7 +62,7 @@
            {% for item in params.itemsList %} {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %} - {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title | lower) %} + {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.text | lower) %} {% set isCurrent = true %} {% else %} {% set isCurrent = false %} @@ -73,15 +73,15 @@ {% if isCurrent == true %} {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" - aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }} + aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }} {% else %} - {{ item.title }} + {{ item.text }} {% endif %} {% if item.anchors %} diff --git a/src/components/section-navigation/_macro.spec.js b/src/components/section-navigation/_macro.spec.js index 80d02dc491..b4d40ecb27 100644 --- a/src/components/section-navigation/_macro.spec.js +++ b/src/components/section-navigation/_macro.spec.js @@ -11,11 +11,11 @@ const EXAMPLE_SECTION_NAVIGATION = { currentPath: '/results', itemsList: [ { - title: 'Results', + text: 'Results', url: '/results', }, { - title: 'Dashboard', + text: 'Dashboard', url: '/results/dashboard', }, ], @@ -26,29 +26,29 @@ const EXAMPLE_SECTION_NAVIGATION_VERTICAL = { currentPath: '#section-2', itemsList: [ { - title: 'Section 1', + text: 'Section 1', url: '#section-1', }, { - title: 'Section 2', + text: 'Section 2', url: '#section-2', anchors: [ { - title: 'Sub section 1', + text: 'Sub section 1', url: '#sub-section-1', }, { - title: 'Sub section 2', + text: 'Sub section 2', url: '#sub-section-2', }, { - title: 'Sub section 3', + text: 'Sub section 3', url: '#sub-section-3', }, ], }, { - title: 'Section 3', + text: 'Section 3', url: '#0', }, ], @@ -62,29 +62,29 @@ const EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS = { title: 'Section Title', itemsList: [ { - title: 'Section 1', + text: 'Section 1', url: '#section-1', }, { - title: 'Section 2', + text: 'Section 2', url: '#section-2', anchors: [ { - title: 'Sub section 1', + text: 'Sub section 1', url: '#sub-section-1', }, { - title: 'Sub section 2', + text: 'Sub section 2', url: '#sub-section-2', }, { - title: 'Sub section 3', + text: 'Sub section 3', url: '#sub-section-3', }, ], }, { - title: 'Section 3', + text: 'Section 3', url: '#0', }, ], @@ -159,7 +159,7 @@ describe('macro: section-navigation', () => { itemsList: [ { classes: 'extra-class another-extra-class', - title: 'Section 1', + text: 'Section 1', url: '#section-1', }, ], diff --git a/src/components/section-navigation/example-section-navigation-single-vertical-with-title.njk b/src/components/section-navigation/example-section-navigation-single-vertical-with-title.njk index ef54216c8b..0e191cf744 100644 --- a/src/components/section-navigation/example-section-navigation-single-vertical-with-title.njk +++ b/src/components/section-navigation/example-section-navigation-single-vertical-with-title.njk @@ -7,15 +7,15 @@ "title": "Sections title", "itemsList": [ { - "title": "Section 1", + "text": "Section 1", "url": "#section-1" }, { - "title": "Section 2", + "text": "Section 2", "url": "#0" }, { - "title": "Section 3", + "text": "Section 3", "url": "#0" } ] diff --git a/src/components/section-navigation/example-section-navigation-vertical.njk b/src/components/section-navigation/example-section-navigation-vertical.njk index b17720d991..3b22f1f53f 100644 --- a/src/components/section-navigation/example-section-navigation-vertical.njk +++ b/src/components/section-navigation/example-section-navigation-vertical.njk @@ -9,33 +9,33 @@ "title": "Section Title", "itemsList": [ { - "title": "Section 1", + "text": "Section 1", "url": "#section-1", "anchors": [ { - "title": "Sub section 1", + "text": "Sub section 1", "url": "#sub-section-1" }, { - "title": "Sub section 2", + "text": "Sub section 2", "url": "#sub-section-2" }, { - "title": "Sub section 3", + "text": "Sub section 3", "url": "#sub-section-3" } ] }, { - "title": "Section 2", + "text": "Section 2", "url": "#section-2" }, { - "title": "Section 3", + "text": "Section 3", "url": "#section-3" }, { - "title": "Section 4", + "text": "Section 4", "url": "#section-4" } ] @@ -44,33 +44,33 @@ "title": "Section Title", "itemsList": [ { - "title": "Section 5", + "text": "Section 5", "url": "#section-5" }, { - "title": "Section 6", + "text": "Section 6", "url": "#section-6", "anchors": [ { - "title": "Sub section 1", + "text": "Sub section 1", "url": "#sub-section-1" }, { - "title": "Sub section 2", + "text": "Sub section 2", "url": "#sub-section-2" }, { - "title": "Sub section 3", + "text": "Sub section 3", "url": "#sub-section-3" } ] }, { - "title": "Section 7", + "text": "Section 7", "url": "#0" }, { - "title": "Section 8", + "text": "Section 8", "url": "#0" } ] diff --git a/src/components/section-navigation/example-section-navigation.njk b/src/components/section-navigation/example-section-navigation.njk index c763e47f2e..59f7591937 100644 --- a/src/components/section-navigation/example-section-navigation.njk +++ b/src/components/section-navigation/example-section-navigation.njk @@ -5,15 +5,15 @@ "currentPath": "#section-1", "itemsList": [ { - "title": "Section 1", + "text": "Section 1", "url": "#section-1" }, { - "title": "Section 2", + "text": "Section 2", "url": "#0" }, { - "title": "Section 3", + "text": "Section 3", "url": "#0" } ] diff --git a/src/components/share-page/_macro-options.md b/src/components/share-page/_macro-options.md index c43581b369..ccaac0ccef 100644 --- a/src/components/share-page/_macro-options.md +++ b/src/components/share-page/_macro-options.md @@ -1,9 +1,9 @@ -| Name | Type | Required | Description | -| --------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| titleTag | string | false | The HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Defaults to “h2”. | -| title | string | false | Heading for the share component | -| pageTitle | string | true | The `` of the page to be shared | -| pageURL | string | true | The absolute URL of the page to be shared | -| facebook | boolean | false | Set to “true” to display a Facebook icon and link to allow sharing to Facebook | -| twitter | boolean | false | Set to “true” to display a Twitter icon and link to allow sharing to Twitter | -| iconSize | string | false | Icon size can be set to match the size of the list item text as detailed in the [typography type scale](/foundations/typography/#type-scale). Defaults to “xxl”. | +| Name | Type | Required | Description | +| ------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | +| title | string | false | Heading for the share component | +| pageTitle | string | true | The `<title>` of the page to be shared | +| pageUrl | string | true | The absolute URL of the page to be shared | +| facebook | boolean | false | Set to “true” to display a Facebook icon and link to allow sharing to Facebook | +| twitter | boolean | false | Set to “true” to display a Twitter icon and link to allow sharing to Twitter | +| iconSize | string | false | Icon size can be set to match the size of the list item text as detailed in the [typography type scale](/foundations/typography/#type-scale). Defaults to “xxl”. | diff --git a/src/components/share-page/_macro.njk b/src/components/share-page/_macro.njk index 7cb3d6b6a1..df32d483a9 100644 --- a/src/components/share-page/_macro.njk +++ b/src/components/share-page/_macro.njk @@ -2,9 +2,9 @@ {% from "components/list/_macro.njk" import onsList %} {% if params.title %} - {% set titleTag = params.titleTag | default("h2") %} - {% set openingTag = "<" + titleTag %} - {% set closingTag = "</" + titleTag + ">" %} + {% set titleTag = params.headingLevel | default(2) %} + {% set openingTag = "<h" + titleTag %} + {% set closingTag = "</h" + titleTag + ">" %} {{ openingTag | safe }} class="ons-u-fs-r--b ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }} {% endif %} @@ -13,7 +13,7 @@ {% set facebook = { - "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode, + "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageUrl|urlencode, "text": 'Facebook', "iconType": 'facebook', "rel": 'noreferrer external', @@ -25,7 +25,7 @@ {% set twitter = { - "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode, + "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode, "text": 'Twitter', "iconType": 'twitter', "rel": 'noreferrer external', diff --git a/src/components/share-page/_macro.spec.js b/src/components/share-page/_macro.spec.js index 2420a96c01..42cf51fbb8 100644 --- a/src/components/share-page/_macro.spec.js +++ b/src/components/share-page/_macro.spec.js @@ -8,7 +8,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_SHARE_PAGE = { title: 'Share page', pageTitle: 'An example page', - pageURL: 'https://example.com/an-example-page', + pageUrl: 'https://example.com/an-example-page', facebook: true, twitter: true, }; @@ -31,7 +31,7 @@ describe('macro: share-page', () => { const $ = cheerio.load( renderComponent('share-page', { ...EXAMPLE_SHARE_PAGE, - titleTag: 'h4', + headingLevel: 4, }), ); diff --git a/src/components/share-page/example-share-page.njk b/src/components/share-page/example-share-page.njk index 53aa9d3679..75411340c9 100644 --- a/src/components/share-page/example-share-page.njk +++ b/src/components/share-page/example-share-page.njk @@ -4,7 +4,7 @@ onsSharePage({ "title": 'Share this post', "pageTitle": 'A page to share', - "pageURL": 'https://example.com/a-page-to-share', + "pageUrl": 'https://example.com/a-page-to-share', "facebook": true, "twitter": true }) diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md index b160a55536..5a2d6a51f4 100644 --- a/src/components/summary/_macro-options.md +++ b/src/components/summary/_macro-options.md @@ -6,10 +6,10 @@ ## Summaries -| Name | Type | Required | Description | -| ------------ | --------------------- | -------- | ---------------------------------------------------- | -| groups | Array`<SummaryGroup>` | true | An array of [groups](#summarygroup) within a summary | -| summaryTitle | string | false | The `h2` title heading for a group of summaries | +| Name | Type | Required | Description | +| ------ | --------------------- | -------- | ---------------------------------------------------- | +| groups | Array`<SummaryGroup>` | true | An array of [groups](#summarygroup) within a summary | +| title | string | false | The `h2` title heading for a group of summaries | ## SummaryGroup @@ -17,7 +17,7 @@ | --------------- | -------------------- | ------------------------------------------- | ------------------------------------------------------------------------------ | | rows | Array`<SummaryRow>` | true (unless `placeholderText` set) | An array of [rows](#summaryrow) within a group | | placeholderText | string | true (unless `rows` set) | A message to be shown as a placeholder if there are no rows in the summary | -| groupTitle | string | false (`true` if variant is set to `card` ) | The title heading for a summary within a group | +| title | string | false (`true` if variant is set to `card` ) | The title heading for a summary within a group | | id | string | false | The HTML `id` of the group | | summaryLink | Array`<SummaryLink>` | false | Settings for the [summary link](#summarylink) used to a new row to the summary | @@ -26,8 +26,8 @@ | Name | Type | Required | Description | | ------------ | ----------------------- | -------- | ------------------------------------------------------------------- | | id | string | false | The HTML `id` of the row | -| rowItems | Array`<SummaryRowItem>` | true | An array of [items for the row](#summaryrowitem) | -| rowTitle | string | false | The title for the row | +| items | Array`<SummaryRowItem>` | true | An array of [items for the row](#summaryrowitem) | +| title | string | false | The title for the row | | error | boolean | false | Set to “true” display an [error](/components/error) on a row | | errorMessage | string | false | The error message for the row | | total | boolean | false | Set to “true” to display row as a calculated total of previous rows | @@ -39,8 +39,8 @@ | id | string | false | The HTML `id` of the row item | | iconType | string | false | Adds an icon before the row title, by setting the [icon type](/foundations/icons#icon-type) | | iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers | -| rowTitle | string | false | The title for the row item | -| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle | +| title | string | false | The title for the row item | +| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title | | valueList | Array`<SummaryValue>` | false | An array of [value(s)](#summaryvalue) for the row item | | actions | Array`<SummaryAction>` | false | Settings for the row [action links](#summaryaction) | | attributes | object | false | HTML attributes (for example, data attributes) to add to the row item | diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk index 96d7357bc4..f9688cc933 100644 --- a/src/components/summary/_macro.njk +++ b/src/components/summary/_macro.njk @@ -15,17 +15,17 @@ <div class="{{ className }}"> {% for summary in params.summaries %} - {% if summary.summaryTitle %} - <h2 class="ons-summary__title ons-u-mb-l{{ ' ons-u-mt-l' if loop.index > 1 }}">{{ summary.summaryTitle }}</h2> + {% if summary.title %} + <h2 class="ons-summary__title ons-u-mb-l{{ ' ons-u-mt-l' if loop.index > 1 else "" }}">{{ summary.title }}</h2> {% set headingLevel = "3" %} {% endif %} {% for group in summary.groups %} - <div {% if group.id %}id="{{ group.id }}"{{ ' ' }}{% endif %}class="ons-summary__group{{ variantClasses }}"> - {% if group.groupTitle %} + <div {% if group.id %}id="{{ group.id }}"{% endif %} class="ons-summary__group{{ variantClasses }}"> + {% if group.title %} {% set openingHeadingTag = "<h" + headingLevel %} {% set closingHeadingTag = "</h" + headingLevel + ">" %} {{ openingHeadingTag | safe }} - class="ons-summary__group-title">{{ group.groupTitle }}{{ closingHeadingTag | safe }} + class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }} {% endif %} {% if group.rows %} <dl class="ons-summary__items"> @@ -37,63 +37,63 @@ {% if row.errorMessage %} <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div> {% endif %} - {% if row.rowItems | length > 1 and row.rowTitle %} + {% if row.items | length > 1 and row.title %} <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r"> - {{- row.rowTitle -}} + {{- row.title -}} </div> {% endif %} - {% for rowItem in row.rowItems %} + {% for item in row.items %} <div - class="ons-summary__row{{ ' ons-summary__row--has-values' if rowItem.valueList }}" - {% if rowItem.id %}id="{{ rowItem.id }}"{% endif %} + class="ons-summary__row{{ ' ons-summary__row--has-values' if item.valueList else "" }}" + {% if item.id %}id="{{ item.id }}"{% endif %} > <dt class="ons-summary__item-title" - {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %} + {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %} > - {% if rowItem.iconType %} + {% if item.iconType %} {% from "components/icon/_macro.njk" import onsIcon %} <span - class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if rowItem.iconType == 'check' }}" + class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}" > {{- onsIcon({ - "iconType": rowItem.iconType + "iconType": item.iconType }) -}} - {% if rowItem.iconVisuallyHiddenText %} - <span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span> + {% if item.iconVisuallyHiddenText %} + <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span> {% endif %} </span> {% endif %} <div - class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType }}" + class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}" > - {{- rowItem.rowTitle | default(row.rowTitle) | safe -}} + {{- item.title | default(row.title) | safe -}} </div> {# Render section status for mobile if is hub #} - {% if variantHub and rowItem.valueList %} - <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span> + {% if variantHub and item.valueList %} + <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span> {% endif %} </dt> - {% if rowItem.valueList %} + {% if item.valueList %} <dd - class="ons-summary__values{{ ' ons-summary__values--2' if not rowItem.actions }}" - {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %} + class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}" + {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %} > - {% if rowItem.valueList | length == 1 %} - <span class="ons-summary__text">{{ rowItem.valueList[0].text | safe }}</span> - {% if rowItem.valueList[0].other or rowItem.valueList[0].other == 0 %} + {% if item.valueList | length == 1 %} + <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span> + {% if item.valueList[0].other or item.valueList[0].other == 0 %} <ul class="ons-u-mb-no"> - <li>{{ rowItem.valueList[0].other | safe }}</li> + <li>{{ item.valueList[0].other | safe }}</li> </ul> {% endif %} {% else %} <ul class="ons-u-mb-no"> - {% for value in rowItem.valueList %} + {% for value in item.valueList %} <li> <span class="ons-summary__text">{{ value.text | safe }}</span> {% if value.other or value.other == 0 %} @@ -107,9 +107,9 @@ {% endif %} </dd> {% endif %} - {% if rowItem.actions %} + {% if item.actions %} <dd class="ons-summary__actions"> - {% for action in rowItem.actions %} + {% for action in item.actions %} {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %} <a href="{{ action.url }}" diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index e7994bae35..d2163c336c 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/components/summary/_macro.spec.js @@ -8,12 +8,12 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_SUMMARY_ROWS = { rows: [ { - // Contains - row with icon, attributes and rowTitleAttributes, other value, no action + // Contains - row with icon, attributes and titleAttributes, other value, no action id: 'row-id-1', - rowTitle: 'row title 1', - rowItems: [ + title: 'row title 1', + items: [ { - rowTitleAttributes: { + titleAttributes: { a: 123, b: 456, }, @@ -36,10 +36,10 @@ const EXAMPLE_SUMMARY_ROWS = { { // Contains - row with error and multiple actions id: 'row-id-2', - rowTitle: 'row title 2', + title: 'row title 2', error: true, errorMessage: 'there are errors', - rowItems: [ + items: [ { id: 'item-id-2', valueList: [ @@ -69,8 +69,8 @@ const EXAMPLE_SUMMARY_ROWS = { { // Contains - row with multiple rows and multiple values id: 'row-id-3', - rowTitle: 'row title 3', - rowItems: [ + title: 'row title 3', + items: [ { id: 'item-id-3', valueList: [ @@ -95,9 +95,9 @@ const EXAMPLE_SUMMARY_ROWS = { { // Contains - row with total id: 'row-id-4', - rowTitle: 'row title 4', + title: 'row title 4', total: true, - rowItems: [ + items: [ { id: 'item-id-5', valueList: [ @@ -115,7 +115,7 @@ const EXAMPLE_SUMMARY_GROUPS = { groups: [ { id: 'group-id-1', - groupTitle: 'group title', + title: 'group title', ...EXAMPLE_SUMMARY_ROWS, }, ], @@ -139,9 +139,9 @@ const EXAMPLE_SUMMARY_GROUPS_NO_ROWS = { const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = { rows: [ { - rowItems: [ + items: [ { - rowTitle: 'row item 1', + title: 'row item 1', valueList: [ { text: 'list item 1', @@ -161,7 +161,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = { ], }, { - rowTitle: 'row item 2', + title: 'row item 2', valueList: [ { text: 'list item 2', @@ -176,7 +176,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = { ], }, { - rowTitle: 'row item 3', + title: 'row item 3', valueList: [ { text: 'list item 3', @@ -193,9 +193,9 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = { ], }, { - rowItems: [ + items: [ { - rowTitle: 'row item 4', + title: 'row item 4', valueList: [ { text: 'list item 4', @@ -215,7 +215,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = { ], }, { - rowTitle: 'row item 5', + title: 'row item 5', valueList: [ { text: 'list item 5', @@ -230,7 +230,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = { ], }, { - rowTitle: 'row item 6', + title: 'row item 6', valueList: [ { text: 'list item 6', @@ -264,7 +264,7 @@ const EXAMPLE_SUMMARY_BASIC = { const EXAMPLE_SUMMARY_WITH_TITLE = { summaries: [ { - summaryTitle: 'summary title', + title: 'summary title', ...EXAMPLE_SUMMARY_GROUPS, }, ], @@ -273,7 +273,7 @@ const EXAMPLE_SUMMARY_WITH_TITLE = { const EXAMPLE_SUMMARY_WITH_NO_ROWS = { summaries: [ { - summaryTitle: 'summary title', + title: 'summary title', ...EXAMPLE_SUMMARY_GROUPS_NO_ROWS, }, ], @@ -282,21 +282,21 @@ const EXAMPLE_SUMMARY_WITH_NO_ROWS = { const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = { summaries: [ { - summaryTitle: 'summary title', + title: 'summary title', groups: [ { id: 'group-id-1', - groupTitle: 'group title', + title: 'group title', ...EXAMPLE_SUMMARY_ROWS, }, { id: 'group-id-2', - groupTitle: 'group title', + title: 'group title', ...EXAMPLE_SUMMARY_HOUSEHOLD_GROUP, }, { id: 'group-id-3', - groupTitle: 'group title', + title: 'group title', ...EXAMPLE_SUMMARY_ROWS, }, ], @@ -345,13 +345,13 @@ describe('macro: summary', () => { expect($('#group-id-1').length).toBe(1); }); - it('has the correct `groupTitle` tag', () => { + it('has the correct group `title` tag', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); expect($('.ons-summary__group-title')[0].tagName).toBe('h2'); }); - it('has the `groupTitle` text', () => { + it('has the group `title` text', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); expect($('.ons-summary__group-title').text()).toBe('group title'); @@ -377,13 +377,13 @@ describe('macro: summary', () => { expect($('.ons-summary__items .ons-summary__item:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true); }); - it('displays the `rowTitle` text', () => { + it('displays the row `title` text', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3'); }); - it('overrides the `rowTitle` with the `errorMessage` if provided', () => { + it('overrides the row `title` with the `errorMessage` if provided', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE)); expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row-title--error').text()).toBe( @@ -405,7 +405,7 @@ describe('macro: summary', () => { expect($('.ons-summary__row--has-values').length).toBe(5); }); - it('has custom `rowTitleAttributes`', () => { + it('has custom row `titleAttributes`', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); expect($('.ons-summary__item-title').attr('a')).toBe('123'); @@ -414,7 +414,7 @@ describe('macro: summary', () => { }); describe('part: item title', () => { - it('displays the `rowTitle` text', () => { + it('displays the row `title` text', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text').text().trim()).toBe( @@ -562,7 +562,7 @@ describe('macro: summary', () => { expect(results).toHaveNoViolations(); }); - it('displays the `summaryTitle`', () => { + it('displays the summary `title`', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE)); expect($('.ons-summary__title').text()).toBe('summary title'); @@ -593,7 +593,7 @@ describe('macro: summary', () => { expect($('.ons-summary').hasClass('ons-summary--hub')).toBe(true); }); - it('has the value rendered after the `rowTitle` that shows on mobile', () => { + it('has the value rendered after the row `title` that shows on mobile', () => { const $ = cheerio.load( renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss index 91ace62729..4cfba38d73 100644 --- a/src/components/summary/_summary.scss +++ b/src/components/summary/_summary.scss @@ -86,10 +86,6 @@ $hub-row-spacing: 1.3rem; } } - &__actions { - white-space: nowrap; - } - &__spacer { background: var(--ons-color-black); display: inline-block; @@ -188,6 +184,7 @@ $hub-row-spacing: 1.3rem; &__button { align-self: flex-start; + text-align: right; } &__values--2 { diff --git a/src/components/summary/example-summary-card-grouped.njk b/src/components/summary/example-summary-card-grouped.njk index faf240dcc2..6893ae66c0 100644 --- a/src/components/summary/example-summary-card-grouped.njk +++ b/src/components/summary/example-summary-card-grouped.njk @@ -5,14 +5,14 @@ "variant": "card", "summaries": [ { - "summaryTitle": "John Doe", + "title": "John Doe", "groups": [ { - "groupTitle": "Personal details", + "title": "Personal details", "rows": [ { - "rowTitle": "Are you John Doe?", - "rowItems": [ + "title": "Are you John Doe?", + "items": [ { "valueList": [ { @@ -30,8 +30,8 @@ ] }, { - "rowTitle": "What's your date of birth?", - "rowItems": [ + "title": "What's your date of birth?", + "items": [ { "valueList": [ { @@ -49,8 +49,8 @@ ] }, { - "rowTitle": "What is your sex?", - "rowItems": [ + "title": "What is your sex?", + "items": [ { "valueList": [ { @@ -70,11 +70,11 @@ ] }, { - "groupTitle": "Identity and health", + "title": "Identity and health", "rows": [ { - "rowTitle": "What is your country of birth?", - "rowItems": [ + "title": "What is your country of birth?", + "items": [ { "valueList": [ { @@ -92,8 +92,8 @@ ] }, { - "rowTitle": "What passports do you hold?", - "rowItems": [ + "title": "What passports do you hold?", + "items": [ { "valueList": [ { @@ -113,11 +113,11 @@ ] }, { - "groupTitle": "Qualifications", + "title": "Qualifications", "rows": [ { - "rowTitle": "Have you completed an apprenticeship?", - "rowItems": [ + "title": "Have you completed an apprenticeship?", + "items": [ { "valueList": [ { @@ -135,8 +135,8 @@ ] }, { - "rowTitle": "Have you achieved a GCSE or equivalent qualification?", - "rowItems": [ + "title": "Have you achieved a GCSE or equivalent qualification?", + "items": [ { "valueList": [ { @@ -156,12 +156,12 @@ ] }, { - "groupTitle": "Employment history", + "title": "Employment history", "rows": [ { - "rowItems": [ + "items": [ { - "rowTitle": "Name of UK company", + "title": "Name of UK company", "valueList": [ { "text": "Company A" @@ -181,7 +181,7 @@ ] }, { - "rowTitle": "Head office location", + "title": "Head office location", "valueList": [ { "text": "Cardiff" @@ -196,7 +196,7 @@ ] }, { - "rowTitle": "Is this UK company your current employer?", + "title": "Is this UK company your current employer?", "valueList": [ { "text": "No" @@ -213,9 +213,9 @@ ] }, { - "rowItems": [ + "items": [ { - "rowTitle": "Name of UK company", + "title": "Name of UK company", "valueList": [ { "text": "Company A" @@ -235,7 +235,7 @@ ] }, { - "rowTitle": "Head office location", + "title": "Head office location", "valueList": [ { "text": "Newport" @@ -250,7 +250,7 @@ ] }, { - "rowTitle": "Is this UK company your current employer?", + "title": "Is this UK company your current employer?", "valueList": [ { "text": "Yes" @@ -276,13 +276,13 @@ } }, { - "groupTitle": "Spending", + "title": "Spending", "rows": [ { - "rowTitle": "What are your monthly household expenses?", - "rowItems": [ + "title": "What are your monthly household expenses?", + "items": [ { - "rowTitle": "Food", + "title": "Food", "valueList": [ { "text": "£50.00" @@ -297,7 +297,7 @@ ] }, { - "rowTitle": "Utilities", + "title": "Utilities", "valueList": [ { "text": "£65.00" @@ -312,7 +312,7 @@ ] }, { - "rowTitle": "Transport", + "title": "Transport", "valueList": [ { "text": "£70.00" @@ -327,7 +327,7 @@ ] }, { - "rowTitle": "Other", + "title": "Other", "valueList": [ { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." diff --git a/src/components/summary/example-summary-grouped-total.njk b/src/components/summary/example-summary-grouped-total.njk index 1db8fd11d7..7c18d51184 100644 --- a/src/components/summary/example-summary-grouped-total.njk +++ b/src/components/summary/example-summary-grouped-total.njk @@ -5,12 +5,12 @@ { "groups": [ { - "groupTitle": "Summary - Section Title", + "title": "Summary - Section Title", "rows": [ { - "rowItems": [ + "items": [ { - "rowTitle": "Total value of acquisitions for transport assets and equipment", + "title": "Total value of acquisitions for transport assets and equipment", "valueList": [ { "text": "£9,000.00" @@ -27,9 +27,9 @@ ] }, { - "rowItems": [ + "items": [ { - "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)", + "title": "Total value of acquisitions for computers and peripheral devices (hardware)", "valueList": [ { "text": "£225,000.00" @@ -47,9 +47,9 @@ }, { "total": true, - "rowItems": [ + "items": [ { - "rowTitle": "Grand total for value of acquisitions", + "title": "Grand total for value of acquisitions", "valueList": [ { "text": "£234,000.00" diff --git a/src/components/summary/example-summary-grouped-with-errors.njk b/src/components/summary/example-summary-grouped-with-errors.njk index 9a703d22bc..7e8a315b85 100644 --- a/src/components/summary/example-summary-grouped-with-errors.njk +++ b/src/components/summary/example-summary-grouped-with-errors.njk @@ -5,11 +5,11 @@ { "groups": [ { - "groupTitle": "Summary - Section Title", + "title": "Summary - Section Title", "rows": [ { - "rowTitle": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?", - "rowItems": [ + "title": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?", + "items": [ { "valueList": [ { @@ -27,10 +27,10 @@ ] }, { - "rowTitle": "What was the value of the business's total sales of food?", + "title": "What was the value of the business's total sales of food?", "errorMessage": "Change one or more of the figures so they sum to £600", "error": true, - "rowItems": [ + "items": [ { "valueList": [ { @@ -48,9 +48,9 @@ ] }, { - "rowTitle": "What was the value of the business's total sales of alcohol, confectionery and tobacco?", + "title": "What was the value of the business's total sales of alcohol, confectionery and tobacco?", "error": true, - "rowItems": [ + "items": [ { "valueList": [ { @@ -68,9 +68,9 @@ ] }, { - "rowTitle": "What was the value of the business's total sales of clothing and footwear?", + "title": "What was the value of the business's total sales of clothing and footwear?", "error": true, - "rowItems": [ + "items": [ { "valueList": [ { diff --git a/src/components/summary/example-summary-grouped.njk b/src/components/summary/example-summary-grouped.njk index 1c4052d8ce..c2159de6ff 100644 --- a/src/components/summary/example-summary-grouped.njk +++ b/src/components/summary/example-summary-grouped.njk @@ -6,14 +6,14 @@ onsSummary({ "summaries": [ { - "summaryTitle": "John Doe", + "title": "John Doe", "groups": [ { - "groupTitle": "Personal details", + "title": "Personal details", "rows": [ { - "rowTitle": "Are you John Doe?", - "rowItems": [ + "title": "Are you John Doe?", + "items": [ { "valueList": [ { @@ -31,8 +31,8 @@ ] }, { - "rowTitle": "What's your date of birth?", - "rowItems": [ + "title": "What's your date of birth?", + "items": [ { "valueList": [ { @@ -50,8 +50,8 @@ ] }, { - "rowTitle": "What is your sex?", - "rowItems": [ + "title": "What is your sex?", + "items": [ { "valueList": [ { @@ -71,11 +71,11 @@ ] }, { - "groupTitle": "Identity and health", + "title": "Identity and health", "rows": [ { - "rowTitle": "What is your country of birth?", - "rowItems": [ + "title": "What is your country of birth?", + "items": [ { "valueList": [ { @@ -93,8 +93,8 @@ ] }, { - "rowTitle": "What passports do you hold?", - "rowItems": [ + "title": "What passports do you hold?", + "items": [ { "valueList": [ { @@ -114,11 +114,11 @@ ] }, { - "groupTitle": "Qualifications", + "title": "Qualifications", "rows": [ { - "rowTitle": "Have you completed an apprenticeship?", - "rowItems": [ + "title": "Have you completed an apprenticeship?", + "items": [ { "valueList": [ { @@ -136,8 +136,8 @@ ] }, { - "rowTitle": "Have you achieved a GCSE or equivalent qualification?", - "rowItems": [ + "title": "Have you achieved a GCSE or equivalent qualification?", + "items": [ { "valueList": [ { @@ -157,12 +157,12 @@ ] }, { - "groupTitle": "Employment history", + "title": "Employment history", "rows": [ { - "rowItems": [ + "items": [ { - "rowTitle": "Name of UK company", + "title": "Name of UK company", "valueList": [ { "text": "Company A" @@ -182,7 +182,7 @@ ] }, { - "rowTitle": "Head office location", + "title": "Head office location", "valueList": [ { "text": "Cardiff" @@ -197,7 +197,7 @@ ] }, { - "rowTitle": "Is this UK company your current employer?", + "title": "Is this UK company your current employer?", "valueList": [ { "text": "No" @@ -214,9 +214,9 @@ ] }, { - "rowItems": [ + "items": [ { - "rowTitle": "Name of UK company", + "title": "Name of UK company", "valueList": [ { "text": "Company A" @@ -236,7 +236,7 @@ ] }, { - "rowTitle": "Head office location", + "title": "Head office location", "valueList": [ { "text": "Newport" @@ -251,7 +251,7 @@ ] }, { - "rowTitle": "Is this UK company your current employer?", + "title": "Is this UK company your current employer?", "valueList": [ { "text": "Yes" @@ -277,13 +277,13 @@ } }, { - "groupTitle": "Spending", + "title": "Spending", "rows": [ { - "rowTitle": "What are your monthly household expenses?", - "rowItems": [ + "title": "What are your monthly household expenses?", + "items": [ { - "rowTitle": "Food", + "title": "Food", "valueList": [ { "text": "£50.00" @@ -298,7 +298,7 @@ ] }, { - "rowTitle": "Utilities", + "title": "Utilities", "valueList": [ { "text": "£65.00" @@ -313,7 +313,7 @@ ] }, { - "rowTitle": "Transport", + "title": "Transport", "valueList": [ { "text": "£70.00" @@ -328,7 +328,7 @@ ] }, { - "rowTitle": "Other", + "title": "Other", "valueList": [ { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." diff --git a/src/components/summary/example-summary-household.njk b/src/components/summary/example-summary-household.njk index 0ae06372c9..c4f9099078 100644 --- a/src/components/summary/example-summary-household.njk +++ b/src/components/summary/example-summary-household.njk @@ -9,8 +9,8 @@ { "rows": [ { - "rowTitle": "Joe Bloggs (You)", - "rowItems": [ + "title": "Joe Bloggs (You)", + "items": [ { "iconType": "person", "actions": [ @@ -24,8 +24,8 @@ ] }, { - "rowTitle": "Barry Scott", - "rowItems": [ + "title": "Barry Scott", + "items": [ { "iconType": "person", "actions": [ @@ -44,8 +44,8 @@ ] }, { - "rowTitle": "Wilhelmina Susannah Clementine-Smith", - "rowItems": [ + "title": "Wilhelmina Susannah Clementine-Smith", + "items": [ { "iconType": "person", "actions": [ diff --git a/src/components/summary/example-summary-hub-minimal.njk b/src/components/summary/example-summary-hub-minimal.njk index bfe57d29c2..aeafa38f6e 100644 --- a/src/components/summary/example-summary-hub-minimal.njk +++ b/src/components/summary/example-summary-hub-minimal.njk @@ -9,8 +9,8 @@ { "rows": [ { - "rowTitle": "People who live here", - "rowItems": [ + "title": "People who live here", + "items": [ { "iconType": "check", "iconVisuallyHiddenText": "Section complete", @@ -25,8 +25,8 @@ ] }, { - "rowTitle": "Mary Smith (You)", - "rowItems": [ + "title": "Mary Smith (You)", + "items": [ { "iconType": "check", "iconVisuallyHiddenText": "Section complete", @@ -41,8 +41,8 @@ ] }, { - "rowTitle": "John Smith", - "rowItems": [ + "title": "John Smith", + "items": [ { "actions": [ { @@ -55,8 +55,8 @@ ] }, { - "rowTitle": "Billy Smith", - "rowItems": [ + "title": "Billy Smith", + "items": [ { "actions": [ { diff --git a/src/components/summary/example-summary-hub.njk b/src/components/summary/example-summary-hub.njk index 49073106fd..9b1c7bb31f 100644 --- a/src/components/summary/example-summary-hub.njk +++ b/src/components/summary/example-summary-hub.njk @@ -9,8 +9,8 @@ { "rows": [ { - "rowTitle": "People who live here", - "rowItems": [ + "title": "People who live here", + "items": [ { "iconType": "check", "valueList": [ @@ -29,8 +29,8 @@ ] }, { - "rowTitle": "Accommodation", - "rowItems": [ + "title": "Accommodation", + "items": [ { "iconType": "check", "valueList": [ @@ -49,8 +49,8 @@ ] }, { - "rowTitle": "Mary Smith (You)", - "rowItems": [ + "title": "Mary Smith (You)", + "items": [ { "iconType": "check", "valueList": [ @@ -69,8 +69,8 @@ ] }, { - "rowTitle": "John Smith", - "rowItems": [ + "title": "John Smith", + "items": [ { "valueList": [ { @@ -88,8 +88,8 @@ ] }, { - "rowTitle": "Billy Smith", - "rowItems": [ + "title": "Billy Smith", + "items": [ { "valueList": [ { @@ -107,8 +107,8 @@ ] }, { - "rowTitle": "Sally Smith", - "rowItems": [ + "title": "Sally Smith", + "items": [ { "valueList": [ { @@ -126,8 +126,8 @@ ] }, { - "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)", - "rowItems": [ + "title": "Wilhelmina Susannah Clementine-Smith (Visitor)", + "items": [ { "valueList": [ { @@ -145,8 +145,8 @@ ] }, { - "rowTitle": "Vera Jones (Visitor)", - "rowItems": [ + "title": "Vera Jones (Visitor)", + "items": [ { "valueList": [ { diff --git a/src/components/summary/example-summary-multiple.njk b/src/components/summary/example-summary-multiple.njk index 403b6ecc4f..4394e7a7f6 100644 --- a/src/components/summary/example-summary-multiple.njk +++ b/src/components/summary/example-summary-multiple.njk @@ -3,15 +3,15 @@ onsSummary({ "summaries": [ { - "summaryTitle": "Summary - Section Title", + "title": "Summary - Section Title", "groups": [ { "rows": [ { - "rowTitle": "What are your monthly household expenses?", - "rowItems": [ + "title": "What are your monthly household expenses?", + "items": [ { - "rowTitle": "Food", + "title": "Food", "valueList": [ { "text": "£50.00" @@ -26,7 +26,7 @@ ] }, { - "rowTitle": "Utilities", + "title": "Utilities", "valueList": [ { "text": "£65.00" @@ -41,7 +41,7 @@ ] }, { - "rowTitle": "Transport", + "title": "Transport", "valueList": [ { "text": "£70.00" @@ -56,7 +56,7 @@ ] }, { - "rowTitle": "Other", + "title": "Other", "valueList": [ { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." diff --git a/src/components/summary/example-summary-no-action.njk b/src/components/summary/example-summary-no-action.njk index e9e7fd9a1f..167516665f 100644 --- a/src/components/summary/example-summary-no-action.njk +++ b/src/components/summary/example-summary-no-action.njk @@ -5,11 +5,11 @@ { "groups": [ { - "groupTitle": "Turnover", + "title": "Turnover", "rows": [ { - "rowTitle": "What are the dates of the sales period you are reporting for?", - "rowItems": [ + "title": "What are the dates of the sales period you are reporting for?", + "items": [ { "valueList": [ { @@ -20,8 +20,8 @@ ] }, { - "rowTitle": "Total turnover", - "rowItems": [ + "title": "Total turnover", + "items": [ { "valueList": [ { diff --git a/src/components/summary/example-summary.njk b/src/components/summary/example-summary.njk index 7518d9341a..15249099ad 100644 --- a/src/components/summary/example-summary.njk +++ b/src/components/summary/example-summary.njk @@ -8,12 +8,12 @@ { "placeholderText": 'test', "id": "turnover", - "groupTitle": "Turnover", + "title": "Turnover", "rows": [ { "id": "sales-dates-row", - "rowTitle": "What are the dates of the sales period you are reporting for?", - "rowItems": [ + "title": "What are the dates of the sales period you are reporting for?", + "items": [ { "id": "sales-dates", "valueList": [ @@ -32,9 +32,9 @@ ] }, { - "rowTitle": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?", + "title": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?", "id": "sales-value-row", - "rowItems": [ + "items": [ { "id": "sales-value", "valueList": [ @@ -54,8 +54,8 @@ }, { "id": "sales-reasons-row", - "rowTitle": "Please indicate the reasons for any changes in the total turnover", - "rowItems": [ + "title": "Please indicate the reasons for any changes in the total turnover", + "items": [ { "id": "sales-reasons", "valueList": [ @@ -79,8 +79,8 @@ }, { "id": "sales-detail-row", - "rowTitle": "Please describe the changes in total turnover in more detail", - "rowItems": [ + "title": "Please describe the changes in total turnover in more detail", + "items": [ { "id": "sales-detail", "valueList": [ diff --git a/src/components/table-of-contents/example-table-of-contents-sticky-full-page.njk b/src/components/table-of-contents/example-table-of-contents-sticky-full-page.njk index 1cc346a0be..14649a0c42 100644 --- a/src/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +++ b/src/components/table-of-contents/example-table-of-contents-sticky-full-page.njk @@ -24,7 +24,7 @@ layout: ~ ] }, "footer": { - "OGLLink": { + "oglLink": { "pre": 'All content is available under the', "link": 'Open Government Licence v3.0', "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', diff --git a/src/components/table-of-contents/toc.spec.js b/src/components/table-of-contents/toc.spec.js index 9b040392a9..dd994c002b 100644 --- a/src/components/table-of-contents/toc.spec.js +++ b/src/components/table-of-contents/toc.spec.js @@ -1,5 +1,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; +const { setTimeout } = require('node:timers/promises'); + describe('script: table-of-contents', () => { beforeEach(async () => { await setTestPage( @@ -55,7 +57,7 @@ describe('script: table-of-contents', () => { ['section3', 'Third section'], ])('marks "%s" as the current section', async (sectionId, sectionTitle) => { await page.$eval(`#${sectionId}`, (node) => node.scrollIntoView()); - await page.waitForTimeout(250); + await setTimeout(250); const activeSection = await page.$eval('.ons-toc__link-active', (node) => node.innerText.trim()); expect(activeSection).toBe(sectionTitle); @@ -154,7 +156,7 @@ describe('script: table-of-contents-fixed-position', () => { window.scrollTo(0, 1000); }); - await page.waitForTimeout(250); + await setTimeout(250); const leftColumn = await page.$('#sticky-container'); const boundingBox = await leftColumn.boundingBox(); diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js index bfadc29c6b..aa25819294 100644 --- a/src/components/table/table.spec.js +++ b/src/components/table/table.spec.js @@ -31,7 +31,7 @@ describe('script: table', () => { }); it('should show both shadow elements', async () => { - await page.waitForTimeout(200); + await new Promise((r) => setTimeout(r, 200)); const leftShadowVisibleCount = await page.$$eval('.ons-table__left-shadow.ons-visible', (nodes) => nodes.length); expect(leftShadowVisibleCount).not.toBe(0); diff --git a/src/components/tabs/_macro-options.md b/src/components/tabs/_macro-options.md index 2e1e054df6..59e527582a 100644 --- a/src/components/tabs/_macro-options.md +++ b/src/components/tabs/_macro-options.md @@ -1,11 +1,11 @@ -| Name | Type | Required | Description | -| ------------------ | --------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | true | The `h2` level heading for the tabs `section` element required to give context for screen readers. Visually hidden when tabs are visible. | -| titleTag | string | false | The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2` | -| titleClasses | string | false | Additional utility classes to be added to titleTag | -| tabs | array`<tab>` | true | An array of [tabs](#tab) | -| variants | array`<string>` | false | Adjust the component using available variants: “details” | -| noInitialActiveTab | boolean | false | Do not initially show an active tab when `true`. | +| Name | Type | Required | Description | +| ------------------ | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| title | string | true | The `h2` level heading for the tabs `section` element required to give context for screen readers. Visually hidden when tabs are visible. | +| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | +| titleClasses | string | false | Additional utility classes to be added to title | +| tabs | array`<tab>` | true | An array of [tabs](#tab) | +| variants | array`<string>` | false | Adjust the component using available variants: “details” | +| noInitialActiveTab | boolean | false | Do not initially show an active tab when `true`. | ## Tab diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk index b6efd8168d..9edf646b85 100644 --- a/src/components/tabs/_macro.njk +++ b/src/components/tabs/_macro.njk @@ -8,9 +8,9 @@ {% endset %} <section class="{{ classes }}" {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}> - {% set titleTag = params.titleTag | default("h2") %} - {% set openingTag = "<" + titleTag %} - {% set closingTag = "</" + titleTag + ">" %} + {% set titleTag = params.headingLevel | default(2) %} + {% set openingTag = "<h" + titleTag %} + {% set closingTag = "</h" + titleTag + ">" %} {{ openingTag | safe }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no{{ ' ' + params.titleClasses if params.titleClasses else '' }}">{{ params.title }}{{ closingTag | safe }} diff --git a/src/components/tabs/_macro.spec.js b/src/components/tabs/_macro.spec.js index 4b3dd4cbdf..87597434e2 100644 --- a/src/components/tabs/_macro.spec.js +++ b/src/components/tabs/_macro.spec.js @@ -83,12 +83,12 @@ describe('macro: tabs', () => { const $ = cheerio.load( renderComponent('tabs', { ...EXAMPLE_TABS, - titleTag: 'h4', + headingLevel: 4, }), ); - const titleTag = $('.ons-tabs__title')[0].tagName; - expect(titleTag).toBe('h4'); + const expectedTitleTag = $('.ons-tabs__title')[0].tagName; + expect(expectedTitleTag).toBe('h4'); }); it('has the provided tab id attributes', () => { diff --git a/src/components/tabs/example-tabs-details.njk b/src/components/tabs/example-tabs-details.njk index 0f206a7522..b36219e076 100644 --- a/src/components/tabs/example-tabs-details.njk +++ b/src/components/tabs/example-tabs-details.njk @@ -16,7 +16,7 @@ "alt": "Youtube video" }, "title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL', - "linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube' + "videoLinkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube' }) }} {% from "components/tabs/_macro.njk" import onsTabs %} diff --git a/src/foundations/text-indent/example-text-indent.njk b/src/components/text-indent/example-text-indent.njk similarity index 100% rename from src/foundations/text-indent/example-text-indent.njk rename to src/components/text-indent/example-text-indent.njk diff --git a/src/components/timeline/_macro-options.md b/src/components/timeline/_macro-options.md index fc599e766b..a2cddc4bb8 100644 --- a/src/components/timeline/_macro-options.md +++ b/src/components/timeline/_macro-options.md @@ -1,8 +1,8 @@ -| Name | Type | Required | Description | -| -------- | ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- | -| classes | string | false | Classes to add to the component | -| titleTag | string | false | The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2`. | -| items | array`<TimelineItems>` | true | An array of [timeline items](#timelineitems) | +| Name | Type | Required | Description | +| ------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| classes | string | false | Classes to add to the component | +| headingLevel | int | false | Number used to determine the heading level of the titles. Use to ensure the titles have the correct semantic order on the page. Defaults to `2`. | +| timelineItems | array`<TimelineItems>` | true | An array of [timeline items](#timelineitems) | ## TimelineItems diff --git a/src/components/timeline/_macro.njk b/src/components/timeline/_macro.njk index f50742f783..52d65b6f4a 100644 --- a/src/components/timeline/_macro.njk +++ b/src/components/timeline/_macro.njk @@ -2,10 +2,10 @@ {% from "components/list/_macro.njk" import onsList %} <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}"> - {% set titleTag = params.titleTag | default("h2") %} - {% set openingTag = "<" + titleTag %} - {% set closingTag = "</" + titleTag + ">" %} - {% for item in params.items %} + {% set titleTag = params.headingLevel | default(2) %} + {% set openingTag = "<h" + titleTag %} + {% set closingTag = "</h" + titleTag + ">" %} + {% for item in params.timelineItems %} <div class="ons-timeline__item"> {{ openingTag | safe }} class="ons-timeline__heading">{{ item.heading }}{{ closingTag | safe }} {% if item.itemsList %} diff --git a/src/components/timeline/_macro.spec.js b/src/components/timeline/_macro.spec.js index 63f46bd9e4..555f0c806c 100644 --- a/src/components/timeline/_macro.spec.js +++ b/src/components/timeline/_macro.spec.js @@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_TIMELINE = { - items: [ + timelineItems: [ { heading: 'January 2020', content: 'Timeline entry 1', @@ -63,10 +63,10 @@ describe('macro: timeline', () => { expect($secondItem.text()).toContain('Timeline entry 2'); }); - it('renders a heading based upon titleTag parameter', () => { + it('renders a heading based upon `headingLevel` parameter', () => { const EXAMPLE_TIMELINE_WITH_TITLE_TAG = { ...EXAMPLE_TIMELINE, - titleTag: 'h3', + headingLevel: 3, }; const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE_WITH_TITLE_TAG)); const $firstItem = $('.ons-timeline__item:nth-child(1)'); diff --git a/src/components/timeline/example-timeline.njk b/src/components/timeline/example-timeline.njk index 5e5bd8d88b..1e9a133bd6 100644 --- a/src/components/timeline/example-timeline.njk +++ b/src/components/timeline/example-timeline.njk @@ -2,7 +2,7 @@ {{ onsTimeline({ - "items": [ + "timelineItems": [ { "heading": 'September to October 2020', "itemsList": [ diff --git a/src/components/timeout-modal/timeout-modal.spec.js b/src/components/timeout-modal/timeout-modal.spec.js index 8ed4c6e28d..fa2538ff96 100644 --- a/src/components/timeout-modal/timeout-modal.spec.js +++ b/src/components/timeout-modal/timeout-modal.spec.js @@ -14,20 +14,22 @@ const EXAMPLE_TIMEOUT_MODAL_BASIC = { endWithFullStop: true, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: timeout modal', () => { describe('when the page loads', () => { beforeEach(async () => { const component = renderComponent('timeout-modal', { ...EXAMPLE_TIMEOUT_MODAL_BASIC, showModalTimeInSeconds: 58 }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); it('displays the modal after the correct number of seconds', async () => { - await page.waitForTimeout(2000); + await setTimeout(2000); const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db')); expect(modalIsVisible).toBe(true); }); @@ -42,17 +44,17 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); it('shows the time counting down', async () => { const timeAtStart = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML); - await page.waitForTimeout(1000); + await setTimeout(1000); const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', (element) => element.innerHTML); expect(timeAfterOneSecond).not.toEqual(timeAtStart); }); @@ -70,10 +72,10 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); @@ -95,10 +97,10 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); @@ -120,10 +122,10 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); @@ -145,10 +147,10 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); @@ -170,10 +172,10 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); @@ -183,7 +185,7 @@ describe('script: timeout modal', () => { }); it('then redirects to the provided `redirectUrl`', async () => { - await page.waitForTimeout(2000); + await setTimeout(2000); expect(page.url()).toContain('#!'); }); }); @@ -197,10 +199,10 @@ describe('script: timeout modal', () => { }); const template = ` - <div class="ons-page"> - ${component} - </div> - `; + <div class="ons-page"> + ${component} + </div> + `; await setTestPage('/test', template); }); @@ -213,11 +215,14 @@ describe('script: timeout modal', () => { it('closes the modal', async () => { const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db')); + + await setTimeout(50); + expect(modalIsVisible).toBe(false); }); it('restarts the timer and displays the modal after the correct number of seconds', async () => { - await page.waitForTimeout(2000); + await setTimeout(2000); const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db')); expect(modalIsVisible).toBe(true); }); diff --git a/src/components/timeout-panel/timeout-panel.spec.js b/src/components/timeout-panel/timeout-panel.spec.js index c2b8b5541d..db8392c930 100644 --- a/src/components/timeout-panel/timeout-panel.spec.js +++ b/src/components/timeout-panel/timeout-panel.spec.js @@ -13,6 +13,8 @@ const EXAMPLE_TIMEOUT_PANEL_BASIC = { endWithFullStop: true, }; +const { setTimeout } = require('node:timers/promises'); + describe('script: timeout panel', () => { describe('when the page loads', () => { beforeEach(async () => { @@ -29,7 +31,7 @@ describe('script: timeout panel', () => { it('shows the time counting down', async () => { const timeAtStart = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML); - await page.waitForTimeout(1000); + await setTimeout(1000); const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer', (element) => element.innerHTML); expect(timeAfterOneSecond).not.toEqual(timeAtStart); }); @@ -130,7 +132,7 @@ describe('script: timeout panel', () => { }); it('then redirects to the provided `redirectUrl`', async () => { - await page.waitForTimeout(2000); + await setTimeout(2000); expect(page.url()).toContain('#!'); }); }); diff --git a/src/components/video/_macro-options.md b/src/components/video/_macro-options.md index 5ee2046ede..1c99d955d2 100644 --- a/src/components/video/_macro-options.md +++ b/src/components/video/_macro-options.md @@ -3,7 +3,7 @@ | videoEmbedUrl | string | true | The embed URL to the video hosted on YouTube or Vimeo, for example, `https://www.youtube.com/embed/{ video ID }` or `https://player.vimeo.com/video/{ video ID }` | | videoLinkUrl | string | true | The URL to the video hosted on YouTube or Vimeo, for example, `https://www.youtube.com/watch?v={ video ID }` or `https://vimeo.com/video/{ video ID }`. Used to link to the video when cookies are not enabled | | title | string | true | Set a descriptive title for the video set by the HTML `title` attribute of the embedded video `<iframe>` | -| linkText | string | true | The text to be shown when cookies are not enabled e.g. "Watch the {title} on Youtube" | +| videoLinkText | string | true | The text to be shown when cookies are not enabled e.g. "Watch the {title} on Youtube" | | image | `Object<Image>` | true | An object containing path attributes for [the video cover image](#image) when cookies are not enabled | ## Image diff --git a/src/components/video/_macro.njk b/src/components/video/_macro.njk index 1c30344c0d..16cc56bb9f 100644 --- a/src/components/video/_macro.njk +++ b/src/components/video/_macro.njk @@ -11,15 +11,15 @@ loading="lazy" /> {% endif %} - <span class="ons-video__link-text ons-u-mt-2xs">{{ params.linkText }}</span> + <span class="ons-video__link-text ons-u-mt-2xs">{{ params.videoLinkText }}</span> {% endset %} <div class="ons-video ons-js-video"> {{ onsExternalLink({ - "url": params.videoLinkURL, + "url": params.videoLinkUrl, "classes": "ons-video__link ons-js-video-placeholder ons-u-db", - "linkText": linkContents + "text": linkContents }) }} <iframe diff --git a/src/components/video/_macro.spec.js b/src/components/video/_macro.spec.js index d81b2dbbee..0182eec08c 100644 --- a/src/components/video/_macro.spec.js +++ b/src/components/video/_macro.spec.js @@ -7,9 +7,9 @@ import { renderComponent } from '../../tests/helpers/rendering'; const EXAMPLE_VIDEO_YOUTUBE = { videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo', - videoLinkURL: 'https://www.youtube.com/watch?v=_EGJlvkgbPo', + videoLinkUrl: 'https://www.youtube.com/watch?v=_EGJlvkgbPo', title: 'Census 2021 promotional TV advert', - linkText: 'Example link text', + videoLinkText: 'Example link text', image: { smallSrc: 'example-small.png', largeSrc: 'example-large.png', diff --git a/src/components/video/example-video.njk b/src/components/video/example-video.njk index b4d9b7e7f0..fc49537d8e 100644 --- a/src/components/video/example-video.njk +++ b/src/components/video/example-video.njk @@ -2,13 +2,13 @@ {{ onsVideo({ "videoEmbedUrl": 'https://www.youtube.com/embed/OwYVwPPxPj4', - "videoLinkURL": 'https://www.youtube.com/watch?v=OwYVwPPxPj4', + "videoLinkUrl": 'https://www.youtube.com/watch?v=OwYVwPPxPj4', "image": { "largeSrc": '/ds-img/youtube-example-cover.png', "smallSrc": '/ds-img/youtube-example-cover.png', "alt": "Youtube video" }, "title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL', - "linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube' + "videoLinkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube' }) }} diff --git a/src/components/video/video.spec.js b/src/components/video/video.spec.js index 5a632e8f03..6b009853ba 100644 --- a/src/components/video/video.spec.js +++ b/src/components/video/video.spec.js @@ -1,125 +1,149 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; +const { setTimeout } = require('node:timers/promises'); + const EXAMPLE_VIDEO_YOUTUBE = { videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo', title: 'Census 2021 promotional TV advert', - linkText: 'Example link text', + videoLinkText: 'Example link text', }; + const EXAMPLE_VIDEO_VIMEO = { videoEmbedUrl: 'https://player.vimeo.com/video/838454524?h=24551a3754', title: 'Vimeo Video', - linkText: 'Example link text', + videoLinkText: 'Example link text', }; const EXAMPLE_APPROVED_COOKIE = JSON.stringify({ campaigns: true }).replace(/"/g, "'"); describe('script: video', () => { - beforeEach(async () => { - const client = await page.target().createCDPSession(); - await client.send('Network.clearBrowserCookies'); - }); - - it('should show the placeholder content', async () => { - await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)); - - const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) => - window.getComputedStyle(node).getPropertyValue('display'), - ); - expect(displayStyle).toBe('block'); - }); - - it('should not show the iframe', async () => { - await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)); - - const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => window.getComputedStyle(node).getPropertyValue('display')); - expect(displayStyle).toBe('none'); - }); - - describe('when cookies are accepted on page load', () => { + describe('YouTube videos', () => { beforeEach(async () => { - await page.setCookie({ - name: 'ons_cookie_policy', - value: EXAMPLE_APPROVED_COOKIE, - }); + const client = await page.createCDPSession(); + await client.send('Network.clearBrowserCookies'); + }); + it('should show the placeholder content', async () => { await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)); - }); - it('should hide the placeholder content', async () => { const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) => window.getComputedStyle(node).getPropertyValue('display'), ); - expect(displayStyle).toBe('none'); - }, 10000); + expect(displayStyle).toBe('block'); + }); + + it('should not show the iframe', async () => { + await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)); - it('should show the iframe', async () => { const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => window.getComputedStyle(node).getPropertyValue('display'), ); - expect(displayStyle).toBe('block'); - }, 10000); + expect(displayStyle).toBe('none'); + }); - it('should add the correct modifier class', async () => { - const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe')); - expect(hasClass).toBe(true); - }, 10000); + describe('when cookies are accepted on page load', () => { + beforeEach(async () => { + await page.setCookie({ + name: 'ons_cookie_policy', + value: EXAMPLE_APPROVED_COOKIE, + }); - it('should not add dnt to YouTube videos', async () => { - const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); - expect(src.includes('?dnt=1')).toBe(false); - }, 10000); + await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)); + }); - it('should add dnt to Vimeo videos', async () => { - await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_VIMEO)); + it('should hide the placeholder content', async () => { + const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) => + window.getComputedStyle(node).getPropertyValue('display'), + ); + expect(displayStyle).toBe('none'); + }, 10000); + + it('should show the iframe', async () => { + const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => + window.getComputedStyle(node).getPropertyValue('display'), + ); + expect(displayStyle).toBe('block'); + }, 10000); + + it('should add the correct modifier class', async () => { + const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe')); + expect(hasClass).toBe(true); + }, 10000); + + it('should not add dnt', async () => { + const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); + expect(src.includes('?dnt=1')).toBe(false); + }, 10000); + }); - const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); - expect(src.includes('?dnt=1')).toBe(true); - }, 10000); - }); + describe('when cookies are accepted via banner', () => { + beforeEach(async () => { + await setTestPage( + '/test', + `${renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)} + <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`, + ); + await page.click('.ons-js-accept-cookies'); + }); - describe('when cookies are accepted via banner', () => { - beforeEach(async () => { - await setTestPage( - '/test', - `${renderComponent('video', EXAMPLE_VIDEO_YOUTUBE)} - <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`, - ); - await page.click('.ons-js-accept-cookies'); - }); + it('should hide the placeholder content', async () => { + const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) => + window.getComputedStyle(node).getPropertyValue('display'), + ); + expect(displayStyle).toBe('none'); + }); - it('should hide the placeholder content', async () => { - const displayStyle = await page.$eval('.ons-js-video-placeholder', (node) => - window.getComputedStyle(node).getPropertyValue('display'), - ); - expect(displayStyle).toBe('none'); + it('should show the iframe', async () => { + const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => + window.getComputedStyle(node).getPropertyValue('display'), + ); + expect(displayStyle).toBe('block'); + }); + + it('should add the correct modifier class', async () => { + const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe')); + expect(hasClass).toBe(true); + }, 10000); + + it('should not add dnt', async () => { + const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); + expect(src.includes('?dnt=1')).toBe(false); + }, 10000); }); + }); - it('should show the iframe', async () => { - const displayStyle = await page.$eval('.ons-js-video-iframe', (node) => - window.getComputedStyle(node).getPropertyValue('display'), - ); - expect(displayStyle).toBe('block'); + describe('Vimeo videos', () => { + describe('when cookies are accepted on page load', () => { + it('should add dnt', async () => { + await page.setCookie({ + name: 'ons_cookie_policy', + value: EXAMPLE_APPROVED_COOKIE, + }); + await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_VIMEO)); + + const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); + + await setTimeout(100); + + expect(src.includes('?dnt=1')).toBe(true); + }, 10000); }); - it('should add the correct modifier class', async () => { - const hasClass = await page.$eval('.ons-js-video', (node) => node.classList.contains('ons-video--hasIframe')); - expect(hasClass).toBe(true); - }, 10000); - it('should not add dnt to YouTube videos', async () => { - const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); - expect(src.includes('?dnt=1')).toBe(false); - }, 10000); - - it('should add dnt to Vimeo videos', async () => { - await setTestPage( - '/test', - `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)} - <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`, - ); - await page.click('.ons-js-accept-cookies'); + describe('when cookies are accepted on page load', () => { + it('when cookies are accepted via banner, should add dnt', async () => { + await setTestPage( + '/test', + `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)} + <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`, + ); + await page.click('.ons-js-accept-cookies'); - const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); - expect(src.includes('?dnt=1')).toBe(true); - }, 10000); + const src = await page.$eval('.ons-js-video-iframe', (node) => node.getAttribute('src')); + + await setTimeout(100); + + expect(src.includes('?dnt=1')).toBe(true); + }, 10000); + }); }); }); diff --git a/src/components/helpers/_grid.scss b/src/foundations/grid/_grid.scss similarity index 100% rename from src/components/helpers/_grid.scss rename to src/foundations/grid/_grid.scss diff --git a/src/foundations/grid/example-grid-12.njk b/src/foundations/grid/example-grid-12.njk index 5cabaa16d5..5418fc1acb 100644 --- a/src/foundations/grid/example-grid-12.njk +++ b/src/foundations/grid/example-grid-12.njk @@ -2,7 +2,7 @@ layout: layouts/example --- -{% from "components/helpers/grid.njk" import dsExampleGrid %} +{% from "foundations/grid/grid.njk" import dsExampleGrid %} {{ dsExampleGrid({ diff --git a/src/foundations/grid/example-grid-7-4.njk b/src/foundations/grid/example-grid-7-4.njk index 4343985963..4a1eb68448 100644 --- a/src/foundations/grid/example-grid-7-4.njk +++ b/src/foundations/grid/example-grid-7-4.njk @@ -2,7 +2,7 @@ layout: layouts/example --- -{% from "components/helpers/grid.njk" import dsExampleGrid %} +{% from "foundations/grid/grid.njk" import dsExampleGrid %} {{ dsExampleGrid({ diff --git a/src/foundations/grid/example-grid-8.njk b/src/foundations/grid/example-grid-8.njk index b7b9921af0..49b023c2d0 100644 --- a/src/foundations/grid/example-grid-8.njk +++ b/src/foundations/grid/example-grid-8.njk @@ -2,7 +2,7 @@ layout: layouts/example --- -{% from "components/helpers/grid.njk" import dsExampleGrid %} +{% from "foundations/grid/grid.njk" import dsExampleGrid %} {{ dsExampleGrid({ diff --git a/src/foundations/grid/example-grid-combo.njk b/src/foundations/grid/example-grid-combo.njk index d7932c1e1e..d88c24b947 100644 --- a/src/foundations/grid/example-grid-combo.njk +++ b/src/foundations/grid/example-grid-combo.njk @@ -2,7 +2,7 @@ layout: layouts/example --- -{% from "components/helpers/grid.njk" import dsExampleGrid %} +{% from "foundations/grid/grid.njk" import dsExampleGrid %} {{ dsExampleGrid({ diff --git a/src/components/helpers/grid.njk b/src/foundations/grid/grid.njk similarity index 100% rename from src/components/helpers/grid.njk rename to src/foundations/grid/grid.njk diff --git a/src/foundations/page-template/example-base-page-template-block-areas.njk b/src/foundations/page-template/example-base-page-template-block-areas.njk index acbb5d38c0..813daf7f96 100644 --- a/src/foundations/page-template/example-base-page-template-block-areas.njk +++ b/src/foundations/page-template/example-base-page-template-block-areas.njk @@ -125,7 +125,7 @@ }} </div> - <div class="ons-grid ons-grid--flex ons-grid--column@xxs@m"> + <div class="ons-grid ons-grid-flex ons-grid-flex--column@xxs@m"> <div class="ons-grid__col ons-grid__col--flex ons-u-flex-grow"> <div class="ons-ds-block"> <div class="ons-ds-block__label">block: main</div> @@ -153,9 +153,9 @@ ] } ], - "OGLLink": { + "oglLink": { "pre": 'All content is available under the', - "link": 'Open Government Licence v3.0', + "text": 'Open Government Licence v3.0', "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', "post": ', except where otherwise stated' } diff --git a/src/foundations/page-template/example-basic.njk b/src/foundations/page-template/example-basic.njk index 80ce049edf..feea55574c 100644 --- a/src/foundations/page-template/example-basic.njk +++ b/src/foundations/page-template/example-basic.njk @@ -10,7 +10,7 @@ layout: ~ "title": "Service name" }, "footer": { - "OGLLink": { + "oglLink": { "pre": 'All content is available under the', "link": 'Open Government Licence v3.0', "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', diff --git a/src/foundations/page-template/example-custom.njk b/src/foundations/page-template/example-custom.njk index b2a4ad4fc0..f96515abc4 100644 --- a/src/foundations/page-template/example-custom.njk +++ b/src/foundations/page-template/example-custom.njk @@ -21,13 +21,13 @@ layout: ~ "languages": [ { "url": "#0", - "ISOCode": "en", + "isoCode": "en", "text": "English", "current": true }, { "url": "#0", - "ISOCode": "cy", + "isoCode": "cy", "text": "Cymraeg", "current": false } @@ -62,7 +62,7 @@ layout: ~ ] } ], - "OGLLink": { + "oglLink": { "pre": 'All content is available under the', "link": 'Open Government Licence v3.0', "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/', diff --git a/src/js/cookies-settings.spec.js b/src/js/cookies-settings.spec.js index d95f267f94..7d27596ae0 100644 --- a/src/js/cookies-settings.spec.js +++ b/src/js/cookies-settings.spec.js @@ -38,7 +38,7 @@ const EXAMPLE_PART_COOKIES_SETTINGS_PAGE = ` describe('script: cookies-settings', () => { beforeEach(async () => { - const client = await page.target().createCDPSession(); + const client = await page.createCDPSession(); await client.send('Network.clearBrowserCookies'); }); diff --git a/src/layout/_template.njk b/src/layout/_template.njk index d6b2e03a32..3b727edad1 100644 --- a/src/layout/_template.njk +++ b/src/layout/_template.njk @@ -1,37 +1,37 @@ {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %} {% from "components/header/_macro.njk" import onsHeader %} {% from "components/footer/_macro.njk" import onsFooter %} -{% set currentLanguageISOCode = "en" %} +{% set currentLanguageIsoCode = "en" %} {% if pageConfig and pageConfig.header.language and pageConfig.header.language.languages %} {% set currentLanguage = pageConfig.header.language.languages | selectattr("current") | first %} - {% set currentLanguageISOCode = currentLanguage.ISOCode %} + {% set currentLanguageIsoCode = currentLanguage.isoCode %} {% set otherLanguage = pageConfig.header.language.languages | rejectattr("current") | first %} - {% set otherLanguageISOCode = otherLanguage.ISOCode %} + {% set otherLanguageIsoCode = otherLanguage.isoCode %} {% endif %} {% if pageConfig.cdn or release_version or designSystemVersion %} {# Production #} - {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %} + {% set cdnUrl = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %} {% - set slash = "" if cdn_url | last == "/" else + set slash = "" if cdnUrl | last == "/" else "/" %} - {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %} -{% elif pageConfig.assetsURL %} + {% set assetsUrl = cdnUrl + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %} +{% elif pageConfig.assetsUrl %} {# Runner Dev #} - {% set assetsURL = pageConfig.assetsURL %} + {% set assetsUrl = pageConfig.assetsUrl %} {% else %} {# Development #} - {% set assetsURL = "" %} + {% set assetsUrl = "" %} {% endif %} {% if pageConfig and pageConfig.title %} - {% set page_title = pageConfig.title %} + {% set pageTitle = pageConfig.title %} {% elif page and page.title %} - {% set page_title = page.title %} + {% set pageTitle = page.title %} {% else %} - {% set page_title = "ONS Design System" %} + {% set pageTitle = "ONS Design System" %} {% endif %} {# Page container #} @@ -58,14 +58,14 @@ "#206095" %} <!doctype html> -<html lang="{{ currentLanguageISOCode }}"> +<html lang="{{ currentLanguageIsoCode }}"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title>{{ page_title }} - - + {{ pageTitle }} + + {% block meta %} {% if pageConfig.meta %} @@ -89,22 +89,22 @@ - + - + - {% if otherLanguageISOCode %} - + {% if otherLanguageIsoCode %} + {% endif %} {% if pageConfig.social %} {% set twitterImagePath = pageConfig.social.twitterImage if pageConfig.social.twitterImage else - assetsURL + '/favicons/twitter.png' + assetsUrl + '/favicons/twitter.png' %} @@ -118,12 +118,12 @@ {% block favicons %} - - - - - - + + + + + + {% endblock %} {% block head %} @@ -203,12 +203,12 @@ "wide": pageConfig.wide, "fullWidth": pageConfig.fullWidth, "classes": "ons-page__footer", - "lang": currentLanguageISOCode, + "lang": currentLanguageIsoCode, "rows": pageConfig.footer.rows, "cols": pageConfig.footer.cols, - "poweredBy": pageConfig.footer.poweredBy, + "footerLogo": pageConfig.footer.footerLogo, "crest": pageConfig.footer.crest, - "OGLLink": pageConfig.footer.OGLLink, + "oglLink": pageConfig.footer.oglLink, "button": pageConfig.header.signoutButton, "footerWarning": pageConfig.footer.footerWarning, "copyrightDeclaration": pageConfig.footer.copyrightDeclaration, @@ -225,7 +225,7 @@