@ons/design-system 55.2.0 → 56.0.1

package/components/input/_macro.spec.js

@@ -41,6 +41,7 @@ const EXAMPLE_WITH_SEARCH = {
     attributes: { a: 42 },
     classes: 'extra-search-button-class',
     iconType: 'search',
+    visuallyHideButtonText: true,
   },
 };
 
@@ -540,6 +541,7 @@ describe('macro: input', () => {
           attributes: { a: 42 },
           classes: 'extra-search-button-class',
           iconType: 'search',
+          visuallyHideButtonText: true,
         },
       });
     });

package/components/modal/_macro.njk

@@ -5,6 +5,7 @@
         role="dialog"
         aria-labelledby="ons-modal-title"
         {% 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 %}
+        {% if params.enableGA == true %}data-enable-ga='true'{% endif %}
     >
         <div class="ons-modal__content">
             <h2 id="ons-modal-title" class="ons-modal__title">

package/components/modal/modal.js

@@ -8,8 +8,11 @@ export default class Modal {
     this.component = component;
     this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
     this.closeButton = component.querySelector('.ons-js-modal-btn');
+    this.setGaAttributes = component.getAttribute('data-enable-ga');
     this.lastFocusedEl = null;
     this.dialogCSSSupported = true;
+    this.modalType = this.component.classList.contains('ons-js-timeout-modal') ? 'Timeout' : 'Generic';
+
     this.initialise();
   }
 
@@ -26,6 +29,10 @@ export default class Modal {
     if (this.closeButton) {
       this.closeButton.addEventListener('click', this.closeDialog.bind(this));
     }
+
+    if (this.modalType !== 'Timeout') {
+      window.addEventListener('keydown', this.escToClose.bind(this));
+    }
   }
 
   dialogSupported() {
@@ -60,6 +67,16 @@ export default class Modal {
       } else {
         this.component.showModal();
       }
+
+      if (this.setGaAttributes) {
+        if (event) {
+          this.component.setAttribute('data-ga-action', `Modal opened by ${event.type} event`);
+        } else {
+          this.component.setAttribute('data-ga-action', 'Modal opened by timed event');
+        }
+        this.component.setAttribute('data-ga-label', `${this.modalType} modal opened`);
+        this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+      }
     }
   }
 
@@ -96,6 +113,22 @@ export default class Modal {
 
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+
+      if (this.setGaAttributes) {
+        if (event) {
+          this.component.setAttribute('data-ga-action', `Modal closed by ${event.type} event`);
+        } else {
+          this.component.setAttribute('data-ga-action', 'Modal closed by timed event');
+        }
+        this.component.setAttribute('data-ga-label', `${this.modalType} modal closed`);
+        this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+      }
+    }
+  }
+
+  escToClose(event) {
+    if (this.isDialogOpen() && event.keyCode === 27) {
+      this.closeDialog(event);
     }
   }
 }

package/components/modal/modal.spec.js

@@ -55,5 +55,81 @@ describe('script: modal', () => {
         expect(activeElementId).toBe('launcher');
       });
     });
+
+    describe('when the `esc` key is pressed', () => {
+      beforeEach(async () => {
+        await page.focus('.ons-js-modal-btn');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('Escape');
+      });
+
+      it('closes the modal', async () => {
+        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        expect(modalIsVisible).toBe(false);
+      });
+    });
+  });
+
+  describe('when GA tracking is enabled', () => {
+    beforeEach(async () => {
+      const component = renderComponent('modal', { ...EXAMPLE_MODAL, enableGA: true });
+      const template = `
+        <div class="ons-page">
+          <button id="launcher" data-modal-id="dialog">Launcher</button> 
+          ${component}
+        </div>
+    `;
+      await setTestPage('/test', template);
+    });
+
+    describe('when the modal is launched by a click event', () => {
+      beforeEach(async () => {
+        await page.focus('#launcher');
+        await page.keyboard.press('Enter');
+      });
+
+      it('has the correct attributes set on the modal', async () => {
+        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
+        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
+        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
+        expect(gaLabel).toBe('Generic modal opened');
+        expect(gaAction).toBe('Modal opened by click event');
+        expect(gaCategory).toBe('Generic modal');
+      });
+    });
+
+    describe('when the modal is closed by a click event', () => {
+      beforeEach(async () => {
+        await page.focus('#launcher');
+        await page.keyboard.press('Enter');
+        await page.click('.ons-js-modal-btn');
+      });
+
+      it('has the correct attributes set on the modal', async () => {
+        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
+        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
+        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
+        expect(gaLabel).toBe('Generic modal closed');
+        expect(gaAction).toBe('Modal closed by click event');
+        expect(gaCategory).toBe('Generic modal');
+      });
+    });
+
+    describe('when the modal is closed by `escape` keypress event', () => {
+      beforeEach(async () => {
+        await page.focus('#launcher');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('Escape');
+      });
+
+      it('has the correct attributes set on the modal', async () => {
+        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
+        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
+        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
+        expect(gaLabel).toBe('Generic modal closed');
+        expect(gaAction).toBe('Modal closed by keydown event');
+        expect(gaCategory).toBe('Generic modal');
+      });
+    });
   });
 });

package/components/navigation/_macro.njk

@@ -64,8 +64,9 @@
         <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
             {{ onsButton({
                 "text": params.navigation.currentPageTitle,
-                "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
-                "buttonStyle": "mobile",
+                "classes": "ons-u-d-no ons-js-sub-navigation-button",
+                "type": "button",
+                "variants": ["mobile", "dropdown"],
                 "attributes": {
                     "aria-label": "Toggle section navigation",
                     "aria-controls": params.navigation.subNavigation.id,

package/components/navigation/_macro.spec.js

@@ -206,8 +206,9 @@ describe('macro: navigation', () => {
 
       expect(buttonSpy.occurrences).toContainEqual({
         text: 'Main nav item 2',
-        classes: 'ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown',
-        buttonStyle: 'mobile',
+        classes: 'ons-u-d-no ons-js-sub-navigation-button',
+        variants: ['mobile', 'dropdown'],
+        type: 'button',
         attributes: {
           'aria-label': 'Toggle section navigation',
           'aria-controls': 'sub-nav',

package/components/question/_macro.njk

@@ -68,7 +68,7 @@
         {% if params.legendIsQuestionTitle %}
             {% from "components/fieldset/_macro.njk" import onsFieldset %}
 
-            {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
+            {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
             {% set content = caller() if caller %}
             <div class="ons-question__answer ons-u-mb-m">
                 {% call onsFieldset({
@@ -125,7 +125,7 @@
         {{
             onsButton({
                 "id": params.submitButton.id,
-                "submitType": params.submitButton.submitType,
+                "variants": params.submitButton.variants,
                 "text": params.submitButton.text | default ('Save and continue'),
                 "classes": params.submitButton.classes,
                 "attributes": params.submitButton.attributes

package/components/question/_macro.spec.js

@@ -47,7 +47,7 @@ const EXAMPLE_QUESTION_BUTTON = {
   ...EXAMPLE_QUESTION_BASIC,
   submitButton: {
     id: 'button-id',
-    submitType: 'button',
+    variants: 'timer',
     text: 'Button text',
   },
 };
@@ -252,7 +252,7 @@ describe('macro: question', () => {
 
       faker.renderComponent('question', EXAMPLE_QUESTION_BUTTON);
 
-      expect(buttonSpy.occurrences[0]).toHaveProperty('submitType', 'button');
+      expect(buttonSpy.occurrences[0]).toHaveProperty('variants', 'timer');
       expect(buttonSpy.occurrences[0]).toHaveProperty('id', 'button-id');
       expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Button text');
     });

package/components/question/_question.scss

@@ -6,7 +6,7 @@
 
     em,
     .ons-highlight {
-      background-color: $color-highlight;
+      @extend .ons-highlight;
     }
     mark,
     .ons-instruction {

package/components/relationships/_macro.njk

@@ -9,7 +9,8 @@
             "name": params.name,
             "dontWrap": params.dontWrap,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "radios": params.radios
+            "radios": params.radios,
+            "error": params.error
         }) }}
         <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no" aria-live="polite">{{ params.playback | safe }}</p>
     </div>

package/components/search/_macro.njk

@@ -5,15 +5,25 @@
 
     <div class="ons-search-component">
         {{ content | safe }}
+            
+        {%- set buttonLabel -%}
+            {%- if params.searchButton.visuallyHideButtonText == true -%}
+                <span class="ons-u-vh">{{ params.searchButton.text }}</span>
+            {%- else -%}
+                {{ params.searchButton.text }}
+            {%- endif -%}
+        {%- endset -%}
+
         {{
             onsButton({
                 "type": params.searchButton.type,
-                "text": params.searchButton.text,
+                "html": buttonLabel,
                 "id": params.searchButton.id,
                 "variants": 'small',
                 "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                 "attributes": params.searchButton.attributes,
-                "iconType": params.searchButton.iconType
+                "iconType": params.searchButton.iconType,
+                "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'
             })
         }}
     </div>

package/components/search/_macro.spec.js

@@ -2,7 +2,6 @@
 
 import * as cheerio from 'cheerio';
 
-import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SEARCH = {
@@ -34,11 +33,37 @@ describe('macro: search', () => {
     expect(buttonSpy.occurrences[0]).toEqual({
       id: 'search-button-id',
       type: 'button',
-      text: 'Search for address',
+      html: 'Search for address',
       variants: 'small',
       classes: 'ons-search__btn ons-u-mt-xs@xxs@s extra-search-button-class',
       attributes: EXAMPLE_SEARCH.searchButton.attributes,
       iconType: 'search',
+      iconPosition: 'before',
+    });
+  });
+
+  it('renders button component with a visibly hidden label when specified', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    faker.renderComponent('input', {
+      searchButton: {
+        id: 'search-button-id',
+        type: 'button',
+        text: 'Search for address',
+        iconType: 'search',
+        visuallyHideButtonText: true,
+      },
+    });
+
+    expect(buttonSpy.occurrences[0]).toEqual({
+      id: 'search-button-id',
+      type: 'button',
+      html: '<span class="ons-u-vh">Search for address</span>',
+      variants: 'small',
+      classes: 'ons-search__btn ons-u-mt-xs@xxs@s',
+      iconPosition: 'only',
+      iconType: 'search',
     });
   });
 });

package/components/summary/_macro.njk

@@ -20,37 +20,30 @@
                     {% if group.groupTitle %}
                         <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
                     {% endif %}
-                    {% if group.headers and group.rows %}
-                        <table class="ons-summary__items">
-                            <thead class="ons-u-vh">
-                                <tr>
-                                    {% for header in group.headers %}
-                                        <th>{{ header }}</th>
-                                    {% endfor %}
-                                </tr>
-                            </thead>
+                    {% if group.rows %}
+                        <div class="ons-summary__items">
 
                             {% for row in (group.rows if group.rows is iterable else group.rows.items()) %}
                                 {% set itemClass = "" %}
                                 {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
                                 {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
 
-                                <tbody {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
-                                    {% if row.errorMessage or (row.rowItems | length > 1 and row.rowTitle) %}
-                                        <tr class="ons-summary__row">
-                                            <th colspan="3" class="ons-summary__row-title ons-u-fs-r">{{ row.errorMessage or row.rowTitle }}</th>
-                                        </tr>
+                                <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>
+                                    {% endif %}
+                                    {% if row.rowItems | length > 1 and row.rowTitle %}
+                                        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">{{ row.rowTitle }}</div>
                                     {% endif %}
 
                                     {% for rowItem in row.rowItems %}
-                                        <tr {% if rowItem.id %}id="{{ rowItem.id }}" {% endif %}class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}">
-                                            <td
-                                                class="ons-summary__item-title"
+                                        <dl class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}"{% if rowItem.id %} id="{{ rowItem.id }}"{% endif %}>
+                                            <dt class="ons-summary__item-title{% if not rowItem.actions %} ons-summary__item-title--2{% endif %}"
                                                 {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                             >
                                                 {% if rowItem.iconType %}
                                                     {% from "components/icons/_macro.njk" import onsIcon %}
-                                                    <span class="ons-summary__item-title-icon {% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
+                                                    <span class="ons-summary__item-title-icon{% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
                                                         {{
                                                             onsIcon({
                                                                 "iconType": rowItem.iconType
@@ -59,17 +52,18 @@
                                                     </span>
                                                 {% endif %}
 
-                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">{{ rowItem.rowTitle | default(row.rowTitle) | safe }}</div>
+                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">
+                                                    {{- rowItem.rowTitle | default(row.rowTitle) | safe -}}
+                                                </div>
 
                                                 {# Render section status for mobile if is hub #}
                                                 {% if params.hub and rowItem.valueList %}
-                                                    <span class="ons-u-d-no@s ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
+                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
                                                 {% endif %}
-                                            </td>
+                                            </dt>
                                             {% if rowItem.valueList %}
-                                                <td
+                                                <dd
                                                     class="ons-summary__values"
-                                                    {% if rowItem.actions == null %} colspan="2"{% endif %}
                                                     {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                 >
                                                     {% if rowItem.valueList | length == 1 %}
@@ -93,10 +87,10 @@
                                                             {% endfor %}
                                                         </ul>
                                                     {% endif %}
-                                                </td>
+                                                </dd>
                                             {% endif %}
                                             {% if rowItem.actions %}
-                                                <td class="ons-summary__actions">
+                                                <dd class="ons-summary__actions">
                                                     {% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
                                                         {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                         <a
@@ -106,13 +100,13 @@
                                                             {% 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 %}
                                                         >{{ action.text }}</a>
                                                     {% endfor %}
-                                                </td>
+                                                </dd>
                                             {% endif %}
-                                        </tr>
+                                        </dl>
                                     {% endfor %}
-                                </tbody>
+                                </div>
                             {% endfor %}
-                        </table>
+                        </div>
                     {% elif group.placeholderText %}
                         <span class="ons-summary__placeholder">{{ group.placeholderText }}</span>
                     {% endif %}

package/components/summary/_macro.spec.js

@@ -203,36 +203,28 @@ describe('macro: summary', () => {
     });
 
     describe('part: row', () => {
-      it('has the `headers` values displayed in th elements', () => {
-        const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
-
-        expect($('.ons-summary__items thead tr th:nth-child(1)').text()).toBe('Header 1');
-        expect($('.ons-summary__items thead tr th:nth-child(2)').text()).toBe('Header 2');
-        expect($('.ons-summary__items thead tr th:nth-child(3)').text()).toBe('Header 3');
-      });
-
       it('has the correct row class when `error` is `true`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2)').hasClass('ons-summary__item--error')).toBe(true);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(2)').hasClass('ons-summary__item--error')).toBe(true);
       });
 
       it('has the correct row class when `total` is `true`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true);
       });
 
       it('displays the `rowTitle` text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3');
       });
 
       it('overrides the `rowTitle` with the `errorMessage` if provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__row-title').text()).toBe('there are errors');
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row-title--error').text()).toBe('there are errors');
       });
 
       it('has the correct row `id` for each row', () => {
@@ -262,7 +254,7 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(1) .ons-summary__item--text')
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text')
             .text()
             .trim(),
         ).toBe('row title 1');
@@ -289,12 +281,6 @@ describe('macro: summary', () => {
         expect($('.ons-summary__item--text').hasClass('ons-summary__item-title--text')).toBe(true);
       });
 
-      it('has a colspan attribute on the values td if there are no `actions`', () => {
-        const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
-
-        expect($('.ons-summary__items tbody:nth-of-type(1) .ons-summary__values').attr('colspan')).toBe('2');
-      });
-
       it('has custom `attributes`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
@@ -308,7 +294,7 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(1) tr .ons-summary__values .ons-summary__text')
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values .ons-summary__text')
             .text()
             .trim(),
         ).toBe('row value 1');
@@ -318,7 +304,7 @@ describe('macro: summary', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(1) tr .ons-summary__values ul li')
+          $('.ons-summary__items .ons-summary__item:nth-of-type(1) dl .ons-summary__values ul li')
             .text()
             .trim(),
         ).toBe('other value');
@@ -327,7 +313,7 @@ describe('macro: summary', () => {
       it('wraps the `valueList` in a ul if multiple values provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(3) .ons-summary__values ul').length).toBe(1);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__values ul').length).toBe(1);
       });
     });
 
@@ -335,43 +321,55 @@ describe('macro: summary', () => {
       it('has a spacer element if multiple actions are provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__spacer').length).toBe(1);
+        expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__spacer').length).toBe(1);
       });
 
       it('has the correct `url` for each action provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('href')).toBe(
-          '#1',
-        );
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr('href')).toBe('#2');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('href'),
+        ).toBe('#1');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr('href'),
+        ).toBe('#2');
       });
 
       it('has the action `text` for each action provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text()).toBe(
-          'Action 1',
-        );
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text()).toBe('Action 2');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
+        ).toBe('Action 1');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
+        ).toBe('Action 2');
       });
 
       it('has the `aria-label` provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('aria-label'),
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr(
+            'aria-label',
+          ),
         ).toBe('action aria label 1');
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr('aria-label')).toBe(
-          'action aria label 2',
-        );
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr(
+            'aria-label',
+          ),
+        ).toBe('action aria label 2');
       });
 
       it('has custom `attributes`', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('a')).toBe('abc');
-        expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('b')).toBe('def');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('a'),
+        ).toBe('abc');
+        expect(
+          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr('b'),
+        ).toBe('def');
       });
     });
   });
@@ -423,7 +421,9 @@ describe('macro: summary', () => {
         }),
       );
 
-      expect($('.ons-summary__items tbody:nth-of-type(2) .ons-summary__item-title span').text()).toBe(' — row value 2');
+      expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row .ons-summary__item-title span').text()).toBe(
+        ' — row value 2',
+      );
     });
   });