diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-result-featured_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-result-featured_0_document_2_mobile.png index e60b76e0cd..407b3c5903 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-result-featured_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-result-featured_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:63200a1660a04a196d30f1ae1aa96923305e1f9d6a8380b8fa5eaf77eb157d2d -size 35377 +oid sha256:03ccce44f29a1b8c96ff49f8d71e8807273a326c012230d163d75cbef608fe95 +size 35381 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_1_tablet.png index 029d7e7371..8b0de10e51 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c4beb7fd462d485207204fa727a11067fd8179db56da916a47b1395d7906b247 -size 106751 +oid sha256:cf13170e7bb2a4d4e276053dec83bd6c6bdb8c2064a81fbc1ac5b6a2e5655289 +size 106718 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_2_mobile.png index 34229649b9..df7261d66d 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_document-list_example-document-list-search-results_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3eb7c15bd6246419f5e4d03e0bcdc51ff011f109870b86f7a6d9b0b653ddbdc -size 128793 +oid sha256:2b421bcda69f3c1e9ef84b6ceeb27ad7ff8359bacfd05584ad4fabd5baf4ffeb +size 128818 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png index faccdafadb..a93fdb8bb7 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:04f81df3a5bb172c3b18070503860aefc43ca94b68999fff6f5512de28fb9701 -size 182388 +oid sha256:f10db83b226468e3f2f69bf837fbf5f2209a67666a373ea552b6baa8fa314f5b +size 182332 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png index 3a2b0db854..2fc309f041 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67057da1dc4b1bb6445596c08cd86ff1fcd474a0b4cebb8320705887ca0c2bbb -size 162425 +oid sha256:787096f53ae03346197fdda4ad1f34e1e1f6e95421597691f66a2878541965e7 +size 162417 diff --git a/src/components/access-code/example-access-code-error.njk b/src/components/access-code/example-access-code-error.njk index 49fdca36fe..a9085add01 100644 --- a/src/components/access-code/example-access-code-error.njk +++ b/src/components/access-code/example-access-code-error.njk @@ -9,12 +9,11 @@ layout: ~ {% from "components/details/_macro.njk" import onsDetails %} {% set pageConfig = { - "title": "Study title" + "title": "Study title" } %} {% block main %} - {% call - onsPanel({ + {% call onsPanel({ title: "There is a problem with this page", type: "error" }) @@ -67,18 +66,16 @@ layout: ~ {% set content %} <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p> {% call onsPanel({ - "type": "warn" - }) - %} + "type": "warn" + }) %} Someone in your household must still complete a study using this household access code {% endcall %} {% endset %} {% call onsDetails({ - "id": "details-access-code-error", + "id": "details-access-code-error", "title": "Need to answer separately from your household?" - }) - %} + }) %} {{ content | safe }} {% endcall %} {% endblock %} 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 32a02a2ea6..a0e1045381 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 @@ -12,7 +12,7 @@ "text": 'Topic' } }, - "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded crime data.</p> + "description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded crime data.</p> <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>' } ] 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 9b2c321755..ef399e3eef 100644 --- a/src/components/document-list/example-document-list-search-results.njk +++ b/src/components/document-list/example-document-list-search-results.njk @@ -12,7 +12,7 @@ "text": 'Topic' } }, - "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded <strong class="ons-highlight">crime</strong> data.</p> + "description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded <mark>crime</mark> data.</p> <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>' }, { @@ -29,7 +29,7 @@ "short": '18 February 2021' } }, - "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) data.</p>' + "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>' }, { "url": '#0', @@ -45,7 +45,7 @@ "short": '2 December 2019' } }, - "description": '<p>An overview of published data on disability and <strong class="ons-highlight">crime</strong> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>' + "description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>' }, { "url": '#0', diff --git a/src/components/fieldset/_fieldset.scss b/src/components/fieldset/_fieldset.scss index 8a340a5984..eb4b5a4725 100644 --- a/src/components/fieldset/_fieldset.scss +++ b/src/components/fieldset/_fieldset.scss @@ -10,8 +10,7 @@ margin: 0; padding: 0 0 1.5rem; - strong, - .ons-highlight { + strong { @extend .ons-highlight; } } diff --git a/src/components/question/_question.scss b/src/components/question/_question.scss index b448ae8e92..cf61ae2765 100644 --- a/src/components/question/_question.scss +++ b/src/components/question/_question.scss @@ -4,16 +4,13 @@ &__title { @extend .ons-u-mb-m; - em, - .ons-highlight { - @extend .ons-highlight; - } mark, .ons-instruction { background-color: var(--ons-color-instruction); color: var(--ons-color-text-inverse); margin-right: 0.5rem; padding: 0 0.5rem; + box-shadow: none; } } diff --git a/src/components/question/example-question-interviewer-note.njk b/src/components/question/example-question-interviewer-note.njk index 0b49d324e9..d4dc13e851 100644 --- a/src/components/question/example-question-interviewer-note.njk +++ b/src/components/question/example-question-interviewer-note.njk @@ -24,7 +24,7 @@ layout: ~ {% block main %} {% call onsQuestion({ - "title": "<mark class=\"ons-instruction\">Interviewer note:</mark>Who to interview", + "title": "<mark>Interviewer note:</mark>Who to interview", "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>", "submitButton": { "variants": "timer", diff --git a/src/components/relationships/example-relationships-error.njk b/src/components/relationships/example-relationships-error.njk index 25a3a8fe55..3eac705448 100644 --- a/src/components/relationships/example-relationships-error.njk +++ b/src/components/relationships/example-relationships-error.njk @@ -25,8 +25,7 @@ layout: ~ {% block main %} - {% call - onsPanel({ + {% call onsPanel({ title: "There is a problem with your answer", type: "error" }) diff --git a/src/foundations/highlighting/example-highlighting.njk b/src/foundations/highlighting/example-highlighting.njk index da1fecc59f..d6614a66c2 100644 --- a/src/foundations/highlighting/example-highlighting.njk +++ b/src/foundations/highlighting/example-highlighting.njk @@ -1,6 +1,6 @@ --- "noRawTab": true --- -<h1>What was the value of the business’s total sales of <strong class="ons-highlight">food</strong>?</h1> -<h1>Of the <strong class="ons-highlight">423</strong> employees how many were part-time?</h1> -<h3>You said <strong class="ons-highlight">0</strong> visitors are staying overnight here on Sunday 21 March 2021</h3> +<h1>What was the value of the business’s total sales of <strong>food</strong>?</h1> +<h1>Of the <strong>423</strong> employees how many were part-time?</h1> +<h3>You said <strong>0</strong> visitors are staying overnight here on Sunday 21 March 2021</h3> diff --git a/src/patterns/hub-and-spoke/example-spoke-continue.njk b/src/patterns/hub-and-spoke/example-spoke-continue.njk index a1c923d77c..ce0f9a4371 100644 --- a/src/patterns/hub-and-spoke/example-spoke-continue.njk +++ b/src/patterns/hub-and-spoke/example-spoke-continue.njk @@ -27,13 +27,12 @@ layout: ~ } %} {% block main %} - {% call onsPanel() - %} + {% call onsPanel() %} <p><strong>This is the last viewed question in this section</strong><br> You can also <a href="/patterns/hub-and-spoke/examples/spoke-start/">go back to the start of the section</a></p> {% endcall %} {% call onsQuestion({ - "title": 'What is <strong class="ons-highlight">John Smith’s</strong> date of birth?', + "title": 'What is <strong>John Smith’s</strong> date of birth?', "description": '<p>For example, 31 3 1980</p>', "legendIsQuestionTitle": true, "submitButton": { diff --git a/src/patterns/news/example-tag.njk b/src/patterns/news/example-tag.njk index f8ff433fba..b7e965fcd2 100644 --- a/src/patterns/news/example-tag.njk +++ b/src/patterns/news/example-tag.njk @@ -28,154 +28,154 @@ layout: ~ {% block main %} -<div class="ons-grid"> - <div class="ons-grid__col ons-col-7@m"> - <h1 class="ons-u-fs-xxl">All articles for <strong class="ons-highlight">Integrated data</strong></h1> + <div class="ons-grid"> + <div class="ons-grid__col ons-col-7@m"> + <h1 class="ons-u-fs-xxl">All articles for <strong>Integrated data</strong></h1> + </div> </div> -</div> -<div class="ons-grid ons-grid--column@xs@s"> + <div class="ons-grid ons-grid--column@xs@s"> - <div class="ons-grid__col ons-col-7@m"> + <div class="ons-grid__col ons-col-7@m"> - <div class="ons-u-mt-m ons-u-mb-m"> + <div class="ons-u-mt-m ons-u-mb-m"> - {{ onsDocumentList({ - "documents": [ - { - "thumbnail": { - "smallSrc": '/img/small/alison-pritchard.jpg', - "largeSrc": '/img/large/alison-pritchard.jpg' + {{ onsDocumentList({ + "documents": [ + { + "thumbnail": { + "smallSrc": '/img/small/alison-pritchard.jpg', + "largeSrc": '/img/large/alison-pritchard.jpg' + }, + "url": '#0', + "title": 'ONS launches Integrated Data Service to boost government collaboration on data sharing', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2021-08-01', + "short": '1 August 2021' + } + }, + "description": 'The Office for National Statistics has today launched the first stage of the <mark>Integrated Data</mark> Service (IDS), a cloud-based platform giving analysts and researchers greater access to data from a range of sources.' + }, + { + "thumbnail": true, + "url": '#0', + "title": 'Integrated Data Service', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2021-12-19', + "short": '19 December 2021' + } + }, + "description": 'Bringing together ready-to-use data to enable faster and wider collaborative analysis for the public good.' }, - "url": '#0', - "title": 'ONS launches Integrated Data Service to boost government collaboration on data sharing', - "metadata": { - "type": { + { + "thumbnail": true, + "url": '#0', + "title": 'Integrated Data for Population Statistics Conference 2018', + "metadata": { + "type": { + "text": 'Press releases', + "url": '#0' + }, + "date": { + "iso": '2018-08-31', + "short": '31 August 2018' + } + }, + "description": 'The Office for National Statistics (ONS) held the <mark>Integrated Data</mark> for Population Statistics Conference on 9 and 10 July 2018 at the University of Surrey.' + } + ] + }) }} + + </div> + + </div> + + <div class="ons-grid__col ons-col-4@m ons-push-1@m"> + + {% call onsRelatedContent({ + "ariaLabel": 'Related content', + "rows": [ + { + "id": 'related-links', + "title": 'Categories', + "itemsList": [ + { "text": 'Press releases', "url": '#0' }, - "date": { - "iso": '2021-08-01', - "short": '1 August 2021' + { + "text": 'Statements', + "url": '#0' } - }, - "description": 'The Office for National Statistics has today launched the first stage of the <strong class="ons-highlight">Integrated Data</strong> Service (IDS), a cloud-based platform giving analysts and researchers greater access to data from a range of sources.' + ] }, { - "thumbnail": true, - "url": '#0', - "title": 'Integrated Data Service', - "metadata": { - "type": { - "text": 'Press releases', - "url": '#0' + "id": 'media-enquiries', + "title": 'Media enquiries', + "classes": 'ons-u-mb-no', + "variants": 'bare', + "itemsList": [ + { + "text": 'Telephone: 0845 604 1858 <br> Monday to Friday, 8:30am to 5:30pm' + }, + { + "text": 'Out of hours: 07867 906 553' }, - "date": { - "iso": '2021-12-19', - "short": '19 December 2021' + { + "text": 'Email: <a href="#0">media.relations@ons.gov.uk</a>' } - }, - "description": 'Bringing together ready-to-use data to enable faster and wider collaborative analysis for the public good.' + ] }, { - "thumbnail": true, - "url": '#0', - "title": 'Integrated Data for Population Statistics Conference 2018', - "metadata": { - "type": { - "text": 'Press releases', - "url": '#0' + "id": 'follow-us', + "title": 'Follow us', + "variants": 'social', + "iconPosition": 'before', + "iconSize": 'xxl', + "itemsList": [ + { + "url": '#0', + "text": 'Twitter', + "iconType": 'twitter', + "rel": 'noreferrer external' + }, + { + "url": '#0', + "text": 'Facebook', + "iconType": 'facebook', + "rel": 'noreferrer external' }, - "date": { - "iso": '2018-08-31', - "short": '31 August 2018' + { + "url": '#0', + "text": 'Instagram', + "iconType": 'instagram', + "rel": 'noreferrer external' + }, + { + "url": '#0', + "text": 'LinkedIn', + "iconType": 'linkedin', + "rel": 'noreferrer external' } - }, - "description": 'The Office for National Statistics (ONS) held the <strong class="ons-highlight">Integrated Data</strong> for Population Statistics Conference on 9 and 10 July 2018 at the University of Surrey.' + ] } ] - }) }} + }) %} - </div> - - </div> - - <div class="ons-grid__col ons-col-4@m ons-push-1@m"> - - {% call onsRelatedContent({ - "ariaLabel": 'Related content', - "rows": [ - { - "id": 'related-links', - "title": 'Categories', - "itemsList": [ - { - "text": 'Press releases', - "url": '#0' - }, - { - "text": 'Statements', - "url": '#0' - } - ] - }, - { - "id": 'media-enquiries', - "title": 'Media enquiries', - "classes": 'ons-u-mb-no', - "variants": 'bare', - "itemsList": [ - { - "text": 'Telephone: 0845 604 1858 <br> Monday to Friday, 8:30am to 5:30pm' - }, - { - "text": 'Out of hours: 07867 906 553' - }, - { - "text": 'Email: <a href="#0">media.relations@ons.gov.uk</a>' - } - ] - }, - { - "id": 'follow-us', - "title": 'Follow us', - "variants": 'social', - "iconPosition": 'before', - "iconSize": 'xxl', - "itemsList": [ - { - "url": '#0', - "text": 'Twitter', - "iconType": 'twitter', - "rel": 'noreferrer external' - }, - { - "url": '#0', - "text": 'Facebook', - "iconType": 'facebook', - "rel": 'noreferrer external' - }, - { - "url": '#0', - "text": 'Instagram', - "iconType": 'instagram', - "rel": 'noreferrer external' - }, - { - "url": '#0', - "text": 'LinkedIn', - "iconType": 'linkedin', - "rel": 'noreferrer external' - } - ] - } - ] - }) %} + {% endcall %} - {% endcall %} + </div> </div> -</div> - {% endblock %} diff --git a/src/patterns/survey-interstitial-page/example-survey-interstitial-page.njk b/src/patterns/survey-interstitial-page/example-survey-interstitial-page.njk index 9811ec1bd9..a9fc775554 100644 --- a/src/patterns/survey-interstitial-page/example-survey-interstitial-page.njk +++ b/src/patterns/survey-interstitial-page/example-survey-interstitial-page.njk @@ -8,34 +8,33 @@ layout: ~ {% from "components/button/_macro.njk" import onsButton %} {% set pageConfig = { - "header": { - "title": "Service name" - }, - "footer": { - "rows": [ - { - "itemsList": [ - { - "text": "Accessibility", - "url": "#0" - }, - { - "text": "Privacy", - "url": "#0" - } - ] - } - ] - } - } -%} + "header": { + "title": "Service name" + }, + "footer": { + "rows": [ + { + "itemsList": [ + { + "text": "Accessibility", + "url": "#0" + }, + { + "text": "Privacy", + "url": "#0" + } + ] + } + ] + } +} %} {% block main %} <div class="ons-page__body"> <h1 class="ons-u-fs-xxl">People who live in this household at 69 Abingdon Road, Goathill</h1> - + <p>In this section, we are counting the people in this household at 68 Abingdon Road, Goathill on <strong>Sunday 21 March 2021.</strong></p> - + {% call onsDetails({ "id": "survey-interstitial-page-use-details", "classes": "ons-u-mb-s", @@ -44,9 +43,9 @@ layout: ~ "button": { "close": "Hide this" } - }) + }) %} - <p>Some content can be written here</p> + <p>Some content can be written here</p> {% endcall %} <h3>You will need to know</h3> @@ -64,11 +63,11 @@ layout: ~ }} <p>The Householder is responsible for ensuring that this questionnaire is completed and submitted.</p> - {{ + {{ onsButton({ "classes": 'ons-u-mb-m ons-u-mt-l', "text": 'Continue' - }) + }) }} </div> diff --git a/src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk b/src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk index 9c7da9b56f..c4d0bee087 100644 --- a/src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk +++ b/src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk @@ -6,40 +6,39 @@ layout: ~ {% from "components/button/_macro.njk" import onsButton %} {% set pageConfig = { - "header": { - "title": "Service name" - }, - "footer": { - "rows": [ - { - "itemsList": [ - { - "text": "Accessibility", - "url": "#0" - }, - { - "text": "Privacy", - "url": "#0" - } - ] - } - ] - } - } -%} + "header": { + "title": "Service name" + }, + "footer": { + "rows": [ + { + "itemsList": [ + { + "text": "Accessibility", + "url": "#0" + }, + { + "text": "Privacy", + "url": "#0" + } + ] + } + ] + } +} %} {% block main %} <div class="ons-page__body"> <h1 class="ons-u-fs-xxl">Income</h1> - + <p>This section asks for information regarding your business's income. This includes questions about total turnover and environmental turnover.</p> <p>This section requires figures for business activity within <strong>GB</strong>. Exclude Nothern Ireland business activity.</p> - {{ + {{ onsButton({ - "classes": 'ons-u-mb-m ons-u-mt-l', - "text": 'Continue' - }) + "classes": 'ons-u-mb-m ons-u-mt-l', + "text": 'Continue' + }) }} </div> diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss index 4e094d3c75..a3b0fe47c9 100644 --- a/src/scss/base/_typography.scss +++ b/src/scss/base/_typography.scss @@ -23,11 +23,17 @@ h5, h6 { line-height: 1.2; margin: 0 0 1rem; - em { - background-color: var(--ons-color-highlight); + strong { + @extend .ons-highlight; } } +mark { + @extend .ons-highlight; + + font-weight: $font-weight-bold; +} + code { font-size: 0.8rem; } diff --git a/src/scss/overrides/hcm.scss b/src/scss/overrides/hcm.scss index 34f8bb8186..3b100e2306 100644 --- a/src/scss/overrides/hcm.scss +++ b/src/scss/overrides/hcm.scss @@ -193,7 +193,14 @@ } // Highlighting - h1 em, + h1 strong, + h2 strong, + h3 strong, + h4 strong, + h5 strong, + h6 strong, + mark, + .ons-fieldset__legend-title strong, .ons-highlight { background-color: mark; color: marktext;