Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix headingLevel error in jinja2 environment for section nav component #3072

Merged
merged 5 commits into from
Mar 11, 2024
Merged

Fix headingLevel error in jinja2 environment for section nav component #3072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
48a588d
fix headinglevel error in jinja env for section nav
rmccar Mar 6, 2024
e9ece64
fix missing pipe
rmccar Mar 6, 2024
a14477c
fix tests
rmccar Mar 6, 2024
08bf131
Merge branch 'main' into fix-headinglevel-error-in-jinja-env-for-sect…
alessioventuriniAND Mar 11, 2024
eb6d9a0
Merge branch 'main' into fix-headinglevel-error-in-jinja-env-for-sect…
rmccar Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/card/_macro-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
| Name | Type | Required | Description |
| ------------ | ----------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| title | string | true | The title for the card heading |
| titleSize | string | false | Number used to determine the heading level of the card title. Defaults to `2` |
| headingLevel | int | false | Number used to determine the heading level of the card title. Defaults to `2` |
| titleClasses | string | false | Font size classes for the card heading. Defaults to `ons-u-fs-m` |
| url | string | true | The URL for the title link `href` attribute |
| id | string | true | The HTML `id` attribute for the card heading |
Expand Down
6 changes: 3 additions & 3 deletions src/components/card/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{%- macro onsCard(params) -%}

{% set titleSize = params.titleSize | default('2') %}
{% set headingLevel = params.headingLevel | default(2) %}

<div class="ons-card">
<a href="{{ params.url }}" class="ons-card__link">
Expand All @@ -11,9 +11,9 @@
<img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
{% endif %}
{%- endif -%}
<h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
<h{{ headingLevel }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
{{ params.title }}
</h{{ titleSize }}>
</h{{ headingLevel }}>
</a>

<p id="{{ params.textId }}">{{ params.text }}</p>
Expand Down
8 changes: 4 additions & 4 deletions src/components/card/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ describe('macro: card', () => {
it.each([
[1, 'h1'],
[4, 'h4'],
])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
const $ = cheerio.load(
renderComponent('card', {
...EXAMPLE_CARD_WITHOUT_IMAGE,
titleSize,
headingLevel,
}),
);

Expand Down Expand Up @@ -117,11 +117,11 @@ describe('macro: card', () => {
it.each([
[1, 'h1'],
[4, 'h4'],
])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
const $ = cheerio.load(
renderComponent('card', {
...EXAMPLE_CARD_WITH_IMAGE,
titleSize,
headingLevel,
}),
);

Expand Down
2 changes: 1 addition & 1 deletion src/components/feedback/_macro-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
| id | string | false | The HTML `id` attribute of the feedback container |
| classes | string | false | Classes to be applied to the feedback container |
| heading | string | true | Text to show in the heading of the feedback component |
| headingLevel | string | false | Number used to determine the heading level to ensure it has the correct semantic order on the page. Defaults to `2` |
| headingLevel | int | false | Number used to determine the heading level to ensure it has the correct semantic order on the page. Defaults to `2` |
| headingClasses | string | false | Classes to be applied to the heading element |
| content | string | true | The text content for the body of the feedback call to action |
| url | string | true | The URL of the feedback form |
Expand Down
2 changes: 1 addition & 1 deletion src/components/feedback/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% macro onsFeedback(params) %}
{% set headingLevel = params.headingLevel | default("2") %}
{% set headingLevel = params.headingLevel | default(2) %}
<div {% if params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes %} {{ params.classes }}{% endif %}">
<h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses }}">
{{ params.heading }}
Expand Down
23 changes: 12 additions & 11 deletions src/components/section-navigation/_macro-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
| Name | Type | Required | Description |
| ------------- | ------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| id | string | false | The HTML `id` of the `<nav>` element of the component |
| classes | string | false | Additional classes for the `<nav>` element |
| hiddenTitle | string | false | The value of the visually hidden `<h2>` element for screen readers. Defaults to "Pages in this section". |
| hiddenTitleId | string | false | The value of the visually hidden title ID. Necessary if you have multiple section navs. Defaults to "section-menu-nav-title". |
| variants | string | false | To adjust the orientation of the component using available variant “vertical” |
| currentPath | string | true (unless `tabQuery` set) | Path to the current active page |
| tabQuery | string | true (unless `currentPath` set) | Query parameter in the URL for the current active page |
| title | string | false | The title/header to display in the section navigation element (only for entries without sections) |
| sections | `Array<Item>` | false | An array of [sections](#sections) for the component |
| Name | Type | Required | Description |
| ------------- | ------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| id | string | false | The HTML `id` of the `<nav>` element of the component |
| classes | string | false | Additional classes for the `<nav>` element |
| hiddenTitle | string | false | The value of the visually hidden `<h2>` element for screen readers. Defaults to "Pages in this section". |
| hiddenTitleId | string | false | The value of the visually hidden title ID. Necessary if you have multiple section navs. Defaults to "section-menu-nav-title". |
| variants | string | false | To adjust the orientation of the component using available variant “vertical” |
| currentPath | string | true (unless `tabQuery` set) | Path to the current active page |
| tabQuery | string | true (unless `currentPath` set) | Query parameter in the URL for the current active page |
| title | string | false | The title/header to display in the section navigation element (only for entries without sections) |
| sections | `Array<Item>` | false | An array of [sections](#sections) for the component |
| headingLevel | int | false | Number used to determine the heading level of the title to ensure it has the correct semantic order on the page. Defaults to `2` |

## Sections

Expand Down
24 changes: 12 additions & 12 deletions src/components/section-navigation/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{% macro onsSectionNavigation(params) %}
{% set headingLevel = params.headingLevel | int | default(2) %}
{% set sectionTitleHeadingLevel = headingLevel + 1 %}
{% set headingLevel = params.headingLevel | 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")}}">
<h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
<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 %}
{% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
<div class="ons-section-nav__sub">
{% if section.title %}
<h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
Expand All @@ -18,12 +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 %}">
{% 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 %}
{% 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 @@ -43,15 +43,15 @@
{% endif %}
<ul class="ons-section-nav__list">
{% for item in params.itemsList %}
{% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
{% 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 %}">
{% 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 }}>
<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 %}
Expand Down
6 changes: 3 additions & 3 deletions src/components/summary/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% macro onsSummary(params) %}
{% set className = "ons-summary" %}
{% set titleSize = "2" %}
{% set headingLevel = 2 %}

{% if params.variant == "hub" %}
{% set variantHub = true %}
Expand All @@ -17,12 +17,12 @@
{% for summary in params.summaries %}
{% if summary.summaryTitle %}
<h2 class="ons-summary__title ons-u-mb-m{{ " ons-u-mt-m" if loop.index > 1 else "" }}">{{ summary.summaryTitle }}</h2>
{% set titleSize = "3" %}
{% set headingLevel = 3 %}
{% endif %}
{% for group in summary.groups %}
<div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group{{ variantClasses }}">
{% if group.groupTitle %}
<h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
<h{{ headingLevel }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ headingLevel }}>
{% endif %}
{% if group.rows %}
<dl class="ons-summary__items">
Expand Down
4 changes: 1 addition & 3 deletions src/foundations/page-template/example-base-page-template-block-areas.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ layout: example
{% from "components/header/_macro.njk" import onsHeader %}
{% from "components/footer/_macro.njk" import onsFooter %}
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
{% from "components/related-content/_macro.njk" import onsRelatedContent %}
{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}

<style>
.ons-pattern-lib-block {
Expand Down Expand Up @@ -176,4 +174,4 @@ layout: example

<div class="ons-pattern-lib-block">
<div class="ons-pattern-lib-block__label">block: scripts</div>
</div>
</div>
Loading