@ons/design-system 72.10.8 → 72.10.10

package/components/table/_macro.njk

@@ -19,120 +19,115 @@
         {% endfor %}
     {% endfor %}
 
-    {% set table %}
-        <table
-            {% if params.id %}id="{{ params.id }}"{% endif %}
-            class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if hasRowSpan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% 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 %}
+    <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') }}"
         >
-            {% 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 } ] %}
+            <table
+                {% if params.id %}id="{{ params.id }}"{% endif %}
+                class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if hasRowSpan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% 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{{ ' ' + 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{{ ' ' + 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-u-fs-s">{{ tfootCell.value }}</td>
-                        {% endfor %}
-                    </tr>
-                </tfoot>
-            {% endif %}
-        </table>
-    {% endset %}
-
-    {% if 'scrollable' in 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') }}"
             >
-                {{ table | safe }}
-            </div>
+                {% 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{{ ' ' + 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{{ ' ' + 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-u-fs-s">{{ tfootCell.value }}</td>
+                            {% endfor %}
+                        </tr>
+                    </tfoot>
+                {% endif %}
+            </table>
         </div>
-    {% else %}
-        {{ table | safe }}
-    {% endif %}
+    </div>
 {% endmacro %}

package/components/table/_macro.spec.js

@@ -55,6 +55,41 @@ describe('macro: table', () => {
         expect($('.ons-table').hasClass('another-extra-class')).toBe(true);
     });
 
+    it('renders "scrollable" container element', () => {
+        const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+        expect($('.ons-table-scrollable').length).toBe(1);
+    });
+
+    it('renders "content" container element', () => {
+        const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+        expect($('.ons-table-scrollable__content').length).toBe(1);
+    });
+
+    it('renders an appropriate `aria-label` attribute on the "content" container element', () => {
+        const $ = cheerio.load(
+            renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                caption: 'Example table caption',
+            }),
+        );
+
+        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Scrollable table');
+    });
+
+    it('renders a custom `aria-label` attribute on the "content" container element', () => {
+        const $ = cheerio.load(
+            renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                caption: 'Example table caption',
+                ariaLabel: 'Special table',
+            }),
+        );
+
+        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
+    });
+
     describe('header row', () => {
         it('renders header cells with expected text', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -496,50 +531,6 @@ describe('macro: table', () => {
         });
     });
 
-    describe('scrollable variant', () => {
-        const params = {
-            ...EXAMPLE_TABLE,
-            variants: ['scrollable'],
-            caption: 'Example table caption',
-        };
-
-        it('has the "scrollable" variant class', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table').hasClass('ons-table--scrollable')).toBe(true);
-        });
-
-        it('renders "scrollable" container element', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table-scrollable').length).toBe(1);
-            expect($('.ons-table-scrollable--on').length).toBe(1);
-        });
-
-        it('renders "content" container element', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table-scrollable__content').length).toBe(1);
-        });
-
-        it('renders an appropriate `aria-label` attribute on the "content" container element', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Scrollable table');
-        });
-
-        it('renders a custom `aria-label` attribute on the "content" container element', () => {
-            const $ = cheerio.load(
-                renderComponent('table', {
-                    ...params,
-                    ariaLabel: 'Special table',
-                }),
-            );
-
-            expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
-        });
-    });
-
     describe('sortable variant', () => {
         const params = {
             ...EXAMPLE_TABLE,

package/components/table/_table.scss

@@ -116,12 +116,6 @@
             background: var(--ons-color-grey-75);
             border-radius: 20px;
         }
-        &--on {
-            .ons-table__header,
-            .ons-table__cell {
-                white-space: nowrap;
-            }
-        }
         &__content {
             overflow: visible;
             overflow-x: auto;
@@ -134,12 +128,6 @@
                 outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
                 outline-offset: 1px;
             }
-            .ons-table__header,
-            .ons-table__cell {
-                @include mq('2xs', m) {
-                    white-space: nowrap;
-                }
-            }
             .ons-table__right-shadow,
             .ons-table__left-shadow {
                 height: 100%;

package/components/table/example-table-sortable.njk

@@ -3,7 +3,7 @@
 {{
     onsTable({
         "variants": 'sortable',
-        "caption": "Javascript enhanced sortable table",
+        "caption": "JavaScript enhanced sortable table",
         "sortBy": "Sort by",
         "ariaAsc": "ascending",
         "ariaDesc": "descending",

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

@@ -127,7 +127,7 @@
                         <p>estimates to meet this level of quality</p>
                         <p>year after year</p>
                         <p>to find out more about the dynamic</p>
-                        <p>population model visit the ons website</p>
+                        <p>population model visit the ONS website</p>
                     </div>"
                 },
                 {

package/components/textarea/_macro.njk

@@ -9,6 +9,7 @@
         {% if params.label %}
             {{
                 onsLabel({
+                    "id": params.id ~ "-label",
                     "for": params.id,
                     "text": params.label.text,
                     "description": params.label.description,

package/components/textarea/_macro.spec.js

@@ -178,6 +178,7 @@ describe('macro: textarea', () => {
         faker.renderComponent('textarea', EXAMPLE_TEXTAREA);
 
         expect(labelSpy.occurrences).toContainEqual({
+            id: 'example-id-label',
             for: 'example-id',
             text: 'Please provide some feedback',
             description: 'For example, describe any difficulties you experienced in the use of this service',

package/components/timeout-panel/timeout-panel.spec.js

@@ -137,7 +137,7 @@ describe('script: timeout panel', () => {
         });
     });
 
-    describe('when Javascript is disabled', () => {
+    describe('when JavaScript is disabled', () => {
         beforeEach(async () => {
             const expiryTime = new Date(Date.now() + 1 * 1000);
             const expiryTimeInISOFormat = new Date(expiryTime).toISOString();

package/components/video/video.js

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 export default class Video {
     constructor(component) {
         this.component = component;
@@ -30,6 +31,7 @@ export default class Video {
     }
     addDNTtoVimeoVideos() {
         let src = this.iframe.getAttribute('data-src');
+        src = DOMPurify.sanitize(src);
         if (src.includes('player.vimeo.com/video') && src.includes('?dnt=1') === false) {
             src += '?dnt=1';
             return src;