Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin' into feature/165/analysis-hero
Browse files Browse the repository at this point in the history
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons committed Dec 5, 2024
2 parents 83e02d7 + 724ca48 commit 7bc83cd
Show file tree
Hide file tree
Showing 11 changed files with 302 additions and 27 deletions.
3 changes: 3 additions & 0 deletions ...nce/ds-vr-test__components_hero_example-hero-navy-blue_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 ...ence/ds-vr-test__components_hero_example-hero-navy-blue_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 ...ence/ds-vr-test__components_hero_example-hero-navy-blue_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.
23 changes: 12 additions & 11 deletions src/components/document-list/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,18 @@

## Document

| Name | Type | Required | Description |
| ----------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| classes | string | false | Custom classes to add to each document list item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to each document list item |
| title | `Object<Title>` | true | An object containing text and url of the [title](#title) |
| description | string | false | A short HTML extract of text (for example, a short sentence to give some context of the document) |
| thumbnail | `Object<Thumbnail>` | false | An object containing path and filename attributes for the [thumbnail image](#thumbnail). Renders a placeholder instead if set to `true` |
| metadata | `Object<Metadata>` | false | An object for a [list of information about document](#metadata), for example, date, type and size |
| featured | boolean | false | Will render a featured variant of the document if set to `true` |
| fullWidth | boolean | false | If set to `true`, wraps the `featured` document in a `div` with class `ons-container` for a “full-bleed” layout. Can only be set when featured is set to true. |
| wide | boolean | false | Set to `true` to increase the maximum width of the layout container to 1280px. |
| Name | Type | Required | Description |
| ----------------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| classes | string | false | Custom classes to add to each document list item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to each document list item |
| title | `Object<Title>` | true | An object containing text and url of the [title](#title) |
| description | string | false | A short HTML extract of text (for example, a short sentence to give some context of the document) |
| thumbnail | `Object<Thumbnail>` | false | An object containing path and filename attributes for the [thumbnail image](#thumbnail). Renders a placeholder instead if set to `true` |
| metadata | `Object<Metadata>` | false | An object for a [list of information about document](#metadata), for example, date, type and size |
| featured | boolean | false | Will render a featured variant of the document if set to `true` |
| fullWidth | boolean | false | If set to `true`, wraps the `featured` document in a `div` with class `ons-container` for a “full-bleed” layout. Can only be set when featured is set to true. |
| wide | boolean | false | Set to `true` to increase the maximum width of the layout container to 1280px. |
| showMetadataFirst | boolean | false | If set to `true`, metadata is displayed above the header. |

### Thumbnail

Expand Down
241 changes: 239 additions & 2 deletions src/components/hero/_hero.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,24 @@
background-color: var(--ons-color-hero-bg-dark);
}

&--navy-blue {
background-color: var(--ons-color-navy-blue);
&::before {
content: '';
background-color: var(--ons-color-navy-blue-light);
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%;
}
}
}

&--analysis {
background-color: var(--ons-color-banner-bg);

Expand All @@ -33,8 +51,8 @@
height: 100%;
}

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

&__pre-title {
Expand Down Expand Up @@ -70,6 +88,225 @@
}
}
}
&--navy-blue & {
&__details {
color: var(--ons-color-text-inverse);
padding: 2rem 0 6rem;
@include mq(l) {
padding: 4rem 0;
}
}

&__circle-1 {
@include mq(l) {
background-color: var(--ons-color-spring-green);
border-radius: 50%;
height: 59px;
position: absolute;
right: 289px;
top: -11px;
width: 59px;
}
}

&__circle-2 {
@include mq(l) {
background-color: var(--ons-color-white);
border-radius: 50%;
position: absolute;
height: 30px;
right: 193px;
top: 11px;
width: 30px;
}
}

&__circle-3 {
@include mq(l) {
height: 60px;
right: 112px;
top: 25px;
width: 60px;
background-color: var(--ons-color-white);
border-radius: 50%;
position: absolute;
}
}

&__circle-4 {
@include mq(l) {
background-color: var(--ons-color-white);
border-radius: 50%;
height: 60px;
position: absolute;
right: 208px;
top: 80px;
width: 60px;
}

&::before {
@include mq(l) {
background-color: var(--ons-color-ocean-blue);
border-radius: 50%;
content: '';
height: 100%;
left: 0;
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
}
}
}

&__circle-5 {
@include mq(l) {
background-color: var(--ons-color-white);
border-radius: 50%;
height: 14px;
position: absolute;
right: 222px;
top: 187px;
width: 14px;
}

&::before {
@include mq(l) {
background-color: var(--ons-color-sky-blue);
border-radius: 50%;
content: '';
height: 100%;
left: 0;
opacity: 0.7;
position: absolute;
top: 0;
width: 100%;
}
}
}

&__circle-6 {
@include mq(l) {
background-color: var(--ons-color-spring-green);
border-radius: 50%;
height: 15px;
position: absolute;
right: 135px;
top: 188px;
width: 15px;
}
}

&__circle-7 {
@include mq(l) {
background-color: var(--ons-color-white);
border-radius: 50%;
height: 60px;
position: absolute;
right: 24px;
bottom: 92px;
width: 60px;
}

&::before {
@include mq(l) {
background-color: var(--ons-color-night-blue);
border-radius: 50%;
content: '';
height: 100%;
left: 0;
opacity: 0.7;
position: absolute;
top: 0;
width: 100%;
}
}
}

&__circle-8 {
@include mq(l) {
background-color: var(--ons-color-white);
border-radius: 50%;
bottom: 70px;
height: 15px;
position: absolute;
right: 275px;
width: 15px;
}
}

&__circle-9 {
background-color: var(--ons-color-spring-green);
border-radius: 50%;
bottom: 28px;
position: absolute;
right: 15px;
width: 40px;
height: 40px;
@include mq(l) {
bottom: 40px;
height: 30px;
position: absolute;
right: 215px;
width: 30px;
}
}

&__circle-10 {
@include mq(l) {
background-color: var(--ons-color-white);
border-radius: 50%;
bottom: 63px;
height: 15px;
position: absolute;
right: 120px;
width: 15px;
}

&::before {
@include mq(l) {
background-color: var(--ons-color-aqua-teal);
border-radius: 50%;
content: '';
height: 100%;
left: 0;
opacity: 0.4;
position: absolute;
top: 0;
width: 100%;
}
}
}

&__circle-11 {
background-color: var(--ons-color-sky-blue);
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
bottom: -7px;
right: 50px;
@include mq(l) {
bottom: 33px;
height: 30px;
position: absolute;
right: 75px;
width: 30px;
}
}

&__circle-12 {
@include mq(l) {
background-color: var(--ons-color-night-blue);
border-radius: 50%;
bottom: -35px;
height: 59px;
position: absolute;
right: 125px;
width: 59px;
}
}
}

&__title-container {
display: flex;
Expand Down
26 changes: 13 additions & 13 deletions src/components/hero/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
| 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, analysis” |
| wide | boolean | false | Set to “true” when using the `wide` page layout container |
| analysisText | string | false | Text for the hero analysis text |
| 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 analysis” |
| wide | boolean | false | Set to “true” when using the `wide` page layout container |
| analysisText | string | false | Text for the hero analysis text |
| 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 |

## Button

Expand Down
7 changes: 7 additions & 0 deletions src/components/hero/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
<section
class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
>
{% if params.variants == 'navy-blue' %}
<div class="ons-hero__circles" aria-hidden="true">
{% for i in range(1, 13) %}
<div class="ons-hero__circle-{{ i }}"></div>
{% endfor %}
</div>
{% 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 != 'analysis' %}ons-col-{{ detailsColumns }}@m ons-col-10@s@m{% endif %}"
Expand Down
5 changes: 5 additions & 0 deletions src/components/hero/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,11 @@ describe('macro: hero', () => {
expect(content).toEqual(expect.stringContaining('Example content...'));
});

it('renders circles when variant is `navy blue`', () => {
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 analysis text with `analysis` variant', () => {
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'analysis', analysisText: 'Analysis Text' }));

Expand Down
14 changes: 14 additions & 0 deletions src/components/hero/example-hero-navy-blue.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
'fullWidth': true
---

{% from "components/hero/_macro.njk" import onsHero %}
{{
onsHero({
"title": 'Welcome to the ONS Beta',
"text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
The active links will take you through the journey to test the new design features.',
"variants": 'navy-blue'
})
}}
Loading

0 comments on commit 7bc83cd

Please sign in to comment.