revert social list changes

ONSdigital · rmccar · Jul 9, 2024 · May 24, 2024 · May 24, 2024 · May 28, 2024
commit 5ec93079561a3855b48761c5be695d00ee5d167a
diff --git a/...-test__components_header_example-header-external-welsh_0_document_0_desktop.png b/...-test__components_header_example-header-external-welsh_0_document_0_desktop.png
diff --git a/...r-test__components_header_example-header-external-welsh_0_document_1_tablet.png b/...r-test__components_header_example-header-external-welsh_0_document_1_tablet.png
diff --git a/...r-test__components_header_example-header-external-welsh_0_document_2_mobile.png b/...r-test__components_header_example-header-external-welsh_0_document_2_mobile.png
diff --git a/...s_related-content_example-related-content-social-media_0_document_0_desktop.png b/...s_related-content_example-related-content-social-media_0_document_0_desktop.png
diff --git a/...ts_related-content_example-related-content-social-media_0_document_1_tablet.png b/...ts_related-content_example-related-content-social-media_0_document_1_tablet.png
diff --git a/...ts_related-content_example-related-content-social-media_0_document_2_mobile.png b/...ts_related-content_example-related-content-social-media_0_document_2_mobile.png
diff --git a/...e/ds-vr-test__components_share-page_example-share-page_0_document_0_desktop.png b/...e/ds-vr-test__components_share-page_example-share-page_0_document_0_desktop.png
diff --git a/...ce/ds-vr-test__components_share-page_example-share-page_0_document_1_tablet.png b/...ce/ds-vr-test__components_share-page_example-share-page_0_document_1_tablet.png
diff --git a/...ce/ds-vr-test__components_share-page_example-share-page_0_document_2_mobile.png b/...ce/ds-vr-test__components_share-page_example-share-page_0_document_2_mobile.png
diff --git a/...s_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png b/...s_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png
diff --git a/...ps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png b/...ps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png
diff --git a/...ps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png b/...ps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png
diff --git a/...ps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png b/...ps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png
diff --git a/...aps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png b/...aps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png
diff --git a/...itmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png b/...itmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png
diff --git a/...bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png b/...bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png
diff --git a/...bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png b/...bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png
diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
@@ -9,9 +9,6 @@
         &:last-child {
             margin-bottom: -0.5;
         }
-        &--social {
-            align-items: center !important;
-        }
     }
 
     &--spacious {
@@ -71,6 +68,12 @@
         }
     }
 
+    &--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
@@ -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<ListItem>` | 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”, 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”, “social”, 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).          |

@@ -109,15 +109,8 @@
             {% endif %}
         {% endset %}
 
-        {% if itemIconType in ['facebook', 'twitter', 'instagram', 'linkedin'] %}
-            {% set socialClass = ' ons-list__item--social' %}
-        {% endif %}
-
         {% if listLength > 1 or listEl == 'ul' %}
-            <li
-                class="ons-list__item{{ ' ' + item.listClasses if item.listClasses }}{{ socialClass }}"
-                {% if item.current %}aria-current="true"{% endif %}
-            >
+            <li class="ons-list__item{{ ' ' + item.listClasses if item.listClasses }}" {% if item.current %}aria-current="true"{% endif %}>
                 {{- listItem | safe -}}
             </li>
         {% else %}

diff --git a/src/components/list/_macro.spec.js b/src/components/list/_macro.spec.js
@@ -613,23 +613,6 @@ 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', () => {

@@ -7,6 +7,7 @@
             {
                 "id": 'follow-us',
                 "title": 'Follow us',
+                "variants": 'social',
                 "iconPosition": 'before',
                 "iconSize": 'xxl',
                 "itemsList": [