From bfe1606a24d989cc502d1926a9eac936de0eeec5 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Fri, 10 Nov 2023 14:14:12 +0000 Subject: [PATCH 1/3] Feature/add tests for autosuggest component (#2893) * added example header * update test example * add tests * update visual tests * add test cases * fix failing test --- ...gation-and-search_0_document_0_desktop.png | 3 + ...igation-and-search_0_document_1_tablet.png | 3 + ...igation-and-search_0_document_2_mobile.png | 3 + src/components/header/_macro.spec.js | 133 +++++++++++++++++- ...er-external-with-navigation-and-search.njk | 57 ++++++++ src/components/navigation/_macro.njk | 4 +- 6 files changed, 197 insertions(+), 6 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png create mode 100644 src/components/header/example-header-external-with-navigation-and-search.njk diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png new file mode 100644 index 0000000000..8254803ff5 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:90c6981731b715a7dafcd54606bffdf14dd3a6b0f4ad01a04a8308be1730fcc9 +size 25521 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png new file mode 100644 index 0000000000..e24448df49 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8e5cba58f8519f9b4a0bdf6e3091a3ff7f66a65998ad413e69c766609f895ad1 +size 16028 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png new file mode 100644 index 0000000000..18c77f3624 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-navigation-and-search_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d7cf7a8fd6cef93fdd86e21a10cbdc634ec510e6081678acaedc0ee0995355c5 +size 13097 diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js index 658ac1a991..620bcd36eb 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -161,6 +161,45 @@ const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = { }, }; +const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = { + navigation: { + id: 'main-nav', + ariaLabel: 'Main menu', + currentPath: '#home', + itemsList: [ + { + title: 'Home', + url: '#home', + }, + { + title: 'Guidance', + url: '#0', + }, + ], + toggleNavigationButton: { + text: 'Menu', + ariaLabel: 'Toggle main menu', + }, + }, + siteSearchAutosuggest: { + label: 'label', + instructions: 'Use up and down keys to navigate.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + minChars: 3, + ariaResultsLabel: 'Country suggestions', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Type more characters to improve your search', + moreResults: 'Continue entering to improve suggestions', + resultsTitle: 'Suggestions', + resultsTitleId: 'country-of-birth-suggestions', + noResults: 'No suggestions found.', + typeMore: 'Continue entering to get suggestions', + language: 'en-gb', + }, +}; + describe('macro: header', () => { describe('mode: basic', () => { it('passes jest-axe checks', async () => { @@ -453,21 +492,21 @@ describe('macro: header', () => { it('has the text for each list item', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LIST_ITEMS)); - const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), node => node.text().trim()); + const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), (node) => node.text().trim()); expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); }); it('has the link text for each list item', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), node => node.text().trim()); + const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.text().trim()); expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); }); it('has the link href for each list item', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), node => node.attr('href')); + const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.attr('href')); expect(values).toEqual(['#1', '#2', '#3']); }); @@ -486,14 +525,14 @@ describe('macro: header', () => { it('has the link text for each list item for mobile', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), node => node.text().trim()); + const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.text().trim()); expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']); }); it('has the link href for each list item for mobile', () => { const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE)); - const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), node => node.attr('href')); + const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.attr('href')); expect(values).toEqual(['#1', '#2', '#3']); }); @@ -742,3 +781,87 @@ describe('macro: header', () => { }); }); }); + +describe('mode: with site search autosuggest', () => { + it('renders the search with expected parameters', () => { + const faker = templateFaker(); + const buttonSpy = faker.spy('autosuggest'); + + faker.renderComponent('header', EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST); + + expect(buttonSpy.occurrences[0]).toEqual({ + ariaLimitedResults: 'Type more characters to improve your search', + minChars: 3, + language: 'en-gb', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + ariaNResults: 'There are {n} suggestions available.', + ariaOneResult: 'There is one suggestion available.', + ariaResultsLabel: 'Country suggestions', + ariaYouHaveSelected: 'You have selected', + containerClasses: 'ons-autosuggest--header', + id: 'ons-site-search', + input: { + accessiblePlaceholder: true, + autocomplete: 'off', + classes: 'ons-input-search ons-input-search--icon', + label: { + classes: 'ons-u-pl-m ons-label--white', + id: 'ons-site-search-label', + text: 'label', + }, + }, + instructions: 'Use up and down keys to navigate.', + moreResults: 'Continue entering to improve suggestions', + noResults: 'No suggestions found.', + resultsTitle: 'Suggestions', + typeMore: 'Continue entering to get suggestions', + }); + }); + + describe('when the user inputs text', () => { + let $; // Initialize a Cheerio instance + + const mockData = [ + { en: 'England' }, + { en: 'Wales' }, + { en: 'Scotland' }, + { en: 'United States of America' }, + { en: 'United States Virgin Islands' }, + { en: 'Åland Islands' }, + ]; + + beforeEach(() => { + $ = cheerio.load( + renderComponent('header', { + ...EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST, + autosuggestData: mockData, + }), + ); + }); + + it('does not show suggestions when input length < minimum characters', () => { + $('.ons-js-autosuggest-input').val('En'); + + setTimeout(() => { + const suggestionCount = $('.ons-autosuggest__option').length; + expect(suggestionCount).toBe(0); + }, 20); + }); + + it('shows suggestions when input length >= minimum characters', () => { + $('.ons-js-autosuggest-input').val('Eng'); + + setTimeout(() => { + const suggestionCount = $('.ons-autosuggest__option').length; + expect(suggestionCount).toBe(1); + }, 20); + }); + + it('gets the language if set', () => { + $('.ons-js-autosuggest-input').val('Eng'); + + const autosuggestElement = $('.ons-js-autosuggest').attr('data-lang'); + expect(autosuggestElement).toBe('en-gb'); + }); + }); +}); diff --git a/src/components/header/example-header-external-with-navigation-and-search.njk b/src/components/header/example-header-external-with-navigation-and-search.njk new file mode 100644 index 0000000000..7ba91845b7 --- /dev/null +++ b/src/components/header/example-header-external-with-navigation-and-search.njk @@ -0,0 +1,57 @@ +--- +"fullWidth": true +--- +{% from "components/header/_macro.njk" import onsHeader %} + +{{ + onsHeader({ + "title": 'Design system', + "titleUrl": '#0', + "navigation": { + "id": 'main-nav', + "ariaLabel": 'Main menu', + "currentPath": '#home', + "itemsList": [ + { + "text": 'Home', + "url": '#home' + }, + { + "text": 'Guidance', + "url": '#0' + }, + { + "text": 'Foundations', + "url": '#0' + }, + { + "text": 'Components', + "url": '#0' + }, + { + "text": 'Patterns', + "url": '#0' + } + ], + "toggleNavigationButton": { + "text": 'Menu', + "ariaLabel": 'Toggle main menu' + } + }, + 'siteSearchAutosuggest': { + "autosuggestData": "/examples/data/country-of-birth.json", + "label": "search", + "instructions": "instructions", + "ariaYouHaveSelected": "ariaYouHaveSelected", + "ariaMinChars": "ariaMinChars", + "ariaResultsLabel": "ariaResultsLabel", + "ariaOneResult": "ariaOneResult", + "ariaNResults": "ariaNResults", + "ariaLimitedResults": "ariaLimitedResults", + "moreResults": "moreResults", + "resultsTitle": "resultsTitle", + "noResults": "noResults", + "typeMore": "typeMore" + } + }) +}} diff --git a/src/components/navigation/_macro.njk b/src/components/navigation/_macro.njk index 76986e8d53..8b4dff91aa 100644 --- a/src/components/navigation/_macro.njk +++ b/src/components/navigation/_macro.njk @@ -27,6 +27,7 @@ }, "instructions": params.siteSearchAutosuggest.instructions, "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected, + "minChars": params.siteSearchAutosuggest.minChars, "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars, "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel, "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult, @@ -36,7 +37,8 @@ "resultsTitle": params.siteSearchAutosuggest.resultsTitle, "autosuggestData": params.siteSearchAutosuggest.autosuggestData, "noResults": params.siteSearchAutosuggest.noResults, - "typeMore": params.siteSearchAutosuggest.typeMore + "typeMore": params.siteSearchAutosuggest.typeMore, + "language": params.siteSearchAutosuggest.language }) }} {% endif %} From c60eb312b0eaeec9dddfd09402b7f230652dc3f9 Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Thu, 16 Nov 2023 09:52:29 +0000 Subject: [PATCH 2/3] Use node-version-file in Github actions to improve node version setting (#2886) --- .github/workflows/lighthouse-ci.yml | 5 +- .github/workflows/macro-and-script-tests.yml | 5 +- .github/workflows/npm-bundle.yml | 5 +- .github/workflows/release.yml | 5 +- .github/workflows/visual-regression-tests.yml | 5 +- .../accordion/example-accordion-open.njk | 4 +- src/components/checkboxes/_macro.njk | 2 +- ...oxes-with-revealed-checkboxes-expanded.njk | 2 +- ...le-checkboxes-with-revealed-checkboxes.njk | 2 +- src/components/footer/_macro.njk | 2 +- src/components/label/_macro.njk | 4 +- src/components/related-content/_macro.njk | 58 +++++---- src/components/section-navigation/_macro.njk | 111 +++++++++--------- src/components/video/_macro.njk | 22 ++-- src/layout/_template.njk | 58 ++++----- src/patterns/guide/example-guide-overview.njk | 35 ++++-- src/patterns/guide/example-guide.njk | 43 ++++--- 17 files changed, 191 insertions(+), 177 deletions(-) diff --git a/.github/workflows/lighthouse-ci.yml b/.github/workflows/lighthouse-ci.yml index c2a4481ba5..9fd17a1ba8 100644 --- a/.github/workflows/lighthouse-ci.yml +++ b/.github/workflows/lighthouse-ci.yml @@ -12,13 +12,10 @@ jobs: - uses: actions/checkout@v3 with: ref: ${{ github.event.pull_request.head.sha }} - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Build pages diff --git a/.github/workflows/macro-and-script-tests.yml b/.github/workflows/macro-and-script-tests.yml index 5f20c4c1fb..0220d89974 100644 --- a/.github/workflows/macro-and-script-tests.yml +++ b/.github/workflows/macro-and-script-tests.yml @@ -12,13 +12,10 @@ jobs: steps: - name: Checkout uses: actions/checkout@v3 - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Run macro and script tests diff --git a/.github/workflows/npm-bundle.yml b/.github/workflows/npm-bundle.yml index 2dc0b4faa7..12631cbc70 100644 --- a/.github/workflows/npm-bundle.yml +++ b/.github/workflows/npm-bundle.yml @@ -10,9 +10,6 @@ jobs: build: runs-on: ubuntu-latest steps: - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Use Node.js uses: actions/checkout@v3 with: @@ -20,7 +17,7 @@ jobs: - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" registry-url: https://registry.npmjs.org/ - run: yarn install - run: git config --global user.name "${{ github.actor }}" diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8a50c3eb18..c8db6937f5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -8,13 +8,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Build templates diff --git a/.github/workflows/visual-regression-tests.yml b/.github/workflows/visual-regression-tests.yml index be5864b1e7..3d2cf558cb 100644 --- a/.github/workflows/visual-regression-tests.yml +++ b/.github/workflows/visual-regression-tests.yml @@ -15,13 +15,10 @@ jobs: with: lfs: true url: https://github.com/ONSdigital/design-system.git - - name: Read .nvmrc file - id: read-nvmrc-file - run: echo "nvmrc=$(cat .nvmrc)" >> $GITHUB_OUTPUT - name: Install Node uses: actions/setup-node@v3 with: - node-version: "${{ steps.read-nvmrc-file.outputs.nvmrc }}" + node-version-file: ".nvmrc" - name: Install dependencies run: yarn install - name: Install Docker diff --git a/src/components/accordion/example-accordion-open.njk b/src/components/accordion/example-accordion-open.njk index e2cf45ec88..a276c18769 100644 --- a/src/components/accordion/example-accordion-open.njk +++ b/src/components/accordion/example-accordion-open.njk @@ -62,7 +62,7 @@ "text": "Areas (0)" }, "value": "areas" - } + } ] }) }} @@ -98,7 +98,7 @@ "text": "Disability (67)" }, "value": "disability" - } + } ] }) }} diff --git a/src/components/checkboxes/_macro.njk b/src/components/checkboxes/_macro.njk index 933838c4b4..8fbef54388 100644 --- a/src/components/checkboxes/_macro.njk +++ b/src/components/checkboxes/_macro.njk @@ -7,7 +7,7 @@ {% set fields %} {% if params.checkboxesLabel is defined %}

{{ params.checkboxesLabel }}

- {% endif %} + {% endif %} {% set hasOther = false %} {% for checkbox in params.checkboxes %} {% if checkbox.other %} diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk index 7bc0cfa595..d34ea82bfd 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk @@ -82,7 +82,7 @@ "text": "Areas (0)" }, "value": "areas" - } + } ] }) }} diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk index f31021a79e..fe2c463062 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk @@ -80,7 +80,7 @@ "text": "Areas (0)" }, "value": "areas" - } + } ] }) }} diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk index ed7412ff87..38cd41d0e0 100644 --- a/src/components/footer/_macro.njk +++ b/src/components/footer/_macro.njk @@ -179,7 +179,7 @@ {% endif %} {% if params.copyrightDeclaration %} -
+
diff --git a/src/components/label/_macro.njk b/src/components/label/_macro.njk index c1b4e818f4..678fe2c8bb 100644 --- a/src/components/label/_macro.njk +++ b/src/components/label/_macro.njk @@ -1,8 +1,8 @@ {% macro onsLabel(params) %} {% if params.id %} - {% set descriptionID = params.id ~ "-description-hint" %} + {% set descriptionID = params.id ~ "-description-hint" %} {% else %} - {% set descriptionID = "description-hint" %} + {% set descriptionID = "description-hint" %} {% endif %} {% if params.inputType == "checkbox" or params.inputType == "radio" %} diff --git a/src/components/related-content/_macro.njk b/src/components/related-content/_macro.njk index 714e4fcb85..51fd775e27 100644 --- a/src/components/related-content/_macro.njk +++ b/src/components/related-content/_macro.njk @@ -1,36 +1,34 @@ {% macro onsRelatedContent(params) %} - {% if params.classes %} - {% set classes = ' ' + params.classes %} - {% endif %} + {% if params.classes %} + {% set classes = ' ' + params.classes %} + {% endif %} - + {% for row in params.rows %} + {% call onsRelatedContentSection({ + "title": row.title, + "id": row.id + }) %} + + {% endcall %} + {% endfor %} + {% else %} + {{ caller() if caller }} + {% endif %} + {% endmacro %} diff --git a/src/components/section-navigation/_macro.njk b/src/components/section-navigation/_macro.njk index 65f2e040a3..9245295ce1 100644 --- a/src/components/section-navigation/_macro.njk +++ b/src/components/section-navigation/_macro.njk @@ -1,59 +1,60 @@ {% macro onsSectionNavigation(params) %} - {% endmacro %} diff --git a/src/components/video/_macro.njk b/src/components/video/_macro.njk index da22fc20c0..1266e058a7 100644 --- a/src/components/video/_macro.njk +++ b/src/components/video/_macro.njk @@ -2,20 +2,20 @@ {%- macro onsVideo(params) -%} {% set linkContents %} - {% if params.image.smallSrc %} - {{ params.image.alt }} - {% endif %} - {{ params.linkText }} + {% if params.image.smallSrc %} + {{ params.image.alt }} + {% endif %} + {{ params.linkText }} {% endset %}
- {{ - onsExternalLink({ - "url": params.videoLinkURL, - "classes": "ons-video__link ons-js-video-placeholder ons-u-db", - "linkText": linkContents - }) - }} + {{ + onsExternalLink({ + "url": params.videoLinkURL, + "classes": "ons-video__link ons-js-video-placeholder ons-u-db", + "linkText": linkContents + }) + }}
{%- endmacro -%} diff --git a/src/layout/_template.njk b/src/layout/_template.njk index b5ca6fda6b..7e429f7292 100644 --- a/src/layout/_template.njk +++ b/src/layout/_template.njk @@ -138,29 +138,29 @@ {% endblock %} {% block header %} {{ - onsHeader({ - "wide": pageConfig.wide, - "fullWidth": pageConfig.fullWidth, - "language": pageConfig.header.language, - "button": pageConfig.header.signoutButton, - "toggleNavigationButton": pageConfig.header.toggleNavigationButton, - "navigation": pageConfig.header.navigation, - "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest, - "browserBanner": pageConfig.header.browserBanner, - "phase": pageConfig.header.phase, - "assetsURL": assetsURL, - "serviceLinks": pageConfig.header.serviceLinks, - "variants": pageConfig.header.variants, - "classes": pageConfig.header.classes, - "mastheadLogo": pageConfig.header.mastheadLogo, - "mastheadLogoUrl": pageConfig.header.mastheadLogoUrl, - "titleUrl": pageConfig.header.titleUrl, - "title": pageConfig.header.title | default(pageConfig.title), - "description": pageConfig.header.description, - "titleAsH1": pageConfig.header.titleAsH1, - "titleLogo": pageConfig.header.titleLogo - }) - }} + onsHeader({ + "wide": pageConfig.wide, + "fullWidth": pageConfig.fullWidth, + "language": pageConfig.header.language, + "button": pageConfig.header.signoutButton, + "toggleNavigationButton": pageConfig.header.toggleNavigationButton, + "navigation": pageConfig.header.navigation, + "siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest, + "browserBanner": pageConfig.header.browserBanner, + "phase": pageConfig.header.phase, + "assetsURL": assetsURL, + "serviceLinks": pageConfig.header.serviceLinks, + "variants": pageConfig.header.variants, + "classes": pageConfig.header.classes, + "mastheadLogo": pageConfig.header.mastheadLogo, + "mastheadLogoUrl": pageConfig.header.mastheadLogoUrl, + "titleUrl": pageConfig.header.titleUrl, + "title": pageConfig.header.title | default(pageConfig.title), + "description": pageConfig.header.description, + "titleAsH1": pageConfig.header.titleAsH1, + "titleLogo": pageConfig.header.titleLogo + }) + }} {% endblock %} {% block pageContent %}
@@ -168,12 +168,12 @@ {% if pageConfig.breadcrumbs %} {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %} {{ - onsBreadcrumbs({ - "id": pageConfig.breadcrumbs.id, - "ariaLabel": pageConfig.breadcrumbs.ariaLabel, - "itemsList": pageConfig.breadcrumbs.itemsList - }) - }} + onsBreadcrumbs({ + "id": pageConfig.breadcrumbs.id, + "ariaLabel": pageConfig.breadcrumbs.ariaLabel, + "itemsList": pageConfig.breadcrumbs.itemsList + }) + }} {% endif %} {% endblock %}
diff --git a/src/patterns/guide/example-guide-overview.njk b/src/patterns/guide/example-guide-overview.njk index 97879446b6..1b0eebc2ed 100644 --- a/src/patterns/guide/example-guide-overview.njk +++ b/src/patterns/guide/example-guide-overview.njk @@ -90,17 +90,34 @@ layout: ~ ] }) }} -

What the census is

The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales. The census is unique. There’s simply nothing else that gives so much detail about us and the society we live in.

All kinds of organisations, from local authorities to charities, use the information to help provide the services we all need, including transport, education and healthcare. Without the census, it would be much more difficult to do this.

By taking part, you’ll be helping make sure you and your community get the services needed now and in the future.

Past, present and future

The first census was in 1801 and the most recent in 2011. The Office for National Statistics (ONS) runs the census in England Wales and the next one will happen on Sunday 21 March 2021. To prepare for it, we held a census rehearsal in 2019 to check our processes, systems and services were running smoothly ahead of the real thing.

Between censuses

We also need your help between each census. At the ONS, we rely on ongoing surveys to provide detailed, up-to-date information about changes to society. To make sure that we represent everyone, we ask people to take part in these surveys. We carry out interviews in person, by phone or online.

These surveys do not stop while the census takes place. To find out more about the types of surveys we run throughout the year, visit the ONS website.

The census in Scotland and Northern Ireland

At the ONS, we’re responsible for planning and running the census for England and Wales.

Find out more about the censuses in Scotland and Northern Ireland from National Records of Scotland and Northern Ireland Statistics and Research Agency.

+
+

What the census is

+

The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales. The census is unique. There’s simply nothing else that gives so much detail about us and the society we live in.

+

All kinds of organisations, from local authorities to charities, use the information to help provide the services we all need, including transport, education and healthcare. Without the census, it would be much more difficult to do this.

+

By taking part, you’ll be helping make sure you and your community get the services needed now and in the future.

+ +

Past, present and future

+

The first census was in 1801 and the most recent in 2011. The Office for National Statistics (ONS) runs the census in England Wales and the next one will happen on Sunday 21 March 2021. To prepare for it, we held a census rehearsal in 2019 to check our processes, systems and services were running smoothly ahead of the real thing.

+ +

Between censuses

+

We also need your help between each census. At the ONS, we rely on ongoing surveys to provide detailed, up-to-date information about changes to society. To make sure that we represent everyone, we ask people to take part in these surveys. We carry out interviews in person, by phone or online.

+

These surveys do not stop while the census takes place. To find out more about the types of surveys we run throughout the year, visit the ONS website.

+ +

The census in Scotland and Northern Ireland

+

At the ONS, we’re responsible for planning and running the census for England and Wales.

+ +

Find out more about the censuses in Scotland and Northern Ireland from National Records of Scotland and Northern Ireland Statistics and Research Agency.

+
{{- - onsContentPagination({ - "contentPaginationItems": [ - { - "rel": 'next', - "text": 'Next', - "url": '#', - "label": 'Who should take part and why' - } + onsContentPagination({ + "contentPaginationItems": [ + { + "rel": 'next', + "text": 'Next', + "url": '#', + "label": 'Who should take part and why' + } ] }) }} diff --git a/src/patterns/guide/example-guide.njk b/src/patterns/guide/example-guide.njk index 890b5645b9..4e2a8531f7 100644 --- a/src/patterns/guide/example-guide.njk +++ b/src/patterns/guide/example-guide.njk @@ -92,22 +92,35 @@ layout: ~ }) }}
-

It’s important you take part in the census. The information it gives has the power to make a real impact on our everyday lives.

The census is vital to all of us

The census helps us understand what our society needs now and what it’s likely to need in the future. The information it collects helps plan and fund services in your area. This could include transport, education and healthcare.

Charities also use census information to help get the funding they need. Businesses use it to decide where to set up, which creates job opportunities.

Its success could help you

Census 2021 will help give the best picture of the needs of everyone living in England and Wales.

A total of 94% of people took part in the last census, helping each area receive its share of public funding. Without the census, it would be much more difficult to provide the services you and your community need.

You must complete the census by law

You must complete the census by law. If you do not, or if you supply false information, you could be fined up to £1,000. Some questions are clearly labelled as voluntary. It is not an offence if you do not answer these.

+

It’s important you take part in the census. The information it gives has the power to make a real impact on our everyday lives.

+ +

The census is vital to all of us

+

The census helps us understand what our society needs now and what it’s likely to need in the future. The information it collects helps plan and fund services in your area. This could include transport, education and healthcare.

+

Charities also use census information to help get the funding they need. Businesses use it to decide where to set up, which creates job opportunities.

+ +

Its success could help you

+

Census 2021 will help give the best picture of the needs of everyone living in England and Wales.

+

A total of 94% of people took part in the last census, helping each area receive its share of public funding. Without the census, it would be much more difficult to provide the services you and your community need.

+ +

You must complete the census by law

+

You must complete the census by law. If you do not, or if you supply false information, you could be fined up to £1,000. Some questions are clearly labelled as voluntary. It is not an offence if you do not answer these.

+ +
{{- - onsContentPagination({ - "contentPaginationItems": [ - { - "rel": 'prev', - "text": 'Previous', - "url": '#', - "label": 'About the census' - }, - { - "rel": 'next', - "text": 'Next', - "url": '#', - "label": 'How your information is used' - } + onsContentPagination({ + "contentPaginationItems": [ + { + "rel": 'prev', + "text": 'Previous', + "url": '#', + "label": 'About the census' + }, + { + "rel": 'next', + "text": 'Next', + "url": '#', + "label": 'How your information is used' + } ] }) }} From 03ff7c85262d13d3d4726c7a74c6d5fe5783f5cf Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Thu, 16 Nov 2023 10:39:54 +0000 Subject: [PATCH 3/3] Add form to error prototype (#2894) --- .../correct-errors/example-errors-proto.njk | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/patterns/correct-errors/example-errors-proto.njk b/src/patterns/correct-errors/example-errors-proto.njk index 1b5ec4c2b9..191fad8f2f 100644 --- a/src/patterns/correct-errors/example-errors-proto.njk +++ b/src/patterns/correct-errors/example-errors-proto.njk @@ -39,13 +39,9 @@ layout: ~ }} {% endblock %} -{% set form = { - "method": "GET", - "attributes": { - "action": "example-errors-proto-errors", - "novalidate": "" - } -} %} +{% block bodyStart %} +
+{% endblock %} {% block main %} {% call onsQuestion({ @@ -371,3 +367,7 @@ layout: ~ }} {% endcall %} {% endblock %} + +{% block bodyEnd %} +
+{% endblock %}