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/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 234f8d23a9..438cc982d8 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`] = ` - +
@@ -1600,7 +1600,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
+
@@ -1705,9 +1705,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
+ + + + - -
-
@@ -1886,7 +1892,7 @@ exports[`base page template matches the meta block override snapshot 1`] = `
-
+
-
+
@@ -2109,7 +2115,7 @@ exports[`base page template matches the social block override snapshot 1`] = `
-
+
-
+
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/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/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..fba0d6a02a --- /dev/null +++ b/migration_guides/70.x.x-to-71.0.0-migration-guide.md @@ -0,0 +1,1032 @@ +# 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" + }) + }} + ``` + +
+ +## Contact Information + +For further assistance, please reach out to our support team: + +- **Email:** ons.design.system@ons.gov.uk 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 4279f016c6..e6d593f56a 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-xs" 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 f592f88704..b8e631eaf2 100644 --- a/src/components/access-code/_macro.spec.js +++ b/src/components/access-code/_macro.spec.js @@ -102,23 +102,23 @@ describe('FOR: access-code', () => { }); }); }); - describe('GIVEN: Params: maxlength & groupSize', () => { + 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', () => { + 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', () => { + describe('WHEN: maxLength param is provided', () => { const $ = cheerio.load( renderComponent('access-code', { - maxlength: 8, + maxLength: 8, }), ); - test('THEN: renders input with provided maxlength', () => { + test('THEN: renders input with provided maxLength', () => { expect($('input').attr('maxlength')).toBe('9'); }); }); @@ -132,14 +132,14 @@ describe('FOR: access-code', () => { expect($('input').attr('data-group-size')).toBe('2'); }); }); - describe('WHEN: maxlength and groupSize params are provided', () => { + describe('WHEN: maxLength and groupSize params are provided', () => { const $ = cheerio.load( renderComponent('access-code', { - maxlength: 6, + maxLength: 6, groupSize: 3, }), ); - test('THEN: renders input with provided maxlength accounting for provided groupSize', () => { + test('THEN: renders input with provided maxLength accounting for provided groupSize', () => { expect($('input').attr('maxlength')).toBe('7'); }); }); 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 a124dd26ef..5d4d3838ae 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,20 +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( [ 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/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 f79058abec..7948fd4a71 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -597,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/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 0c9200be4e..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 72868b4a86..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 else "") + "/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="ons-card__title {{ 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 ba6bf0261d..4cfd1b1ce1 100644 --- a/src/components/card/_macro.spec.js +++ b/src/components/card/_macro.spec.js @@ -6,15 +6,17 @@ import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; const EXAMPLE_CARD_WITHOUT_IMAGE = { - title: 'Example card title', - text: 'Example card text.', - textId: 'example-text-id', + title: { + text: 'Example card title', + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, }; const EXAMPLE_CARD_WITH_IMAGE = { - title: 'Example card title', - text: 'Example card text.', - textId: 'example-text-id', + ...EXAMPLE_CARD_WITHOUT_IMAGE, image: { smallSrc: 'example-small.png', largeSrc: 'example-large.png', @@ -23,18 +25,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', }, }; @@ -59,8 +57,14 @@ 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, + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, }), ); @@ -78,8 +82,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({ @@ -91,8 +101,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', + }, }), ); @@ -120,8 +136,19 @@ 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, + }, + body: { + text: 'Example card text.', + id: 'example-text-id', + }, + image: { + smallSrc: 'example-small.png', + largeSrc: 'example-large.png', + alt: 'Example alt text', + }, }), ); @@ -141,8 +168,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', + }, }), ); @@ -206,7 +239,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 6948a55211..8684536cd0 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-xs" 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-xs" 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 8ada76a527..ef46325e1d 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/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 82b4933c67..9206d5ed2b 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">{{ 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/_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 40a89a04fa..3652df370a 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-xs"> - <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 c293bb2d55..004e63ca96 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 28a5719cf4..0d80ceaca8 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-m"> {{- @@ -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-m">{{ 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-m 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 48de0bdb27..d2dded2088 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 adb8751284..23a628802b 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -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/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/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 d8194af919..80d3e773dc 100644 --- a/src/components/input/_macro.njk +++ b/src/components/input/_macro.njk @@ -109,7 +109,7 @@ {% 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/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/_macro.njk b/src/components/list/_macro.njk index 7bfcdcbba0..e239335adb 100644 --- a/src/components/list/_macro.njk +++ b/src/components/list/_macro.njk @@ -79,7 +79,7 @@ {{ onsExternalLink({ "url": item.url, - "linkText": itemText + "text": itemText }) }} {%- else -%} diff --git a/src/components/list/_macro.spec.js b/src/components/list/_macro.spec.js index fe045d9f58..37e4b4b877 100644 --- a/src/components/list/_macro.spec.js +++ b/src/components/list/_macro.spec.js @@ -451,7 +451,7 @@ describe('macro: list', () => { expect(externalLinkSpy.occurrences[0]).toEqual({ url: 'https://example.com/external-link', - linkText: expectedItemText, + text: expectedItemText, }); }); diff --git a/src/components/message-list/_macro-options.md b/src/components/message-list/_macro-options.md index 0c0742367d..a8792be3cd 100644 --- a/src/components/message-list/_macro-options.md +++ b/src/components/message-list/_macro-options.md @@ -11,12 +11,18 @@ ## Message -| Name | Type | Required | Description | -| -------- | ------- | -------- | -------------------------------------------------------------------------------- | -| id | string | true | The HTML `id` for the message item | -| url | string | true | The URL for the HTML `href` attribute to link to the message conversation thread | -| subject | string | true | Text displayed for the message subject | -| fromText | string | true | Value of the “From” sender name in the message metadata information | -| dateText | string | true | Value of the “Sent” date stamp in the message metadata information | -| body | string | true | Text displayed for the message body snippet | -| unread | boolean | false | Set to “true” to display the unread message suffix after the `subject` | +| Name | Type | Required | Description | +| -------- | ----------------- | -------- | ---------------------------------------------------------------------- | +| id | string | true | The HTML `id` for the message item | +| subject | `Object` | true | Settings for the [Subject](#subject) | +| fromText | string | true | Value of the “From” sender name in the message metadata information | +| dateText | string | true | Value of the “Sent” date stamp in the message metadata information | +| body | string | true | Text displayed for the message body snippet | +| unread | boolean | false | Set to “true” to display the unread message suffix after the `subject` | + +## Subject + +| Name | Type | Required | Description | +| ---- | ------ | -------- | -------------------------------------------------------------------------------- | +| text | string | true | Text displayed for the message subject | +| url | string | true | The URL for the HTML `href` attribute to link to the message conversation thread | diff --git a/src/components/message-list/_macro.njk b/src/components/message-list/_macro.njk index 35010b197c..17d363e8e9 100644 --- a/src/components/message-list/_macro.njk +++ b/src/components/message-list/_macro.njk @@ -3,7 +3,7 @@ {% for message in params.messages %}

  • - {{ message.subject }} + {{ message.subject.text }} {% if message.unread %}({{ params.unreadText }}){% endif %}

    @@ -20,7 +20,7 @@ {{ message.body | safe }}
    • - {{ 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/navigation/_macro.njk b/src/components/navigation/_macro.njk index 37b2c316b6..be29e8be1a 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 808bab23c5..b925344344 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 f6b485f070..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', 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/components/reply/_macro.njk b/src/components/reply/_macro.njk index 1a93b643be..90ccde6534 100644 --- a/src/components/reply/_macro.njk +++ b/src/components/reply/_macro.njk @@ -14,7 +14,9 @@ "rows": params.textarea.rows }) }} -
      +
      {{ onsButton({ 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 ca21a2f85c..3b8760da45 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 f38b6c2831..662d24956f 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-xs">{{ 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 3ad438ef3b..72e21b523c 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-m{{ ' ons-u-mt-m' if loop.index > 1 }}">{{ summary.summaryTitle }}</h2> + {% if summary.title %} + <h2 class="ons-summary__title ons-u-mb-m{{ ' ons-u-mt-m' 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 a518a24d17..d7caaf4afd 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/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 19dbc219d4..34c648e55d 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/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/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/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 23c155516a..3ed2ecbef9 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-xs">{{ params.linkText }}</span> + <span class="ons-video__link-text ons-u-mt-xs">{{ 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 15f45a7b01..6b009853ba 100644 --- a/src/components/video/video.spec.js +++ b/src/components/video/video.spec.js @@ -5,13 +5,13 @@ 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, "'"); 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/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 @@