From 724ca4866f13ce28610265a8cf724ee9a074194f Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Wed, 4 Dec 2024 08:40:41 +0000 Subject: [PATCH] New Hero variant - Navy Blue (#3438) Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- ...le-hero-navy-blue_0_document_0_desktop.png | 3 + ...ple-hero-navy-blue_0_document_1_tablet.png | 3 + ...ple-hero-navy-blue_0_document_2_mobile.png | 3 + src/components/hero/_hero.scss | 241 +++++++++++++++++- src/components/hero/_macro-options.md | 20 +- src/components/hero/_macro.njk | 7 + src/components/hero/_macro.spec.js | 5 + .../hero/example-hero-navy-blue.njk | 14 + src/components/tabs/_tabs.scss | 2 +- src/scss/vars/_colors.scss | 2 + 10 files changed, 287 insertions(+), 13 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png create mode 100644 src/components/hero/example-hero-navy-blue.njk diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png new file mode 100644 index 0000000000..3883e5fe98 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2d93e69a178a10826eb3c99457a09d80b1932374fc2ca8588c5b824174676223 +size 60632 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png new file mode 100644 index 0000000000..70cffd7b1e --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a8fc9e9996c6ac55473f71e00e3d4b93bd8c1ec62ae71fa014ec92980f95ee3a +size 47648 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png new file mode 100644 index 0000000000..4b1e1f5748 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d145151cf6efea869e30573593400b453619d9b8f2d3657fe4b2cd688a98160e +size 44965 diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss index 1d2adfe2e2..cb5694d852 100644 --- a/src/components/hero/_hero.scss +++ b/src/components/hero/_hero.scss @@ -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; @@ -25,8 +43,8 @@ height: 100%; } - &__text { - padding-bottom: 1rem; + &__text:has(+ .ons-btn) { + margin-bottom: 2rem; } &__pre-title { @@ -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; + } + } + } } diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md index e721a9c007..002ceb3008 100644 --- a/src/components/hero/_macro-options.md +++ b/src/components/hero/_macro-options.md @@ -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