@ons/design-system 72.5.0 → 72.8.0

package/components/details-panel/_macro.njk

@@ -0,0 +1,41 @@
+{% macro onsDetailsPanel(params) %}
+    <div class="ons-details-panel ons-js-details" {% if params.open %}{{ ' ' }}data-open="true"{% endif %}>
+        <div class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
+            <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>
+                    <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
+                        >
+                        <span class="ons-details-panel__banner-detail-icon">
+                            {% from "components/icon/_macro.njk" import onsIcon %}
+                            {{
+                                onsIcon({
+                                    "iconType": "chevron"
+                                })
+                            }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ons-container ons-details-panel__content ons-js-details-content ons-u-pt-xl ons-u-pb-3xl">
+            {% for item in params.detailsItems %}
+                <div class="ons-details-panel__item">
+                    <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
+                        <h3 class="ons-details-panel__content-heading">{{ item.text }}</h3>
+                        <time class="ons-details-panel__content-date" datetime="{{ item.date.iso }}">{{ item.date.short }}</time>
+                    </div>
+                    <div class="ons-details-panel__content-description">
+                        <div class="ons-details-panel__content-text ons-u-mb-s">{{ item.description | safe }}</div>
+                        {% if item.url or item.text == 'Content' %}
+                            <a class="ons-details-panel__content-url" href="{{ item.url }}"> View superseded version</a>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endmacro %}

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

@@ -0,0 +1,54 @@
+/** @jest-environment jsdom */
+import * as cheerio from 'cheerio';
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+import { EXAMPLE_DETAILS_PANEL } from './_test-examples';
+
+describe('FOR: Macro: Details Panel', () => {
+    describe('GIVEN: Params: title', () => {
+        describe('WHEN: title param is provided', () => {
+            const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));
+            test('THEN: banner has the correct title', () => {
+                const contentTitle = $('.ons-details-panel__banner-title').text().replace(/\s+/g, ' ').trim();
+                expect(contentTitle).toBe('Correction and Notice');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: detailsItems', () => {
+        describe('WHEN: detailsItems is provided', () => {
+            const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            test('THEN: items have correct titles', () => {
+                const contentTitle0 = $('.ons-details-panel__content-heading').eq(0).text().trim();
+                const contentTitle1 = $('.ons-details-panel__content-heading').eq(1).text().trim();
+                expect(contentTitle0).toBe('Correction');
+                expect(contentTitle1).toBe('Notice');
+            });
+            test('THEN: items have correct dates', () => {
+                const dateText0 = $('.ons-details-panel__content-date').eq(0).text().trim();
+                const dateText1 = $('.ons-details-panel__content-date').eq(1).text().trim();
+
+                expect(dateText0).toBe('22nd January 2025, 4:30PM');
+                expect(dateText1).toBe('22nd January 2025');
+            });
+            test('THEN: items have correct description text', () => {
+                const contentdescriptionText0 = $('.ons-details-panel__content-text').eq(0).text().trim();
+                const contentdescriptionText1 = $('.ons-details-panel__content-text').eq(1).text().trim();
+
+                expect(contentdescriptionText0).toBe('description1');
+                expect(contentdescriptionText1).toBe('description2');
+            });
+            test('THEN: correction item has a valid link and text', () => {
+                const correctionLinkText = $('.ons-details-panel__content-url').eq(0).text().trim();
+                const correctionLinkUrl = $('.ons-details-panel__content-url').eq(0).attr('href');
+
+                expect(correctionLinkText).toBe('View superseded version');
+                expect(correctionLinkUrl).toBe('#0');
+            });
+        });
+    });
+});

package/components/details-panel/example-details-panel-open.njk

@@ -0,0 +1,29 @@
+{% from "components/details-panel/_macro.njk" import onsDetailsPanel %}
+
+{{
+    onsDetailsPanel({
+        "open": true,
+        "title": "Correction and Notice",
+        "detailsItems": [
+            {
+                "text": 'Correction',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
+                <p>ONS apologises for any inconvenience caused.</p>',
+                "url": '#0'
+            },
+            {
+                "text": 'Notice',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>To improve the timeliness of our publications, we have discontinued the previously published <a href="#0">Non-financial business economy<a>, <a href="#0">UK and regional (Annual Business Survey)</a>.
+                We will now deliver the UK and regional elements separately, in our <a href="#0">Non-financial business economy</a>, <a href="#0">UK (Annual Business Survey)</a> and <a href="#0">Non-financial business economy</a>, <a href="#0">regional (Annual Business Survey) bulletins</a>.</p>'
+            }
+        ]
+    })
+}}

package/components/details-panel/example-details-panel.njk

@@ -0,0 +1,28 @@
+{% from "components/details-panel/_macro.njk" import onsDetailsPanel %}
+
+{{
+    onsDetailsPanel({
+        "title": "Correction and Notice",
+        "detailsItems": [
+            {
+                "text": 'Correction',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
+                <p>ONS apologises for any inconvenience caused.</p>',
+                "url": '#0'
+            },
+            {
+                "text": 'Notice',
+                "date": {
+                    "iso": '2025-01-22T16:30Z',
+                    "short": '22nd January 2025, 4:30PM'
+                },
+                "description": '<p>To improve the timeliness of our publications, we have discontinued the previously published <a href="#0">Non-financial business economy<a>, <a href="#0">UK and regional (Annual Business Survey)</a>.
+                We will now deliver the UK and regional elements separately, in our <a href="#0">Non-financial business economy</a>, <a href="#0">UK (Annual Business Survey)</a> and <a href="#0">Non-financial business economy</a>, <a href="#0">regional (Annual Business Survey) bulletins</a>.</p>'
+            }
+        ]
+    })
+}}

package/components/hero/_hero.scss

@@ -1,5 +1,17 @@
 // 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 {
+    $root: &;
+
     background-color: var(--ons-color-hero-bg);
     display: flex;
     overflow: hidden;
@@ -71,56 +83,14 @@
         }
     }
 
-    &__badge-link {
-        display: block;
-    }
-
     &--topic {
         color: var(--ons-color-branded);
         @extend .ons-u-mb-no;
     }
 
-    &__container {
-        align-items: center;
-        display: flex;
-        min-height: 300px;
-        position: relative;
-
-        &--has-details {
-            align-items: flex-start; // Prevents undesired shift if not enough content
-        }
-    }
-
-    &__content {
-        @include mq(l) {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-    }
-
-    &__pre-title {
-        margin-bottom: 0.5rem;
-
-        @include mq('2xs', m) {
-            max-width: 145px;
-        }
-    }
-
-    &__details {
-        padding-bottom: 3.5rem;
-        padding-top: 2rem;
-        position: relative;
-        z-index: 5;
-    }
-
-    &__details:has(.ons-breadcrumbs) {
-        padding-top: 1rem;
-    }
-
     &--dark & {
         &__details {
-            color: var(--ons-color-text-inverse) !important;
+            color: var(--ons-color-text-inverse);
 
             a {
                 color: inherit;
@@ -135,6 +105,9 @@
                 color: inherit;
             }
         }
+        &--topic {
+            color: var(--ons-color-light-blue-grey);
+        }
     }
     &--navy-blue & {
         &__details {
@@ -145,6 +118,10 @@
             }
         }
 
+        &--topic {
+            color: var(--ons-color-light-blue-grey);
+        }
+
         &__circle-1 {
             @include mq(l) {
                 background-color: var(--ons-color-spring-green);
@@ -427,6 +404,83 @@
         }
     }
 
+    &--dark,
+    &--navy-blue {
+        .ons-breadcrumbs__link {
+            color: var(--ons-color-text-inverse);
+
+            &:hover {
+                color: var(--ons-color-text-inverse);
+                text-decoration: underline solid var(--ons-color-text-inverse) 2px;
+            }
+            &:focus {
+                color: var(--ons-color-text);
+            }
+            &:focus:hover {
+                color: var(--ons-color-text);
+                text-decoration: none;
+            }
+        }
+    }
+
+    &__badge-link {
+        display: block;
+        width: fit-content;
+    }
+
+    &__container {
+        align-items: center;
+        display: flex;
+        min-height: 300px;
+        position: relative;
+
+        &--has-details {
+            align-items: flex-start; // Prevents undesired shift if not enough content
+        }
+    }
+
+    &__content {
+        @include mq(l) {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+    }
+
+    &__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;
+
+        @include mq('2xs', m) {
+            max-width: 145px;
+        }
+    }
+
+    &__details {
+        padding-bottom: 3.5rem;
+        padding-top: 2rem;
+        position: relative;
+        z-index: 5;
+        #{$root}--with-breadcrumbs & {
+            padding-top: 1rem;
+        }
+    }
+
     &__title-container {
         @include mq(l) {
             display: grid;
@@ -435,3 +489,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

@@ -6,7 +6,7 @@
     {% set detailsColumns = params.detailsColumns | default ('8') %}
 
     <section
-        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
+        class="ons-hero ons-grid--gutterless{% if params.breadcrumbs %}{{ ' ' }}ons-hero--with-breadcrumbs{% endif %}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
         {% if params.variants == 'navy-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">
@@ -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-dark.njk

@@ -11,6 +11,6 @@
             "url": '#0',
             "text": 'Get started'
         },
-        "variants": ['dark']
+        "variants": 'dark'
     })
 }}

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/_macro.njk

@@ -13,7 +13,7 @@
         aria-label="Pagination ({{ position }})"
     >
         <div class="ons-pagination__position">{{ position }}</div>
-        <ul class="ons-pagination__items">
+        <ul class="ons-pagination__items{{ ' ons-pagination__items--no-previous' if currentPageIndex == 1 }}">
             {% if currentPageIndex != 1 %}
                 {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">

package/components/pagination/_pagination.scss

@@ -9,6 +9,12 @@ $pagination-item-width: 2.5rem;
     &__items {
         margin: 0 $pagination-item-padding * -1;
         padding: 0;
+
+        &--no-previous {
+            @include mq(m) {
+                margin: 0;
+            }
+        }
     }
 
     &__item {

package/components/summary/_macro.njk

@@ -77,7 +77,7 @@
                                         </dt>
                                         {% if item.valueList %}
                                             <dd
-                                                class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
+                                                class="ons-summary__values{{ ' ons-summary__column-size--2' if not item.actions }}"
                                                 {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                             >
                                                 {% if item.valueList | length == 1 %}
@@ -104,7 +104,7 @@
                                             </dd>
                                         {% endif %}
                                         {% if item.actions %}
-                                            <dd class="ons-summary__actions">
+                                            <dd class="ons-summary__actions{{ ' ons-summary__column-size--2' if not item.valueList }}" {% if item.id %}id="{{ item.id }}"{% endif %}>
                                                 {% for action in item.actions %}
                                                     {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                     <a