@ons/design-system 70.0.17 → 72.0.0

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/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, "'");