From 46c876b214c98a1405222a2de7570f12f289b171 Mon Sep 17 00:00:00 2001 From: SriHV Date: Wed, 22 Jan 2025 18:44:50 +0000 Subject: [PATCH] added nav items to menu item --- ...mple-header-basic_0_document_0_desktop.png | 4 +- ...ample-header-basic_0_document_1_tablet.png | 4 +- ...ample-header-basic_0_document_2_mobile.png | 4 +- src/components/header/_header.scss | 21 +++++- src/components/header/_macro-options.md | 66 ++++++++++++++----- src/components/header/_macro.njk | 42 +++++------- .../header/example-header-basic.njk | 5 +- src/scss/utilities/_grid.scss | 7 ++ 8 files changed, 99 insertions(+), 54 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png index 84b7f01461..a980284aae 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:03c53a0bcd6fe29cd4c9fe59227cc4f2612f00f0a08eb0c2a53d7334c241fcd6 -size 14266 +oid sha256:a4a678dffbf6b95610f5a1ba8552916d2bc5b17a293a4c80dc24642a0bf32acd +size 15252 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png index f34345bbff..ffe11646c3 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:65f329afc04fde5ff5f541b2712b183accab1446bd76d6944042949de4413fab -size 9069 +oid sha256:3ba4512bd0a84653e1f57769adce91a3a13887d29cc81e44565852c73c57be9b +size 10073 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png index 75468ba73d..ea2c3c3f24 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fb39535ce7f5f1affd77107ef3155d32b4197e7b0805065b221d379d05f9e88f -size 5422 +oid sha256:4edc0c0bedf8f183683c91a4a527d794518b7f6e9ab659725a2c80348c33bbbe +size 6529 diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 2d5da2309c..91565f843c 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -242,7 +242,7 @@ } } - &-nav-links { + &-nav-menu { background-color: var(--ons-color-branded-tint); margin-bottom: 1rem; padding-top: 2.5rem; @@ -254,6 +254,25 @@ padding-left: 0; row-gap: 1rem; } + &__heading, + &__text, + &__description { + line-height: 1.714 !important; + } + + &__child-list { + margin-bottom: 2rem !important; + } + .ons-grid { + margin-left: 0; + } + .ons-grid__col { + padding-left: 0; + padding-bottom: 1rem; + @include mq(m) { + padding-bottom: 0; + } + } } .ons-btn { diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index b1cf9c4c18..a54c728ffa 100644 --- a/src/components/header/_macro-options.md +++ b/src/components/header/_macro-options.md @@ -1,22 +1,23 @@ -| Name | Type | Required | Description | -| --------------------- | ------------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `
` element | -| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px | -| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport | -| classes | string | false | Classes to add to the wrapping `header` | -| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" | -| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. | -| mastheadLogo | object`` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. | -| language | object`` | false | Settings for the [language selector](#language) | -| serviceLinks | object`` | false | Settings for the [service links](#servicelinks) in the masthead | +| Name | Type | Required | Description | +| --------------------- | ------------------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `
` element | +| wide | boolean | false | Set to “true” to increase the maximum width of the layout container to 1280px | +| fullWidth | boolean | false | Set to “true” to increase the maximum width of the layout container to the full width of the viewport | +| classes | string | false | Classes to add to the wrapping `header` | +| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “internal”, "neutral", “description” and "basic" | +| mastheadLogoUrl | string | false | Wraps the masthead logo in a link. Set the URL for the HTML `href` attribute for the link. | +| mastheadLogo | object`` | false | Settings for a [custom organisation logo](#mastheadlogo) in the masthead. Defaults to the ONS logo. | +| language | object`` | false | Settings for the [language selector](#language) | +| serviceLinks | object`` | false | Settings for the [service links](#servicelinks) in the masthead | | title | string | true (unless `titleLogo` is set or variant is set to basic) | The title for the service | -| description | string | false | Tagline or description for the service | -| titleAsH1 | boolean | false | Override to wrap the header `title` in an `

` heading | -| titleLogo | object`` | false | Settings for a [custom title logo](#titlelogo) in the header. | -| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML `href` attribute for the link. | -| button | object`` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service | -| navigation | array`` | false | Settings for the [main menu links](#navigation) | -| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header | +| description | string | false | Tagline or description for the service | +| titleAsH1 | boolean | false | Override to wrap the header `title` in an `

` heading | +| titleLogo | object`` | false | Settings for a [custom title logo](#titlelogo) in the header. | +| titleUrl | string | false | Wraps the title logo in a link. Set the URL for the HTML `href` attribute for the link. | +| button | object`` | false | Settings for the [sign out button](#signoutbutton) in the header used to exit a transactional service | +| navigation | array`` | false | Settings for the [main menu links](#navigation) | +| siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header | +| navLinks | object`` | false | Settings for the [menu button navigation](#navLinks) in the masthead | ## MastheadLogo @@ -61,6 +62,18 @@ | itemsList | array`` | true | Settings for an array of [list items](#item) for each navigation link | | toggleServicesButton | object`` | true | Settings for the [mobile service links toggle button](#togglebutton) | +## NavLinks + +| Name | Type | Required | Description | +| --------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| id | string | true | The HTML `id` of the `