Skip to content

Commit

Permalink
changes as per comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV committed Jan 24, 2025
1 parent 4f46b52 commit 6271309
Show file tree
Hide file tree
Showing 8 changed files with 22 additions and 22 deletions.
0 ...ero-grey-bubbles_0_document_0_desktop.png → ...ale-blue-bubbles_0_document_0_desktop.png
View file
File renamed without changes
0 ...hero-grey-bubbles_0_document_1_tablet.png → ...pale-blue-bubbles_0_document_1_tablet.png
View file
File renamed without changes
0 ...hero-grey-bubbles_0_document_2_mobile.png → ...pale-blue-bubbles_0_document_2_mobile.png
View file
File renamed without changes
4 changes: 2 additions & 2 deletions src/components/hero/_hero.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}
}

&--grey-bubbles {
&--pale-blue-bubbles {
background-color: var(--ons-color-soft-blue-grey);
margin-bottom: 2.5rem;
&::before {
Expand Down Expand Up @@ -349,7 +349,7 @@
}
}

&--grey-bubbles & {
&--pale-blue-bubbles & {
&__details {
padding-bottom: 6rem;
@include mq(l) {
Expand Down
28 changes: 14 additions & 14 deletions src/components/hero/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -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

Expand Down
4 changes: 2 additions & 2 deletions src/components/hero/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 %}
Expand Down
6 changes: 3 additions & 3 deletions src/components/hero/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion ...onents/hero/example-hero-grey-bubbles.njk → ...s/hero/example-hero-pale-blue-bubbles.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
}
]
},
"variants": 'grey-bubbles'
"variants": 'pale-blue-bubbles'
})
}}

0 comments on commit 6271309

Please sign in to comment.