setting social class when using social logos

ONSdigital · Jun 20, 2024 · 6b93d20 · 6b93d20
1 parent 2864809
commit 6b93d20
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 78 deletions.
diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap
@@ -1403,49 +1403,49 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">About our surveys</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Lists of all surveys</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Respondent Charter</a>
-
-            </li>
+        </li>
         </ul>
 
                             </div>
@@ -1474,49 +1474,49 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">What we do</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Transparency and governance</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Contact us</a>
-
-            </li>
+        </li>
         </ul>
 
                             </div>
@@ -1545,8 +1545,9 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
             <li class="ons-list__item">
-
 
 
 
@@ -1561,40 +1562,39 @@ exports[`base page template matches the full configuration snapshot 1`] = `
             <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"></path>
         </svg></span><span class="ons-external-link__new-window-description ons-u-vh">(opens in a new tab)</span></a>
 
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Release calendar</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">News</a>
-
-            </li>
+        </li>
         </ul>
 
                             </div>
@@ -1632,65 +1632,65 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
+
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Cookies</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Accessibility statement</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Privacy and data protection</a>
+        </li>
 
-            </li>
 
 
+
 
 
 
             <li class="ons-list__item">
-
 
 
 
 
 
 
             <a href="#0" class="ons-list__link">Terms and conditions</a>
-
-            </li>
+        </li>
         </ul>
 
 

diff --git 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
@@ -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”, “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
@@ -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' %}
-            <li class="ons-list__item{{ ' ' + item.listClasses if item.listClasses }}" {% if item.current %}aria-current="true"{% endif %}>
-                {{ listItem | safe }}
+            <li
+                class="ons-list__item{{ ' ' + item.listClasses if item.listClasses }}{{ socialClass }}"
+                {% if item.current %}aria-current="true"{% endif %}
+            >
+                {{- listItem | safe -}}
             </li>
         {% 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
@@ -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
@@ -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' }
+                ]
     })
 }}