Skip to content

Commit

Permalink
Merge branch 'main' into enhancement/46/testing-refactor-document-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV committed Dec 5, 2024
2 parents cf285f9 + 724ca48 commit 0dfb8eb
Show file tree
Hide file tree
Showing 10 changed files with 287 additions and 13 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.
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%;
}
}
}

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

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

&__pre-title {
Expand Down Expand Up @@ -62,4 +80,223 @@
}
}
}
&--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;
}
}
}
}
20 changes: 10 additions & 10 deletions src/components/hero/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
| 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” |
| 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 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 |

## 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 ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
<header>
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 @@ -87,4 +87,9 @@ describe('macro: hero', () => {
const content = $('.ons-hero__additional-content').text().trim();
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);
});
});
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'
})
}}
2 changes: 1 addition & 1 deletion src/components/tabs/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
height: 2.5rem;
margin: 0 0.5rem 0 0;
overflow: visible;
padding: 0.25rem 1rem 0.25rem;
padding: 0.25rem 1rem;
position: relative;
text-decoration: underline;

Expand Down
2 changes: 2 additions & 0 deletions src/scss/vars/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
--ons-color-ocean-blue: #206095;
--ons-color-sky-blue: #27a0cc;
--ons-color-aqua-teal: #00a3a6;
--ons-color-navy-blue: #194766;

// Supporting palette
--ons-color-leaf-green: #0f8243;
Expand All @@ -41,6 +42,7 @@
--ons-color-jaffa-orange-tint: #fff0e6;
--ons-color-jaffa-orange-vibrant: #ff7b24;
--ons-color-sun-yellow-dark: #e2b500;
--ons-color-navy-blue-light: #153b55;

// Theme branding
--ons-color-branded: var(--ons-color-ocean-blue);
Expand Down

0 comments on commit 0dfb8eb

Please sign in to comment.