@ons/design-system 74.0.0-next.8 → 74.0.0-widen.0

package/README.md

@@ -147,9 +147,9 @@ Checkout the branch locally and run:
 
 ### Handling VR test failures
 
-If the VR tests fail locally, you can review the changes in your browser. Note that the error you'll see if the VR tests fail starts with `Error: docker run --rm -i --add-host=host.docker.internal:host-gateway...`
+If the VR tests fail locally, you'll see an error starting with `Error: docker run --rm -i --add-host=host.docker.internal:host-gateway...`
 
-`npx http-server backstop_data/html_report -p 8080` - View the results of the yarn visual tests in your browser. Using http-server rather than simply opening the file ensures the associated JavaScript runs.
+`npx http-server backstop_data -p 8008 -o /html_report/` - View the report in your browser.
 
 ### Approving VR test reference image changes
 

package/components/access-code/example-access-code-error.njk

@@ -76,7 +76,7 @@ layout: ~
                 "variant": "warn"
             })
         %}
-            Someone in your household must still complete a study using this household access code
+            <p>Someone in your household must still complete a study using this household access code</p>
         {% endcall %}
     {% endset %}
 

package/components/access-code/example-access-code.njk

@@ -53,7 +53,7 @@ layout: ~
                 "variant": "warn"
             })
         %}
-            Someone in your household must still complete a study using this household access code
+            <p>Someone in your household must still complete a study using this household access code</p>
         {% endcall %}
     {% endset %}
 

package/components/address-input/_macro.njk

@@ -19,7 +19,6 @@
                                     "text": params.organisation.label
                                 },
                                 "classes": "ons-js-address-organisation",
-                                "width": "20@m",
                                 "name": params.id + "-organisation",
                                 "error": params.organisation.error
                             })
@@ -34,7 +33,6 @@
                                     "text": params.line1.label
                                 },
                                 "classes": "ons-js-address-line1",
-                                "width": "20@m",
                                 "name": params.id + "-line1",
                                 "error": params.line1.error
                             })
@@ -49,7 +47,6 @@
                                     "text": params.line2.label
                                 },
                                 "classes": "ons-js-address-line2",
-                                "width": "20@m",
                                 "name": params.id + "-line2",
                                 "error": params.line2.error
                             })
@@ -165,9 +162,12 @@
                         })
                     }}
                     {% if params.manualLinkText %}
-                        <a href="{{ params.manualLinkUrl }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
-                            >{{ params.manualLinkText }}</a
-                        >
+                        {# p tag ensures reading width is applied #}
+                        <p class="ons-u-mb-no">
+                            <a href="{{ params.manualLinkUrl }}" class="ons-js-address-manual-btn ons-u-mt-s ons-u-dib"
+                                >{{ params.manualLinkText }}</a
+                            >
+                        </p>
                     {% endif %}
                 </div>
             {% endif %}

package/components/address-input/_macro.spec.js

@@ -176,7 +176,6 @@ describe('FOR: Macro: Address-input', () => {
                         text: 'Organisation name',
                     },
                     value: 'Example Organisation',
-                    width: '20@m',
                     error: { text: 'Server error: organisation name' },
                 });
             });
@@ -191,7 +190,6 @@ describe('FOR: Macro: Address-input', () => {
                         text: 'Address line 1',
                     },
                     value: 'Flat 12345',
-                    width: '20@m',
                     error: { text: 'Server error: address line 1' },
                 });
             });
@@ -207,7 +205,6 @@ describe('FOR: Macro: Address-input', () => {
                         text: 'Address line 2',
                     },
                     value: '12345 The Road',
-                    width: '20@m',
                     error: { text: 'Server error: address line 2' },
                 });
             });

package/components/address-input/autosuggest.address.spec.js

@@ -411,6 +411,29 @@ describe('script: address-input', () => {
                     });
                 });
             });
+
+            describe('when a grouped suggestion is selected with the mouse', () => {
+                beforeEach(async () => {
+                    const options = await page.$$('.ons-autosuggest__option');
+                    await options[0].click();
+                    await setTimeout(400);
+                });
+
+                it('makes expected bucket request', async () => {
+                    expect(
+                        await apiFaker.getRequestCount(
+                            '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo',
+                        ),
+                    ).toBe(1);
+                });
+
+                it('keeps nested suggestion entries after blur timeout', async () => {
+                    const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) =>
+                        nodes.map((node) => node.textContent.trim()),
+                    );
+                    expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']);
+                });
+            });
         });
 
         describe('when there is an error retrieving the address', () => {

package/components/address-output/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsAddressOutput(params) %}
-    <div class="ons-address-output{{ ' ' + params.classes if params.classes else '' }}">
+    <div class="ons-address-output ons-u-reading-width{{ ' ' + params.classes if params.classes else '' }}">
         <p class="ons-address-output__lines">
             {% if params.unit %}
                 <span class="ons-address-output__unit">{{ params.unit }}</span><br />

package/components/announcement-banner/_announcement-banner.scss

@@ -13,6 +13,11 @@
         background-color: var(--ons-color-gov-red);
     }
 
+    &__title,
+    &__description {
+        @include no-reading-width;
+    }
+
     &__link {
         color: var(--ons-color-text-inverse);
 

package/components/autosuggest/_autosuggest.scss

@@ -26,6 +26,8 @@
     }
 
     &__results-title {
+        @include reading-width;
+
         background: var(--ons-color-grey-15);
         border-bottom: 1px solid var(--ons-color-input-border);
         padding: 0.25rem 0.5rem;
@@ -41,6 +43,12 @@
         }
     }
 
+    &__option-text {
+        @include reading-width;
+
+        display: block;
+    }
+
     &__option {
         cursor: pointer;
         margin: 0;

package/components/autosuggest/autosuggest.spec.js

@@ -657,6 +657,7 @@ describe('script: autosuggest', () => {
                 );
 
                 await page.type('.ons-js-autosuggest-input', 'England', { delay: 20 });
+                await page.waitForSelector('.ons-autosuggest__option');
                 await page.keyboard.press('ArrowUp');
                 await page.keyboard.press('Enter');
                 // Unfocus the autosuggest input

package/components/autosuggest/autosuggest.ui.js

@@ -201,6 +201,8 @@ export default class AutosuggestUI {
     }
 
     handleFocus() {
+        this.blurring = false;
+
         if (this.allowMultiple === 'true' && this.allSelections.length && this.input.value.slice(-1) !== ' ' && this.input.value !== '') {
             this.input.value = `${this.input.value}, `;
         }
@@ -382,7 +384,7 @@ export default class AutosuggestUI {
                             innerHTML +
                             `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${resultItem.category}</span>`;
                     }
-                    listElement.innerHTML = innerHTML;
+                    listElement.innerHTML = `<span class="ons-autosuggest__option-text">${innerHTML}</span>`;
                     listElement.addEventListener('click', () => {
                         this.selectResult(index);
                     });
@@ -399,7 +401,7 @@ export default class AutosuggestUI {
                 const listElement = document.createElement('li');
                 listElement.className = `${classAutosuggestOption} ${classAutosuggestOptionMoreResults}`;
                 listElement.setAttribute('aria-hidden', 'true');
-                listElement.innerHTML = DOMPurify.sanitize(this.moreResults);
+                listElement.innerHTML = `<span class="ons-autosuggest__option-text">${DOMPurify.sanitize(this.moreResults)}</span>`;
                 this.listbox.appendChild(listElement);
             }
 
@@ -438,11 +440,14 @@ export default class AutosuggestUI {
             message = this.typeMore;
             this.setAriaStatus(message);
             this.listbox.innerHTML = DOMPurify.sanitize(
-                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}"><span class="ons-autosuggest__option-text">${message}</span></li>`,
             );
         } else if (status > 400 || status === '') {
             const sanitizedHref = DOMPurify.sanitize(window.location.href);
-            message = this.errorAPI + (this.errorAPILinkText ? ' <a href="' + sanitizedHref + '">' + this.errorAPILinkText + '</a>.' : '');
+            message =
+                '<p>' +
+                this.errorAPI +
+                (this.errorAPILinkText ? ' <a href="' + sanitizedHref + '">' + this.errorAPILinkText + '</a>.</p>' : '');
             let ariaMessage = this.errorAPI + (this.errorAPILinkText ? ' ' + this.errorAPILinkText : '');
 
             this.input.setAttribute('disabled', true);
@@ -457,7 +462,7 @@ export default class AutosuggestUI {
         } else {
             message = this.noResults;
             this.listbox.innerHTML = DOMPurify.sanitize(
-                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}"><span class="ons-autosuggest__option-text">${message}</span></li>`,
             );
         }
     }
@@ -513,6 +518,7 @@ export default class AutosuggestUI {
 
     selectResult(index) {
         if (this.results.length) {
+            clearTimeout(this.blurTimeout);
             this.settingResult = true;
             const result = this.results[index || this.highlightedResultIndex || 0];
             const resultItem = result.item ?? result;

package/components/back-to-top/_back-to-top.scss

@@ -3,6 +3,13 @@
         margin-left: 0.25rem;
     }
 
+    // This element also gets a margin-left value set in the JS to match the content left spacing
+    &__content {
+        @include reading-width;
+
+        display: inline-block;
+    }
+
     &__enabled {
         background: none;
         width: fit-content;

package/components/back-to-top/_macro.njk

@@ -3,7 +3,7 @@
 {% macro onsBackToTop(params) %}
     <div class="ons-back-to-top ons-js-back-to-top ons-back-to-top__enabled">
         <a href="#{{ params.anchor | default('top') }}" class="ons-back-to-top__link">
-            <span>
+            <span class="ons-back-to-top__content">
                 {{-
                     onsIcon({
                         "iconType": 'arrow-up',

package/components/back-to-top/back-to-top.js

@@ -1,7 +1,11 @@
 export default class BackToTop {
     constructor(component) {
         this.component = component;
-        this.content = this.component.previousElementSibling;
+        let el = this.component;
+        while (el && !el.previousElementSibling) {
+            el = el.parentElement;
+        }
+        this.content = el ? el.previousElementSibling : null;
         this.target = document.getElementById(this.component.firstElementChild.href.split('#')[1]);
         this.contentleft;
         this.updateContentDetails();
@@ -27,6 +31,10 @@ export default class BackToTop {
             scrollPosition = -this.target.getBoundingClientRect().top + window.innerHeight;
         }
 
+        // In the extremely unlikely situation where there is no content at all above the back to top component, exit early
+        if (!this.content) {
+            return;
+        }
         const contentRect = this.content.getBoundingClientRect();
         const windowHeight = window.innerHeight;
         const contentBottom = contentRect.bottom;

package/components/back-to-top/back-to-top.spec.js

@@ -117,3 +117,49 @@ describe('script: back-to-top', () => {
         expect(previousWidth).not.toEqual(newWidth);
     });
 });
+
+describe('script: back-to-top without an adjacent previous sibling', () => {
+    it('does not throw errors when the component is nested several levels deep with no immediate previous sibling', async () => {
+        const pageErrors = [];
+        const handler = (err) => pageErrors.push(err.message);
+        page.on('pageerror', handler);
+
+        await setTestPage(
+            '/test',
+            `
+                <div>
+                    <p>Content above</p>
+                </div>
+                <div>
+                    <div>
+                        <div>
+                            ${renderComponent('back-to-top', {})}
+                        </div>
+                    </div>
+                </div>
+            `,
+        );
+
+        await page.evaluate(() => {
+            window.scrollTo(0, window.innerHeight * 2 + 10);
+        });
+
+        page.off('pageerror', handler);
+        expect(pageErrors).toHaveLength(0);
+    });
+
+    it('does not throw errors when there is no content preceding the back-to-top component', async () => {
+        const pageErrors = [];
+        const handler = (err) => pageErrors.push(err.message);
+        page.on('pageerror', handler);
+
+        await setTestPage('/test', `${renderComponent('back-to-top', {})}`);
+
+        await page.evaluate(() => {
+            window.scrollTo(0, window.innerHeight * 2 + 10);
+        });
+
+        page.off('pageerror', handler);
+        expect(pageErrors).toHaveLength(0);
+    });
+});

package/components/card/example-card-set-with-headline-figures.njk

@@ -1,7 +1,7 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
 <div class="ons-container">
-    <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
+    <div class="ons-grid ons-grid-flex-gap ons-grid-flex--vertical-top">
         <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
             {{
                 onsCard({

package/components/char-check-limit/_macro.njk

@@ -1,16 +1,18 @@
 {% macro onsCharLimit(params) %}
-    {% if params.variant == "check" %}
-        {% set content = caller() %}
-        <span class="ons-js-char-check-input">{{ content | safe }}</span>
-    {% endif %}
-    <span
-        id="{{ params.id }}"
-        class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
-        data-count-type="{{ params.variant if params.variant == 'word' else 'char' }}"
-        data-message-singular="{% if params.variant == 'word' %}{{ params.wordCountSingular }}{% else %}{{ params.charCountSingular }}{% endif %}"
-        data-message-plural="{% if params.variant == 'word' %}{{ params.wordCountPlural }}{% else %}{{ params.charCountPlural }}{% endif %}"
-        data-message-over-limit-singular="{% if params.variant == 'word' %}{{ params.wordCountOverLimitSingular | default("You have exceeded the word limit by {x} word") }}{% else %}{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}{% endif %}"
-        data-message-over-limit-plural="{% if params.variant == 'word' %}{{ params.wordCountOverLimitPlural | default("You have exceeded the word limit by {x} words") }}{% else %}{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}{% endif %}"
-    >
-    </span>
+    <div class="ons-u-reading-width">
+        {% if params.variant == "check" %}
+            {% set content = caller() %}
+            <span class="ons-js-char-check-input">{{ content | safe }}</span>
+        {% endif %}
+        <span
+            id="{{ params.id }}"
+            class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
+            data-count-type="{{ params.variant if params.variant == 'word' else 'char' }}"
+            data-message-singular="{% if params.variant == 'word' %}{{ params.wordCountSingular }}{% else %}{{ params.charCountSingular }}{% endif %}"
+            data-message-plural="{% if params.variant == 'word' %}{{ params.wordCountPlural }}{% else %}{{ params.charCountPlural }}{% endif %}"
+            data-message-over-limit-singular="{% if params.variant == 'word' %}{{ params.wordCountOverLimitSingular | default("You have exceeded the word limit by {x} word") }}{% else %}{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}{% endif %}"
+            data-message-over-limit-plural="{% if params.variant == 'word' %}{{ params.wordCountOverLimitPlural | default("You have exceeded the word limit by {x} words") }}{% else %}{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}{% endif %}"
+        >
+        </span>
+    </div>
 {% endmacro %}

package/components/chart/_macro.njk

@@ -42,6 +42,9 @@
             {% if params.yAxis.customReferenceLineValue %}
                 data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
             {% endif %}
+            {% if params.dataLabelDecimalPoints and params.dataLabelDecimalPoints >= 1 and params.dataLabelDecimalPoints <= 2 %}
+                data-highcharts-data-label-decimal-points="{{ params.dataLabelDecimalPoints }}"
+            {% endif %}
         {% endif %}
     >
         {%

package/components/chart/_macro.spec.js

@@ -885,6 +885,55 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: dataLabelDecimalPoints', () => {
+            describe('WHEN: dataLabelDecimalPoints is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_CHART_PARAMS,
+                        dataLabelDecimalPoints: 2,
+                    }),
+                );
+
+                test('THEN: it includes the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe('2');
+                });
+            });
+
+            describe('WHEN: dataLabelDecimalPoints is not provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_CHART_PARAMS));
+
+                test('THEN: it does not include the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe(undefined);
+                });
+            });
+
+            describe('WHEN: dataLabelDecimalPoints is greater than 2', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_CHART_PARAMS,
+                        dataLabelDecimalPoints: 3,
+                    }),
+                );
+
+                test('THEN: it does not include the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe(undefined);
+                });
+            });
+
+            describe('WHEN: dataLabelDecimalPoints is less than 1', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_BAR_CHART_PARAMS,
+                        dataLabelDecimalPoints: 0,
+                    }),
+                );
+
+                test('THEN: it does not include the data label decimal points data attribute', () => {
+                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-data-label-decimal-points')).toBe(undefined);
+                });
+            });
+        });
+
         describe('GIVEN: Params: caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(

package/components/chart/bar-chart.js

@@ -5,7 +5,23 @@ class BarChart {
         this.constants = ChartConstants.constants();
     }
 
-    getBarChartOptions = (useStackedLayout) => {
+    getBarChartOptions = (useStackedLayout, dataLabelDecimalPoints) => {
+        const dataLabels = {
+            enabled: true,
+            inside: false,
+            style: {
+                textOutline: 'none',
+                // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
+                fontWeight: '700',
+                color: this.constants.labelColor,
+                fontSize: this.constants.defaultFontSize,
+            },
+        };
+        if (dataLabelDecimalPoints !== undefined) {
+            dataLabels.formatter = function () {
+                return Number(this.y).toFixed(dataLabelDecimalPoints);
+            };
+        }
         return {
             plotOptions: {
                 bar: {
@@ -18,17 +34,7 @@ class BarChart {
                     borderRadius: 0,
                     // Set the data labels to be enabled and positioned outside the bars
                     // We can add custom formatting on each chart to move the labels inside the bars if the bar is wide enough
-                    dataLabels: {
-                        enabled: true,
-                        inside: false,
-                        style: {
-                            textOutline: 'none',
-                            // The design system does not include a semibold font weight, so we use 700 (bold) as an alternative.
-                            fontWeight: '700',
-                            color: this.constants.labelColor,
-                            fontSize: this.constants.defaultFontSize,
-                        },
-                    },
+                    dataLabels,
                 },
                 series: {
                     stacking: useStackedLayout ? 'normal' : null,

package/components/chart/chart.js

@@ -73,6 +73,9 @@ class HighchartsBaseChart {
         this.customReferenceLineValue = this.node.dataset.highchartsCustomReferenceLineValue
             ? parseFloat(this.node.dataset.highchartsCustomReferenceLineValue)
             : undefined;
+        this.dataLabelDecimalPoints = this.node.dataset.highchartsDataLabelDecimalPoints
+            ? parseInt(this.node.dataset.highchartsDataLabelDecimalPoints, 10)
+            : undefined;
         this.specificChartOptions = new SpecificChartOptions(
             this.theme,
             this.chartType,
@@ -153,7 +156,7 @@ class HighchartsBaseChart {
     setSpecificChartOptions = () => {
         const specificChartOptions = this.specificChartOptions.getOptions();
         const lineChartOptions = this.lineChart.getLineChartOptions();
-        const barChartOptions = this.barChart.getBarChartOptions(this.useStackedLayout);
+        const barChartOptions = this.barChart.getBarChartOptions(this.useStackedLayout, this.dataLabelDecimalPoints);
         const columnRangeChartOptions = this.columnRangeChart.getColumnRangeChartOptions();
         const columnChartOptions = this.columnChart.getColumnChartOptions(this.config, this.useStackedLayout, this.extraLines);
         const areaChartOptions = this.areaChart.getAreaChartOptions();

package/components/chart/common-chart-options.js

@@ -146,6 +146,7 @@ class CommonChartOptions {
             },
             tooltip: {
                 animation: false,
+                snap: 2,
             },
         };
     }

package/components/chart/example-stacked-column-with-line-chart.njk

@@ -0,0 +1,64 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+{{
+    onsChart({
+        "chartType": "column",
+        "description": "Monthly percentage change in retail sales volume by store type, Great Britain, January to June 2025",
+        "theme": "primary",
+        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
+        "subtitle": "Figure 6: Upward contribution to monthly percentage change in total retail sales",
+        "id": "uuid",
+        "useStackedLayout": true,
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            "title": "Download Figure 6 data",
+            "itemsList": [
+                { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#",
+                "download": "file" },
+                { "text": "Simple text file (CSV format, 28KB)", "url": "#",
+                "download": "file" },
+                { "text": "Image (PNG format, 32KB)", "url": "#",
+                "download": "file" }
+            ]
+        },
+        "legend": true,
+        "series": [
+            {
+                "name": "Food stores",
+                "data": [1.5, 0.8, 1.2, 0.9, 1.1, 1.4]
+            },
+            {
+                "name": "Non-food stores",
+                "data": [0.5, -0.2, 0.6, 0.8, 0.3, 0.4]
+            },
+            {
+                "name": "Non-store retailing",
+                "data": [0.2, 0.1, 0.3, 0.2, 0.4, 0.3]
+            },
+            {
+                "name": "Automotive fuel",
+                "data": [0.3, 0.2, -0.1, 0.4, 0.2, 0.5]
+            },
+            {
+                "name": "Another test data source",
+                "data": [1.5, 0.8, 1.5, 0.2, 0.8, 1.3],
+                "type": "line"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Jan 2025",
+                "Feb 2025",
+                "Mar 2025",
+                "Apr 2025",
+                "May 2025",
+                "Jun 2025"
+            ],
+            "title": "Month"
+        },
+        "yAxis": {
+            "title": "Monthly percentage change (%)"
+        },
+        "percentageHeightDesktop": 40,
+        "percentageHeightMobile": 90
+    })
+}}

package/components/details/_details.scss

@@ -77,6 +77,15 @@ $details-caret-width: 1.75rem;
             display: block;
             margin: 1rem 0 0 0.5rem;
             padding: 0 0 0 1.5rem;
+
+            // Restrict the width of textual content within the details content (paragraphs are already globally restricted)
+
+            ul,
+            ol,
+            label,
+            legend {
+                @include reading-width;
+            }
         }
     }
 

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

@@ -16,6 +16,6 @@
             "variant": "warn"
         })
     %}
-        Someone in your household must still complete a survey using a household access code
+        <p>Someone in your household must still complete a survey using a household access code</p>
     {% endcall %}
 {% endcall %}

package/components/details-panel/_macro.njk

@@ -21,7 +21,7 @@
                                 })
                             }}
                         </span>
-                        <span class="ons-details-panel__banner-detail-title">
+                        <span class="ons-details-panel__banner-detail-title ons-u-reading-width">
                             <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
                             <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
                         </span>

package/components/download-resources/download-resources.spec.js

@@ -1,9 +1,6 @@
-import { KnownDevices } from 'puppeteer';
-import { setViewport } from '../../tests/helpers/puppeteer';
+import { iPhoneX, setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
-const iPhoneX = KnownDevices['iPhone X'];
-
 /* eslint-disable indent */
 const EXAMPLE_PAGE = `
   <div class="ons-page">