@ons/design-system 70.0.8 → 70.0.9

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

@@ -1,60 +1,62 @@
 {% 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'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "thumbnail": {
+                    "smallSrc": '/img/small/census-monuments-lights.jpg',
+                    "largeSrc": '/img/large/census-monuments-lights.jpg'
                 },
-                "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/ons-award-winners.jpg'
-            },
-            "url": '#0',
-            "title": 'Office for National Statistics win top Royal Statistical Society award',
-            "metadata": {
-                "type": {
-                    "text": 'Press releases',
-                    "url": '#0'
+                "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'
+                    }
                 },
-                "date": {
-                    "iso": '2021-07-15',
-                    "short": '15 July 2021'
-                }
+                "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
             },
-            "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'
+            {
+                "thumbnail": {
+                    "smallSrc": '/img/small/ons-award-winners.jpg',
+                    "largeSrc": '/img/large/ons-award-winners.jpg'
                 },
-                "date": {
-                    "iso": '2022-01-01',
-                    "short": '1 January 2022'
-                }
+                "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.'
             },
-            "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.'
-        }
-    ]
-}) }}
+            {
+                "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

@@ -1,53 +1,55 @@
 {% from "components/document-list/_macro.njk" import onsDocumentList %}
-{{ onsDocumentList({
-    "documents": [
-        {
-            "thumbnail": true,
-            "url": '#',
-            "title": 'Including everyone in Census 2021',
-            "metadata": {
-                "type": {
-                  "text": 'Poster'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "thumbnail": true,
+                "url": '#',
+                "title": 'Including everyone in Census 2021',
+                "metadata": {
+                    "type": {
+                      "text": 'Poster'
+                    },
+                    "file": {
+                        "fileType": 'PDF',
+                        "fileSize": '499KB',
+                        "filePages": '1 page'
+                    }
                 },
-                "file": {
-                    "fileType": 'PDF',
-                    "fileSize": '499KB',
-                    "filePages": '1 page'
-                }
+                "description": 'Empty belly poster, aimed at advertising census events.'
             },
-            "description": 'Empty belly poster, aimed at advertising census events.'
-        },
-        {
-            "thumbnail": true,
-            "url": '#',
-            "title": 'Community handbook for Census 2021',
-            "metadata": {
-                "type": {
-                    "text": 'Booklet'
+            {
+                "thumbnail": true,
+                "url": '#',
+                "title": 'Community handbook for Census 2021',
+                "metadata": {
+                    "type": {
+                        "text": 'Booklet'
+                    },
+                    "file": {
+                        "fileType": 'PDF',
+                        "fileSize": '3.3MB',
+                        "filePages": '16 pages'
+                    }
                 },
-                "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.'
             },
-            "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'
+            {
+                "thumbnail": true,
+                "url": '#',
+                "title": 'Census 2021 matters to everyone',
+                "metadata": {
+                    "type": {
+                        "text": 'Poster'
+                    },
+                    "file": {
+                        "fileType": 'PDF',
+                        "fileSize": '866KB',
+                        "filePages": '1 page'
+                    }
                 },
-                "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.'
-        }
-    ]
-}) }}
+                "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

@@ -1,19 +1,21 @@
 {% 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 <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>'
-        }
-    ]
-}) }}
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "featured": true,
+                "showMetadataFirst": true,
+                "url": '#0',
+                "title": 'Crime and justice',
+                "metadata": {
+                    "type": {
+                        "text": 'Topic'
+                    }
+                },
+                "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>'
+            }
+        ]
+    })
+}}

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

@@ -1,67 +1,69 @@
 {% 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 <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>'
-        },
-        {
-            "url": '#0',
-            "title": 'Disability and crime',
-            "metadata": {
-                "type": {
-                    "text": 'Dataset'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "featured": true,
+                "showMetadataFirst": true,
+                "url": '#0',
+                "title": 'Crime and justice',
+                "metadata": {
+                    "type": {
+                        "text": 'Topic'
+                    }
                 },
-                "date": {
-                    "prefix": 'Released',
-                    "showPrefix": true,
-                    "iso": '2021-02-18',
-                    "short": '18 February 2021'
-                }
+                "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>'
             },
-            "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',
-            "title": 'Disability and crime, UK: 2019 (Latest release)',
-            "metadata": {
-                "type": {
-                    "text": 'Statistical bulletin'
+            {
+                "url": '#0',
+                "title": 'Disability and crime',
+                "metadata": {
+                    "type": {
+                        "text": 'Dataset'
+                    },
+                    "date": {
+                        "prefix": 'Released',
+                        "showPrefix": true,
+                        "iso": '2021-02-18',
+                        "short": '18 February 2021'
+                    }
                 },
-                "date": {
-                    "prefix": 'Released',
-                    "showPrefix": true,
-                    "iso": '2019-12-01',
-                    "short": '2 December 2019'
-                }
+                "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>'
             },
-            "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',
-            "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'
+            {
+                "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'
+                    }
                 },
-                "date": {
-                    "prefix": 'Released',
-                    "showPrefix": true,
-                    "iso": '2017-04-20',
-                    "short": '20 April 2017'
+                "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',
+                "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/_macro.njk

@@ -2,7 +2,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsDuration(params) %}
-    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
+    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %}
     {% set numberOfFields = 0 %}
 
     {% if params.field1 %}
@@ -15,64 +15,70 @@
 
     {% set fields %}
         {% if params.field1 %}
-            {{ onsInput({
-                "id": params.field1.id,
-                "type": "number",
-                "name": params.field1.name,
-                "classes": (" ons-input--error" if (params.error and params.field1.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "attributes": params.field1.attributes,
-                "value": params.field1.value,
-                "suffix": {
-                    "text": params.field1.suffix.text,
-                    "title": params.field1.suffix.title,
-                    "id": params.field1.suffix.id
-                },
-                "label": {
-                    "text": params.legendOrLabel if numberOfFields < 2,
-                    "description": params.description if numberOfFields < 2
-                },
-                "fieldId": params.id if numberOfFields < 2,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.field1.id,
+                    "type": "number",
+                    "name": params.field1.name,
+                    "classes": (" ons-input--error" if (params.error and params.field1.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""),
+                    "width": "2",
+                    "attributes": params.field1.attributes,
+                    "value": params.field1.value,
+                    "suffix": {
+                        "text": params.field1.suffix.text,
+                        "title": params.field1.suffix.title,
+                        "id": params.field1.suffix.id
+                    },
+                    "label": {
+                        "text": params.legendOrLabel if numberOfFields < 2,
+                        "description": params.description if numberOfFields < 2
+                    },
+                    "fieldId": params.id if numberOfFields < 2,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
 
         {% if params.field2 %}
-            {{ onsInput({
-                "id": params.field2.id,
-                "type": "number",
-                "name": params.field2.name,
-                "classes": (" ons-input--error" if (params.error and params.field2.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "attributes": params.field2.attributes,
-                "value": params.field2.value,
-                "suffix": {
-                    "text": params.field2.suffix.text,
-                    "title": params.field2.suffix.title,
-                    "id": params.field2.suffix.id
-                },
-                "label": {
-                    "text": params.legendOrLabel if numberOfFields < 2,
-                    "description": params.description if numberOfFields < 2
-                },
-                "fieldId": params.id if numberOfFields < 2,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.field2.id,
+                    "type": "number",
+                    "name": params.field2.name,
+                    "classes": (" ons-input--error" if (params.error and params.field2.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""),
+                    "width": "2",
+                    "attributes": params.field2.attributes,
+                    "value": params.field2.value,
+                    "suffix": {
+                        "text": params.field2.suffix.text,
+                        "title": params.field2.suffix.title,
+                        "id": params.field2.suffix.id
+                    },
+                    "label": {
+                        "text": params.legendOrLabel if numberOfFields < 2,
+                        "description": params.description if numberOfFields < 2
+                    },
+                    "fieldId": params.id if numberOfFields < 2,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
     {% endset %}
 
-    {{ onsMultipleInputFields({
-        "id": params.id,
-        "legendOrLabel": params.legendOrLabel,
-        "description": params.description,
-        "mutuallyExclusive": params.mutuallyExclusive,
-        "numberOfFields": numberOfFields,
-        "fields": fields,
-        "error": params.error,
-        "legend": params.legendOrLabel,
-        "dontWrap": params.dontWrap,
-        "classes": params.classes,
-        "legendClasses": params.legendClasses,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle
-    }) }}
+    {{
+        onsMultipleInputFields({
+            "id": params.id,
+            "legendOrLabel": params.legendOrLabel,
+            "description": params.description,
+            "mutuallyExclusive": params.mutuallyExclusive,
+            "numberOfFields": numberOfFields,
+            "fields": fields,
+            "error": params.error,
+            "legend": params.legendOrLabel,
+            "dontWrap": params.dontWrap,
+            "classes": params.classes,
+            "legendClasses": params.legendClasses,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle
+        })
+    }}
 {% endmacro %}

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

@@ -1,31 +1,33 @@
 {% 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 of minutes 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"
+{{
+    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 of minutes that is less than 60",
+            "id": "duration-error"
         },
-        "value": "2"
-    },
-    "field2": {
-        "id": "travel-time-minutes",
-        "name": "travel-time-minutes",
-        "suffix": {
-            "text": "Minutes",
-            "id": "address-time-minutes-suffix"
+        "field1": {
+            "id": "travel-time-hours",
+            "name": "travel-time-hours",
+            "suffix": {
+                "text": "Hours",
+                "id": "address-time-hours-suffix"
+            },
+            "value": "2"
         },
-        "value": "60",
-        "error": true
-    }
-}) }}
+        "field2": {
+            "id": "travel-time-minutes",
+            "name": "travel-time-minutes",
+            "suffix": {
+                "text": "Minutes",
+                "id": "address-time-minutes-suffix"
+            },
+            "value": "60",
+            "error": true
+        }
+    })
+}}