@ons/design-system 73.13.1 → 74.0.0-cookies.0

package/components/figure/_macro.njk

@@ -34,7 +34,7 @@
 
     {{ openingRootTag | safe }}
     {% if params.figureNumber %}
-        <span class="ons-figure__number">{{ params.figureNumber }}</span>
+        <span class="ons-figure__number ons-u-reading-width">{{ params.figureNumber }}</span>
     {% endif %}
     {% if params.title %}
         {{ openingTitleTag | safe }}{{ params.title }}{{ closingTitleTag | safe }}
@@ -61,9 +61,9 @@
 
     {% if params.caption %}
         {% if rootElement == 'figure' %}
-            <figcaption class="ons-figure__caption">{{ params.caption }}</figcaption>
+            <figcaption class="ons-figure__caption ons-u-reading-width">{{ params.caption }}</figcaption>
         {% else %}
-            <span class="ons-figure__caption">{{ params.caption }}</span>
+            <span class="ons-figure__caption ons-u-reading-width">{{ params.caption }}</span>
         {% endif %}
     {% endif %}
     {{ closingRootTag | safe }}

package/components/footer/_macro.njk

@@ -53,14 +53,17 @@
         {% if params.footerWarning %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             <div class="ons-footer__warning">
-                <div class="ons-container">
+                <div
+                    class="ons-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}"
+                >
                     {%
                         call onsPanel({
                             "variant": "warn",
                             "classes": "ons-panel--warn--footer"
                         })
                     %}
-                        {{ params.footerWarning | safe }}
+                        {# p tag ensures reading width is applied #}
+                        <div class="ons-u-reading-width">{{ params.footerWarning | safe }}</div>
                     {% endcall %}
                 </div>
             </div>

package/components/header/_macro.njk

@@ -6,6 +6,7 @@
     {% set titleTag = "h1" if params.titleAsH1 else "div" %}
     {% set openingTag = "<" + titleTag %}
     {% set closingTag = "</" + titleTag + ">" %}
+    {% set rootElementTag = "div" if params.useDivForRootElement else "header" %}
     {% set currentLanguageIsoCode = "en" %}
     {% set logoAltText = params.mastheadLogoAltText or params.mastheadLogo.altText %}
 
@@ -13,10 +14,11 @@
         {% set currentLanguage = params.language.languages | selectattr("current") | first %}
         {% set currentLanguageIsoCode = currentLanguage.isoCode %}
     {% endif %}
-
-    <header
+    <!-- prettier-ignore-start -->
+    <{{ rootElementTag | safe }}
         class="ons-header{{ ' '+ params.classes if params.classes }}{% if params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-header--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-header--{{ params.variants }}{% endif %}"
     >
+    <!-- prettier-ignore-end -->
         {{
             onsBrowserBanner({
                 "lang": currentLanguageIsoCode,
@@ -535,5 +537,7 @@
         {% if params.navigation %}
             {{ onsNavigation(params) }}
         {% endif %}
-    </header>
+    <!-- prettier-ignore-start -->
+    </{{ rootElementTag | safe }}>
+    <!-- prettier-ignore-end -->
 {% endmacro %}

package/components/header/_macro.spec.js

@@ -36,6 +36,33 @@ describe('FOR: Macro: Header', () => {
         });
     });
 
+    describe('GIVEN: Params: useDivForRootElement', () => {
+        describe('WHEN: useDivForRootElement is not set', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_BASIC,
+                }),
+            );
+            test('THEN: renders the root element as a header tag', () => {
+                expect($('header.ons-header').length).toBe(1);
+            });
+        });
+        describe('WHEN: useDivForRootElement is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('header', {
+                    ...EXAMPLE_HEADER_BASIC,
+                    useDivForRootElement: true,
+                }),
+            );
+            test('THEN: renders the root element as a div tag', () => {
+                expect($('div.ons-header').length).toBe(1);
+            });
+            test('THEN: does not render a header tag as the root element', () => {
+                expect($('header.ons-header').length).toBe(0);
+            });
+        });
+    });
+
     describe('Accessibility: search heading', () => {
         test('THEN: axe passes when search heading is present (params.search.links.heading)', async () => {
             const params = {

package/components/hero/_hero.scss

@@ -466,6 +466,10 @@
         display: flex;
         flex-direction: column-reverse;
     }
+
+    &__text {
+        @include no-reading-width;
+    }
 }
 
 @include panel-variant(ons-red, var(--ons-color-errors), var(--ons-color-errors-tint));

package/components/hero/_macro.njk

@@ -21,7 +21,9 @@
                 {% endfor %}
             </div>
         {% endif %}
-        <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
+        <div
+            class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}{{ ' ons-container--full-width' if params.fullWidth }}"
+        >
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
                 <div class="ons-hero__content">
                     <div class="ons-hero__title-container">
@@ -44,7 +46,6 @@
                         {% elif params.richText %}
                             <div class="ons-hero__richtext">{{ params.richText | safe }}</div>
                         {% endif %}
-
                     </div>
 
                     {% if params.variants == "grey" and params.officialStatisticsBadge == true %}

package/components/hero/_macro.spec.js

@@ -34,6 +34,42 @@ describe('macro: hero', () => {
         expect($('.ons-hero--variant-b').length).toBe(1);
     });
 
+    it('has the `ons-container--wide` class on the container when `wide` is true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, wide: true }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('does not have the `ons-container--wide` class on the container when `wide` is false', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, wide: false }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(false);
+    });
+
+    it('does not have the `ons-container--wide` class on the container when `wide` is not set', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+
+        expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(false);
+    });
+
+    it('has the `ons-container--full-width` class on the container when `fullWidth` is true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, fullWidth: true }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--full-width')).toBe(true);
+    });
+
+    it('does not have the `ons-container--full-width` class on the container when `fullWidth` is false', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, fullWidth: false }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--full-width')).toBe(false);
+    });
+
+    it('does not have the `ons-container--full-width` class on the container when `fullWidth` is not set', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+
+        expect($('.ons-hero__container').hasClass('ons-container--full-width')).toBe(false);
+    });
+
     it('has expected `title`', () => {
         const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 

package/components/hero/example-hero-dark-wide.njk

@@ -0,0 +1,17 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Design and build digital services for the ONS',
+        "text": 'Everything you need to make accessible, consistent digital products',
+        "button": {
+            "url": '#0',
+            "text": 'Get started'
+        },
+        "variants": 'dark',
+        "wide": true
+    })
+}}

package/components/hero/example-hero-dark-with-external-breadcrumbs.njk

@@ -4,7 +4,6 @@ layout: ~
 ---
 
 {% from "components/hero/_macro.njk" import onsHero %}
-{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
 {% extends "layout/_template.njk" %}
 {%
     set pageConfig = {
@@ -162,12 +161,8 @@ layout: ~
                     }
                 ]
             }
-        }
-    }
-%}
-{% block pageContent %}
-    {{
-        onsBreadcrumbs({
+        },
+        "breadcrumbs": {
             "ariaLabel": 'Breadcrumbs',
             "variant": "dark",
             "itemsList": [
@@ -175,20 +170,21 @@ layout: ~
                     "url": '/',
                     "text": 'Home'
                 }
-            ]
+             ]
+        }
+    }
+%}
+
+{% block hero %}
+    {{
+        onsHero({
+            "title": 'Design and build digital services for the ONS',
+            "text": 'Everything you need to make accessible, consistent digital products',
+            "button": {
+                "url": '#0',
+                "text": 'Get started'
+            },
+            "variants": 'dark'
         })
     }}
-    <main id="main-content">
-        {{
-            onsHero({
-                "title": 'Design and build digital services for the ONS',
-                "text": 'Everything you need to make accessible, consistent digital products',
-                "button": {
-                    "url": '#0',
-                    "text": 'Get started'
-                },
-                "variants": 'dark'
-            })
-        }}
-    </main>
 {% endblock %}

package/components/hero/example-hero-default-full-width.njk

@@ -0,0 +1,16 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Design and build digital services for the ONS',
+        "text": 'Everything you need to make accessible, consistent digital products',
+        "button": {
+            "url": '#0',
+            "text": 'Get started'
+        },
+        "fullWidth": true
+    })
+}}

package/components/hero/example-hero-default-with-external-breadcrumbs.njk

@@ -4,170 +4,165 @@ layout: ~
 ---
 
 {% from "components/hero/_macro.njk" import onsHero %}
-{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
 {% extends "layout/_template.njk" %}
 {%
     set pageConfig = {
         "header": {
             "variants": 'basic',
             "menuLinks": {
-            "id": "menu-links",
-            "keyLinks": [
-                {
-                    'heading': 'Taking part in a survey?',
-                    'description': 'It’s never been more important.'
-                },
-                {
-                    'heading': 'Release calendar',
-                    'description': 'View our latest and upcoming releases.'
-                },
-                {
-                    'heading': 'Explore local statistics',
-                    'url': '#0',
-                    'description': 'Explore statistics across the UK.'
-                }
-            ],
-            "columns": [
-                {
-                    "groups": [
-                        {
-                            "heading": "People, population and community",
-                            "groupItems": [
-                                {
-                                    "text": "Armed forces community"
-                                },
-                                {
-                                    "text": "Births, deaths and marriages"
-                                },
-                                {
-                                    "text": "Crime and justice"
-                                },
-                                {
-                                    "text": "Cultural identity"
-                                },
-                                {
-                                    "text": "Education and childcare"
-                                },
-                                {
-                                    "text": "Elections"
-                                },
-                                {
-                                    "text": "Health and social care"
-                                },
-                                {
-                                    "text": "Household characteristics"
-                                },
-                                {
-                                    "text": "Housing"
-                                },
-                                {
-                                    "text": "Leisure and tourism"
-                                },
-                                {
-                                    "text": "Personal and household finances"
-                                },
-                                {
-                                    "text": "Population and migration"
-                                },
-                                {
-                                    "text": "Well-being"
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "groups": [
-                        {
-                            "heading": "Business, industry and trade",
-                            "groupItems": [
-                                {
-                                    "text": "Business"
-                                },
-                                {
-                                    "text": "Changes to business"
-                                },
-                                {
-                                    "text": "Construction industry"
-                                },
-                                {
-                                    "text": "International trade"
-                                },
-                                {
-                                    "text": "IT and internet industry"
-                                },
-                                {
-                                    "text": "Manufacturing and production industry"
-                                },
-                                {
-                                    "text": "Retail industry",
-                                    "url": "#0"
-                                },
-                                {
-                                    "text": "Tourism industry"
-                                }
-                            ]
-                        },
-                        {
-                            "heading": "Employment and labour market",
-                            "url": "#0",
-                            "groupItems":
-                            [
-                                {
-                                    "text": "People in work"
-                                },
-                                {
-                                    "text": "People not in work"
-                                }
-                            ]
+                "id": "menu-links",
+                "keyLinks": [
+                    {
+                        'heading': 'Taking part in a survey?',
+                        'description': 'It’s never been more important.'
+                    },
+                    {
+                        'heading': 'Release calendar',
+                        'description': 'View our latest and upcoming releases.'
+                    },
+                    {
+                        'heading': 'Explore local statistics',
+                        'url': '#0',
+                        'description': 'Explore statistics across the UK.'
+                    }
+                ],
+                "columns": [
+                    {
+                        "groups": [
+                            {
+                                "heading": "People, population and community",
+                                "groupItems": [
+                                    {
+                                        "text": "Armed forces community"
+                                    },
+                                    {
+                                        "text": "Births, deaths and marriages"
+                                    },
+                                    {
+                                        "text": "Crime and justice"
+                                    },
+                                    {
+                                        "text": "Cultural identity"
+                                    },
+                                    {
+                                        "text": "Education and childcare"
+                                    },
+                                    {
+                                        "text": "Elections"
+                                    },
+                                    {
+                                        "text": "Health and social care"
+                                    },
+                                    {
+                                        "text": "Household characteristics"
+                                    },
+                                    {
+                                        "text": "Housing"
+                                    },
+                                    {
+                                        "text": "Leisure and tourism"
+                                    },
+                                    {
+                                        "text": "Personal and household finances"
+                                    },
+                                    {
+                                        "text": "Population and migration"
+                                    },
+                                    {
+                                        "text": "Well-being"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Business, industry and trade",
+                                "groupItems": [
+                                    {
+                                        "text": "Business"
+                                    },
+                                    {
+                                        "text": "Changes to business"
+                                    },
+                                    {
+                                        "text": "Construction industry"
+                                    },
+                                    {
+                                        "text": "International trade"
+                                    },
+                                    {
+                                        "text": "IT and internet industry"
+                                    },
+                                    {
+                                        "text": "Manufacturing and production industry"
+                                    },
+                                    {
+                                        "text": "Retail industry",
+                                        "url": "#0"
+                                    },
+                                    {
+                                        "text": "Tourism industry"
+                                    }
+                                ]
+                            },
+                            {
+                                "heading": "Employment and labour market",
+                                "url": "#0",
+                                "groupItems":
+                                [
+                                    {
+                                        "text": "People in work"
+                                    },
+                                    {
+                                        "text": "People not in work"
+                                    }
+                                ]
 
-                        }
-                    ]
-                },
-                {
-                    "groups": [
-                        {
-                            "heading": "Economy",
-                            "groupItems": [
-                                {
-                                    "text": "Economic output and productivity"
-                                },
-                                {
-                                    "text": "Government, public sector and taxes"
-                                },
-                                {
-                                    "text": "Gross Value Added (GVA)"
-                                },
-                                {
-                                    "text": "Investments, pensions and trusts"
-                                },
-                                {
-                                    "text": "Regional accounts"
-                                },
-                                {
-                                    "text": "Environmental accounts"
-                                },
-                                {
-                                    "text": "Gross Domestic Product (GDP)"
-                                },
-                                {
-                                    "text": "Inflation and price indices"
-                                },
-                                {
-                                    "text": "National accounts"
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-        }
-    }
-%}
-{% block pageContent %}
-    {{
-        onsBreadcrumbs({
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Economy",
+                                "groupItems": [
+                                    {
+                                        "text": "Economic output and productivity"
+                                    },
+                                    {
+                                        "text": "Government, public sector and taxes"
+                                    },
+                                    {
+                                        "text": "Gross Value Added (GVA)"
+                                    },
+                                    {
+                                        "text": "Investments, pensions and trusts"
+                                    },
+                                    {
+                                        "text": "Regional accounts"
+                                    },
+                                    {
+                                        "text": "Environmental accounts"
+                                    },
+                                    {
+                                        "text": "Gross Domestic Product (GDP)"
+                                    },
+                                    {
+                                        "text": "Inflation and price indices"
+                                    },
+                                    {
+                                        "text": "National accounts"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        },
+        breadcrumbs: {
             "ariaLabel": 'Breadcrumbs',
             "variant": "pale-blue",
             "itemsList": [
@@ -184,18 +179,19 @@ layout: ~
                     "text": 'Retail industry'
                 }
             ]
+        }
+    }
+%}
+
+{% block hero %}
+    {{
+        onsHero({
+            "title": 'Design and build digital services for the ONS',
+            "text": 'Everything you need to make accessible, consistent digital products',
+            "button": {
+                "url": '#0',
+                "text": 'Get started'
+            }
         })
     }}
-    <main id="main-content">
-        {{
-            onsHero({
-                "title": 'Design and build digital services for the ONS',
-                "text": 'Everything you need to make accessible, consistent digital products',
-                "button": {
-                    "url": '#0',
-                    "text": 'Get started'
-                }
-            })
-        }}
-    </main>
 {% endblock %}