diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 442b53e881..e0dcb7cc5e 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -230,10 +230,14 @@ exports[`base page template matches the favicons block override snapshot 1`] = ` + + + + @@ -473,10 +477,14 @@ exports[`base page template matches the footer block override snapshot 1`] = ` + + + + @@ -848,6 +856,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + @@ -890,6 +899,9 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + + + @@ -2005,10 +2017,14 @@ exports[`base page template matches the meta block override snapshot 1`] = ` + + + + @@ -2232,10 +2248,14 @@ 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 a980284aae..ed424f62ce 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:a4a678dffbf6b95610f5a1ba8552916d2bc5b17a293a4c80dc24642a0bf32acd -size 15252 +oid sha256:2712739bc21b1278f996b5fc71e36d645792427903a05aa23f1794dd5ab0f63a +size 15315 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 7a72e424a1..949982f304 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:f9c4c95b618527430355f898100f7d32de3a61f579b097bee4b5c333b865ba70 -size 10229 +oid sha256:adc45365fd288de4e265cc2cdb384936a6632deb9d893fa9e35ccddff3ea0825 +size 10141 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 704c1eb148..310ae3b1da 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:aa433f7853086622ab9cc1d17699ec950a8fd061017a2b5316a2b2d086425326 -size 6531 +oid sha256:433d47e4d659869212f044dc1d0b3261a1de23bd375f47fc0eb0a134b0276d51 +size 6512 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png new file mode 100644 index 0000000000..e99fe2c4ed --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:971c199c09056d470276d7a6acb4c67d08bac6fd1783ecaf6770c713ed0b867c +size 16051 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png new file mode 100644 index 0000000000..6acbbba763 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:691e1e39997641f19565319510be7063f91758f0a0417e0d01e129bc1295ef23 +size 10817 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png new file mode 100644 index 0000000000..f499cdbcc6 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3f25cef24eb4698f13076f48087ae32bcb8c29be3eab12c9b214332db433d159 +size 7274 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png index da9be7169b..7a824bce0f 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:05e3bb81f69caad36b6ecaf704157282852255b1c70243064fe0d4f650115540 -size 214399 +oid sha256:e8c088e917a4c6e344ea621b9a23484d13714f6ee1ab55284ae374f5cad08bbd +size 214402 diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 5a16c5a799..cc285d80a6 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -35,6 +35,51 @@ $button-shadow-size: 3px; } } + &--header-search &, + &--header-search:focus &, + &--header-search:active &, + &--header-search.active &, + &--header-search:active:focus &, + &--header-search.active:focus & { + &__inner { + background: var(--ons-color-ocean-blue) !important; + } + } + + &--header-search &, + &--header-search:active &, + &--header-search.active & { + &__inner { + padding: 0.75rem 1rem !important; + border: 2px solid var(--ons-color-ocean-blue); + border-radius: 0; + box-shadow: none; + .ons-icon { + fill: var(--ons-color-text-inverse) !important; + height: 28px; + width: 28px; + } + } + } + + &--header-search:hover & { + &__inner { + background: var(--ons-color-night-blue) !important; + } + } + + &--header-search:focus & { + &__inner { + box-shadow: + 0 0 0 1px var(--ons-color-black), + 0 0 0 4px var(--ons-color-focus) !important; + outline: 3px solid rgb(0 0 0 / 0%); + outline-offset: 1px; + z-index: 4; + border: 2px solid var(--ons-color-black); + } + } + &__inner { background: var(--ons-color-button); border-radius: $input-radius; @@ -556,7 +601,7 @@ $button-shadow-size: 3px; &--menu { align-items: center; display: flex; - padding: 1.5rem; + padding: 1rem; border-bottom: 4px solid rgb(0 0 0 / 0%); .ons-icon { transform: rotate(90deg); @@ -575,11 +620,14 @@ $button-shadow-size: 3px; margin-top: 0; width: 1rem; } + .ons-btn__text { + height: 24px; + } } } &--menu:focus { - background-color: var(--ons-color-focus); + background-color: var(--ons-color-focus) !important; border-color: var(--ons-color-black); } @@ -629,6 +677,113 @@ $button-shadow-size: 3px; } } } + + &--search-icon, + &--close { + border-bottom: 4px solid transparent; + align-items: center; + display: flex; + padding: 1rem; + } + + &--search-icon &, + &--close & { + &__inner { + background: rgb(0 0 0 / 0%); + box-shadow: none; + padding: 0; + .ons-icon { + @extend .ons-u-m-no; + + fill: var(--ons-color-text-link); + height: 1.5rem; + width: 1.5rem; + } + } + } + + &--search-icon:hover { + border-bottom: 4px solid rgb(0 0 0 / 0%); + border-color: var(--ons-color-text-link-hover); + } + + &--search-icon:focus:hover:not(:active, .active) { + .ons-btn__inner { + background: none; + box-shadow: none; + } + } + + &--close:focus:hover:not(:active, .active) { + .ons-btn__inner { + background: none; + box-shadow: none; + } + } + + &--close:active, + &--close[aria-expanded='true'] { + @extend .ons-u-ml-no; + + border-color: var(--ons-color-text-link-hover); + background-color: var(--ons-color-branded-tint); + } + + &--search-icon:hover &, + &--search-icon:active &, + &--search-icon:active:focus &, + &--search-icon.active &, + &--search-icon.active:focus & { + &__inner { + background: none; + box-shadow: none; + color: var(--ons-color-text-link-hover); + .ons-icon { + fill: var(--ons-color-text-link-hover); + } + } + } + + &--search-icon:focus { + background-color: var(--ons-color-focus); + border-color: var(--ons-color-text-link-focus); + } + + &--search-icon:focus &, + &--close:focus & { + &__inner { + background: none; + box-shadow: none; + .ons-icon { + fill: var(--ons-color-text-link-focus); + } + } + } + + &--close:focus { + background: var(--ons-color-focus); + border-color: var(--ons-color-black); + } + + &--search-icon:active { + background-color: var(--ons-color-branded-tint); + border-color: var(--ons-color-text-link-hover); + } + + &--close:hover &, + &--close:active &, + &--close.active &, + &--close.active:focus &, + &--close:active:focus & { + &__inner { + background: none !important; + box-shadow: 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/button/_macro.njk b/src/components/button/_macro.njk index bb0113777b..eae5ea4d86 100644 --- a/src/components/button/_macro.njk +++ b/src/components/button/_macro.njk @@ -61,6 +61,10 @@ {% set iconType = "loader" %} {% set iconPosition = "after" %} {% set variantClasses = " ons-btn--loader ons-js-loader ons-js-submit-btn" %} + {% elif 'search' in params.variants %} + {% set iconType = "search" %} + {% elif 'close' in params.variants %} + {% set iconType = "close" %} {% endif %} {% endif %} {% set tag = "a" if params.url else "button" %} diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index e1957c2e95..e1418382d3 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -168,13 +168,13 @@ } &__org-logo--large { - @include mq('2xs', 454px) { + @include mq('2xs', 460px) { display: none; } } &__org-logo--small { - @include mq(455px) { + @include mq(461px) { display: none; } } @@ -278,6 +278,22 @@ } } + &-nav-search { + background-color: var(--ons-color-branded-tint); + margin-bottom: 1rem; + @extend .ons-u-pt-2xl; + @extend .ons-u-pb-2xl; + + width: 100%; + &__input { + border-bottom: 1px solid var(--ons-color-ocean-blue); + @extend .ons-u-mb-2xl; + @extend .ons-u-pb-2xl; + + row-gap: 1rem; + } + } + .ons-btn { top: 0 !important; } diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index d01327bc4a..77a7809ce1 100644 --- a/src/components/header/_macro-options.md +++ b/src/components/header/_macro-options.md @@ -18,6 +18,7 @@ | navigation | array`` | false | Settings for the [main menu links](#navigation) | | siteSearchAutosuggest | `Autosuggest` [_(ref)_](/components/autosuggest) | false | Sets the autosuggest functionality in the header | | menuLinks | object`` | false | Settings for the [menu button navigation](#menuLinks) in the masthead | +| searchLinks | object`` | false | Settings for the [search button navigation](#searchLinks) in the masthead | ## MastheadLogo @@ -71,9 +72,27 @@ | ariaLabel | string | false | The `aria-label` attribute added to the ` {% endif %} - {% if params.menuLinks %} + + {% if params.variants == "basic" and params.menuLinks %} {% endif %} + + {% if params.variants == "basic" and params.searchLinks %} + + {% endif %} {% if params.variants != "basic" %}
diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js index 0357aa40de..d5a87e8162 100644 --- a/src/components/header/_macro.spec.js +++ b/src/components/header/_macro.spec.js @@ -9,6 +9,7 @@ import { mapAll } from '../../tests/helpers/cheerio'; import { EXAMPLE_HEADER_BASIC, EXAMPLE_SERVICE_LINKS_CONFIG, + EXAMPLE_HEADER_SEARCH_LINKS, EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE, EXAMPLE_HEADER_SERVICE_LINKS_SINGLE, EXAMPLE_HEADER_LANGUAGE_CONFIG, @@ -784,4 +785,79 @@ describe('FOR: Macro: Header', () => { }); }); }); + describe('GIVEN: Params: searchLinks', () => { + describe('WHEN: searchLinks are provided with a toggle search button', () => { + const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' })); + + const faker = templateFaker(); + const buttonSpy = faker.spy('button', { suppressOutput: true }); + faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }); + + test('THEN: renders search icon button on small screen', () => { + console.log(buttonSpy.occurrences); + expect(buttonSpy.occurrences).toContainEqual({ + iconType: 'search', + classes: 'ons-u-fs-s--b ons-js-search-btn-open ons-btn--search-icon', + type: 'button', + variants: 'search', + attributes: { + 'aria-label': 'Toggle search', + 'aria-expanded': 'false', + 'aria-controls': 'search-links-id', + }, + }); + }); + + test('THEN: renders search input form when button is clicked', () => { + expect($('.ons-header-nav-search').length).toBeGreaterThan(0); + }); + + test('THEN: renders the search field with full width', () => { + expect($('.ons-header-nav-search__input .ons-input').hasClass('ons-input--w-full')).toBe(true); + }); + }); + + describe('WHEN: popular searches are provided in searchLinks', () => { + const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' })); + + test('THEN: renders popular searches list', () => { + const popularSearches = $('.ons-list--bare .ons-list__item').length; + expect(popularSearches).toBeGreaterThan(0); + }); + + test('THEN: renders correct links for popular searches', () => { + const popularSearchesLinks = mapAll($('.ons-list--bare .ons-list__item a'), (node) => node.attr('href')); + expect(popularSearchesLinks).toEqual(['#1', '#2', '#3']); + }); + + test('THEN: renders correct text for popular searches', () => { + const popularSearchesText = mapAll($('.ons-list--bare .ons-list__item a'), (node) => node.text().trim()); + expect(popularSearchesText).toEqual(['Popular Search 1', 'Popular Search 2', 'Popular Search 3']); + }); + }); + + describe('WHEN: searchLinks parameter is missing', () => { + const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC)); + + test('THEN: does not render search icon button', () => { + expect($('.ons-js-toggle-services').length).toBe(0); + }); + + test('THEN: does not render search input form', () => { + expect($('.ons-header-nav-search').length).toBe(0); + }); + + test('THEN: does not render popular searches', () => { + expect($('.ons-list--bare').length).toBe(0); + }); + }); + + describe('WHEN: searchLinks are provided and the header variant is not basic', () => { + const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'neutral' })); + + test('THEN: does not render the search icon button', () => { + expect($('.ons-js-toggle-services').length).toBe(0); + }); + }); + }); }); diff --git a/src/components/header/_test-examples.js b/src/components/header/_test-examples.js index 634dd7c323..6aba529cae 100644 --- a/src/components/header/_test-examples.js +++ b/src/components/header/_test-examples.js @@ -150,3 +150,30 @@ export const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = { language: 'en-gb', }, }; + +export const EXAMPLE_HEADER_SEARCH_LINKS = { + searchLinks: { + id: 'search-links-id', + ariaLabel: 'Nav Search', + toggleSearchButton: { + text: 'Search', + ariaLabel: 'Toggle search', + }, + heading: 'Popular Search', + itemsList: [ + { + url: '#1', + text: 'Popular Search 1', + }, + { + url: '#2', + text: 'Popular Search 2', + }, + { + url: '#3', + text: 'Popular Search 3', + external: true, + }, + ], + }, +}; diff --git a/src/components/header/example-header-with-search-button.njk b/src/components/header/example-header-with-search-button.njk new file mode 100644 index 0000000000..ed6be74b92 --- /dev/null +++ b/src/components/header/example-header-with-search-button.njk @@ -0,0 +1,196 @@ +--- +'fullWidth': true +--- + +{% from "components/header/_macro.njk" import onsHeader %} + +{{ + onsHeader({ + "variants": 'basic', + "menuLinks": { + "keyLinks": [ + { + 'heading': 'Taking part in a survey?', + 'description': 'It’s never been more important.' + }, + { + 'heading': 'Release calendar', + 'description': 'View our latest and upcoming releases.' + }, + { + 'heading': 'Explore local statistics', + 'url': '#0', + 'description': 'Explore statistics across the UK.' + } + ], + "columns": [ + { + "groups": [ + { + "heading": "People, population and community", + "groupItems": [ + { + "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" + } + ] + } + ] + }, + { + "groups": [ + { + "heading": "Business, industry and trade", + "groupItems": [ + { + "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" + } + ] + }, + { + "heading": "Employment and labour market", + "url": "#0", + "groupItems": + [ + { + "text": "People in work" + }, + { + "text": "People not in work" + } + ] + + } + ] + }, + { + "groups": [ + { + "heading": "Economy", + "groupItems": [ + { + "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" + } + ] + } + ] + } + ] + }, + "searchLinks": { + "id": "search-links", + "ariaLabel": 'Nav Search', + "toggleSearchButton": { + "text": 'Search', + "ariaLabel": 'Toggle search' + }, + 'heading': 'Popular searches', + "itemsList": [ + { + "url": '#1', + "text": 'Cost of living' + }, + { + "url": '#1', + "text": 'Inflation' + }, + { + "url": '#3', + "text": 'NHS waiting times', + "external": true + }, + { + "url": '#0', + "text": 'Wellbeing', + "external": true + }, + { + "url": '#0', + "text": 'Baby names', + "external": true + } + ] + } + }) +}} diff --git a/src/components/icon/_macro.njk b/src/components/icon/_macro.njk index 520d8476b4..05eadd81cd 100644 --- a/src/components/icon/_macro.njk +++ b/src/components/icon/_macro.njk @@ -92,6 +92,12 @@ transform="translate(-5.02 -1.59)" /> + {%- elif params.iconType == "close" -%} + + + {%- elif params.iconType == "download" -%} {% if params.accessiblePlaceholder %} {{ @@ -142,8 +142,8 @@ "html": buttonLabel, "text": params.searchButton.text, "id": params.searchButton.id, - "variants": 'small', - "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""), + "variants": 'header-search' if params.searchButton.variant == 'header' else 'small', + "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else "") + (" ons-search__header-btn" if params.searchButton.variant == 'header' else ""), "attributes": params.searchButton.attributes, "iconType": params.searchButton.iconType, "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before' diff --git a/src/components/navigation/navigation.dom.js b/src/components/navigation/navigation.dom.js index 0295809720..99652c650e 100644 --- a/src/components/navigation/navigation.dom.js +++ b/src/components/navigation/navigation.dom.js @@ -13,6 +13,13 @@ domready(async () => { const toggleServicesBtn = document.querySelector('.ons-js-toggle-services'); const servicesEl = document.querySelector('.ons-js-services-mobile-nav'); const servicesHideClass = 'ons-u-d-no'; + const toggleHeaderSearchBtn = document.querySelector('.ons-js-toggle-header-search'); + const headerSearchHideClass = 'ons-u-d-no'; + const headerSearchEl = document.querySelector('.ons-js-header-search'); + const openIcon = document.querySelector('.ons-btn--search-icon'); + const closeIcon = document.querySelector('.ons-btn--close'); + const menuEl = document.querySelector('.ons-js-nav-menu'); + const toggleNavMenuBtn = document.querySelector('.ons-js-toggle-nav-menu'); if (toggleNavigationBtn) { const NavigationToggle = (await import('./navigation')).default; @@ -31,6 +38,18 @@ domready(async () => { new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents(); } + if (toggleHeaderSearchBtn) { + const searchToggle = (await import('./navigation')).default; + + new searchToggle(toggleHeaderSearchBtn, headerSearchEl, headerSearchHideClass, openIcon, closeIcon).registerEvents(); + } + + if (toggleNavMenuBtn) { + const searchToggle = (await import('./navigation')).default; + + new searchToggle(toggleNavMenuBtn, menuEl, headerSearchHideClass).registerEvents(); + } + if (toggleServicesBtn) { const servicesToggle = (await import('./navigation')).default; diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js index 2002088cce..65ceb10e14 100644 --- a/src/components/navigation/navigation.js +++ b/src/components/navigation/navigation.js @@ -4,10 +4,13 @@ const attrExpanded = 'aria-expanded'; const attrHidden = 'aria-hidden'; export default class NavigationToggle { - constructor(toggle, navigation, hideClass) { + constructor(toggle, navigation, hideClass, openIcon, closeIcon) { this.toggle = toggle; this.navigation = navigation; this.hideClass = hideClass; + this.closeIcon = closeIcon; + this.openIcon = openIcon; + this.toggle.classList.remove('ons-u-d-no'); this.setAria(); onViewportChange(this.setAria.bind(this)); @@ -25,7 +28,6 @@ export default class NavigationToggle { openNav() { const input = [...this.navigation.getElementsByTagName('INPUT')][0]; - this.toggle.setAttribute(attrExpanded, 'true'); this.toggle.classList.add('active'); this.navigation.setAttribute(attrHidden, 'false'); this.navigation.classList.remove(this.hideClass); @@ -33,13 +35,39 @@ export default class NavigationToggle { if (input) { input.focus(); } + + if (this.openIcon) { + this.openIcon.setAttribute('tabindex', '-1'); + this.openIcon.classList.add('ons-u-vh'); + } + if (this.closeIcon) { + this.closeIcon.classList.remove('ons-u-vh'); + this.closeIcon.removeAttribute('tabindex'); + this.closeIcon.setAttribute(attrExpanded, 'true'); + document.querySelector('.ons-js-search-btn-close').focus(); + } else { + this.toggle.setAttribute(attrExpanded, 'true'); + } + this.toggleMenuAndSearch(); } closeNav() { - this.toggle.setAttribute(attrExpanded, 'false'); this.toggle.classList.remove('active'); this.navigation.setAttribute(attrHidden, 'true'); this.navigation.classList.add(this.hideClass); + + if (this.openIcon) { + this.openIcon.removeAttribute('tabindex'); + document.activeElement.previousElementSibling.focus(); + this.openIcon.classList.remove('ons-u-vh'); + } + if (this.closeIcon) { + this.closeIcon.setAttribute('tabindex', '-1'); + this.closeIcon.classList.add('ons-u-vh'); + this.closeIcon.setAttribute(attrExpanded, 'false'); + } else { + this.toggle.setAttribute(attrExpanded, 'false'); + } } isHidden(el) { @@ -64,4 +92,33 @@ export default class NavigationToggle { } } } + + toggleMenuAndSearch() { + console.log('toggleMenuAndSearch'); + const menuBtn = document.querySelector('.ons-js-toggle-nav-menu'); + const menuEl = document.querySelector('.ons-js-nav-menu'); + const searchToggle = document.querySelector('.ons-js-toggle-header-search'); + const searchBtn = document.querySelector('.ons-js-search-btn-close'); + const searchBtnOpen = document.querySelector('.ons-js-search-btn-open'); + const searchEl = document.querySelector('.ons-js-header-search'); + + const isMenuOpen = menuBtn.getAttribute('aria-expanded') === 'true'; + const isSearchOpen = searchBtn.getAttribute('aria-expanded') === 'true'; + + if (isMenuOpen && this.toggle == menuBtn) { + searchBtn.setAttribute('aria-expanded', 'false'); + searchBtn.classList.add('ons-u-vh'); + searchBtnOpen.classList.remove('ons-u-vh'); + searchEl.setAttribute('aria-hidden', 'true'); + searchEl.classList.add('ons-u-d-no'); + searchToggle.classList.remove('active'); + } + + if (isSearchOpen && this.toggle == searchToggle) { + menuBtn.setAttribute('aria-expanded', 'false'); + menuEl.setAttribute('aria-hidden', 'true'); + menuEl.classList.add('ons-u-d-no'); + menuBtn.classList.remove('active'); + } + } }