@ons/design-system 62.0.2 → 62.1.0

package/components/table/example-table-responsive.njk

@@ -0,0 +1,89 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "variants": 'responsive',
+        "caption": "Responsive table with stacked rows for small viewports",
+        "ths": [
+            {
+                "value": "Country"
+            },
+            {
+                "value": "Highest mountain"
+            },
+            {
+                "value": "Height in metres",
+                "numeric": true
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Scotland",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Ben Nevis",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "1,345",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Wales",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Snowdon",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "1,085",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "England",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Scafell Pike",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "978",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Northern Ireland",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Slieve Donard",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "850",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-scrollable.njk

@@ -0,0 +1,158 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "variants": 'scrollable',
+        "caption": "Scrollable table",
+        "ariaLabel": "There are 7 columns in this table. Some of the table may be off screen. Scroll or drag horizontally to bring into view.",
+        "ths": [
+            {
+                "value": "ID"
+            },
+            {
+                "value": "Title"
+            },
+            {
+                "value": "Abbreviation"
+            },
+            {
+                "value": "Legal basis"
+            },
+            {
+                "value": "Frequency"
+            },
+            {
+                "value": "Date"
+            },
+            {
+                "value": "Status"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "023"
+                    },
+                    {
+                        "value": "Monthly Business Survey - Retail Sales Index"
+                    },
+                    {
+                        "value": "RSI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Monthly"
+                    },
+                    {
+                        "value": "20 Jan 2018"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "112"
+                    },
+                    {
+                        "value": "Annual Inward Foreign Direct Investment Survey"
+                    },
+                    {
+                        "value": "AIFDI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually"
+                    },
+                    {
+                        "value": "26 Feb 2018"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--dead'>Not ready</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "332"
+                    },
+                    {
+                        "value": "Business Register and Employment Survey"
+                    },
+                    {
+                        "value": "BRES"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually"
+                    },
+                    {
+                        "value": "23 Jan 2013"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--info'>In progress</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "654"
+                    },
+                    {
+                        "value": "Quartely Survey of Building Materials Sand and Gravel"
+                    },
+                    {
+                        "value": "QBMS"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947 - BEIS"
+                    },
+                    {
+                        "value": "Quartely"
+                    },
+                    {
+                        "value": "24 Jan 2015"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--error'>Issue</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "765"
+                    },
+                    {
+                        "value": "Monthly Survey of Building Materials Concrete Building Blocks"
+                    },
+                    {
+                        "value": "MSBB"
+                    },
+                    {
+                        "value": "Voluntary"
+                    },
+                    {
+                        "value": "Monthly"
+                    },
+                    {
+                        "value": "25 Jan 2014"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>"
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-sortable.njk

@@ -0,0 +1,236 @@
+{% from "components/table/_macro.njk" import onsTable %}
+
+{{
+    onsTable({
+        "variants": 'sortable',
+        "caption": "Javascript enhanced sortable table",
+        "sortBy": "Sort by",
+        "ariaAsc": "ascending",
+        "ariaDesc": "descending",
+        "ths": [
+            {
+                "value": "ID"
+            },
+            {
+                "value": "Title"
+            },
+            {
+                "value": "Abbreviation"
+            },
+            {
+                "value": "Legal basis"
+            },
+            {
+                "value": "Frequency"
+            },
+            {
+                "value": "Date"
+            },
+            {
+                "value": "Status"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "023"
+                    },
+                    {
+                        "value": "Monthly Business Survey - Retail Sales Index"
+                    },
+                    {
+                        "value": "RSI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Monthly",
+                        "dataSort": "1"
+                    },
+                    {
+                        "value": "20 Jan 2018",
+                        "dataSort": "2018-01-20"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>",
+                        "dataSort": "0"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "112"
+                    },
+                    {
+                        "value": "Annual Inward Foreign Direct Investment Survey"
+                    },
+                    {
+                        "value": "AIFDI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually",
+                        "dataSort": "12"
+                    },
+                    {
+                        "value": "26 Feb 2018",
+                        "dataSort": "2018-02-26"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--dead'>Not ready</span>",
+                        "dataSort": "1"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "332"
+                    },
+                    {
+                        "value": "Business Register and Employment Survey"
+                    },
+                    {
+                        "value": "BRES"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually",
+                        "dataSort": "12"
+                    },
+                    {
+                        "value": "23 Jan 2013",
+                        "dataSort": "2013-01-23"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--info'>In progress</span>",
+                        "dataSort": "2"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "654"
+                    },
+                    {
+                        "value": "Quartely Survey of Building Materials Sand and Gravel"
+                    },
+                    {
+                        "value": "QBMS"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947 - BEIS"
+                    },
+                    {
+                        "value": "Quartely",
+                        "dataSort": "3"
+                    },
+                    {
+                        "value": "24 Jan 2015",
+                        "dataSort": "2015-01-24"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--error'>Issue</span>",
+                        "dataSort": "3"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "765"
+                    },
+                    {
+                        "value": "Monthly Survey of Building Materials Concrete Building Blocks"
+                    },
+                    {
+                        "value": "MSBB"
+                    },
+                    {
+                        "value": "Voluntary"
+                    },
+                    {
+                        "value": "Monthly",
+                        "dataSort": "1"
+                    },
+                    {
+                        "value": "25 Jan 2014",
+                        "dataSort": "2014-01-25"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>",
+                        "dataSort": "0"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#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>