@ons/design-system 73.13.1 → 74.0.0-cookies.0

package/README.md

@@ -145,11 +145,21 @@ Checkout the branch locally and run:
 
 `VR_SHARD_INDEX=0 VR_SHARD_COUNT=4 yarn test-visual` - This runs only one shard of the visual tests locally. Useful when one shard fails in CI.
 
+### Handling VR test failures
+
+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 -p 8008 -c-1 -o /html_report/` - View the report in your browser.
+
+### Approving VR test reference image changes
+
 `yarn test-visual:approve` - This will approve the failures/diff caught by the tests.
 
-`git lfs push --all origin` - First commit the files in the normal way then run the command. This will push the new reference images to Git LFS.
+Commit and approve the file changes in the normal way.
+
+`git lfs push --all origin` - This will push the new reference images to Git LFS.
 
-You can then commit and push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
+You can then push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
 
 If your local tests are failing but you have approved them, run `yarn test-visual:reference`. This will update the reference images locally on your machine.
 

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

@@ -14,7 +14,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsPanel({
             "title": "There is a problem with this page",
@@ -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

@@ -16,7 +16,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{
@@ -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-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.ui.js

@@ -384,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);
                     });
@@ -401,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);
             }
 
@@ -440,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);
@@ -459,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>`,
             );
         }
     }

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/example-full-page-back-to-top.njk

@@ -30,7 +30,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <h1 class="ons-u-fs-2xl">
         <span class="ons-u-fs-m ons-u-db ons-u-mb-2xs ons-u-lighter">Press releases</span>
         <span class="ons-u-vh">: </span>

package/components/breadcrumbs/_breadcrumbs.scss

@@ -3,7 +3,7 @@ $breadcrumb-chevron-height: 0.65rem;
 .ons-breadcrumbs-wrapper {
     position: relative;
     z-index: 10;
-    margin-bottom: -2rem;
+    margin-bottom: -1rem;
     &--grey {
         background-color: var(--ons-color-banner-bg);
     }
@@ -14,9 +14,9 @@ $breadcrumb-chevron-height: 0.65rem;
 
     &--navy-blue {
         background-color: var(--ons-color-navy-blue-light);
-        margin-bottom: -1.75rem;
+        margin-bottom: -0.75rem;
         @include mq(l) {
-            margin-bottom: -3.25rem;
+            margin-bottom: -2.25rem;
         }
     }
 
@@ -48,15 +48,12 @@ $breadcrumb-chevron-height: 0.65rem;
     &--pale-blue {
         background-color: var(--ons-color-pale-blue);
     }
-    .ons-breadcrumbs {
-        padding: 1rem;
-    }
 }
 
 .ons-breadcrumbs {
     align-items: center;
     display: flex;
-    padding: 1rem 0;
+    padding: 1rem 0 0;
 
     &__items {
         margin: 0;

package/components/breadcrumbs/_macro.njk

@@ -1,33 +1,37 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 {% macro onsBreadcrumbs(params) %}
     {% set breadcrumbs %}
-        <nav
-            class="ons-breadcrumbs{{ ' ons-container' if params.variant }}{{ ' ' + params.classes if params.classes else '' }}"
-            aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
-            {% if params.id %}id="{{ params.id }}"{% endif %}
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}"
         >
-            <ol class="ons-breadcrumbs__items ons-u-fs-s">
-                {%- for item in params.itemsList -%}
-                    <li
-                        class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
-                        id="breadcrumb-{{ loop.index }}"
-                    >
-                        <a
-                            class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
-                            href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
-                            {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
-                            {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                            >{{ item.text }}</a
+            <nav
+                class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}"
+                aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
+                {% if params.id %}id="{{ params.id }}"{% endif %}
+            >
+                <ol class="ons-breadcrumbs__items ons-u-fs-s">
+                    {%- for item in params.itemsList -%}
+                        <li
+                            class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
+                            id="breadcrumb-{{ loop.index }}"
                         >
-                        {{-
-                            onsIcon({
-                                "iconType": "chevron"
-                            })
-                        -}}
-                    </li>
-                {%- endfor -%}
-            </ol>
-        </nav>
+                            <a
+                                class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
+                                href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
+                                {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
+                                {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                >{{ item.text }}</a
+                            >
+                            {{-
+                                onsIcon({
+                                    "iconType": "chevron"
+                                })
+                            -}}
+                        </li>
+                    {%- endfor -%}
+                </ol>
+            </nav>
+        </div>
     {% endset %}
     {% if params.variant %}
         <div class="ons-breadcrumbs-wrapper ons-breadcrumbs-wrapper--{{ params.variant }}">{{ breadcrumbs | safe }}</div>

package/components/breadcrumbs/_macro.spec.js

@@ -133,6 +133,45 @@ describe('FOR: Macro: Breadcrumbs', () => {
         });
     });
 
+    describe('GIVEN: Params: fullWidth', () => {
+        describe('WHEN: fullWidth is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders container without full-width class', () => {
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+            });
+        });
+        describe('WHEN: fullWidth is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    fullWidth: true,
+                }),
+            );
+            test('THEN: renders container with full-width class', () => {
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+            });
+        });
+    });
+    describe('GIVEN: Params: wide', () => {
+        describe('WHEN: wide is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders container without wide class', () => {
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+            });
+        });
+        describe('WHEN: wide is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    wide: true,
+                }),
+            );
+            test('THEN: renders container with wide class', () => {
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+            });
+        });
+    });
+
     describe('GIVEN: Params: variant', () => {
         describe('WHEN: variant is provided', () => {
             const $ = cheerio.load(

package/components/breadcrumbs/example-breadcrumbs-wide.njk

@@ -0,0 +1,52 @@
+---
+title: 'Example: Breadcrumbs override wide'
+layout: ~
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "title": 'Service title',
+            "mastheadLogoUrl": '#0',
+            "titleUrl": '#0',
+            "serviceLinks": {
+                "id": "service-links-internal",
+                "ariaLabel": 'Services menu',
+                "ariaListLabel": 'Menu',
+                "toggleServicesButton": {
+                    "text": 'Account',
+                    "ariaLabel": 'Toggle services menu'
+                },
+                "itemsList": [
+                    {
+                        "text": "Jacky Turner",
+                        "iconType": 'person'
+                    },
+                    {
+                        "text": "Sign out",
+                        "url": "#0"
+                    }
+                ]
+            }
+        },
+        "wide": true
+    }
+%}
+
+{% block breadcrumbs %}
+    {{
+        onsBreadcrumbs({
+            "wide": true,
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        })
+    }}
+{% endblock %}

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/cookies-banner/_macro.njk

@@ -44,7 +44,7 @@
     <section
         class="ons-cookies-banner"
         aria-label="{{ params.ariaLabel | default(ariaLabel) }}"
-        {% if params.cookieDomainPolicy %}data-ons-cookie-domain-policy="{{ params.cookieDomainPolicy }}"{% endif %}
+        {% if params.cookieDomain is defined %}data-ons-cookie-domain="{{ params.cookieDomain if params.cookieDomain else '' }}"{% endif %}
     >
         <div
             class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary"

package/components/cookies-banner/_macro.spec.js

@@ -39,10 +39,22 @@ describe('macro: cookies-banner', () => {
             expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner override');
         });
 
-        it('sets cookie domain policy data attribute when `cookieDomainPolicy` is provided', () => {
-            const $ = cheerio.load(renderComponent('cookies-banner', { ...EXAMPLE_COOKIES_BANNER_PARAMS, cookieDomainPolicy: 'day1' }));
+        it('sets cookie domain data attribute when `cookieDomain` is provided', () => {
+            const $ = cheerio.load(renderComponent('cookies-banner', { ...EXAMPLE_COOKIES_BANNER_PARAMS, cookieDomain: 'census.gov.uk' }));
 
-            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain-policy')).toBe('day1');
+            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain')).toBe('census.gov.uk');
+        });
+
+        it('renders an empty domain attribute when `cookieDomain` is false', () => {
+            const $ = cheerio.load(renderComponent('cookies-banner', { cookieDomain: false }));
+
+            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain')).toBe('');
+        });
+
+        it('omits the domain attribute when `cookieDomain` is not provided', () => {
+            const $ = cheerio.load(renderComponent('cookies-banner'));
+
+            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain')).toBeUndefined();
         });
 
         describe('initial banner', () => {

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/featured-article/_macro.njk

@@ -31,12 +31,12 @@
 
         {# The media (a nested figure containing a chart or image) is provided via the caller
            block, so the article does not need to know how the content is rendered. #}
-        <div class="ons-featured__media">
-            {{ caller() if caller }}
-        </div>
+        <div class="ons-featured__media">{{ caller() if caller }}</div>
 
         {% if params.description %}
-            <div class="ons-featured__description">{{ params.description | safe }}</div>
+            <div class="ons-featured__description">
+                <div class="ons-u-reading-width">{{ params.description | safe }}</div>
+            </div>
         {% endif %}
     </div>
 {% endmacro %}

package/components/featured-article/macro.spec.js

@@ -123,8 +123,8 @@ describe('Macro: Featured Article', () => {
                         EXAMPLE_CHART_CALLER_CONTENT,
                     ),
                 );
-                const title = $('.ons-featured__description').html().trim();
-                expect(title).toBe('Some description');
+                const description = $('.ons-featured__description .ons-u-reading-width').html().trim();
+                expect(description).toBe('Some description');
             });
         });
     });

package/components/feedback/_macro.njk

@@ -7,6 +7,9 @@
         {{ params.heading }}
         {{ closingHeadingTag | safe }}
         <p class="ons-feedback__content">{{- params.content | safe -}}</p>
-        <a href="{{ params.linkUrl }}" class="ons-feedback__link">{{- params.linkText -}}</a>
+        {# p tag ensures reading width is applied #}
+        <p class="ons-u-mb-no">
+            <a href="{{ params.linkUrl }}" class="ons-feedback__link">{{- params.linkText -}}</a>
+        </p>
     </div>
 {% endmacro %}

package/components/feedback/_macro.spec.js

@@ -110,7 +110,7 @@ describe('FOR: Macro: Feedback', () => {
         describe('WHEN: content is provided', () => {
             const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
             test('THEN: renders paragraph with the provided content', () => {
-                expect($('p').text().trim()).toBe('Feedback content...');
+                expect($('p').first().text().trim()).toBe('Feedback content...');
             });
         });
     });

package/components/figure/_figure.scss

@@ -6,6 +6,7 @@
         font-size: 1.125rem;
         font-weight: $font-weight-bold;
         line-height: 1.3;
+        display: block;
     }
 
     &__title {