@ons/design-system 70.0.16 → 72.0.0

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

package/components/table-of-contents/_macro.spec.js

@@ -116,7 +116,7 @@ describe('macro: table-of-contents', () => {
 
             expect(listsSpy.occurrences[0]).toEqual({
                 element: 'ol',
-                classes: 'ons-u-mb-m',
+                classes: 'ons-u-mb-l',
                 variants: 'dashed',
                 itemsList: EXAMPLE_TABLE_OF_CONTENTS_SINGLE.itemsList,
             });
@@ -155,13 +155,13 @@ describe('macro: table-of-contents', () => {
 
             expect(listsSpy.occurrences[0]).toEqual({
                 element: 'ol',
-                classes: 'ons-u-mb-m',
+                classes: 'ons-u-mb-l',
                 variants: 'dashed',
                 itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[0].itemsList,
             });
             expect(listsSpy.occurrences[1]).toEqual({
                 element: 'ol',
-                classes: 'ons-u-mb-m',
+                classes: 'ons-u-mb-l',
                 variants: 'dashed',
                 itemsList: EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE.lists[1].itemsList,
             });

package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk

@@ -24,7 +24,7 @@ layout: ~
             ]
         },
         "footer": {
-            "OGLLink": {
+            "oglLink": {
                 "pre": 'All content is available under the',
                 "link": 'Open Government Licence v3.0',
                 "url": 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',

package/components/tabs/_macro.njk

@@ -8,9 +8,9 @@
     {% endset %}
 
     <section class="{{ classes }}" {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}>
-        {% set titleTag = params.titleTag | default("h2") %}
-        {% set openingTag = "<" + titleTag %}
-        {% set closingTag = "</" + titleTag + ">" %}
+        {% set titleTag = params.headingLevel | default(2) %}
+        {% set openingTag = "<h" ~ titleTag %}
+        {% set closingTag = "</h" ~ titleTag ~ ">" %}
         {{ openingTag | safe }}
         class="ons-tabs__title ons-u-fs-r--b
         ons-u-mt-no{{ ' ' + params.titleClasses if params.titleClasses else '' }}">{{ params.title }}{{ closingTag | safe }}

package/components/tabs/_macro.spec.js

@@ -83,12 +83,12 @@ describe('macro: tabs', () => {
         const $ = cheerio.load(
             renderComponent('tabs', {
                 ...EXAMPLE_TABS,
-                titleTag: 'h4',
+                headingLevel: 4,
             }),
         );
 
-        const titleTag = $('.ons-tabs__title')[0].tagName;
-        expect(titleTag).toBe('h4');
+        const expectedTitleTag = $('.ons-tabs__title')[0].tagName;
+        expect(expectedTitleTag).toBe('h4');
     });
 
     it('has the provided tab id attributes', () => {

package/components/tabs/_tabs.scss

@@ -30,7 +30,7 @@
     box-sizing: border-box;
     display: list-item;
     list-style: none;
-    margin: 0 0 0.3rem;
+    margin: 0 0 0.25rem;
 
     &--row {
         display: inline;
@@ -44,8 +44,8 @@
     color: var(--ons-color-text);
     display: inline-block;
     height: 2.55rem;
-    line-height: 2.3rem;
-    margin: 0 0.4rem 0 0;
+    line-height: 2.25rem;
+    margin: 0 0.5rem 0 0;
     overflow: visible;
     padding: 0 1rem;
     position: relative;
@@ -143,7 +143,6 @@
     }
 
     .ons-tabs__panel {
-        margin-top: 1px;
         padding: 1rem;
     }
 }

package/components/tabs/example-tabs-details.njk

@@ -16,7 +16,7 @@
             "alt": "Youtube video"
         },
         "title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
-        "linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube'
+        "videoLinkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube'
         })
     }}
     {% from "components/tabs/_macro.njk" import onsTabs %}

package/components/text-indent/_text-indent.scss

@@ -1,5 +1,5 @@
 .ons-text-indent {
     border-left: 4px solid var(--ons-color-borders-indent);
     margin: 0 0 1rem;
-    padding: 0 0 0 1.3em;
+    padding: 0 0 0 1.5rem;
 }

package/components/text-indent/example-text-indent.njk

@@ -1,6 +1,6 @@
 {% from "components/text-indent/_macro.njk" import onsTextIndent %}
 {{-
     onsTextIndent({
-        text: '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
+        "text": '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
     })
 -}}

package/components/timeline/_macro.njk

@@ -2,10 +2,10 @@
     {% from "components/list/_macro.njk" import onsList %}
 
     <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
-        {% set titleTag = params.titleTag | default("h2") %}
-        {% set openingTag = "<" + titleTag %}
-        {% set closingTag = "</" + titleTag + ">" %}
-        {% for item in params.items %}
+        {% set titleTag = params.headingLevel | default(2) %}
+        {% set openingTag = "<h" ~ titleTag %}
+        {% set closingTag = "</h" ~ titleTag ~ ">" %}
+        {% for item in params.timelineItems %}
             <div class="ons-timeline__item">
                 {{ openingTag | safe }} class="ons-timeline__heading">{{ item.heading }}{{ closingTag | safe }}
                 {% if item.itemsList %}

package/components/timeline/_macro.spec.js

@@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMELINE = {
-    items: [
+    timelineItems: [
         {
             heading: 'January 2020',
             content: 'Timeline entry 1',
@@ -63,10 +63,10 @@ describe('macro: timeline', () => {
         expect($secondItem.text()).toContain('Timeline entry 2');
     });
 
-    it('renders a heading based upon titleTag parameter', () => {
+    it('renders a heading based upon `headingLevel` parameter', () => {
         const EXAMPLE_TIMELINE_WITH_TITLE_TAG = {
             ...EXAMPLE_TIMELINE,
-            titleTag: 'h3',
+            headingLevel: 3,
         };
         const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE_WITH_TITLE_TAG));
         const $firstItem = $('.ons-timeline__item:nth-child(1)');

package/components/timeline/_timeline.scss

@@ -8,7 +8,7 @@
         height: 100%;
         left: 0;
         position: absolute;
-        top: 10px;
+        top: 12px;
     }
 }
 
@@ -22,7 +22,7 @@
         height: 4px;
         left: -1.5rem;
         position: absolute;
-        top: 10px;
+        top: 12px;
         width: 12px;
     }
 
@@ -32,6 +32,7 @@
 }
 
 .ons-timeline__heading {
-    font-size: 1rem !important;
+    @extend .ons-u-fs-r--b;
+
     margin-bottom: 0.5rem;
 }

package/components/timeline/example-timeline.njk

@@ -2,7 +2,7 @@
 
 {{
     onsTimeline({
-    "items": [
+        "timelineItems": [
             {
                 "heading": 'September to October 2020',
                 "itemsList": [

package/components/upload/_upload.scss

@@ -2,9 +2,10 @@
     background: var(--ons-color-white);
     border: 1px solid var(--ons-color-input-border);
     border-radius: $input-radius;
-    font-size: 1rem;
     padding: 0;
     width: 100%;
+    // custom line height to center the placeholder text
+    line-height: 1.5rem;
     &::-webkit-file-upload-button {
         background: var(--ons-color-button-secondary);
         border: 0;
@@ -12,7 +13,6 @@
         border-right: 1px solid var(--ons-color-input-border);
         border-top-right-radius: 0;
         color: var(--ons-color-text);
-        font-size: 1rem;
         outline: none;
         padding: 0.5rem 1rem;
         transition: border-color 200ms ease-in;

package/components/video/_macro.njk

@@ -4,22 +4,22 @@
     {% set linkContents %}
         {% if params.image.smallSrc %}
             <img
-                class="ons-video__img ons-u-mb-xs"
+                class="ons-video__img ons-u-mb-2xs"
                 {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}
                 src="{{ params.image.smallSrc }}"
                 alt="{{ params.image.alt }}"
                 loading="lazy"
             />
         {% endif %}
-        <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
+        <span class="ons-video__link-text ons-u-mt-2xs">{{ params.videoLinkText }}</span>
     {% endset %}
 
     <div class="ons-video ons-js-video">
         {{
             onsExternalLink({
-                "url": params.videoLinkURL,
+                "url": params.videoLinkUrl,
                 "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
-                "linkText": linkContents
+                "text": linkContents
             })
         }}
         <iframe

package/components/video/_macro.spec.js

@@ -7,9 +7,9 @@ import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_VIDEO_YOUTUBE = {
     videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
-    videoLinkURL: 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
+    videoLinkUrl: 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
     title: 'Census 2021 promotional TV advert',
-    linkText: 'Example link text',
+    videoLinkText: 'Example link text',
     image: {
         smallSrc: 'example-small.png',
         largeSrc: 'example-large.png',

package/components/video/_video.scss

@@ -1,5 +1,5 @@
 .ons-video {
-    @extend .ons-u-mb-m;
+    @extend .ons-u-mb-l;
 
     &--hasIframe {
         height: 0;

package/components/video/example-video.njk

@@ -2,13 +2,13 @@
 {{
     onsVideo({
         "videoEmbedUrl": 'https://www.youtube.com/embed/OwYVwPPxPj4',
-        "videoLinkURL": 'https://www.youtube.com/watch?v=OwYVwPPxPj4',
+        "videoLinkUrl": 'https://www.youtube.com/watch?v=OwYVwPPxPj4',
         "image": {
             "largeSrc": '/ds-img/youtube-example-cover.png',
             "smallSrc": '/ds-img/youtube-example-cover.png',
             "alt": "Youtube video"
         },
         "title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
-        "linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube'
+        "videoLinkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ on Youtube'
     })
 }}

package/components/video/video.spec.js

@@ -5,13 +5,13 @@ const { setTimeout } = require('node:timers/promises');
 const EXAMPLE_VIDEO_YOUTUBE = {
     videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
     title: 'Census 2021 promotional TV advert',
-    linkText: 'Example link text',
+    videoLinkText: 'Example link text',
 };
 
 const EXAMPLE_VIDEO_VIMEO = {
     videoEmbedUrl: 'https://player.vimeo.com/video/838454524?h=24551a3754',
     title: 'Vimeo Video',
-    linkText: 'Example link text',
+    videoLinkText: 'Example link text',
 };
 
 const EXAMPLE_APPROVED_COOKIE = JSON.stringify({ campaigns: true }).replace(/"/g, "'");