@ons/design-system 74.0.0-next.6 → 74.0.0-next.7

package/components/image/_macro.njk

@@ -1,17 +1,28 @@
 {%- macro onsImage(params) -%}
-    <figure class="ons-image">
-        {% if params.image %}
-            <img
-                class="ons-image__img"
-                {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}"
-                alt="{{ params.alt if params.alt }}"
-            />
-        {% else %}
-            <img class="ons-image__img" src="{{ params.src }}" alt="{{ params.alt }}" />
-        {% endif %}
+    {% from "components/figure/_macro.njk" import onsFigure %}
 
-        {% if params.caption %}
-            <figcaption class="ons-image__caption">{{ params.caption }}</figcaption>
-        {% endif %}
-    </figure>
+    {%
+        call onsFigure({
+            "id": params.id,
+            "headingLevel": params.headingLevel,
+            "figureNumber": params.figureNumber,
+            "title": params.title,
+            "subtitle": params.subtitle,
+            "caption": params.caption,
+            "footnotes": params.footnotes,
+            "download": params.download
+        })
+    %}
+        <div class="ons-image">
+            {% if params.image %}
+                <img
+                    class="ons-image__img"
+                    {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}"
+                    alt="{{ params.alt if params.alt }}"
+                />
+            {% else %}
+                <img class="ons-image__img" src="{{ params.src }}" alt="{{ params.alt }}" />
+            {% endif %}
+        </div>
+    {% endcall %}
 {%- endmacro -%}

package/components/image/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent } from '../../tests/helpers/rendering';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_IMAGE_SRC_URL_MINIMAL = {
     src: 'example.png',
@@ -17,13 +17,14 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
 };
 
 describe('macro: image', () => {
-    it('outputs a `figure` element', () => {
+    it('outputs a `figure` element wrapping the image', () => {
         const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_SRC_URL_MINIMAL));
 
-        expect($('.ons-image')[0].tagName).toBe('figure');
+        expect($('.ons-figure')[0].tagName).toBe('figure');
+        expect($('.ons-figure .ons-image').length).toBe(1);
     });
 
-    it('outputs a `figurecaption` element when `caption` is provided', () => {
+    it('outputs a `figcaption` element when `caption` is provided', () => {
         const $ = cheerio.load(
             renderComponent('image', {
                 ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
@@ -31,10 +32,10 @@ describe('macro: image', () => {
             }),
         );
 
-        expect($('.ons-image__caption')[0].tagName).toBe('figcaption');
+        expect($('.ons-figure__caption')[0].tagName).toBe('figcaption');
     });
 
-    it('outputs a `figurecaption` element with provided `caption` text', () => {
+    it('outputs a `figcaption` element with provided `caption` text', () => {
         const $ = cheerio.load(
             renderComponent('image', {
                 ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
@@ -42,7 +43,121 @@ describe('macro: image', () => {
             }),
         );
 
-        expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
+        expect($('.ons-figure__caption').text().trim()).toBe('Example image caption');
+    });
+
+    describe('figure params', () => {
+        it('passes `id` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                id: 'my-image',
+            });
+
+            expect(figureSpy.occurrences[0].id).toBe('my-image');
+        });
+
+        it('passes `headingLevel` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                headingLevel: 4,
+            });
+
+            expect(figureSpy.occurrences[0].headingLevel).toBe(4);
+        });
+
+        it('passes `figureNumber` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                figureNumber: 'Image 1',
+            });
+
+            expect(figureSpy.occurrences[0].figureNumber).toBe('Image 1');
+        });
+
+        it('passes `title` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                title: 'Image title',
+            });
+
+            expect(figureSpy.occurrences[0].title).toBe('Image title');
+        });
+
+        it('passes `subtitle` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                subtitle: 'Image subtitle',
+            });
+
+            expect(figureSpy.occurrences[0].subtitle).toBe('Image subtitle');
+        });
+
+        it('passes `caption` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                caption: 'A caption',
+            });
+
+            expect(figureSpy.occurrences[0].caption).toBe('A caption');
+        });
+
+        it('passes `footnotes` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            const footnotes = {
+                title: 'Footnotes',
+                content: 'Some notes about this image.',
+            };
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                footnotes,
+            });
+
+            expect(figureSpy.occurrences[0].footnotes).toEqual(footnotes);
+        });
+
+        it('passes `download` to the figure component', () => {
+            const faker = templateFaker();
+            const figureSpy = faker.spy('figure');
+
+            const download = {
+                title: 'Download this image',
+                itemsList: [
+                    {
+                        text: 'High resolution image (JPG, 1.2MB)',
+                        url: '/img/example.jpg',
+                        download: 'file',
+                    },
+                ],
+            };
+
+            faker.renderComponent('image', {
+                ...EXAMPLE_IMAGE_SRC_URL_MINIMAL,
+                download,
+            });
+
+            expect(figureSpy.occurrences[0].download).toEqual(download);
+        });
     });
 
     describe('mode: src', () => {

package/components/image/example-image-with-figure-fields.njk

@@ -0,0 +1,25 @@
+{% from "components/image/_macro.njk" import onsImage %}
+{{
+    onsImage({
+        "id": "image-with-extra-fields",
+        "src": '/img/small/woman-in-purple-dress-shirt.jpg',
+        "alt": 'Woman in a purple dress shirt using a laptop',
+        "title": "Image 1: Working from home",
+        "subtitle": "A growing proportion of the workforce now works remotely",
+        "caption": "Image 1 - Woman in a purple dress shirt using a laptop",
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "Image is for illustrative purposes only."
+        },
+        "download": {
+            "title": "Download this image",
+            "itemsList": [
+                {
+                    "text": "High resolution image (JPG format, 1.2MB)",
+                    "url": "/img/small/woman-in-purple-dress-shirt.jpg",
+                    "download": "file"
+                }
+            ]
+        }
+    })
+}}

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/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"
-            {% if params.ariaLabel %}aria-label="{{ params.ariaLabel }}"{% endif %}
-        >
-            {# 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 %}