From 9e6349988b6a4a30eb4ad38733332a20a4f34f35 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 14 Jan 2025 10:48:13 +0000 Subject: [PATCH] Add new "grey" hero variant (#3450) Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> Co-authored-by: SriHV <123635670+SriHV@users.noreply.github.com> Co-authored-by: SriHV --- ...example-hero-grey_0_document_0_desktop.png | 3 + ..._example-hero-grey_0_document_1_tablet.png | 3 + ..._example-hero-grey_0_document_2_mobile.png | 3 + src/components/hero/_hero.scss | 49 +++++- src/components/hero/_macro-options.md | 24 +-- src/components/hero/_macro.njk | 59 +++++-- src/components/hero/_macro.spec.js | 85 +++++++++- src/components/hero/example-hero-grey.njk | 78 ++++++++++ src/components/icon/_macro.njk | 146 ++++++++++++++++++ src/scss/vars/_colors.scss | 1 + 10 files changed, 426 insertions(+), 25 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png create mode 100644 src/components/hero/example-hero-grey.njk diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png new file mode 100644 index 0000000000..fed0fc64cd --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d1281c7b5cc116410f9add67692e230581ce5b8e4976d2ac8e20c46cd59e020f +size 79351 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png new file mode 100644 index 0000000000..ca759aecbd --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e3bce5cf21914ebf9ba6b4a848c59cccc1ca209882f446603737f4fad82b01f6 +size 77032 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png new file mode 100644 index 0000000000..c2ec970118 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8b5618c2c948e45ae4abd65f46b65afd0bb4a6ba49b4d13544528ef2a524a684 +size 72186 diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss index cb5694d852..bead3a4721 100644 --- a/src/components/hero/_hero.scss +++ b/src/components/hero/_hero.scss @@ -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; @@ -43,10 +72,6 @@ height: 100%; } - &__text:has(+ .ons-btn) { - margin-bottom: 2rem; - } - &__pre-title { margin-bottom: 0.5rem; @@ -62,6 +87,10 @@ z-index: 5; } + &__details:has(.ons-breadcrumbs) { + padding-top: 1rem; + } + &--dark & { &__details { color: var(--ons-color-text-inverse) !important; @@ -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; + } + } + } } diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md index 002ceb3008..dbafde84a3 100644 --- a/src/components/hero/_macro-options.md +++ b/src/components/hero/_macro-options.md @@ -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