@ons/design-system 62.0.2 → 62.1.1

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'
+    })
+}}