Contrib.social

[beta6] ⚠️ Revamp follow component's social links

Open on Drupal.org →
Created on 21 March 2024, 8 months ago
Updated 11 April 2024, 7 months ago

Problem/Motivation

Since we switched to links setting type, follow component has a cleaner implementation of social links:

type: links
label: Social networks links
description: "Follow links by provider. The link element contains the following elements: id: Follow provider machine name (facebook, twitter…); title: Link title; url: Link URI."
preview:
  - id: facebook
    title: Follow on Facebook
    url: "https://facebook.com"
  - id: twitter
    title: Follow on Twitter
    url: "https://twitter.com"
  - id: instagram
    title: Follow on Instagram
    url: "https://instagram.com"

However, it is not perfect yet:

  • id property is not a part of the links data structure (which is inspired by Drupal menu structure)
  • the resolution of this id property to a Button class is done in the follow component instead of the button component: link_attributes.addClass('fr-btn--'~link.id)

Proposed resolution

1. Move fr-btn-- class to button component/h4>

Add an enum (select) prop to button with the list of the expected social IDs.

And process it in template:
{% set attributes = social ? attributes.addClass('fr-btn--' ~ social) : attributes %}

🔥🔥🔥 However, careful before doing anything, there is something strange about 'fr-btn--' ~ social, it works only if inside fr-share component. So, I will create this issue directly as "postponed" and let's discuss before starting work.

2. Replace socials links prop by a slot/h4> 
social:
  label: Social networks links
  description: "Expect button components"
  preview:
    - type: pattern
      id: button
      fields: 
        title: Follow on Facebook
      settings:
        url: "https://facebook.com"
        social: facebook
    - type: pattern
      id: button
      fields:
        title: Follow on LinkedIn
      settings:
        url: "https://linkedin.com"
        social: linkedin

So, the loop will be easier:

{% for link in social %}
  <li>{{ link }}</li>
{% endfor %}

API changes

Yes, so let's do it in beta6 because we have already breaking changes in this release.

That's why ⚠️ is in the title.

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024