diff --git a/.prettierrc.yml b/.prettierrc.yml index f105a4a8b1..f79c105d2f 100644 --- a/.prettierrc.yml +++ b/.prettierrc.yml @@ -1,3 +1,7 @@ -singleQuote: true -printWidth: 140 -trailingComma: all +{ + 'plugins': ['prettier-plugin-jinja-template'], + 'singleQuote': true, + 'printWidth': 140, + 'trailingComma': all, + 'overrides': [{ 'files': ['*.html', '*.njk'], 'options': { 'parser': 'jinja-template' } }], +} diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index b442da99c9..0433ebd75c 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -42,14 +42,17 @@ exports[`base page template matches the body block override snapshot 1`] = ` - + + + Content + + + " @@ -111,10 +116,12 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` - + + +
@@ -122,7 +129,7 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` - + Skip to main content @@ -132,7 +139,8 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` - + + @@ -148,7 +156,9 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
-

This website no longer supports your browser. You can upgrade your browser to the latest version.

+

+ This website no longer supports your browser. You can upgrade your browser to the latest version. +

@@ -156,9 +166,13 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
-
@@ -219,12 +236,17 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
-
+
+ + + +
Social survey
+
@@ -261,6 +283,7 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` + + + " @@ -330,10 +355,12 @@ exports[`base page template matches the footer block override snapshot 1`] = ` - + + +
@@ -341,7 +368,7 @@ exports[`base page template matches the footer block override snapshot 1`] = ` - + Skip to main content @@ -351,7 +378,8 @@ exports[`base page template matches the footer block override snapshot 1`] = ` - + + @@ -367,7 +395,9 @@ exports[`base page template matches the footer block override snapshot 1`] = `
-

This website no longer supports your browser. You can upgrade your browser to the latest version.

+

+ This website no longer supports your browser. You can upgrade your browser to the latest version. +

@@ -375,9 +405,13 @@ exports[`base page template matches the footer block override snapshot 1`] = `
-
@@ -438,12 +475,17 @@ exports[`base page template matches the footer block override snapshot 1`] = `
-
+
+ + + +
Social survey
+
@@ -478,6 +520,7 @@ exports[`base page template matches the footer block override snapshot 1`] = ` + + + " @@ -571,10 +616,11 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Some head content - + +
@@ -584,7 +630,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Some preHeader content - + Skip to main content @@ -594,7 +640,8 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - + + @@ -613,7 +660,9 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-

This website no longer supports your browser. You can upgrade your browser to the latest version.

+

+ This website no longer supports your browser. You can upgrade your browser to the latest version. +

@@ -624,9 +673,9 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
- BETA -
+
+ BETA +

This is a new service – your feedback will help us improve it.

@@ -639,11 +688,12 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
- - @@ -724,24 +775,24 @@ exports[`base page template matches the full configuration snapshot 1`] = `
-
@@ -836,12 +887,13 @@ exports[`base page template matches the full configuration snapshot 1`] = `
+ - + +
ONS Service
- - + @@ -871,17 +923,17 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - + +
@@ -913,16 +965,16 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - + + @@ -943,35 +995,40 @@ exports[`base page template matches the full configuration snapshot 1`] = `
  • - Service standard + + Service standard
  • - Design system + + Design system
  • - Accessibility + + Accessibility
  • - Brand guidelines + + Brand guidelines
  • - Content style guide + + Content style guide
    • @@ -986,30 +1043,34 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    - @@ -1245,7 +1322,6 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - @@ -1256,7 +1332,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    - @@ -1281,17 +1356,17 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - + +
    @@ -1320,47 +1395,52 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + + + + + Respondent Charter + +
    @@ -1380,47 +1460,52 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + + + + + Contact us + +
    @@ -1440,54 +1525,59 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + + + + + News + +
    @@ -1516,60 +1606,66 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + + + + + Terms and conditions + + @@ -1580,10 +1676,11 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Open Government License logo - + - All content is available under the + All content is available under the + Open Government Licence v3.0  +
    @@ -1649,7 +1746,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    -
    @@ -1658,6 +1754,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    + + @@ -1725,10 +1823,12 @@ exports[`base page template matches the meta block override snapshot 1`] = ` - + + +
    @@ -1736,7 +1836,7 @@ exports[`base page template matches the meta block override snapshot 1`] = ` - + Skip to main content @@ -1746,7 +1846,8 @@ exports[`base page template matches the meta block override snapshot 1`] = ` - + + @@ -1762,7 +1863,9 @@ exports[`base page template matches the meta block override snapshot 1`] = `
    -

    This website no longer supports your browser. You can upgrade your browser to the latest version.

    +

    + This website no longer supports your browser. You can upgrade your browser to the latest version. +

    @@ -1770,9 +1873,13 @@ exports[`base page template matches the meta block override snapshot 1`] = `
    -
    @@ -1833,12 +1943,17 @@ exports[`base page template matches the meta block override snapshot 1`] = `
    -
    +
    + + + +
    Social survey
    +
    @@ -1875,6 +1990,7 @@ exports[`base page template matches the meta block override snapshot 1`] = ` + + + " @@ -1928,10 +2046,12 @@ exports[`base page template matches the social block override snapshot 1`] = ` - + + +
    @@ -1939,7 +2059,7 @@ exports[`base page template matches the social block override snapshot 1`] = ` - + Skip to main content @@ -1949,7 +2069,8 @@ exports[`base page template matches the social block override snapshot 1`] = ` - + + @@ -1965,7 +2086,9 @@ exports[`base page template matches the social block override snapshot 1`] = `
    -

    This website no longer supports your browser. You can upgrade your browser to the latest version.

    +

    + This website no longer supports your browser. You can upgrade your browser to the latest version. +

    @@ -1973,9 +2096,13 @@ exports[`base page template matches the social block override snapshot 1`] = `
    -
    @@ -2036,12 +2166,17 @@ exports[`base page template matches the social block override snapshot 1`] = `
    -
    +
    + + + +
    Social survey
    +
    @@ -2078,6 +2213,7 @@ exports[`base page template matches the social block override snapshot 1`] = ` + + + " diff --git a/package.json b/package.json index b9bc63c2ff..024b795f99 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "prettier --write", "yarn run stylelint-fix" ], - "*.{yml,yaml}": [ + "*.{yml,yaml,njk,html}": [ "prettier --write" ] }, @@ -109,7 +109,8 @@ "postcss": "^8.3.5", "postcss-url": "^10.1.3", "prepend-file": "^2.0.1", - "prettier": "^3.0.0", + "prettier": "^3.2.5", + "prettier-plugin-jinja-template": "^1.4.0", "puppeteer": "^21.0.2", "remark-cli": "^12.0.0", "remark-lint": "^9.1.2", diff --git a/src/components/access-code/_macro.njk b/src/components/access-code/_macro.njk index 0f9f0c92f3..4279f016c6 100644 --- a/src/components/access-code/_macro.njk +++ b/src/components/access-code/_macro.njk @@ -7,29 +7,33 @@ {% set maxlength = params.maxlength | default(16) + extraSpaces %} {% set content %} - {{ onsInput({ - "id": params.id, - "type": params.type, - "name": params.name, - "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""), - "label": params.label, - "attributes": { - "maxlength": maxlength, - "data-group-size": groupSize, - "autocomplete": "off", - "autocapitalize": "characters" - }, - "fieldClasses": "ons-question__answer", - "error": params.error, - "postTextboxLinkText": params.postTextboxLinkText, - "postTextboxLinkUrl": params.postTextboxLinkUrl - }) }} + {{ + onsInput({ + "id": params.id, + "type": params.type, + "name": params.name, + "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""), + "label": params.label, + "attributes": { + "maxlength": maxlength, + "data-group-size": groupSize, + "autocomplete": "off", + "autocapitalize": "characters" + }, + "fieldClasses": "ons-question__answer", + "error": params.error, + "postTextboxLinkText": params.postTextboxLinkText, + "postTextboxLinkUrl": params.postTextboxLinkUrl + }) + }} {% endset %} {% if not params.error %} - {% call onsPanel({ - "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes else '') - }) %} + {% + call onsPanel({ + "classes": "ons-u-mb-s" + (" " + params.classes if params.classes else "") + }) + %} {{ content | safe }} {% endcall %} {% else %} @@ -37,11 +41,13 @@ {% endif %} {% if params.securityMessage %} - {% call onsPanel({ - "variant": "bare", - "iconType": "lock", - "classes": "ons-u-mb-s" - }) %} + {% + call onsPanel({ + "variant": "bare", + "iconType": "lock", + "classes": "ons-u-mb-s" + }) + %} {{ params.securityMessage }} {% endcall %} {% endif %} diff --git a/src/components/access-code/example-access-code-error.njk b/src/components/access-code/example-access-code-error.njk index 350d76c67e..52a904278a 100644 --- a/src/components/access-code/example-access-code-error.njk +++ b/src/components/access-code/example-access-code-error.njk @@ -1,22 +1,26 @@ --- -title: "Example: Access code error" +title: 'Example: Access code error' layout: ~ --- + {% extends "layout/_template.njk" %} {% from "components/access-code/_macro.njk" import onsAccessCode %} {% from "components/button/_macro.njk" import onsButton %} {% from "components/panel/_macro.njk" import onsPanel %} {% from "components/details/_macro.njk" import onsDetails %} - -{% set pageConfig = { - "title": "Study title" -} %} +{% + set pageConfig = { + "title": "Study title" + } +%} {% block main %} - {% call onsPanel({ - "title": "There is a problem with this page", - "variant": "error" - }) %} + {% + call onsPanel({ + "title": "There is a problem with this page", + "variant": "error" + }) + %} {% from "components/list/_macro.njk" import onsList %} {{ onsList({ @@ -34,46 +38,54 @@ layout: ~

    Start study

    - {{ onsAccessCode({ - "id": "access-code", - "name": "access-code", - "postTextboxLinkText": "Where to find your access code", - "postTextboxLinkUrl": "#0", - "label": { - "text": "Enter your 16-character access code", - "description": "Keep this code safe. You will need to enter it every time you access your survey" - }, - "securityMessage": "Your personal information is protected by law and will be kept confidential", - "error": { - "id": "access-code-error", - "text": "Enter an access code" - } - }) }} + {{ + onsAccessCode({ + "id": "access-code", + "name": "access-code", + "postTextboxLinkText": "Where to find your access code", + "postTextboxLinkUrl": "#0", + "label": { + "text": "Enter your 16-character access code", + "description": "Keep this code safe. You will need to enter it every time you access your survey" + }, + "securityMessage": "Your personal information is protected by law and will be kept confidential", + "error": { + "id": "access-code-error", + "text": "Enter an access code" + } + }) + }} - {{ onsButton({ - "text": "Access study", - "classes": "ons-u-mb-xl" - }) }} + {{ + onsButton({ + "text": "Access study", + "classes": "ons-u-mb-xl" + }) + }}

    If you do not have an access code

    - If you have lost or not received an access code, you can request a new access code. - This can be sent to you by text or post. + If you have lost or not received an access code, you can request a new access code. This can be sent to you by text + or post.

    {% set content %}

    If you need to answer separately from the people you live with, you can request an individual access code.

    - {% call onsPanel({ - "variant": "warn" - }) %} + {% + call onsPanel({ + "variant": "warn" + }) + %} Someone in your household must still complete a study using this household access code {% endcall %} {% endset %} - {% call onsDetails({ - "id": "details-access-code-error", - "title": "Need to answer separately from your household?" - }) %} + {% + call onsDetails({ + "id": "details-access-code-error", + "title": "Need to answer separately from your household?" + }) + %} {{ content | safe }} {% endcall %} {% endblock %} diff --git a/src/components/access-code/example-access-code.njk b/src/components/access-code/example-access-code.njk index f8cca16218..978fe640c1 100644 --- a/src/components/access-code/example-access-code.njk +++ b/src/components/access-code/example-access-code.njk @@ -1,58 +1,68 @@ --- -title: "Example: Access code" +title: 'Example: Access code' layout: ~ --- + {% extends "layout/_template.njk" %} {% from "components/access-code/_macro.njk" import onsAccessCode %} {% from "components/button/_macro.njk" import onsButton %} {% from "components/panel/_macro.njk" import onsPanel %} {% from "components/details/_macro.njk" import onsDetails %} - -{% set pageConfig = { - "header": { - "title": "Study title" +{% + set pageConfig = { + "header": { + "title": "Study title" + } } -} %} +%} {% block main %}

    Start study

    - {{ onsAccessCode({ - "id": "access-code-example", - "name": "access-code", - "postTextboxLinkText": "Where to find your access code", - "postTextboxLinkUrl": "#0", - "label": { - "text": "Enter your 16-character access code", - "description": "Keep this code safe. You will need to enter it every time you access your study" - }, - "securityMessage": "Your personal information is protected by law and will be kept confidential" - }) }} + {{ + onsAccessCode({ + "id": "access-code-example", + "name": "access-code", + "postTextboxLinkText": "Where to find your access code", + "postTextboxLinkUrl": "#0", + "label": { + "text": "Enter your 16-character access code", + "description": "Keep this code safe. You will need to enter it every time you access your study" + }, + "securityMessage": "Your personal information is protected by law and will be kept confidential" + }) + }} - {{ onsButton({ - "text": "Access study", - "classes": "ons-u-mb-xl" - }) }} + {{ + onsButton({ + "text": "Access study", + "classes": "ons-u-mb-xl" + }) + }}

    If you do not have an access code

    - If you have lost or not received an access code, you can request a new access code. - This can be sent to you by text or post. + If you have lost or not received an access code, you can request a new access code. This can be sent to you by text + or post.

    {% set content %}

    If you need to answer separately from the people you live with, you can request an individual access code.

    - {% call onsPanel({ - "variant": "warn" - }) %} + {% + call onsPanel({ + "variant": "warn" + }) + %} Someone in your household must still complete a study using this household access code {% endcall %} {% endset %} - {% call onsDetails({ - "id": "details", - "title": "Need to answer separately from your household?" - }) %} + {% + call onsDetails({ + "id": "details", + "title": "Need to answer separately from your household?" + }) + %} {{ content | safe }} {% endcall %} {% endblock %} diff --git a/src/components/accordion/_macro.njk b/src/components/accordion/_macro.njk index 1282d63595..e9134a67fd 100644 --- a/src/components/accordion/_macro.njk +++ b/src/components/accordion/_macro.njk @@ -1,15 +1,16 @@ {% macro onsAccordion(params) %} {% from "components/details/_macro.njk" import onsDetails %} -
    +
    {% if params.allButton %} {% from "components/button/_macro.njk" import onsButton %} {% set attributes = params.allButton.attributes | default({}) %} - - {% set attributes = attributes | setAttributes({ - "data-close-all": params.allButton.close, - "data-group": params.id - }) %} + {% + set attributes = attributes | setAttributes({ + "data-close-all": params.allButton.close, + "data-group": params.id + }) + %} {{ onsButton({ diff --git a/src/components/accordion/example-accordion-open.njk b/src/components/accordion/example-accordion-open.njk index 723940a13e..f814642b59 100644 --- a/src/components/accordion/example-accordion-open.njk +++ b/src/components/accordion/example-accordion-open.njk @@ -1,7 +1,6 @@ {% from "components/accordion/_macro.njk" import onsAccordion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} - {% set content1 %} {{ onsCheckboxes({ diff --git a/src/components/address-input/_macro.njk b/src/components/address-input/_macro.njk index cd4ce44d05..4e12a8ac90 100644 --- a/src/components/address-input/_macro.njk +++ b/src/components/address-input/_macro.njk @@ -3,10 +3,13 @@ {% from "components/input/_macro.njk" import onsInput %} {% macro onsAddressInput(params) %} - {% set fields %} -
    + {% set fields %} +
    {% if params.isEditable == true or params.manualEntry %} - {% if not params.manualEntry %}
    {% endif %} + {% set addressInputs %} {% if params.organisation %} {{ onsInput({ @@ -81,11 +84,16 @@ }) }} {% endif %} + {% endset %} {% if not params.manualEntry %} +
    + {{ addressInputs | safe }}
    {{ params.searchButton }}
    + {% else %} + {{ addressInputs | safe }} {% endif %} {% endif %} @@ -105,7 +113,7 @@ }) }} {% if not params.manualEntry %} -
    +
    {{ onsAutosuggest({ "id": params.id + "-autosuggest", @@ -157,7 +165,9 @@ }) }} {% if params.manualLinkText %} - {{ params.manualLinkText }} + {{ params.manualLinkText }} {% endif %}
    {% endif %} @@ -167,12 +177,14 @@ {% if params.dontWrap %} {{ fields | safe }} {% else %} - {% call onsFieldset({ - "id": params.id, - "classes": params.classes, - "legend": params.legend, - "legendClasses": params.legendClasses - }) %} + {% + call onsFieldset({ + "id": params.id, + "classes": params.classes, + "legend": params.legend, + "legendClasses": params.legendClasses + }) + %} {{ fields | safe }} {% endcall %} {% endif %} diff --git a/src/components/address-input/example-address-input-editable.njk b/src/components/address-input/example-address-input-editable.njk index 98d093dc36..122df07ab7 100644 --- a/src/components/address-input/example-address-input-editable.njk +++ b/src/components/address-input/example-address-input-editable.njk @@ -1,52 +1,54 @@ {% from "components/address-input/_macro.njk" import onsAddressInput %} -{{ onsAddressInput({ - "id": "address-input-editable", - "dontWrap": true, - "label": { - "text": "Enter address or postcode and select from results", - "id": "address-label-input-editable" - }, - "isEditable": true, - "mandatory": true, - "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.", - "ariaOneResult": "There is one suggestion available.", - "ariaNResults": "There are {n} suggestions available.", - "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", - "ariaGroupedResults": "There are {n} for {x}", - "groupCount": "{n} addresses", - "moreResults": "Enter more of the address to improve results", - "resultsTitle": "Select an address", - "resultsTitleId": "address-results", - "noResults": "No results found. Try entering a different part of the address", - "tooManyResults": "{n} results found. Enter more of the address to improve results", - "typeMore": "Enter more of the address to get results", - "autocomplete": "off", - "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", - "options": { - "regionCode": "gb-eng", - "addressType": "residential" - }, - "line1": { - "label": "Address line 1" - }, - "line2": { - "label": "Address line 2" - }, - "town": { - "label": "Town or city" - }, - "postcode": { - "label": "Postcode" - }, - "searchButton": "Search for an address", - "manualLinkText": "Manually enter address" -}) }} +{{ + onsAddressInput({ + "id": "address-input-editable", + "dontWrap": true, + "label": { + "text": "Enter address or postcode and select from results", + "id": "address-label-input-editable" + }, + "isEditable": true, + "mandatory": true, + "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.", + "ariaOneResult": "There is one suggestion available.", + "ariaNResults": "There are {n} suggestions available.", + "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", + "ariaGroupedResults": "There are {n} for {x}", + "groupCount": "{n} addresses", + "moreResults": "Enter more of the address to improve results", + "resultsTitle": "Select an address", + "resultsTitleId": "address-results", + "noResults": "No results found. Try entering a different part of the address", + "tooManyResults": "{n} results found. Enter more of the address to improve results", + "typeMore": "Enter more of the address to get results", + "autocomplete": "off", + "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", + "options": { + "regionCode": "gb-eng", + "addressType": "residential" + }, + "line1": { + "label": "Address line 1" + }, + "line2": { + "label": "Address line 2" + }, + "town": { + "label": "Town or city" + }, + "postcode": { + "label": "Postcode" + }, + "searchButton": "Search for an address", + "manualLinkText": "Manually enter address" + }) +}} diff --git a/src/components/address-input/example-address-input-manual.njk b/src/components/address-input/example-address-input-manual.njk index 0312948ebd..3675c014f2 100644 --- a/src/components/address-input/example-address-input-manual.njk +++ b/src/components/address-input/example-address-input-manual.njk @@ -1,23 +1,25 @@ {% from "components/address-input/_macro.njk" import onsAddressInput %} -{{ onsAddressInput({ - "id": "address-input-manual", - "dontWrap": true, - "manualEntry": true, - "label": { - "text": "Enter address or postcode and select from results", - "id": "address-label-input-manual" - }, - "line1": { - "label": "Address line 1" - }, - "line2": { - "label": "Address line 2" - }, - "town": { - "label": "Town or city" - }, - "postcode": { - "label": "Postcode" - } -}) }} +{{ + onsAddressInput({ + "id": "address-input-manual", + "dontWrap": true, + "manualEntry": true, + "label": { + "text": "Enter address or postcode and select from results", + "id": "address-label-input-manual" + }, + "line1": { + "label": "Address line 1" + }, + "line2": { + "label": "Address line 2" + }, + "town": { + "label": "Town or city" + }, + "postcode": { + "label": "Postcode" + } + }) +}} diff --git a/src/components/address-input/example-address-input.njk b/src/components/address-input/example-address-input.njk index 17d31feb59..f55d4867c2 100644 --- a/src/components/address-input/example-address-input.njk +++ b/src/components/address-input/example-address-input.njk @@ -1,40 +1,42 @@ {% from "components/address-input/_macro.njk" import onsAddressInput %} -{{ onsAddressInput({ - "id": "address-input", - "dontWrap": true, - "label": { - "text": "Enter address or postcode and select from results", - "id": "address-label-input" - }, - "isEditable": false, - "mandatory": true, - "externalInitialiser": true, - "autocomplete": "off", - "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.", - "ariaOneResult": "There is one suggestion available.", - "ariaNResults": "There are {n} suggestions available.", - "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", - "ariaGroupedResults": "There are {n} for {x}", - "groupCount": "{n} addresses", - "moreResults": "Enter more of the address to improve results", - "resultsTitle": "Select an address", - "resultsTitleId": "address-results", - "noResults": "No results found. Try entering a different part of the address", - "tooManyResults": "{n} results found. Enter more of the address to improve results", - "typeMore": "Enter more of the address to get results", - "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", - "options": { - "regionCode": "gb-eng", - "addressType": "residential" - } -}) }} +{{ + onsAddressInput({ + "id": "address-input", + "dontWrap": true, + "label": { + "text": "Enter address or postcode and select from results", + "id": "address-label-input" + }, + "isEditable": false, + "mandatory": true, + "externalInitialiser": true, + "autocomplete": "off", + "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.", + "ariaOneResult": "There is one suggestion available.", + "ariaNResults": "There are {n} suggestions available.", + "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", + "ariaGroupedResults": "There are {n} for {x}", + "groupCount": "{n} addresses", + "moreResults": "Enter more of the address to improve results", + "resultsTitle": "Select an address", + "resultsTitleId": "address-results", + "noResults": "No results found. Try entering a different part of the address", + "tooManyResults": "{n} results found. Enter more of the address to improve results", + "typeMore": "Enter more of the address to get results", + "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", + "options": { + "regionCode": "gb-eng", + "addressType": "residential" + } + }) +}} diff --git a/src/components/address-output/_macro.njk b/src/components/address-output/_macro.njk index 61e75cda02..7bd0364f73 100644 --- a/src/components/address-output/_macro.njk +++ b/src/components/address-output/_macro.njk @@ -1,20 +1,20 @@ {% macro onsAddressOutput(params) %} -
    +

    {% if params.unit %} - {{ params.unit }}
    + {{ params.unit }}
    {% endif %} {% if params.organisation %} - {{ params.organisation }}
    + {{ params.organisation }}
    {% endif %} {% if params.line1 %} - {{ params.line1 }}
    + {{ params.line1 }}
    {% endif %} {% if params.line2 %} - {{ params.line2 }}
    + {{ params.line2 }}
    {% endif %} {% if params.town %} - {{ params.town }}
    + {{ params.town }}
    {% endif %} {% if params.postcode %} {{ params.postcode }} diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index e688fdac8a..4e6c3df3c0 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -3,7 +3,7 @@ {% macro onsAutosuggest(params) %}

    - {% set autosuggestResults %} -
    +
    {{ params.resultsTitle }}
    -
      +
        +
        +
        + {{ params.instructions }}
        -
        {{ params.instructions }}
        -
        +
        {% endset %} - {{ onsInput({ - "id": params.id, - "type": params.input.type, - "classes": "ons-js-autosuggest-input " + (params.input.classes if params.input.classes else ''), - "width": params.input.width, - "label": params.input.label, - "autocomplete": params.input.autocomplete, - "legend": params.input.legend, - "legendClasses": params.input.legendClasses, - "legendIsQuestionTitle": params.input.legendIsQuestionTitle, - "value": params.input.value, - "attributes": params.input.attributes, - "error": params.input.error, - "mutuallyExclusive": params.input.mutuallyExclusive, - "accessiblePlaceholder": params.input.accessiblePlaceholder, - "name": params.input.name, - "autosuggestResults": autosuggestResults, - "minLength": params.input.minLength, - "maxLength": params.input.maxLength, - "prefix": params.input.prefix, - "suffix": params.input.suffix, - "fieldId": params.input.fieldId, - "fieldClasses": params.input.fieldClasses, - "dontWrap": params.input.dontWrap, - "charCheckLimit": params.input.charCheckLimit, - "searchButton": params.input.searchButton, - "postTextboxLinkText": params.input.postTextboxLinkText, - "postTextboxLinkUrl": params.input.postTextboxLinkUrl, - "listeners": params.input.listeners - }) }} + {{ + onsInput({ + "id": params.id, + "type": params.input.type, + "classes": "ons-js-autosuggest-input" + (" " + params.input.classes if params.input.classes else ""), + "width": params.input.width, + "label": params.input.label, + "autocomplete": params.input.autocomplete, + "legend": params.input.legend, + "legendClasses": params.input.legendClasses, + "legendIsQuestionTitle": params.input.legendIsQuestionTitle, + "value": params.input.value, + "attributes": params.input.attributes, + "error": params.input.error, + "mutuallyExclusive": params.input.mutuallyExclusive, + "accessiblePlaceholder": params.input.accessiblePlaceholder, + "name": params.input.name, + "autosuggestResults": autosuggestResults, + "minLength": params.input.minLength, + "maxLength": params.input.maxLength, + "prefix": params.input.prefix, + "suffix": params.input.suffix, + "fieldId": params.input.fieldId, + "fieldClasses": params.input.fieldClasses, + "dontWrap": params.input.dontWrap, + "charCheckLimit": params.input.charCheckLimit, + "searchButton": params.input.searchButton, + "postTextboxLinkText": params.input.postTextboxLinkText, + "postTextboxLinkUrl": params.input.postTextboxLinkUrl, + "listeners": params.input.listeners + }) + }} {% if not params.mutuallyExclusive %} {{ autosuggestResults | safe }} {% endif %} -
        {% endmacro %} diff --git a/src/components/autosuggest/example-autosuggest-country-multiple.njk b/src/components/autosuggest/example-autosuggest-country-multiple.njk index 0c7a66770f..fbba754b32 100644 --- a/src/components/autosuggest/example-autosuggest-country-multiple.njk +++ b/src/components/autosuggest/example-autosuggest-country-multiple.njk @@ -2,32 +2,32 @@
        - - {{ onsAutosuggest({ - "id": "country-of-birth-autosuggest-multiple", - "input": { - "label": { - "text": "Passport", - "id": "country-of-birth-label-multiple", - "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one." + {{ + onsAutosuggest({ + "id": "country-of-birth-autosuggest-multiple", + "input": { + "label": { + "text": "Passport", + "id": "country-of-birth-label-multiple", + "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one." + }, + "autocomplete": "off" }, - "autocomplete": "off" - }, - "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.", - "ariaOneResult": "There is one suggestion available.", - "ariaNResults": "There are {n} suggestions available.", - "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", - "moreResults": "Continue entering to improve suggestions", - "resultsTitle": "Suggestions", - "resultsTitleId": "country-of-birth-suggestions", - "allowMultiple": true, - "autosuggestData": "/examples/data/country-of-birth.json", - "noResults": "No suggestions found. You can enter your own answer", - "typeMore": "Continue entering to get suggestions", - "language": "en" - }) }} - + "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.", + "ariaOneResult": "There is one suggestion available.", + "ariaNResults": "There are {n} suggestions available.", + "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", + "moreResults": "Continue entering to improve suggestions", + "resultsTitle": "Suggestions", + "resultsTitleId": "country-of-birth-suggestions", + "allowMultiple": true, + "autosuggestData": "/examples/data/country-of-birth.json", + "noResults": "No suggestions found. You can enter your own answer", + "typeMore": "Continue entering to get suggestions", + "language": "en" + }) + }}
        diff --git a/src/components/autosuggest/example-autosuggest-country.njk b/src/components/autosuggest/example-autosuggest-country.njk index c97a4fba41..ddf071ddb0 100644 --- a/src/components/autosuggest/example-autosuggest-country.njk +++ b/src/components/autosuggest/example-autosuggest-country.njk @@ -2,30 +2,30 @@
        - - {{ onsAutosuggest({ - "id": "country-of-birth-autosuggest", - "input": { - "label": { - "text": "Current name of country", - "description": "Enter your own answer or select from suggestions", - "id": "country-of-birth-label" + {{ + onsAutosuggest({ + "id": "country-of-birth-autosuggest", + "input": { + "label": { + "text": "Current name of country", + "description": "Enter your own answer or select from suggestions", + "id": "country-of-birth-label" + }, + "autocomplete": "off" }, - "autocomplete": "off" - }, - "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.", - "ariaOneResult": "There is one suggestion available.", - "ariaNResults": "There are {n} suggestions available.", - "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", - "moreResults": "Continue entering to improve suggestions", - "resultsTitle": "Suggestions", - "resultsTitleId": "country-of-birth-suggestions", - "autosuggestData": "/examples/data/country-of-birth.json", - "noResults": "No suggestions found. You can enter your own answer", - "typeMore": "Continue entering to get suggestions" - }) }} - + "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.", + "ariaOneResult": "There is one suggestion available.", + "ariaNResults": "There are {n} suggestions available.", + "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search", + "moreResults": "Continue entering to improve suggestions", + "resultsTitle": "Suggestions", + "resultsTitleId": "country-of-birth-suggestions", + "autosuggestData": "/examples/data/country-of-birth.json", + "noResults": "No suggestions found. You can enter your own answer", + "typeMore": "Continue entering to get suggestions" + }) + }}
        diff --git a/src/components/back-to-top/example-back-to-top.njk b/src/components/back-to-top/example-back-to-top.njk index 1ef433e9d3..b2724a74c0 100644 --- a/src/components/back-to-top/example-back-to-top.njk +++ b/src/components/back-to-top/example-back-to-top.njk @@ -3,10 +3,69 @@
        -
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Enim neque volutpat ac tincidunt. Tortor pretium viverra suspendisse potenti nullam ac tortor. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Odio morbi quis commodo odio. Lobortis feugiat vivamus at augue eget. Aliquam id diam maecenas ultricies mi eget. Dictum non consectetur a erat nam at lectus urna. Justo laoreet sit amet cursus sit amet. Tristique senectus et netus et malesuada fames. Etiam dignissim diam quis enim. Urna id volutpat lacus laoreet non curabitur. Proin sagittis nisl rhoncus mattis. Vel pretium lectus quam id leo in vitae turpis. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Quis commodo odio aenean sed adipiscing. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Pellentesque sit amet porttitor eget dolor. Habitant morbi tristique senectus et netus et malesuada. Curabitur vitae nunc sed velit. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Id leo in vitae turpis massa. Vitae ultricies leo integer malesuada. Elit at imperdiet dui accumsan sit amet nulla. Pretium quam vulputate dignissim suspendisse in est ante. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Mattis aliquam faucibus purus in massa tempor nec. Orci a scelerisque purus semper. Vel fringilla est ullamcorper eget nulla facilisi. Ac ut consequat semper viverra nam libero justo laoreet sit. Mauris pellentesque pulvinar pellentesque habitant morbi tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam. Diam vel quam elementum pulvinar etiam. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Pulvinar sapien et ligula ullamcorper malesuada. Risus pretium quam vulputate dignissim suspendisse in est. Facilisi etiam dignissim diam quis enim. Sodales ut eu sem integer vitae. Eget nunc scelerisque viverra mauris. Malesuada bibendum arcu vitae elementum curabitur. Elementum nisi quis eleifend quam adipiscing vitae proin. Ultrices vitae auctor eu augue. Hac habitasse platea dictumst vestibulum rhoncus est. Urna neque viverra justo nec ultrices dui sapien eget mi. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam ac tortor vitae purus faucibus. Fames ac turpis egestas maecenas. Magna fermentum iaculis eu non diam phasellus vestibulum. Nisl nunc mi ipsum faucibus vitae aliquet nec. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Faucibus turpis in eu mi bibendum neque egestas. Lectus nulla at volutpat diam ut venenatis tellus. Tellus rutrum tellus pellentesque eu tincidunt tortor. Purus sit amet volutpat consequat mauris nunc congue. Dignissim cras tincidunt lobortis feugiat vivamus at. Ac felis donec et odio pellentesque diam volutpat commodo. Arcu dui vivamus arcu felis. Pulvinar proin gravida hendrerit lectus a. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Maecenas sed enim ut sem viverra aliquet eget. Lacus laoreet non curabitur gravida arcu ac tortor. Laoreet sit amet cursus sit amet dictum. Maecenas accumsan lacus vel facilisis volutpat est velit.
        +
        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui + faucibus in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Enim neque volutpat ac tincidunt. Tortor + pretium viverra suspendisse potenti nullam ac tortor. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Odio + morbi quis commodo odio. Lobortis feugiat vivamus at augue eget. Aliquam id diam maecenas ultricies mi eget. Dictum non + consectetur a erat nam at lectus urna. Justo laoreet sit amet cursus sit amet. Tristique senectus et netus et malesuada + fames. Etiam dignissim diam quis enim. Urna id volutpat lacus laoreet non curabitur. Proin sagittis nisl rhoncus mattis. Vel + pretium lectus quam id leo in vitae turpis. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Scelerisque + eleifend donec pretium vulputate sapien nec sagittis. Quis commodo odio aenean sed adipiscing. Metus vulputate eu + scelerisque felis imperdiet proin fermentum. Pellentesque sit amet porttitor eget dolor. Habitant morbi tristique senectus + et netus et malesuada. Curabitur vitae nunc sed velit. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt + lobortis feugiat. Id leo in vitae turpis massa. Vitae ultricies leo integer malesuada. Elit at imperdiet dui accumsan sit + amet nulla. Pretium quam vulputate dignissim suspendisse in est ante. Nullam vehicula ipsum a arcu cursus vitae congue + mauris. Mattis aliquam faucibus purus in massa tempor nec. Orci a scelerisque purus semper. Vel fringilla est ullamcorper + eget nulla facilisi. Ac ut consequat semper viverra nam libero justo laoreet sit. Mauris pellentesque pulvinar pellentesque + habitant morbi tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam. Diam vel quam elementum pulvinar + etiam. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Pulvinar sapien et ligula ullamcorper malesuada. + Risus pretium quam vulputate dignissim suspendisse in est. Facilisi etiam dignissim diam quis enim. Sodales ut eu sem + integer vitae. Eget nunc scelerisque viverra mauris. Malesuada bibendum arcu vitae elementum curabitur. Elementum nisi quis + eleifend quam adipiscing vitae proin. Ultrices vitae auctor eu augue. Hac habitasse platea dictumst vestibulum rhoncus est. + Urna neque viverra justo nec ultrices dui sapien eget mi. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam + ac tortor vitae purus faucibus. Fames ac turpis egestas maecenas. Magna fermentum iaculis eu non diam phasellus vestibulum. + Nisl nunc mi ipsum faucibus vitae aliquet nec. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Faucibus turpis in + eu mi bibendum neque egestas. Lectus nulla at volutpat diam ut venenatis tellus. Tellus rutrum tellus pellentesque eu + tincidunt tortor. Purus sit amet volutpat consequat mauris nunc congue. Dignissim cras tincidunt lobortis feugiat vivamus + at. Ac felis donec et odio pellentesque diam volutpat commodo. Arcu dui vivamus arcu felis. Pulvinar proin gravida hendrerit + lectus a. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Maecenas sed enim ut sem viverra aliquet + eget. Lacus laoreet non curabitur gravida arcu ac tortor. Laoreet sit amet cursus sit amet dictum. Maecenas accumsan lacus + vel facilisis volutpat est velit. +
        -
        Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Sem integer vitae justo eget magna fermentum iaculis. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Imperdiet proin fermentum leo vel orci porta non. Sed enim ut sem viverra aliquet eget sit amet. Rhoncus mattis rhoncus urna neque viverra justo. At tellus at urna condimentum mattis pellentesque. Vel orci porta non pulvinar neque laoreet suspendisse. Consectetur purus ut faucibus pulvinar elementum integer enim. Urna condimentum mattis pellentesque id nibh. Sem integer vitae justo eget magna fermentum. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Adipiscing bibendum est ultricies integer quis auctor elit. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Sapien faucibus et molestie ac feugiat. Tempor id eu nisl nunc mi ipsum. Arcu non sodales neque sodales ut etiam sit amet nisl. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Pellentesque adipiscing commodo elit at imperdiet. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Semper risus in hendrerit gravida rutrum quisque. Tempor nec feugiat nisl pretium fusce id. Ipsum consequat nisl vel pretium. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Etiam tempor orci eu lobortis elementum nibh. Eget nullam non nisi est sit amet facilisis magna. Diam vel quam elementum pulvinar. Dolor morbi non arcu risus quis. Nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis sed odio. Purus in mollis nunc sed id. Sit amet est placerat in egestas erat imperdiet sed. Diam sollicitudin tempor id eu nisl nunc mi. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ac feugiat sed lectus vestibulum mattis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Faucibus vitae aliquet nec ullamcorper sit amet. Eu consequat ac felis donec et odio pellentesque diam. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. A erat nam at lectus urna duis convallis. Pellentesque elit eget gravida cum sociis. Cursus sit amet dictum sit amet justo donec enim. Vitae justo eget magna fermentum iaculis. Enim ut sem viverra aliquet. Convallis tellus id interdum velit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Venenatis a condimentum vitae sapien. Lacus viverra vitae congue eu consequat ac felis. Diam donec adipiscing tristique risus nec feugiat. Sit amet mattis vulputate enim nulla aliquet. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Vulputate odio ut enim blandit volutpat. Elit pellentesque habitant morbi tristique senectus et netus. Aliquet lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. Quis ipsum suspendisse ultrices gravida dictum fusce. Sit amet mauris commodo quis imperdiet massa tincidunt. Adipiscing elit ut aliquam purus. A diam maecenas sed enim ut sem viverra aliquet eget. Enim neque volutpat ac tincidunt vitae. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Amet nisl suscipit adipiscing bibendum. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nulla facilisi cras fermentum odio eu feugiat.
        +
        + Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Sem integer vitae justo eget magna fermentum iaculis. + Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Imperdiet proin fermentum leo vel orci porta non. Sed enim + ut sem viverra aliquet eget sit amet. Rhoncus mattis rhoncus urna neque viverra justo. At tellus at urna condimentum mattis + pellentesque. Vel orci porta non pulvinar neque laoreet suspendisse. Consectetur purus ut faucibus pulvinar elementum + integer enim. Urna condimentum mattis pellentesque id nibh. Sem integer vitae justo eget magna fermentum. Ultrices vitae + auctor eu augue ut lectus arcu bibendum. Adipiscing bibendum est ultricies integer quis auctor elit. Duis tristique + sollicitudin nibh sit amet commodo nulla facilisi. Sapien faucibus et molestie ac feugiat. Tempor id eu nisl nunc mi ipsum. + Arcu non sodales neque sodales ut etiam sit amet nisl. Et malesuada fames ac turpis egestas integer eget aliquet nibh. + Pellentesque adipiscing commodo elit at imperdiet. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque + eleifend. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Semper risus in hendrerit gravida + rutrum quisque. Tempor nec feugiat nisl pretium fusce id. Ipsum consequat nisl vel pretium. Pellentesque eu tincidunt tortor + aliquam nulla facilisi cras fermentum. Etiam tempor orci eu lobortis elementum nibh. Eget nullam non nisi est sit amet + facilisis magna. Diam vel quam elementum pulvinar. Dolor morbi non arcu risus quis. Nullam ac tortor vitae purus. Morbi leo + urna molestie at elementum eu facilisis sed odio. Purus in mollis nunc sed id. Sit amet est placerat in egestas erat + imperdiet sed. Diam sollicitudin tempor id eu nisl nunc mi. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ac + feugiat sed lectus vestibulum mattis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Faucibus vitae + aliquet nec ullamcorper sit amet. Eu consequat ac felis donec et odio pellentesque diam. Morbi tincidunt ornare massa eget + egestas purus viverra accumsan. A erat nam at lectus urna duis convallis. Pellentesque elit eget gravida cum sociis. Cursus + sit amet dictum sit amet justo donec enim. Vitae justo eget magna fermentum iaculis. Enim ut sem viverra aliquet. Convallis + tellus id interdum velit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Venenatis a + condimentum vitae sapien. Lacus viverra vitae congue eu consequat ac felis. Diam donec adipiscing tristique risus nec + feugiat. Sit amet mattis vulputate enim nulla aliquet. Quis commodo odio aenean sed adipiscing diam donec adipiscing + tristique. Vulputate odio ut enim blandit volutpat. Elit pellentesque habitant morbi tristique senectus et netus. Aliquet + lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. Quis ipsum suspendisse + ultrices gravida dictum fusce. Sit amet mauris commodo quis imperdiet massa tincidunt. Adipiscing elit ut aliquam purus. A + diam maecenas sed enim ut sem viverra aliquet eget. Enim neque volutpat ac tincidunt vitae. Ultricies leo integer malesuada + nunc vel risus commodo viverra maecenas. Amet nisl suscipit adipiscing bibendum. Nunc pulvinar sapien et ligula ullamcorper + malesuada proin. Nulla facilisi cras fermentum odio eu feugiat. +
        @@ -14,18 +73,136 @@
        -
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Enim neque volutpat ac tincidunt. Tortor pretium viverra suspendisse potenti nullam ac tortor. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Odio morbi quis commodo odio. Lobortis feugiat vivamus at augue eget. Aliquam id diam maecenas ultricies mi eget. Dictum non consectetur a erat nam at lectus urna. Justo laoreet sit amet cursus sit amet. Tristique senectus et netus et malesuada fames. Etiam dignissim diam quis enim. Urna id volutpat lacus laoreet non curabitur. Proin sagittis nisl rhoncus mattis. Vel pretium lectus quam id leo in vitae turpis. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Quis commodo odio aenean sed adipiscing. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Pellentesque sit amet porttitor eget dolor. Habitant morbi tristique senectus et netus et malesuada. Curabitur vitae nunc sed velit. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Id leo in vitae turpis massa. Vitae ultricies leo integer malesuada. Elit at imperdiet dui accumsan sit amet nulla. Pretium quam vulputate dignissim suspendisse in est ante. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Mattis aliquam faucibus purus in massa tempor nec. Orci a scelerisque purus semper. Vel fringilla est ullamcorper eget nulla facilisi. Ac ut consequat semper viverra nam libero justo laoreet sit. Mauris pellentesque pulvinar pellentesque habitant morbi tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam. Diam vel quam elementum pulvinar etiam. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Pulvinar sapien et ligula ullamcorper malesuada. Risus pretium quam vulputate dignissim suspendisse in est. Facilisi etiam dignissim diam quis enim. Sodales ut eu sem integer vitae. Eget nunc scelerisque viverra mauris. Malesuada bibendum arcu vitae elementum curabitur. Elementum nisi quis eleifend quam adipiscing vitae proin. Ultrices vitae auctor eu augue. Hac habitasse platea dictumst vestibulum rhoncus est. Urna neque viverra justo nec ultrices dui sapien eget mi. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam ac tortor vitae purus faucibus. Fames ac turpis egestas maecenas. Magna fermentum iaculis eu non diam phasellus vestibulum. Nisl nunc mi ipsum faucibus vitae aliquet nec. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Faucibus turpis in eu mi bibendum neque egestas. Lectus nulla at volutpat diam ut venenatis tellus. Tellus rutrum tellus pellentesque eu tincidunt tortor. Purus sit amet volutpat consequat mauris nunc congue. Dignissim cras tincidunt lobortis feugiat vivamus at. Ac felis donec et odio pellentesque diam volutpat commodo. Arcu dui vivamus arcu felis. Pulvinar proin gravida hendrerit lectus a. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Maecenas sed enim ut sem viverra aliquet eget. Lacus laoreet non curabitur gravida arcu ac tortor. Laoreet sit amet cursus sit amet dictum. Maecenas accumsan lacus vel facilisis volutpat est velit.
        +
        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui + faucibus in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Enim neque volutpat ac tincidunt. Tortor + pretium viverra suspendisse potenti nullam ac tortor. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Odio + morbi quis commodo odio. Lobortis feugiat vivamus at augue eget. Aliquam id diam maecenas ultricies mi eget. Dictum non + consectetur a erat nam at lectus urna. Justo laoreet sit amet cursus sit amet. Tristique senectus et netus et malesuada + fames. Etiam dignissim diam quis enim. Urna id volutpat lacus laoreet non curabitur. Proin sagittis nisl rhoncus mattis. Vel + pretium lectus quam id leo in vitae turpis. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Scelerisque + eleifend donec pretium vulputate sapien nec sagittis. Quis commodo odio aenean sed adipiscing. Metus vulputate eu + scelerisque felis imperdiet proin fermentum. Pellentesque sit amet porttitor eget dolor. Habitant morbi tristique senectus + et netus et malesuada. Curabitur vitae nunc sed velit. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt + lobortis feugiat. Id leo in vitae turpis massa. Vitae ultricies leo integer malesuada. Elit at imperdiet dui accumsan sit + amet nulla. Pretium quam vulputate dignissim suspendisse in est ante. Nullam vehicula ipsum a arcu cursus vitae congue + mauris. Mattis aliquam faucibus purus in massa tempor nec. Orci a scelerisque purus semper. Vel fringilla est ullamcorper + eget nulla facilisi. Ac ut consequat semper viverra nam libero justo laoreet sit. Mauris pellentesque pulvinar pellentesque + habitant morbi tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam. Diam vel quam elementum pulvinar + etiam. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Pulvinar sapien et ligula ullamcorper malesuada. + Risus pretium quam vulputate dignissim suspendisse in est. Facilisi etiam dignissim diam quis enim. Sodales ut eu sem + integer vitae. Eget nunc scelerisque viverra mauris. Malesuada bibendum arcu vitae elementum curabitur. Elementum nisi quis + eleifend quam adipiscing vitae proin. Ultrices vitae auctor eu augue. Hac habitasse platea dictumst vestibulum rhoncus est. + Urna neque viverra justo nec ultrices dui sapien eget mi. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam + ac tortor vitae purus faucibus. Fames ac turpis egestas maecenas. Magna fermentum iaculis eu non diam phasellus vestibulum. + Nisl nunc mi ipsum faucibus vitae aliquet nec. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Faucibus turpis in + eu mi bibendum neque egestas. Lectus nulla at volutpat diam ut venenatis tellus. Tellus rutrum tellus pellentesque eu + tincidunt tortor. Purus sit amet volutpat consequat mauris nunc congue. Dignissim cras tincidunt lobortis feugiat vivamus + at. Ac felis donec et odio pellentesque diam volutpat commodo. Arcu dui vivamus arcu felis. Pulvinar proin gravida hendrerit + lectus a. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Maecenas sed enim ut sem viverra aliquet + eget. Lacus laoreet non curabitur gravida arcu ac tortor. Laoreet sit amet cursus sit amet dictum. Maecenas accumsan lacus + vel facilisis volutpat est velit. +
        -
        Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Sem integer vitae justo eget magna fermentum iaculis. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Imperdiet proin fermentum leo vel orci porta non. Sed enim ut sem viverra aliquet eget sit amet. Rhoncus mattis rhoncus urna neque viverra justo. At tellus at urna condimentum mattis pellentesque. Vel orci porta non pulvinar neque laoreet suspendisse. Consectetur purus ut faucibus pulvinar elementum integer enim. Urna condimentum mattis pellentesque id nibh. Sem integer vitae justo eget magna fermentum. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Adipiscing bibendum est ultricies integer quis auctor elit. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Sapien faucibus et molestie ac feugiat. Tempor id eu nisl nunc mi ipsum. Arcu non sodales neque sodales ut etiam sit amet nisl. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Pellentesque adipiscing commodo elit at imperdiet. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Semper risus in hendrerit gravida rutrum quisque. Tempor nec feugiat nisl pretium fusce id. Ipsum consequat nisl vel pretium. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Etiam tempor orci eu lobortis elementum nibh. Eget nullam non nisi est sit amet facilisis magna. Diam vel quam elementum pulvinar. Dolor morbi non arcu risus quis. Nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis sed odio. Purus in mollis nunc sed id. Sit amet est placerat in egestas erat imperdiet sed. Diam sollicitudin tempor id eu nisl nunc mi. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ac feugiat sed lectus vestibulum mattis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Faucibus vitae aliquet nec ullamcorper sit amet. Eu consequat ac felis donec et odio pellentesque diam. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. A erat nam at lectus urna duis convallis. Pellentesque elit eget gravida cum sociis. Cursus sit amet dictum sit amet justo donec enim. Vitae justo eget magna fermentum iaculis. Enim ut sem viverra aliquet. Convallis tellus id interdum velit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Venenatis a condimentum vitae sapien. Lacus viverra vitae congue eu consequat ac felis. Diam donec adipiscing tristique risus nec feugiat. Sit amet mattis vulputate enim nulla aliquet. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Vulputate odio ut enim blandit volutpat. Elit pellentesque habitant morbi tristique senectus et netus. Aliquet lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. Quis ipsum suspendisse ultrices gravida dictum fusce. Sit amet mauris commodo quis imperdiet massa tincidunt. Adipiscing elit ut aliquam purus. A diam maecenas sed enim ut sem viverra aliquet eget. Enim neque volutpat ac tincidunt vitae. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Amet nisl suscipit adipiscing bibendum. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nulla facilisi cras fermentum odio eu feugiat.
        +
        + Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Sem integer vitae justo eget magna fermentum iaculis. + Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Imperdiet proin fermentum leo vel orci porta non. Sed enim + ut sem viverra aliquet eget sit amet. Rhoncus mattis rhoncus urna neque viverra justo. At tellus at urna condimentum mattis + pellentesque. Vel orci porta non pulvinar neque laoreet suspendisse. Consectetur purus ut faucibus pulvinar elementum + integer enim. Urna condimentum mattis pellentesque id nibh. Sem integer vitae justo eget magna fermentum. Ultrices vitae + auctor eu augue ut lectus arcu bibendum. Adipiscing bibendum est ultricies integer quis auctor elit. Duis tristique + sollicitudin nibh sit amet commodo nulla facilisi. Sapien faucibus et molestie ac feugiat. Tempor id eu nisl nunc mi ipsum. + Arcu non sodales neque sodales ut etiam sit amet nisl. Et malesuada fames ac turpis egestas integer eget aliquet nibh. + Pellentesque adipiscing commodo elit at imperdiet. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque + eleifend. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Semper risus in hendrerit gravida + rutrum quisque. Tempor nec feugiat nisl pretium fusce id. Ipsum consequat nisl vel pretium. Pellentesque eu tincidunt tortor + aliquam nulla facilisi cras fermentum. Etiam tempor orci eu lobortis elementum nibh. Eget nullam non nisi est sit amet + facilisis magna. Diam vel quam elementum pulvinar. Dolor morbi non arcu risus quis. Nullam ac tortor vitae purus. Morbi leo + urna molestie at elementum eu facilisis sed odio. Purus in mollis nunc sed id. Sit amet est placerat in egestas erat + imperdiet sed. Diam sollicitudin tempor id eu nisl nunc mi. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ac + feugiat sed lectus vestibulum mattis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Faucibus vitae + aliquet nec ullamcorper sit amet. Eu consequat ac felis donec et odio pellentesque diam. Morbi tincidunt ornare massa eget + egestas purus viverra accumsan. A erat nam at lectus urna duis convallis. Pellentesque elit eget gravida cum sociis. Cursus + sit amet dictum sit amet justo donec enim. Vitae justo eget magna fermentum iaculis. Enim ut sem viverra aliquet. Convallis + tellus id interdum velit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Venenatis a + condimentum vitae sapien. Lacus viverra vitae congue eu consequat ac felis. Diam donec adipiscing tristique risus nec + feugiat. Sit amet mattis vulputate enim nulla aliquet. Quis commodo odio aenean sed adipiscing diam donec adipiscing + tristique. Vulputate odio ut enim blandit volutpat. Elit pellentesque habitant morbi tristique senectus et netus. Aliquet + lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. Quis ipsum suspendisse + ultrices gravida dictum fusce. Sit amet mauris commodo quis imperdiet massa tincidunt. Adipiscing elit ut aliquam purus. A + diam maecenas sed enim ut sem viverra aliquet eget. Enim neque volutpat ac tincidunt vitae. Ultricies leo integer malesuada + nunc vel risus commodo viverra maecenas. Amet nisl suscipit adipiscing bibendum. Nunc pulvinar sapien et ligula ullamcorper + malesuada proin. Nulla facilisi cras fermentum odio eu feugiat. +
        -
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Enim neque volutpat ac tincidunt. Tortor pretium viverra suspendisse potenti nullam ac tortor. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Odio morbi quis commodo odio. Lobortis feugiat vivamus at augue eget. Aliquam id diam maecenas ultricies mi eget. Dictum non consectetur a erat nam at lectus urna. Justo laoreet sit amet cursus sit amet. Tristique senectus et netus et malesuada fames. Etiam dignissim diam quis enim. Urna id volutpat lacus laoreet non curabitur. Proin sagittis nisl rhoncus mattis. Vel pretium lectus quam id leo in vitae turpis. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Quis commodo odio aenean sed adipiscing. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Pellentesque sit amet porttitor eget dolor. Habitant morbi tristique senectus et netus et malesuada. Curabitur vitae nunc sed velit. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Id leo in vitae turpis massa. Vitae ultricies leo integer malesuada. Elit at imperdiet dui accumsan sit amet nulla. Pretium quam vulputate dignissim suspendisse in est ante. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Mattis aliquam faucibus purus in massa tempor nec. Orci a scelerisque purus semper. Vel fringilla est ullamcorper eget nulla facilisi. Ac ut consequat semper viverra nam libero justo laoreet sit. Mauris pellentesque pulvinar pellentesque habitant morbi tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam. Diam vel quam elementum pulvinar etiam. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Pulvinar sapien et ligula ullamcorper malesuada. Risus pretium quam vulputate dignissim suspendisse in est. Facilisi etiam dignissim diam quis enim. Sodales ut eu sem integer vitae. Eget nunc scelerisque viverra mauris. Malesuada bibendum arcu vitae elementum curabitur. Elementum nisi quis eleifend quam adipiscing vitae proin. Ultrices vitae auctor eu augue. Hac habitasse platea dictumst vestibulum rhoncus est. Urna neque viverra justo nec ultrices dui sapien eget mi. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam ac tortor vitae purus faucibus. Fames ac turpis egestas maecenas. Magna fermentum iaculis eu non diam phasellus vestibulum. Nisl nunc mi ipsum faucibus vitae aliquet nec. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Faucibus turpis in eu mi bibendum neque egestas. Lectus nulla at volutpat diam ut venenatis tellus. Tellus rutrum tellus pellentesque eu tincidunt tortor. Purus sit amet volutpat consequat mauris nunc congue. Dignissim cras tincidunt lobortis feugiat vivamus at. Ac felis donec et odio pellentesque diam volutpat commodo. Arcu dui vivamus arcu felis. Pulvinar proin gravida hendrerit lectus a. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Maecenas sed enim ut sem viverra aliquet eget. Lacus laoreet non curabitur gravida arcu ac tortor. Laoreet sit amet cursus sit amet dictum. Maecenas accumsan lacus vel facilisis volutpat est velit.
        +
        + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Dignissim diam quis enim lobortis scelerisque fermentum dui + faucibus in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Enim neque volutpat ac tincidunt. Tortor + pretium viverra suspendisse potenti nullam ac tortor. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Odio + morbi quis commodo odio. Lobortis feugiat vivamus at augue eget. Aliquam id diam maecenas ultricies mi eget. Dictum non + consectetur a erat nam at lectus urna. Justo laoreet sit amet cursus sit amet. Tristique senectus et netus et malesuada + fames. Etiam dignissim diam quis enim. Urna id volutpat lacus laoreet non curabitur. Proin sagittis nisl rhoncus mattis. Vel + pretium lectus quam id leo in vitae turpis. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Scelerisque + eleifend donec pretium vulputate sapien nec sagittis. Quis commodo odio aenean sed adipiscing. Metus vulputate eu + scelerisque felis imperdiet proin fermentum. Pellentesque sit amet porttitor eget dolor. Habitant morbi tristique senectus + et netus et malesuada. Curabitur vitae nunc sed velit. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt + lobortis feugiat. Id leo in vitae turpis massa. Vitae ultricies leo integer malesuada. Elit at imperdiet dui accumsan sit + amet nulla. Pretium quam vulputate dignissim suspendisse in est ante. Nullam vehicula ipsum a arcu cursus vitae congue + mauris. Mattis aliquam faucibus purus in massa tempor nec. Orci a scelerisque purus semper. Vel fringilla est ullamcorper + eget nulla facilisi. Ac ut consequat semper viverra nam libero justo laoreet sit. Mauris pellentesque pulvinar pellentesque + habitant morbi tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam. Diam vel quam elementum pulvinar + etiam. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Pulvinar sapien et ligula ullamcorper malesuada. + Risus pretium quam vulputate dignissim suspendisse in est. Facilisi etiam dignissim diam quis enim. Sodales ut eu sem + integer vitae. Eget nunc scelerisque viverra mauris. Malesuada bibendum arcu vitae elementum curabitur. Elementum nisi quis + eleifend quam adipiscing vitae proin. Ultrices vitae auctor eu augue. Hac habitasse platea dictumst vestibulum rhoncus est. + Urna neque viverra justo nec ultrices dui sapien eget mi. Quisque egestas diam in arcu cursus euismod quis viverra. Nullam + ac tortor vitae purus faucibus. Fames ac turpis egestas maecenas. Magna fermentum iaculis eu non diam phasellus vestibulum. + Nisl nunc mi ipsum faucibus vitae aliquet nec. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Faucibus turpis in + eu mi bibendum neque egestas. Lectus nulla at volutpat diam ut venenatis tellus. Tellus rutrum tellus pellentesque eu + tincidunt tortor. Purus sit amet volutpat consequat mauris nunc congue. Dignissim cras tincidunt lobortis feugiat vivamus + at. Ac felis donec et odio pellentesque diam volutpat commodo. Arcu dui vivamus arcu felis. Pulvinar proin gravida hendrerit + lectus a. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Maecenas sed enim ut sem viverra aliquet + eget. Lacus laoreet non curabitur gravida arcu ac tortor. Laoreet sit amet cursus sit amet dictum. Maecenas accumsan lacus + vel facilisis volutpat est velit. +
        -
        Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Sem integer vitae justo eget magna fermentum iaculis. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Imperdiet proin fermentum leo vel orci porta non. Sed enim ut sem viverra aliquet eget sit amet. Rhoncus mattis rhoncus urna neque viverra justo. At tellus at urna condimentum mattis pellentesque. Vel orci porta non pulvinar neque laoreet suspendisse. Consectetur purus ut faucibus pulvinar elementum integer enim. Urna condimentum mattis pellentesque id nibh. Sem integer vitae justo eget magna fermentum. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Adipiscing bibendum est ultricies integer quis auctor elit. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Sapien faucibus et molestie ac feugiat. Tempor id eu nisl nunc mi ipsum. Arcu non sodales neque sodales ut etiam sit amet nisl. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Pellentesque adipiscing commodo elit at imperdiet. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Semper risus in hendrerit gravida rutrum quisque. Tempor nec feugiat nisl pretium fusce id. Ipsum consequat nisl vel pretium. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Etiam tempor orci eu lobortis elementum nibh. Eget nullam non nisi est sit amet facilisis magna. Diam vel quam elementum pulvinar. Dolor morbi non arcu risus quis. Nullam ac tortor vitae purus. Morbi leo urna molestie at elementum eu facilisis sed odio. Purus in mollis nunc sed id. Sit amet est placerat in egestas erat imperdiet sed. Diam sollicitudin tempor id eu nisl nunc mi. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ac feugiat sed lectus vestibulum mattis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Faucibus vitae aliquet nec ullamcorper sit amet. Eu consequat ac felis donec et odio pellentesque diam. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. A erat nam at lectus urna duis convallis. Pellentesque elit eget gravida cum sociis. Cursus sit amet dictum sit amet justo donec enim. Vitae justo eget magna fermentum iaculis. Enim ut sem viverra aliquet. Convallis tellus id interdum velit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Venenatis a condimentum vitae sapien. Lacus viverra vitae congue eu consequat ac felis. Diam donec adipiscing tristique risus nec feugiat. Sit amet mattis vulputate enim nulla aliquet. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Vulputate odio ut enim blandit volutpat. Elit pellentesque habitant morbi tristique senectus et netus. Aliquet lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. Quis ipsum suspendisse ultrices gravida dictum fusce. Sit amet mauris commodo quis imperdiet massa tincidunt. Adipiscing elit ut aliquam purus. A diam maecenas sed enim ut sem viverra aliquet eget. Enim neque volutpat ac tincidunt vitae. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Amet nisl suscipit adipiscing bibendum. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nulla facilisi cras fermentum odio eu feugiat.
        +
        + Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Sem integer vitae justo eget magna fermentum iaculis. + Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Imperdiet proin fermentum leo vel orci porta non. Sed enim + ut sem viverra aliquet eget sit amet. Rhoncus mattis rhoncus urna neque viverra justo. At tellus at urna condimentum mattis + pellentesque. Vel orci porta non pulvinar neque laoreet suspendisse. Consectetur purus ut faucibus pulvinar elementum + integer enim. Urna condimentum mattis pellentesque id nibh. Sem integer vitae justo eget magna fermentum. Ultrices vitae + auctor eu augue ut lectus arcu bibendum. Adipiscing bibendum est ultricies integer quis auctor elit. Duis tristique + sollicitudin nibh sit amet commodo nulla facilisi. Sapien faucibus et molestie ac feugiat. Tempor id eu nisl nunc mi ipsum. + Arcu non sodales neque sodales ut etiam sit amet nisl. Et malesuada fames ac turpis egestas integer eget aliquet nibh. + Pellentesque adipiscing commodo elit at imperdiet. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque + eleifend. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Semper risus in hendrerit gravida + rutrum quisque. Tempor nec feugiat nisl pretium fusce id. Ipsum consequat nisl vel pretium. Pellentesque eu tincidunt tortor + aliquam nulla facilisi cras fermentum. Etiam tempor orci eu lobortis elementum nibh. Eget nullam non nisi est sit amet + facilisis magna. Diam vel quam elementum pulvinar. Dolor morbi non arcu risus quis. Nullam ac tortor vitae purus. Morbi leo + urna molestie at elementum eu facilisis sed odio. Purus in mollis nunc sed id. Sit amet est placerat in egestas erat + imperdiet sed. Diam sollicitudin tempor id eu nisl nunc mi. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ac + feugiat sed lectus vestibulum mattis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Faucibus vitae + aliquet nec ullamcorper sit amet. Eu consequat ac felis donec et odio pellentesque diam. Morbi tincidunt ornare massa eget + egestas purus viverra accumsan. A erat nam at lectus urna duis convallis. Pellentesque elit eget gravida cum sociis. Cursus + sit amet dictum sit amet justo donec enim. Vitae justo eget magna fermentum iaculis. Enim ut sem viverra aliquet. Convallis + tellus id interdum velit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Venenatis a + condimentum vitae sapien. Lacus viverra vitae congue eu consequat ac felis. Diam donec adipiscing tristique risus nec + feugiat. Sit amet mattis vulputate enim nulla aliquet. Quis commodo odio aenean sed adipiscing diam donec adipiscing + tristique. Vulputate odio ut enim blandit volutpat. Elit pellentesque habitant morbi tristique senectus et netus. Aliquet + lectus proin nibh nisl condimentum id. A iaculis at erat pellentesque adipiscing commodo elit at. Quis ipsum suspendisse + ultrices gravida dictum fusce. Sit amet mauris commodo quis imperdiet massa tincidunt. Adipiscing elit ut aliquam purus. A + diam maecenas sed enim ut sem viverra aliquet eget. Enim neque volutpat ac tincidunt vitae. Ultricies leo integer malesuada + nunc vel risus commodo viverra maecenas. Amet nisl suscipit adipiscing bibendum. Nunc pulvinar sapien et ligula ullamcorper + malesuada proin. Nulla facilisi cras fermentum odio eu feugiat. +
        {{ diff --git a/src/components/back-to-top/example-full-page-back-to-top.njk b/src/components/back-to-top/example-full-page-back-to-top.njk index 3322152a0d..d902f28c0d 100644 --- a/src/components/back-to-top/example-full-page-back-to-top.njk +++ b/src/components/back-to-top/example-full-page-back-to-top.njk @@ -1,37 +1,36 @@ --- -title: "Example: Long Page" +title: 'Example: Long Page' layout: ~ --- + {% extends "layout/_template.njk" %} {% from "components/list/_macro.njk" import onsList %} {% from "components/back-to-top/_macro.njk" import onsBackToTop %} {% from "components/related-content/_macro.njk" import onsRelatedContent %} {% from "components/content-pagination/_macro.njk" import onsContentPagination %} - -{% set pageConfig = { - "header": { - "title": 'Service name' - }, - "breadcrumbs": { - "ariaLabel": 'Breadcrumbs', - "itemsList": [ - { - "url": '#0', - "text": 'Home' - }, - { - "url": '#0', - "text": 'News' - } - ] - }, - "footer": {} -} %} - - +{% + set pageConfig = { + "header": { + "title": 'Service name' + }, + "breadcrumbs": { + "ariaLabel": 'Breadcrumbs', + "itemsList": [ + { + "url": '#0', + "text": 'Home' + }, + { + "url": '#0', + "text": 'News' + } + ] + }, + "footer": {} + } +%} {% block main %} -

        Press releases : @@ -39,16 +38,30 @@ layout: ~

        -
        -
        - -

        In a groundbreaking move, the Office for National Statistics (ONS) has embarked on a transformative journey with the introduction of the Integrated Data Service (IDS). This sophisticated, cloud-based platform is meticulously crafted to empower analysts and researchers, providing them with unprecedented access to a diverse array of data sources. The overarching goal of the IDS is nothing short of unlocking the boundless potential inherent in data, thereby contributing significantly to evidence-based policymaking while fostering a culture of collaboration across various government departments.

        - -

        The inaugural phase of the IDS has now been unveiled through the exclusive introduction of a private beta version. This exclusive access is extended to a carefully curated group of government analysts, offering them a unique opportunity to delve into the intricacies of comparing and combining data held not only by the ONS but also by other government departments. The emphasis here is on fostering a collaborative ecosystem that transcends traditional boundaries, a move poised to play a pivotal role in maximizing the utility of data for the collective benefit of the government's policy formulation and decision-making processes.

        - -

        Launching next spring, a public beta will open the door for accredited researchers outside of government to use the new service.

        +

        + In a groundbreaking move, the Office for National Statistics (ONS) has embarked on a transformative journey with the + introduction of the Integrated Data Service (IDS). This sophisticated, cloud-based platform is meticulously crafted to + empower analysts and researchers, providing them with unprecedented access to a diverse array of data sources. The + overarching goal of the IDS is nothing short of unlocking the boundless potential inherent in data, thereby contributing + significantly to evidence-based policymaking while fostering a culture of collaboration across various government + departments. +

        + +

        + The inaugural phase of the IDS has now been unveiled through the exclusive introduction of a private beta version. This + exclusive access is extended to a carefully curated group of government analysts, offering them a unique opportunity to + delve into the intricacies of comparing and combining data held not only by the ONS but also by other government + departments. The emphasis here is on fostering a collaborative ecosystem that transcends traditional boundaries, a move + poised to play a pivotal role in maximizing the utility of data for the collective benefit of the government's policy + formulation and decision-making processes. +

        + +

        + Launching next spring, a public beta will open the door for accredited researchers outside of government to use the new + service. +

        The three projects selected for the private beta and will focus on some of the government’s top priorities:

        @@ -68,15 +81,30 @@ layout: ~ }) }} -

        DCMS Minister for State Julia Lopez said: "The Integrated Data Service is a crucial part of our National Data Strategy and will make it easier and quicker for policy makers to access robust evidence for making the decisions that can improve the lives of people across the country.

        - -

        "Unlocking the power of data will boost the economy, create jobs and help us build back better from the pandemic.”

        Joanna Davinson, Executive Director at the Central Digital and Data Office, said: “The Integrated Data Service will provide the public sector with secure access to high-quality data for better research and analysis.

        - -

        “This is aligned to our vision of having increased availability of data for decision-makers to ensure more data driven policies. In this way, we can enable transformation of the Government’s use of data and support the delivery of efficient public services for users.”

        - -

        Alison Pritchard, Deputy National Statistician for Data Capability, said: "The Service demonstrates how data held, managed and accessed in a trusted and secure environment can benefit us all by providing essential insight on social and economic factors. I am particularly looking forward to engaging widely to explain how we are protecting the data appropriately and making sure it is put to use for the public good."

        - - +

        + DCMS Minister for State Julia Lopez said: "The Integrated Data Service is a crucial part of our National Data Strategy + and will make it easier and quicker for policy makers to access robust evidence for making the decisions that can + improve the lives of people across the country. +

        + +

        "Unlocking the power of data will boost the economy, create jobs and help us build back better from the pandemic.”

        +

        + Joanna Davinson, Executive Director at the Central Digital and Data Office, said: “The Integrated Data Service will + provide the public sector with secure access to high-quality data for better research and analysis. +

        + +

        + “This is aligned to our vision of having increased availability of data for decision-makers to ensure more data driven + policies. In this way, we can enable transformation of the Government’s use of data and support the delivery of + efficient public services for users.” +

        + +

        + Alison Pritchard, Deputy National Statistician for Data Capability, said: "The Service demonstrates how data held, + managed and accessed in a trusted and secure environment can benefit us all by providing essential insight on social and + economic factors. I am particularly looking forward to engaging widely to explain how we are protecting the data + appropriately and making sure it is put to use for the public good." +

        {{ @@ -100,93 +128,77 @@ layout: ~ }} {{ onsBackToTop() }} -
        -
        -
        - - {% call onsRelatedContent({ - "ariaLabel": 'Related content', - "rows": [ - { - "id": 'published-date', - "title": 'Published on', - "itemsList": [ - { - "text": '' - } - ] - }, - { - "id": 'published-in', - "title": 'Published in', - "classes": 'ons-u-mb-no', - "variants": 'bare', - "itemsList": [ - { - "text": 'Press releases', - "url": '#0' - } - ] - }, - { - "id": 'tags', - "title": 'Tags', - "itemsList": [ - { - "text": 'Integrated data', - "url": '#0' - }, - { - "text": 'Census 2021', - "url": '#0' - }, - { - "text": 'Survey', - "url": '#0' - } - ] - }, - { - "id": 'share-this-article', - "title": 'Share this article', - "variants": 'social', - "iconPosition": 'before', - "iconSize": 'xxl', - "itemsList": [ - { - "url": '#0', - "text": 'Facebook', - "iconType": 'facebook', - "rel": 'noreferrer external' - }, - { - "url": '#0', - "text": 'Twitter', - "iconType": 'twitter', - "rel": 'noreferrer external' - } - ] - } - ] - }) %} - + {% + call onsRelatedContent({ + "ariaLabel": 'Related content', + "rows": [ + { + "id": 'published-date', + "title": 'Published on', + "itemsList": [ + { + "text": '' + } + ] + }, + { + "id": 'published-in', + "title": 'Published in', + "classes": 'ons-u-mb-no', + "itemsList": [ + { + "text": 'Press releases', + "url": '#0' + } + ] + }, + { + "id": 'tags', + "title": 'Tags', + "itemsList": [ + { + "text": 'Integrated data', + "url": '#0' + }, + { + "text": 'Census 2021', + "url": '#0' + }, + { + "text": 'Survey', + "url": '#0' + } + ] + }, + { + "id": 'share-this-article', + "title": 'Share this article', + "iconPosition": 'before', + "iconSize": 'xxl', + "itemsList": [ + { + "url": '#0', + "text": 'Facebook', + "iconType": 'facebook', + "rel": 'noreferrer external' + }, + { + "url": '#0', + "text": 'Twitter', + "iconType": 'twitter', + "rel": 'noreferrer external' + } + ] + } + ] + }) + %} {% endcall %} -
        -
        - {% endblock %} - - - - - - - - diff --git a/src/components/breadcrumbs/_macro.njk b/src/components/breadcrumbs/_macro.njk index 87e168573f..08e40ae413 100644 --- a/src/components/breadcrumbs/_macro.njk +++ b/src/components/breadcrumbs/_macro.njk @@ -1,13 +1,21 @@ {% from "components/icon/_macro.njk" import onsIcon %} {% macro onsBreadcrumbs(params) %} -
        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 index 02b38d177d..acace3b2bc 100644 --- a/src/components/call-to-action/example-call-to-action-default.njk +++ b/src/components/call-to-action/example-call-to-action-default.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/call-to-action/_macro.njk" import onsCallToAction %} {{- onsCallToAction({ @@ -11,4 +12,4 @@ "url": '#0' } }) -}} +-}} diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk index 8d653a27c9..b1eb3dd4bc 100644 --- a/src/components/card/_macro.njk +++ b/src/components/card/_macro.njk @@ -1,24 +1,42 @@ {%- macro onsCard(params) -%} - - {% set headingLevel = params.headingLevel | default(2) %} + {% set headingLevel = params.headingLevel | default(2) | string %} + {% set openingHeadingTag = "" %} + {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL) + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %}
        {%- if params.image -%} {% if params.image.smallSrc %} - {{ params.image.alt }} + {{ params.image.alt }} {% elif params.image == true or params.image.placeholderURL %} - + {% endif %} {%- endif -%} - - {{ params.title }} - + {{ openingHeadingTag | safe }} + class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}"> {{ params.title }} + {{ closingHeadingTag | safe }}

        {{ params.text }}

        - {% if params.itemsList -%} + {%- if params.itemsList -%} {% from "components/list/_macro.njk" import onsList %} {{ onsList({ @@ -27,7 +45,5 @@ }) }} {% endif %} -
        - {%- endmacro -%} diff --git a/src/components/card/example-card-set-with-images.njk b/src/components/card/example-card-set-with-images.njk index 0122f0b448..b5b5df366f 100644 --- a/src/components/card/example-card-set-with-images.njk +++ b/src/components/card/example-card-set-with-images.njk @@ -1,41 +1,43 @@ {% from "components/card/_macro.njk" import onsCard %}
        -
        -
        - {{ 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 - }) }} + {{ + 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 + }) + }}
        - {{ 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 - }) }} + {{ + 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 + }) + }}
        - {{ 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 - }) }} + {{ + 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 + }) + }}
        -
        -
        diff --git a/src/components/card/example-card-set-with-lists.njk b/src/components/card/example-card-set-with-lists.njk index c27434b593..80374d8fb3 100644 --- a/src/components/card/example-card-set-with-lists.njk +++ b/src/components/card/example-card-set-with-lists.njk @@ -1,68 +1,70 @@ {% from "components/card/_macro.njk" import onsCard %}
        -
        -
        - {{ 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' - } - ] - }) }} + {{ + 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' + } + ] + }) + }}
        - {{ 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' - } - ] - }) }} + {{ + 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' + } + ] + }) + }}
        - {{ 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' - } - ] - }) }} + {{ + 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' + } + ] + }) + }}
        -
        -
        diff --git a/src/components/card/example-card-set.njk b/src/components/card/example-card-set.njk index 0a35d3551e..e4f10c7a07 100644 --- a/src/components/card/example-card-set.njk +++ b/src/components/card/example-card-set.njk @@ -1,38 +1,40 @@ {% from "components/card/_macro.njk" import onsCard %}
        -
        -
        - {{ 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.' - }) }} + {{ + 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.' + }) + }}
        - {{ 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.' - }) }} + {{ + 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.' + }) + }}
        - {{ 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.' - }) }} + {{ + 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.' + }) + }}
        -
        -
        diff --git a/src/components/card/example-card.njk b/src/components/card/example-card.njk index 1332a373cd..933926935e 100644 --- a/src/components/card/example-card.njk +++ b/src/components/card/example-card.njk @@ -1,9 +1,11 @@ {% from "components/card/_macro.njk" import onsCard %} -{{ 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.' -}) }} +{{ + 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.' + }) +}} diff --git a/src/components/char-check-limit/_macro.njk b/src/components/char-check-limit/_macro.njk index 2228a315b1..41bfd6d93f 100644 --- a/src/components/char-check-limit/_macro.njk +++ b/src/components/char-check-limit/_macro.njk @@ -1,9 +1,7 @@ {% macro onsCharLimit(params) %} {% if params.variant == "check" %} {% set content = caller() %} - - {{ content | safe }} - + {{ content | safe }} {% endif %} + + {% if params.name %}{{ ' ' }}name="{{ params.name }}"{% endif %} + {% if params.checked %}{{ ' ' }}checked{% endif %} + {% if params.other and not params.other.open %}{{ ' ' }}aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %} + {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %} + {% if params.deselectMessage %}{{ ' ' }}data-deselect-message="{{ params.deselectMessage }}"{% endif %} + /> - {{ onsLabel({ - "id": params.id + "-label", - "for": params.id, - "inputType": "checkbox", - "text": params.label.text, - "classes": "ons-checkbox__label " + params.label.classes | default(''), - "description": params.label.description - }) }} + {{ + onsLabel({ + "id": params.id + "-label", + "for": params.id, + "inputType": "checkbox", + "text": params.label.text, + "classes": "ons-checkbox__label" + (' ' + params.label.classes if params.label.classes else ''), + "description": params.label.description + }) + }} {% if params.other %} {% set otherType = params.other.otherType | default('input') %} diff --git a/src/components/checkboxes/_macro.njk b/src/components/checkboxes/_macro.njk index 8fbef54388..20f935b7bf 100644 --- a/src/components/checkboxes/_macro.njk +++ b/src/components/checkboxes/_macro.njk @@ -3,12 +3,13 @@ {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %} {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %} {% from "components/button/_macro.njk" import onsButton %} - {% set fields %} {% if params.checkboxesLabel is defined %} -

        {{ params.checkboxesLabel }}

        +

        + {{ params.checkboxesLabel }} +

        {% endif %} - {% set hasOther = false %} + {% set hasOther = false %} {% for checkbox in params.checkboxes %} {% if checkbox.other %} {% set hasOther = true %} @@ -52,90 +53,98 @@ {% endif %} {% endfor %} {% endif %} - - {% set config = { - "id": checkbox.id, - "name": checkbox.name, - "value": checkbox.value, - "checked": childIsChecked if childIsChecked == true else checkbox.checked, - "disabled": checkbox.disabled, - "borderless": params.borderless, - "classes": checkbox.classes | default('') + borderless | default(''), - "inputClasses": exclusiveClass | default('') + otherClass | default(''), - "label": { - "for": checkbox.id, - "text": labelHTML, - "description": checkbox.label.description, - "classes": checkbox.label.classes | default('') - }, - "attributes": checkbox.attributes - } %} + + {% + set config = { + "id": checkbox.id, + "name": checkbox.name, + "value": checkbox.value, + "checked": childIsChecked if childIsChecked == true else checkbox.checked, + "disabled": checkbox.disabled, + "borderless": params.borderless, + "classes": checkbox.classes | default('') + borderless | default(''), + "inputClasses": exclusiveClass | default('') + otherClass | default(''), + "label": { + "for": checkbox.id, + "text": labelHTML, + "description": checkbox.label.description, + "classes": checkbox.label.classes | default('') + }, + "attributes": checkbox.attributes + } + %} {% if checkbox.other %} - {% set config = config | setAttributes({ - "other": { - "open": checkbox.other.open | default(false), - "id": checkbox.other.id, - "name": checkbox.other.name, - "type": checkbox.other.type, - "otherType": checkbox.other.otherType, - "options": checkbox.other.options, - "width": checkbox.other.width, - "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''), - "attributes": checkbox.other.attributes, - "label": { - "text": checkbox.other.label.text - }, - "legend": checkbox.other.legend, - "legendClasses": checkbox.other.legendClasses, - "value": checkbox.other.value, - "autoSelect": checkbox.other.autoSelect, - "selectAllChildren": checkbox.other.selectAllChildren, - "checkboxes": checkbox.other.checkboxes, - "radios": checkbox.other.radios - } - }) %} + {% + set config = config | setAttributes({ + "other": { + "open": checkbox.other.open | default(false), + "id": checkbox.other.id, + "name": checkbox.other.name, + "type": checkbox.other.type, + "otherType": checkbox.other.otherType, + "options": checkbox.other.options, + "width": checkbox.other.width, + "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''), + "attributes": checkbox.other.attributes, + "label": { + "text": checkbox.other.label.text + }, + "legend": checkbox.other.legend, + "legendClasses": checkbox.other.legendClasses, + "value": checkbox.other.value, + "autoSelect": checkbox.other.autoSelect, + "selectAllChildren": checkbox.other.selectAllChildren, + "checkboxes": checkbox.other.checkboxes, + "radios": checkbox.other.radios + } + }) + %} {% endif %} {{ onsCheckbox(config) }} {% if not loop.last %} -
        +
        {% endif %} {% endfor %}
        {% endset %} {% if params.mutuallyExclusive %} - {% call onsMutuallyExclusive({ - "id": params.id, - "classes": params.classes, - "legend": params.legend, - "legendClasses": params.legendClasses, - "description": params.description, - "attributes": params.attributes, - "dontWrap": params.dontWrap, - "legendIsQuestionTitle": params.legendIsQuestionTitle, - "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions, - "or": params.mutuallyExclusive.or, - "deselectMessage": params.mutuallyExclusive.deselectMessage, - "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective, - "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective, - "error": params.error - }) %} + {% + call onsMutuallyExclusive({ + "id": params.id, + "classes": params.classes, + "legend": params.legend, + "legendClasses": params.legendClasses, + "description": params.description, + "attributes": params.attributes, + "dontWrap": params.dontWrap, + "legendIsQuestionTitle": params.legendIsQuestionTitle, + "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions, + "or": params.mutuallyExclusive.or, + "deselectMessage": params.mutuallyExclusive.deselectMessage, + "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective, + "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective, + "error": params.error + }) + %} {{ fields | safe }} {% endcall %} {% else %} - {% call onsFieldset({ - "id": params.id, - "classes": params.classes, - "legend": params.legend, - "legendClasses": params.legendClasses, - "legendIsQuestionTitle": params.legendIsQuestionTitle, - "description": params.description, - "attributes": params.attributes, - "dontWrap": params.dontWrap, - "error": params.error - }) %} + {% + call onsFieldset({ + "id": params.id, + "classes": params.classes, + "legend": params.legend, + "legendClasses": params.legendClasses, + "legendIsQuestionTitle": params.legendIsQuestionTitle, + "description": params.description, + "attributes": params.attributes, + "dontWrap": params.dontWrap, + "error": params.error + }) + %} {{ fields | safe }} {% endcall %} {% endif %} diff --git a/src/components/checkboxes/example-checkboxes-disabled.njk b/src/components/checkboxes/example-checkboxes-disabled.njk index d07d5ecac7..40b6857de9 100644 --- a/src/components/checkboxes/example-checkboxes-disabled.njk +++ b/src/components/checkboxes/example-checkboxes-disabled.njk @@ -1,34 +1,34 @@ {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} - {{ - onsCheckboxes({ - "legend": "Content type", - "checkboxesLabel": "Show only:", - "borderless": true, - "name": "dietary", - "checkboxes": [ - { - "id": "data-checkbox-disabled", - "label": { - "text": "Data (309)" - }, - "value": "data" +{{ + onsCheckboxes({ + "legend": "Content type", + "checkboxesLabel": "Show only:", + "borderless": true, + "name": "dietary", + "checkboxes": [ + { + "id": "data-checkbox-disabled", + "label": { + "text": "Data (309)" }, - { - "id": "publications-checkbox-disabled", - "label": { - "text": "Publications (137)" - }, - "value": "publications" + "value": "data" + }, + { + "id": "publications-checkbox-disabled", + "label": { + "text": "Publications (137)" }, - { - "id": "areas-checkbox-disabled", - "label": { - "text": "Areas (0)" - }, - "value": "areas", - "disabled": true - } - ] - }) - }} + "value": "publications" + }, + { + "id": "areas-checkbox-disabled", + "label": { + "text": "Areas (0)" + }, + "value": "areas", + "disabled": true + } + ] + }) +}} diff --git a/src/components/checkboxes/example-checkboxes-error.njk b/src/components/checkboxes/example-checkboxes-error.njk index 50759ca28a..e3e147fdbe 100644 --- a/src/components/checkboxes/example-checkboxes-error.njk +++ b/src/components/checkboxes/example-checkboxes-error.njk @@ -1,4 +1,3 @@ - {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} {{ diff --git a/src/components/checkboxes/example-checkboxes-with-descriptions.njk b/src/components/checkboxes/example-checkboxes-with-descriptions.njk index a8aa61433c..c6e6dec1ce 100644 --- a/src/components/checkboxes/example-checkboxes-with-descriptions.njk +++ b/src/components/checkboxes/example-checkboxes-with-descriptions.njk @@ -1,11 +1,13 @@ {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} {% from "components/question/_macro.njk" import onsQuestion %} -{% call onsQuestion({ - "title": "What type of central heating does your accommodation have?", - "classes": "ons-u-mt-no", - "legendIsQuestionTitle": true -}) %} +{% + call onsQuestion({ + "title": "What type of central heating does your accommodation have?", + "classes": "ons-u-mt-no", + "legendIsQuestionTitle": true + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes-with-hidden-label.njk b/src/components/checkboxes/example-checkboxes-with-hidden-label.njk index 0bf49f8d34..6948a55211 100644 --- a/src/components/checkboxes/example-checkboxes-with-hidden-label.njk +++ b/src/components/checkboxes/example-checkboxes-with-hidden-label.njk @@ -1,177 +1,169 @@ {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
        -
        -

        {{ name }}

        -
        +
        +

        {{ name }}

        +
        -
        -
        -

        Select user permissions

        -
        +
        +
        +

        Select user permissions

        +
        -
        - -
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        - Survey Data Collection area - - View - - Edit - - Delete -
        - Surveys - - {{ - onsCheckbox({ - "id": "surveys-view-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "View surveys" - }, - "value": "y", - "checked": true, - "disabled": true - }) - }} - - {{ - onsCheckbox({ - "id": "surveys-edit-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "Edit surveys" - }, - "value": "n" - }) - }} -
        - Reporting units - - {{ - onsCheckbox({ - "id": "reporting-units-view-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "View reporting units" - }, - "value": "y", - "checked": true, - "disabled": true - }) - }} - - {{ - onsCheckbox({ - "id": "reporting-units-edit-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "Edit reporting units" - }, - "value": "n" - }) - }} -
        - Respondents - - {{ - onsCheckbox({ - "id": "respondents-view-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "View respondents" - }, - "value": "y", - "checked": true, - "disabled": true - }) - }} - - {{ - onsCheckbox({ - "id": "respondents-edit-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "Edit respondents" - }, - "value": "y", - "checked": true - }) - }} - - {{ - onsCheckbox({ - "id": "respondents-delete-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "Delete respondents" - }, - "value": "n" - }) - }} -
        - Messages - - {{ - onsCheckbox({ - "id": "messages-view-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "View messages" - }, - "value": "y", - "checked": true, - "disabled": true - }) - }} - - {{ - onsCheckbox({ - "id": "messages-edit-example-checkbox-with-hidden-label", - "hideLabel": true, - "label": { - "text": "Edit messages" - }, - "value": "y", - "checked": true - }) - }} -
        -
        -
        +
        + +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        + Survey Data Collection area + + View + + Edit + + Delete +
        Surveys + {{ + onsCheckbox({ + "id": "surveys-view-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "View surveys" + }, + "value": "y", + "checked": true, + "disabled": true + }) + }} + + {{ + onsCheckbox({ + "id": "surveys-edit-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "Edit surveys" + }, + "value": "n" + }) + }} +
        Reporting units + {{ + onsCheckbox({ + "id": "reporting-units-view-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "View reporting units" + }, + "value": "y", + "checked": true, + "disabled": true + }) + }} + + {{ + onsCheckbox({ + "id": "reporting-units-edit-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "Edit reporting units" + }, + "value": "n" + }) + }} +
        Respondents + {{ + onsCheckbox({ + "id": "respondents-view-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "View respondents" + }, + "value": "y", + "checked": true, + "disabled": true + }) + }} + + {{ + onsCheckbox({ + "id": "respondents-edit-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "Edit respondents" + }, + "value": "y", + "checked": true + }) + }} + + {{ + onsCheckbox({ + "id": "respondents-delete-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "Delete respondents" + }, + "value": "n" + }) + }} +
        Messages + {{ + onsCheckbox({ + "id": "messages-view-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "View messages" + }, + "value": "y", + "checked": true, + "disabled": true + }) + }} + + {{ + onsCheckbox({ + "id": "messages-edit-example-checkbox-with-hidden-label", + "hideLabel": true, + "label": { + "text": "Edit messages" + }, + "value": "y", + "checked": true + }) + }} +
        +
        +
        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 d34ea82bfd..8c4b794ca1 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk @@ -1,88 +1,88 @@ {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} - {{ - onsCheckboxes({ - "legend": "Content type", - "checkboxesLabel": "Show only:", - "borderless": true, - "name": "dietary", - "checkboxes": [ - { - "id": "data-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Data (309)" - }, - "value": "data", - "checked": true, - "other": { - "otherType": "checkboxes", - "selectAllChildren": true, - "legend": "Data type", - "legendClasses": "ons-u-vh", - "name": "name", - "checkboxes": [ - { - "id": "datasets-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Datasets (100)" - }, - "value": "datasets" +{{ + onsCheckboxes({ + "legend": "Content type", + "checkboxesLabel": "Show only:", + "borderless": true, + "name": "dietary", + "checkboxes": [ + { + "id": "data-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "Data (309)" + }, + "value": "data", + "checked": true, + "other": { + "otherType": "checkboxes", + "selectAllChildren": true, + "legend": "Data type", + "legendClasses": "ons-u-vh", + "name": "name", + "checkboxes": [ + { + "id": "datasets-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "Datasets (100)" }, - { - "id": "timeseries-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Timeseries (20)" - }, - "value": "timeseries" + "value": "datasets" + }, + { + "id": "timeseries-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "Timeseries (20)" }, - { - "id": "requested-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "User requested data (17)" - }, - "value": "requested" - } - ] - } - }, - { - "id": "publications-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Publications (137)" - }, - "value": "publications", - "checked": true, - "other": { - "otherType": "checkboxes", - "selectAllChildren": true, - "legend": "Publication type", - "legendClasses": "ons-u-vh", - "name": "name", - "checkboxes": [ - { - "id": "press-release-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Press release (100)" - }, - "value": "pressrelease" + "value": "timeseries" + }, + { + "id": "requested-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "User requested data (17)" }, - { - "id": "bulletin-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Bulletin (20)" - }, - "value": "bulletin" - } - ] - } + "value": "requested" + } + ] + } + }, + { + "id": "publications-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "Publications (137)" }, - { - "id": "areas-example-checkbox-with-revealed-checkboxes-expanded", - "label": { - "text": "Areas (0)" - }, - "value": "areas" + "value": "publications", + "checked": true, + "other": { + "otherType": "checkboxes", + "selectAllChildren": true, + "legend": "Publication type", + "legendClasses": "ons-u-vh", + "name": "name", + "checkboxes": [ + { + "id": "press-release-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "Press release (100)" + }, + "value": "pressrelease" + }, + { + "id": "bulletin-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "text": "Bulletin (20)" + }, + "value": "bulletin" + } + ] } - ] - }) - }} + }, + { + "id": "areas-example-checkbox-with-revealed-checkboxes-expanded", + "label": { + "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 fe2c463062..183135ee4f 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk @@ -1,86 +1,86 @@ {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} - {{ - onsCheckboxes({ - "legend": "Content type", - "checkboxesLabel": "Show only:", - "borderless": true, - "name": "dietary", - "checkboxes": [ - { - "id": "data-example-with-revealed-checkboxes", - "label": { - "text": "Data (309)" - }, - "value": "data", - "other": { - "otherType": "checkboxes", - "selectAllChildren": true, - "legend": "Data type", - "legendClasses": "ons-u-vh", - "name": "name", - "checkboxes": [ - { - "id": "datasets-example-with-revealed-checkboxes", - "label": { - "text": "Datasets (100)" - }, - "value": "datasets" +{{ + onsCheckboxes({ + "legend": "Content type", + "checkboxesLabel": "Show only:", + "borderless": true, + "name": "dietary", + "checkboxes": [ + { + "id": "data-example-with-revealed-checkboxes", + "label": { + "text": "Data (309)" + }, + "value": "data", + "other": { + "otherType": "checkboxes", + "selectAllChildren": true, + "legend": "Data type", + "legendClasses": "ons-u-vh", + "name": "name", + "checkboxes": [ + { + "id": "datasets-example-with-revealed-checkboxes", + "label": { + "text": "Datasets (100)" }, - { - "id": "timeseries-example-with-revealed-checkboxes", - "label": { - "text": "Timeseries (20)" - }, - "value": "timeseries" + "value": "datasets" + }, + { + "id": "timeseries-example-with-revealed-checkboxes", + "label": { + "text": "Timeseries (20)" }, - { - "id": "requested-example-with-revealed-checkboxes", - "label": { - "text": "User requested data (17)" - }, - "value": "requested" - } - ] - } - }, - { - "id": "publications-example-with-revealed-checkboxes", - "label": { - "text": "Publications (137)" - }, - "value": "publications", - "other": { - "otherType": "checkboxes", - "selectAllChildren": true, - "legend": "Publication type", - "legendClasses": "ons-u-vh", - "name": "name", - "checkboxes": [ - { - "id": "press-release-example-with-revealed-checkboxes", - "label": { - "text": "Press release (100)" - }, - "value": "pressrelease" + "value": "timeseries" + }, + { + "id": "requested-example-with-revealed-checkboxes", + "label": { + "text": "User requested data (17)" }, - { - "id": "bulletin-example-with-revealed-checkboxes", - "label": { - "text": "Bulletin (20)" - }, - "value": "bulletin" - } - ] - } + "value": "requested" + } + ] + } + }, + { + "id": "publications-example-with-revealed-checkboxes", + "label": { + "text": "Publications (137)" }, - { - "id": "areas-example-with-revealed-checkboxes", - "label": { - "text": "Areas (0)" - }, - "value": "areas" + "value": "publications", + "other": { + "otherType": "checkboxes", + "selectAllChildren": true, + "legend": "Publication type", + "legendClasses": "ons-u-vh", + "name": "name", + "checkboxes": [ + { + "id": "press-release-example-with-revealed-checkboxes", + "label": { + "text": "Press release (100)" + }, + "value": "pressrelease" + }, + { + "id": "bulletin-example-with-revealed-checkboxes", + "label": { + "text": "Bulletin (20)" + }, + "value": "bulletin" + } + ] } - ] - }) - }} + }, + { + "id": "areas-example-with-revealed-checkboxes", + "label": { + "text": "Areas (0)" + }, + "value": "areas" + } + ] + }) +}} diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk b/src/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk index f068f76f8b..61b459bce6 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "How would you like us to contact you?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "How would you like us to contact you?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-select.njk b/src/components/checkboxes/example-checkboxes-with-revealed-select.njk index bf083e5d6c..dbc70a89e3 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-select.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-select.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "How would you like us to contact you?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "How would you like us to contact you?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk b/src/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk index 2e04f38721..2d94a50112 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "Do you have any dietary requirements?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "Do you have any dietary requirements?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-text-input.njk b/src/components/checkboxes/example-checkboxes-with-revealed-text-input.njk index bb5f5c3546..7e96ac1710 100644 --- a/src/components/checkboxes/example-checkboxes-with-revealed-text-input.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-text-input.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "Do you have any dietary requirements?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "Do you have any dietary requirements?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes-with-select-all-button.njk b/src/components/checkboxes/example-checkboxes-with-select-all-button.njk index 955e022dd2..ab67e2bacd 100644 --- a/src/components/checkboxes/example-checkboxes-with-select-all-button.njk +++ b/src/components/checkboxes/example-checkboxes-with-select-all-button.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "What devices do you own?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "What devices do you own?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes-with-visible-text-input.njk b/src/components/checkboxes/example-checkboxes-with-visible-text-input.njk index 938222bb77..00671fb6ad 100644 --- a/src/components/checkboxes/example-checkboxes-with-visible-text-input.njk +++ b/src/components/checkboxes/example-checkboxes-with-visible-text-input.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "Do you have any dietary requirements?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "Do you have any dietary requirements?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/checkboxes/example-checkboxes.njk b/src/components/checkboxes/example-checkboxes.njk index 293558f162..1e42994c73 100644 --- a/src/components/checkboxes/example-checkboxes.njk +++ b/src/components/checkboxes/example-checkboxes.njk @@ -1,11 +1,13 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/checkboxes/_macro.njk" import onsCheckboxes %} -{% call onsQuestion({ - "title": "What devices do you own?", - "legendIsQuestionTitle": true, - "classes": "ons-u-mt-no" -}) %} +{% + call onsQuestion({ + "title": "What devices do you own?", + "legendIsQuestionTitle": true, + "classes": "ons-u-mt-no" + }) +%} {{ onsCheckboxes({ "checkboxesLabel": "Select all that apply", diff --git a/src/components/content-pagination/_macro.njk b/src/components/content-pagination/_macro.njk index 95b8f8ad6a..e430c64d6e 100644 --- a/src/components/content-pagination/_macro.njk +++ b/src/components/content-pagination/_macro.njk @@ -1,34 +1,36 @@ {% macro onsContentPagination(params) %} - + {% endmacro %} diff --git a/src/components/content-pagination/example-content-pagination.njk b/src/components/content-pagination/example-content-pagination.njk index 486661edd2..50fe146fd1 100644 --- a/src/components/content-pagination/example-content-pagination.njk +++ b/src/components/content-pagination/example-content-pagination.njk @@ -1,20 +1,20 @@ {% from "components/content-pagination/_macro.njk" import onsContentPagination %} {{- - onsContentPagination({ - "contentPaginationItems": [ - { - "rel": 'prev', - "text": 'Previous', - "url": '#0', - "label": 'Overview' - }, - { - "rel": 'next', - "text": 'Next', - "url": '#0', - "label": 'Who should take part and why' - } - ] - }) -}} \ No newline at end of file + onsContentPagination({ + "contentPaginationItems": [ + { + "rel": 'prev', + "text": 'Previous', + "url": '#0', + "label": 'Overview' + }, + { + "rel": 'next', + "text": 'Next', + "url": '#0', + "label": 'Who should take part and why' + } + ] + }) +-}} diff --git a/src/components/cookies-banner/_macro.njk b/src/components/cookies-banner/_macro.njk index 6ba4644a90..8ada76a527 100644 --- a/src/components/cookies-banner/_macro.njk +++ b/src/components/cookies-banner/_macro.njk @@ -40,15 +40,18 @@ {% else %} {% set settingsLinkURL = '#0' %} {% endif %} - {% set statementText = beforeLinkStatementText + ' ' + afterLinkStatementText %} {% set preferencesText = beforeLinkPreferencesURL + ' ' + afterLinkPreferencesURL %}
        -
        +
        -

        {{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}

        +

        + {{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }} +

        {{ params.statementText | default(statementText) | safe }}
        @@ -78,14 +81,24 @@ }}
        - {{ params.settingsLinkText | default(settingsLinkText) }} + {{ params.settingsLinkText | default(settingsLinkText) }}
        -
        +
        -

        {{ params.acceptedText | default(acceptedText) | safe }} {{ params.rejectedText | default(rejectedText) | safe }} {{ params.preferencesText | default(preferencesText) | safe }}

        +

        + {{ params.acceptedText | default(acceptedText) | safe }} {{ params.rejectedText | default(rejectedText) | safe }} {{ params.preferencesText | default(preferencesText) | safe }} +

        {{ diff --git a/src/components/cookies-banner/example-cookies-banner-cymraeg.njk b/src/components/cookies-banner/example-cookies-banner-cymraeg.njk index b4479fe4bb..f18b2347e7 100644 --- a/src/components/cookies-banner/example-cookies-banner-cymraeg.njk +++ b/src/components/cookies-banner/example-cookies-banner-cymraeg.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %} {{ onsCookiesBanner({ diff --git a/src/components/cookies-banner/example-cookies-banner.njk b/src/components/cookies-banner/example-cookies-banner.njk index 7410142b7c..5cb9c0118a 100644 --- a/src/components/cookies-banner/example-cookies-banner.njk +++ b/src/components/cookies-banner/example-cookies-banner.njk @@ -1,7 +1,6 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %} -{{ - onsCookiesBanner() -}} +{{ onsCookiesBanner() }} diff --git a/src/components/date-input/_macro.njk b/src/components/date-input/_macro.njk index 3d75537177..3cc831fde6 100644 --- a/src/components/date-input/_macro.njk +++ b/src/components/date-input/_macro.njk @@ -2,7 +2,7 @@ {% from "components/input/_macro.njk" import onsInput %} {% macro onsDateInput(params) %} - {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %} + {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %} {%- set numberOfFields = 0 -%} {%- if params.day -%} @@ -19,75 +19,83 @@ {% set fields %} {% if params.day %} - {{ onsInput({ - "id": params.id + "-day", - "type": "number", - "name": params.day.name, - "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""), - "width": "2", - "maxLength": 2, - "attributes": params.day.attributes, - "label": { - "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel, - "description": params.day.label.description if numberOfFields > 1 else params.description, - "id": params.id + "-day-label" - }, - "value": params.day.value, - "error": params.error if numberOfFields < 2 - }) }} + {{ + onsInput({ + "id": params.id + "-day", + "type": "number", + "name": params.day.name, + "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""), + "width": "2", + "maxLength": 2, + "attributes": params.day.attributes, + "label": { + "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel, + "description": params.day.label.description if numberOfFields > 1 else params.description, + "id": params.id + "-day-label" + }, + "value": params.day.value, + "error": params.error if numberOfFields < 2 + }) + }} {% endif %} {% if params.month %} - {{ onsInput({ - "id": params.id + "-month", - "type": "number", - "name": params.month.name, - "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""), - "width": "2", - "maxLength": 2, - "attributes": params.month.attributes, - "label": { - "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel, - "description": params.month.label.description if numberOfFields > 1 else params.description, - "id": params.id + "-month-label" - }, - "value": params.month.value, - "error": params.error if numberOfFields < 2 - }) }} + {{ + onsInput({ + "id": params.id + "-month", + "type": "number", + "name": params.month.name, + "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""), + "width": "2", + "maxLength": 2, + "attributes": params.month.attributes, + "label": { + "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel, + "description": params.month.label.description if numberOfFields > 1 else params.description, + "id": params.id + "-month-label" + }, + "value": params.month.value, + "error": params.error if numberOfFields < 2 + }) + }} {% endif %} {% if params.year %} - {{ onsInput({ - "id": params.id + "-year", - "type": "number", - "name": params.year.name, - "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""), - "width": "4", - "maxLength": 4, - "attributes": params.year.attributes, - "label": { - "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel, - "description": params.year.label.description if numberOfFields > 1 else params.description, - "id": params.id + "-year-label" - }, - "value": params.year.value, - "error": params.error if numberOfFields < 2 - }) }} + {{ + onsInput({ + "id": params.id + "-year", + "type": "number", + "name": params.year.name, + "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""), + "width": "4", + "maxLength": 4, + "attributes": params.year.attributes, + "label": { + "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel, + "description": params.year.label.description if numberOfFields > 1 else params.description, + "id": params.id + "-year-label" + }, + "value": params.year.value, + "error": params.error if numberOfFields < 2 + }) + }} {% endif %} {% endset %} - {{ onsMultipleInputFields({ - "id": params.id, - "legendOrLabel": params.legendOrLabel, - "description": params.description, - "mutuallyExclusive": params.mutuallyExclusive, - "numberOfFields": numberOfFields, - "fields": fields, - "error": params.error, - "legend": params.legendOrLabel, - "dontWrap": params.dontWrap, - "classes": params.classes, - "legendClasses": params.legendClasses, - "legendIsQuestionTitle": params.legendIsQuestionTitle - }) }} + {{ + onsMultipleInputFields({ + "id": params.id, + "legendOrLabel": params.legendOrLabel, + "description": params.description, + "mutuallyExclusive": params.mutuallyExclusive, + "numberOfFields": numberOfFields, + "fields": fields, + "error": params.error, + "legend": params.legendOrLabel, + "dontWrap": params.dontWrap, + "classes": params.classes, + "legendClasses": params.legendClasses, + "legendIsQuestionTitle": params.legendIsQuestionTitle + }) + }} {% endmacro %} diff --git a/src/components/date-input/example-date-input-error-for-single-field.njk b/src/components/date-input/example-date-input-error-for-single-field.njk index ac75b1f079..5075ba6050 100644 --- a/src/components/date-input/example-date-input-error-for-single-field.njk +++ b/src/components/date-input/example-date-input-error-for-single-field.njk @@ -1,4 +1,3 @@ - {% from "components/date-input/_macro.njk" import onsDateInput %} {{ onsDateInput({ diff --git a/src/components/date-input/example-date-input-error.njk b/src/components/date-input/example-date-input-error.njk index 4ba505e4e4..70500671a3 100644 --- a/src/components/date-input/example-date-input-error.njk +++ b/src/components/date-input/example-date-input-error.njk @@ -1,4 +1,3 @@ - {% from "components/date-input/_macro.njk" import onsDateInput %} {{ onsDateInput({ diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index 0103213c34..ecc80957fb 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -1,14 +1,23 @@ {% macro onsDescriptionList(params) %} -
        - {% for item in params.itemsList %} - {% if item.term | length %} -
        {{ item.term }}
        - {% endif %} - {% for descriptionItem in item.descriptions %} - {% if descriptionItem.description | length %} -
        {{ descriptionItem.description }}
        - {% endif %} +
        + {% for item in params.itemsList %} + {% if item.term | length %} +
        {{ item.term }}
        + {% endif %} + {% for descriptionItem in item.descriptions %} + {% if descriptionItem.description | length %} +
        + {{- descriptionItem.description -}} +
        + {% endif %} + {% endfor %} {% endfor %} - {% endfor %} -
        +
        {% endmacro %} diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk index 0ca3a305e3..82b4933c67 100644 --- a/src/components/details/_macro.njk +++ b/src/components/details/_macro.njk @@ -1,28 +1,35 @@ {% macro onsDetails(params) %}
        {% set titleTag = params.titleTag | default("h2") %} - <{{ titleTag }} class="ons-details__title">{{ params.title }} + {% set openingTag = "<" + titleTag %} + {% set closingTag = "" %} + {{ openingTag | safe }} + class="ons-details__title">{{ params.title }}{{ closingTag | safe }} {% from "components/icon/_macro.njk" import onsIcon %} {{- onsIcon({ "iconType": "chevron" }) - -}} + -}}
        -
        {{ params.content | safe }}{{ caller() if caller }}
        diff --git a/src/components/details/example-details-with-warning.njk b/src/components/details/example-details-with-warning.njk index 4eed6ea5e2..f1088992be 100644 --- a/src/components/details/example-details-with-warning.njk +++ b/src/components/details/example-details-with-warning.njk @@ -1,16 +1,21 @@ {% from "components/details/_macro.njk" import onsDetails %} {% from "components/panel/_macro.njk" import onsPanel %} -{% call onsDetails({ - "id": "details-example-with-warning", - "title": "Need to answer separately from your household?" -}) %} - -

        If you need to answer separately from the people you live with, you can request an individual access code to start a separate survey.

        - {% call onsPanel({ - "variant": "warn" - }) %} +{% + call onsDetails({ + "id": "details-example-with-warning", + "title": "Need to answer separately from your household?" + }) +%} +

        + If you need to answer separately from the people you live with, you can request an individual access code to start + a separate survey. +

        + {% + call onsPanel({ + "variant": "warn" + }) + %} Someone in your household must still complete a survey using a household access code {% endcall %} - {% endcall %} diff --git a/src/components/document-list/_macro.njk b/src/components/document-list/_macro.njk index 92af5e74a4..40a89a04fa 100644 --- a/src/components/document-list/_macro.njk +++ b/src/components/document-list/_macro.njk @@ -1,110 +1,119 @@ {% macro onsDocumentList(params) %} - + {% endif %} -
        - - {% if document.featured and document.fullWidth == true %} - + {% if document.description %} +
        {{ document.description | safe }}
        + {% endif %}
        - - {% endif %} - - + {% endset %} + +
      • + {% if document.featured and document.fullWidth == true %} +
        {{ documentItem | safe }}
        + {% else %} + {{ documentItem | safe }} + {% endif %} +
        • {% endfor %} - {% endmacro %} 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 0f662603ad..d1aa536c5e 100644 --- a/src/components/document-list/example-document-list-article-featured.njk +++ b/src/components/document-list/example-document-list-article-featured.njk @@ -1,31 +1,33 @@ --- -"fullWidth": true +'fullWidth': true --- {% from "components/document-list/_macro.njk" import onsDocumentList %} -{{ onsDocumentList({ - "documents": [ - { - "featured": true, - "fullWidth": true, - "thumbnail": { - "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', - "metadata": { - "type": { - "text": 'Press releases', - "url": '#0' +{{ + onsDocumentList({ + "documents": [ + { + "featured": true, + "fullWidth": true, + "thumbnail": { + "smallSrc": '/img/small/census-monuments-lights-featured.jpg', + "largeSrc": '/img/large/census-monuments-lights-featured.jpg' }, - "date": { - "iso": '2022-01-01', - "short": '1 January 2022' - } - }, - "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.' - } - ] -}) }} + "url": '#0', + "title": 'Landmarks are lighting up purple to mark Census Day', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2022-01-01', + "short": '1 January 2022' + } + }, + "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.' + } + ] + }) +}} diff --git a/src/components/document-list/example-document-list-articles.njk b/src/components/document-list/example-document-list-articles.njk index 3622528f20..494ad0596c 100644 --- a/src/components/document-list/example-document-list-articles.njk +++ b/src/components/document-list/example-document-list-articles.njk @@ -1,60 +1,62 @@ {% from "components/document-list/_macro.njk" import onsDocumentList %} -{{ onsDocumentList({ - "documents": [ - { - "thumbnail": { - "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', - "metadata": { - "type": { - "text": 'Press releases', - "url": '#0' +{{ + onsDocumentList({ + "documents": [ + { + "thumbnail": { + "smallSrc": '/img/small/census-monuments-lights.jpg', + "largeSrc": '/img/large/census-monuments-lights.jpg' }, - "date": { - "iso": '2022-01-01', - "short": '1 January 2022' - } - }, - "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.' - }, - { - "thumbnail": { - "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', - "metadata": { - "type": { - "text": 'Press releases', - "url": '#0' + "url": '#0', + "title": 'Landmarks are lighting up purple to mark Census Day', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2022-01-01', + "short": '1 January 2022' + } }, - "date": { - "iso": '2021-07-15', - "short": '15 July 2021' - } + "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.' }, - "description": 'The Office for National Statistics’ (ONS) analysis showing that people from certain ethnicities had a higher risk of dying from COVID-19 has been recognised by the Royal Statistical Society (RSS) with the renowned Campion Award.' - }, - { - "thumbnail": true, - "url": '#0', - "title": 'Five Office for National Statistics names in New Year’s Honours', - "metadata": { - "type": { - "text": 'Press releases', - "url": '#0' + { + "thumbnail": { + "smallSrc": '/img/small/ons-award-winners.jpg', + "largeSrc": '/img/large/ons-award-winners.jpg' }, - "date": { - "iso": '2022-01-01', - "short": '1 January 2022' - } + "url": '#0', + "title": 'Office for National Statistics win top Royal Statistical Society award', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2021-07-15', + "short": '15 July 2021' + } + }, + "description": 'The Office for National Statistics’ (ONS) analysis showing that people from certain ethnicities had a higher risk of dying from COVID-19 has been recognised by the Royal Statistical Society (RSS) with the renowned Campion Award.' }, - "description": 'After another year in which data and statistics have dominated public debate, five Office for National Statistics (ONS) employees have been recognised for their contributions to statistics, public health and the census in the New Year’s Honours list.' - } - ] -}) }} + { + "thumbnail": true, + "url": '#0', + "title": 'Five Office for National Statistics names in New Year’s Honours', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2022-01-01', + "short": '1 January 2022' + } + }, + "description": 'After another year in which data and statistics have dominated public debate, five Office for National Statistics (ONS) employees have been recognised for their contributions to statistics, public health and the census in the New Year’s Honours list.' + } + ] + }) +}} diff --git a/src/components/document-list/example-document-list-downloads.njk b/src/components/document-list/example-document-list-downloads.njk index 7c5fc69b93..2b8201e5fe 100644 --- a/src/components/document-list/example-document-list-downloads.njk +++ b/src/components/document-list/example-document-list-downloads.njk @@ -1,53 +1,55 @@ {% from "components/document-list/_macro.njk" import onsDocumentList %} -{{ onsDocumentList({ - "documents": [ - { - "thumbnail": true, - "url": '#', - "title": 'Including everyone in Census 2021', - "metadata": { - "type": { - "text": 'Poster' +{{ + onsDocumentList({ + "documents": [ + { + "thumbnail": true, + "url": '#', + "title": 'Including everyone in Census 2021', + "metadata": { + "type": { + "text": 'Poster' + }, + "file": { + "fileType": 'PDF', + "fileSize": '499KB', + "filePages": '1 page' + } }, - "file": { - "fileType": 'PDF', - "fileSize": '499KB', - "filePages": '1 page' - } + "description": 'Empty belly poster, aimed at advertising census events.' }, - "description": 'Empty belly poster, aimed at advertising census events.' - }, - { - "thumbnail": true, - "url": '#', - "title": 'Community handbook for Census 2021', - "metadata": { - "type": { - "text": 'Booklet' + { + "thumbnail": true, + "url": '#', + "title": 'Community handbook for Census 2021', + "metadata": { + "type": { + "text": 'Booklet' + }, + "file": { + "fileType": 'PDF', + "fileSize": '3.3MB', + "filePages": '16 pages' + } }, - "file": { - "fileType": 'PDF', - "fileSize": '3.3MB', - "filePages": '16 pages' - } + "description": 'This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community.' }, - "description": 'This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community.' - }, - { - "thumbnail": true, - "url": '#', - "title": 'Census 2021 matters to everyone', - "metadata": { - "type": { - "text": 'Poster' + { + "thumbnail": true, + "url": '#', + "title": 'Census 2021 matters to everyone', + "metadata": { + "type": { + "text": 'Poster' + }, + "file": { + "fileType": 'PDF', + "fileSize": '866KB', + "filePages": '1 page' + } }, - "file": { - "fileType": 'PDF', - "fileSize": '866KB', - "filePages": '1 page' - } - }, - "description": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.' - } - ] -}) }} + "description": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.' + } + ] + }) +}} 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 a0e1045381..41016a8167 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 @@ -1,19 +1,21 @@ {% from "components/document-list/_macro.njk" import onsDocumentList %} -{{ onsDocumentList({ - "documents": [ - { - "featured": true, - "showMetadataFirst": true, - "url": '#0', - "title": 'Crime and justice', - "metadata": { - "type": { - "text": 'Topic' - } - }, - "description": '

        Figures on crime levels and trends for England and Wales based primarily on two sets of statistics: the Crime Survey for England and Wales (CSEW) and police recorded crime data.

        -

        View all datasets or publications related to Crime and justice

        ' - } - ] -}) }} +{{ + onsDocumentList({ + "documents": [ + { + "featured": true, + "showMetadataFirst": true, + "url": '#0', + "title": 'Crime and justice', + "metadata": { + "type": { + "text": 'Topic' + } + }, + "description": '

        Figures on crime levels and trends for England and Wales based primarily on two sets of statistics: the Crime Survey for England and Wales (CSEW) and police recorded crime data.

        +

        View all datasets or publications related to Crime and justice

        ' + } + ] + }) +}} 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 ef399e3eef..9b97873b0a 100644 --- a/src/components/document-list/example-document-list-search-results.njk +++ b/src/components/document-list/example-document-list-search-results.njk @@ -1,67 +1,69 @@ {% from "components/document-list/_macro.njk" import onsDocumentList %} -{{ onsDocumentList({ - "documents": [ - { - "featured": true, - "showMetadataFirst": true, - "url": '#0', - "title": 'Crime and justice', - "metadata": { - "type": { - "text": 'Topic' - } - }, - "description": '

        Figures on crime levels and trends for England and Wales based primarily on two sets of statistics: the Crime Survey for England and Wales (CSEW) and police recorded crime data.

        -

        View all datasets or publications related to Crime and justice

        ' - }, - { - "url": '#0', - "title": 'Disability and crime', - "metadata": { - "type": { - "text": 'Dataset' +{{ + onsDocumentList({ + "documents": [ + { + "featured": true, + "showMetadataFirst": true, + "url": '#0', + "title": 'Crime and justice', + "metadata": { + "type": { + "text": 'Topic' + } }, - "date": { - "prefix": 'Released', - "showPrefix": true, - "iso": '2021-02-18', - "short": '18 February 2021' - } + "description": '

        Figures on crime levels and trends for England and Wales based primarily on two sets of statistics: the Crime Survey for England and Wales (CSEW) and police recorded crime data.

        +

        View all datasets or publications related to Crime and justice

        ' }, - "description": '

        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 Crime Survey for England and Wales (CSEW) data.

        ' - }, - { - "url": '#0', - "title": 'Disability and crime, UK: 2019 (Latest release)', - "metadata": { - "type": { - "text": 'Statistical bulletin' + { + "url": '#0', + "title": 'Disability and crime', + "metadata": { + "type": { + "text": 'Dataset' + }, + "date": { + "prefix": 'Released', + "showPrefix": true, + "iso": '2021-02-18', + "short": '18 February 2021' + } }, - "date": { - "prefix": 'Released', - "showPrefix": true, - "iso": '2019-12-01', - "short": '2 December 2019' - } + "description": '

        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 Crime Survey for England and Wales (CSEW) data.

        ' }, - "description": '

        An overview of published data on disability and crime 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.

        ' - }, - { - "url": '#0', - "title": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016', - "metadata": { - "type": { - "text": 'User requested data', - "ref": 'Ref 008052' + { + "url": '#0', + "title": 'Disability and crime, UK: 2019 (Latest release)', + "metadata": { + "type": { + "text": 'Statistical bulletin' + }, + "date": { + "prefix": 'Released', + "showPrefix": true, + "iso": '2019-12-01', + "short": '2 December 2019' + } }, - "date": { - "prefix": 'Released', - "showPrefix": true, - "iso": '2017-04-20', - "short": '20 April 2017' + "description": '

        An overview of published data on disability and crime 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.

        ' + }, + { + "url": '#0', + "title": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016', + "metadata": { + "type": { + "text": 'User requested data', + "ref": 'Ref 008052' + }, + "date": { + "prefix": 'Released', + "showPrefix": true, + "iso": '2017-04-20', + "short": '20 April 2017' + } } } - } - ] -}) }} + ] + }) +}} diff --git a/src/components/duration/_macro.njk b/src/components/duration/_macro.njk index 7d04d6ae2d..e9db727518 100644 --- a/src/components/duration/_macro.njk +++ b/src/components/duration/_macro.njk @@ -2,7 +2,7 @@ {% from "components/input/_macro.njk" import onsInput %} {% macro onsDuration(params) %} - {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %} + {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %} {% set numberOfFields = 0 %} {% if params.field1 %} @@ -15,64 +15,70 @@ {% set fields %} {% if params.field1 %} - {{ onsInput({ - "id": params.field1.id, - "type": "number", - "name": params.field1.name, - "classes": (" ons-input--error" if (params.error and params.field1.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""), - "width": "2", - "attributes": params.field1.attributes, - "value": params.field1.value, - "suffix": { - "text": params.field1.suffix.text, - "title": params.field1.suffix.title, - "id": params.field1.suffix.id - }, - "label": { - "text": params.legendOrLabel if numberOfFields < 2, - "description": params.description if numberOfFields < 2 - }, - "fieldId": params.id if numberOfFields < 2, - "error": params.error if numberOfFields < 2 - }) }} + {{ + onsInput({ + "id": params.field1.id, + "type": "number", + "name": params.field1.name, + "classes": (" ons-input--error" if (params.error and params.field1.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""), + "width": "2", + "attributes": params.field1.attributes, + "value": params.field1.value, + "suffix": { + "text": params.field1.suffix.text, + "title": params.field1.suffix.title, + "id": params.field1.suffix.id + }, + "label": { + "text": params.legendOrLabel if numberOfFields < 2, + "description": params.description if numberOfFields < 2 + }, + "fieldId": params.id if numberOfFields < 2, + "error": params.error if numberOfFields < 2 + }) + }} {% endif %} {% if params.field2 %} - {{ onsInput({ - "id": params.field2.id, - "type": "number", - "name": params.field2.name, - "classes": (" ons-input--error" if (params.error and params.field2.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""), - "width": "2", - "attributes": params.field2.attributes, - "value": params.field2.value, - "suffix": { - "text": params.field2.suffix.text, - "title": params.field2.suffix.title, - "id": params.field2.suffix.id - }, - "label": { - "text": params.legendOrLabel if numberOfFields < 2, - "description": params.description if numberOfFields < 2 - }, - "fieldId": params.id if numberOfFields < 2, - "error": params.error if numberOfFields < 2 - }) }} + {{ + onsInput({ + "id": params.field2.id, + "type": "number", + "name": params.field2.name, + "classes": (" ons-input--error" if (params.error and params.field2.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""), + "width": "2", + "attributes": params.field2.attributes, + "value": params.field2.value, + "suffix": { + "text": params.field2.suffix.text, + "title": params.field2.suffix.title, + "id": params.field2.suffix.id + }, + "label": { + "text": params.legendOrLabel if numberOfFields < 2, + "description": params.description if numberOfFields < 2 + }, + "fieldId": params.id if numberOfFields < 2, + "error": params.error if numberOfFields < 2 + }) + }} {% endif %} {% endset %} - {{ onsMultipleInputFields({ - "id": params.id, - "legendOrLabel": params.legendOrLabel, - "description": params.description, - "mutuallyExclusive": params.mutuallyExclusive, - "numberOfFields": numberOfFields, - "fields": fields, - "error": params.error, - "legend": params.legendOrLabel, - "dontWrap": params.dontWrap, - "classes": params.classes, - "legendClasses": params.legendClasses, - "legendIsQuestionTitle": params.legendIsQuestionTitle - }) }} + {{ + onsMultipleInputFields({ + "id": params.id, + "legendOrLabel": params.legendOrLabel, + "description": params.description, + "mutuallyExclusive": params.mutuallyExclusive, + "numberOfFields": numberOfFields, + "fields": fields, + "error": params.error, + "legend": params.legendOrLabel, + "dontWrap": params.dontWrap, + "classes": params.classes, + "legendClasses": params.legendClasses, + "legendIsQuestionTitle": params.legendIsQuestionTitle + }) + }} {% endmacro %} diff --git a/src/components/duration/example-duration-error-for-single-field.njk b/src/components/duration/example-duration-error-for-single-field.njk index df4307fb51..a9072c6f6e 100644 --- a/src/components/duration/example-duration-error-for-single-field.njk +++ b/src/components/duration/example-duration-error-for-single-field.njk @@ -1,31 +1,33 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/duration/_macro.njk" import onsDuration %} -{{ onsDuration({ - "id": "travel-time", - "legendOrLabel": 'How long do you spend travelling to and from work each day?', - "legendClasses": 'ons-u-vh', - "error": { - "text": "Enter a number of minutes that is less than 60", - "id": "duration-error" - }, - "field1": { - "id": "travel-time-hours", - "name": "travel-time-hours", - "suffix": { - "text": "Hours", - "id": "address-time-hours-suffix" +{{ + onsDuration({ + "id": "travel-time", + "legendOrLabel": 'How long do you spend travelling to and from work each day?', + "legendClasses": 'ons-u-vh', + "error": { + "text": "Enter a number of minutes that is less than 60", + "id": "duration-error" }, - "value": "2" - }, - "field2": { - "id": "travel-time-minutes", - "name": "travel-time-minutes", - "suffix": { - "text": "Minutes", - "id": "address-time-minutes-suffix" + "field1": { + "id": "travel-time-hours", + "name": "travel-time-hours", + "suffix": { + "text": "Hours", + "id": "address-time-hours-suffix" + }, + "value": "2" }, - "value": "60", - "error": true - } -}) }} + "field2": { + "id": "travel-time-minutes", + "name": "travel-time-minutes", + "suffix": { + "text": "Minutes", + "id": "address-time-minutes-suffix" + }, + "value": "60", + "error": true + } + }) +}} diff --git a/src/components/duration/example-duration-single-field.njk b/src/components/duration/example-duration-single-field.njk index 001b340e9a..dffa501775 100644 --- a/src/components/duration/example-duration-single-field.njk +++ b/src/components/duration/example-duration-single-field.njk @@ -1,24 +1,28 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/duration/_macro.njk" import onsDuration %} -{% call onsQuestion({ - "title": "How many years have you lived at this address?", - "description": "

        Enter “0” into the years field if you have lived at this address for less than a year

        ", - "legendIsQuestionTitle": true -}) %} - {{ onsDuration({ - "id": "address-duration-example-single", - "dontWrap": true, - "field1": { - "id": "address-duration-years-example", - "name": "address-duration-years", - "suffix": { - "text": "Years", - "id": "address-duration-years-suffix-example" - }, - "attributes": { - "autocomplete": "off" +{% + call onsQuestion({ + "title": "How many years have you lived at this address?", + "description": "

        Enter “0” into the years field if you have lived at this address for less than a year

        ", + "legendIsQuestionTitle": true + }) +%} + {{ + onsDuration({ + "id": "address-duration-example-single", + "dontWrap": true, + "field1": { + "id": "address-duration-years-example", + "name": "address-duration-years", + "suffix": { + "text": "Years", + "id": "address-duration-years-suffix-example" + }, + "attributes": { + "autocomplete": "off" + } } - } - }) }} + }) + }} {% endcall %} diff --git a/src/components/duration/example-duration.njk b/src/components/duration/example-duration.njk index 14b6749008..8cdc47ccdd 100644 --- a/src/components/duration/example-duration.njk +++ b/src/components/duration/example-duration.njk @@ -1,35 +1,39 @@ {% from "components/question/_macro.njk" import onsQuestion %} {% from "components/duration/_macro.njk" import onsDuration %} -{% call onsQuestion({ - "title": "How long have you lived at this address?", - "description": "

        Enter “0” into the years field if you have lived at this address for less than a year

        ", - "legendIsQuestionTitle": true -}) %} - {{ onsDuration({ - "id": "address-duration-example", - "dontWrap": true, - "field1": { - "id": "address-duration-years-example", - "name": "address-duration-years", - "suffix": { - "text": "Years", - "id": "address-duration-years-suffix-example" +{% + call onsQuestion({ + "title": "How long have you lived at this address?", + "description": "

        Enter “0” into the years field if you have lived at this address for less than a year

        ", + "legendIsQuestionTitle": true + }) +%} + {{ + onsDuration({ + "id": "address-duration-example", + "dontWrap": true, + "field1": { + "id": "address-duration-years-example", + "name": "address-duration-years", + "suffix": { + "text": "Years", + "id": "address-duration-years-suffix-example" + }, + "attributes": { + "autocomplete": "off" + } }, - "attributes": { - "autocomplete": "off" + "field2": { + "id": "address-duration-months-example", + "name": "address-duration-months", + "suffix": { + "text": "Months", + "id": "address-duration-months-suffix-example" + }, + "attributes": { + "autocomplete": "off" + } } - }, - "field2": { - "id": "address-duration-months-example", - "name": "address-duration-months", - "suffix": { - "text": "Months", - "id": "address-duration-months-suffix-example" - }, - "attributes": { - "autocomplete": "off" - } - } - }) }} + }) + }} {% endcall %} diff --git a/src/components/error/_macro.njk b/src/components/error/_macro.njk index b0bc94aba9..40e1cae1aa 100644 --- a/src/components/error/_macro.njk +++ b/src/components/error/_macro.njk @@ -4,17 +4,19 @@ {% set content %}

        {{ params.text }}

        {{ caller() }} {% endset %} - {% call onsPanel({ - "variant": "error", - "id": params.id - }) %} - {{ content | safe }} + {% + call onsPanel({ + "variant": "error", + "id": params.id + }) + %} + {{ content | safe }} {% endcall %} {% endmacro %} diff --git a/src/components/external-link/_macro.njk b/src/components/external-link/_macro.njk index a50ea31699..f1318d76ba 100644 --- a/src/components/external-link/_macro.njk +++ b/src/components/external-link/_macro.njk @@ -1,9 +1,11 @@ {% from "components/icon/_macro.njk" import onsIcon %} {% macro onsExternalLink(params) %} - - - {{- params.linkText | safe -}} -  {{- onsIcon({"iconType": 'external-link'}) -}} - ({{- params.newWindowDescription | default("opens in a new tab") -}}) + + {{- params.linkText | safe -}}  {{- onsIcon({"iconType": 'external-link'}) -}} ({{- params.newWindowDescription | default("opens in a new tab") -}}) {% endmacro %} diff --git a/src/components/external-link/example-external-link.njk b/src/components/external-link/example-external-link.njk index a5a9ed4b26..2e67a4836d 100644 --- a/src/components/external-link/example-external-link.njk +++ b/src/components/external-link/example-external-link.njk @@ -1,8 +1,11 @@ {% from "components/external-link/_macro.njk" import onsExternalLink %} -

        This is a paragraph of text with a {{ - onsExternalLink({ - "url": "#0", - "linkText": "link to an external website" - }) -}}

        +

        + This is a paragraph of text with a + {{ + onsExternalLink({ + "url": "#0", + "linkText": "link to an external website" + }) + }} +

        diff --git a/src/components/feedback/_macro.njk b/src/components/feedback/_macro.njk index 11eeb1640d..1f65163caa 100644 --- a/src/components/feedback/_macro.njk +++ b/src/components/feedback/_macro.njk @@ -1,9 +1,11 @@ {% macro onsFeedback(params) %} - {% set headingLevel = params.headingLevel | default(2) %} -
        - - {{ params.heading }} - + {% set headingLevel = params.headingLevel | default(2) | string %} + {% set openingHeadingTag = "" %} +
        + {{ openingHeadingTag | safe }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses else '' }}"> + {{ params.heading }} + {{ closingHeadingTag | safe }}

        {{- params.content | safe -}}

        {{- params.linkText -}}
        diff --git a/src/components/field/_macro.njk b/src/components/field/_macro.njk index df51d3dd1f..1183ced44e 100644 --- a/src/components/field/_macro.njk +++ b/src/components/field/_macro.njk @@ -11,8 +11,8 @@ {% else %}
        {{- caller() if caller -}}
        diff --git a/src/components/fieldset/_macro.njk b/src/components/fieldset/_macro.njk index 5c5d028a9f..e1cbdd1db7 100644 --- a/src/components/fieldset/_macro.njk +++ b/src/components/fieldset/_macro.njk @@ -1,42 +1,49 @@ {% from "components/error/_macro.njk" import onsError %} {% macro onsFieldset(params) %} - {% set descriptionID = (params.id ~ "-" if params.id else "") ~ "legend-description" %} - {% set fieldset -%} - {% if params.dontWrap -%} -
        - {{- caller() if caller -}} -
        + {% set descriptionId = (params.id ~ "-" if params.id) ~ "legend-description" %} + {%- set fieldset -%} + {%- if params.dontWrap -%} +
        {{- caller() if caller -}}
        {%- elif params.legend or params.legendIsQuestionTitle -%}
        - + {%- if params.legendIsQuestionTitle -%} -

        +

        {{- params.legend | safe -}}

        {%- else -%} - {{- params.legend | safe -}} + {{- params.legend | safe -}} {%- endif -%}         {%- if params.description -%} -
        +
        {{- params.description | safe -}}
        {%- endif -%} {{- caller() if caller -}}
        - {%- endif %} - {%- endset %} + {%- endif -%} + {%- endset -%} - {% if params.error -%} + {%- if params.error -%} {% call onsError(params.error) %} {{- fieldset | safe -}} {% endcall %} {%- else -%} {{- fieldset | safe -}} - {%- endif %} + {%- endif -%} {% endmacro %} diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk index 8412c26ecd..28a5719cf4 100644 --- a/src/components/footer/_macro.njk +++ b/src/components/footer/_macro.njk @@ -1,5 +1,4 @@ {% macro onsFooter(params) %} - {% from "components/list/_macro.njk" import onsList %} {% from "components/icon/_macro.njk" import onsIcon %} @@ -30,15 +29,16 @@ {% endset %}
        - {% if params.footerWarning %} {% from "components/panel/_macro.njk" import onsPanel %}
        - {% call onsPanel({ - "variant": "warn", - "classes": "ons-panel--warn--footer" - }) %} + {% + call onsPanel({ + "variant": "warn", + "classes": "ons-panel--warn--footer" + }) + %} {{ params.footerWarning | safe }} {% endcall %}
        @@ -51,7 +51,7 @@ {{ onsButton({ "id": params.button.id, - "classes": params.button.classes if params.button.classes else "", + "classes": params.button.classes if params.button.classes, "variants": "ghost", "text": params.button.text, "name": params.button.name, @@ -64,7 +64,11 @@
        {% endif %} -
        +
        {% if params.newTabWarning %} @@ -106,7 +110,7 @@ {% if (params.cols) or (params.rows) %}
        -
        +
        {% endif %}
        @@ -139,14 +143,16 @@ {% 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') }} {{ - 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') - }) + {{ 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') + }) }}{{ 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') @@ -157,10 +163,11 @@
        {% endif %} {% if not params.poweredBy %} - - + + {% endif %}
        @@ -180,14 +187,14 @@ {% endif %} {% if params.copyrightDeclaration %} + {% set copyrightDeclaration = '© ' + params.copyrightDeclaration.copyright + '
        ' + params.copyrightDeclaration.text %}
        -

        © {{ params.copyrightDeclaration.copyright }}
        {{ params.copyrightDeclaration.text }}

        +

        {{- copyrightDeclaration | safe -}}

        {% endif %}
        - {% endmacro %} diff --git a/src/components/footer/_macro.spec.js b/src/components/footer/_macro.spec.js index 22ad442d7e..d7da956cb9 100644 --- a/src/components/footer/_macro.spec.js +++ b/src/components/footer/_macro.spec.js @@ -252,7 +252,7 @@ describe('macro: footer', () => { const text = $('.ons-footer__copyright').text(); expect(text).toBe( - '© Crown copyright and database rights 2020 OS 100019153. Use of address data is subject to the terms and conditions.', + '© Crown copyright and database rights 2020 OS 100019153. Use of address data is subject to the terms and conditions.', ); }); diff --git a/src/components/footer/example-footer-cymraeg.njk b/src/components/footer/example-footer-cymraeg.njk index 2a6cce0d92..3afb669b1b 100644 --- a/src/components/footer/example-footer-cymraeg.njk +++ b/src/components/footer/example-footer-cymraeg.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ diff --git a/src/components/footer/example-footer-default.njk b/src/components/footer/example-footer-default.njk index 07f0078cad..faf4219ed3 100644 --- a/src/components/footer/example-footer-default.njk +++ b/src/components/footer/example-footer-default.njk @@ -1,7 +1,6 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} -{{ - onsFooter() -}} +{{ onsFooter() }} diff --git a/src/components/footer/example-footer-transactional.njk b/src/components/footer/example-footer-transactional.njk index 0539e4ad82..f3d901400a 100644 --- a/src/components/footer/example-footer-transactional.njk +++ b/src/components/footer/example-footer-transactional.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ diff --git a/src/components/footer/example-footer-warning.njk b/src/components/footer/example-footer-warning.njk index 37208cb6e1..dea0694938 100644 --- a/src/components/footer/example-footer-warning.njk +++ b/src/components/footer/example-footer-warning.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ diff --git a/src/components/footer/example-footer-with-alternative-organisation.njk b/src/components/footer/example-footer-with-alternative-organisation.njk index 22edf9a14f..a6a51da7f4 100644 --- a/src/components/footer/example-footer-with-alternative-organisation.njk +++ b/src/components/footer/example-footer-with-alternative-organisation.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ 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 5dab8b5320..64059eafdf 100644 --- a/src/components/footer/example-footer-with-coat-of-arms.njk +++ b/src/components/footer/example-footer-with-coat-of-arms.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ diff --git a/src/components/footer/example-footer-with-copyright.njk b/src/components/footer/example-footer-with-copyright.njk index cf1ab657ea..6325dad7fb 100644 --- a/src/components/footer/example-footer-with-copyright.njk +++ b/src/components/footer/example-footer-with-copyright.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ diff --git a/src/components/footer/example-footer.njk b/src/components/footer/example-footer.njk index 14c2f53d73..0abb6ecd83 100644 --- a/src/components/footer/example-footer.njk +++ b/src/components/footer/example-footer.njk @@ -1,6 +1,7 @@ --- -"fullWidth": true +'fullWidth': true --- + {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk index ee497e62da..1d03275739 100644 --- a/src/components/header/_macro.njk +++ b/src/components/header/_macro.njk @@ -3,8 +3,9 @@ {% from "components/icon/_macro.njk" import onsIcon %} {% from "components/navigation/_macro.njk" import onsNavigation %} {% from "components/browser-banner/_macro.njk" import onsBrowserBanner %} - - {% set title_tag = "h1" if params.titleAsH1 else "div" %} + {% set titleTag = "h1" if params.titleAsH1 else "div" %} + {% set openingTag = "<" + titleTag %} + {% set closingTag = "" %} {% set currentLanguageISOCode = "en" %} {% if params.language and params.language.languages %} @@ -12,7 +13,10 @@ {% set currentLanguageISOCode = currentLanguage.ISOCode %} {% endif %} -