Add new "grey" hero variant

src/components/hero/_hero.scss

@@ -28,6 +28,35 @@
         }
     }
 
+    &--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;
@@ -43,10 +72,6 @@
         height: 100%;
     }
 
-    &__text:has(+ .ons-btn) {
-        margin-bottom: 2rem;
-    }
-
     &__pre-title {
         margin-bottom: 0.5rem;
 
@@ -62,6 +87,12 @@
         z-index: 5;
     }
 
+    &--grey & {
+        &__details {
+            padding-top: 1rem;
+        }
+    }
+
     &--dark & {
         &__details {
             color: var(--ons-color-text-inverse) !important;
@@ -299,4 +330,16 @@
             }
         }
     }
+
+    &__title-container {
+        @include mq(l) {
+            display: grid;
+            align-items: start;
+            justify-content: space-between;
+
+            &.ons-hero__title-badge {
+                grid-template-columns: 1fr auto;
+            }
+        }
+    }
 }

src/components/hero/_macro-options.md

@@ -1,13 +1,17 @@
-| Name           | Type             | Required | Description                                                                                                          |
-| -------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
-| variants       | array or string  | false    | An array of values or single value (string) to adjust the component using available variants, “dark” and "navy-blue" |
-| wide           | boolean          | false    | Set to “true” when using the `wide` page layout container                                                            |
-| title          | string           | true     | Text for the hero title                                                                                              |
-| subtitle       | string           | false    | Text for the hero subtitle                                                                                           |
-| text           | string           | false    | Text to follow the hero title and subtitle                                                                           |
-| button         | `Object<Button>` | false    | Settings for the hero [call to action button](#button)                                                               |
-| html           | string           | false    | Allows arbitrary HTML for additional content to be added to the component                                            |
-| detailsColumns | integer          | false    | Number of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8              |
+| Name                    | Type                                                      | Required | Description                                                                                                             |
+| ----------------------- | --------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| variants                | array or string                                           | false    | An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue and grey” |
+| wide                    | boolean                                                   | false    | Set to “true” when using the `wide` page layout container                                                               |
+| title                   | string                                                    | true     | Text for the hero title                                                                                                 |
+| subtitle                | string                                                    | false    | Text for the hero subtitle                                                                                              |
+| text                    | string                                                    | false    | Text to follow the hero title and subtitle                                                                              |
+| button                  | `Object<Button>`                                          | false    | Settings for the hero [call to action button](#button)                                                                  |
+| html                    | string                                                    | false    | Allows arbitrary HTML for additional content to be added to the component                                               |
+| detailsColumns          | integer                                                   | false    | Number of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8                 |
+| descriptionList         | `DescriptionList` [_(ref)_](/components/description-list) | false    | Settings to set the DescriptionList component within the HTML `<hero>` element                                          |
+| officialStatisticsBadge | boolean                                                   | false    | Set to “true” display the official statistics badge in the hero                                                         |
+| topic                   | string                                                    | false    | Topic for the hero                                                                                                      |
+| breadcrumbs             | `Breadcrumbs` [_(ref)_](/components/breadcrumbs)          | false    | Settings to set the Breadcrumbs component within the HTML `<hero>` element                                              |
 
 ## Button
 

src/components/hero/_macro.njk

@@ -15,16 +15,41 @@
         {% 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
+                        })
+                    }}
+                {% 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 %}
@@ -34,7 +59,7 @@
                     {% endif %}
                     {{
                         onsButton({
-                            "classes": btnClasses,
+                            "classes": 'ons-u-mt-s' + btnClasses,
                             "type": 'button',
                             "text": params.button.text,
                             "url": params.button.url
@@ -44,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 %}

src/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', () => {
@@ -92,4 +92,87 @@ describe('macro: hero', () => {
         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');
+    });
 });

src/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"
+                        }
+                    ]
+                }
+            ]
+        }
+    })
+}}