Skip to content

Commit

Permalink
update as per PR comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons committed Dec 19, 2024
1 parent 407d259 commit 12506cb
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 46 deletions.
32 changes: 28 additions & 4 deletions src/components/hero/_hero.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
}
27 changes: 14 additions & 13 deletions src/components/hero/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -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

Expand Down
46 changes: 24 additions & 22 deletions src/components/hero/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,41 +15,43 @@
{% 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'
})
-}}
</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 '' %}
Expand All @@ -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 %}
Expand Down
22 changes: 17 additions & 5 deletions src/components/hero/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -133,7 +145,7 @@ describe('macro: hero', () => {
const $ = cheerio.load(
renderComponent('hero', {
...EXAMPLE_HERO,
variants: 'analysis',
variants: 'grey',
descriptionList: {
termCol: '4',
descriptionCol: '8',
Expand Down
5 changes: 3 additions & 2 deletions ...components/hero/example-hero-analysis.njk → src/components/hero/example-hero-grey.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down

0 comments on commit 12506cb

Please sign in to comment.