@ons/design-system 74.0.0-next.14 → 74.0.0-next.16

package/README.md

@@ -149,7 +149,7 @@ Checkout the branch locally and run:
 
 If the VR tests fail locally, you'll see an error starting with `Error: docker run --rm -i --add-host=host.docker.internal:host-gateway...`
 
-`npx http-server backstop_data -p 8008 -o /html_report/` - View the report in your browser.
+`npx http-server backstop_data -p 8008 -c-1 -o /html_report/` - View the report in your browser.
 
 ### Approving VR test reference image changes
 

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

@@ -1,8 +1,8 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
 <div class="ons-container">
-    <div class="ons-grid ons-grid-flex-gap ons-grid-flex-gap--s ons-grid-flex--vertical-top">
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
+    <div class="ons-grid ons-grid-flex-gap">
+        <div class="ons-grid__col ons-grid__col--flex-col">
             {{
                 onsCard({
                     "variant": 'feature',
@@ -20,7 +20,7 @@
             }}
         </div>
 
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
+        <div class="ons-grid__col ons-grid__col--flex-col">
             {{
                 onsCard({
                     "variant": 'feature',
@@ -38,7 +38,7 @@
             }}
         </div>
 
-        <div class="ons-grid__col ons-grid__col--flex-col ons-grid__col--stretch">
+        <div class="ons-grid__col ons-grid__col--flex-col">
             {{
                 onsCard({
                     "variant": 'feature',

package/components/chart/_chart.scss

@@ -113,16 +113,6 @@
         }
     }
 
-    &__iframe {
-        width: 100%;
-        aspect-ratio: 16 / 9; // Default aspect ratio
-
-        @media (scripting: none) {
-            // Approximately matches the aspect ratio of the fallback image inside the iframe
-            aspect-ratio: 16 / 9;
-        }
-    }
-
     &__non-js-hide {
         @media (scripting: none) {
             display: none;
@@ -130,8 +120,6 @@
     }
 }
 
-@include iframe-aspect-ratio('ons-chart__iframe--{x}');
-
 // This is a workaround to position the axis title to the left
 .highcharts-axis-title {
     width: 100%;

package/components/chart/_macro.njk

@@ -7,44 +7,41 @@
     {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedAspectRatios = ['16-9', '4-3', '21-9', '1-1', '3-2', '9-16'] %}
     {% set instructionsId = "chart-instructions-" ~ params.id %}
-    {% set iframeAspectRatio = params.iframeAspectRatio if params.iframeAspectRatio in supportedAspectRatios else '16-9' %}
     {% set instructions = params.instructions | default('Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.') %}
 
     <div
-        {% if not params.iframeUrl %}
-            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 %}
-            {% 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.xAxis.tickIntervalMobile %}
-                data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
-            {% endif %}
-            {% if params.xAxis.tickIntervalDesktop %}
-                data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
-            {% endif %}
-            {% if params.yAxis.tickIntervalMobile %}
-                data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
-            {% endif %}
-            {% if params.yAxis.tickIntervalDesktop %}
-                data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
-            {% endif %}
-            {% if params.estimateLineLabel %}
-                data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
-            {% endif %}
-            {% if params.uncertaintyRangeLabel %}
-                data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
-            {% endif %}
-            {% if params.yAxis.customReferenceLineValue %}
-                data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
-            {% endif %}
-            {% if params.dataLabelDecimalPoints and params.dataLabelDecimalPoints >= 1 and params.dataLabelDecimalPoints <= 2 %}
-                data-highcharts-data-label-decimal-points="{{ params.dataLabelDecimalPoints }}"
-            {% endif %}
+        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 %}
+        {% 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.xAxis.tickIntervalMobile %}
+            data-highcharts-x-axis-tick-interval-mobile="{{ params.xAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.xAxis.tickIntervalDesktop %}
+            data-highcharts-x-axis-tick-interval-desktop="{{ params.xAxis.tickIntervalDesktop }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalMobile %}
+            data-highcharts-y-axis-tick-interval-mobile="{{ params.yAxis.tickIntervalMobile }}"
+        {% endif %}
+        {% if params.yAxis.tickIntervalDesktop %}
+            data-highcharts-y-axis-tick-interval-desktop="{{ params.yAxis.tickIntervalDesktop }}"
+        {% endif %}
+        {% if params.estimateLineLabel %}
+            data-highcharts-estimate-line-label="{{ params.estimateLineLabel }}"
+        {% endif %}
+        {% if params.uncertaintyRangeLabel %}
+            data-highcharts-uncertainty-range-label="{{ params.uncertaintyRangeLabel }}"
+        {% endif %}
+        {% if params.yAxis.customReferenceLineValue %}
+            data-highcharts-custom-reference-line-value="{{ params.yAxis.customReferenceLineValue }}"
+        {% endif %}
+        {% if params.dataLabelDecimalPoints and params.dataLabelDecimalPoints >= 1 and params.dataLabelDecimalPoints <= 2 %}
+            data-highcharts-data-label-decimal-points="{{ params.dataLabelDecimalPoints }}"
         {% endif %}
     >
         {%
@@ -61,53 +58,38 @@
             })
         %}
             <div class="ons-chart">
-                {% if params.iframeUrl %}
+                {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
+                    <div class="ons-chart__boxplot-legend">
+                        {% if params.uncertaintyRangeLabel %}
+                            <div class="ons-chart__boxplot-legend-item">
+                                <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
+                                <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
+                            </div>
+                        {% endif %}
+                        {% if params.estimateLineLabel %}
+                            <div class="ons-chart__boxplot-legend-item">
+                                <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
+                                <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
+                            </div>
+                        {% endif %}
+                    </div>
+                {% endif %}
+                {% if params.chartType in supportedChartTypes %}
                     <div
-                        class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
-                        id="iframe--{{ params.id }}"
+                        data-highcharts-chart-container
+                        class="ons-chart__container"
+                        tabindex="0"
+                        role="region"
+                        aria-label="chart container"
+                        aria-describedby="{{ instructionsId }}"
                     >
-                        <iframe
-                            src="{{ params.iframeUrl }}"
-                            title="{{ params.title }}"
-                            class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
-                            frameborder="0"
-                            scrolling="no"
-                        ></iframe>
+                        <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
+                        <div data-highcharts-chart class="ons-chart__chart"></div>
                     </div>
                 {% else %}
-                    {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
-                        <div class="ons-chart__boxplot-legend">
-                            {% if params.uncertaintyRangeLabel %}
-                                <div class="ons-chart__boxplot-legend-item">
-                                    <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
-                                    <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
-                                </div>
-                            {% endif %}
-                            {% if params.estimateLineLabel %}
-                                <div class="ons-chart__boxplot-legend-item">
-                                    <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
-                                    <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% endif %}
-                    {% if params.chartType in supportedChartTypes %}
-                        <div
-                            data-highcharts-chart-container
-                            class="ons-chart__container"
-                            tabindex="0"
-                            role="region"
-                            aria-label="chart container"
-                            aria-describedby="{{ instructionsId }}"
-                        >
-                            <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
-                            <div data-highcharts-chart class="ons-chart__chart"></div>
-                        </div>
-                    {% else %}
-                        <p data-invalid-chart-type data-unsupported-chart-text>
-                            <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
-                        </p>
-                    {% endif %}
+                    <p data-invalid-chart-type data-unsupported-chart-text>
+                        <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
+                    </p>
                 {% endif %}
 
                 {% if params.fallbackImageUrl %}
@@ -125,7 +107,7 @@
                 Footnotes for the annotations at mobile
                 Hidden from screen readers because the full text will be read out where they appear in the chart
             #}
-                {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
+                {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) %}
                     <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
                         {% for annotation in params.annotations %}
                             <li class="ons-chart__annotations-footnotes_item">
@@ -152,7 +134,7 @@
             </div>
         {% endcall %}
 
-        {% if (params.chartType in supportedChartTypes) and not params.iframeUrl %}
+        {% if (params.chartType in supportedChartTypes) %}
             {% set series = [] %}
             {% set lineSeriesCount = 0 %}
             {% for item in params.series %}

package/components/chart/_macro.spec.js

@@ -25,7 +25,6 @@ import {
     EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS,
     EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS,
     EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS,
-    EXAMPLE_IFRAME_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -2104,243 +2103,4 @@ describe('Macro: Chart', () => {
             });
         });
     });
-
-    describe('FOR: Iframe Chart', () => {
-        describe('GIVEN: Params: required', () => {
-            describe('WHEN: iframeUrl param is provided', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
-
-                test('THEN: it passes jest-axe checks', async () => {
-                    const results = await axe($.html());
-                    expect(results).toHaveNoViolations();
-                });
-
-                test('THEN: it renders the iframe', () => {
-                    expect($('.ons-chart__iframe-wrapper').length).toBe(1);
-                });
-
-                test('THEN: the Highcharts config is not included', () => {
-                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
-                    expect(configScript).toBeNull();
-                });
-            });
-        });
-
-        describe('GIVEN: Params: theme', () => {
-            describe('WHEN: theme is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        theme: 'secondary',
-                    }),
-                );
-
-                test('THEN: the theme parameter is ignored', () => {
-                    expect($('[data-highcharts-theme]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: percentageHeightDesktop', () => {
-            describe('WHEN: percentageHeightDesktop is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        percentageHeightDesktop: 50,
-                    }),
-                );
-
-                test('THEN: the percentageHeightDesktop parameter is ignored', () => {
-                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: percentageHeightMobile', () => {
-            describe('WHEN: percentageHeightMobile is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        percentageHeightMobile: 10,
-                    }),
-                );
-
-                test('THEN: the percentageHeightMobile parameter is ignored', () => {
-                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: tickInterval', () => {
-            describe('WHEN: tickIntervalDesktop and tickIntervalMobile are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        xAxis: { tickIntervalDesktop: 10, tickIntervalMobile: 5 },
-                        yAxis: { tickIntervalDesktop: 10, tickIntervalMobile: 5 },
-                    }),
-                );
-
-                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
-                    expect($('[data-highcharts-x-axis-tick-interval-desktop]').length).toBe(0);
-                    expect($('[data-highcharts-x-axis-tick-interval-mobile]').length).toBe(0);
-                    expect($('[data-highcharts-y-axis-tick-interval-desktop]').length).toBe(0);
-                    expect($('[data-highcharts-y-axis-tick-interval-mobile]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: estimateLineLabel', () => {
-            describe('WHEN: estimateLineLabel is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        estimateLineLabel: 'Estimated value',
-                    }),
-                );
-
-                test('THEN: the estimateLineLabel parameter is ignored', () => {
-                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: uncertaintyRangeLabel', () => {
-            describe('WHEN: uncertaintyRangeLabel is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        uncertaintyRangeLabel: '95% Confidence Interval',
-                    }),
-                );
-
-                test('THEN: the uncertaintyRangeLabel parameter is ignored', () => {
-                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: customReferenceLineValue', () => {
-            describe('WHEN: customReferenceLineValue is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        yAxis: { customReferenceLineValue: 10 },
-                    }),
-                );
-
-                test('THEN: the customReferenceLineValue parameter is ignored', () => {
-                    expect($('[data-highcharts-custom-reference-line-value]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: chartType', () => {
-            describe('WHEN: chartType is boxplot and legend params are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        chartType: 'boxplot',
-                        legend: true,
-                        estimateLineLabel: 'Estimated value',
-                        uncertaintyRangeLabel: '95% Confidence Interval',
-                    }),
-                );
-
-                test('THEN: the boxplot legend is not rendered', () => {
-                    expect($('.ons-chart__boxplot-legend').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: invalidChartType', () => {
-            describe('WHEN: an invalid chart type is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        chartType: 'foobar',
-                    }),
-                );
-
-                test('THEN: the invalid chart type is ignored', () => {
-                    expect($('[data-invalid-chart-type]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: annotations', () => {
-            describe('WHEN: annotations, rangeAnnotations and referenceLineAnnotations are provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        annotations: [{ text: 'A test point annotation', point: { x: 2, y: 3 } }],
-                        rangeAnnotations: [{ text: 'Range annotation', range: { axisValue1: 10, axisValue2: 15 }, axis: 'x' }],
-                        referenceLineAnnotations: [{ text: 'Reference line', value: 34, axis: 'x' }],
-                    }),
-                );
-
-                test('THEN: annotations footnotes are not rendered', () => {
-                    expect($('[data-annotations-footnotes]').length).toBe(0);
-                });
-
-                test('THEN: annotation scripts are not rendered', () => {
-                    expect($('[data-highcharts-annotations--iframe-chart-123]').length).toBe(0);
-                    expect($('[data-highcharts-range-annotations--iframe-chart-123]').length).toBe(0);
-                    expect($('[data-highcharts-reference-line-annotations--iframe-chart-123]').length).toBe(0);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: iframeAspectRatio', () => {
-            describe('WHEN: iframeAspectRatio is not set', () => {
-                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
-
-                test('THEN: it defaults to 16-9', () => {
-                    expect($('.ons-chart__iframe').hasClass('ons-chart__iframe--16-9')).toBe(true);
-                });
-            });
-
-            describe('WHEN: iframeAspectRatio is unsupported', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        iframeAspectRatio: '16-10',
-                    }),
-                );
-
-                test('THEN: it defaults to 16-9', () => {
-                    expect($('.ons-chart__iframe').hasClass('ons-chart__iframe--16-9')).toBe(true);
-                });
-            });
-
-            describe('WHEN: iframeAspectRatio is supported', () => {
-                const aspectRatio = '21-9';
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        iframeAspectRatio: aspectRatio,
-                    }),
-                );
-
-                test('THEN: it applies the aspect ratio class', () => {
-                    expect($('.ons-chart__iframe').hasClass(`ons-chart__iframe--${aspectRatio}`)).toBe(true);
-                });
-            });
-        });
-
-        describe('GIVEN: Params: fallbackImageUrl', () => {
-            describe('WHEN: fallbackImageUrl is provided', () => {
-                const $ = cheerio.load(
-                    renderComponent('chart', {
-                        ...EXAMPLE_IFRAME_CHART_PARAMS,
-                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
-                    }),
-                );
-
-                test('THEN: the iframe wrapper is hidden when JavaScript is disabled', () => {
-                    expect($('.ons-chart__iframe-wrapper').attr('class')).toContain('ons-chart__non-js-hide');
-                });
-            });
-        });
-    });
 });

package/components/chart/bar-chart.js

@@ -1,3 +1,5 @@
+import Highcharts from 'highcharts';
+
 import ChartConstants from './chart-constants';
 
 class BarChart {
@@ -19,7 +21,10 @@ class BarChart {
         };
         if (dataLabelDecimalPoints !== undefined) {
             dataLabels.formatter = function () {
-                return Number(this.y).toFixed(dataLabelDecimalPoints);
+                if (this.y === null || this.y === undefined) {
+                    return '';
+                }
+                return Highcharts.numberFormat(this.y, dataLabelDecimalPoints);
             };
         }
         return {

package/components/cookies-banner/_macro.njk

@@ -44,7 +44,7 @@
     <section
         class="ons-cookies-banner"
         aria-label="{{ params.ariaLabel | default(ariaLabel) }}"
-        {% if params.cookieDomainPolicy %}data-ons-cookie-domain-policy="{{ params.cookieDomainPolicy }}"{% endif %}
+        {% if params.cookieDomain is defined %}data-ons-cookie-domain="{{ params.cookieDomain if params.cookieDomain else '' }}"{% endif %}
     >
         <div
             class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary"

package/components/cookies-banner/_macro.spec.js

@@ -39,10 +39,22 @@ describe('macro: cookies-banner', () => {
             expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner override');
         });
 
-        it('sets cookie domain policy data attribute when `cookieDomainPolicy` is provided', () => {
-            const $ = cheerio.load(renderComponent('cookies-banner', { ...EXAMPLE_COOKIES_BANNER_PARAMS, cookieDomainPolicy: 'day1' }));
+        it('sets cookie domain data attribute when `cookieDomain` is provided', () => {
+            const $ = cheerio.load(renderComponent('cookies-banner', { ...EXAMPLE_COOKIES_BANNER_PARAMS, cookieDomain: 'census.gov.uk' }));
 
-            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain-policy')).toBe('day1');
+            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain')).toBe('census.gov.uk');
+        });
+
+        it('renders an empty domain attribute when `cookieDomain` is false', () => {
+            const $ = cheerio.load(renderComponent('cookies-banner', { cookieDomain: false }));
+
+            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain')).toBe('');
+        });
+
+        it('omits the domain attribute when `cookieDomain` is not provided', () => {
+            const $ = cheerio.load(renderComponent('cookies-banner'));
+
+            expect($('.ons-cookies-banner').attr('data-ons-cookie-domain')).toBeUndefined();
         });
 
         describe('initial banner', () => {

package/components/header/_macro.njk

@@ -175,6 +175,10 @@
                                 {% elif params.serviceLinks.itemsList | length > 1 %}
                                     {% set breakpoint = 'm' %}
                                     {% set controlVisibility = true %}
+                                        {% if params.mastheadLogo.multipleLogos | length > 2 %}
+                                            {# Increase breakpoint if there are 3 logos to avoid stacking#}
+                                            {% set breakpoint = 'l' %}
+                                        {% endif %}
                                 {% else %}
                                     {% set controlVisibility = false %}
                                 {% endif %}

package/components/message/_message.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 
 .ons-message {
-    border-radius: math.div($grid-gutters, 2);
+    border-radius: math.div($grid-gutter-standard, 2);
     margin-bottom: 2rem;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
@@ -23,7 +23,7 @@
 
     &__head {
         border-bottom: 1px solid var(--ons-color-borders);
-        padding: $grid-gutters;
+        padding: $grid-gutter-standard;
         position: relative;
     }
 
@@ -50,6 +50,6 @@
     }
 
     &__body {
-        padding: $grid-gutters;
+        padding: $grid-gutter-standard;
     }
 }

package/components/summary/_macro.njk

@@ -24,8 +24,9 @@
                     {% if group.title %}
                         {% set openingHeadingTag = "<h" ~ headingLevel %}
                         {% set closingHeadingTag = "</h" ~ headingLevel ~ ">" %}
-                        {{ openingHeadingTag | safe }}
-                        class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
+                        <div class="ons-summary__group-title-wrapper">
+                            {{ openingHeadingTag | safe }} class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
+                        </div>
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">

package/components/summary/_summary.scss

@@ -217,9 +217,14 @@ $hub-row-spacing: 1.3rem;
                     border-bottom: 1px solid var(--ons-color-borders-light);
                 }
             }
-            .ons-summary__group-title {
+            .ons-summary__group-title-wrapper {
                 background-color: var(--ons-color-grey-5);
                 padding: 1rem 1.25rem;
+                margin-bottom: 1rem;
+
+                .ons-summary__group-title {
+                    margin: 0;
+                }
             }
             .ons-summary__link {
                 padding: 0 1.25rem;