Skip to content

Commit

Permalink
updated siteautosuggest in navigation component
Browse files Browse the repository at this point in the history
  • Loading branch information
@alessioventuriniAND
alessioventuriniAND committed Oct 18, 2023
1 parent 5e7296a commit cf76dfa
Show file tree
Hide file tree
Showing 3 changed files with 558 additions and 510 deletions.
40 changes: 30 additions & 10 deletions src/components/navigation/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@
{{ onsAutosuggest({
"id": "ons-site-search",
"containerClasses": "ons-autosuggest--header",
"classes": autosuggestClasses,
"label": {
"input": {
"classes": autosuggestClasses,
"accessiblePlaceholder": true,
"autocomplete": "off",
"label": {
"text": params.siteSearchAutosuggest.label,
"id": "ons-site-search-label",
"classes": autosuggestLabelClasses
}
},
"accessiblePlaceholder": true,
"autocomplete": "off",
"instructions": params.siteSearchAutosuggest.instructions,
"ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
"ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
Expand All @@ -42,7 +44,11 @@
<ul class="ons-navigation__list">
{% for item in params.navigation.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" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
<a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>
{% if item.title %}{{ item.title }}
{% elif item.text %}{{ item.text }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
Expand All @@ -55,7 +61,11 @@
<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>
<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>
Expand All @@ -81,14 +91,24 @@
</li>
{% for item in params.navigation.subNavigation.itemsList %}
<li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
<a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
<a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>
{% if item.title %}{{ item.title }}
{% elif item.text %}{{ item.text }}
{% endif %}
</a>
{% if item.sections %}
{% for section in item.sections %}
{% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
{% if section.sectionTitle %}
<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>
{% endif %}
<ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
{% for child in section.children %}
<li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
<a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{% if child.title %}{{ child.title }}{% elif child.text %}{{ child.text }}{% endif %}</a>
<a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>
{% if child.title %}{{ child.title }}
{% elif child.text %}{{ child.text }}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
Expand All @@ -102,4 +122,4 @@
</div>
{% endif %}

{% endmacro %}
{% endmacro %}
40 changes: 22 additions & 18 deletions src/components/navigation/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ const PARAMS = {
};

const SITE_SEARCH_AUTOSUGGEST = {
label: 'Search the design system',
instructions:
"Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.",
ariaYouHaveSelected: 'You have selected',
Expand Down Expand Up @@ -122,20 +121,25 @@ describe('macro: navigation', () => {
navigation: PARAMS,
siteSearchAutosuggest: {
...SITE_SEARCH_AUTOSUGGEST,
input: {
label: 'Search the design system',
},
},
});

expect(autosuggestSpy.occurrences[0]).toEqual({
...SITE_SEARCH_AUTOSUGGEST,
accessiblePlaceholder: true,
autocomplete: 'off',
id: 'ons-site-search',
containerClasses: 'ons-autosuggest--header',
classes: 'ons-input-search ons-input-search--icon',
label: {
text: 'Search the design system',
id: 'ons-site-search-label',
classes: 'ons-u-pl-m ons-label--white',
input: {
accessiblePlaceholder: true,
autocomplete: 'off',
label: 'Search the design system',
classes: 'ons-input-search ons-input-search--icon',
label: {
id: 'ons-site-search-label',
classes: 'ons-u-pl-m ons-label--white',
},
},
});
});
Expand All @@ -157,21 +161,21 @@ describe('macro: navigation', () => {
it('has the correct link href for each list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('href'));
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.attr('href'));
expect(values).toEqual(['#0', '#1']);
});

it('has the correct link text for each list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.text().trim());
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.text().trim());
expect(values).toEqual(['Main nav item 1', 'Main nav item 2']);
});

it('has the correct aria-label for each list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('aria-label'));
const values = mapAll($('.ons-navigation--main .ons-navigation__link'), (node) => node.attr('aria-label'));
expect(values).toEqual(['Main nav ariaLabel 1', 'Main nav ariaLabel 2']);
});

Expand Down Expand Up @@ -249,21 +253,21 @@ describe('macro: navigation', () => {
it('has the correct link href for each list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('href'));
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.attr('href'));
expect(values).toEqual(['/sub-item-1', '/sub-item-2']);
});

it('has the correct link text for each list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.text().trim());
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.text().trim());
expect(values).toEqual(['Sub nav item 1', 'Sub nav item 2']);
});

it('has the correct aria-label for each list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('aria-label'));
const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), (node) => node.attr('aria-label'));
expect(values).toEqual(['Sub nav ariaLabel 1', 'Sub nav ariaLabel 2']);
});

Expand Down Expand Up @@ -322,7 +326,7 @@ describe('macro: navigation', () => {

const values = mapAll(
$('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
node => node.attr('href'),
(node) => node.attr('href'),
);
expect(values).toEqual(['#overview', '/sub-item-1', '/sub-item-2']);
});
Expand All @@ -332,7 +336,7 @@ describe('macro: navigation', () => {

const values = mapAll(
$('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
node => node.text().trim(),
(node) => node.text().trim(),
);
expect(values).toEqual(['Overview', 'Sub nav item 1', 'Sub nav item 2']);
});
Expand Down Expand Up @@ -364,14 +368,14 @@ describe('macro: navigation', () => {
it('has the correct link href for each child list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation__list--child > li a'), node => node.attr('href'));
const values = mapAll($('.ons-navigation__list--child > li a'), (node) => node.attr('href'));
expect(values).toEqual(['/sub-item-2/child-item-1', '/sub-item-2/child-item-2']);
});

it('has the correct link text for each child list item', () => {
const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));

const values = mapAll($('.ons-navigation__list--child > li a'), node => node.text().trim());
const values = mapAll($('.ons-navigation__list--child > li a'), (node) => node.text().trim());
expect(values).toEqual(['Child item 1', 'Child item 2']);
});

Expand Down
Loading

0 comments on commit cf76dfa

Please sign in to comment.