diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 37eaac7ec0..2699d26f5b 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -1403,8 +1403,9 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + +
  • - @@ -1412,15 +1413,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` About our surveys +
    • - +
  • - @@ -1428,15 +1429,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Lists of all surveys +
    • - +
  • - @@ -1444,8 +1445,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Respondent Charter - -
    • + @@ -1474,8 +1474,9 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + +
  • - @@ -1483,15 +1484,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` What we do +
    • - +
  • - @@ -1499,15 +1500,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Transparency and governance +
    • - +
  • - @@ -1515,8 +1516,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Contact us - -
    • + @@ -1545,8 +1545,9 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + +
  • - @@ -1561,15 +1562,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` (opens in a new tab) +
    • - +
  • - @@ -1577,15 +1578,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Release calendar +
    • - +
  • - @@ -1593,8 +1594,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` News - -
    • + @@ -1632,8 +1632,9 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + +
  • - @@ -1641,15 +1642,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Cookies +
    • - +
  • - @@ -1657,15 +1658,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Accessibility statement +
    • - +
  • - @@ -1673,15 +1674,15 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Privacy and data protection +
    • - +
  • - @@ -1689,8 +1690,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Terms and conditions - -
    • + diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss index 6ac1472f75..a774bb3cd7 100644 --- a/src/components/list/_list.scss +++ b/src/components/list/_list.scss @@ -9,6 +9,9 @@ &:last-child { margin-bottom: -0.5; } + &--social { + align-items: center !important; + } } &--spacious { @@ -68,12 +71,6 @@ } } - &--social & { - &__item { - align-items: center; - } - } - &--icons { margin-bottom: 0; .ons-list__item { diff --git a/src/components/list/_macro-options.md b/src/components/list/_macro-options.md index 232b1dcb92..abed79b55e 100644 --- a/src/components/list/_macro-options.md +++ b/src/components/list/_macro-options.md @@ -4,7 +4,7 @@ | id | string | false | The HTML `id` for the wrapping element | | classes | string | false | Classes to be added to the wrapping element | | itemsList | `Array` | true | Settings for each [list item](#listitem) | -| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “bare”, “dashed”, “inline”, “social”, and “languages” | +| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants: “bare”, “dashed”, “inline”, and “languages” | | iconPosition | string | false | Sets position of icon to “before” or “after” each list item | | iconType | string | false | Adds an icon to all the list items when set to the name of one of the [available icons](/foundations/icons#a-to-z). Requires `iconPosition` to be set. | | iconSize | string | false | Icon size can be set to match the size of the list item text as detailed in the [typography type scale](/foundations/typography/#type-scale). | diff --git a/src/components/list/_macro.njk b/src/components/list/_macro.njk index f8f343d7b1..7bd63200b3 100644 --- a/src/components/list/_macro.njk +++ b/src/components/list/_macro.njk @@ -7,7 +7,7 @@ {% elif params.itemsList[0].suffix %} {% set otherClasses = 'ons-list--bare ons-list--suffix' %} {% elif params.iconPosition %} - {% set otherClasses = 'ons-list--icons' %} + {% set otherClasses = 'ons-list--bare ons-list--icons' %} {% set iconType = params.iconType if params.iconType %} {% else %} {% set otherClasses = '' %} @@ -109,12 +109,19 @@ {% endif %} {% endset %} + {% if itemIconType in ['facebook', 'twitter', 'instagram', 'linkedin'] %} + {% set socialClass = ' ons-list__item--social' %} + {% endif %} + {% if listLength > 1 or listEl == 'ul' %} -
  • - {{ listItem | safe }} +
  • + {{- listItem | safe -}}
    • {% else %} - {{ listItem | safe }} + {{- listItem | safe -}} {% endif %} {%- endfor -%} {{ closingTag | safe }} diff --git a/src/components/list/_macro.spec.js b/src/components/list/_macro.spec.js index 75775f4e85..c39cdd5387 100644 --- a/src/components/list/_macro.spec.js +++ b/src/components/list/_macro.spec.js @@ -613,6 +613,23 @@ describe('macro: list', () => { expect($('#first + .ons-list__suffix').length).toBe(1); }); + + it('has the social class added when social icons are used', () => { + const $ = cheerio.load( + renderComponent('list', { + iconPosition: 'before', + iconSize: 'xxl', + itemsList: [ + { text: 'Facebook', iconType: 'facebook' }, + { text: 'Twitter', iconType: 'twitter' }, + { text: 'Instagram', iconType: 'instagram' }, + { text: 'LinkedIn', iconType: 'linkedin' }, + ], + }), + ); + + expect($('.ons-list__item--social').length).toBe(4); + }); }); describe('nested list element', () => { diff --git a/src/foundations/lists/example-inline-list-with-social-icon-prefix.njk b/src/foundations/lists/example-inline-list-with-social-icon-prefix.njk index 833da677cb..143422c224 100644 --- a/src/foundations/lists/example-inline-list-with-social-icon-prefix.njk +++ b/src/foundations/lists/example-inline-list-with-social-icon-prefix.njk @@ -1,42 +1,13 @@ {% from "components/list/_macro.njk" import onsList %} {{ onsList({ - "variants": ['social', 'inline'], - "iconPosition": 'before', - "iconSize": 'xxl', - "itemsList": [ - { - "url": '#0', - "text": 'Twitter', - "iconType": 'twitter', - "attributes": { - "rel": 'noreferrer external' - } - }, - { - "url": '#0', - "text": 'Facebook', - "iconType": 'facebook', - "attributes": { - "rel": 'noreferrer external' - } - }, - { - "url": '#0', - "text": 'Instagram', - "iconType": 'instagram', - "attributes": { - "rel": 'noreferrer external' - } - }, - { - "url": '#0', - "text": 'LinkedIn', - "iconType": 'linkedin', - "attributes": { - "rel": 'noreferrer external' - } - } - ] + iconPosition: 'before', + iconSize: 'xxl', + itemsList: [ + { text: 'Facebook', iconType: 'facebook' }, + { text: 'Twitter', iconType: 'twitter' }, + { text: 'Instagram', iconType: 'instagram' }, + { text: 'LinkedIn', iconType: 'linkedin' } + ] }) }}