@ons/design-system 70.0.16 → 72.0.0

package/components/section-navigation/example-section-navigation-vertical.njk

@@ -9,33 +9,33 @@
                 "title": "Section Title",
                 "itemsList": [
                     {
-                        "title": "Section 1",
+                        "text": "Section 1",
                         "url": "#section-1",
                         "anchors": [
                             {
-                                "title": "Sub section 1",
+                                "text": "Sub section 1",
                                 "url": "#sub-section-1"
                             },
                             {
-                                "title": "Sub section 2",
+                                "text": "Sub section 2",
                                 "url": "#sub-section-2"
                             },
                             {
-                                "title": "Sub section 3",
+                                "text": "Sub section 3",
                                 "url": "#sub-section-3"
                             }
                         ]
                     },
                     {
-                        "title": "Section 2",
+                        "text": "Section 2",
                         "url": "#section-2"
                     },
                     {
-                        "title": "Section 3",
+                        "text": "Section 3",
                         "url": "#section-3"
                     },
                     {
-                        "title": "Section 4",
+                        "text": "Section 4",
                         "url": "#section-4"
                     }
                 ]
@@ -44,33 +44,33 @@
                 "title": "Section Title",
                 "itemsList": [
                     {
-                        "title": "Section 5",
+                        "text": "Section 5",
                         "url": "#section-5"
                     },
                     {
-                        "title": "Section 6",
+                        "text": "Section 6",
                         "url": "#section-6",
                         "anchors": [
                             {
-                                "title": "Sub section 1",
+                                "text": "Sub section 1",
                                 "url": "#sub-section-1"
                             },
                             {
-                                "title": "Sub section 2",
+                                "text": "Sub section 2",
                                 "url": "#sub-section-2"
                             },
                             {
-                                "title": "Sub section 3",
+                                "text": "Sub section 3",
                                 "url": "#sub-section-3"
                             }
                         ]
                     },
                     {
-                        "title": "Section 7",
+                        "text": "Section 7",
                         "url": "#0"
                     },
                     {
-                        "title": "Section 8",
+                        "text": "Section 8",
                         "url": "#0"
                     }
                 ]

package/components/section-navigation/example-section-navigation.njk

@@ -5,15 +5,15 @@
         "currentPath": "#section-1",
         "itemsList": [
             {
-                "title": "Section 1",
+                "text": "Section 1",
                 "url": "#section-1"
             },
             {
-                "title": "Section 2",
+                "text": "Section 2",
                 "url": "#0"
             },
             {
-                "title": "Section 3",
+                "text": "Section 3",
                 "url": "#0"
             }
         ]

package/components/select/example-select-with-inline-label.njk

@@ -3,7 +3,7 @@
     onsSelect({
         "id": "select-example-with-inline-label",
         "name": "select",
-        "classes": "ons-u-wa--@xxs",
+        "classes": "ons-u-wa--@2xs",
         "label": {
             "text": "Sort by",
             "inline": true

package/components/share-page/_macro.njk

@@ -2,18 +2,18 @@
     {% from "components/list/_macro.njk" import onsList %}
 
     {% if params.title %}
-        {% 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-u-fs-r--b ons-u-mb-xs">{{ params.title }}{{ closingTag | safe }}
+        class="ons-u-fs-r--b ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
     {% endif %}
 
     {% if params.facebook and params.facebook == true %}
         {%
             set facebook =
             {
-                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode,
+                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageUrl|urlencode,
                 "text": 'Facebook',
                 "iconType": 'facebook',
                 "rel": 'noreferrer external',
@@ -25,7 +25,7 @@
         {%
             set twitter =
             {
-                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode,
+                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode,
                 "text": 'Twitter',
                 "iconType": 'twitter',
                 "rel": 'noreferrer external',
@@ -37,7 +37,7 @@
         onsList({
             "variants": 'inline',
             "iconPosition": 'before',
-            "iconSize": params.iconSize | default("xxl"),
+            "iconSize": params.iconSize | default("2xl"),
             "itemsList": [facebook, twitter]
         })
     }}

package/components/share-page/_macro.spec.js

@@ -8,7 +8,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 const EXAMPLE_SHARE_PAGE = {
     title: 'Share page',
     pageTitle: 'An example page',
-    pageURL: 'https://example.com/an-example-page',
+    pageUrl: 'https://example.com/an-example-page',
     facebook: true,
     twitter: true,
 };
@@ -31,7 +31,7 @@ describe('macro: share-page', () => {
         const $ = cheerio.load(
             renderComponent('share-page', {
                 ...EXAMPLE_SHARE_PAGE,
-                titleTag: 'h4',
+                headingLevel: 4,
             }),
         );
 

package/components/share-page/example-share-page.njk

@@ -4,7 +4,7 @@
     onsSharePage({
         "title": 'Share this post',
         "pageTitle": 'A page to share',
-        "pageURL": 'https://example.com/a-page-to-share',
+        "pageUrl": 'https://example.com/a-page-to-share',
         "facebook": true,
         "twitter": true
     })

package/components/status/_status.scss

@@ -17,7 +17,7 @@
         box-sizing: border-box;
         content: '';
         display: inline-block;
-        margin-right: 0.391rem;
+        margin-right: 0.5rem;
     }
 
     /* Small status indicators for information dense situations */

package/components/summary/_macro.njk

@@ -15,17 +15,17 @@
 
     <div class="{{ className }}">
         {% for summary in params.summaries %}
-            {% if summary.summaryTitle %}
-                <h2 class="ons-summary__title ons-u-mb-m{{ ' ons-u-mt-m' if loop.index > 1 }}">{{ summary.summaryTitle }}</h2>
+            {% if summary.title %}
+                <h2 class="ons-summary__title ons-u-mb-l{{ ' ons-u-mt-l' if loop.index > 1 else "" }}">{{ summary.title }}</h2>
                 {% set headingLevel = "3" %}
             {% endif %}
             {% for group in summary.groups %}
-                <div {% if group.id %}id="{{ group.id }}"{{ ' ' }}{% endif %}class="ons-summary__group{{ variantClasses }}">
-                    {% if group.groupTitle %}
-                        {% set openingHeadingTag = "<h" + headingLevel %}
-                        {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+                <div {% if group.id %}id="{{ group.id }}"{% endif %} class="ons-summary__group{{ variantClasses }}">
+                    {% if group.title %}
+                        {% set openingHeadingTag = "<h" ~ headingLevel %}
+                        {% set closingHeadingTag = "</h" ~ headingLevel ~ ">" %}
                         {{ openingHeadingTag | safe }}
-                        class="ons-summary__group-title">{{ group.groupTitle }}{{ closingHeadingTag | safe }}
+                        class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">
@@ -37,63 +37,63 @@
                                     {% if row.errorMessage %}
                                         <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
                                     {% endif %}
-                                    {% if row.rowItems | length > 1 and row.rowTitle %}
+                                    {% if row.itemsList | length > 1 and row.title %}
                                         <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
-                                            {{- row.rowTitle -}}
+                                            {{- row.title -}}
                                         </div>
                                     {% endif %}
 
-                                    {% for rowItem in row.rowItems %}
+                                    {% for item in row.itemsList %}
                                         <div
-                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if rowItem.valueList }}"
-                                            {% if rowItem.id %}id="{{ rowItem.id }}"{% endif %}
+                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if item.valueList else "" }}"
+                                            {% if item.id %}id="{{ item.id }}"{% endif %}
                                         >
                                             <dt
                                                 class="ons-summary__item-title"
-                                                {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                             >
-                                                {% if rowItem.iconType %}
+                                                {% if item.iconType %}
                                                     {% from "components/icon/_macro.njk" import onsIcon %}
                                                     <span
-                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if rowItem.iconType == 'check' }}"
+                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
                                                     >
                                                         {{-
                                                             onsIcon({
-                                                                "iconType": rowItem.iconType
+                                                                "iconType": item.iconType
                                                             })
                                                         -}}
-                                                        {% if rowItem.iconVisuallyHiddenText %}
-                                                            <span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span>
+                                                        {% if item.iconVisuallyHiddenText %}
+                                                            <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
                                                         {% endif %}
                                                     </span>
                                                 {% endif %}
 
                                                 <div
-                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType }}"
+                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
                                                 >
-                                                    {{- rowItem.rowTitle | default(row.rowTitle) | safe -}}
+                                                    {{- item.title | default(row.title) | safe -}}
                                                 </div>
 
                                                 {# Render section status for mobile if is hub #}
-                                                {% if variantHub and rowItem.valueList %}
-                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
+                                                {% if variantHub and item.valueList %}
+                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
                                                 {% endif %}
                                             </dt>
-                                            {% if rowItem.valueList %}
+                                            {% if item.valueList %}
                                                 <dd
-                                                    class="ons-summary__values{{ ' ons-summary__values--2' if not rowItem.actions }}"
-                                                    {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                    class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
+                                                    {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                                 >
-                                                    {% if rowItem.valueList | length == 1 %}
-                                                        <span class="ons-summary__text">{{ rowItem.valueList[0].text | safe }}</span>
-                                                        {% if rowItem.valueList[0].other or rowItem.valueList[0].other == 0 %}
+                                                    {% if item.valueList | length == 1 %}
+                                                        <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
+                                                        {% if item.valueList[0].other or item.valueList[0].other == 0 %}
                                                             <ul class="ons-u-mb-no">
-                                                                <li>{{ rowItem.valueList[0].other | safe }}</li>
+                                                                <li>{{ item.valueList[0].other | safe }}</li>
                                                             </ul>
                                                         {% endif %}
                                                     {% else %}
                                                         <ul class="ons-u-mb-no">
-                                                            {% for value in rowItem.valueList %}
+                                                            {% for value in item.valueList %}
                                                                 <li>
                                                                     <span class="ons-summary__text">{{ value.text | safe }}</span>
                                                                     {% if value.other or value.other == 0 %}
@@ -107,9 +107,9 @@
                                                     {% endif %}
                                                 </dd>
                                             {% endif %}
-                                            {% if rowItem.actions %}
+                                            {% if item.actions %}
                                                 <dd class="ons-summary__actions">
-                                                    {% for action in rowItem.actions %}
+                                                    {% for action in item.actions %}
                                                         {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                         <a
                                                             href="{{ action.url }}"
@@ -135,7 +135,7 @@
 
                     {% if group.summaryLink %}
                         <div
-                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
+                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-3xl' if not group.last }}"
                         >
                             {% set link %}
                                 <a

package/components/summary/_macro.spec.js

@@ -8,12 +8,12 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 const EXAMPLE_SUMMARY_ROWS = {
     rows: [
         {
-            // Contains - row with icon, attributes and rowTitleAttributes, other value, no action
+            // Contains - row with icon, attributes and titleAttributes, other value, no action
             id: 'row-id-1',
-            rowTitle: 'row title 1',
-            rowItems: [
+            title: 'row title 1',
+            itemsList: [
                 {
-                    rowTitleAttributes: {
+                    titleAttributes: {
                         a: 123,
                         b: 456,
                     },
@@ -36,10 +36,10 @@ const EXAMPLE_SUMMARY_ROWS = {
         {
             // Contains - row with error and multiple actions
             id: 'row-id-2',
-            rowTitle: 'row title 2',
+            title: 'row title 2',
             error: true,
             errorMessage: 'there are errors',
-            rowItems: [
+            itemsList: [
                 {
                     id: 'item-id-2',
                     valueList: [
@@ -69,8 +69,8 @@ const EXAMPLE_SUMMARY_ROWS = {
         {
             // Contains - row with multiple rows and multiple values
             id: 'row-id-3',
-            rowTitle: 'row title 3',
-            rowItems: [
+            title: 'row title 3',
+            itemsList: [
                 {
                     id: 'item-id-3',
                     valueList: [
@@ -95,9 +95,9 @@ const EXAMPLE_SUMMARY_ROWS = {
         {
             // Contains - row with total
             id: 'row-id-4',
-            rowTitle: 'row title 4',
+            title: 'row title 4',
             total: true,
-            rowItems: [
+            itemsList: [
                 {
                     id: 'item-id-5',
                     valueList: [
@@ -115,7 +115,7 @@ const EXAMPLE_SUMMARY_GROUPS = {
     groups: [
         {
             id: 'group-id-1',
-            groupTitle: 'group title',
+            title: 'group title',
             ...EXAMPLE_SUMMARY_ROWS,
         },
     ],
@@ -139,9 +139,9 @@ const EXAMPLE_SUMMARY_GROUPS_NO_ROWS = {
 const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
     rows: [
         {
-            rowItems: [
+            itemsList: [
                 {
-                    rowTitle: 'row item 1',
+                    title: 'row item 1',
                     valueList: [
                         {
                             text: 'list item 1',
@@ -161,7 +161,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 2',
+                    title: 'row item 2',
                     valueList: [
                         {
                             text: 'list item 2',
@@ -176,7 +176,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 3',
+                    title: 'row item 3',
                     valueList: [
                         {
                             text: 'list item 3',
@@ -193,9 +193,9 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
             ],
         },
         {
-            rowItems: [
+            itemsList: [
                 {
-                    rowTitle: 'row item 4',
+                    title: 'row item 4',
                     valueList: [
                         {
                             text: 'list item 4',
@@ -215,7 +215,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 5',
+                    title: 'row item 5',
                     valueList: [
                         {
                             text: 'list item 5',
@@ -230,7 +230,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 6',
+                    title: 'row item 6',
                     valueList: [
                         {
                             text: 'list item 6',
@@ -264,7 +264,7 @@ const EXAMPLE_SUMMARY_BASIC = {
 const EXAMPLE_SUMMARY_WITH_TITLE = {
     summaries: [
         {
-            summaryTitle: 'summary title',
+            title: 'summary title',
             ...EXAMPLE_SUMMARY_GROUPS,
         },
     ],
@@ -273,7 +273,7 @@ const EXAMPLE_SUMMARY_WITH_TITLE = {
 const EXAMPLE_SUMMARY_WITH_NO_ROWS = {
     summaries: [
         {
-            summaryTitle: 'summary title',
+            title: 'summary title',
             ...EXAMPLE_SUMMARY_GROUPS_NO_ROWS,
         },
     ],
@@ -282,21 +282,21 @@ const EXAMPLE_SUMMARY_WITH_NO_ROWS = {
 const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = {
     summaries: [
         {
-            summaryTitle: 'summary title',
+            title: 'summary title',
             groups: [
                 {
                     id: 'group-id-1',
-                    groupTitle: 'group title',
+                    title: 'group title',
                     ...EXAMPLE_SUMMARY_ROWS,
                 },
                 {
                     id: 'group-id-2',
-                    groupTitle: 'group title',
+                    title: 'group title',
                     ...EXAMPLE_SUMMARY_HOUSEHOLD_GROUP,
                 },
                 {
                     id: 'group-id-3',
-                    groupTitle: 'group title',
+                    title: 'group title',
                     ...EXAMPLE_SUMMARY_ROWS,
                 },
             ],
@@ -345,13 +345,13 @@ describe('macro: summary', () => {
                 expect($('#group-id-1').length).toBe(1);
             });
 
-            it('has the correct `groupTitle` tag', () => {
+            it('has the correct group `title` tag', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__group-title')[0].tagName).toBe('h2');
             });
 
-            it('has the `groupTitle` text', () => {
+            it('has the group `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__group-title').text()).toBe('group title');
@@ -360,7 +360,7 @@ describe('macro: summary', () => {
             it('has larger margin between groups if the top one is a household style summary', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_MULTIPLE_GROUPS));
 
-                expect($('.ons-summary__group:nth-last-of-type(2) .ons-summary__link').hasClass('ons-u-mb-xl')).toBe(true);
+                expect($('.ons-summary__group:nth-last-of-type(2) .ons-summary__link').hasClass('ons-u-mb-3xl')).toBe(true);
             });
         });
 
@@ -377,13 +377,13 @@ describe('macro: summary', () => {
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true);
             });
 
-            it('displays the `rowTitle` text', () => {
+            it('displays the row `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3');
             });
 
-            it('overrides the `rowTitle` with the `errorMessage` if provided', () => {
+            it('overrides the row `title` with the `errorMessage` if provided', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row-title--error').text()).toBe(
@@ -405,7 +405,7 @@ describe('macro: summary', () => {
                 expect($('.ons-summary__row--has-values').length).toBe(5);
             });
 
-            it('has custom `rowTitleAttributes`', () => {
+            it('has custom row `titleAttributes`', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__item-title').attr('a')).toBe('123');
@@ -414,7 +414,7 @@ describe('macro: summary', () => {
         });
 
         describe('part: item title', () => {
-            it('displays the `rowTitle` text', () => {
+            it('displays the row `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text').text().trim()).toBe(
@@ -562,7 +562,7 @@ describe('macro: summary', () => {
             expect(results).toHaveNoViolations();
         });
 
-        it('displays the `summaryTitle`', () => {
+        it('displays the summary `title`', () => {
             const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
 
             expect($('.ons-summary__title').text()).toBe('summary title');
@@ -593,7 +593,7 @@ describe('macro: summary', () => {
             expect($('.ons-summary').hasClass('ons-summary--hub')).toBe(true);
         });
 
-        it('has the value rendered after the `rowTitle` that shows on mobile', () => {
+        it('has the value rendered after the row `title` that shows on mobile', () => {
             const $ = cheerio.load(
                 renderComponent('summary', {
                     ...EXAMPLE_SUMMARY_BASIC,

package/components/summary/_summary.scss

@@ -24,8 +24,6 @@ $hub-row-spacing: 1.3rem;
     }
 
     &__item {
-        line-height: 1.4;
-
         &:not(:last-child),
         &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
             border-bottom: 1px solid var(--ons-color-borders);
@@ -92,7 +90,7 @@ $hub-row-spacing: 1.3rem;
         background: var(--ons-color-black);
         display: inline-block;
         height: 1.15rem;
-        margin: 0.18rem 0.25rem 0;
+        margin: 0.25rem 0.25rem 0;
         vertical-align: middle;
         width: 1px;
     }
@@ -148,7 +146,7 @@ $hub-row-spacing: 1.3rem;
     }
 
     // Breakpoints
-    @include mq(xxs, m, none, '<') {
+    @include mq('2xs', m, none, '<') {
         &__item-title,
         &__values,
         &__actions {