@ons/design-system 70.0.7 → 70.0.9

package/components/details/details.spec.js

@@ -1,135 +1,135 @@
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_DETAILS_BASIC = {
-  id: 'details-id',
-  title: 'Title for details',
-  content: 'Content for details',
-};
-
-const EXAMPLE_PAGE = `
-  ${renderComponent('details', {
     id: 'details-id',
     title: 'Title for details',
     content: 'Content for details',
-  })}
+};
 
-  ${renderComponent('details', {
-    id: 'details-id-2',
-    title: 'Title for details',
-    content: 'Content for details',
-  })}
+const EXAMPLE_PAGE = `
+    ${renderComponent('details', {
+        id: 'details-id',
+        title: 'Title for details',
+        content: 'Content for details',
+    })}
+
+    ${renderComponent('details', {
+        id: 'details-id-2',
+        title: 'Title for details',
+        content: 'Content for details',
+    })}
 `;
 
 const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
 
 describe('script: details', () => {
-  it('begins open when specified', async () => {
-    await setTestPage(
-      '/test',
-      renderComponent('details', {
-        ...EXAMPLE_DETAILS_BASIC,
-        open: true,
-      }),
-    );
-
-    const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
-    expect(detailsOpenClass).toBe(true);
-  });
-
-  describe('when the details heading is clicked to open the details', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
-      await page.click('.ons-js-details-heading');
-    });
-
-    it('sets the `open` attribute and adds the correct class', async () => {
-      const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+    it('begins open when specified', async () => {
+        await setTestPage(
+            '/test',
+            renderComponent('details', {
+                ...EXAMPLE_DETAILS_BASIC,
+                open: true,
+            }),
+        );
 
-      expect(detailsOpenClass).toBe(true);
+        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+        expect(detailsOpenClass).toBe(true);
     });
 
-    it('sets the `ga` attributes', async () => {
-      const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', (element) => element.getAttribute('data-ga-action'));
-
-      expect(gaHeadingAttribute).toBe('Open panel');
-    });
-  });
+    describe('when the details heading is clicked to open the details', () => {
+        beforeEach(async () => {
+            await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
+            await page.click('.ons-js-details-heading');
+        });
 
-  describe('when there is more than one details component and a details heading is clicked to open the details', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
-      await page.click('#details-id > .ons-js-details-heading');
-    });
+        it('sets the `open` attribute and adds the correct class', async () => {
+            const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
 
-    it('sets the `open` attribute and open class on the right component', async () => {
-      const detailsOpenClass = await page.$eval('#details-id', (node) => node.classList.contains('ons-details--open'));
-      const detailsOpenClass2 = await page.$eval('#details-id-2', (node) => node.classList.contains('ons-details--open'));
+            expect(detailsOpenClass).toBe(true);
+        });
 
-      expect(detailsOpenClass).toBe(true);
-      expect(detailsOpenClass2).toBe(false);
-    });
-  });
+        it('sets the `ga` attributes', async () => {
+            const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', (element) => element.getAttribute('data-ga-action'));
 
-  describe('when the details heading is focused', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
-      await page.focus('.ons-js-details-heading');
+            expect(gaHeadingAttribute).toBe('Open panel');
+        });
     });
 
-    describe('when the space bar is pressed', () => {
-      beforeEach(async () => {
-        await page.keyboard.press('Space');
-      });
-
-      it('opens the details content', async () => {
-        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
-        expect(detailsOpenClass).toBe(true);
-      });
-    });
+    describe('when there is more than one details component and a details heading is clicked to open the details', () => {
+        beforeEach(async () => {
+            await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
+            await page.click('#details-id > .ons-js-details-heading');
+        });
 
-    describe('when the Enter key is pressed', () => {
-      beforeEach(async () => {
-        await page.keyboard.press('Enter');
-      });
+        it('sets the `open` attribute and open class on the right component', async () => {
+            const detailsOpenClass = await page.$eval('#details-id', (node) => node.classList.contains('ons-details--open'));
+            const detailsOpenClass2 = await page.$eval('#details-id-2', (node) => node.classList.contains('ons-details--open'));
 
-      it('opens the details content', async () => {
-        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
-        expect(detailsOpenClass).toBe(true);
-      });
+            expect(detailsOpenClass).toBe(true);
+            expect(detailsOpenClass2).toBe(false);
+        });
     });
-  });
-
-  describe('when the state is set to save', () => {
-    beforeEach(async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('details', {
-          ...EXAMPLE_DETAILS_BASIC,
-          saveState: true,
-        }),
-      );
-    });
-
-    describe('when the details is opened', () => {
-      beforeEach(async () => {
-        await page.click('.ons-js-details-heading');
-      });
 
-      it('sets state in localStorage', async () => {
-        const localStorage = await page.evaluate(() => localStorage.getItem('details-id'));
-        expect(localStorage).toBe('true');
-      });
+    describe('when the details heading is focused', () => {
+        beforeEach(async () => {
+            await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
+            await page.focus('.ons-js-details-heading');
+        });
+
+        describe('when the space bar is pressed', () => {
+            beforeEach(async () => {
+                await page.keyboard.press('Space');
+            });
+
+            it('opens the details content', async () => {
+                const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+                expect(detailsOpenClass).toBe(true);
+            });
+        });
+
+        describe('when the Enter key is pressed', () => {
+            beforeEach(async () => {
+                await page.keyboard.press('Enter');
+            });
+
+            it('opens the details content', async () => {
+                const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+                expect(detailsOpenClass).toBe(true);
+            });
+        });
     });
 
-    describe('when the details is closed', () => {
-      beforeEach(async () => {
-        await page.click('.ons-js-details-heading');
-      });
-
-      it('removes state in localStorage', async () => {
-        const localStorage = await page.evaluate(() => localStorage.getItem('details-id'));
-        expect(localStorage).toBe(null);
-      });
+    describe('when the state is set to save', () => {
+        beforeEach(async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('details', {
+                    ...EXAMPLE_DETAILS_BASIC,
+                    saveState: true,
+                }),
+            );
+        });
+
+        describe('when the details is opened', () => {
+            beforeEach(async () => {
+                await page.click('.ons-js-details-heading');
+            });
+
+            it('sets state in localStorage', async () => {
+                const localStorage = await page.evaluate(() => localStorage.getItem('details-id'));
+                expect(localStorage).toBe('true');
+            });
+        });
+
+        describe('when the details is closed', () => {
+            beforeEach(async () => {
+                await page.click('.ons-js-details-heading');
+            });
+
+            it('removes state in localStorage', async () => {
+                const localStorage = await page.evaluate(() => localStorage.getItem('details-id'));
+                expect(localStorage).toBe(null);
+            });
+        });
     });
-  });
 });

package/components/details/example-details-with-warning.njk

@@ -1,16 +1,21 @@
 {% from "components/details/_macro.njk" import onsDetails %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsDetails({
-    "id": "details-example-with-warning",
-    "title": "Need to answer separately from your household?"
-}) %}
-
-    <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start a separate survey.</p>
-    {% call onsPanel({
-        "variant": "warn"
-    }) %}
+{%
+    call onsDetails({
+        "id": "details-example-with-warning",
+        "title": "Need to answer separately from your household?"
+    })
+%}
+    <p>
+        If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start
+        a separate survey.
+    </p>
+    {%
+        call onsPanel({
+            "variant": "warn"
+        })
+    %}
         Someone in your household must still complete a survey using a household access code
     {% endcall %}
-
 {% endcall %}

package/components/document-list/_macro.njk

@@ -1,110 +1,119 @@
 {% macro onsDocumentList(params) %}
-    <ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+    <ul
+        {% if params.id %}id="{{ params.id }}"{% endif %}class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+    >
         {% for document in params.documents %}
-
-        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-
-            {% if document.featured and document.fullWidth == true %}
-
-                <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">
-
-            {% endif %}
-
-                    {% if document.thumbnail %}
-
-                        <div class="ons-document-list__item-image{%- if document.metadata.file %} ons-document-list__item-image--file{% endif %}" aria-hidden="true">
-                            <a class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}" href="{{ document.url }}" tabindex="-1">
-                                {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
-                                    <img srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x" src="{{ document.thumbnail.smallSrc }}" alt="" loading="lazy">
-                                {% endif %}
-                            </a>
-                        </div>
-
-                    {% endif %}
-
-                    <div class="ons-document-list__item-content">
-
-                        <div class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}">
-
-                            {% set titleTag = params.titleTag | default("h2") %}
-
-                            <{{ titleTag }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
-                                <a href="{{ document.url }}">{{ document.title }}
-                                {%- if document.metadata and document.metadata.file %}
+            {% set titleTag = params.titleTag | default("h2") %}
+            {% set openingTag = "<" + titleTag %}
+            {% set closingTag = "</" + titleTag + ">" %}
+            {% set documentItem %}
+                {% if document.thumbnail %}
+                    <div
+                        class="ons-document-list__item-image{{ ' ons-document-list__item-image--file' if document.metadata.file }}"
+                        aria-hidden="true"
+                    >
+                        <a
+                            class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
+                            href="{{ document.url }}"
+                            tabindex="-1"
+                        >
+                            {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
+                                <img
+                                    srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
+                                    src="{{ document.thumbnail.smallSrc }}"
+                                    alt=""
+                                    loading="lazy"
+                                />
+                            {% endif %}
+                        </a>
+                    </div>
+                {% endif %}
+
+                <div class="ons-document-list__item-content">
+                    <div
+                        class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}"
+                    >
+                        {{ openingTag | safe }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
+                        <a href="{{ document.url }}"
+                            >{{ document.title }}
+                            {%- if document.metadata and document.metadata.file -%}
                                 <span class="ons-u-vh">
-                                    {% set fileMetadataItems = [
+                                    {%
+                                        set fileMetadataItems = [
                                         document.metadata.file.fileType + ' document download' if document.metadata.file.fileType,
                                         document.metadata.file.fileSize if document.metadata.file.fileSize,
                                         document.metadata.file.filePages if document.metadata.file.filePages ]
                                     %}
-
                                     , {{ fileMetadataItems | join(', ') }}
-
+                                </span>
+                            {% endif %}
+                        </a>
+                        {{ closingTag | safe }}
+
+                        {%- if document.metadata -%}
+                            <ul class="ons-document-list__item-metadata{{ ' ons-u-mb-xs' if document.description else ' ons-u-mb-no' }}">
+                                {%- if document.metadata.date -%}
+                                    <li class="ons-document-list__item-attribute">
+                                        {% set prefixClass = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
+                                        <span class="{{ prefixClass }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
+                                        {%- if document.metadata.date.iso -%}
+                                            <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
+                                        {%- endif -%}
+                                    </li>
                                 {% endif %}
 
-                                </span></a>
-                            </{{ titleTag }}>
-
-                            {%- if document.metadata %}
-
-                                <ul class="ons-document-list__item-metadata{% if document.description %} ons-u-mb-xs{% else %} ons-u-mb-no{% endif %}">
-
-                                    {%- if document.metadata.date %}
-                                        <li class="ons-document-list__item-attribute">
-                                            {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
-                                            <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
-                                            {% if document.metadata.date.iso -%}
-                                                <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
-                                            {%- endif %}
-                                        </li>
-                                    {% endif %}
-
-                                    {%- if document.metadata.type and document.metadata.type.text %}
-                                        <li class="ons-document-list__item-attribute{%- if document.metadata.file %} ons-u-mr-no{% endif %}">
-                                            {%- if document.metadata.type.url %}
-                                                <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
-                                            {% endif %}
-                                                    <span {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}>{{ document.metadata.type.text }}{%- if document.metadata.type.ref %}: {% elif document.metadata.file %},{% endif %}</span>
-                                            {%- if document.metadata.type.url %}
-                                                </a>
-                                            {% endif %}
-                                            {%- if document.metadata.type.ref %}
-                                                <span>{{ document.metadata.type.ref }}</span>
-                                            {% endif %}
-                                        </li>
-                                    {% endif %}
-
-                                    {%- if document.metadata.file and document.metadata.file.fileType %}
-
-                                        <li class="ons-document-list__item-attribute" aria-hidden="true">
-                                            {% set fileMetadataItems = [
-                                                document.metadata.file.fileType if document.metadata.file.fileType,
-                                                document.metadata.file.fileSize if document.metadata.file.fileSize,
-                                                document.metadata.file.filePages if document.metadata.file.filePages ]
-                                             %}
-                                            {{ fileMetadataItems | join(', ') }}
-                                        </li>
-
-                                    {% endif -%}
-                                </ul>
-
-                            {% endif %}
-                        </div>
+                                {%- if document.metadata.type and document.metadata.type.text -%}
+                                    <li class="ons-document-list__item-attribute{{ ' ons-u-mr-no' if document.metadata.file }}">
+                                        {% set metadataType %}
+                                            <span
+                                                {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}
+                                                >{{ document.metadata.type.text }}{%- if document.metadata.type.ref -%}:{% elif document.metadata.file %},{% endif %}</span
+                                            >
+                                        {% endset %}
+                                        {%- if document.metadata.type.url -%}
+                                            <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
+                                                {{ metadataType | safe }}
+                                            </a>
+                                        {% else %}
+                                            {{ metadataType | safe }}
+                                        {% endif %}
+                                        {%- if document.metadata.type.ref -%}
+                                            <span>{{ document.metadata.type.ref }}</span>
+                                        {% endif %}
+                                    </li>
+                                {% endif %}
 
-                        {% if document.description %}
-                            <div class="ons-document-list__item-description">{{ document.description | safe }}</div>
+                                {%- if document.metadata.file and document.metadata.file.fileType -%}
+                                    <li class="ons-document-list__item-attribute" aria-hidden="true">
+                                        {%
+                                            set fileMetadataItems = [
+                                            document.metadata.file.fileType if document.metadata.file.fileType,
+                                            document.metadata.file.fileSize if document.metadata.file.fileSize,
+                                            document.metadata.file.filePages if document.metadata.file.filePages ]
+                                        %}
+                                        {{ fileMetadataItems | join(', ') }}
+                                    </li>
+                                {%- endif -%}
+                            </ul>
                         {% endif %}
-
                     </div>
-
-            {% if document.featured and document.fullWidth == true %}
-
+                    {% if document.description %}
+                        <div class="ons-document-list__item-description">{{ document.description | safe }}</div>
+                    {% endif %}
                 </div>
-
-            {% endif %}
-
-        </li>
+            {% endset %}
+
+            <li
+                class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"
+                {% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+            >
+                {% if document.featured and document.fullWidth == true %}
+                    <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">{{ documentItem | safe }}</div>
+                {% else %}
+                    {{ documentItem | safe }}
+                {% endif %}
+            </li>
         {% endfor %}
     </ul>
-
 {% endmacro %}