Remove duplicate class on related-content example

src/components/list/_list.scss

@@ -68,6 +68,12 @@
         }
     }
 
+    &--prefix,
+    &--suffix,
+    &--icons {
+        @extend .ons-list--bare;
+    }
+
     &--social & {
         &__item {
             align-items: center;

src/components/list/_macro.njk

@@ -3,11 +3,11 @@
     {% set listLength = params.itemsList | length %}
 
     {% if params.itemsList[0].prefix %}
-        {% set otherClasses = 'ons-list--bare ons-list--prefix' %}
+        {% set otherClasses = 'ons-list--prefix' %}
     {% elif params.itemsList[0].suffix %}
-        {% set otherClasses = 'ons-list--bare ons-list--suffix' %}
+        {% set otherClasses = 'ons-list--suffix' %}
     {% elif params.iconPosition %}
-        {% set otherClasses = 'ons-list--bare ons-list--icons' %}
+        {% set otherClasses = 'ons-list--icons' %}
         {% set iconType = params.iconType if params.iconType %}
     {% else %}
         {% set otherClasses = '' %}

src/components/list/_macro.spec.js

@@ -77,29 +77,27 @@ describe('macro: list', () => {
             expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
         });
 
-        it('assumes the "bare" variant with a prefix modifier class when the first list item has a prefix', () => {
+        it('assumes a prefix modifier class when the first list item has a prefix', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     itemsList: [{ text: 'Item text', prefix: 'Abc' }],
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--prefix')).toBe(true);
         });
 
-        it('assumes the "bare" variant with a suffix modifier class when the first list item has a suffix', () => {
+        it('assumes a suffix modifier class when the first list item has a suffix', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     itemsList: [{ text: 'Item text', suffix: 'Abc' }],
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--suffix')).toBe(true);
         });
 
-        it('assumes the "bare" variant with a icons modifier class when the first list item has an icon', () => {
+        it('assumes a icons modifier class when the first list item has an icon', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     ...EXAMPLE_LIST_TEXT_ITEMS,
@@ -108,7 +106,6 @@ describe('macro: list', () => {
                 }),
             );
 
-            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
             expect($('.ons-list').hasClass('ons-list--icons')).toBe(true);
         });
 

src/components/related-content/_macro-options.md

@@ -14,3 +14,4 @@
 | 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. |
 | iconPosition | string                                                      | false    | Sets the position of the icon to “before” or “after” each list item in the row                                                                         |
 | 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).          |
+| variants     | array or string                                             | false    | An array of values or single value (string) to adjust the list items using available variants: “bare”, “dashed”, “inline”, “social”, and “languages”   |

src/components/related-content/_macro.njk

@@ -16,7 +16,7 @@
                     <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
                         {{
                             onsList({
-                                "variants": 'bare',
+                                "variants": row.variants if row.variants else 'bare',
                                 "iconType": row.iconType,
                                 "iconPosition": row.iconPosition,
                                 "iconSize": row.iconSize,