@ons/design-system 72.1.1 → 72.2.0

package/components/hero/_hero.scss

@@ -10,6 +10,53 @@
         background-color: var(--ons-color-hero-bg-dark);
     }
 
+    &--navy-blue {
+        background-color: var(--ons-color-navy-blue);
+        &::before {
+            content: '';
+            background-color: var(--ons-color-navy-blue-light);
+            border-radius: 0 0 50% 50%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 300% 150%;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+
+    &--grey {
+        background-color: var(--ons-color-grey-10);
+        &::before {
+            content: '';
+            background-color: var(--ons-color-banner-bg);
+            border-radius: 0 0 50% 50%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 300% 150%;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+    &__badge {
+        @include mq(xs, l) {
+            margin-top: 2.5rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    &--topic {
+        color: var(--ons-color-branded);
+        @extend .ons-u-mb-no;
+    }
+
     &__container {
         align-items: center;
         display: flex;
@@ -25,10 +72,6 @@
         height: 100%;
     }
 
-    &__text {
-        padding-bottom: 1rem;
-    }
-
     &__pre-title {
         margin-bottom: 0.5rem;
 
@@ -44,6 +87,10 @@
         z-index: 5;
     }
 
+    &__details:has(.ons-breadcrumbs) {
+        padding-top: 1rem;
+    }
+
     &--dark & {
         &__details {
             color: var(--ons-color-text-inverse) !important;
@@ -62,4 +109,235 @@
             }
         }
     }
+    &--navy-blue & {
+        &__details {
+            color: var(--ons-color-text-inverse);
+            padding: 2rem 0 6rem;
+            @include mq(l) {
+                padding: 4rem 0;
+            }
+        }
+
+        &__circle-1 {
+            @include mq(l) {
+                background-color: var(--ons-color-spring-green);
+                border-radius: 50%;
+                height: 59px;
+                position: absolute;
+                right: 289px;
+                top: -11px;
+                width: 59px;
+            }
+        }
+
+        &__circle-2 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                position: absolute;
+                height: 30px;
+                right: 193px;
+                top: 11px;
+                width: 30px;
+            }
+        }
+
+        &__circle-3 {
+            @include mq(l) {
+                height: 60px;
+                right: 112px;
+                top: 25px;
+                width: 60px;
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                position: absolute;
+            }
+        }
+
+        &__circle-4 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 60px;
+                position: absolute;
+                right: 208px;
+                top: 80px;
+                width: 60px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-ocean-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-5 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 14px;
+                position: absolute;
+                right: 222px;
+                top: 187px;
+                width: 14px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-sky-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.7;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-6 {
+            @include mq(l) {
+                background-color: var(--ons-color-spring-green);
+                border-radius: 50%;
+                height: 15px;
+                position: absolute;
+                right: 135px;
+                top: 188px;
+                width: 15px;
+            }
+        }
+
+        &__circle-7 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 60px;
+                position: absolute;
+                right: 24px;
+                bottom: 92px;
+                width: 60px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-night-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.7;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-8 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                bottom: 70px;
+                height: 15px;
+                position: absolute;
+                right: 275px;
+                width: 15px;
+            }
+        }
+
+        &__circle-9 {
+            background-color: var(--ons-color-spring-green);
+            border-radius: 50%;
+            bottom: 28px;
+            position: absolute;
+            right: 15px;
+            width: 40px;
+            height: 40px;
+            @include mq(l) {
+                bottom: 40px;
+                height: 30px;
+                position: absolute;
+                right: 215px;
+                width: 30px;
+            }
+        }
+
+        &__circle-10 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                bottom: 63px;
+                height: 15px;
+                position: absolute;
+                right: 120px;
+                width: 15px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-aqua-teal);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-11 {
+            background-color: var(--ons-color-sky-blue);
+            border-radius: 50%;
+            height: 14px;
+            width: 14px;
+            position: absolute;
+            bottom: -7px;
+            right: 50px;
+            @include mq(l) {
+                bottom: 33px;
+                height: 30px;
+                position: absolute;
+                right: 75px;
+                width: 30px;
+            }
+        }
+
+        &__circle-12 {
+            @include mq(l) {
+                background-color: var(--ons-color-night-blue);
+                border-radius: 50%;
+                bottom: -35px;
+                height: 59px;
+                position: absolute;
+                right: 125px;
+                width: 59px;
+            }
+        }
+    }
+
+    &__title-container {
+        @include mq(l) {
+            display: grid;
+            align-items: start;
+            justify-content: space-between;
+
+            &.ons-hero__title-badge {
+                grid-template-columns: 1fr auto;
+            }
+        }
+    }
 }

package/components/hero/_macro.njk

@@ -6,18 +6,50 @@
     <section
         class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
+        {% if params.variants == 'navy-blue' %}
+            <div class="ons-hero__circles" aria-hidden="true">
+                {% for i in range(1, 13) %}
+                    <div class="ons-hero__circle-{{ i }}"></div>
+                {% endfor %}
+            </div>
+        {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
-                <header>
-                    <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
-                    {% if params.subtitle %}
-                        <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
-                    {% endif %}
-                </header>
-
-                {% if params.text %}
-                    <p class="ons-hero__text">{{ params.text | safe }}</p>
+                {% if params.breadcrumbs %}
+                    {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+                    {{
+                        onsBreadcrumbs({
+                            "itemsList": params.breadcrumbs.itemsList,
+                            "ariaLabel": params.breadcrumbs.ariaLabel,
+                            "id": params.breadcrumbs.id,
+                            "classes": 'ons-u-pt-no' ~ (' ' + params.breadcrumbs.classes if params.breadcrumbs.classes else '')
+                        })
+                    }}
                 {% endif %}
+                {% if params.topic %}
+                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
+                {% endif %}
+                <div class="ons-hero__title-container {% if params.officialStatisticsBadge %}ons-hero__title-badge{% endif %}">
+                    <header>
+                        <h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
+                        {% if params.subtitle %}
+                            <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                        {% endif %}
+                    </header>
+                    {% if params.officialStatisticsBadge == true %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        <div class="ons-hero__badge">
+                            {{-
+                                onsIcon({
+                                    "iconType": 'official-statistics'
+                                })
+                            -}}
+                        </div>
+                    {% endif %}
+                    {% if params.text %}
+                        <p class="ons-hero__text">{{ params.text | safe }}</p>
+                    {% endif %}
+                </div>
 
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
@@ -27,7 +59,7 @@
                     {% endif %}
                     {{
                         onsButton({
-                            "classes": btnClasses,
+                            "classes": 'ons-u-mt-s' + btnClasses,
                             "type": 'button',
                             "text": params.button.text,
                             "url": params.button.url
@@ -37,7 +69,21 @@
                 {% if caller %}
                     <div class="ons-hero__additional-content">{{- caller() -}}</div>
                 {% endif %}
+
+                {% if params.descriptionList %}
+                    {% from "components/description-list/_macro.njk" import onsDescriptionList %}
+                    {{
+                        onsDescriptionList({
+                            "classes": "ons-u-mb-no",
+                            "variant": 'inline',
+                            "termCol": params.descriptionList.termCol,
+                            "descriptionCol": params.descriptionList.descriptionCol,
+                            "itemsList": params.descriptionList.itemsList
+                        })
+                    }}
+                {% endif %}
             </div>
+
             {% if params.html %}
                 <div class="ons-hero__additional-html">{{- params.html | safe -}}</div>
             {% endif %}

package/components/hero/_macro.spec.js

@@ -78,7 +78,7 @@ describe('macro: hero', () => {
 
         faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
 
-        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mt-s ons-btn--ghost');
     });
 
     it('calls with content', () => {
@@ -87,4 +87,92 @@ describe('macro: hero', () => {
         const content = $('.ons-hero__additional-content').text().trim();
         expect(content).toEqual(expect.stringContaining('Example content...'));
     });
+
+    it('renders circles when variant is `navy blue`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
+        expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
+    });
+
+    it('outputs the correct topic when set', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, topic: 'Topic Text' }));
+
+        const content = $('.ons-hero--topic').text().trim();
+        expect(content).toBe('Topic Text');
+    });
+
+    it('outputs the official statistics badge when officialStatisticsBadge is set to true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, officialStatisticsBadge: true }));
+
+        expect($('.ons-hero__badge').length).toBe(1);
+        expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
+    });
+
+    it('renders curved gradient when variant is `grey`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey' }));
+        expect($('.ons-hero--grey').length).toBe(1);
+    });
+
+    it('outputs the correct breadcrumbs', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                breadcrumbs: {
+                    ariaLabel: 'Breadcrumbs',
+                    itemsList: [
+                        {
+                            url: '/breadcrumb-1',
+                            text: 'Breadcrumbs 1',
+                        },
+                        {
+                            url: '/breadcrumb-2',
+                            text: 'Breadcrumbs 2',
+                        },
+                    ],
+                },
+            }),
+        );
+
+        const breadcrumbs = $('.ons-breadcrumbs__link');
+        expect($(breadcrumbs).length).toBe(2);
+        expect($(breadcrumbs[0]).attr('href')).toBe('/breadcrumb-1');
+        expect($(breadcrumbs[0]).text().trim()).toBe('Breadcrumbs 1');
+        expect($(breadcrumbs[1]).attr('href')).toBe('/breadcrumb-2');
+        expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2');
+    });
+
+    it('outputs the correct description list value', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                ...EXAMPLE_HERO,
+                variants: 'grey',
+                descriptionList: {
+                    termCol: '4',
+                    descriptionCol: '8',
+                    itemsList: [
+                        {
+                            term: 'term1:',
+                            descriptions: [
+                                {
+                                    description: 'description1',
+                                },
+                            ],
+                        },
+                        {
+                            term: 'term2:',
+                            descriptions: [
+                                {
+                                    description: 'description2',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            }),
+        );
+
+        const descriptionText = $('.ons-description-list__value');
+        expect($(descriptionText[0]).text().trim()).toBe('description1');
+        expect($(descriptionText[1]).text().trim()).toBe('description2');
+    });
 });

package/components/hero/example-hero-grey.njk

@@ -0,0 +1,78 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "variants": 'grey',
+        "detailsColumns": '12',
+        "officialStatisticsBadge": true,
+        "topic": 'Statistical article',
+        "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
+        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                },
+                {
+                    "url": '/',
+                    "text": 'Business, industry and trade'
+                },
+                {
+                    "url": '/',
+                    "text": 'Retail industry'
+                }
+            ]
+        },
+        "descriptionList": {
+            "termCol": "5",
+            "descriptionCol": "7",
+            "itemsList": [
+                {
+                    "term": "Release date:",
+                    "descriptions": [
+                        {
+                            "description": "16 August 2024"
+                        }
+                    ]
+                },
+                {
+                    "term": "Edition:",
+                    "descriptions": [
+                        {
+                            "description": "Latest"
+                        }
+                    ]
+                },
+                {
+                    "term": "Contact:",
+                    "descriptions": [
+                        {
+                            "description": "Retail Sales team"
+                        }
+                    ]
+                },
+                {
+                    "term": "Next release:",
+                    "descriptions": [
+                        {
+                            "description": "20 September 2024"
+                        }
+                    ]
+                },
+                {
+                    "term": "Releases:",
+                    "descriptions": [
+                        {
+                            "description": "View previous releases"
+                        }
+                    ]
+                }
+            ]
+        }
+    })
+}}

package/components/hero/example-hero-navy-blue.njk

@@ -0,0 +1,14 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Welcome to the ONS Beta',
+        "text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
+                new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
+                The active links will take you through the journey to test the new design features.',
+        "variants": 'navy-blue'
+    })
+}}