@ons/design-system 70.0.17 → 72.0.1

package/components/button/_button.scss

@@ -7,9 +7,8 @@ $button-shadow-size: 3px;
     cursor: pointer;
     display: inline-block;
     font-family: inherit;
-    font-size: 1rem;
-    font-weight: $font-weight-bold;
-    line-height: 1.35;
+    @extend .ons-u-fs-r--b;
+
     margin: 0;
     padding: 0;
     position: relative;
@@ -38,19 +37,17 @@ $button-shadow-size: 3px;
     &__inner {
         background: var(--ons-color-button);
         border-radius: $input-radius;
-        box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
+        box-shadow: 0 rems($button-shadow-size) 0 var(--ons-color-button-shadow);
         color: var(--ons-color-text-inverse);
-        display: inherit;
-        padding: 0.7em 1em 0.8em;
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 1rem;
         // Required for Google Tag Manager
         pointer-events: none;
         position: relative;
-
         .ons-icon {
             fill: var(--ons-color-text-inverse);
             height: 18px;
-            margin-top: -$button-shadow-size;
-            vertical-align: middle;
             width: 18px;
         }
     }
@@ -106,12 +103,12 @@ $button-shadow-size: 3px;
     // Small buttons
     &--small,
     &--mobile {
-        font-size: 0.9rem;
+        line-height: 1.25rem !important;
     }
 
     &--small & {
         &__inner {
-            padding: 0.5em 0.7em;
+            padding: 0.5rem 0.75rem;
             .ons-icon {
                 height: 16px;
                 width: 16px;
@@ -122,7 +119,7 @@ $button-shadow-size: 3px;
     &--small.ons-btn--ghost &,
     &--mobile & {
         &__inner {
-            padding: 0.5em 0.7em;
+            padding: 0.5rem 0.75rem;
         }
     }
 
@@ -391,6 +388,9 @@ $button-shadow-size: 3px;
                 transition: opacity 0.3s ease-in-out;
                 width: 27px;
             }
+            .ons-btn__text {
+                margin-left: 0;
+            }
         }
     }
 
@@ -405,7 +405,8 @@ $button-shadow-size: 3px;
         &__inner {
             color: transparent;
             .ons-icon {
-                margin-left: 0 !important;
+                @extend .ons-u-ml-no;
+
                 opacity: 1;
             }
         }
@@ -482,7 +483,6 @@ $button-shadow-size: 3px;
             box-shadow: none;
             color: var(--ons-color-branded-text);
             display: block;
-            font-size: 1rem;
             font-weight: $font-weight-regular;
             padding: 0.6rem 1rem;
             text-align: left;
@@ -490,7 +490,7 @@ $button-shadow-size: 3px;
             .ons-icon {
                 fill: var(--ons-color-branded-text);
                 float: right;
-                margin-top: 3px;
+                margin-top: 0.25rem;
             }
         }
     }
@@ -552,8 +552,16 @@ $button-shadow-size: 3px;
     }
 }
 
+.ons-search__btn {
+    height: 92.5%; //this is to allow the button to be fully aligned with the input by accounting for the shadow box of 3px
+    .ons-btn__inner:has(> .ons-icon) {
+        padding-right: 0.75rem;
+        height: 100%;
+    }
+}
+
 .ons-btn-group {
-    @extend .ons-u-mb-m;
+    @extend .ons-u-mb-l;
 
     align-items: baseline;
     display: flex;

package/components/button/_macro.njk

@@ -86,7 +86,7 @@
                 {{-
                     onsIcon({
                         "iconType": iconType,
-                        "classes": 'ons-u-mr-xs'
+                        "classes": 'ons-u-mr-2xs'
                     })
                 -}}
             {%- endif -%}
@@ -95,7 +95,7 @@
                 {{-
                     onsIcon({
                         "iconType": iconType,
-                        "classes": 'ons-u-ml-xs'
+                        "classes": 'ons-u-ml-2xs'
                     })
                 -}}
             {%- endif -%}
@@ -105,7 +105,7 @@
                     "iconType": iconType
                 })
             -}}
-            <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
+            <span class="ons-btn__text ons-u-vh@2xs@s">{{- params.html | safe if params.html else params.text -}}</span>
         {%- else -%}
             <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
         {%- endif -%}

package/components/button/example-button-custom.njk

@@ -1,6 +1,6 @@
 {% from "components/button/_macro.njk" import onsButton %}
 
-<div class="ons-u-mb-m">
+<div class="ons-u-mb-l">
     {{
         onsButton({
             "type": 'button',

package/components/card/_card.scss

@@ -17,12 +17,6 @@
         text-decoration-thickness: 3px;
     }
 
-    &__title {
-        // This is to allow the focus state for multi lined title links to render the focus style correctly.
-        // This should be corrected when the typography scale is improved.
-        line-height: 1.65 !important;
-    }
-
     @include mq(m) {
         margin: 0;
         .ons-grid__col & {

package/components/card/_macro.njk

@@ -1,11 +1,11 @@
 {%- macro onsCard(params) -%}
-    {% set headingLevel = params.headingLevel | default(2) | string %}
+    {% set headingLevel = params.title.headingLevel | default(2) | string %}
     {% set openingHeadingTag = "<h" + headingLevel %}
     {% set closingHeadingTag = "</h" + headingLevel + ">" %}
-    {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %}
+    {% set placeholderSrcset = (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/large/placeholder-card.png 2x" %}
 
     <div class="ons-card">
-        <a href="{{ params.url }}" class="ons-card__link">
+        <a href="{{ params.title.url }}" class="ons-card__link">
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
                     <img
@@ -17,31 +17,31 @@
                         alt="{{ params.image.alt }}"
                         loading="lazy"
                     />
-                {% elif params.image == true or params.image.placeholderURL %}
+                {% elif params.image == true or params.image.placeholderUrl %}
                     <img
                         class="ons-card__image ons-u-mb-s "
                         height="100"
                         width="303"
                         srcset="{{ placeholderSrcset }}"
-                        src="{{- params.image.placeholderURL if params.image.placeholderURL -}}/img/small/placeholder-card.png"
+                        src="{{- params.image.placeholderUrl if params.image.placeholderUrl -}}/img/small/placeholder-card.png"
                         alt=""
                         loading="lazy"
                     />
                 {% endif %}
             {%- endif -%}
             {{ openingHeadingTag | safe }}
-            class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}"> {{ params.title }}
+            class="ons-card__title {{ params.title.classes | default('ons-u-fs-m') }}" id="{{ params.title.id }}"> {{ params.title.text }}
             {{ closingHeadingTag | safe }}
         </a>
 
-        <p id="{{ params.textId }}">{{ params.text }}</p>
+        <p id="{{ params.body.id }}">{{ params.body.text }}</p>
 
-        {%- if params.itemsList -%}
+        {%- if params.body.itemsList -%}
             {% from "components/list/_macro.njk" import onsList %}
             {{
                 onsList({
                     "variants": 'dashed',
-                    "itemsList": params.itemsList
+                    "itemsList": params.body.itemsList
                 })
             }}
         {% endif %}

package/components/card/_macro.spec.js

@@ -6,15 +6,17 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CARD_WITHOUT_IMAGE = {
-    title: 'Example card title',
-    text: 'Example card text.',
-    textId: 'example-text-id',
+    title: {
+        text: 'Example card title',
+    },
+    body: {
+        text: 'Example card text.',
+        id: 'example-text-id',
+    },
 };
 
 const EXAMPLE_CARD_WITH_IMAGE = {
-    title: 'Example card title',
-    text: 'Example card text.',
-    textId: 'example-text-id',
+    ...EXAMPLE_CARD_WITHOUT_IMAGE,
     image: {
         smallSrc: 'example-small.png',
         largeSrc: 'example-large.png',
@@ -23,18 +25,14 @@ const EXAMPLE_CARD_WITH_IMAGE = {
 };
 
 const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE = {
-    title: 'Example card title',
-    text: 'Example card text.',
-    textId: 'example-text-id',
+    ...EXAMPLE_CARD_WITHOUT_IMAGE,
     image: true,
 };
 
 const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH = {
-    title: 'Example card title',
-    text: 'Example card text.',
-    textId: 'example-text-id',
+    ...EXAMPLE_CARD_WITHOUT_IMAGE,
     image: {
-        placeholderURL: '/placeholder-image-url',
+        placeholderUrl: '/placeholder-image-url',
     },
 };
 
@@ -59,8 +57,14 @@ describe('macro: card', () => {
         ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
             const $ = cheerio.load(
                 renderComponent('card', {
-                    ...EXAMPLE_CARD_WITHOUT_IMAGE,
-                    headingLevel,
+                    title: {
+                        text: 'Example card title',
+                        headingLevel: headingLevel,
+                    },
+                    body: {
+                        text: 'Example card text.',
+                        id: 'example-text-id',
+                    },
                 }),
             );
 
@@ -78,8 +82,14 @@ describe('macro: card', () => {
             const listsSpy = faker.spy('list');
 
             faker.renderComponent('card', {
-                ...EXAMPLE_CARD_WITHOUT_IMAGE,
-                itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+                title: {
+                    text: 'Example card title',
+                },
+                body: {
+                    text: 'Example card text.',
+                    id: 'example-text-id',
+                    itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+                },
             });
 
             expect(listsSpy.occurrences[0]).toEqual({
@@ -91,8 +101,14 @@ describe('macro: card', () => {
         it('outputs a hyperlink with the provided `url`', () => {
             const $ = cheerio.load(
                 renderComponent('card', {
-                    ...EXAMPLE_CARD_WITHOUT_IMAGE,
-                    url: 'https://example.com',
+                    title: {
+                        text: 'Example card title',
+                        url: 'https://example.com',
+                    },
+                    body: {
+                        text: 'Example card text.',
+                        id: 'example-text-id',
+                    },
                 }),
             );
 
@@ -120,8 +136,19 @@ describe('macro: card', () => {
         ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
             const $ = cheerio.load(
                 renderComponent('card', {
-                    ...EXAMPLE_CARD_WITH_IMAGE,
-                    headingLevel,
+                    title: {
+                        text: 'Example card title',
+                        headingLevel: headingLevel,
+                    },
+                    body: {
+                        text: 'Example card text.',
+                        id: 'example-text-id',
+                    },
+                    image: {
+                        smallSrc: 'example-small.png',
+                        largeSrc: 'example-large.png',
+                        alt: 'Example alt text',
+                    },
                 }),
             );
 
@@ -141,8 +168,14 @@ describe('macro: card', () => {
         it('outputs a hyperlink with the provided `url`', () => {
             const $ = cheerio.load(
                 renderComponent('card', {
-                    ...EXAMPLE_CARD_WITH_IMAGE,
-                    url: 'https://example.com',
+                    title: {
+                        text: 'Example card title',
+                        url: 'https://example.com',
+                    },
+                    body: {
+                        text: 'Example card text.',
+                        id: 'example-text-id',
+                    },
                 }),
             );
 
@@ -206,7 +239,7 @@ describe('macro: card', () => {
             });
         });
 
-        describe('with a default placeholder image with `placeholderURL`', () => {
+        describe('with a default placeholder image with `placeholderUrl`', () => {
             it('outputs an `img` element', () => {
                 const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
 

package/components/card/example-card-set-with-images.njk

@@ -4,12 +4,16 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-with-image-1',
-                    "textId": 'text1',
-                    "title": 'About the census',
-                    "url": '#0',
-                    "text": 'The census is a survey that gives us information about all the households in England and Wales.',
-                    "image": true
+                    "image": true,
+                    "title": {
+                        "id": 'card-with-image-1',
+                        "text": 'About the census',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                        "id": 'text1'
+                    }
                 })
             }}
         </div>
@@ -17,12 +21,16 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-with-image-2',
-                    "textId": 'text2',
-                    "title": 'Working on the census',
-                    "url": '#0',
-                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
-                    "image": true
+                    "image": true,
+                    "title": {
+                        "id": 'card-with-image-2',
+                        "text": 'Working on the census',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text2',
+                        "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
+                    }
                 })
             }}
         </div>
@@ -30,12 +38,16 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-with-image-3',
-                    "textId": 'text3',
-                    "title": 'Your data and security',
-                    "url": '#0',
-                    "text": 'How we keep your data safe and what happens to your personal information.',
-                    "image": true
+                    "image": true,
+                    "title": {
+                        "id": 'card-with-image-3',
+                        "text": 'Your data and security',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text3',
+                        "text": 'How we keep your data safe and what happens to your personal information.'
+                    }
                 })
             }}
         </div>

package/components/card/example-card-set-with-lists.njk

@@ -4,21 +4,25 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-with-list-1',
-                    "textId": 'text1',
-                    "title": 'About the census',
-                    "url": '#0',
-                    "text": 'The census is a survey that gives us information about all the households in England and Wales.',
-                    "itemsList": [
-                        {
-                            "url": '#0',
-                            "text": 'List item 1 about the census'
-                        },
-                        {
-                            "url": '#0',
-                            "text": 'List item 2 about the census'
-                        }
-                    ]
+                    "title": {
+                        "id": 'card-with-list-1',
+                        "text": 'About the census',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text1',
+                        "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                        "itemsList": [
+                            {
+                                "url": '#0',
+                                "text": 'List item 1 about the census'
+                            },
+                            {
+                                "url": '#0',
+                                "text": 'List item 2 about the census'
+                            }
+                        ]
+                    }
                 })
             }}
         </div>
@@ -26,21 +30,25 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-with-list-2',
-                    "textId": 'text2',
-                    "title": 'Working on the census',
-                    "url": '#0',
-                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
-                    "itemsList": [
-                        {
-                            "url": '#0',
-                            "text": 'List item 1 about working on the census'
-                        },
-                        {
-                            "url": '#0',
-                            "text": 'List item 2 about working on the census'
-                        }
-                    ]
+                    "title": {
+                        "id": 'card-with-list-2',
+                        "text": 'Working on the census',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text2',
+                        "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                        "itemsList": [
+                            {
+                                "url": '#0',
+                                "text": 'List item 1 about working on the census'
+                            },
+                            {
+                                "url": '#0',
+                                "text": 'List item 2 about working on the census'
+                            }
+                        ]
+                    }
                 })
             }}
         </div>
@@ -48,21 +56,25 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-with-list-3',
-                    "textId": 'text3',
-                    "title": 'Your data and security',
-                    "url": '#0',
-                    "text": 'How we keep your data safe and what happens to your personal information.',
-                    "itemsList": [
-                        {
-                            "url": '#0',
-                            "text": 'List item 1 about your data and security'
-                        },
-                        {
-                            "url": '#0',
-                            "text": 'List item 2 about your data and security'
-                        }
-                    ]
+                    "title": {
+                        "id": 'card-with-list-3',
+                        "text": 'Your data and security',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text3',
+                        "text": 'How we keep your data safe and what happens to your personal information.',
+                        "itemsList": [
+                            {
+                                "url": '#0',
+                                "text": 'List item 1 about your data and security'
+                            },
+                            {
+                                "url": '#0',
+                                "text": 'List item 2 about your data and security'
+                            }
+                        ]
+                    }
                 })
             }}
         </div>

package/components/card/example-card-set.njk

@@ -4,11 +4,15 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-set-1',
-                    "textId": 'text1',
-                    "title": 'About the census',
-                    "url": '#0',
-                    "text": 'The census is a survey that gives us information about all the households in England and Wales.'
+                    "title": {
+                        "id": 'card-set-1',
+                        "text": 'About the census',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text1',
+                        "text": 'The census is a survey that gives us information about all the households in England and Wales.'
+                    }
                 })
             }}
         </div>
@@ -16,11 +20,15 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-set-2',
-                    "textId": 'text2',
-                    "title": 'Working on the census',
-                    "url": '#0',
-                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
+                    "title": {
+                        "id": 'card-set-2',
+                        "text": 'Working on the census',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text2',
+                        "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
+                    }
                 })
             }}
         </div>
@@ -28,11 +36,15 @@
         <div class="ons-grid__col ons-col-4@m">
             {{
                 onsCard({
-                    "id": 'card-set-3',
-                    "textId": 'text3',
-                    "title": 'Your data and security',
-                    "url": '#0',
-                    "text": 'How we keep your data safe and what happens to your personal information.'
+                    "title": {
+                        "id": 'card-set-3',
+                        "text": 'Your data and security',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text3',
+                        "text": 'How we keep your data safe and what happens to your personal information.'
+                    }
                 })
             }}
         </div>

package/components/card/example-card.njk

@@ -2,10 +2,14 @@
 
 {{
     onsCard({
-        "id": 'card-example',
-        "textId": 'text',
-        "title": 'Your data and security',
-        "url": '#0',
-        "text": 'How we keep your data safe and what happens to your personal information.'
+        "title": {
+            "id": 'card-example',
+            "text": 'Your data and security',
+            "url": '#0'
+        },
+        "body":{
+            "id": 'text',
+            "text": 'How we keep your data safe and what happens to your personal information.'
+        }
     })
 }}

package/components/char-check-limit/_macro.njk

@@ -5,7 +5,7 @@
     {% endif %}
     <span
         id="{{ params.id }}"
-        class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-xs"
+        class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
         data-charcount-singular="{{ params.charCountSingular }}"
         data-charcount-plural="{{ params.charCountPlural }}"
         data-charcount-limit-singular="{{ params.charCountOverLimitSingular }}"