@ons/design-system 72.9.0 → 72.9.2

package/components/chart/_macro.spec.js

@@ -13,7 +13,6 @@ import {
     EXAMPLE_LINE_CHART_WITH_ANNOTATIONS_PARAMS,
     EXAMPLE_BAR_CHART_WITH_ANNOTATIONS_PARAMS,
     EXAMPLE_COLUMN_CHART_WITH_ANNOTATIONS_PARAMS,
-    EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
     EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
     EXAMPLE_SCATTER_CHART_PARAMS,
     EXAMPLE_AREA_CHART_PARAMS,
@@ -625,126 +624,6 @@ describe('Macro: Chart', () => {
         });
     });
 
-    describe('FOR: Bar Chart with Line', () => {
-        describe('GIVEN: Params: required', () => {
-            describe('WHEN: required params are provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_BAR_WITH_LINE_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
-
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
-
-                test('THEN: it includes one series of type "bar" and another of type "line"', () => {
-                    expect(configScript).toContain('"type":"bar"');
-                    expect(configScript).toContain('"type":"line"');
-                });
-
-                test('THEN: it renders the chart container with correct data attributes', () => {
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('bar');
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-theme')).toBe('alternate');
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-title')).toBe('Example Bar Chart');
-                    expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('bar-chart-123');
-                });
-
-                test('THEN: it includes the Highcharts JSON config', () => {
-                    expect(configScript).toContain('"text":"X Axis Title"');
-                    expect(configScript).toContain('"text":"Y Axis Title"');
-                });
-            });
-        });
-
-        describe('GIVEN: Params: Legend', () => {
-            describe('WHEN: legend is enabled', () => {
-                const $ = cheerio.load(renderComponent('chart', { ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS, legend: false }));
-
-                test('THEN: it renders the legend', () => {
-                    const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
-                    expect(configScript).toContain('"enabled":false');
-                });
-            });
-        });
-
-        describe('GIVEN: Params: Caption', () => {
-            describe('WHEN: caption is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
-                        caption: 'This is an example caption for the chart.',
-                    }),
-                );
-
-                test('THEN: it renders the caption when provided', () => {
-                    expect($('figcaption').text()).toBe('This is an example caption for the chart.');
-                });
-            });
-        });
-
-        describe('GIVEN: Params: Description', () => {
-            describe('WHEN: description is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
-                        description: 'An accessible description for screen readers.',
-                    }),
-                );
-
-                test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
-                });
-            });
-        });
-
-        describe('GIVEN: Params: Series: Type', () => {
-            describe('WHEN: a series has an invalid type', () => {
-                const invalidTypeParams = {
-                    ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
-                    series: [
-                        { name: 'Invalid Series', data: [5, 15, 25], type: 'scatter' },
-                        { name: 'Valid Line Series', data: [10, 20, 30], type: 'line' },
-                    ],
-                };
-
-                const $ = cheerio.load(renderComponent('chart', invalidTypeParams));
-                const configScript = $(`script[data-highcharts-config--bar-chart-123]`).html();
-
-                test('THEN: it defaults non-line series type to the chartType', () => {
-                    expect(configScript).not.toContain('"type":"scatter"');
-                    expect(configScript).toContain('"type":"bar"');
-                    expect(configScript).toContain('"type":"line"');
-                });
-            });
-        });
-
-        describe('GIVEN: Params: Download', () => {
-            describe('WHEN: download object are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_BAR_WITH_LINE_CHART_PARAMS,
-                        download: {
-                            title: 'Download Chart Data',
-                            itemsList: [
-                                { text: 'Download as PNG', url: 'https://example.com/chart.png' },
-                                { text: 'Download as CSV', url: 'https://example.com/chart.csv' },
-                            ],
-                        },
-                    }),
-                );
-
-                test('THEN: it renders the download section correctly', () => {
-                    expect($('.ons-chart__download-title').text()).toBe('Download Chart Data');
-
-                    const downloadLinks = $('.ons-chart__download-title').next().find('li a');
-                    expect(downloadLinks.eq(0).text()).toBe('Download as PNG');
-                    expect(downloadLinks.eq(0).attr('href')).toBe('https://example.com/chart.png');
-                    expect(downloadLinks.eq(1).text()).toBe('Download as CSV');
-                    expect(downloadLinks.eq(1).attr('href')).toBe('https://example.com/chart.csv');
-                });
-            });
-        });
-    });
-
     describe('FOR: Column Chart with Line', () => {
         describe('GIVEN: Params: required', () => {
             describe('WHEN: required params are provided', () => {
@@ -863,6 +742,23 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: ChartType', () => {
+            describe('WHEN: chartType is not compatible with line series', () => {
+                const params = {
+                    ...EXAMPLE_COLUMN_WITH_LINE_CHART_PARAMS,
+                    chartType: 'bar',
+                };
+
+                const $ = cheerio.load(renderComponent('chart', params));
+                const configScript = $('script[data-highcharts-config--column-chart-123]').html();
+
+                test('THEN: it falls back to chartType and does not include "line" series', () => {
+                    expect(configScript).not.toContain('"type":"line"');
+                    expect(configScript).toContain('"type":"bar"');
+                });
+            });
+        });
     });
 
     describe('FOR: Scatter chart', () => {

package/components/chart/area-chart.js

@@ -12,6 +12,7 @@ class AreaChart {
                     // 'rectangle' counterintuitively gives a circle, because the legend icon has a border radius of half it's height by default
                     legendSymbol: 'rectangle',
                     stacking: 'normal',
+                    lineWidth: 0,
                 },
                 series: {
                     marker: {

package/components/chart/bar-chart.js

@@ -125,9 +125,9 @@ class BarChart {
 
     // This updates the height of the vertical axis and overall chart to fit the number of categories
     // Note that the vertical axis on a bar chart is the x axis
-    updateBarChartHeight = (config, currentChart, useStackedLayout, numberOfExtraLines) => {
+    updateBarChartHeight = (config, currentChart, useStackedLayout) => {
         const numberOfCategories = config.xAxis.categories.length;
-        const numberOfSeries = currentChart.series.length - numberOfExtraLines; // Get number of bar series
+        const numberOfSeries = currentChart.series.length; // Get number of bar series
         let barHeight = 30; // Height of each individual bar - set in bar-chart-plot-options
         let groupSpacing = 0; // Space we want between category groups, or between series groups for cluster charts
         let categoriesTotalHeight = 0;

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();
@@ -141,9 +149,6 @@ class HighchartsBaseChart {
             if (this.chartType === 'column') {
                 this.config = this.mergeConfigs(this.config, columnChartOptions);
             }
-            if (this.chartType === 'bar') {
-                this.config = this.mergeConfigs(this.config, barChartOptions);
-            }
         }
 
         // Disable the legend for single series charts
@@ -220,7 +225,7 @@ class HighchartsBaseChart {
                 this.commonChartOptions.hideDataLabels(currentChart.series);
             }
             if (this.chartType === 'bar') {
-                this.barChart.updateBarChartHeight(this.config, currentChart, this.useStackedLayout, this.extraLines);
+                this.barChart.updateBarChartHeight(this.config, currentChart, this.useStackedLayout);
                 if (!this.hideDataLabels) {
                     this.barChart.postLoadDataLabels(currentChart);
                 } else {

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));

package/components/document-list/_document-list.scss

@@ -40,7 +40,7 @@
             .ons-document-list__item-image {
                 width: 248px;
 
-                & &__image-link {
+                & &__image {
                     &--placeholder {
                         height: 96px;
                     }
@@ -50,7 +50,7 @@
                     margin-right: 2.5rem;
                     width: 379px;
 
-                    & &__image-link {
+                    & &__image {
                         &--placeholder {
                             height: 248px;
                         }
@@ -100,7 +100,7 @@
     }
 
     &__item-image & {
-        &__image-link {
+        &__image {
             &--placeholder {
                 height: 96px;
             }
@@ -112,7 +112,7 @@
     }
 
     &__item-image--file & {
-        &__image-link {
+        &__image {
             border-color: var(--ons-color-borders);
 
             &--placeholder {
@@ -121,20 +121,12 @@
         }
     }
 
-    &__image-link {
+    &__image {
         border: 2px solid transparent;
         box-sizing: content-box;
         display: block;
         width: 100%;
 
-        &:focus {
-            background-color: var(--ons-color-placeholder) !important;
-            border: 2px solid var(--ons-color-borders-document-image-focus);
-            box-shadow: none;
-            outline: 4px solid var(--ons-color-focus) !important;
-            outline-offset: 0 !important;
-        }
-
         &--placeholder {
             background-clip: padding-box;
             background-color: var(--ons-color-placeholder);

package/components/document-list/_macro.njk

@@ -1,32 +1,29 @@
 {% macro onsDocumentList(params) %}
+    {% set titleTag = params.headingLevel | default(2) %}
+    {% set openingTag = "<h" ~ titleTag %}
+    {% set closingTag = "</h" ~ titleTag ~ ">" %}
     <ul
         {% if params.id %}id="{{ params.id }}"{% endif %}class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"
         {% 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 %}
     >
         {% for document in params.documents %}
-            {% set titleTag = params.headingLevel | default(2) %}
-            {% set openingTag = "<h" ~ titleTag %}
-            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {% set documentItem %}
                 {% if document.thumbnail %}
                     <div
                         class="ons-document-list__item-image{{ ' ons-document-list__item-image--file' if document.metadata.file }}"
                         aria-hidden="true"
                     >
-                        <a
-                            class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
-                            href="{{ document.title.url }}"
-                            tabindex="-1"
-                        >
-                            {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
-                                <img
-                                    srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
-                                    src="{{ document.thumbnail.smallSrc }}"
-                                    alt=""
-                                    loading="lazy"
-                                />
-                            {% endif %}
-                        </a>
+                        {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
+                            <img
+                                class="ons-document-list__image"
+                                srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
+                                src="{{ document.thumbnail.smallSrc }}"
+                                alt=""
+                                loading="lazy"
+                            />
+                        {% else %}
+                            <span class="ons-document-list__image ons-document-list__image--placeholder"> </span>
+                        {% endif %}
                     </div>
                 {% endif %}
 

package/components/document-list/_macro.spec.js

@@ -232,12 +232,12 @@ describe('FOR: Macro: Document list', () => {
             });
 
             test('THEN: has expected srcset attribute', () => {
-                const srcset = $('.ons-document-list__image-link img').attr('srcset');
+                const srcset = $('.ons-document-list__image').attr('srcset');
                 expect(srcset).toBe('/example-small.png 1x, /example-large.png 2x');
             });
 
             test('THEN: has expected src attribute', () => {
-                const src = $('.ons-document-list__image-link img').attr('src');
+                const src = $('.ons-document-list__image').attr('src');
                 expect(src).toBe('/example-small.png');
             });
         });
@@ -249,7 +249,7 @@ describe('FOR: Macro: Document list', () => {
                         documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, thumbnail: true }],
                     }),
                 );
-                expect($('.ons-document-list__image-link').hasClass('ons-document-list__image-link--placeholder')).toBe(true);
+                expect($('.ons-document-list__image').hasClass('ons-document-list__image--placeholder')).toBe(true);
             });
         });
     });