From 62713096af54e55672654105d8a7826b2415e7c6 Mon Sep 17 00:00:00 2001
From: SriHV <sri.harsha.v.parupudi@ons.gov.uk>
Date: Fri, 24 Jan 2025 17:13:17 +0000
Subject: [PATCH] changes as per comments

---
 ...ale-blue-bubbles_0_document_0_desktop.png} |  0
 ...pale-blue-bubbles_0_document_1_tablet.png} |  0
 ...pale-blue-bubbles_0_document_2_mobile.png} |  0
 src/components/hero/_hero.scss                |  4 +--
 src/components/hero/_macro-options.md         | 28 +++++++++----------
 src/components/hero/_macro.njk                |  4 +--
 src/components/hero/_macro.spec.js            |  6 ++--
 ...njk => example-hero-pale-blue-bubbles.njk} |  2 +-
 8 files changed, 22 insertions(+), 22 deletions(-)
 rename backstop_data/bitmaps_reference/{ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_0_desktop.png => ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_0_desktop.png} (100%)
 rename backstop_data/bitmaps_reference/{ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_1_tablet.png => ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_1_tablet.png} (100%)
 rename backstop_data/bitmaps_reference/{ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_2_mobile.png => ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_2_mobile.png} (100%)
 rename src/components/hero/{example-hero-grey-bubbles.njk => example-hero-pale-blue-bubbles.njk} (94%)

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_0_desktop.png
similarity index 100%
rename from backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_0_desktop.png
rename to backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_0_desktop.png
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_1_tablet.png
similarity index 100%
rename from backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_1_tablet.png
rename to backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_1_tablet.png
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_2_mobile.png
similarity index 100%
rename from backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey-bubbles_0_document_2_mobile.png
rename to backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-pale-blue-bubbles_0_document_2_mobile.png
diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
index b5c8177af9..eb33020540 100644
--- a/src/components/hero/_hero.scss
+++ b/src/components/hero/_hero.scss
@@ -28,7 +28,7 @@
         }
     }
 
-    &--grey-bubbles {
+    &--pale-blue-bubbles {
         background-color: var(--ons-color-soft-blue-grey);
         margin-bottom: 2.5rem;
         &::before {
@@ -349,7 +349,7 @@
         }
     }
 
-    &--grey-bubbles & {
+    &--pale-blue-bubbles & {
         &__details {
             padding-bottom: 6rem;
             @include mq(l) {
diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md
index aff3164be2..e5b91029e9 100644
--- a/src/components/hero/_macro-options.md
+++ b/src/components/hero/_macro-options.md
@@ -1,17 +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, grey and grey-bubbles” |
-| 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                                                            |
+| 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, grey and pale-blue-bubbles” |
+| 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
 
diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk
index 67714157de..4374176d7b 100644
--- a/src/components/hero/_macro.njk
+++ b/src/components/hero/_macro.njk
@@ -13,7 +13,7 @@
                 {% endfor %}
             </div>
         {% endif %}
-        {% if params.variants == 'grey-bubbles' %}
+        {% if params.variants == 'pale-blue-bubbles' %}
             <div class="ons-hero__circles" aria-hidden="true">
                 {% for i in range(1, 4) %}
                     <div class="ons-hero__circle-{{ i }}"></div>
@@ -22,7 +22,7 @@
         {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
             <div
-                class="ons-hero__details ons-grid__col {% if params.variants != 'grey-bubbles' %}ons-col-{{ detailsColumns }}@m{% else %}ons-col-8@l{% endif %} col-10@s@m"
+                class="ons-hero__details ons-grid__col {% if params.variants != 'pale-blue-bubbles' %}ons-col-{{ detailsColumns }}@m{% else %}ons-col-8@l{% endif %} col-10@s@m"
             >
                 {% if params.breadcrumbs %}
                     {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js
index d0ebea8f00..936ee1a844 100644
--- a/src/components/hero/_macro.spec.js
+++ b/src/components/hero/_macro.spec.js
@@ -93,9 +93,9 @@ describe('macro: hero', () => {
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
 
-    it('renders circles when variant is `topic grey`', () => {
-        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'topic-grey' }));
-        expect($('.ons-hero--topic-grey .ons-hero__circles').length).toBe(1);
+    it('renders circles when variant is `pale blue bubbles`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'pale-blue-bubbles' }));
+        expect($('.ons-hero--pale-blue-bubbles .ons-hero__circles').length).toBe(1);
     });
 
     it('outputs the correct topic when set', () => {
diff --git a/src/components/hero/example-hero-grey-bubbles.njk b/src/components/hero/example-hero-pale-blue-bubbles.njk
similarity index 94%
rename from src/components/hero/example-hero-grey-bubbles.njk
rename to src/components/hero/example-hero-pale-blue-bubbles.njk
index 0575d5027a..aa8c398d62 100644
--- a/src/components/hero/example-hero-grey-bubbles.njk
+++ b/src/components/hero/example-hero-pale-blue-bubbles.njk
@@ -19,6 +19,6 @@
                 }
             ]
         },
-        "variants": 'grey-bubbles'
+        "variants": 'pale-blue-bubbles'
     })
 }}