@ons/design-system 62.0.1 → 62.1.0

package/components/table-of-contents/example-table-of-contents-grouped.njk

@@ -0,0 +1,50 @@
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+
+{{-
+    onsTableOfContents({
+        "title": 'Contents',
+        "ariaLabel": 'Links to page sections',
+        "skipLink": {
+            "url": '#0',
+            "text": 'Skip to guide content'
+        },
+        "lists": [
+            {
+                "listHeading": 'Household questions',
+                "listHeadingHidden": 'help topics',
+                "itemsList": [
+                    {
+                        "url": '#household1',
+                        "text": 'Household and who lives here'
+                    },
+                    {
+                        "url": '#household2',
+                        "text": 'Housing, sex and GI'
+                    }
+                ]
+            },
+            {
+                "listHeading": 'Individual questions',
+                "listHeadingHidden": 'help topics',
+                "itemsList": [
+                    {
+                        "url": '#individual1',
+                        "text": 'Name, date of birth and marital status'
+                    },
+                    {
+                        "url": '#individual2',
+                        "text": 'Language, religion and ethnicity'
+                    },
+                    {
+                        "url": '#individual3',
+                        "text": 'Address, health and sexual orientation'
+                    },
+                    {
+                        "url": '#individual4',
+                        "text": 'Education and employment'
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table-of-contents/example-table-of-contents-single.njk

@@ -0,0 +1,39 @@
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+
+{{-
+    onsTableOfContents({
+        "title": 'Contents',
+        "ariaLabel": 'Pages in this guide',
+        "skipLink": {
+            "url": "#0",
+            "text": 'Skip to guide content'
+        },
+        "lists": [
+            {
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'Overview',
+                        "current": true
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Who should take part and why'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'How your information is used'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'The 2019 Census Rehearsal'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Online census'
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table-of-contents/example-table-of-contents-sticky.njk

@@ -0,0 +1,78 @@
+{% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
+<div class="ons-page__container ons-container">
+    <div class="ons-grid ons-js-toc-container">
+        <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+            {{-
+                onsTableOfContents({
+                    "title": 'Contents',
+                    "ariaLabel": 'Sections in this page',
+                    "itemsList": [
+                        {
+                            "url": '#section1',
+                            "text": 'What is the census?'
+                        },
+                        {
+                            "url": '#section2',
+                            "text": 'The online census has now closed'
+                        },
+                        {
+                            "url": '#section3',
+                            "text": 'What happens after Census Day'
+                        },
+                        {
+                            "url": '#section4',
+                            "text": 'The census in Northern Ireland and Scotland'
+                        },
+                        {
+                            "url": '#section5',
+                            "text": 'The last census'
+                        }
+                    ]
+                })
+            }}
+        </div>
+        <div class="ons-grid__col ons-col-7@m ons-push-1@m">
+            <section id="section1">
+                <h2>What is the census?</h2>
+                <p>The census is a survey that happens every 10 years and gives us a picture of all the people and households in England and Wales.</p>
+
+                <p>Your answers to the census questions will help organisations make decisions on planning and funding public services in your area, including transport, education and healthcare.</p>
+            </section>
+            <section id="section2">
+                <h2>The online census has now closed</h2>
+                <p>Census Day was on Sunday 21 March 2021.</p>
+
+                <p>If you still have a paper census questionnaire, fill it in as soon as you can and return it to FREEPOST, Census 2021.</p>
+            </section>
+            <section id="section3">
+                <h2>What happens after Census Day</h2>
+                <p>Two follow-up surveys, the <a href="#0">Census Coverage Survey</a> and the <a href="#0">Census Quality Survey</a>, help to improve the quality and accuracy of the census results.</p>
+
+                <p>Over the next year, we work hard to process the answers from all the census questionnaires. This is so that we can publish the initial Census 2021 findings one year after the census and the main releases two years after the census.</p>
+
+                <p>To make sure the Census 2021 statistics we publish meet the needs of those who use them, we also run an outputs consultation.</p>
+            </section>
+            <section id="section4">
+                <h2>The census in Northern Ireland and Scotland</h2>
+                <p>The Office for National Statistics (ONS) runs the census in England and Wales.</p>
+
+                <p>If you live in Northern Ireland, visit the Northern Ireland Statistics Agency (NISRA) census website to find out about the census for Northern Ireland.</p>
+
+                <p>If you live in Scotland, visit the National Records of Scotland census website to find out how to take part in the census for Scotland.</p>
+            </section>
+            <section id="section5">
+                <h2>The last census</h2>
+                <p>The last census took place in 2011. Many people and organisations used information from the 2011 Census in a variety of ways.</p>
+
+                <p>For example, Bristol City Council used it to inform decisions on how to fund local housing improvements. It was also essential for the charity Redbridge Council for Voluntary Services to help people from ethnic minority groups learn more about dementia.</p>
+
+                <p>To read more about the benefits that information from the 2011 Census helped to create, visit the Office for National Statistics (ONS) website.</p>
+                <p>The Census Coverage Survey (CCS) was a short, separate survey that we at the Office for National Statistics (ONS) started six to eight weeks after Census Day.</p>
+
+                <p>The CCS helps make sure everyone is counted and our census results are as accurate as possible. It asked similar questions to the main census, just fewer of them, at addresses in a selection of postcodes across England and Wales.</p>
+
+                <p>The CCS has now closed.</p>
+            </section>
+        </div>
+    </div>
+</div>

package/components/tabs/example-tabs-details.njk

@@ -0,0 +1,59 @@
+<style>
+  .example-video-block {
+    border: solid 1px #707071;
+  }
+</style>
+
+<div class="example-video-block">
+    {% from "components/video/_macro.njk" import onsVideo %}
+    {{
+        onsVideo({
+        "videoEmbedUrl": 'https://www.youtube.com/embed/_EGJlvkgbPo',
+        "videoLinkURL": 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
+        "image": {
+            "largeSrc": '/patternlib-img/youtube-example-cover.png',
+            "smallSrc": '/patternlib-img/youtube-example-cover.png',
+            "alt": "Youtube video"
+        },
+        "title": 'Census 2021 promotional TV advert',
+        "linkText": 'Watch “Census 2021 promotional TV advert“ on Youtube'
+        })
+    }}
+
+    {% from "components/tabs/_macro.njk" import onsTabs %}
+    {{
+        onsTabs({
+            "variants": [ 'details' ],
+            "noInitialActiveTab": true,
+            "title": 'Contents',
+            "tabs": [
+                {
+                    "id": "video-description",
+                    "title": 'Description',
+                    "content": '<div class="example-video-block__details">
+                        <h3 class="ons-u-d-no@s">Description</h3>
+                        <p>The census provides a snapshot of everyone in England & Wales. We help local councils get the funding they need.</p>
+                        <p>If you live in one of the rehearsal areas help us by taking part in the #CensusRehearsal.</p>
+                    </div>'
+                },
+                {
+                    "id": "video-transcript",
+                    "title": 'Transcript',
+                    "content": '<div class="example-video-block__details">
+                        <h3 class="ons-u-d-no@s">Transcript</h3>
+                        <p>I count.</p>
+                        <p>I count.</p>
+                        <p>I still count.</p>
+                        <p>When it comes to getting our fair share of services like health care, transport, housing and education, the census really counts. And what makes the census count is all of us.</p>
+                    </div>'
+                },
+                {
+                    "id": "video-embed",
+                    "title": 'Embed',
+                    "content": '<h3 class="ons-u-d-no@s">Embed</h3>
+                        <pre class="language-html"><code>' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/_EGJlvkgbPo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' | e ~ '</code></pre>'
+                }
+            ]
+        })
+    }}
+</div>

package/components/tabs/example-tabs.njk

@@ -0,0 +1,39 @@
+{% from "components/tabs/_macro.njk" import onsTabs %}
+
+{{
+    onsTabs({
+        "title": 'Contents',
+        "tabs": [
+            {
+                "id": "ukis",
+                "title": 'UKIS',
+                "content": '<h3>Aim of this survey</h3>
+                <p class="ons-u-fs-r">The aim of the UK Innovation Survey (UKIS) is to collect data from businesses about various aspects of their innovation related activities. Using this data we can measure the level, types and trends in innovation.</p>
+                <h3>How we’ll use this data</h3>
+                <p class="ons-u-fs-r">The UKIS data is a major source of evidence to inform government policy. It is used to promote innovation activities among businesses to boost economic growth. It is an important contribution to the European-wide Community Innovation Survey (CIS). The CIS is used for international benchmarking and comparison purposes.</p>
+                <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/ukinnovationsurvey">find more information on the UKIS survey on the ONS website</a>.</p>'
+            },
+            {
+                "id": "vacancy-survey",
+                "title": 'Vacancy survey',
+                "content": '<h3>Purpose</h3>
+                <p class="ons-u-fs-r">The Vacancy Survey is a regular survey of businesses, which provides an accurate and comprehensive measure of the total number of vacancies across the economy and fills a gap in the information available regarding the demand for labour. Before the Vacancy Survey was introduced, the only information available nationally about vacancies was from records of vacancies notified to Job Centres by employers. This provided only a partial picture, possibly less than half of all vacancies, because employers are under no obligation to notify vacancies to Job Centres. This business based survey has a more complete coverage and is included in the monthly ONS Labour Market Statistical Bulletin.</p>
+                <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/vacancysurvey">find more information on the Vacancy Survey on the ONS website</a>.</p>'
+            },
+            {
+                "id": "monthly-business-survey",
+                "title": 'Monthly Business Survey',
+                "content": '<h3>Aim of this survey</h3>
+                <p class="ons-u-fs-r">The Monthly Business Survey (MBS) collects monthly information on employment of businesses in Great Britain. Your response contributes to Labour Market Statistics.</p>
+                <h4>What you need to know</h4>
+                <p class="ons-u-fs-r">To complete the survey, you will need the following information to answer the survey questions:</p>
+                <ul>
+                    <li>number of full-time/part-time male employees</li>
+                    <li>number of full-time/part-time female employees</li>
+                    <li>total number of employees for the business</li>
+                </ul>
+                <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/monthlybusinesssurveyretailsalesindex">find more information on the Monthly Business Survey on the ONS website</a>.</p>'
+            }
+        ]
+    })
+}}

package/components/textarea/example-textarea-error.njk

@@ -0,0 +1,16 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+
+{{
+    onsTextarea({
+        "id": "textarea",
+        "name": "feedback",
+        "label": {
+            "text": "Please provide some feedback",
+            "description": "For example, describe any difficulties you experienced in the use of this service"
+        },
+            "error": {
+                "id": "feedback-error",
+                "text": "Enter your feedback"
+            }
+    })
+}}

package/components/textarea/example-textarea-with-character-limit.njk

@@ -0,0 +1,18 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+
+{{
+    onsTextarea({
+        "id": "textarea-char-limit",
+        "name": "feedback-limited",
+        "width": "30",
+        "label": {
+            "text": "Please provide some feedback",
+            "description": "For example, describe any difficulties you experienced in the use of this service"
+        },
+        "charCheckLimit": {
+            "limit": 200,
+            "charCountSingular": "You have {x} character remaining",
+            "charCountPlural": "You have {x} characters remaining"
+        }
+    })
+}}

package/components/textarea/example-textarea.njk

@@ -0,0 +1,12 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+
+{{
+    onsTextarea({
+        "id": "textarea",
+        "name": "feedback",
+        "label": {
+            "text": "Please provide some feedback",
+            "description": "For example, describe any difficulties you experienced in the use of this service"
+        }
+    })
+}}

package/components/timeline/example-timeline.njk

@@ -0,0 +1,35 @@
+{% from "components/timeline/_macro.njk" import onsTimeline %}
+
+{{
+    onsTimeline({
+    "items": [
+            {
+                "heading": 'September to October 2020',
+                "itemsList": [
+                    {
+                        "text": "Meet your Community Engagement Manager and set up regular catch up meetings"
+                    },
+                    {
+                        "text": "Local Authority Toolkit available online"
+                    }
+                ]
+            },
+            {
+                "heading": 'September 2020',
+                "content": '<p>ONS to provide Councillor Handbook for distribution</p>'
+            },
+            {
+                "heading": 'November 2020',
+                "content": '<p>ONS to provide you with content for magazines and publications</p>'
+            },
+            {
+                "heading": 'January to March 2021',
+                "content": '<p>ONS to provide a range of press releases for external use</p>'
+            },
+            {
+                "heading": 'February to April 2021',
+                "content": '<p>Promote your local Census Support Centres</p>'
+            }
+        ]
+    })
+}}

package/components/timeout-modal/example-timeout-modal.njk

@@ -0,0 +1,16 @@
+{% from "components/timeout-modal/_macro.njk" import onsTimeoutModal %}
+
+{{ onsTimeoutModal({
+    "showModalTimeInSeconds": 58,
+    "redirectUrl": "#!",
+    "title": "You will be signed out soon",
+    "textFirstLine": "It appears you have been inactive for a while.",
+    "countdownText": "To protect your information, your progress will be saved and you will be signed out in",
+    "countdownExpiredText": "You are being signed out.",
+    "btnText": "Continue survey",
+    "minutesTextSingular": "minute",
+    "minutesTextPlural": "minutes",
+    "secondsTextSingular": "second",
+    "secondsTextPlural": "seconds",
+    "endWithFullStop": true
+}) }}

package/components/timeout-panel/example-panel-with-timeout-warning.njk

@@ -0,0 +1,13 @@
+{% from "components/timeout-panel/_macro.njk" import onsTimeoutPanel %}
+
+{{ onsTimeoutPanel ({
+    "id": "countdown",
+    "redirectUrl": "#!",
+    "minutesTextSingular":"minute",
+    "minutesTextPlural":"minutes",
+    "secondsTextSingular":"second",
+    "secondsTextPlural":"seconds",
+    "countdownText":"For security, your answers will only be available to view for another",
+    "nojsText": "For security, your answers will only be available to view for another 1 minute",
+    "countdownExpiredText": "You are being signed out"
+}) }}

package/components/upload/example-upload-error.njk

@@ -0,0 +1,16 @@
+{% from "components/upload/_macro.njk" import onsUpload %}
+
+{{
+    onsUpload({
+        "id": "file",
+        "accept": ".xls,.xlsx,.pdf",
+        "label": {
+            "description": "File types accepted are XLS and XLSX or PDF",
+            "text": "Upload a file"
+        },
+        "error": {
+            "id": "file-error",
+            "text": "Select a file that is an XLS, XLSX or PDF"
+        }
+    })
+}}

package/components/upload/example-upload.njk

@@ -0,0 +1,12 @@
+{% from "components/upload/_macro.njk" import onsUpload %}
+
+{{
+    onsUpload({
+        "id": "file",
+        "accept": ".xls,.xlsx,.pdf",
+        "label": {
+            "description": "File types accepted are XLS and XLSX or PDF",
+            "text": "Upload a file"
+        }
+    })
+}}

package/components/video/example-video.njk

@@ -0,0 +1,14 @@
+{% from "components/video/_macro.njk" import onsVideo %}
+{{
+    onsVideo({
+        "videoEmbedUrl": 'https://www.youtube.com/embed/_EGJlvkgbPo',
+        "videoLinkURL": 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
+        "image": {
+            "largeSrc": '/patternlib-img/youtube-example-cover.png',
+            "smallSrc": '/patternlib-img/youtube-example-cover.png',
+            "alt": "Youtube video"
+        },
+        "title": 'Census 2021 promotional TV advert',
+        "linkText": 'Watch “Census 2021 promotional TV advert“ on Youtube'
+    })
+}}