From 366497de86da64a5016cb6aebc2174da7a6285fc Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Fri, 19 Jan 2024 12:52:01 +0000 Subject: [PATCH] Subnavigation rendered only when needed (#2982) * update component and approve visual test * Changes as per comments * Commiting images * Deleting the backstop images * Changing as per comments * Fixed the issue with yarn test * Making changes as per comments * changing hideHorizontalSubNav to removeHorizontalSubNav * Added the parameters in _macro-options.md --------- Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com> Co-authored-by: SriHV <123635670+SriHV@users.noreply.github.com> Co-authored-by: SriHV --- __snapshots__/layout/_template.spec.js.snap | 72 ++++++------ ...avigation-removed_0_document_0_desktop.png | 3 + ...navigation-removed_0_document_1_tablet.png | 3 + ...navigation-removed_0_document_2_mobile.png | 3 + ...th-timeout-warning_0_document_2_mobile.png | 4 +- src/components/header/_macro-options.md | 15 +-- ...r-external-with-sub-navigation-removed.njk | 70 ++++++++++++ src/components/navigation/_macro.njk | 32 +++--- src/components/navigation/navigation.spec.js | 103 +++++++++++++++--- 9 files changed, 232 insertions(+), 73 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_2_mobile.png create mode 100644 src/components/header/example-header-external-with-sub-navigation-removed.njk diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 8b78893473..46a9f9e2d9 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -981,41 +981,43 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - + + +
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_0_desktop.png new file mode 100644 index 0000000000..a4dc45e469 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c7f01322b4c5fe461b55f16dc07dc963c136b4f7e3768e5103da601773c9e135 +size 26126 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_1_tablet.png new file mode 100644 index 0000000000..1b43884381 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9cc04bc3cff354da5ae0113cc1df2f8d8a2a84635d699b9c3e3c4d61685c79e1 +size 16826 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_2_mobile.png new file mode 100644 index 0000000000..b3c41f26e0 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-external-with-sub-navigation-removed_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6eeac1d174ebf0219fd6b49072154298f5ca7a8cbbf509ec9e6694a39f6a7296 +size 12624 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png index f0f681a56c..2695f0770a 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f67e4ca5163a3770c17f4768fd548fc4e4ac0099d5cef4330b6176ee7c5174f2 -size 13805 +oid sha256:ca21587d7e4bf313e46414c7c484509716ee93ad9d66e7b02efc844b2757bb25 +size 13752 diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index 46ac8311e1..b5ac31c24c 100644 --- a/src/components/header/_macro-options.md +++ b/src/components/header/_macro-options.md @@ -63,13 +63,14 @@ ## Navigation -| Name | Type | Required | Description | -| ------------ | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ | -| id | string | true | The HTML `id` of the `
{% if params.navigation.subNavigation %} - + {% if not params.navigation.subNavigation.removeHorizontalSubNav %} + + {% endif %}
{{ onsButton({ "text": params.navigation.currentPageTitle, diff --git a/src/components/navigation/navigation.spec.js b/src/components/navigation/navigation.spec.js index 6bbdfaac29..926d7fd8b2 100644 --- a/src/components/navigation/navigation.spec.js +++ b/src/components/navigation/navigation.spec.js @@ -86,6 +86,66 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = { }, }; +const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED = { + navigation: { + id: 'main-nav', + ariaLabel: 'Main menu', + currentPath: '#1', + currentPageTitle: 'Main nav item 2', + itemsList: [ + { + title: 'Main nav item 1', + url: '#0', + classes: 'custom-class-main-item-1', + id: 'main-item-1', + }, + { + title: 'Main nav item 2', + url: '#1', + classes: 'custom-class-main-item-2', + id: 'main-item-2', + }, + ], + subNavigation: { + id: 'sub-nav-hidden', + overviewURL: '#overview', + overviewText: 'Overview', + ariaLabel: 'Section menu', + currentPath: '#1', + removeHorizontalSubNav: true, + itemsList: [ + { + title: 'Sub nav item 1', + url: '#0', + classes: 'custom-class-sub-item-1', + id: 'sub-item-1', + }, + { + title: 'Sub nav item 2', + url: '#1', + classes: 'custom-class-sub-item-2', + id: 'sub-item-2', + sections: [ + { + sectionTitle: 'Section 1', + children: [ + { + title: 'Child item 1', + url: '#0', + }, + { + title: 'Child item 2', + url: '#1', + }, + ], + }, + ], + }, + ], + }, + }, +}; + describe('script: navigation', () => { afterEach(async () => { // Clear viewport size and browser emulation after each test. @@ -102,7 +162,7 @@ describe('script: navigation', () => { }); it('has removed the display class from the menu toggle button', async () => { - const hasClass = await page.$eval(buttonEl, node => node.classList.contains('ons-u-d-no')); + const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('ons-u-d-no')); expect(hasClass).toBe(false); }); }); @@ -115,13 +175,13 @@ describe('script: navigation', () => { it('has the correct aria hidden attribute on the navigation list', async () => { const nav = await page.$(navEl); - const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null); + const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null); expect(hasAriaAttribute).toBe(ariaStatus); }); it('has aria-expanded set as `false` on the navigation toggle button', async () => { const button = await page.$(buttonEl); - const ariaExpandedIsFalse = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false'); + const ariaExpandedIsFalse = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'false'); expect(ariaExpandedIsFalse).toBe(true); }); }); @@ -134,7 +194,7 @@ describe('script: navigation', () => { it('has aria-hidden set as `true` on the navigation list', async () => { const nav = await page.$(navEl); - const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true'); + const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'true'); expect(hasAriaAttribute).toBe(true); }); @@ -146,12 +206,12 @@ describe('script: navigation', () => { it('has aria-hidden set as `false` on the navigation list', async () => { const nav = await page.$(navEl); - const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'false'); + const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'false'); expect(hasAriaAttribute).toBe(true); }); it('has the hide class removed from the navigation list', async () => { - const hasClass = await page.$eval(navEl, node => + const hasClass = await page.$eval(navEl, (node) => node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'), ); expect(hasClass).toBe(false); @@ -159,12 +219,12 @@ describe('script: navigation', () => { it('has aria-expanded set as `true` on the navigation toggle button', async () => { const button = await page.$(buttonEl); - const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'true'); + const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'true'); expect(ariaExpandedIsTrue).toBe(true); }); it('has the correct class applied to the navigation toggle button', async () => { - const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active')); + const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('active')); expect(hasClass).toBe(true); }); }); @@ -180,18 +240,18 @@ describe('script: navigation', () => { it('has aria-hidden set as `true` on the navigation list', async () => { const nav = await page.$(navEl); - const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true'); + const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'true'); expect(hasAriaAttribute).toBe(true); }); it('has aria-expanded set as `false` on the navigation toggle button', async () => { const button = await page.$(buttonEl); - const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false'); + const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'false'); expect(ariaExpandedIsTrue).toBe(true); }); it('has the active class removed from the navigation toggle button', async () => { - const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active')); + const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('active')); expect(hasClass).toBe(false); }); }); @@ -210,18 +270,18 @@ describe('script: navigation', () => { it('has the aria-hidden attribute removed from the navigation list', async () => { const nav = await page.$(navEl); - const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null); + const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null); expect(hasAriaAttribute).toBe(false); }); it('has aria-expanded removed from the navigation toggle button', async () => { const button = await page.$(buttonEl); - const hasAriaExpanded = await button.evaluate(node => node.getAttribute('aria-expanded') !== null); + const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') !== null); expect(hasAriaExpanded).toBe(false); }); it('has the hide class removed from the navigation list', async () => { - const hasClass = await page.$eval(navEl, node => + const hasClass = await page.$eval(navEl, (node) => node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'), ); expect(hasClass).toBe(false); @@ -230,3 +290,18 @@ describe('script: navigation', () => { }, ); }); + +describe('level: sub navigation', () => { + describe('when removeHorizontalSubNav is set to true', () => { + beforeEach(async () => { + await setTestPage('/test', renderComponent('header', EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED)); + }); + + it('does not render the sub-nav element', async () => { + const hasSubNavEl = (await page.content()).includes('.ons-navigation--sub'); + expect(hasSubNavEl).toBe(false); + }); + }); +}); + +