@ons/design-system 72.9.0 → 72.9.1

package/components/card/_macro.njk

@@ -5,7 +5,7 @@
     {% 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 %}">
-        <a href="{{ params.title.url }}" class="ons-card__link {% if params.title.subtitle %}ons-u-mb-xs{% endif %}">
+        {% set imageBlock %}
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
                     <img
@@ -29,10 +29,23 @@
                     />
                 {% endif %}
             {%- endif -%}
+        {% endset %}
+
+        {% set titleBlock %}
             {{ openingHeadingTag | safe }}
             class="ons-card__title {{ params.title.classes | default('ons-u-fs-m') }}" id="{{ params.title.id }}"> {{ params.title.text }}
             {{ closingHeadingTag | safe }}
-        </a>
+        {% endset %}
+
+        {% if params.title.url %}
+            <a href="{{ params.title.url }}" class="ons-card__link {% if params.title.subtitle %}ons-u-mb-xs{% endif %}">
+                {{ imageBlock | safe }}
+                {{ titleBlock | safe }}
+            </a>
+        {% else %}
+            {{ imageBlock | safe }}
+            {{ titleBlock | safe }}
+        {% endif %}
 
         {% if params.title.subtitle %}
             <p class="ons-card__subtitle ons-u-fs-s">{{ params.title.subtitle }}</p>

package/components/card/example-card-set-with-headline-figures.njk

@@ -9,7 +9,6 @@
                     "title": {
                         "id": 'card-set-1',
                         "text": 'Deaths registered annually',
-                        "url": '#0',
                         "subtitle": 'England and Wales'
                     },
                     "body":{
@@ -28,7 +27,6 @@
                     "title": {
                         "id": 'card-set-2',
                         "text": 'Alcohol-specific deaths',
-                        "url": '#0',
                         "subtitle": 'UK'
                     },
                     "body":{
@@ -47,8 +45,7 @@
                     "title": {
                         "id": 'card-set-3',
                         "text": 'Suicides registered',
-                        "subtitle": 'England and Wales',
-                        "url": '#0'
+                        "subtitle": 'England and Wales'
                     },
                     "body":{
                         "id": 'text3',

package/components/chart/_macro.njk

@@ -2,6 +2,7 @@
 
 {% macro onsChart(params) %}
     {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area'] %}
+    {% set supportedChartTypesWithLine = ['column'] %}
 
     {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
         {% set headingLevel = params.headingLevel %}
@@ -94,7 +95,7 @@
                         "enabled": item.dataLabels if item.dataLabels else false
                     },
                     "connectNulls": item.connectNulls if item.connectNulls else false,
-                    "type": item.type if item.type and item.type == 'line' else params.chartType
+                    "type": item.type if item.type and item.type == 'line' and params.chartType in supportedChartTypesWithLine else params.chartType
                 }
             %}
             {# Use `set` tag to avoid printing the return value of extend #}

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

@@ -141,9 +141,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 +217,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/table-of-contents/_macro.njk

@@ -61,17 +61,7 @@
 
         {% if params.button %}
             <div class="ons-table-of-contents__button ons-u-pt-l">
-                {% set allVariants = ['small', 'secondary'] %}
-
-                {% if params.button.variants %}
-                    {% if params.button.variants is string %}
-                        {% set allVariants = (allVariants.push(params.button.variants), allVariants) %}
-                    {% else %}
-                        {% for variant in params.button.variants %}
-                            {% set allVariants = (allVariants.push(variant), allVariants) %}
-                        {% endfor %}
-                    {% endif %}
-                {% endif %}
+                {% set allVariants = ['small', 'secondary', 'print'] %}
 
                 {{
                     onsButton({

package/components/table-of-contents/example-table-of-contents-related-links-with-button.njk

@@ -53,8 +53,7 @@
             ]
         },
         "button": {
-            "text": 'Save or print this page',
-            "variants": 'print'
+            "text": 'Save or print this page'
         }
     })
 -}}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "72.9.0",
+    "version": "72.9.1",
     "main": "index.js",
     "license": "MIT",
     "author": {