Skip to content

Commit

Permalink
Add new "grey" hero variant (#3450)
Browse files Browse the repository at this point in the history 
Co-authored-by: rmccar <[email protected]>
Co-authored-by: SriHV <[email protected]>
Co-authored-by: SriHV <[email protected]>
  • Loading branch information
@precious-onyenaucheya-ons @rmccar @SriHV
4 people authored Jan 14, 2025
1 parent d8d5a8b commit 9e63499
Show file tree
Hide file tree
Showing 10 changed files with 426 additions and 25 deletions.
3 changes: 3 additions & 0 deletions ...eference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 45 additions & 4 deletions src/components/hero/_hero.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,35 @@
}
}

&--grey {
background-color: var(--ons-color-grey-10);
&::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, l) {
margin-top: 2.5rem;
margin-bottom: 1rem;
}
}

&--topic {
color: var(--ons-color-branded);
@extend .ons-u-mb-no;
}

&__container {
align-items: center;
display: flex;
Expand All @@ -43,10 +72,6 @@
height: 100%;
}

&__text:has(+ .ons-btn) {
margin-bottom: 2rem;
}

&__pre-title {
margin-bottom: 0.5rem;

Expand All @@ -62,6 +87,10 @@
z-index: 5;
}

&__details:has(.ons-breadcrumbs) {
padding-top: 1rem;
}

&--dark & {
&__details {
color: var(--ons-color-text-inverse) !important;
Expand Down Expand Up @@ -299,4 +328,16 @@
}
}
}

&__title-container {
@include mq(l) {
display: grid;
align-items: start;
justify-content: space-between;

&.ons-hero__title-badge {
grid-template-columns: 1fr auto;
}
}
}
}
24 changes: 14 additions & 10 deletions src/components/hero/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +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 variants, “dark” and "navy-blue" |
| 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 |
| 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 |
| 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

Expand Down
59 changes: 49 additions & 10 deletions src/components/hero/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,41 @@
{% 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">
<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>
{% if params.breadcrumbs %}
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
{{
onsBreadcrumbs({
"itemsList": params.breadcrumbs.itemsList,
"ariaLabel": params.breadcrumbs.ariaLabel,
"id": params.breadcrumbs.id,
"classes": 'ons-u-pt-no' ~ (' ' + params.breadcrumbs.classes if params.breadcrumbs.classes else '')
})
}}
{% endif %}
{% if params.topic %}
<h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
{% endif %}
<div class="ons-hero__title-container {% if params.officialStatisticsBadge %}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 %}
</header>
{% if params.officialStatisticsBadge == true %}
{% from "components/icon/_macro.njk" import onsIcon %}
<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 %}
Expand All @@ -34,7 +59,7 @@
{% endif %}
{{
onsButton({
"classes": btnClasses,
"classes": 'ons-u-mt-s' + btnClasses,
"type": 'button',
"text": params.button.text,
"url": params.button.url
Expand All @@ -44,7 +69,21 @@
{% if caller %}
<div class="ons-hero__additional-content">{{- caller() -}}</div>
{% endif %}

{% if params.descriptionList %}
{% from "components/description-list/_macro.njk" import onsDescriptionList %}
{{
onsDescriptionList({
"classes": "ons-u-mb-no",
"variant": 'inline',
"termCol": params.descriptionList.termCol,
"descriptionCol": params.descriptionList.descriptionCol,
"itemsList": params.descriptionList.itemsList
})
}}
{% endif %}
</div>

{% if params.html %}
<div class="ons-hero__additional-html">{{- params.html | safe -}}</div>
{% endif %}
Expand Down
85 changes: 84 additions & 1 deletion src/components/hero/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ describe('macro: hero', () => {

faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });

expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
expect(buttonSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mt-s ons-btn--ghost');
});

it('calls with content', () => {
Expand All @@ -92,4 +92,87 @@ describe('macro: hero', () => {
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
});

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).toBe('Topic Text');
});

it('outputs the official statistics badge when officialStatisticsBadge is set to true', () => {
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, officialStatisticsBadge: true }));

expect($('.ons-hero__badge').length).toBe(1);
expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical 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: 'grey',
breadcrumbs: {
ariaLabel: 'Breadcrumbs',
itemsList: [
{
url: '/breadcrumb-1',
text: 'Breadcrumbs 1',
},
{
url: '/breadcrumb-2',
text: 'Breadcrumbs 2',
},
],
},
}),
);

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[1]).attr('href')).toBe('/breadcrumb-2');
expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2');
});

it('outputs the correct description list value', () => {
const $ = cheerio.load(
renderComponent('hero', {
...EXAMPLE_HERO,
variants: 'grey',
descriptionList: {
termCol: '4',
descriptionCol: '8',
itemsList: [
{
term: 'term1:',
descriptions: [
{
description: 'description1',
},
],
},
{
term: 'term2:',
descriptions: [
{
description: 'description2',
},
],
},
],
},
}),
);

const descriptionText = $('.ons-description-list__value');
expect($(descriptionText[0]).text().trim()).toBe('description1');
expect($(descriptionText[1]).text().trim()).toBe('description2');
});
});
78 changes: 78 additions & 0 deletions src/components/hero/example-hero-grey.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
'fullWidth': true
---

{% from "components/hero/_macro.njk" import onsHero %}
{{
onsHero({
"variants": 'grey',
"detailsColumns": '12',
"officialStatisticsBadge": 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": {
"ariaLabel": 'Breadcrumbs',
"itemsList": [
{
"url": '/',
"text": 'Home'
},
{
"url": '/',
"text": 'Business, industry and trade'
},
{
"url": '/',
"text": 'Retail industry'
}
]
},
"descriptionList": {
"termCol": "5",
"descriptionCol": "7",
"itemsList": [
{
"term": "Release date:",
"descriptions": [
{
"description": "16 August 2024"
}
]
},
{
"term": "Edition:",
"descriptions": [
{
"description": "Latest"
}
]
},
{
"term": "Contact:",
"descriptions": [
{
"description": "Retail Sales team"
}
]
},
{
"term": "Next release:",
"descriptions": [
{
"description": "20 September 2024"
}
]
},
{
"term": "Releases:",
"descriptions": [
{
"description": "View previous releases"
}
]
}
]
}
})
}}
Loading

0 comments on commit 9e63499

Please sign in to comment.