@ons/design-system 72.10.3 → 72.10.4

package/components/details-panel/_macro.njk

@@ -1,6 +1,9 @@
 {% 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">
+    {% set openText = params.openText | default("Show detail") %}
+    {% set closeText = params.closeText | default("Hide detail") %}
+
+    <details class="ons-details-panel" {% if params.open %}{{ ' ' }}data-open{% endif %}>
+        <summary 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">
@@ -9,10 +12,11 @@
                     {% 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
-                        >
+                    <div class="ons-details-panel__banner-detail">
+                        <span class="ons-details-panel__banner-detail-title ons-u-mr-3xs">
+                            <span class="ons-details-panel__banner-detail-title--open"> {{ openText }} </span>
+                            <span class="ons-details-panel__banner-detail-title--close"> {{ closeText }} </span>
+                        </span>
                         <span class="ons-details-panel__banner-detail-icon">
                             {% from "components/icon/_macro.njk" import onsIcon %}
                             {{
@@ -24,22 +28,24 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="ons-container ons-details-panel__content ons-js-details-content ons-u-pt-xl ons-u-pb-3xl">
+        </summary>
+        <div class="ons-container ons-details-panel__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__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
                     <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
-                        <h3 class="ons-details-panel__content-heading">{{ item.text }}</h3>
+                        <h3 class="ons-details-panel__content-heading ons-u-fs-r--b ons-u-mb-no">{{ 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>
+                            <a class="ons-details-panel__content-url" href="{{ item.url }}">
+                                {{ item.urlText | default("View superseded version") }}
+                            </a>
                         {% endif %}
                     </div>
                 </div>
             {% endfor %}
         </div>
-    </div>
+    </details>
 {% endmacro %}

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

@@ -3,6 +3,7 @@
 {{
     onsDetailsPanel({
         "title": "Correction and Notice",
+        "headingLevel": 3,
         "detailsItems": [
             {
                 "text": 'Correction',

package/components/featured-article/_macro.njk

@@ -0,0 +1,76 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+{% from "components/image/_macro.njk" import onsImage %}
+
+{% macro onsFeaturedArticle(params) %}
+    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set openingArticleTitleTag = "<h" ~ headingLevel %}
+    {% set closingArticleTitleTag = "</h" ~ headingLevel ~ ">" %}
+
+    <div class="ons-featured">
+        {{ openingArticleTitleTag | safe }} class="ons-featured__title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+        <a href="{{ params.title.url }}">{{ params.title.text }}</a>
+        {{ closingArticleTitleTag | safe }}
+
+        {%- if params.metadata -%}
+            {% set metadata = params.metadata %}
+            <ul class="ons-featured__item-metadata">
+                {%- if metadata.date -%}
+                    <li class="ons-featured__item-attribute">
+                        {% set prefixClass = "ons-u-fw-b" if metadata.date.showPrefix == true else "ons-u-vh" %}
+                        <span class="{{ prefixClass }}">{{ metadata.date.prefix | default("Published") }}: </span>
+                        {%- if metadata.date.iso -%}
+                            <time datetime="{{ metadata.date.iso }}">{{ metadata.date.short }}</time>
+                        {%- endif -%}
+                    </li>
+                {% endif %}
+
+                {%- if metadata.text -%}
+                    <li class="ons-featured__item-attribute">
+                        <span {% if metadata.text %}class="ons-featured__attribute-text ons-u-fw-b"{% endif %}>{{ metadata.text }}</span>
+                    </li>
+                {% endif %}
+            </ul>
+        {% endif %}
+
+        <div class="ons-featured__media">
+            {% if params.chart %}
+                {{
+                    onsChart({
+                        "chartType": params.chart.chartType,
+                        "description": params.chart.description,
+                        "theme": params.chart.theme,
+                        "title": params.chart.title,
+                        "id": params.chart.id,
+                        "headingLevel": headingLevel + 1,
+                        "legend": params.chart.legend,
+                        "xAxis": params.chart.xAxis,
+                        "yAxis": params.chart.yAxis,
+                        "series": params.chart.series,
+                        "annotations": params.chart.annotations,
+                        "rangeAnnotations": params.chart.rangeAnnotations,
+                        "referenceLineAnnotations": params.chart.referenceLineAnnotations,
+                        "estimateLineLabel": params.chart.estimateLineLabel,
+                        "uncertaintyRangeLabel": params.chart.uncertaintyRangeLabel,
+                        "isChartInverted": params.chart.isChartInverted,
+                        "useStackedLayout": params.chart.useStackedLayout,
+                        "percentageHeightDesktop": params.chart.percentageHeightDesktop,
+                        "percentageHeightMobile": params.chart.percentageHeightMobile
+                    })
+                }}
+            {% elif params.image %}
+                <div class="ons-featured__image">
+                    {{
+                        onsImage({
+                            "src": params.image.src,
+                            "alt": params.image.alt
+                        })
+                    }}
+                </div>
+            {% endif %}
+        </div>
+
+        {% if params.description %}
+            <div class="ons-featured__description">{{ params.description | safe }}</div>
+        {% endif %}
+    </div>
+{% endmacro %}

package/components/featured-article/example-featured-article-with-chart.njk

@@ -0,0 +1,223 @@
+{% from "components/featured-article/_macro.njk" import onsFeaturedArticle %}
+{{
+    onsFeaturedArticle({
+        "title": {
+            "text": 'Retail sales, Great Britain: July 2024',
+            "url": '#0'
+        },
+        "metadata": {
+            "text": 'Dataset',
+            "date": {
+                "prefix": 'Released',
+                "showPrefix": true,
+                "iso": '2021-02-18',
+                "short": '18 February 2021'
+            }
+        },
+        "headingLevel": 3,
+        "chart": {
+            "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,
+            "legend": true,
+            "xAxis": {
+                "title": "Year",
+                "type": "linear",
+                "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'
+                ],
+                "tickIntervalDesktop": 15,
+                "tickIntervalMobile": 30
+            },
+            "yAxis": {
+                "title": "Sales"
+            },
+            "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
+                    ]
+                }
+            ],
+            "percentageHeightDesktop": 35,
+            "percentageHeightMobile": 90
+        },
+        "description": "<ul>
+                <li>Retail sales volumes increased by 0.4% in July 2024, following a 0.2% increase in June 2024.</li>
+                <li>Retail sales values increased by 0.5% in July 2024, following a 0.3% increase in June 2024.</li>
+                <li>The annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) was 2.8% in July 2024, up from 2.6% in June 2024.</li>
+            </ul>"
+    })
+}}

package/components/featured-article/example-featured-article-with-image.njk

@@ -0,0 +1,24 @@
+{% from "components/featured-article/_macro.njk" import onsFeaturedArticle %}
+{{
+    onsFeaturedArticle({
+        "title": {
+            "text": 'Retail sales, Great Britain: July 2024',
+            "url": '#0'
+        },
+        "metadata": {
+            "text": 'Dataset',
+            "date": {
+                "prefix": 'Released',
+                "showPrefix": true,
+                "iso": '2021-02-18',
+                "short": '18 February 2021'
+            }
+        },
+        "headingLevel": 3,
+        "image": {
+            "src": '/img/small/census-monuments-lights-featured.jpg',
+            "alt": 'census monuments lights featured'
+        },
+        "description": "Retail sales volumes and values saw moderate growth in July 2024, with the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) rising to 2.8%."
+    })
+}}

package/components/featured-article/featured-article.scss

@@ -0,0 +1,33 @@
+.ons-featured {
+    background-color: var(--ons-color-banner-bg);
+    padding: 2rem;
+    border-bottom: 0;
+    display: block;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    &__image {
+        .ons-image__img {
+            width: 100%;
+            max-width: $grid-max-width;
+        }
+    }
+
+    &__item-metadata {
+        @extend .ons-list--bare;
+    }
+
+    &__item-attribute {
+        display: inline-block;
+        margin-right: 1rem;
+
+        @extend .ons-u-fs-s;
+    }
+
+    &__description {
+        border-top: 1px solid var(--ons-color-grey-75);
+        margin-top: 2rem;
+        padding: 2rem 0 0;
+        margin-bottom: 0;
+    }
+}

package/components/featured-article/macro.spec.js

@@ -0,0 +1,173 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+import { EXAMPLE_FEATURED_ARTICLE_WITH_CHART, EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE } from './_test-examples';
+
+describe('Macro: Featured Article', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: chart is provided and image is not', () => {
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_CHART));
+
+            test('THEN: it passes accessibility checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: it displays the correct title text', () => {
+                expect($('.ons-featured__title').text().trim()).toBe('Economic Trends 2024');
+            });
+
+            test('THEN: the title has the correct url link', () => {
+                expect($('.ons-featured__title a').attr('href')).toBe('/economy/economic-trends-2024');
+            });
+
+            test('THEN: it renders the onsChart component', () => {
+                expect($('[data-highcharts-base-chart]').length).toBe(1);
+            });
+
+            test('THEN: the chart has the correct id', () => {
+                expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('growth-chart');
+            });
+
+            test('THEN: the chart has the correct type', () => {
+                expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('line');
+            });
+        });
+
+        describe('WHEN: image is provided and chart is not', () => {
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE));
+
+            test('THEN: it passes accessibility checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: it displays the correct title text', () => {
+                expect($('.ons-featured__title').text().trim()).toBe('Population Insights');
+            });
+
+            test('THEN: the title has the correct url link', () => {
+                expect($('.ons-featured__title a').attr('href')).toBe('/people/population/insights');
+            });
+
+            test('THEN: it renders image with correct src attribute', () => {
+                expect($('.ons-image__img').attr('src')).toBe('example.png');
+            });
+
+            test('THEN: it renders image with correct alt text', () => {
+                expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+            });
+        });
+
+        describe('WHEN: both chart and image is provided', () => {
+            const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_CHART));
+
+            test('THEN: it renders the onsChart component', () => {
+                expect($('[data-highcharts-base-chart]').length).toBe(1);
+            });
+            test('THEN: it does not render the onsImage component', () => {
+                expect($('.ons-image__img').length).toBe(0);
+            });
+        });
+    });
+
+    describe('GIVEN: Param: metadata', () => {
+        describe('WHEN: chart is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('featured-article', {
+                    ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
+                    metadata: {
+                        date: {
+                            prefix: 'Released',
+                            showPrefix: true,
+                            iso: '2024-05-01',
+                            short: '1 May 2024',
+                        },
+                        text: 'Bulletin',
+                    },
+                }),
+            );
+
+            test('THEN: it renders ISO date value correctly', () => {
+                expect($('time').attr('datetime')).toBe('2024-05-01');
+            });
+
+            test('THEN: it renders short date label correctly', () => {
+                expect($('time').text()).toBe('1 May 2024');
+            });
+
+            test('THEN: it displays metadata text', () => {
+                expect($('.ons-featured__item-attribute span').text()).toContain('Bulletin');
+            });
+        });
+
+        describe('WHEN: image is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('featured-article', {
+                    ...EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE,
+                    metadata: {
+                        date: {
+                            prefix: 'Released',
+                            showPrefix: true,
+                            iso: '2024-05-01',
+                            short: '1 May 2024',
+                        },
+                        text: 'Bulletin',
+                    },
+                }),
+            );
+
+            test('THEN: it renders ISO date value correctly', () => {
+                expect($('time').attr('datetime')).toBe('2024-05-01');
+            });
+
+            test('THEN: it renders short date label correctly', () => {
+                expect($('time').text()).toBe('1 May 2024');
+            });
+
+            test('THEN: it displays metadata text', () => {
+                expect($('.ons-featured__item-attribute span').text()).toContain('Bulletin');
+            });
+        });
+
+        describe('WHEN: metadata is not provided', () => {
+            const articleWithoutMetadata = {
+                ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
+            };
+            const $ = cheerio.load(renderComponent('featured-article', articleWithoutMetadata));
+
+            test('THEN: metadata section is not rendered', () => {
+                expect($('.ons-featured__item-metadata').length).toBe(0);
+            });
+        });
+    });
+
+    describe('GIVEN: Params: description', () => {
+        describe('WHEN: description is provided', () => {
+            test('THEN: has expected description', () => {
+                const $ = cheerio.load(
+                    renderComponent('featured-article', { ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART, description: 'Some description' }),
+                );
+                const title = $('.ons-featured__description').html().trim();
+                expect(title).toBe('Some description');
+            });
+        });
+    });
+
+    describe('GIVEN: Param: headingLevel', () => {
+        describe('WHEN: heading level is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('featured-article', {
+                    ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
+                    headingLevel: 3,
+                }),
+            );
+
+            test('THEN: title is rendered using correct heading tag', () => {
+                expect($('.ons-featured__title')[0].tagName).toBe('h3');
+            });
+        });
+    });
+});

package/components/header/_header.scss

@@ -1,5 +1,6 @@
 // Block
 .ons-header {
+    $root: &;
     @include font-smoothing;
 
     display: block;
@@ -239,6 +240,22 @@
     &--basic & {
         &__grid-top {
             padding: 0;
+            flex-direction: column;
+            align-items: flex-start;
+
+            #{$root}__menu-links {
+                width: 100%;
+            }
+
+            // When JS is enabled, revert the no-js styles
+            .ons-js-enabled & {
+                flex-direction: inherit;
+                align-items: center;
+
+                #{$root}__menu-links {
+                    width: auto;
+                }
+            }
         }
     }
 
@@ -246,15 +263,21 @@
         // applies styles for non-js variant
         background-color: var(--ons-color-branded-tint);
         border-bottom: 1px solid var(--ons-color-ocean-blue);
-        width: 100%;
         margin-bottom: 0;
         padding-bottom: 1rem;
+        position: relative;
+        width: 100%;
 
         // updates styles when js is enabled
         .ons-js-enabled & {
             border-bottom: 0;
             margin-bottom: 1rem;
             padding-bottom: 0;
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            width: 100vw;
+            transform: translateX(-50%);
         }
 
         &__key-list {
@@ -295,7 +318,17 @@
         @extend .ons-u-pt-2xl;
         @extend .ons-u-pb-2xl;
 
+        position: relative;
         width: 100%;
+
+        // updates styles when js is enabled
+        .ons-js-enabled & {
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            width: 100vw;
+            transform: translateX(-50%);
+        }
         &__input {
             border-bottom: 1px solid var(--ons-color-ocean-blue);
             @extend .ons-u-mb-2xl;