@ons/design-system 62.0.1 → 62.1.0

package/components/date-input/example-date-input-error.njk

@@ -0,0 +1,62 @@
+
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+{{
+    onsDateInput({
+        "id": "period-from-date",
+        "legendOrLabel": "Period from:",
+        "description": "For example, 31 3 2019",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "1"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "1"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2019"
+        }
+    })
+}}
+
+{{
+    onsDateInput({
+        "id": "period-to-date",
+        "legendOrLabel": "Period to:",
+        "description": "For example, 31 3 2020",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "31"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "12"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2018"
+        },
+        "error": {
+            "text": "Enter a date that is after 1 January 2019"
+        }
+    })
+}}

package/components/date-input/example-date-input.njk

@@ -0,0 +1,36 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{
+    onsDateInput({
+        "id": "date",
+        "legendOrLabel": "Date of birth",
+        "description": "For example, 31 3 1980",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "attributes": {
+                "autocomplete": "bday-day"
+            }
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "attributes": {
+                "autocomplete": "bday-month"
+            }
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "attributes": {
+                "autocomplete": "bday-year"
+            }
+        }
+    })
+}}

package/components/details/example-details-with-saved-state.njk

@@ -0,0 +1,10 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{{
+    onsDetails({
+        "id": "details-with-save",
+        "title": "What is a photovoltaic system?",
+        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>",
+        "saveState": "true"
+    })
+}}

package/components/details/example-details-with-warning.njk

@@ -0,0 +1,19 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{%
+    call onsDetails({
+        "id": "details",
+        "title": "Need to answer separately from your household?"
+    })
+%}
+
+    <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start a separate survey.</p>
+    {% call onsPanel({
+            type: "warn"
+        })
+    %}
+        Someone in your household must still complete a survey using a household access code
+    {% endcall %}
+
+{% endcall %}

package/components/details/example-details.njk

@@ -0,0 +1,9 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{{
+    onsDetails({
+        "id": "details",
+        "title": "What is a photovoltaic system?",
+        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>"
+    })
+}}

package/components/document-list/example-document-list-article-featured.njk

@@ -0,0 +1,31 @@
+---
+"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'
+                },
+                "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.'
+        }
+    ]
+}) }}

package/components/document-list/example-document-list-articles.njk

@@ -0,0 +1,60 @@
+{% 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'
+                },
+                "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/cons-award-winners.jpg'
+            },
+            "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.'
+        },
+        {
+            "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.'
+        }
+    ]
+}) }}

package/components/document-list/example-document-list-downloads.njk

@@ -0,0 +1,59 @@
+{% from "components/document-list/_macro.njk" import onsDocumentList %}
+{{ onsDocumentList({
+    "documents": [
+        {
+            "thumbnail": {
+                "smallSrc": '/patternlib-img/download-resources/img/small/including-everyone-in-census-2021-v2.png',
+                "largeSrc": '/patternlib-img/download-resources/img/large/including-everyone-in-census-2021-v2.png'
+            },
+            "url": '#',            
+            "title": 'Including everyone in Census 2021',
+            "metadata": {
+                "type": {
+                  "text": 'Poster'
+                },
+                "file": {
+                    "fileType": 'PDF',
+                    "fileSize": '499KB',
+                    "filePages": '1 page'
+                }
+            },
+            "description": 'Empty belly poster, aimed at advertising census events.'
+        },
+        {
+            "thumbnail": {
+                "smallSrc": '/patternlib-img/download-resources/img/small/including-everyone-in-census-2021.png',
+                "largeSrc": '/patternlib-img/download-resources/img/large/including-everyone-in-census-2021.png'
+            },
+            "url": '#',            
+            "title": 'Community handbook for Census 2021',
+            "metadata": {
+                "type": {
+                    "text": 'Booklet'
+                },
+                "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.'
+        },
+        {
+            "thumbnail": true,
+            "url": '#',            
+            "title": 'Census 2021 matters to everyone',
+            "metadata": {
+                "type": {
+                    "text": 'Poster'
+                },
+                "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.'
+        }
+    ]
+}) }}

package/components/document-list/example-document-list-search-result-featured.njk

@@ -0,0 +1,19 @@
+{% 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": '<p>Figures on <em class="ons-highlight">crime</em> levels and trends for England and Wales based primarily on two sets of statistics: the <em class="ons-highlight">Crime</em> 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>'
+        }
+    ]
+}) }}

package/components/document-list/example-document-list-search-results.njk

@@ -0,0 +1,67 @@
+{% 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": '<p>Figures on <em class="ons-highlight">crime</em> levels and trends for England and Wales based primarily on two sets of statistics: the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) and police recorded <em class="ons-highlight">crime</em> 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>'
+        },
+        {
+            "url": '#0',
+            "title": 'Disability and crime',
+            "metadata": {
+                "type": {
+                    "text": 'Dataset'
+                },
+                "date": {
+                    "prefix": 'Released',
+                    "showPrefix": true,
+                    "iso": '2021-02-18',
+                    "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 <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) data.</p>'
+        },
+        {
+            "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'
+                }
+            },
+            "description": '<p>An overview of published data on disability and <em class="ons-highlight">crime</em> 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',
+            "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'
+                }
+            }
+        }
+    ]
+}) }}

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

@@ -0,0 +1,30 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/duration/_macro.njk" import onsDuration %}
+
+{{
+    onsDuration({
+        "id": "address-duration",
+        "legendOrLabel": 'How long have you lived at this address?',
+        "legendClasses": 'ons-u-vh',
+        "field1": {
+            "id": "address-duration-years",
+            "name": "address-duration-years",
+            "suffix": {
+                "text": "Years",
+                "id": "address-duration-years-suffix"
+            }
+        },
+        "field2": {
+            "id": "address-duration-months",
+            "name": "address-duration-months",
+            "suffix": {
+                "text": "Months",
+                "id": "address-duration-months-suffix"
+            }
+        },
+        "error": {
+            "id": "address-duration-error",
+            "text": "Enter how long you have lived at this address"
+        }
+    })
+}}

package/components/duration/example-duration.njk

@@ -0,0 +1,35 @@
+{% 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": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{ onsDuration({
+        "id": "address-duration",
+        "dontWrap": true,
+        "field1": {
+            "id": "address-duration-years",
+            "name": "address-duration-years",
+            "suffix": {
+                "text": "Years",
+                "id": "address-duration-years-suffix"
+            },
+            "attributes": {
+                "autocomplete": "off"
+            }
+        },
+        "field2": {
+            "id": "address-duration-months",
+            "name": "address-duration-months",
+            "suffix": {
+                "text": "Months",
+                "id": "address-duration-months-suffix"
+            },
+            "attributes": {
+                "autocomplete": "off"
+            }
+        }
+    }) }}
+{% endcall %}

package/components/duration/examples-duration-error-for-single-field.njk

@@ -0,0 +1,31 @@
+{% 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 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"
+        },
+        "value": "2"
+    },
+    "field2": {
+        "id": "travel-time-minutes",
+        "name": "travel-time-minutes",
+        "suffix": {
+            "text": "Minutes",
+            "id": "address-time-minutes-suffix"
+        },
+        "value": "60",
+        "error": true
+    }
+}) }}

package/components/external-link/example-external-link.njk

@@ -0,0 +1,8 @@
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+<p>This is a paragraph of text with a {{
+    onsExternalLink({
+        "url": "#1",
+        "linkText": "link to an external website"
+    })
+}}</p>

package/components/feedback/example-feedback-call-to-action.njk

@@ -0,0 +1,14 @@
+{% from "components/feedback/_macro.njk" import onsFeedback %}
+<div class="ons-grid">
+    <div class="ons-grid__col ons-col-8@m">
+        {{
+            onsFeedback({
+                "heading": "What do you think about this service?",
+                "headingClasses": 'test',
+                "content": "Your comments will help us make improvements",
+                "url": "#0",
+                "linkText": "Give feedback"
+            })
+        }}
+    </div>
+</div>

package/components/footer/example-footer-cymraeg.njk

@@ -0,0 +1,54 @@
+---
+"fullWidth": true
+---
+{% from "components/footer/_macro.njk" import onsFooter %}
+{{
+    onsFooter({
+        "lang": 'cy',
+        "rows": [
+            {
+                "itemsList": [
+                    {
+                        "text": 'Help',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Ieithoedd',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'BSL a fideos sain',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Cysylltu â ni',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ],
+        "legal": [
+            {
+                "itemsList": [
+                    {
+                        "text": 'Cwcis',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Datganiad hygyrchedd',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Preifatrwydd a diogelu data',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Telerau ac amodau',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ],
+        "OGLLink": true
+    })
+}}

package/components/footer/example-footer-default.njk

@@ -0,0 +1,7 @@
+---
+"fullWidth": true
+---
+{% from "components/footer/_macro.njk" import onsFooter %}
+{{
+    onsFooter()
+}}

package/components/footer/example-footer-transactional.njk

@@ -0,0 +1,62 @@
+---
+"fullWidth": true
+---
+{% from "components/footer/_macro.njk" import onsFooter %}
+{{
+    onsFooter({
+        "newTabWarning": 'The following links open in a new tab',
+        "rows": [
+            {
+                "itemsList": [
+                    {
+                        "text": 'Help',
+                        "url": '#0',
+                        "target": '_blank'
+                    },
+                    {
+                        "text": 'Languages',
+                        "url": '#0',
+                        "target": '_blank'
+                    },
+                    {
+                        "text": 'BSL and audio videos',
+                        "url": '#0',
+                        "target": '_blank'
+                    },
+                    {
+                        "text": 'Contact us',
+                        "url": '#0',
+                        "target": '_blank'
+                    }
+                ]
+            }
+        ],
+        "legal": [
+            {
+                "itemsList": [
+                    {
+                        "text": 'Cookies',
+                        "url": '#0',
+                        "target": '_blank'
+                    },
+                    {
+                        "text": 'Accessibility statement',
+                        "url": '#0',
+                        "target": '_blank'
+                    },
+                    {
+                        "text": 'Privacy and data protection',
+                        "url": '#0',
+                        "target": '_blank'
+                    },
+                    {
+                        "text": 'Terms and conditions',
+                        "url": '#0',
+                        "target": '_blank'
+                    }
+                ]
+            }
+        ],
+        "OGLLink": true
+    })
+}}

package/components/footer/example-footer-warning.njk

@@ -0,0 +1,32 @@
+---
+"fullWidth": true
+---
+{% from "components/footer/_macro.njk" import onsFooter %}
+{{
+    onsFooter({
+        "footerWarning": "Make sure you <a href='#0'>leave this page</a> or close your browser if using a shared device",
+        "legal": [
+            {
+                "itemsList": [
+                    {
+                        "text": 'Cookies',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Accessibility statement',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Privacy and data protection',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Terms and conditions',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ],
+        "OGLLink": true
+    })
+}}