Skip to content

Commit

Permalink
Merge branch 'main' into fix/3079/update-pagination-docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@adi-unni
adi-unni committed Mar 11, 2024
2 parents 41543e8 + 0e9e6b2 commit c80d8e9
Show file tree
Hide file tree
Showing 9 changed files with 38 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/components/card/_macro-options.md
View file
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
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
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
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
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
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
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
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
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>

0 comments on commit c80d8e9

Please sign in to comment.