Skip to content

Commit

Permalink
Restructure list attributes to be set on correct elements (#3472)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar authored Jan 14, 2025
1 parent 9e63499 commit 6e74cee
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 71 deletions.
128 changes: 82 additions & 46 deletions __snapshots__/layout/_template.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1399,10 +1399,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `










Expand All @@ -1411,7 +1407,12 @@ exports[`base page template matches the full configuration snapshot 1`] = `



<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1422,10 +1423,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1436,19 +1441,22 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">






<a href="#0" class="ons-list__link">Respondent Charter</a>
</li>
</ul>
</li></ul>

</div>

Expand All @@ -1468,10 +1476,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `










Expand All @@ -1480,7 +1484,12 @@ exports[`base page template matches the full configuration snapshot 1`] = `



<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1491,10 +1500,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1505,19 +1518,22 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">






<a href="#0" class="ons-list__link">Contact us</a>
</li>
</ul>
</li></ul>

</div>

Expand All @@ -1537,10 +1553,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `










Expand All @@ -1549,7 +1561,12 @@ exports[`base page template matches the full configuration snapshot 1`] = `



<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1567,10 +1584,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1581,19 +1602,22 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">






<a href="#0" class="ons-list__link">News</a>
</li>
</ul>
</li></ul>

</div>

Expand Down Expand Up @@ -1622,10 +1646,6 @@ exports[`base page template matches the full configuration snapshot 1`] = `










Expand All @@ -1634,7 +1654,12 @@ exports[`base page template matches the full configuration snapshot 1`] = `



<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1645,10 +1670,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1659,10 +1688,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">



Expand All @@ -1673,19 +1706,22 @@ exports[`base page template matches the full configuration snapshot 1`] = `
</li>





<li class="ons-list__item">





<li class="ons-list__item">






<a href="#0" class="ons-list__link">Terms and conditions</a>
</li>
</ul>
</li></ul>



Expand Down
3 changes: 3 additions & 0 deletions src/components/list/_list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@

&--p {
padding: 0;
.ons-list__item {
margin: 0;
}
}

&--summary {
Expand Down
30 changes: 12 additions & 18 deletions src/components/list/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,15 @@
{% if params.element and listLength > 1 %}
{% set listEl = params.element | lower %}
{% elif (params.element == 'ol') and listLength < 2 %}
{% set listEl = 'p' %}
{% set listEl = 'div' %}
{% else %}
{% set listEl = 'ul' %}
{% endif %}

{% if listLength < 2 and not params.attributes %}
{% set attributes = [params.itemsList[0].attributes] %}
{% elif listLength < 2 and params.attributes and params.itemsList[0].attributes and listEl == 'p' %}
{% set attributes = [params.attributes, params.itemsList[0].attributes] %}
{% else %}
{% set attributes = [params.attributes] %}
{% endif %}
{% set openingTag = "<" + listEl %}
{% set closingTag = "</" + listEl + ">" %}

{{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attributeList in attributes %}{% for attribute, value in (attributeList.items() if attributeList is mapping and attributeList.items else attributeList) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endfor %}{% endif %}>
class="ons-list{{ ' ons-list--p' if listEl == 'div' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}{% endif %}>
{%- for item in params.itemsList -%}
{% set sublistClasses = item.listClasses if item.listClasses %}
{%
Expand Down Expand Up @@ -124,16 +116,18 @@
{% endset %}

{% if listLength > 1 or listEl == 'ul' %}
<li
class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
{% if item.current %}aria-current="true"{% endif %}
{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
>
{{- listItem | safe -}}
</li>
{% set listItemEl = 'li' %}
{% else %}
{{- listItem | safe -}}
{% set listItemEl = 'p' %}
{% endif %}
{% set openingItemTag = "<" + listItemEl %}
{% set closingItemTag = "</" + listItemEl + ">" %}

{{ openingItemTag | safe }}
class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}" {% if item.current %}aria-current="true"{% endif %}
{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
> {{- listItem | safe -}}
{{ closingItemTag | safe }}
{%- endfor -%}
{{ closingTag | safe }}
{% endmacro %}
18 changes: 11 additions & 7 deletions src/components/list/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,26 +194,30 @@ describe('macro: list', () => {
}),
);

it('renders a <p> element', () => {
expect($('.ons-list')[0].tagName).toBe('p');
it('renders the list as a <div> container element', () => {
expect($('.ons-list')[0].tagName).toBe('div');
});

it('has `ons-list--p` modifier class', () => {
it('renders the list item as a <p> element', () => {
expect($('.ons-list__item')[0].tagName).toBe('p');
});

it('the list has `ons-list--p` modifier class', () => {
expect($('.ons-list').hasClass('ons-list--p')).toBe(true);
});

it('does not output any <li> elements', () => {
expect($('.ons-list li').length).toBe(0);
});

it('has additionally provided list `attributes`', () => {
it('has additionally provided list `attributes` on the <div>', () => {
expect($('.ons-list').attr('a')).toBe('123');
expect($('.ons-list').attr('b')).toBe('456');
});

it('has additionally provided list item `attributes`', () => {
expect($('.ons-list--p').attr('c')).toBe('789');
expect($('.ons-list--p').attr('d')).toBe('123');
it('has additionally provided list item `attributes` on the <p>', () => {
expect($('.ons-list--p > .ons-list__item').attr('c')).toBe('789');
expect($('.ons-list--p > .ons-list__item').attr('d')).toBe('123');
});
});

Expand Down

0 comments on commit 6e74cee

Please sign in to comment.