Skip to content

Commit

Permalink
Subnavigation rendered only when needed (#2982)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
Co-authored-by: SriHV <[email protected]>
Co-authored-by: SriHV <[email protected]>
  • Loading branch information
@precious-onyenaucheya-ons @alessioventuriniAND @SriHV
4 people authored Jan 19, 2024
1 parent 1eb719c commit 366497d
Show file tree
Hide file tree
Showing 9 changed files with 232 additions and 73 deletions.
72 changes: 37 additions & 35 deletions __snapshots__/layout/_template.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -981,41 +981,43 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</div>
</div>

<nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@xxs@l">
<ul class="ons-navigation__list ons-navigation__list">

<li class="ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">
Guidance

</a>
</li>

<li class="ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">
Foundations

</a>
</li>

<li class="ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">
Components

</a>
</li>

<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link ons-navigation__link" href="#patterns">
Patterns

</a>
</li>

</ul>
</div>
</nav>

<nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l" id="sub-nav" aria-label="Section menu" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@xxs@l">
<ul class="ons-navigation__list ons-navigation__list">

<li class="ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">
Guidance

</a>
</li>

<li class="ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">
Foundations

</a>
</li>

<li class="ons-navigation__item ">
<a class="ons-navigation__link ons-navigation__link" href="#0">
Components

</a>
</li>

<li class="ons-navigation__item ons-navigation__item--active">
<a class="ons-navigation__link ons-navigation__link" href="#patterns">
Patterns

</a>
</li>

</ul>
</div>
</nav>

<div class="ons-u-d-no@l">


Expand Down
3 changes: 3 additions & 0 deletions ...er_example-header-external-with-sub-navigation-removed_0_document_0_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...der_example-header-external-with-sub-navigation-removed_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...der_example-header-external-with-sub-navigation-removed_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 8 additions & 7 deletions src/components/header/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,14 @@

## Navigation

| Name | Type | Required | Description |
| ------------ | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
| id | string | true | The HTML `id` of the `<nav>` element. Used for the `aria-controls` attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The `aria-label` attribute added to the `<nav>` element. Defaults to “Main menu”. |
| itemsList | array`<Item>` | true | Settings for an array of [list items](#item) for each navigation link |
| currentPath | string or array`<string>` | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleButton | array`<ToggleButton>` | true | Settings for the navigation [menu toggle button](#togglebutton) displayed on small viewports |
| Name | Type | Required | Description |
| ---------------------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
| id | string | true | The HTML `id` of the `<nav>` element. Used for the `aria-controls` attribute for the menu button displayed on small viewports. |
| ariaLabel | string | false | The `aria-label` attribute added to the `<nav>` element. Defaults to “Main menu”. |
| itemsList | array`<Item>` | true | Settings for an array of [list items](#item) for each navigation link |
| currentPath | string or array`<string>` | true | The path of the current active page. Multiple paths can be provided using an array to highlight nested navigation. |
| toggleButton | array`<ToggleButton>` | true | Settings for the navigation [menu toggle button](#togglebutton) displayed on small viewports |
| removeHorizontalSubNav | boolean | false | Set to “true” to remove the sub navigation |

## ToggleButton

Expand Down
70 changes: 70 additions & 0 deletions src/components/header/example-header-external-with-sub-navigation-removed.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
"fullWidth": true
---
{% from "components/header/_macro.njk" import onsHeader %}

{{
onsHeader({
"title": 'Service manual',
"mastheadLogoUrl": '#0',
"titleUrl": '#0',
"navigation": {
"id": 'main-nav',
"ariaLabel": 'Main menu',
"currentPath": [ '#design-system', '#patterns', '#access-codes' ],
"currentPageTitle": 'Design system',
"itemsList": [
{
"text": 'Service standard',
"url": '#0'
},
{
"text": 'Design system',
"url": '#design-system'
},
{
"text": 'Accessibility',
"url": '#0'
},
{
"text": 'Brand guidelines',
"url": '#0'
},
{
"text": 'Content style guide',
"url": '#0'
}
],
"toggleNavigationButton": {
"text": 'Menu',
"ariaLabel": 'Toggle menu'
},
"subNavigation": {
"id": 'sub-nav',
"overviewURL": '#design-system',
"overviewText": 'Overview',
"ariaLabel": 'Section menu',
"currentPath": '#access-codes',
"removeHorizontalSubNav": true,
"itemsList": [
{
"text": 'Guidance',
"url": '#0'
},
{
"text": 'Foundations',
"url": '#0'
},
{
"text": 'Components',
"url": '#0'
},
{
"text": 'Patterns',
"url": '#patterns'
}
]
}
}
})
}}
32 changes: 17 additions & 15 deletions src/components/navigation/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,23 @@
</div>
</div>
{% if params.navigation.subNavigation %}
<nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
<ul class="ons-navigation__list ons-navigation__list">
{% for item in params.navigation.subNavigation.itemsList %}
<li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
<a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
{% if item.title %}{{ item.title }}
{% elif item.text %}{{ item.text }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</nav>
{% if not params.navigation.subNavigation.removeHorizontalSubNav %}
<nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
<div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
<ul class="ons-navigation__list ons-navigation__list">
{% for item in params.navigation.subNavigation.itemsList %}
<li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
<a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
{% if item.title %}{{ item.title }}
{% elif item.text %}{{ item.text }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
<div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
{{ onsButton({
"text": params.navigation.currentPageTitle,
Expand Down
Loading

0 comments on commit 366497d

Please sign in to comment.