add minor changes and fix failing test

ONSdigital · Dec 5, 2024 · 1140c34 · 1140c34
1 parent eca78b6
commit 1140c34
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 23 deletions.
diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
@@ -30,10 +30,10 @@
 
     &--analysis {
         background-color: var(--ons-color-banner-bg);
+    }
 
-        &-text {
-            color: var(--ons-color-branded) !important;
-        }
+    &--topic {
+        color: var(--ons-color-branded) !important;
     }
 
     &__container {
@@ -309,9 +309,11 @@
     }
 
     &__title-container {
-        display: flex;
-        align-items: start;
-        justify-content: space-between;
-        gap: 1rem;
+        @include mq(l) {
+            display: flex;
+            align-items: start;
+            justify-content: space-between;
+            gap: 1rem;
+        }
     }
 }
diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md
@@ -2,7 +2,7 @@
 | --------------- | --------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
 | 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                                                                   |
-| analysisText    | string                                                    | false    | Text for the hero analysis text                                                                                             |
+| 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                                                                                  |

diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk
@@ -27,7 +27,7 @@
                             "classes": params.breadcrumbs.classes
                         })
                     }}
-                    <h2 class="ons-hero--analysis-text">{{ params.analysisText | safe }}</h2>
+                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
                 <div class="ons-hero__title-container">
                     <div>
@@ -75,7 +75,7 @@
                     {% from "components/description-list/_macro.njk" import onsDescriptionList %}
                     {{
                         onsDescriptionList({
-                        "classes": "ons-u-mb-no",
+                        "classes": "ons-u-mb-no ons-u-pt-l",
                         "variant": 'inline',
                         "termCol": params.descriptionList.termCol,
                         "descriptionCol": params.descriptionList.descriptionCol,

diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js
@@ -93,11 +93,11 @@ describe('macro: hero', () => {
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
 
-    it('outputs the correct analysis text with `analysis` variant', () => {
-        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'analysis', analysisText: 'Analysis Text' }));
+    it('outputs the correct topic for `analysis` variant', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'analysis', topic: 'Topic Text' }));
 
-        const content = $('.ons-hero--analysis-text').text().trim();
-        expect(content).toEqual(expect.stringContaining('Analysis Text'));
+        const content = $('.ons-hero--topic').text().trim();
+        expect(content).toEqual(expect.stringContaining('Topic Text'));
     });
 
     it('outputs the correct breadcrumbs', () => {
@@ -121,16 +121,15 @@ describe('macro: hero', () => {
             }),
         );
 
-        const breadcrumbs = $('.ons-breadcrumbs__item');
-        console.log(breadcrumbs);
+        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[0]).text().trim()).toBe('Breadcrumbs 1');
         expect($(breadcrumbs[1]).attr('href')).toBe('/breadcrumb-2');
-        expect($(breadcrumbs[1]).text().trim()).toBe('BreadCrumbs 2:');
+        expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2');
     });
 
-    it('outputs the correct description list with `termCol` and `descriptionCol`', () => {
+    it('outputs the correct description list value', () => {
         const $ = cheerio.load(
             renderComponent('hero', {
                 ...EXAMPLE_HERO,
@@ -159,8 +158,9 @@ describe('macro: hero', () => {
                 },
             }),
         );
-        // console.log($.html());
-        expect($('.ons-description-list__term')).hasClass('ons-col-4@xs').toBe(true);
-        expect($('.ons-description-list__value')).hasClass('ons-col-8@xs').toBe(true);
+
+        const descriptionText = $('.ons-description-list__value');
+        expect($(descriptionText[0]).text().trim()).toBe('description1');
+        expect($(descriptionText[1]).text().trim()).toBe('description2');
     });
 });
diff --git a/src/components/hero/example-hero-analysis.njk b/src/components/hero/example-hero-analysis.njk
@@ -6,7 +6,7 @@
 {{
     onsHero({
         "variants": 'analysis',
-        "analysisText": 'Analysis',
+        "topic": 'Analysis',
         "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": {