@ons/design-system 70.0.17 → 72.0.0

package/components/summary/example-summary-grouped-total.njk

@@ -5,12 +5,12 @@
             {
                 "groups": [
                     {
-                        "groupTitle": "Summary - Section Title",
+                        "title": "Summary - Section Title",
                         "rows": [
                             {
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Total value of acquisitions for transport assets and equipment",
+                                        "title": "Total value of acquisitions for transport assets and equipment",
                                         "valueList": [
                                             {
                                                 "text": "£9,000.00"
@@ -27,9 +27,9 @@
                                 ]
                             },
                             {
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
+                                        "title": "Total value of acquisitions for computers and peripheral devices (hardware)",
                                         "valueList": [
                                             {
                                                 "text": "£225,000.00"
@@ -47,9 +47,9 @@
                             },
                             {
                                 "total": true,
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Grand total for value of acquisitions",
+                                        "title": "Grand total for value of acquisitions",
                                         "valueList": [
                                             {
                                                 "text": "£234,000.00"

package/components/summary/example-summary-grouped-with-errors.njk

@@ -5,11 +5,11 @@
             {
                 "groups": [
                     {
-                        "groupTitle": "Summary - Section Title",
+                        "title": "Summary - Section Title",
                         "rows": [
                             {
-                                "rowTitle": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?",
-                                "rowItems": [
+                                "title": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -27,10 +27,10 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What was the value of the business's total sales of food?",
+                                "title": "What was the value of the business's total sales of food?",
                                 "errorMessage": "Change one or more of the figures so they sum to £600",
                                 "error": true,
-                                "rowItems": [
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -48,9 +48,9 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What was the value of the business's total sales of alcohol, confectionery and tobacco?",
+                                "title": "What was the value of the business's total sales of alcohol, confectionery and tobacco?",
                                 "error": true,
-                                "rowItems": [
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -68,9 +68,9 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What was the value of the business's total sales of clothing and footwear?",
+                                "title": "What was the value of the business's total sales of clothing and footwear?",
                                 "error": true,
-                                "rowItems": [
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {

package/components/summary/example-summary-grouped.njk

@@ -6,14 +6,14 @@
     onsSummary({
         "summaries": [
             {
-                "summaryTitle": "John Doe",
+                "title": "John Doe",
                 "groups": [
                     {
-                        "groupTitle": "Personal details",
+                        "title": "Personal details",
                         "rows": [
                             {
-                                "rowTitle": "Are you John Doe?",
-                                "rowItems": [
+                                "title": "Are you John Doe?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -31,8 +31,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What's your date of birth?",
-                                "rowItems": [
+                                "title": "What's your date of birth?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -50,8 +50,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What is your sex?",
-                                "rowItems": [
+                                "title": "What is your sex?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -71,11 +71,11 @@
                         ]
                     },
                     {
-                        "groupTitle": "Identity and health",
+                        "title": "Identity and health",
                         "rows": [
                             {
-                                "rowTitle": "What is your country of birth?",
-                                "rowItems": [
+                                "title": "What is your country of birth?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -93,8 +93,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What passports do you hold?",
-                                "rowItems": [
+                                "title": "What passports do you hold?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -114,11 +114,11 @@
                         ]
                     },
                     {
-                        "groupTitle": "Qualifications",
+                        "title": "Qualifications",
                         "rows": [
                             {
-                                "rowTitle": "Have you completed an apprenticeship?",
-                                "rowItems": [
+                                "title": "Have you completed an apprenticeship?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -136,8 +136,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Have you achieved a GCSE or equivalent qualification?",
-                                "rowItems": [
+                                "title": "Have you achieved a GCSE or equivalent qualification?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -157,12 +157,12 @@
                         ]
                     },
                     {
-                        "groupTitle": "Employment history",
+                        "title": "Employment history",
                         "rows": [
                             {
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Name of UK company",
+                                        "title": "Name of UK company",
                                         "valueList": [
                                             {
                                                 "text": "Company A"
@@ -182,7 +182,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Head office location",
+                                        "title": "Head office location",
                                         "valueList": [
                                             {
                                                 "text": "Cardiff"
@@ -197,7 +197,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Is this UK company your current employer?",
+                                        "title": "Is this UK company your current employer?",
                                         "valueList": [
                                             {
                                                 "text": "No"
@@ -214,9 +214,9 @@
                                 ]
                             },
                             {
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Name of UK company",
+                                        "title": "Name of UK company",
                                         "valueList": [
                                             {
                                                 "text": "Company A"
@@ -236,7 +236,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Head office location",
+                                        "title": "Head office location",
                                         "valueList": [
                                             {
                                                 "text": "Newport"
@@ -251,7 +251,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Is this UK company your current employer?",
+                                        "title": "Is this UK company your current employer?",
                                         "valueList": [
                                             {
                                                 "text": "Yes"
@@ -277,13 +277,13 @@
                         }
                     },
                     {
-                        "groupTitle": "Spending",
+                        "title": "Spending",
                         "rows": [
                             {
-                                "rowTitle": "What are your monthly household expenses?",
-                                "rowItems": [
+                                "title": "What are your monthly household expenses?",
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Food",
+                                        "title": "Food",
                                         "valueList": [
                                             {
                                                 "text": "£50.00"
@@ -298,7 +298,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Utilities",
+                                        "title": "Utilities",
                                         "valueList": [
                                             {
                                                 "text": "£65.00"
@@ -313,7 +313,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Transport",
+                                        "title": "Transport",
                                         "valueList": [
                                             {
                                                 "text": "£70.00"
@@ -328,7 +328,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Other",
+                                        "title": "Other",
                                         "valueList": [
                                             {
                                                 "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

package/components/summary/example-summary-household.njk

@@ -2,15 +2,15 @@
 
 {{
     onsSummary({
-        "classes": "ons-u-mb-l",
+        "classes": "ons-u-mb-xl",
         "summaries": [
             {
                 "groups": [
                     {
                         "rows": [
                             {
-                                "rowTitle": "Joe Bloggs (You)",
-                                "rowItems": [
+                                "title": "Joe Bloggs (You)",
+                                "itemsList": [
                                     {
                                         "iconType": "person",
                                         "actions": [
@@ -24,8 +24,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Barry Scott",
-                                "rowItems": [
+                                "title": "Barry Scott",
+                                "itemsList": [
                                     {
                                         "iconType": "person",
                                         "actions": [
@@ -44,8 +44,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Wilhelmina Susannah Clementine-Smith",
-                                "rowItems": [
+                                "title": "Wilhelmina Susannah Clementine-Smith",
+                                "itemsList": [
                                     {
                                         "iconType": "person",
                                         "actions": [

package/components/summary/example-summary-hub-minimal.njk

@@ -9,8 +9,8 @@
                         {
                         "rows": [
                             {
-                                "rowTitle": "People who live here",
-                                "rowItems": [
+                                "title": "People who live here",
+                                "itemsList": [
                                     {
                                         "iconType": "check",
                                         "iconVisuallyHiddenText": "Section complete",
@@ -25,8 +25,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Mary Smith (You)",
-                                "rowItems": [
+                                "title": "Mary Smith (You)",
+                                "itemsList": [
                                     {
                                         "iconType": "check",
                                         "iconVisuallyHiddenText": "Section complete",
@@ -41,8 +41,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "John Smith",
-                                "rowItems": [
+                                "title": "John Smith",
+                                "itemsList": [
                                     {
                                         "actions": [
                                             {
@@ -55,8 +55,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Billy Smith",
-                                "rowItems": [
+                                "title": "Billy Smith",
+                                "itemsList": [
                                     {
                                         "actions": [
                                             {

package/components/summary/example-summary-hub.njk

@@ -9,8 +9,8 @@
                         {
                         "rows": [
                             {
-                                "rowTitle": "People who live here",
-                                "rowItems": [
+                                "title": "People who live here",
+                                "itemsList": [
                                     {
                                         "iconType": "check",
                                         "valueList": [
@@ -29,8 +29,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Accommodation",
-                                "rowItems": [
+                                "title": "Accommodation",
+                                "itemsList": [
                                     {
                                         "iconType": "check",
                                         "valueList": [
@@ -49,8 +49,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Mary Smith (You)",
-                                "rowItems": [
+                                "title": "Mary Smith (You)",
+                                "itemsList": [
                                     {
                                         "iconType": "check",
                                         "valueList": [
@@ -69,8 +69,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "John Smith",
-                                "rowItems": [
+                                "title": "John Smith",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -88,8 +88,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Billy Smith",
-                                "rowItems": [
+                                "title": "Billy Smith",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -107,8 +107,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Sally Smith",
-                                "rowItems": [
+                                "title": "Sally Smith",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -126,8 +126,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
-                                "rowItems": [
+                                "title": "Wilhelmina Susannah Clementine-Smith (Visitor)",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -145,8 +145,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Vera Jones (Visitor)",
-                                "rowItems": [
+                                "title": "Vera Jones (Visitor)",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {

package/components/summary/example-summary-multiple.njk

@@ -3,15 +3,15 @@
     onsSummary({
         "summaries": [
             {
-                "summaryTitle": "Summary - Section Title",
+                "title": "Summary - Section Title",
                 "groups": [
                     {
                         "rows": [
                             {
-                                "rowTitle": "What are your monthly household expenses?",
-                                "rowItems": [
+                                "title": "What are your monthly household expenses?",
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Food",
+                                        "title": "Food",
                                         "valueList": [
                                             {
                                                 "text": "£50.00"
@@ -26,7 +26,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Utilities",
+                                        "title": "Utilities",
                                         "valueList": [
                                             {
                                                 "text": "£65.00"
@@ -41,7 +41,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Transport",
+                                        "title": "Transport",
                                         "valueList": [
                                             {
                                                 "text": "£70.00"
@@ -56,7 +56,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Other",
+                                        "title": "Other",
                                         "valueList": [
                                             {
                                                 "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

package/components/summary/example-summary-no-action.njk

@@ -5,11 +5,11 @@
             {
                 "groups": [
                     {
-                        "groupTitle": "Turnover",
+                        "title": "Turnover",
                         "rows": [
                             {
-                                "rowTitle": "What are the dates of the sales period you are reporting for?",
-                                "rowItems": [
+                                "title": "What are the dates of the sales period you are reporting for?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -20,8 +20,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Total turnover",
-                                "rowItems": [
+                                "title": "Total turnover",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {

package/components/summary/example-summary.njk

@@ -8,12 +8,12 @@
                     {
                         "placeholderText": 'test',
                         "id": "turnover",
-                        "groupTitle": "Turnover",
+                        "title": "Turnover",
                         "rows": [
                             {
                                 "id": "sales-dates-row",
-                                "rowTitle": "What are the dates of the sales period you are reporting for?",
-                                "rowItems": [
+                                "title": "What are the dates of the sales period you are reporting for?",
+                                "itemsList": [
                                     {
                                         "id": "sales-dates",
                                         "valueList": [
@@ -32,9 +32,9 @@
                                 ]
                             },
                             {
-                                "rowTitle": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?",
+                                "title": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?",
                                 "id": "sales-value-row",
-                                "rowItems": [
+                                "itemsList": [
                                     {
                                         "id": "sales-value",
                                         "valueList": [
@@ -54,8 +54,8 @@
                             },
                             {
                                 "id": "sales-reasons-row",
-                                "rowTitle": "Please indicate the reasons for any changes in the total turnover",
-                                "rowItems": [
+                                "title": "Please indicate the reasons for any changes in the total turnover",
+                                "itemsList": [
                                     {
                                         "id": "sales-reasons",
                                         "valueList": [
@@ -79,8 +79,8 @@
                             },
                             {
                                 "id": "sales-detail-row",
-                                "rowTitle": "Please describe the changes in total turnover in more detail",
-                                "rowItems": [
+                                "title": "Please describe the changes in total turnover in more detail",
+                                "itemsList": [
                                     {
                                         "id": "sales-detail",
                                         "valueList": [

package/components/table/_table.scss

@@ -63,7 +63,7 @@
     }
 
     &--responsive {
-        @include mq(xxs, s) {
+        @include mq('2xs', s) {
             .ons-table__header {
                 display: none;
             }
@@ -124,7 +124,7 @@
             }
             .ons-table__header,
             .ons-table__cell {
-                @include mq(xxs, m) {
+                @include mq('2xs', m) {
                     white-space: nowrap;
                 }
             }
@@ -207,7 +207,6 @@
                 display: inline-block;
                 font-family: $font-sans;
                 font-weight: $font-weight-bold;
-                line-height: 1rem;
                 padding: 0 0 0.2rem;
                 white-space: nowrap;
 

package/components/table-of-contents/_macro.njk

@@ -17,14 +17,14 @@
             {% if params.lists %}
                 {% for list in params.lists %}
                     {% if list.listHeading %}
-                        <h3 class="ons-u-fs-r ons-u-mb-xs">
+                        <h3 class="ons-u-fs-r ons-u-mb-2xs">
                             {{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:
                         </h3>
                     {% endif %}
                     {{
                         onsList({
                             "element": 'ol',
-                            "classes": 'ons-u-mb-m',
+                            "classes": 'ons-u-mb-l',
                             "variants": 'dashed',
                             "itemsList": list.itemsList
                         })
@@ -34,7 +34,7 @@
                 {{
                     onsList({
                         "element": 'ol',
-                        "classes": 'ons-u-mb-m',
+                        "classes": 'ons-u-mb-l',
                         "variants": 'dashed',
                         "itemsList": params.itemsList
                     })