From 12506cb4d082d1c4f0ee4bfbaf53f6341df832c7 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya <precious.onyenaucheya@ons.gov.uk>
Date: Thu, 19 Dec 2024 13:12:45 +0000
Subject: [PATCH] update as per PR comments

---
 src/components/hero/_hero.scss                | 32 +++++++++++--
 src/components/hero/_macro-options.md         | 27 +++++------
 src/components/hero/_macro.njk                | 46 ++++++++++---------
 src/components/hero/_macro.spec.js            | 22 +++++++--
 ...ero-analysis.njk => example-hero-grey.njk} |  5 +-
 5 files changed, 86 insertions(+), 46 deletions(-)
 rename src/components/hero/{example-hero-analysis.njk => example-hero-grey.njk} (96%)

diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
index 9e03008c2d..f2735f17c6 100644
--- a/src/components/hero/_hero.scss
+++ b/src/components/hero/_hero.scss
@@ -28,12 +28,32 @@
         }
     }
 
-    &--analysis {
-        background-color: var(--ons-color-banner-bg);
+    &--grey {
+        background-color: #efeff0;
+        &::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) {
+            margin-top: 2.5rem;
+            margin-bottom: 1rem;
+        }
     }
 
     &--topic {
-        color: var(--ons-color-branded) !important;
+        color: var(--ons-color-branded);
     }
 
     &__container {
@@ -306,10 +326,14 @@
 
     &__title-container {
         @include mq(l) {
-            display: flex;
+            display: grid;
             align-items: start;
             justify-content: space-between;
             gap: 1rem;
+
+            &.ons-hero__title-badge {
+                grid-template-columns: 1fr auto;
+            }
         }
     }
 }
diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md
index 619bb96a1b..1e5cca03f7 100644
--- a/src/components/hero/_macro-options.md
+++ b/src/components/hero/_macro-options.md
@@ -1,16 +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 variant, “dark, navy-blue and analysis” |
-| wide            | boolean                                                   | false    | Set to “true” when using the `wide` page layout container                                                                   |
-| topic           | string                                                    | false    | Topic for the hero                                                                                                          |
-| 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)                                                                      |
-| breadcrumbs     | `Breadcrumbs` [_(ref)_](/components/breadcrumbs)          | false    | Settings to set the Breadcrumbs component within the HTML `<hero>` element                                                  |
-| 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                                              |
+| 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                                                               |
+| topic           | string                                                    | false    | Topic for the hero                                                                                                      |
+| 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)                                                                  |
+| breadcrumbs     | `Breadcrumbs` [_(ref)_](/components/breadcrumbs)          | false    | Settings to set the Breadcrumbs component within the HTML `<hero>` element                                              |
+| 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                                          |
+| badge           | boolean                                                   | false    | Set to “true” display the Oficial statistics badge in the hero                                                          |
 
 ## Button
 
diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk
index 5e44198854..930165e956 100644
--- a/src/components/hero/_macro.njk
+++ b/src/components/hero/_macro.njk
@@ -15,33 +15,31 @@
         {% 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">
-                {% if params.variants == 'analysis' %}
+                {% if params.breadcrumbs %}
                     {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
                     {{
                         onsBreadcrumbs({
                             "itemsList": params.breadcrumbs.itemsList,
                             "ariaLabel": params.breadcrumbs.ariaLabel,
                             "id": params.breadcrumbs.id,
-                            "classes": params.breadcrumbs.classes
+                            "classes": 'ons-u-pt-no ' ~ params.breadcrumbs.classes
                         })
                     }}
-                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
+
+                    {% if params.topic %}
+                        <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
+                    {% endif %}
                 {% endif %}
-                <div class="ons-hero__title-container">
-                    <div>
-                        <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>
+                <div class="ons-hero__title-container {% if params.badge %}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 %}
-                    </div>
-                    {% if params.variants == 'analysis' %}
+                    </header>
+                    {% if params.badge == true %}
                         {% from "components/icon/_macro.njk" import onsIcon %}
-                        <div class="ons-u-mt-2xl@2xs@l">
+                        <div class="ons-hero__badge">
                             {{-
                                 onsIcon({
                                     "iconType": 'official-statistics'
@@ -49,7 +47,11 @@
                             -}}
                         </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 %}
                     {% set btnClasses = params.button.classes if params.button.classes else '' %}
@@ -69,15 +71,15 @@
                     <div class="ons-hero__additional-content">{{- caller() -}}</div>
                 {% endif %}
 
-                {% if params.variants == 'analysis' %}
+                {% if params.descriptionList %}
                     {% from "components/description-list/_macro.njk" import onsDescriptionList %}
                     {{
                         onsDescriptionList({
-                        "classes": "ons-u-mb-no ons-u-pt-l",
-                        "variant": 'inline',
-                        "termCol": params.descriptionList.termCol,
-                        "descriptionCol": params.descriptionList.descriptionCol,
-                        "itemsList": params.descriptionList.itemsList
+                            "classes": "ons-u-mb-no",
+                            "variant": 'inline',
+                            "termCol": params.descriptionList.termCol,
+                            "descriptionCol": params.descriptionList.descriptionCol,
+                            "itemsList": params.descriptionList.itemsList
                         })
                     }}
                 {% endif %}
diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js
index ccbf9893bd..506b6a3625 100644
--- a/src/components/hero/_macro.spec.js
+++ b/src/components/hero/_macro.spec.js
@@ -93,18 +93,30 @@ describe('macro: hero', () => {
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
 
-    it('outputs the correct topic for `analysis` variant', () => {
-        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'analysis', topic: 'Topic Text' }));
+    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).toEqual(expect.stringContaining('Topic Text'));
+        expect(content).toBe('Topic Text');
+    });
+
+    it('outputs the official statistics badge when badge is set to true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, badge: true }));
+
+        expect($('svg').hasClass('ons-hero__badge')).toBe(true);
+        expect($('title').text().trim()).toBe('ons-official-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: 'analysis',
+                variants: 'grey',
                 breadcrumbs: {
                     ariaLabel: 'Breadcrumbs',
                     itemsList: [
@@ -133,7 +145,7 @@ describe('macro: hero', () => {
         const $ = cheerio.load(
             renderComponent('hero', {
                 ...EXAMPLE_HERO,
-                variants: 'analysis',
+                variants: 'grey',
                 descriptionList: {
                     termCol: '4',
                     descriptionCol: '8',
diff --git a/src/components/hero/example-hero-analysis.njk b/src/components/hero/example-hero-grey.njk
similarity index 96%
rename from src/components/hero/example-hero-analysis.njk
rename to src/components/hero/example-hero-grey.njk
index 8aaf9ca74d..2da8eeddd7 100644
--- a/src/components/hero/example-hero-analysis.njk
+++ b/src/components/hero/example-hero-grey.njk
@@ -5,9 +5,10 @@
 {% from "components/hero/_macro.njk" import onsHero %}
 {{
     onsHero({
-        "variants": 'analysis',
+        "variants": 'grey',
         "detailsColumns": '12',
-        "topic": 'Analysis',
+        "badge": 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": {