@ons/design-system 72.5.0 → 72.6.0

package/components/chart/example-column-with-line-chart.njk

@@ -0,0 +1,62 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "column",
+        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "theme": "primary",
+        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "uuid",
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": true,
+        "xAxis": {
+            "categories": ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"],
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)"
+        },
+        "series": [
+            {
+                "data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+                "dataLabels": true,
+                "name": "Values"
+            },
+            {
+                "data": [
+                    ["One", 6],
+                    ["Two", 4],
+                    ["Three", 5],
+                    ["Four", 7],
+                    ["Five", 2],
+                    ["Six", 9],
+                    ["Seven", 3],
+                    ["Eight", 8],
+                    ["Nine", 2],
+                    ["Ten", 1]
+                ],
+                "dataLabels": false,
+                "name": "Another test data source",
+                "type": "line"
+            }
+        ]
+    })
+}}

package/components/chart/example-line-chart-with-annotations.njk

@@ -0,0 +1,235 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "alternate",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "legend": "true",
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015',
+                'Aug 2015',
+                'Sep 2015',
+                'Oct 2015',
+                'Nov 2015',
+                'Dec 2015',
+                'Jan 2016',
+                'Feb 2016',
+                'Mar 2016',
+                'Apr 2016',
+                'May 2016',
+                'Jun 2016',
+                'Jul 2016',
+                'Aug 2016',
+                'Sep 2016',
+                'Oct 2016',
+                'Nov 2016',
+                'Dec 2016',
+                'Jan 2017',
+                'Feb 2017',
+                'Mar 2017',
+                'Apr 2017',
+                'May 2017',
+                'Jun 2017',
+                'Jul 2017',
+                'Aug 2017',
+                'Sep 2017',
+                'Oct 2017',
+                'Nov 2017',
+                'Dec 2017',
+                'Jan 2018',
+                'Feb 2018',
+                'Mar 2018',
+                'Apr 2018',
+                'May 2018',
+                'Jun 2018',
+                'Jul 2018',
+                'Aug 2018',
+                'Sep 2018',
+                'Oct 2018',
+                'Nov 2018',
+                'Dec 2018',
+                'Jan 2019',
+                'Feb 2019',
+                'Mar 2019',
+                'Apr 2019',
+                'May 2019',
+                'Jun 2019',
+                'Jul 2019',
+                'Aug 2019',
+                'Sep 2019',
+                'Oct 2019',
+                'Nov 2019',
+                'Dec 2019',
+                'Jan 2020',
+                'Feb 2020',
+                'Mar 2020',
+                'Apr 2020',
+                'May 2020',
+                'Jun 2020',
+                'Jul 2020',
+                'Aug 2020',
+                'Sep 2020',
+                'Oct 2020',
+                'Nov 2020',
+                'Dec 2020',
+                'Jan 2021',
+                'Feb 2021',
+                'Mar 2021',
+                'Apr 2021',
+                'May 2021',
+                'Jun 2021',
+                'Jul 2021',
+                'Aug 2021',
+                'Sep 2021',
+                'Oct 2021',
+                'Nov 2021',
+                'Dec 2021',
+                'Jan 2022',
+                'Feb 2022',
+                'Mar 2022',
+                'Apr 2022',
+                'May 2022',
+                'Jun 2022',
+                'Jul 2022',
+                'Aug 2022',
+                'Sep 2022',
+                'Oct 2022',
+                'Nov 2022',
+                'Dec 2022',
+                'Jan 2023',
+                'Feb 2023',
+                'Mar 2023',
+                'Apr 2023',
+                'May 2023',
+                'Jun 2023',
+                'Jul 2023',
+                'Aug 2023',
+                'Sep 2023',
+                'Oct 2023',
+                'Nov 2023',
+                'Dec 2023',
+                'Jan 2024',
+                'Feb 2024',
+                'Mar 2024',
+                'Apr 2024',
+                'May 2024',
+                'Jun 2024',
+                'Jul 2024',
+                'Aug 2024',
+                'Sep 2024',
+                'Oct 2024'
+            ]
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}"
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90,
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
+                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
+                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
+                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
+                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
+                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
+                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
+                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
+                ]
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
+                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
+                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
+                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
+                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
+                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
+                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
+                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
+                    -1.4, -0.5, -0.9, -1.4, -0.3
+                ]
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
+                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
+                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
+                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
+                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
+                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
+                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
+                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
+                ]
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
+                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
+                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
+                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
+                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
+                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
+                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
+                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
+                ]
+            }
+        ],
+        "annotations": [
+            {
+                "text": "A test annotation",
+                "point": {"x": 10, "y": 1.3},
+                "labelOffsetX": 10,
+                "labelOffsetY": -50
+            },
+            {
+                "text": "Another test annotation",
+                "point": {"x": 48, "y": 1.8},
+                "labelOffsetX": 30,
+                "labelOffsetY": -70
+            }
+        ]
+    })
+}}

package/components/chart/example-line-chart.njk

@@ -27,7 +27,7 @@
                 "url": "#"
             }
         ]},
-        "legend": "true",
+        "legend": true,
         "xAxis": {
             "title": "Year",
             "type": "linear",
@@ -214,6 +214,8 @@
                     4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
                 ]
             }
-        ]
+        ],
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
     })
 }}

package/components/chart/example-stacked-column-chart.njk

@@ -60,6 +60,8 @@
         },
         "yAxis": {
             "title": "Percentage of GDP (%)"
-        }
+        },
+        "percentageHeightDesktop": 35,
+        "percentageHeightMobile": 90
     })
 }}

package/components/chart/line-chart.js

@@ -1,11 +1,6 @@
 class LineChart {
     getLineChartOptions = () => {
         return {
-            legend: {
-                // Specific legend symbol width and height for line charts
-                symbolWidth: 20,
-                symbolHeight: 3,
-            },
             plotOptions: {
                 line: {
                     lineWidth: 3,
@@ -22,8 +17,8 @@ class LineChart {
         };
     };
 
-    updateLastPointMarker = (currentChart) => {
-        currentChart.series.forEach((series) => {
+    updateLastPointMarker = (series) => {
+        series.forEach((series) => {
             // If markers are disabled, hide them all but the last point marker
             if (series.options.marker.enabled.enabled === undefined) {
                 const points = series.points;

package/components/hero/_hero.scss

@@ -1,4 +1,14 @@
 // Default
+@mixin panel-variant($name, $color, $color-bg) {
+    .ons-hero__panel {
+        &--#{$name} {
+            background: $color-bg;
+            border-color: $color !important;
+            outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+        }
+    }
+}
+
 .ons-hero {
     background-color: var(--ons-color-hero-bg);
     display: flex;
@@ -73,6 +83,7 @@
 
     &__badge-link {
         display: block;
+        width: fit-content;
     }
 
     &--topic {
@@ -99,6 +110,22 @@
         }
     }
 
+    &__information {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 1rem;
+
+        & .ons-hero__panel {
+            padding: 0.5rem 1rem;
+            border-left: 5px solid transparent;
+            @extend .ons-u-fs-r--b;
+        }
+
+        & .ons-hero__link {
+            padding: 0.5rem 0;
+        }
+    }
+
     &__pre-title {
         margin-bottom: 0.5rem;
 
@@ -435,3 +462,7 @@
         }
     }
 }
+
+@include panel-variant(ons-red, var(--ons-color-errors), var(--ons-color-errors-tint));
+@include panel-variant(ons-green, var(--ons-color-success), var(--ons-color-success-tint));
+@include panel-variant(ons-orange, var(--ons-color-pending), var(--ons-color-pending-tint));

package/components/hero/_macro.njk

@@ -77,15 +77,26 @@
                         </div>
                     {% endif %}
                 </div>
-
-                {% if params.variants == "grey" and params.censusLogo == true %}
-                    <div class="ons-hero__census-logo">
-                        {{-
-                            onsIcon({
-                                "iconType": 'census-logo'
-                            })
-                        -}}
-                    </div>
+                {% if params.variants == "grey" %}
+                    {% if params.censusLogo == true %}
+                        <div class="ons-hero__census-logo">
+                            {{-
+                                onsIcon({
+                                    "iconType": 'census-logo'
+                                })
+                            -}}
+                        </div>
+                    {% endif %}
+                    {% if params.informationPanel %}
+                        <div class="ons-hero__information ons-u-mt-s">
+                            <div class="ons-hero__panel ons-hero__panel--{{ params.informationPanel.panelType }}">
+                                {{- params.informationPanel.panelText -}}
+                            </div>
+                            <div class="ons-hero__link">
+                                <a href="{{ params.informationPanel.panelLink.url }}">{{ params.informationPanel.panelLink.text }}</a>
+                            </div>
+                        </div>
+                    {% endif %}
                 {% endif %}
 
                 {% if params.button %}

package/components/hero/_macro.spec.js

@@ -112,6 +112,22 @@ describe('macro: hero', () => {
         expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
     });
 
+    it('outputs the statistics badge as a link when officialStatisticsBadgeUrl is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                officialStatisticsBadge: true,
+                officialStatisticsBadgeUrl: 'https://example.com/badge',
+            }),
+        );
+
+        expect($('.ons-hero__badge-link').length).toBe(1);
+        expect($('.ons-hero__badge-link').attr('href')).toBe('https://example.com/badge');
+        expect($('.ons-hero__badge-link').attr('target')).toBe('_blank');
+        expect($('.ons-hero__badge-link').attr('rel')).toBe('noopener noreferrer');
+    });
+
     it('outputs the Census 2021 Logo when censusLogo is set to true and variants is set to "grey"', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey', censusLogo: true }));
 
@@ -136,6 +152,84 @@ describe('macro: hero', () => {
         expect($('.ons-hero--grey').length).toBe(1);
     });
 
+    describe('when `informationPanel` is provided and the variant is set to `grey`', () => {
+        describe('and `panelText` and `panelLink` are provided', () => {
+            it('renders the information panel with correct text and link`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-green',
+                            panelLink: {
+                                text: 'Some link text',
+                                url: '#0',
+                            },
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__information').length).toBe(1);
+                expect($('.ons-hero__panel').length).toBe(1);
+                expect($('.ons-hero__panel').text().trim()).toBe('Some panel text');
+                expect($('.ons-hero__link > a').text().trim()).toBe('Some link text');
+                expect($('.ons-hero__link > a').attr('href')).toBe('#0');
+            });
+        });
+
+        describe('and `panelType` is set to `ons-green`', () => {
+            it('renders the green information panel`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-green',
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__panel').hasClass('ons-hero__panel--ons-green')).toBe(true);
+            });
+        });
+
+        describe('and `panelType` is set to `ons-red`', () => {
+            it('renders the red information panel`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-red',
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__panel').hasClass('ons-hero__panel--ons-red')).toBe(true);
+            });
+        });
+
+        describe('and `panelType` is set to `ons-orange`', () => {
+            it('renders the orange information panel`', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-orange',
+                        },
+                    }),
+                );
+
+                expect($('.ons-hero__panel').hasClass('ons-hero__panel--ons-orange')).toBe(true);
+            });
+        });
+    });
+
     it('outputs the correct breadcrumbs', () => {
         const $ = cheerio.load(
             renderComponent('hero', {

package/components/hero/example-hero-grey.njk

@@ -9,6 +9,14 @@
         "detailsColumns": '12',
         "officialStatisticsBadge": true,
         "officialStatisticsBadgeUrl": 'https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/',
+        "informationPanel":{
+            "panelText": 'Latest release',
+            "panelType": 'ons-green',
+            "panelLink": {
+                "text": 'View previous releases',
+                "url": '#0'
+            }
+        },
         "topic": 'Statistical article',
         "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
         "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',

package/components/icon/_macro.njk

@@ -703,7 +703,7 @@
             xmlns="http://www.w3.org/2000/svg"
             width="75"
             height="90"
-            viewBox="-5 0 90 90"
+            viewBox="-6 0 90 90"
             fill="none"
             title="ons-official-statistics-badge"
             focusable="false"

package/components/pagination/_pagination.scss

@@ -7,7 +7,6 @@ $pagination-item-width: 2.5rem;
     }
 
     &__items {
-        margin: 0 $pagination-item-padding * -1;
         padding: 0;
     }
 
@@ -17,6 +16,7 @@ $pagination-item-width: 2.5rem;
 
         &--previous,
         &--next {
+            margin: 0 $pagination-item-padding * -1;
             display: inline-block;
         }
 
@@ -25,6 +25,12 @@ $pagination-item-width: 2.5rem;
                 display: inline-block;
             }
         }
+
+        @include mq('2xs', m) {
+            &--previous ~ &--next {
+                margin: 0;
+            }
+        }
     }
 
     &__item,

package/components/summary/_macro.njk

@@ -104,7 +104,7 @@
                                             </dd>
                                         {% endif %}
                                         {% if item.actions %}
-                                            <dd class="ons-summary__actions">
+                                            <dd class="ons-summary__actions" {% if item.id %}id="{{ item.id }}"{% endif %}>
                                                 {% for action in item.actions %}
                                                     {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                     <a

package/components/summary/_macro.spec.js

@@ -514,6 +514,12 @@ describe('macro: summary', () => {
                 ).toBe('Action 2');
             });
 
+            it('has the correct `id` added to the actions', () => {
+                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
+
+                expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').attr('id')).toBe('item-id-2');
+            });
+
             it('has the correct visually hidden <span> text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));