@ons/design-system 72.9.1 → 72.9.2

package/components/button/_button.scss

@@ -147,6 +147,15 @@ $button-shadow-size: 3px;
         top: ems($button-shadow-size);
     }
 
+    &.disabled {
+        cursor: not-allowed;
+        border: 0;
+
+        &:hover {
+            border: 0;
+        }
+    }
+
     // Small buttons
     &--small,
     &--mobile {
@@ -156,6 +165,7 @@ $button-shadow-size: 3px;
     &--small & {
         &__inner {
             padding: 0.5rem 0.75rem;
+
             .ons-icon {
                 height: 16px;
                 width: 16px;

package/components/card/_macro.njk

@@ -4,7 +4,7 @@
     {% set closingHeadingTag = "</h" + headingLevel + ">" %}
     {% set placeholderSrcset = (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderUrl if params.image.placeholderUrl else "") + "/img/large/placeholder-card.png 2x" %}
 
-    <div class="ons-card {% if params.variant == "feature" %}ons-card--feature ons-u-flex-grow{% endif %}">
+    <div class="ons-card{% if params.variant == 'feature' %}{{ ' ' }}ons-card--feature ons-u-flex-grow{% endif %}">
         {% set imageBlock %}
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
@@ -38,7 +38,7 @@
         {% endset %}
 
         {% if params.title.url %}
-            <a href="{{ params.title.url }}" class="ons-card__link {% if params.title.subtitle %}ons-u-mb-xs{% endif %}">
+            <a href="{{ params.title.url }}" class="ons-card__link{% if params.title.subtitle %}{{ ' ' }}ons-u-mb-xs{% endif %}">
                 {{ imageBlock | safe }}
                 {{ titleBlock | safe }}
             </a>
@@ -55,7 +55,7 @@
             <p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">{{ params.body.figure }}</p>
         {% endif %}
 
-        <p id="{{ params.body.id }}">{{ params.body.text }}</p>
+        <p id="{{ params.body.id }}" class="ons-card__body">{{ params.body.text }}</p>
 
         {%- if params.body.itemsList -%}
             {% from "components/list/_macro.njk" import onsList %}

package/components/card/_macro.spec.js

@@ -1,328 +1,185 @@
 /** @jest-environment jsdom */
 
 import * as cheerio from 'cheerio';
-
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_CARD_WITHOUT_IMAGE = {
-    title: {
-        text: 'Example card title',
-    },
-    body: {
-        text: 'Example card text.',
-        id: 'example-text-id',
-    },
-};
-
-const EXAMPLE_CARD_WITH_IMAGE = {
-    ...EXAMPLE_CARD_WITHOUT_IMAGE,
-    image: {
-        smallSrc: 'example-small.png',
-        largeSrc: 'example-large.png',
-        alt: 'Example alt text',
-    },
-};
-
-const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE = {
-    ...EXAMPLE_CARD_WITHOUT_IMAGE,
-    image: true,
-};
-
-const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH = {
-    ...EXAMPLE_CARD_WITHOUT_IMAGE,
-    image: {
-        placeholderUrl: '/placeholder-image-url',
-    },
-};
-
-const EXAMPLE_CARD_FEATURE_VARIANT = {
-    variant: 'feature',
-    title: {
-        text: 'Feature card title',
-        url: 'http://example.com',
-        subtitle: 'Optional subtitle',
-    },
-    body: {
-        figure: '123,456',
-        text: 'Example feature card text',
-        id: 'example-feature-text-id',
-    },
-};
-
-describe('macro: card', () => {
-    describe('mode: without image', () => {
-        it('passes jest-axe checks', async () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
-
-            const results = await axe($.html());
-            expect(results).toHaveNoViolations();
-        });
-
-        it('has the provided `title` text', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
-
-            expect($('.ons-card__title').text().trim()).toBe('Example card title');
-        });
-
-        it.each([
-            [1, 'h1'],
-            [4, 'h4'],
-        ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-            const $ = cheerio.load(
-                renderComponent('card', {
-                    title: {
-                        text: 'Example card title',
-                        headingLevel: headingLevel,
-                    },
-                    body: {
-                        text: 'Example card text.',
-                        id: 'example-text-id',
-                    },
-                }),
-            );
-
-            expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
-        });
-
-        it('has the provided `text` accessible via the `textId` identifier', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+import {
+    EXAMPLE_CARD,
+    EXAMPLE_CARD_WITH_IMAGE,
+    EXAMPLE_CARD_WITH_LIST,
+    EXAMPLE_CARD_FULL_EXAMPLE,
+    EXAMPLE_CARD_FEATURE_VARIANT,
+} from './_test_examples';
+
+describe('FOR: Macro: Card', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD));
+
+            test('THEN: jest-axe text pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
 
-            expect($('#example-text-id').text().trim()).toBe('Example card text.');
-        });
+            test('THEN: renders the title with the provided text', () => {
+                expect($('.ons-card__title').text().trim()).toBe('Example card title');
+            });
 
-        it('renders the provided `itemsList` using the `list` component', () => {
-            const faker = templateFaker();
-            const listsSpy = faker.spy('list');
-
-            faker.renderComponent('card', {
-                title: {
-                    text: 'Example card title',
-                },
-                body: {
-                    text: 'Example card text.',
-                    id: 'example-text-id',
-                    itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
-                },
+            test('THEN: renders the body with the provided id', () => {
+                expect($('.ons-card__body').attr('id')).toBe('example-text-id');
             });
 
-            expect(listsSpy.occurrences[0]).toEqual({
-                variants: 'dashed',
-                itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+            test('THEN: renders the body with the provided text', () => {
+                expect($('.ons-card__body').text().trim()).toBe('Example card text');
             });
         });
+    });
 
-        it('outputs a hyperlink with the provided `url`', () => {
-            const $ = cheerio.load(
-                renderComponent('card', {
-                    title: {
-                        text: 'Example card title',
-                        url: 'https://example.com',
-                    },
-                    body: {
-                        text: 'Example card text.',
-                        id: 'example-text-id',
-                    },
-                }),
-            );
+    describe('GIVEN: Params: figure', () => {
+        describe('WHEN: figure is provided', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FULL_EXAMPLE));
 
-            expect($('.ons-card__link').attr('href')).toBe('https://example.com');
+            test('THEN: it renders the provided figure', () => {
+                expect($('.ons-card__figure').text().trim()).toBe('123,456');
+            });
         });
     });
 
-    describe('mode: with image', () => {
-        it('passes jest-axe checks', async () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
-
-            const results = await axe($.html());
-            expect(results).toHaveNoViolations();
+    describe('GIVEN: Params: headingLevel', () => {
+        describe('WHEN: headingLevel is provided', () => {
+            it.each([
+                [1, 'h1'],
+                [4, 'h4'],
+            ])('THEN: it renders headings with the correct heading tag (%i -> <%s>)', (headingLevel, expectedTag) => {
+                const $ = cheerio.load(
+                    renderComponent('card', {
+                        ...EXAMPLE_CARD,
+                        title: {
+                            text: 'Example card title',
+                            headingLevel,
+                        },
+                    }),
+                );
+                const titleTag = $('.ons-card__title')[0].tagName;
+                expect(titleTag).toBe(expectedTag);
+            });
         });
+    });
 
-        it('has the provided `title` text', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
-
-            expect($('.ons-card__title').text().trim()).toBe('Example card title');
-        });
+    describe('GIVEN: Params: itemsList', () => {
+        describe('WHEN: itemsList is provided in the body', () => {
+            test('THEN: renders the list with the provided items', () => {
+                const faker = templateFaker();
+                const listsSpy = faker.spy('list');
 
-        it.each([
-            [1, 'h1'],
-            [4, 'h4'],
-        ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-            const $ = cheerio.load(
-                renderComponent('card', {
-                    title: {
-                        text: 'Example card title',
-                        headingLevel: headingLevel,
-                    },
-                    body: {
-                        text: 'Example card text.',
-                        id: 'example-text-id',
-                    },
-                    image: {
-                        smallSrc: 'example-small.png',
-                        largeSrc: 'example-large.png',
-                        alt: 'Example alt text',
-                    },
-                }),
-            );
+                faker.renderComponent('card', EXAMPLE_CARD_WITH_LIST);
 
-            expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
+                expect(listsSpy.occurrences[0]).toEqual({
+                    variants: 'dashed',
+                    itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+                });
+            });
         });
+    });
 
-        it('has the provided `text`', () => {
-            const $ = cheerio.load(
-                renderComponent('card', {
-                    ...EXAMPLE_CARD_WITH_IMAGE,
-                }),
-            );
-
-            expect($('#example-text-id').text().trim()).toBe('Example card text.');
+    describe('GIVEN: Params: title', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FULL_EXAMPLE));
+        describe('WHEN: url is provided', () => {
+            test('THEN: renders the title with the provided url', () => {
+                expect($('.ons-card__link').attr('href')).toBe('http://example.com');
+            });
         });
-
-        it('outputs a hyperlink with the provided `url`', () => {
-            const $ = cheerio.load(
-                renderComponent('card', {
-                    title: {
-                        text: 'Example card title',
-                        url: 'https://example.com',
-                    },
-                    body: {
-                        text: 'Example card text.',
-                        id: 'example-text-id',
-                    },
-                }),
-            );
-
-            expect($('.ons-card__link').attr('href')).toBe('https://example.com');
+        describe('WHEN: subtitle is provided', () => {
+            test('THEN: it renders the subtitle with the provided text', () => {
+                expect($('.ons-card__subtitle').text().trim()).toBe('Optional subtitle');
+            });
         });
+    });
 
-        describe('with a custom image', () => {
-            it('outputs an `img` element', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+    describe('GIVEN: Params: image', () => {
+        describe('WHEN: an image is provided', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-                expect($('.ons-card__image')[0].tagName).toBe('img');
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
             });
 
-            it('outputs an `img` element with the expected `srcset`', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+            test('THEN: it renders an image element', () => {
+                expect($('.ons-card__image')[0].tagName).toBe('img');
+            });
 
+            test('THEN: the image has the expected srcset attribute set', () => {
                 expect($('.ons-card__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
             });
 
-            it('outputs an `img` element with the expected `src`', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
-
+            test('THEN: the image has the expected src attribute source set', () => {
                 expect($('.ons-card__image').attr('src')).toBe('example-small.png');
             });
 
-            it('outputs an `img` element with the expected alt text', () => {
-                const $ = cheerio.load(
-                    renderComponent('card', {
-                        ...EXAMPLE_CARD_WITH_IMAGE,
-                        alt: 'Example alt text',
-                    }),
-                );
-
+            test('THEN: the image has the expected alt text', () => {
                 expect($('.ons-card__image').attr('alt')).toBe('Example alt text');
             });
         });
 
-        describe('with a default placeholder image', () => {
-            it('outputs an `img` element', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+        describe('WHEN: image is set to true', () => {
+            const $ = cheerio.load(renderComponent('card', { ...EXAMPLE_CARD, image: true }));
 
+            test('THEN: it outputs an image element', () => {
                 expect($('.ons-card__image')[0].tagName).toBe('img');
             });
 
-            it('outputs an `img` element with the expected `srcset`', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
-
+            test('THEN: the card is rendered with the srcset attribute set to the placeholder image', () => {
                 expect($('.ons-card__image').attr('srcset')).toBe('/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x');
             });
 
-            it('outputs an `img` element with the expected `src`', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
-
+            test('THEN: the card is rendered with the src attribute set to the placeholder image', () => {
                 expect($('.ons-card__image').attr('src')).toBe('/img/small/placeholder-card.png');
             });
 
-            it('outputs an `img` element with the expected empty alt text', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
-
+            test('THEN: the image has an empty alt attribute', () => {
                 expect($('.ons-card__image').attr('alt')).toBe('');
             });
         });
 
-        describe('with a default placeholder image with `placeholderUrl`', () => {
-            it('outputs an `img` element', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+        describe('WHEN: image placeholderUrl is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD,
+                    image: {
+                        placeholderUrl: '/placeholder-image-url',
+                    },
+                }),
+            );
 
+            test('THEN: it outputs an image element', () => {
                 expect($('.ons-card__image')[0].tagName).toBe('img');
             });
 
-            it('outputs an `img` element with the expected `srcset`', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
-
+            test('THEN: the image has the expected srcset attribute set with the custom path', () => {
                 expect($('.ons-card__image').attr('srcset')).toBe(
                     '/placeholder-image-url/img/small/placeholder-card.png 1x, /placeholder-image-url/img/large/placeholder-card.png 2x',
                 );
             });
 
-            it('outputs an `img` element with the expected `src`', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
-
+            test('THEN: the image has the expected src attribute set with the custom path', () => {
                 expect($('.ons-card__image').attr('src')).toBe('/placeholder-image-url/img/small/placeholder-card.png');
             });
 
-            it('outputs an `img` element with the expected empty alt text', () => {
-                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
-
+            test('THEN: the image has an empty alt attribute', () => {
                 expect($('.ons-card__image').attr('alt')).toBe('');
             });
         });
     });
 
-    describe('variant: feature', () => {
-        it('renders the `feature` variant with correct class', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
-            expect($('.ons-card').hasClass('ons-card--feature')).toBe(true);
-        });
-
-        it('has the provided `title` text', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
-
-            expect($('.ons-card__title').text().trim()).toBe('Feature card title');
-        });
-
-        it('has the provided `subitle` text', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
-
-            expect($('.ons-card__subtitle').text().trim()).toBe('Optional subtitle');
-        });
-
-        it('outputs a hyperlink with the provided `url`', () => {
+    describe('GIVEN: Params: variant', () => {
+        describe('WHEN: variant is set to feature', () => {
             const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
 
-            expect($('.ons-card__link').attr('href')).toBe('http://example.com');
-        });
-
-        it('has the provided `figure`', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
-
-            expect($('.ons-card__figure').text().trim()).toBe('123,456');
-        });
-
-        it('has the provided `text` accessible via the `textId` identifier', () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
-
-            expect($('#example-feature-text-id').text().trim()).toBe('Example feature card text');
-        });
-
-        it('passes jest-axe checks', async () => {
-            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
-
-            const results = await axe($.html());
-            expect(results).toHaveNoViolations();
+            test('THEN: it renders the card with the feature modifier class', () => {
+                expect($('.ons-card').hasClass('ons-card--feature')).toBe(true);
+            });
         });
     });
 });

package/components/card/_test_examples.js

@@ -0,0 +1,56 @@
+export const EXAMPLE_CARD = {
+    title: {
+        text: 'Example card title',
+    },
+    body: {
+        text: 'Example card text',
+        id: 'example-text-id',
+    },
+};
+
+export const EXAMPLE_CARD_FULL_EXAMPLE = {
+    title: {
+        text: 'Example card title',
+        url: 'http://example.com',
+        subtitle: 'Optional subtitle',
+    },
+    body: {
+        figure: '123,456',
+        text: 'Example card text',
+        id: 'example-text-id',
+    },
+};
+
+export const EXAMPLE_CARD_WITH_LIST = {
+    title: {
+        text: 'Example card title',
+    },
+    body: {
+        text: 'Example card text.',
+        id: 'example-text-id',
+        itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+    },
+};
+
+export const EXAMPLE_CARD_WITH_IMAGE = {
+    ...EXAMPLE_CARD,
+    image: {
+        smallSrc: 'example-small.png',
+        largeSrc: 'example-large.png',
+        alt: 'Example alt text',
+    },
+};
+
+export const EXAMPLE_CARD_FEATURE_VARIANT = {
+    variant: 'feature',
+    title: {
+        text: 'Feature card title',
+        url: 'http://example.com',
+        subtitle: 'Optional subtitle',
+    },
+    body: {
+        figure: '123,456',
+        text: 'Example feature card text',
+        id: 'example-feature-text-id',
+    },
+};

package/components/chart/chart.js

@@ -34,10 +34,18 @@ class HighchartsBaseChart {
         }
         this.percentageHeightDesktop = this.node.dataset.highchartsPercentageHeightDesktop;
         this.percentageHeightMobile = this.node.dataset.highchartsPercentageHeightMobile;
-        this.xAxisTickIntervalMobile = parseInt(this.node.dataset.highchartsXAxisTickIntervalMobile);
-        this.xAxisTickIntervalDesktop = parseInt(this.node.dataset.highchartsXAxisTickIntervalDesktop);
-        this.yAxisTickIntervalMobile = parseInt(this.node.dataset.highchartsYAxisTickIntervalMobile);
-        this.yAxisTickIntervalDesktop = parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop);
+        this.xAxisTickIntervalMobile = this.node.dataset.highchartsXAxisTickIntervalMobile
+            ? parseInt(this.node.dataset.highchartsXAxisTickIntervalMobile)
+            : undefined;
+        this.xAxisTickIntervalDesktop = this.node.dataset.highchartsXAxisTickIntervalDesktop
+            ? parseInt(this.node.dataset.highchartsXAxisTickIntervalDesktop)
+            : undefined;
+        this.yAxisTickIntervalMobile = this.node.dataset.highchartsYAxisTickIntervalMobile
+            ? parseInt(this.node.dataset.highchartsYAxisTickIntervalMobile)
+            : undefined;
+        this.yAxisTickIntervalDesktop = this.node.dataset.highchartsYAxisTickIntervalDesktop
+            ? parseInt(this.node.dataset.highchartsYAxisTickIntervalDesktop)
+            : undefined;
         this.commonChartOptions = new CommonChartOptions(this.xAxisTickIntervalDesktop, this.yAxisTickIntervalDesktop);
         this.specificChartOptions = new SpecificChartOptions(this.theme, this.chartType, this.config);
         this.lineChart = new LineChart();

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

@@ -183,10 +183,6 @@ class CommonChartOptions {
                 const { label, symbol } = legendItem || {};
 
                 if (seriesType === 'line') {
-                    symbol?.attr({
-                        x: 16, // Position the marker to the right of the line
-                    });
-
                     label?.attr({
                         x: 30, // Adjust label position to account for longer line
                     });

package/components/details-panel/_macro.njk

@@ -4,7 +4,11 @@
             <div class="ons-container ons-details-panel__banner-contents">
                 <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
                 <div class="ons-details-panel__banner-body">
-                    <h3 class="ons-details-panel__banner-title ons-u-mb-2xs">{{ params.title }}</h3>
+                    {% set titleTag = params.headingLevel | default(2) %}
+                    {% set openingTag = "<h" ~ titleTag %}
+                    {% set closingTag = "</h" ~ titleTag ~ ">" %}
+                    {{ openingTag | safe }}
+                    class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
                     <div class="ons-details-panel__banner-detail ons-js-details-heading">
                         <span class="ons-details-panel__banner-detail-title ons-js-corrections-details-title ons-u-mr-3xs"
                             >Show detail</span

package/components/details-panel/_macro.spec.js

@@ -15,6 +15,28 @@ describe('FOR: Macro: Details Panel', () => {
         });
     });
 
+    describe('GIVEN: Params: headingLevel', () => {
+        describe('WHEN: headingLevel is provided', () => {
+            const customParams = {
+                ...EXAMPLE_DETAILS_PANEL,
+                headingLevel: 3,
+            };
+            const $ = cheerio.load(renderComponent('details-panel', customParams));
+            test('THEN: banner title uses the correct heading level', () => {
+                const bannerTitle = $('.ons-details-panel__banner-title');
+                expect(bannerTitle.prop('tagName')).toBe('H3');
+            });
+        });
+
+        describe('WHEN: headingLevel is not provided', () => {
+            const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));
+            test('THEN: banner title uses default heading level (h2)', () => {
+                const bannerTitle = $('.ons-details-panel__banner-title');
+                expect(bannerTitle.prop('tagName')).toBe('H2');
+            });
+        });
+    });
+
     describe('GIVEN: Params: detailsItems', () => {
         describe('WHEN: detailsItems is provided', () => {
             const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));