Skip to content

Commit

Permalink
Update tags to headings in section navigation component (#2964)
Browse files Browse the repository at this point in the history 
* implement and approve visual tests

* update macro

* update macro

* address PR comments

* update css file

* update macro

* update visual test
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons authored Dec 5, 2023
1 parent ccdb042 commit a96779c
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 18 deletions.
4 changes: 2 additions & 2 deletions ...onents_timeout-panel_example-panel-with-timeout-warning_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.
17 changes: 9 additions & 8 deletions src/components/pagination/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
| Name | Type | Required | Description |
| ------------------ | ------------- | -------- | ------------------------------------------------------------------ |
| pages | `Array<Page>` | true | Settings for each [page](#page) |
| currentPageNumber | integer | true | Sets the current page number |
| previous | string | false | Text label for the “Previous” link. Default is "Previous". |
| next | string | false | Text label for the “Next” link. Default is "Next". |
| classes | string | false | Classes to add to the pagination HTML `nav` element |
| hideRangeIndicator | boolean | false | Set to “true” to hide the range indicator on viewports &geq; 740px |
| Name | Type | Required | Description |
| ------------------ | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| pages | `Array<Page>` | true | Settings for each [page](#page) |
| currentPageNumber | integer | true | Sets the current page number |
| previous | string | false | Text label for the “Previous” link. Default is "Previous". |
| next | string | false | Text label for the “Next” link. Default is "Next". |
| classes | string | false | Classes to add to the pagination HTML `nav` element |
| hideRangeIndicator | boolean | false | Set to “true” to hide the range indicator on viewports &geq; 740px |
| headingLevel | string | false | Number used to determine the heading level to ensure it has the correct semantic order on the page. Defaults to `2` |

## Page

Expand Down
24 changes: 18 additions & 6 deletions src/components/section-navigation/_macro.njk
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
{% macro onsSectionNavigation(params) %}
{% set headingLevel = params.headingLevel | int | default(2) %}
{% set sectionTitleHeadingLevel = headingLevel + 1 %}
<nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
<h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
<h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
{% if params.sections %}
{% for section in params.sections %}
{% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
<div class="ons-section-nav__sub">
{% if section.title %}
<h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>
<h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
{% endif %}
<ul class="ons-section-nav__list">
{% for item in section.itemsList %}
Expand All @@ -15,8 +18,12 @@
{% set isCurrent = false %}
{% endif %}
<li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
<a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
{% if item.anchors and isCurrent == true %}
{% if isCurrent == true %}
<h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
{% else %}
<a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
{% endif %}
{% if item.anchors and isCurrent == true %}
<ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
{% for anchor in item.anchors %}
<li class="ons-section-nav__item ons-list__item">
Expand All @@ -32,17 +39,22 @@
{% endfor %}
{% else %}
{% if params.title %}
<h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
<h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h{{ sectionTitleHeadingLevel }}>
{% endif %}
<ul class="ons-section-nav__list">
{% for item in params.itemsList %}
{% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
{% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
{% set isCurrent = true %}
{% else %}
{% set isCurrent = false %}
{% endif %}
<li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
<a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
{% if isCurrent == true %}
<h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
{% else %}
<a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
{% endif %}
{% if item.anchors %}
<ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
{% for anchor in item.anchors %}
Expand Down
22 changes: 20 additions & 2 deletions src/components/section-navigation/_section-navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,12 @@
font-weight: $font-weight-bold;
margin-left: -18px;
padding-left: 14px;
a {
a,
h2,
h3,
h4,
h5,
h6 {
color: var(--ons-color-text-link-active);
}
}
Expand All @@ -39,6 +44,14 @@
}
}

&__item-header {
@extend .ons-u-mb-no;

font-size: 1rem;
font-weight: 700;
line-height: 1.6;
}

&__sub-items {
a {
color: var(--ons-color-text-link);
Expand All @@ -58,7 +71,12 @@
border-color: var(--ons-color-text-link-active);
margin: 0 1rem 0 0;
padding: 0;
a {
a,
h2,
h3,
h4,
h5,
h6 {
color: var(--ons-color-text-link-active);
}
}
Expand Down

0 comments on commit a96779c

Please sign in to comment.