@ons/design-system 74.0.0-next.1 → 74.0.0-next.11

package/components/list/_list.scss

@@ -3,6 +3,8 @@
     padding: 0 0 0 1.5rem;
 
     &__item {
+        @include reading-width;
+
         &:first-child {
             margin-top: 0.5rem;
         }
@@ -109,14 +111,17 @@
 }
 
 @include bp-suffix('ons-list--inline') {
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
     &:not(.ons-list--icons) {
         margin: 0 1rem 0 0;
         .ons-list__item {
+            max-width: none;
             display: inline-block;
             margin: 0 1rem 0 0;
         }
     }
 
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
     &.ons-list--icons {
         align-items: center;
         display: flex;

package/components/list/_macro.njk

@@ -79,6 +79,7 @@
                         href="{{ item.url }}"
                         class="ons-list__link{{ ' ons-js-inpagelink' if item.variants == 'inPageLink' }}{{ ' ' + item.classes if item.classes else '' }}"
                         {% if item.target %}target="{{ item.target }}"{% endif %}
+                        {% if item.download %}download="{{ item.download}}"{% endif %}
                     >
                         {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
                         {%- if item.target == "_blank" -%}

package/components/list/_macro.spec.js

@@ -376,6 +376,22 @@ describe('macro: list', () => {
                 expect($('.ons-list__link').hasClass('another-extra-class')).toBe(true);
             });
 
+            it('has the provided `download` attribute', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/example.csv',
+                                download: 'file',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link').attr('download')).toBe('file');
+            });
+
             it('has the provided `target` attribute', () => {
                 const $ = cheerio.load(
                     renderComponent('list', {

package/components/message-list/_message-list.scss

@@ -16,6 +16,8 @@
     }
 
     &__metadata {
+        @include reading-width;
+
         margin: 0 0 1rem;
 
         &-term,

package/components/panel/_macro.njk

@@ -62,7 +62,7 @@
                 {% set closingTag = "</" ~ titleTag ~ ">" %}
                 <div class="ons-panel__header">
                     {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
-                    class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}
+                    class="ons-panel__title ons-u-fs-r--b ons-u-reading-width">{{ params.title | safe }}{{ closingTag | safe }}
                 </div>
             {% else %}
                 {% if not params.variant or params.variant == "branded" or params.variant == "info" or params.variant == "bare" %}

package/components/panel/_panel.scss

@@ -112,6 +112,14 @@
                 margin: 0;
             }
         }
+
+        // Restrict the width of textual content within the panel body (paragraphs are already globally restricted)
+        ul,
+        ol,
+        label,
+        legend {
+            @include reading-width;
+        }
     }
 
     &__error {

package/components/panel/example-panel-bare.njk

@@ -6,5 +6,5 @@
         "iconType": 'lock'
     })
 %}
-    Here is some text with an icon
+    <p>Here is some text with an icon</p>
 {% endcall %}

package/components/phase-banner/_phase-banner.scss

@@ -15,5 +15,6 @@
 
     &__desc {
         margin-top: 0.25rem;
+        @include no-reading-width;
     }
 }

package/components/question/example-question-ccs.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",

package/components/question/example-question-fieldset.njk

@@ -24,7 +24,7 @@ layout: ~
 %}
 {% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": questionTitle,

package/components/question/example-question-interviewer-note.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "<mark>Interviewer note:</mark>Who to interview",

package/components/question/example-question-no-fieldset.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",

package/components/quote/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsQuote(params) %}
-    <blockquote class="ons-quote">
+    <blockquote class="ons-quote ons-u-reading-width">
         {% from "components/icon/_macro.njk" import onsIcon %}
         {{-
             onsIcon({

package/components/relationships/example-relationships-error.njk

@@ -25,7 +25,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
 
     {%
         call onsPanel({

package/components/relationships/example-relationships-you.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "Joe Bloggs is your <strong>…</strong>",

package/components/relationships/example-relationships.njk

@@ -23,7 +23,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsQuestion({
             "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",

package/components/skip-to-content/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSkipToContent(params) %}
     <div role="region">
         {% set text = params.text | default('Skip to content') %}
-        <a class="ons-skip-to-content ons-u-fs-r--b" href="{{ params.url }}">{{ text }}</a>
+        <a class="ons-skip-to-content ons-u-fs-r--b" href="{{ params.url }}"><span class="ons-skip-to-content__text">{{ text }}</span></a>
     </div>
 {% endmacro %}

package/components/skip-to-content/_skip.scss

@@ -1,4 +1,5 @@
 .ons-skip-to-content {
+    /* stylelint-disable-next-line property-no-deprecated */
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     display: block;
@@ -13,6 +14,7 @@
     &:focus {
         background-color: var(--ons-color-focus);
         box-shadow: 0;
+        /* stylelint-disable-next-line property-no-deprecated */
         clip: auto;
         clip-path: none;
         color: var(--ons-color-text-link-focus);
@@ -28,4 +30,10 @@
         white-space: inherit;
         width: auto;
     }
+
+    &__text {
+        // Reading width max-width is hard-coded as skip to content sits outside the `ons-container` class
+        max-width: $reading-width;
+        display: block;
+    }
 }

package/components/table/_macro.njk

@@ -1,121 +1,148 @@
 {% macro onsTable(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icon/_macro.njk" import onsIcon %}
+    {% from "components/figure/_macro.njk" import onsFigure %}
     {% set variants = params.variants if params.variants %}
 
-    <div class="ons-table-scrollable ons-table-scrollable--on">
-        <div
-            class="ons-table-scrollable__content"
-            tabindex="0"
-            role="region"
-            aria-label="{{ params.caption }}. {{ params.ariaLabel | default('Scrollable table') }}"
-        >
-            {# Uses multiple loops to set the rowspan class so that it can work in both nunjucks and jinja2 environments due to the scoping rules of each language #}
-            <table
-                {% if params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% for row in params.thList %}{% for th in row.ths %}{% if th.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% for row in params.trs %}{% for td in row.tds %}{% if td.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
-                {% if params.sortBy and 'sortable' in variants %}
-                    data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
-                {% endif %}
+    {%
+        call onsFigure({
+            "useDivForRootElement": true,
+            "id": params.id,
+            "headingLevel": params.headingLevel,
+            "figureNumber": params.figureNumber,
+            "title": params.title,
+            "subtitle": params.subtitle,
+            "footnotes": params.footnotes,
+            "download": params.download,
+            "caption": params.sourceNote
+        })
+    %}
+        {% set tableClasses = "ons-table" %}
+
+        {# If there is no source note, footnotes or downloads after the table, add a bottom margin to the table to match the previous spacing #}
+        {# If there source note, footnotes or downloads after the table, the figure component handles the extra spacing #}
+        {% if not params.sourceNote and not params.footnotes and not params.download %}
+            {% set tableClasses = tableClasses + " ons-table--bottom-space" %}
+        {% endif %}
+
+        {% if params.tableClasses %}
+            {% set tableClasses = tableClasses + " " + params.tableClasses %}
+        {% endif %}
+
+        <div class="ons-table-scrollable ons-table-scrollable--on">
+            <div
+                class="ons-table-scrollable__content"
+                tabindex="0"
+                role="region"
+                {% if params.ariaLabel %}aria-label="{{ params.ariaLabel }}"{% endif %}
             >
-                {% if params.caption %}
-                    <caption class="ons-table__caption{{ ' ons-u-vh' if params.hideCaption }}">
-                        {{ params.caption }}
-                    </caption>
-                {% endif %}
-                <thead class="ons-table__head">
-                    {# Uses thList if multiple-row headers, otherwise wrap single ths array into a default group #}
-                    {% if params.thList %}
-                        {% set thGroups = params.thList %}
-                    {% else %}
-                        {% set thGroups = [ { "ths": params.ths } ] %}
+                {# Uses multiple loops to set the rowspan class so that it can work in both nunjucks and jinja2 environments due to the scoping rules of each language #}
+                <table
+                    class="{{ tableClasses }}{% for row in params.thList %}{% for th in row.ths %}{% if th.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% for row in params.trs %}{% for td in row.tds %}{% if td.rowspan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% endfor %}{% endfor %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
+                    {% if params.sortBy and 'sortable' in variants %}
+                        data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
                     {% endif %}
-                    {% for headerCols in thGroups %}
-                        <tr class="ons-table__row">
-                            {% for th in headerCols.ths %}
-                                <th
-                                    scope="col"
-                                    class="ons-table__header  ons-table__header--{{ th.valign | default('top') }}{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
-                                    {% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
-                                    {% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
-                                    {% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
-                                    {% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
-                                >
-                                    <span class="ons-table__header-text">{{ th.value | safe }}</span>
-                                    {% if 'sortable' in variants %}
-                                        {{-
-                                            onsIcon({
-                                                "iconType": "sort-sprite",
-                                                "id": th.value | replace(' ', '-'),
-                                                "classes": 'ons-u-d-no'
-                                            })
-                                        -}}
-                                    {% endif %}
-                                </th>
-                            {% endfor %}
-                        </tr>
-                    {% endfor %}
-                </thead>
-                <tbody class="ons-table__body">
-                    {% for tr in params.trs %}
-                        <tr
-                            class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}"
-                            {% if tr.id %}id="{{ tr.id }}"{% endif %}
-                        >
-                            {% for td in tr.tds %}
-                                {% if td.heading == true %}
-                                    {% set openingTag = '<th' %}
-                                    {% set closingTag = '</th>' %}
-                                {% else %}
-                                    {% set openingTag = '<td' %}
-                                    {% set closingTag = '</td>' %}
-                                {% endif %}
-                                {% set isFirstRow = loop.index == 0 and td.rowspan %}
-                                {% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
-                                {{ openingTag | safe }}
-                                class="ons-table__cell
-                                ons-table__cell--{{ td.valign | default('top') }}{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
-                                {% if td.id %}id="{{ td.id }}"{% endif %}
-                                {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
-                                {% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
-                                {% if td.rowspan %}rowspan="{{ td.rowspan }}"{% endif %}
-                                {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
-                                {% if td.heading %}scope="row"{% endif %}
-                                >
-                                {% if td.form %}
-                                    <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
-                                        {{ onsButton(td.form.button) }}
-                                        {% if td.form.hiddenFormField %}
-                                            {% for hiddenField in td.form.hiddenFormField %}
-                                                <input
-                                                    type="hidden"
-                                                    {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
-                                                    {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
-                                                />
-                                            {% endfor %}
+                >
+                    {# Note that the caption is rendered inside the table element to be semantically correct, and we deliberately do not render it with the onsFigure caption option. We also have the option to visually hide it for the table. #}
+                    {% if params.caption %}
+                        <caption class="ons-table__caption{{ ' ons-u-vh' if params.hideCaption }}">
+                            {{ params.caption }}
+                        </caption>
+                    {% endif %}
+                    <thead class="ons-table__head">
+                        {# Uses thList if multiple-row headers, otherwise wrap single ths array into a default group #}
+                        {% if params.thList %}
+                            {% set thGroups = params.thList %}
+                        {% else %}
+                            {% set thGroups = [ { "ths": params.ths } ] %}
+                        {% endif %}
+                        {% for headerCols in thGroups %}
+                            <tr class="ons-table__row">
+                                {% for th in headerCols.ths %}
+                                    <th
+                                        scope="col"
+                                        class="ons-table__header  ons-table__header--{{ th.valign | default('top') }}{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
+                                        {% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
+                                        {% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
+                                        {% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
+                                        {% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
+                                    >
+                                        <span class="ons-table__header-text">{{ th.value | safe }}</span>
+                                        {% if 'sortable' in variants %}
+                                            {{-
+                                                onsIcon({
+                                                    "iconType": "sort-sprite",
+                                                    "id": th.value | replace(' ', '-'),
+                                                    "classes": 'ons-u-d-no'
+                                                })
+                                            -}}
                                         {% endif %}
-                                    </form>
-                                {% endif %}
-                                {% if td.value %}
-                                    {{ td.value | safe }}
-                                {% endif %}
-                                {{ closingTag | safe }}
-                            {% endfor %}
-                        </tr>
-                    {% endfor %}
-                </tbody>
-                {% if params.tfoot %}
-                    <tfoot class="ons-table__foot">
-                        <tr class="ons-table__row">
-                            {% for tfootCell in params.tfoot %}
-                                <td class="ons-table__cell ons-table__cell--{{ tfootCell.valign | default('top') }} ons-u-fs-s">
-                                    {{ tfootCell.value }}
-                                </td>
-                            {% endfor %}
-                        </tr>
-                    </tfoot>
-                {% endif %}
-            </table>
+                                    </th>
+                                {% endfor %}
+                            </tr>
+                        {% endfor %}
+                    </thead>
+                    <tbody class="ons-table__body">
+                        {% for tr in params.trs %}
+                            <tr
+                                class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}"
+                                {% if tr.id %}id="{{ tr.id }}"{% endif %}
+                            >
+                                {% for td in tr.tds %}
+                                    {% if td.heading == true %}
+                                        {% set openingTag = '<th' %}
+                                        {% set closingTag = '</th>' %}
+                                    {% else %}
+                                        {% set openingTag = '<td' %}
+                                        {% set closingTag = '</td>' %}
+                                    {% endif %}
+                                    {% set isFirstRow = loop.index == 0 and td.rowspan %}
+                                    {% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
+                                    {{ openingTag | safe }}
+                                    class="ons-table__cell
+                                    ons-table__cell--{{ td.valign | default('top') }}{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
+                                    {% if td.id %}id="{{ td.id }}"{% endif %}
+                                    {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
+                                    {% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
+                                    {% if td.rowspan %}rowspan="{{ td.rowspan }}"{% endif %}
+                                    {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
+                                    {% if td.heading %}scope="row"{% endif %}
+                                    >
+                                    {% if td.form %}
+                                        <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
+                                            {{ onsButton(td.form.button) }}
+                                            {% if td.form.hiddenFormField %}
+                                                {% for hiddenField in td.form.hiddenFormField %}
+                                                    <input
+                                                        type="hidden"
+                                                        {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
+                                                        {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
+                                                    />
+                                                {% endfor %}
+                                            {% endif %}
+                                        </form>
+                                    {% endif %}
+                                    {% if td.value %}
+                                        {{ td.value | safe }}
+                                    {% endif %}
+                                    {{ closingTag | safe }}
+                                {% endfor %}
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                    {% if params.tfoot %}
+                        <tfoot class="ons-table__foot">
+                            <tr class="ons-table__row">
+                                {% for tfootCell in params.tfoot %}
+                                    <td class="ons-table__cell ons-table__cell--{{ tfootCell.valign | default('top') }} ons-u-fs-s">
+                                        {{ tfootCell.value }}
+                                    </td>
+                                {% endfor %}
+                            </tr>
+                        </tfoot>
+                    {% endif %}
+                </table>
+            </div>
         </div>
-    </div>
+    {% endcall %}
 {% endmacro %}