diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index bc80c256e6..442b53e881 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -230,9 +230,11 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` + +
@@ -471,9 +473,11 @@ exports[`base page template matches the footer block override snapshot 1`] = `
+ +
@@ -844,6 +848,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
+ @@ -885,6 +890,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` +
@@ -1999,9 +2005,11 @@ exports[`base page template matches the meta block override snapshot 1`] = `
+ +
@@ -2224,9 +2232,11 @@ exports[`base page template matches the social block override snapshot 1`] = `
+ +
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..5f8fea2fa7 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:3945b0587d8c3cb231ba301b8d07fa1d57ec421b67938ef226736ba9a5209adf +size 6523 diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index d2bff32005..a64eb961c6 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -431,7 +431,8 @@ $button-shadow-size: 3px; } &--mobile[aria-expanded='true'], - &--text-link[aria-expanded='true'] { + &--text-link[aria-expanded='true'], + &--menu[aria-expanded='true'] { .ons-icon { transform: rotate(270deg); } @@ -551,6 +552,91 @@ $button-shadow-size: 3px; } } } + + &--menu { + align-items: center; + display: flex; + height: 67px; + padding: 0 1.5rem; + border-bottom: 4px solid rgb(0 0 0 / 0%); + @include mq(l) { + height: 72px; + } + .ons-icon { + transform: rotate(90deg); + } + } + + &--menu & { + &__inner { + background: rgb(0 0 0 / 0%); + border: 0; + border-radius: 0; + box-shadow: none; + color: var(--ons-color-text-link); + font-weight: 700; + padding: 0; + .ons-icon { + fill: var(--ons-color-text-link); + height: 1rem; + margin-top: 0; + width: 1rem; + } + } + } + + &--menu:focus { + background-color: var(--ons-color-focus); + border-color: var(--ons-color-black); + } + + &--menu:hover { + border-color: var(--ons-color-text-link-hover); + } + + &--menu:focus & { + &__inner { + background: none; + box-shadow: none; + } + } + + &--menu:focus:hover:not(:active, .active) { + .ons-btn__inner { + background: none; + } + } + + &--menu:active, + &--menu[aria-expanded='true'] { + background-color: var(--ons-color-branded-tint); + border-color: var(--ons-color-text-link-hover); + } + + &--menu:hover &, + &--menu:active &, + &--menu.active & { + &__inner { + background: none; + color: var(--ons-color-text-link-hover); + .ons-icon { + fill: var(--ons-color-text-link-hover); + } + } + } + + &--menu:active &, + &--menu:active:focus &, + &--menu.active &, + &--menu.active:focus & { + &__inner { + background: none; + color: var(--ons-color-text-link-hover); + .ons-icon { + fill: var(--ons-color-text-link-hover); + } + } + } } .ons-search__btn { diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index e41a2e169f..ffdae19065 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -236,6 +236,50 @@ } } + &--basic & { + &__grid-top { + padding: 0; + } + } + + &-nav-menu { + background-color: var(--ons-color-branded-tint); + margin-bottom: 1rem; + padding-top: 2.5rem; + width: 100%; + + &__key-list { + border-bottom: 1px solid var(--ons-color-ocean-blue); + margin-bottom: 1.25rem; + padding-bottom: 1rem; + padding-left: 0; + row-gap: 1rem; + } + + &__link, + &__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 { top: 0 !important; } 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 `

{% endif %} + {% if params.navLinks %} +
+ {% if params.navLinks %} +
+ {{ + onsButton({ + "text": params.navLinks.toggleNavButton.text | default("Menu"), + "classes": "ons-u-fs-s--b ons-js-toggle-services button-nav", + "type": "button", + "variants": "menu", + "iconType": "chevron", + "iconPosition": "before", + "attributes": { + "aria-label": params.navLinks.toggleNavButton.ariaLabel | default("Toggle menu"), + "aria-controls": params.navLinks.id, + "aria-expanded": "false" + } + }) + }} +
+ {% endif %} +
+ {% endif %} {% if params.serviceLinks %} @@ -217,6 +240,78 @@ {% endif %} {% endif %} + {% if params.navLinks %} + + {% endif %} {% if params.variants != "basic" %}
diff --git a/src/components/header/example-header-basic.njk b/src/components/header/example-header-basic.njk index 1204ca4c6a..d27bd0cfdf 100644 --- a/src/components/header/example-header-basic.njk +++ b/src/components/header/example-header-basic.njk @@ -6,6 +6,162 @@ {{ onsHeader({ - "variants": 'basic' + "variants": 'basic', + "navLinks": { + "id": "nav-links-external", + "ariaLabel": 'Main menu', + "ariaListLabel": 'Menu', + "toggleNavButton": { + "text": 'Menu', + "ariaLabel": 'Toggle main menu' + }, + "keyLinksList": [ + { + 'text': 'Taking part in a survey?', + 'description': 'It’s never been more important.' + }, + { + 'text': 'Release calendar', + 'description': 'View our latest and upcoming releases.' + }, + { + 'text': 'Explore local statistics', + 'description': 'Explore statistics across the UK.' + } + ], + "itemsList": [ + { + "linksList": [ + { + "text": "People, population and community", + "children": [ + { + "text": "Armed forces community" + }, + { + "text": "Births, deaths and marriages" + }, + { + "text": "Crime and justice" + }, + { + "text": "Cultural identity" + }, + { + "text": "Education and childcare" + }, + { + "text": "Elections" + }, + { + "text": "Health and social care" + }, + { + "text": "Household characteristics" + }, + { + "text": "Housing" + }, + { + "text": "Leisure and tourism" + }, + { + "text": "Personal and household finances" + }, + { + "text": "Population and migration" + }, + { + "text": "Well-being" + } + ] + } + ] + }, + { + "linksList": [ + { + "text": "Business, industry and trade", + "children": [ + { + "text": "Business" + }, + { + "text": "Changes to business" + }, + { + "text": "Construction industry" + }, + { + "text": "International trade" + }, + { + "text": "IT and internet industry" + }, + { + "text": "Manufacturing and production industry" + }, + { + "text": "Retail industry", + "url": "#0" + }, + { + "text": "Tourism industry" + } + ] + }, + { + "text": "Employment and labour market", + "children": + [ + { + "text": "People in work" + }, + { + "text": "People not in work" + } + ] + + } + ] + }, + { + "linksList": [ + { + "text": "Economy", + "children": [ + { + "text": "Economic output and productivity" + }, + { + "text": "Government, public sector and taxes" + }, + { + "text": "Gross Value Added (GVA)" + }, + { + "text": "Investments, pensions and trusts" + }, + { + "text": "Regional accounts" + }, + { + "text": "Environmental accounts" + }, + { + "text": "Gross Domestic Product (GDP)" + }, + { + "text": "Inflation and price indices" + }, + { + "text": "National accounts" + } + ] + } + ] + } + ] + } }) }}