From bde52252d142b44dfa76e759601f7ba77ca0cb09 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:18:06 +0000 Subject: [PATCH 1/2] Documented showMetadataFirst in document-list (#3443) --- .../document-list/_macro-options.md | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/document-list/_macro-options.md b/src/components/document-list/_macro-options.md index e6a6857cc8..780525a727 100644 --- a/src/components/document-list/_macro-options.md +++ b/src/components/document-list/_macro-options.md @@ -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` | 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 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 2/2] 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<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 diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index 5412852da9..fd0f2668de 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -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> diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js index 9c9ad42be3..513648ae0a 100644 --- a/src/components/hero/_macro.spec.js +++ b/src/components/hero/_macro.spec.js @@ -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); + }); }); diff --git a/src/components/hero/example-hero-navy-blue.njk b/src/components/hero/example-hero-navy-blue.njk new file mode 100644 index 0000000000..8f5e92ef97 --- /dev/null +++ b/src/components/hero/example-hero-navy-blue.njk @@ -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' + }) +}} diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 235c28c552..f06114dd2d 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -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; diff --git a/src/scss/vars/_colors.scss b/src/scss/vars/_colors.scss index 88b0e954af..3f3e4f3f44 100644 --- a/src/scss/vars/_colors.scss +++ b/src/scss/vars/_colors.scss @@ -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; @@ -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);