@ons/design-system 72.4.0 → 72.6.0

package/components/button/_button.scss

@@ -35,6 +35,52 @@ $button-shadow-size: 3px;
         }
     }
 
+    &--header-search &,
+    &--header-search:focus &,
+    &--header-search:active &,
+    &--header-search.active &,
+    &--header-search:active:focus &,
+    &--header-search.active:focus & {
+        &__inner {
+            background: var(--ons-color-ocean-blue) !important;
+        }
+    }
+
+    &--header-search &,
+    &--header-search:active &,
+    &--header-search.active & {
+        &__inner {
+            padding: 0.75rem !important;
+            border: 2px solid var(--ons-color-ocean-blue);
+            border-radius: 0;
+            box-shadow: none;
+            .ons-icon {
+                fill: var(--ons-color-text-inverse) !important;
+                height: 28px;
+                width: 28px;
+            }
+        }
+    }
+
+    &--header-search:hover & {
+        &__inner {
+            background: var(--ons-color-night-blue) !important;
+            border-color: var(--ons-color-text-link-hover);
+        }
+    }
+
+    &--header-search:focus & {
+        &__inner {
+            box-shadow:
+                0 0 0 1px var(--ons-color-black),
+                0 0 0 4px var(--ons-color-focus) !important;
+            outline: 3px solid rgb(0 0 0 / 0%);
+            outline-offset: 1px;
+            z-index: 4;
+            border: 2px solid var(--ons-color-black);
+        }
+    }
+
     &__inner {
         background: var(--ons-color-button);
         border-radius: $input-radius;
@@ -556,7 +602,7 @@ $button-shadow-size: 3px;
     &--menu {
         align-items: center;
         display: flex;
-        padding: 1.5rem;
+        padding: 1rem;
         border-bottom: 4px solid rgb(0 0 0 / 0%);
         .ons-icon {
             transform: rotate(90deg);
@@ -575,12 +621,15 @@ $button-shadow-size: 3px;
                 margin-top: 0;
                 width: 1rem;
             }
+            .ons-btn__text {
+                height: 24px;
+            }
         }
     }
 
     &--menu:focus {
-        background-color: var(--ons-color-focus);
-        border-color: var(--ons-color-black);
+        background-color: var(--ons-color-focus) !important;
+        border-color: var(--ons-color-black) !important;
     }
 
     &--menu:hover {
@@ -589,6 +638,13 @@ $button-shadow-size: 3px;
 
     &--menu:focus & {
         &__inner {
+            .ons-icon {
+                fill: var(--ons-color-text-link-focus) !important;
+            }
+            .ons-btn__text {
+                color: var(--ons-color-text-link-focus);
+            }
+
             box-shadow: none;
         }
     }
@@ -629,6 +685,118 @@ $button-shadow-size: 3px;
             }
         }
     }
+
+    &--search-icon,
+    &--close {
+        border-bottom: 4px solid transparent;
+        align-items: center;
+        display: flex;
+        padding: 1rem;
+    }
+
+    &--search-icon &,
+    &--close & {
+        &__inner {
+            background: rgb(0 0 0 / 0%);
+            box-shadow: none;
+            padding: 0;
+            .ons-icon {
+                @extend .ons-u-m-no;
+
+                fill: var(--ons-color-text-link);
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+        }
+    }
+
+    &--search-icon:hover {
+        border-bottom: 4px solid rgb(0 0 0 / 0%);
+        border-color: var(--ons-color-text-link-hover);
+    }
+
+    &--search-icon:focus:hover:not(:active, .active) {
+        .ons-btn__inner {
+            background: none;
+            box-shadow: none;
+        }
+    }
+
+    &--close:focus:hover:not(:active, .active) {
+        .ons-btn__inner {
+            background: none;
+            box-shadow: none;
+        }
+    }
+
+    &--close:active,
+    &--close[aria-expanded='true'] {
+        @extend .ons-u-ml-no;
+
+        border-color: var(--ons-color-text-link-hover);
+        background-color: var(--ons-color-branded-tint);
+        .ons-btn__inner {
+            .ons-icon {
+                fill: var(--ons-color-text-link-hover);
+            }
+        }
+    }
+
+    &--search-icon:hover &,
+    &--search-icon:active &,
+    &--search-icon:active:focus &,
+    &--search-icon.active &,
+    &--search-icon.active:focus & {
+        &__inner {
+            background: none;
+            box-shadow: none;
+            color: var(--ons-color-text-link-hover);
+            .ons-icon {
+                fill: var(--ons-color-text-link-hover);
+            }
+        }
+    }
+
+    &--search-icon:focus {
+        background-color: var(--ons-color-focus);
+        border-color: var(--ons-color-text-link-focus);
+    }
+
+    &--search-icon:focus &,
+    &--close:focus & {
+        &__inner {
+            background: none;
+            box-shadow: none;
+            .ons-icon {
+                fill: var(--ons-color-text-link-focus) !important;
+            }
+        }
+    }
+
+    &--close:focus {
+        background: var(--ons-color-focus);
+        border-color: var(--ons-color-black);
+    }
+
+    &--search-icon:active {
+        background-color: var(--ons-color-branded-tint);
+        border-color: var(--ons-color-text-link-hover);
+    }
+
+    &--close:hover &,
+    &--close:active &,
+    &--close.active &,
+    &--close.active:focus &,
+    &--close:active:focus & {
+        &__inner {
+            background: none !important;
+            box-shadow: none;
+            color: var(--ons-color-text-link-hover);
+            .ons-icon {
+                fill: var(--ons-color-text-link-hover);
+            }
+        }
+    }
 }
 
 .ons-search__btn {

package/components/button/_macro.njk

@@ -61,6 +61,10 @@
             {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
             {% set variantClasses = " ons-btn--loader ons-js-loader ons-js-submit-btn" %}
+        {% elif 'search' in params.variants %}
+            {% set iconType = "search" %}
+        {% elif 'close' in params.variants %}
+            {% set iconType = "close" %}
         {% endif %}
     {% endif %}
     {% set tag = "a" if params.url else "button" %}

package/components/card/_card.scss

@@ -2,6 +2,11 @@
     margin: 0 0 2rem;
     width: 100%;
 
+    &--feature {
+        background-color: var(--ons-color-banner-bg);
+        padding: 2rem;
+    }
+
     &__link {
         display: flex;
         flex-direction: column;

package/components/card/_macro.njk

@@ -4,8 +4,8 @@
     {% set closingHeadingTag = "</h" + headingLevel + ">" %}
     {% 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">
-        <a href="{{ params.title.url }}" class="ons-card__link">
+    <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 %}">
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
                     <img
@@ -34,6 +34,14 @@
             {{ closingHeadingTag | safe }}
         </a>
 
+        {% if params.title.subtitle %}
+            <p class="ons-card__subtitle ons-u-fs-s">{{ params.title.subtitle }}</p>
+        {% endif %}
+
+        {% if params.body.figure %}
+            <p class="ons-card__figure ons-u-fs-3xl ons-u-fw-b ons-u-mb-no">{{ params.body.figure }}</p>
+        {% endif %}
+
         <p id="{{ params.body.id }}">{{ params.body.text }}</p>
 
         {%- if params.body.itemsList -%}

package/components/card/_macro.spec.js

@@ -36,6 +36,20 @@ const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH = {
     },
 };
 
+const EXAMPLE_CARD_FEATURE_VARIANT = {
+    variant: 'feature',
+    title: {
+        text: 'Feature card title',
+        url: 'http://example.com',
+        subtitle: 'Optional subtitle',
+    },
+    body: {
+        figure: '123,456',
+        text: 'Example feature card text',
+        id: 'example-feature-text-id',
+    },
+};
+
 describe('macro: card', () => {
     describe('mode: without image', () => {
         it('passes jest-axe checks', async () => {
@@ -267,4 +281,48 @@ describe('macro: card', () => {
             });
         });
     });
+
+    describe('variant: feature', () => {
+        it('renders the `feature` variant with correct class', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+            expect($('.ons-card').hasClass('ons-card--feature')).toBe(true);
+        });
+
+        it('has the provided `title` text', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+
+            expect($('.ons-card__title').text().trim()).toBe('Feature card title');
+        });
+
+        it('has the provided `subitle` text', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+
+            expect($('.ons-card__subtitle').text().trim()).toBe('Optional subtitle');
+        });
+
+        it('outputs a hyperlink with the provided `url`', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+
+            expect($('.ons-card__link').attr('href')).toBe('http://example.com');
+        });
+
+        it('has the provided `figure`', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+
+            expect($('.ons-card__figure').text().trim()).toBe('123,456');
+        });
+
+        it('has the provided `text` accessible via the `textId` identifier', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+
+            expect($('#example-feature-text-id').text().trim()).toBe('Example feature card text');
+        });
+
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_FEATURE_VARIANT));
+
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+    });
 });

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

@@ -0,0 +1,62 @@
+{% from "components/card/_macro.njk" import onsCard %}
+
+<div class="ons-container">
+    <div class="ons-grid ons-grid-flex ons-grid-flex--vertical-top">
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+            {{
+                onsCard({
+                    "variant": 'feature',
+                    "title": {
+                        "id": 'card-set-1',
+                        "text": 'Deaths registered annually',
+                        "url": '#0',
+                        "subtitle": 'England and Wales'
+                    },
+                    "body":{
+                        "id": 'text1',
+                        "figure": '581,363',
+                        "text": 'In 2023, up 0.7% from 2022'
+                    }
+                })
+            }}
+        </div>
+
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+            {{
+                onsCard({
+                    "variant": 'feature',
+                    "title": {
+                        "id": 'card-set-2',
+                        "text": 'Alcohol-specific deaths',
+                        "url": '#0',
+                        "subtitle": 'UK'
+                    },
+                    "body":{
+                        "id": 'text2',
+                        "figure": '10,473',
+                        "text": 'In 2023, the highest number on record'
+                    }
+                })
+            }}
+        </div>
+
+        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch ons-u-flex-grow ons-col-4@m">
+            {{
+                onsCard({
+                    "variant": 'feature',
+                    "title": {
+                        "id": 'card-set-3',
+                        "text": 'Suicides registered',
+                        "subtitle": 'England and Wales',
+                        "url": '#0'
+                    },
+                    "body":{
+                        "id": 'text3',
+                        "figure": '6069',
+                        "text": 'In 2023, up 7.6% from 2022'
+                    }
+                })
+            }}
+        </div>
+    </div>
+</div>

package/components/chart/_chart.scss

@@ -0,0 +1,80 @@
+.ons-chart {
+    margin: 0;
+    container-type: inline-size;
+    max-width: $grid-max-width;
+
+    &__download-title {
+        @extend .ons-u-pt-l;
+        @extend .ons-u-fs-r--b;
+    }
+
+    &__title {
+        font-size: 1.25rem;
+        line-height: 1.625rem;
+    }
+
+    &__subtitle {
+        font-size: 1rem;
+        line-height: 1.3rem;
+    }
+
+    &__caption {
+        font-size: 1rem;
+        line-height: 1.2rem;
+        color: var(--ons-color-grey-75);
+    }
+
+    &__footnote-number {
+        display: flex;
+        flex-shrink: 0;
+        flex-grow: 0;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.125rem; // 18px
+        min-height: 1.125rem; // 18px
+        padding: 0.2143em; // 3px;
+        aspect-ratio: 1;
+        border: 1px solid var(--ons-color-grey-100);
+        border-radius: 50%;
+        font-size: 0.875rem; // 14px
+        line-height: 0;
+        background-color: var(--ons-color-white);
+        color: var(--ons-color-grey-100);
+    }
+
+    /* Override Highcharts styling */
+    &__footnote-number span {
+        position: static !important;
+        transform-origin: 0 0 !important;
+        font-size: inherit !important;
+        color: inherit !important;
+        top: 0 !important;
+        left: 0 !important;
+    }
+
+    &__footnotes {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 1rem;
+
+        // We need to use a container query here in order to match the responsive rules for Highcharts
+        // which is based on the width that the chart renders not the viewport
+        // Update the breakpoint value here if the Highcharts responsive rules change
+        @container (min-width: 601px) {
+            display: none;
+        }
+    }
+
+    &__footnote_item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem; // 14px
+        color: var(--ons-color-grey-100);
+    }
+}
+
+// This is a workaround to position the axis title to the left
+.highcharts-axis-title {
+    width: 100%;
+}

package/components/chart/_macro.njk

@@ -0,0 +1,125 @@
+{% from "components/list/_macro.njk" import onsList %}
+
+{% macro onsChart(params) %}
+    {% set supportedChartTypes = ['line', 'bar', 'column'] %}
+
+    {% if params.headingLevel and params.headingLevel >= 1 and params.headingLevel <= 4 %}
+        {% set headingLevel = params.headingLevel %}
+    {% else %}
+        {% set headingLevel = 2 %}
+    {% endif %}
+    {% set openingTitleTag = "<h" ~ headingLevel %}
+    {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
+    {% set openingSubtitleTag = "<h" ~  (headingLevel + 1) %}
+    {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
+    {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
+    {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
+
+    <div
+        data-highcharts-base-chart
+        data-highcharts-type="{{ params.chartType }}"
+        data-highcharts-theme="{{ params.theme }}"
+        data-highcharts-title="{{ params.title }}"
+        data-highcharts-id="{{ params.id }}"
+        {% if params.useStackedLayout %}data-highcharts-use-stacked-layout="{{ params.useStackedLayout }}"{% endif %}
+        id="{{ params.id }}"
+        {% if params.percentageHeightDesktop and params.chartType != 'bar' %}
+            data-highcharts-percentage-height-desktop="{{ params.percentageHeightDesktop }}"
+        {% endif %}
+        {% if params.percentageHeightMobile and params.chartType != 'bar' %}
+            data-highcharts-percentage-height-mobile="{{ params.percentageHeightMobile }}"
+        {% endif %}
+    >
+        {% if params.chartType in supportedChartTypes %}
+            <figure class="ons-chart">
+                {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
+                {{ openingSubtitleTag | safe }}
+                class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
+                {% if params.description %}
+                    <p class="ons-u-vh">{{ params.description }}</p>
+                {% endif %}
+                <div data-highcharts-chart></div>
+                {#
+                    Footnotes for the annotations at mobile
+                    Hidden from screen readers because the full text will be read out where they appear in the chart
+                #}
+                <ul class="ons-chart__footnotes" aria-hidden="true">
+                    {% for annotation in params.annotations %}
+                        <li class="ons-chart__footnote_item">
+                            <span class="ons-chart__footnote-number">{{ loop.index }}</span>
+                            {{ annotation.text }}
+                        </li>
+                    {% endfor %}
+                </ul>
+                {% if params.caption %}
+                    <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
+                {% endif %}
+            </figure>
+        {% endif %}
+
+        {% if params.download.title and params.download.itemsList | length > 0 %}
+            {{ openingDownloadTitleTag | safe }}
+            class="ons-chart__download-title">{{ params.download.title }}{{ closingDownloadTitleTag | safe }}
+            {{
+                onsList({
+                    "element": "ol",
+                    "itemsList": params.download.itemsList
+                })
+            }}
+        {% endif %}
+        {% set series = [] %}
+        {% for item in params.series %}
+            {%
+                set series = series.concat({
+                    "name": item.name if item.name else '',
+                    "data": item.data if item.data else [],
+                    "marker": {
+                        "enabled": item.marker if item.marker else false
+                    },
+                    "dataLabels": {
+                        "enabled": item.dataLabels if item.dataLabels else false
+                    },
+                    "type": item.type if item.type and item.type == 'line' else params.chartType
+                })
+            %}
+        {% endfor %}
+        {%
+            set config = {
+                "legend": {
+                    "enabled" : params.legend if params.legend else true
+                },
+                "yAxis": {
+                    "title": {
+                        "text": params.yAxis.title
+                    },
+                    "labels": {
+                        "format": params.yAxis.labelFormat
+                    }
+                },
+                "xAxis": {
+                    "title": {
+                        "text": params.xAxis.title
+                    },
+                    "categories": params.xAxis.categories,
+                    "type": params.xAxis.type,
+                    "labels": {
+                        "format": params.xAxis.labelFormat
+                    }
+                },
+                "series": series
+            }
+        %}
+
+        <!-- Set scripts to pass the config values as json to the javascript -->
+        <!-- prettier-ignore-start -->
+        <script type="application/json" data-highcharts-config--{{ params.id }}>
+            {{ config | tojson }}
+        </script>
+        {% if params.annotations %}
+            <script type="application/json" data-highcharts-annotations--{{ params.id }}>
+                {{ params.annotations | tojson }}
+            </script>
+        {% endif %}
+        <!-- prettier-ignore-end -->
+    </div>
+{% endmacro %}