@ons/design-system 72.0.1 → 72.1.0

package/components/autosuggest/_macro.njk

@@ -15,6 +15,7 @@
         data-results-title="{{ params.resultsTitle }}"
         data-no-results="{{ params.noResults }}"
         data-type-more="{{ params.typeMore }}"
+        {% if params.resultsThreshold %}data-result-threshold="{{ params.resultsThreshold }}"{% endif %}
         {% if params.apiDomain %}data-api-domain="{{ params.apiDomain }}"{% endif %}
         {% if params.apiDomainBearerToken %}data-authorization-token="{{ params.apiDomainBearerToken }}"{% endif %}
         {% if params.apiManualQueryParams == true %}data-query-params=""{% endif %}

package/components/autosuggest/_macro.spec.js

@@ -32,6 +32,11 @@ const EXAMPLE_AUTOSUGGEST = {
     typeMore: 'Continue entering to get suggestions',
 };
 
+const EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD = {
+    ...EXAMPLE_AUTOSUGGEST,
+    resultsThreshold: 0.5,
+};
+
 describe('macro: autosuggest', () => {
     it('passes jest-axe checks', async () => {
         const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
@@ -47,7 +52,7 @@ describe('macro: autosuggest', () => {
     });
 
     it('has the provided data attributes', () => {
-        const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+        const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD));
 
         const $element = $('.ons-autosuggest');
         expect($element.attr('data-allow-multiple')).toBeUndefined();
@@ -63,6 +68,7 @@ describe('macro: autosuggest', () => {
         expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer');
         expect($element.attr('data-results-title')).toBe('Suggestions');
         expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions');
+        expect($element.attr('data-result-threshold')).toBe('0.5');
     });
 
     it('has the `data-allow-multiple` attribute when `allowMultiple` is `true`', () => {

package/components/autosuggest/autosuggest.spec.js

@@ -609,6 +609,8 @@ describe('script: autosuggest', () => {
                 expect(resultsItemCount).toBe(1);
                 const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent);
                 expect(warningText.trim()).toBe('!Sorry, there is a problem.');
+                const warningContainer = await page.$eval('.ons-autosuggest__warning', (node) => node.id);
+                expect(warningContainer).toBe('country-of-birth-listbox');
             });
 
             it('the list and results element should be removed from the page', async () => {
@@ -657,7 +659,7 @@ describe('script: autosuggest', () => {
                 await page.type('.ons-js-autosuggest-input', 'England', { delay: 20 });
                 await page.keyboard.press('ArrowUp');
                 await page.keyboard.press('Enter');
-                // Defocus the autosuggest input.
+                // Unfocus the autosuggest input
                 await page.keyboard.press('Tab');
                 await page.focus('.ons-js-autosuggest-input');
 

package/components/autosuggest/autosuggest.ui.js

@@ -37,6 +37,7 @@ export default class AutosuggestUI {
         errorAPI,
         errorAPILinkText,
         typeMore,
+        customResultsThreshold,
     }) {
         // DOM Elements
         this.context = context;
@@ -65,6 +66,7 @@ export default class AutosuggestUI {
         this.errorAPI = errorAPI || context.getAttribute('data-error-api');
         this.errorAPILinkText = errorAPILinkText || context.getAttribute('data-error-api-link-text');
         this.typeMore = typeMore || context.getAttribute('data-type-more');
+        this.customResultsThreshold = customResultsThreshold || context.getAttribute('data-result-threshold');
         this.language = context.getAttribute('data-lang');
         this.allowMultiple = context.getAttribute('data-allow-multiple') || false;
         this.listboxId = this.listbox.getAttribute('id');
@@ -293,9 +295,30 @@ export default class AutosuggestUI {
 
     async fetchSuggestions(sanitisedQuery, data) {
         this.abortFetch();
-        const results = await runFuse(sanitisedQuery, data, this.lang, this.resultLimit);
+
+        const threshold =
+            this.customResultsThreshold != null && this.customResultsThreshold >= 0 && this.customResultsThreshold <= 1
+                ? this.customResultsThreshold
+                : 0.2;
+
+        let distance;
+        if (threshold >= 0.6) {
+            distance = 500;
+        } else if (threshold >= 0.4) {
+            distance = 300;
+        } else {
+            distance = 100;
+        }
+
+        const results = await runFuse(sanitisedQuery, data, this.lang, threshold, distance);
+
         results.forEach((result) => {
-            result.sanitisedText = sanitiseAutosuggestText(result[this.lang], this.sanitisedQueryReplaceChars);
+            const resultItem = result.item ?? result;
+
+            result.sanitisedText = sanitiseAutosuggestText(
+                resultItem[this.lang] ?? resultItem['formattedAddress'],
+                this.sanitisedQueryReplaceChars,
+            );
         });
         return {
             status: this.responseStatus,
@@ -345,16 +368,18 @@ export default class AutosuggestUI {
             this.listbox.innerHTML = '';
             if (this.results) {
                 this.resultOptions = this.results.map((result, index) => {
-                    let innerHTML = this.emboldenMatch(result[this.lang], this.query);
+                    const resultItem = result.item ?? result;
+
+                    let innerHTML = this.emboldenMatch(resultItem[this.lang] ?? resultItem['formattedAddress'], this.query);
 
                     const listElement = document.createElement('li');
                     listElement.className = classAutosuggestOption;
                     listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
                     listElement.setAttribute('role', 'option');
-                    if (result.category) {
+                    if (resultItem.category) {
                         innerHTML =
                             innerHTML +
-                            `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
+                            `<span class="ons-autosuggest__category ons-u-lighter ons-u-fs-s ons-u-db">${resultItem.category}</span>`;
                     }
                     listElement.innerHTML = innerHTML;
                     listElement.addEventListener('click', () => {
@@ -485,16 +510,19 @@ export default class AutosuggestUI {
         if (this.results.length) {
             this.settingResult = true;
             const result = this.results[index || this.highlightedResultIndex || 0];
+            const resultItem = result.item ?? result;
+            const resultValue = resultItem[this.lang] ?? resultItem['formattedAddress'];
+
             this.resultSelected = true;
 
             if (this.allowMultiple === 'true') {
-                let value = this.storeExistingSelections(result[this.lang]);
+                let value = this.storeExistingSelections(resultValue);
                 result.displayText = value;
-            } else if (result.url) {
-                result.displayText = result[this.lang];
-                window.location = result.url;
+            } else if (resultItem.url) {
+                result.displayText = resultValue;
+                window.location = resultItem.url;
             } else {
-                result.displayText = result[this.lang];
+                result.displayText = resultValue;
             }
             this.onSelect(result).then(() => (this.settingResult = false));
 
@@ -511,6 +539,7 @@ export default class AutosuggestUI {
         const warningSpanElement = document.createElement('span');
         const warningBodyElement = document.createElement('div');
 
+        warningContainer.id = this.listbox.getAttribute('id');
         warningContainer.className = 'ons-autosuggest__warning';
         warningElement.className = 'ons-panel ons-panel--warn ons-autosuggest__panel';
 

package/components/autosuggest/example-autosuggest-country.njk

@@ -24,7 +24,8 @@
                 "resultsTitleId": "country-of-birth-suggestions",
                 "autosuggestData": "/examples/data/country-of-birth.json",
                 "noResults": "No suggestions found. You can enter your own answer",
-                "typeMore": "Continue entering to get suggestions"
+                "typeMore": "Continue entering to get suggestions",
+                "resultsThreshold": 0.2
             })
         }}
     </div>

package/components/autosuggest/fuse-config.js

@@ -1,14 +1,19 @@
 import Fuse from 'fuse.js';
 
-export default function runFuse(query, data, searchFields) {
+export default function runFuse(query, data, searchFields, threshold, distance) {
     const options = {
         shouldSort: true,
-        threshold: 0.2,
+        threshold: threshold,
+        distance: distance,
         keys: [
             {
                 name: searchFields,
                 weight: 0.9,
             },
+            {
+                name: 'formattedAddress',
+                weight: 0.9,
+            },
             {
                 name: 'tags',
                 weight: 0.1,

package/components/checkboxes/_checkbox-macro.njk

@@ -98,6 +98,26 @@
                             "radios": params.other.radios
                         })
                     }}
+                {% elif otherType == "textarea" %}
+                    {% from "components/textarea/_macro.njk" import onsTextarea %}
+                    {{
+                        onsTextarea({
+                            "id": params.other.id,
+                            "name": params.other.name,
+                            "value": params.other.value,
+                            "label": {
+                                "id": params.other.id + "-label",
+                                "text": params.other.label.text,
+                                "description": params.other.label.description,
+                                "classes": 'ons-u-fw-n'
+                            },
+                            "charCheckLimit": {
+                                "limit": params.other.charCheckLimit.limit,
+                                "charCountSingular": params.other.charCheckLimit.charCountSingular,
+                                "charCountPlural": params.other.charCheckLimit.charCountPlural
+                            }
+                        })
+                    }}
                 {% endif %}
             </span>
         {% endif %}

package/components/checkboxes/_macro.njk

@@ -90,6 +90,11 @@
                                     "label": {
                                         "text": checkbox.other.label.text
                                     },
+                                    "charCheckLimit": {
+                                        "limit": checkbox.other.charCheckLimit.limit,
+                                        "charCountSingular": checkbox.other.charCheckLimit.charCountSingular,
+                                        "charCountPlural": checkbox.other.charCheckLimit.charCountPlural
+                                    },
                                     "legend": checkbox.other.legend,
                                     "legendClasses": checkbox.other.legendClasses,
                                     "value": checkbox.other.value,

package/components/checkboxes/_macro.spec.js

@@ -87,6 +87,31 @@ const EXAMPLE_CHECKBOXES_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR = {
     },
 };
 
+const EXAMPLE_CHECKBOX_ITEM_CHECKBOXES_WITH_TEXTAREA = {
+    name: 'example-checkboxes-name',
+    legend: 'Legend text',
+    checkboxesLabel: 'Select all that apply',
+    checkboxesLabelClasses: 'extra-checkboxes-label-class',
+    checkboxes: [
+        EXAMPLE_CHECKBOX_ITEM,
+        {
+            other: {
+                otherType: 'textarea',
+                id: 'other-textbox-example-checkbox-with-revealed-text-area',
+                name: 'other answer',
+                label: {
+                    text: 'Provide more details',
+                },
+                charCheckLimit: {
+                    limit: 300,
+                    charCountSingular: 'You have {x} character remaining',
+                    charCountPlural: 'You have {x} characters remaining',
+                },
+            },
+        },
+    ],
+};
+
 describe('macro: checkboxes', () => {
     it('passes jest-axe checks', async () => {
         const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOXES));
@@ -135,6 +160,16 @@ describe('macro: checkboxes', () => {
         });
     });
 
+    describe('checkbox item with text area', () => {
+        it('renders the text area with expected parameters', () => {
+            const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOX_ITEM_CHECKBOXES_WITH_TEXTAREA));
+            expect($('.ons-input--textarea').attr('name')).toBe('other answer');
+            expect($('.ons-input--textarea').attr('maxlength')).toBe('300');
+            expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+            expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+        });
+    });
+
     describe('mutually exclusive', () => {
         it('has the `ons-js-exclusive-group-item` class', () => {
             const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOXES_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR));

package/components/checkboxes/example-checkboxes-with-revealed-text-area-expanded.njk

@@ -0,0 +1,68 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "checked": true,
+                    "other": {
+                        "otherType": "textarea",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-area",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Provide more details"
+                        },
+                        "charCheckLimit": {
+                            "limit": 200,
+                            "charCountSingular": "You have {x} character remaining",
+                            "charCountPlural": "You have {x} characters remaining"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-revealed-text-area.njk

@@ -0,0 +1,67 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "other": {
+                        "otherType": "textarea",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-area",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Provide more details"
+                        },
+                        "charCheckLimit": {
+                            "limit": 200,
+                            "charCountSingular": "You have {x} character remaining",
+                            "charCountPlural": "You have {x} characters remaining"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/summary/_macro.njk

@@ -35,96 +35,91 @@
                                 {% if row.total %}{% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
                                 <div {% if row.id %}id="{{ row.id }}"{% endif %}class="ons-summary__item{{ itemClass }}">
                                     {% if row.errorMessage %}
-                                        <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
+                                        <dt class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</dt>
                                     {% endif %}
                                     {% if row.itemsList | length > 1 and row.title %}
-                                        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
+                                        <dt class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
                                             {{- row.title -}}
-                                        </div>
+                                        </dt>
                                     {% endif %}
 
                                     {% for item in row.itemsList %}
-                                        <div
-                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if item.valueList else "" }}"
-                                            {% if item.id %}id="{{ item.id }}"{% endif %}
+                                        <dt
+                                            class="ons-summary__item-title"
+                                            {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                         >
-                                            <dt
-                                                class="ons-summary__item-title"
-                                                {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                                            >
-                                                {% if item.iconType %}
-                                                    {% from "components/icon/_macro.njk" import onsIcon %}
-                                                    <span
-                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
-                                                    >
-                                                        {{-
-                                                            onsIcon({
-                                                                "iconType": item.iconType
-                                                            })
-                                                        -}}
-                                                        {% if item.iconVisuallyHiddenText %}
-                                                            <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
-                                                        {% endif %}
-                                                    </span>
-                                                {% endif %}
-
-                                                <div
-                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
+                                            {% if item.iconType %}
+                                                {% from "components/icon/_macro.njk" import onsIcon %}
+                                                <span
+                                                    class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
                                                 >
-                                                    {{- item.title | default(row.title) | safe -}}
-                                                </div>
+                                                    {{-
+                                                        onsIcon({
+                                                            "iconType": item.iconType
+                                                        })
+                                                    -}}
+                                                    {% if item.iconVisuallyHiddenText %}
+                                                        <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
+                                                    {% endif %}
+                                                </span>
+                                            {% endif %}
 
-                                                {# Render section status for mobile if is hub #}
-                                                {% if variantHub and item.valueList %}
-                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
-                                                {% endif %}
-                                            </dt>
-                                            {% if item.valueList %}
-                                                <dd
-                                                    class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
-                                                    {% 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 %}
-                                                >
-                                                    {% if item.valueList | length == 1 %}
-                                                        <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
-                                                        {% if item.valueList[0].other or item.valueList[0].other == 0 %}
-                                                            <ul class="ons-u-mb-no">
-                                                                <li>{{ item.valueList[0].other | safe }}</li>
-                                                            </ul>
-                                                        {% endif %}
-                                                    {% else %}
+                                            <div
+                                                class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
+                                            >
+                                                {{- item.title | default(row.title) | safe -}}
+                                            </div>
+
+                                            {# Render section status for mobile if is hub #}
+                                            {% if variantHub and item.valueList %}
+                                                <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
+                                            {% endif %}
+                                        </dt>
+                                        {% if item.valueList %}
+                                            <dd
+                                                class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
+                                                {% 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 %}
+                                            >
+                                                {% if item.valueList | length == 1 %}
+                                                    <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
+                                                    {% if item.valueList[0].other or item.valueList[0].other == 0 %}
                                                         <ul class="ons-u-mb-no">
-                                                            {% for value in item.valueList %}
-                                                                <li>
-                                                                    <span class="ons-summary__text">{{ value.text | safe }}</span>
-                                                                    {% if value.other or value.other == 0 %}
-                                                                        <ul class="ons-u-mb-no">
-                                                                            <li>{{ value.other | safe }}</li>
-                                                                        </ul>
-                                                                    {% endif %}
-                                                                </li>
-                                                            {% endfor %}
+                                                            <li>{{ item.valueList[0].other | safe }}</li>
                                                         </ul>
                                                     {% endif %}
-                                                </dd>
-                                            {% endif %}
-                                            {% if item.actions %}
-                                                <dd class="ons-summary__actions">
-                                                    {% for action in item.actions %}
-                                                        {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
-                                                        <a
-                                                            href="{{ action.url }}"
-                                                            class="ons-summary__button"
-                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                {% else %}
+                                                    <ul class="ons-u-mb-no">
+                                                        {% for value in item.valueList %}
+                                                            <li>
+                                                                <span class="ons-summary__text">{{ value.text | safe }}</span>
+                                                                {% if value.other or value.other == 0 %}
+                                                                    <ul class="ons-u-mb-no">
+                                                                        <li>{{ value.other | safe }}</li>
+                                                                    </ul>
+                                                                {% endif %}
+                                                            </li>
+                                                        {% endfor %}
+                                                    </ul>
+                                                {% endif %}
+                                            </dd>
+                                        {% endif %}
+                                        {% if item.actions %}
+                                            <dd class="ons-summary__actions">
+                                                {% for action in item.actions %}
+                                                    {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
+                                                    <a
+                                                        href="{{ action.url }}"
+                                                        class="ons-summary__button"
+                                                        {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                    >
+                                                        <span class="ons-summary__button-text" aria-hidden="true">{{- action.text -}}</span>
+                                                        <span class="ons-u-vh"
+                                                            >{{ action.visuallyHiddenText | default (action.text) }}</span
                                                         >
-                                                            <span class="ons-summary__button-text" aria-hidden="true">
-                                                                {{- action.text -}}
-                                                            </span>
-                                                            <span class="ons-u-vh">{{ action.visuallyHiddenText }}</span>
-                                                        </a>
-                                                    {% endfor %}
-                                                </dd>
-                                            {% endif %}
-                                        </div>
+                                                    </a>
+                                                {% endfor %}
+                                            </dd>
+                                        {% endif %}
                                     {% endfor %}
                                 </div>
                             {% endfor %}
@@ -146,7 +141,7 @@
                                 </a>
                             {% endset %}
                             {% if params.variant == 'card' %}
-                                <div>{{ link | safe }}</div>
+                                <div class="ons-summary__link-container">{{ link | safe }}</div>
                             {% else %}
                                 {{ link | safe }}
                             {% endif %}