diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss index 1ea77b28f7..f44d7923da 100644 --- 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 index e5db6f2e08..619bb96a1b 100644 --- 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 index 617f26aee7..2075c810d8 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -27,7 +27,7 @@ "classes": params.breadcrumbs.classes }) }} -

{{ params.analysisText | safe }}

+

{{ params.topic | safe }}

{% endif %}
@@ -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 index 1e054f5036..89c3918987 100644 --- 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 index cbf5755439..fad02012a0 100644 --- 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": {