Social links component

<div class="rtds-social-links rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 "> <ul class="rtds-flex rtds-items-center rtds-gap-4"> <li class="rtds-flex rtds-items-center"> <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg"> <span class="rtds-sr-only">Vai al profilo Facebook di ???</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#solid--facebook" /> </svg> </a> </li> <li class="rtds-flex rtds-items-center"> <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg"> <span class="rtds-sr-only">Vai al profilo Instagram di ???</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#solid--instagram" /> </svg> </a> </li> <li class="rtds-flex rtds-items-center"> <a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg"> <span class="rtds-sr-only">Vai al canale YouTube di ???</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#solid--youtube" /> </svg> </a> </li> </ul> </div>

<div class="rtds-social-links{% if wrapperClasses %} {{ wrapperClasses }}{% else %} rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 {% endif %}"> {% if label %}<h2 {% if labelClasses %}class="{{ labelClasses }}" {% endif %}id="{% if labelId %}{{ labelId }}{% else %}socialLabelId{% endif %}">{{ label }}</h2>{% endif %} <ul{% if id %} id="{{ id }}"{% endif %} class="rtds-flex rtds-items-center{% if listGap %} {{ listGap }}{% endif %}{% if classes %} {{ classes }}{% endif %}"{% if label %} aria-labelledby="{% if labelId %}{{ labelId }}{% else %}socialLabelId{% endif %}"{% endif %}> {% for item in items %} <li class="{% if itemClasses %}{{ itemClasses }}{% endif %}"> {% render '@link--lg', { label:item.label, iconOnly:true, icon:item.icon, classes: itemLinkClasses + ' ' + item.color, iconSize: linkIconSize }, true %} </li> {% endfor %} </ul> </div>

{ "listGap": "rtds-gap-4", "linkIconSize": "rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6", "itemClasses": "rtds-flex rtds-items-center", "itemLinkClasses": "rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1", "items": [ { "label": "Vai al profilo Facebook di ???", "icon": "solid--facebook" }, { "label": "Vai al profilo Instagram di ???", "icon": "solid--instagram" }, { "label": "Vai al canale YouTube di ???", "icon": "solid--youtube" } ] }

Il componente Social Links è un elemento molecolare che gestisce la visualizzazione dei link ai social media. È progettato per essere accessibile e responsive, supportando diverse configurazioni di layout e stile.

Markup

Il componente utilizza una struttura semantica con:

<div> come contenitore principale
<h2> opzionale per l’etichetta del blocco
<ul> per la lista dei link social
<li> per ogni elemento della lista
Componente link integrato per ogni social

La struttura base del markup è:

<div class="rtds-social-links">
  <!-- Etichetta opzionale -->
  <h2 id="socialLabelId">Etichetta</h2>
  
  <!-- Lista social -->
  <ul class="rtds-flex rtds-items-center" aria-labelledby="socialLabelId">
    <li>
      <!-- Link social -->
    </li>
  </ul>
</div>

Comportamento

Supporta layout responsive con configurazioni specifiche per mobile e desktop
Include supporto per icone social con dimensioni personalizzabili
Fornisce navigazione accessibile con attributi ARIA
Gestisce lo stile degli elementi in modo flessibile
Supporta l’integrazione con il componente link esistente

Accessibilità

Il componente è stato progettato seguendo le linee guida WCAG 2.1 e implementa diverse caratteristiche per garantire l’accessibilità:

Struttura Semantica

Utilizzo di elementi HTML5 semantici (<ul>, <li>)
Attributo aria-labelledby per associare l’etichetta alla lista
Supporto per ID personalizzati per l’etichetta

Etichette descrittive con uso di classe rtds-sr-only per ogni link social
Gestione del focus per la navigazione da tastiera

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

label: stringa - etichetta visibile del blocco
labelId: stringa - ID per l’accessibilità, utilizzato in aria-labelledby sulla lista
labelClasses: stringa - classi per lo stile dell’etichetta
wrapperClasses: stringa - classi per il wrapper dei social links (se con etichetta)
classes: stringa - classi per il componente
id: stringa - ID per il componente
listGap: stringa - classi per lo spazio tra gli elementi della lista (ul)
itemClasses: stringa - classi per gli elementi della lista (li)
linkIconSize: stringa - classi per la dimensione dell’icona del link
items: array di oggetti - elementi social
- label: stringa - etichetta dell’elemento
- icon: stringa - icona dell’elemento

Configurazione YAML

Il file di configurazione supporta le seguenti impostazioni:

title: stringa - titolo del componente
context: oggetto - configurazione di default
- listGap: stringa - spaziatura tra gli elementi della lista (default: rtds-gap-4)
- linkIconSize: stringa - dimensioni dell’icona del link (default: rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6)
- itemClasses: stringa - classi per gli elementi della lista (default: rtds-flex rtds-items-center)
- itemLinkClasses: stringa - classi per i link degli elementi (default: rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1)
- items: array - elementi social predefiniti

Note sull’implementazione

Il componente utilizza il sistema di grid di default per il layout mobile
Su desktop, il layout passa automaticamente a flex con una spaziatura maggiore
Le icone social sono gestite attraverso il componente link esistente
Il componente supporta la personalizzazione completa delle classi CSS per adattarsi a diversi contesti di utilizzo

Componente Social Links