Page updates information share: Share Event

<div class="rtds-container rtds-pb-6 md:rtds-pb-12"> <div class="rtds-flex rtds-flex-col"> <div class="rtds-flex rtds-justify-end"> <button type="button" class="rtds-btn rtds-btn--icon-right rtds-group/button rtds-btn--only-text" aria-expanded="false" aria-controls="openModalShare" aria-haspopup="dialog" onclick="openDialog('openModalShare', this)"> Condividi l'evento <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#mini--arrow-uturn-right" /> </svg> </button> <div class="rtds-dialog"> <div role="dialog" id="openModalShare" aria-labelledby="openModalShareLabel" aria-modal="true" class="rtds-hidden"> <div class="rtds-dialog__header"> <h2 id="openModalShareLabel" class="rtds-dialog__title"> Condividi sui social </h2> <button type="button" class="rtds-btn rtds-btn--icon rtds-btn--l rtds-dialog__close-button" id="close-modal-share-button" onclick="closeDialog(this)"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#mini--x-mark" /> </svg> <span class="rtds-sr-only"> Chiudi la modale </span> </button> </div> <div class="rtds-dialog__content" tabindex="0"> <div class="rtds-social-links rtds-flex"> <ul class="rtds-flex rtds-items-center rtds-gap-2"> <li class="rtds-flex rtds-items-center"> <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-facebook rtds-link--lg"> <span class="rtds-sr-only">Condividi il contenuto su Facebook</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" 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-p-2 xl:rtds-p-1 rtds-text-social-instagram rtds-link--lg"> <span class="rtds-sr-only">Condividi il contenuto su Instagram</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" 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-p-2 xl:rtds-p-1 rtds-text-social-linkedin rtds-link--lg"> <span class="rtds-sr-only">Condividi il contenuto su LinkedIn</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#solid--linkedin" /> </svg> </a> </li> <li class="rtds-flex rtds-items-center"> <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-x rtds-link--lg"> <span class="rtds-sr-only">Condividi il contenuto su X</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#solid--x" /> </svg> </a> </li> <li class="rtds-flex rtds-items-center"> <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-youtube rtds-link--lg"> <span class="rtds-sr-only">Condividi il contenuto su YouTube</span> <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img"> <use href="../../icons.svg#solid--youtube" /> </svg> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="rtds-horizontal-divider rtds-border-b rtds-border-gray-03 rtds-mt-3 rtds-mb-4 "> </div> <div class="rtds-flex rtds-justify-end"> <div class="rtds-flex rtds-flex-wrap rtds-gap-3 md:rtds-gap-6"> <small class="rtds-text-sm md:rtds-text-base"> Aggiornato al: <time class="rtds-font-bold" datetime="2024-04-10">10.04.2024</time> </small> <small class="rtds-text-sm md:rtds-text-base"> Article ID: <strong>1964689348</strong> </small> </div> </div> </div> </div>

<div class="rtds-container rtds-pb-6 md:rtds-pb-12"> <div class="rtds-flex rtds-flex-col"> {% block share %} {% if share %} <div class="rtds-flex rtds-justify-end"> {% render '@button--icon-right', button, true %} {% render '@modal-share' %} </div> {% endif %} {% endblock share %} {% render '@horizontal-divider' %} <div class="rtds-flex rtds-justify-end"> <div class="rtds-flex rtds-flex-wrap rtds-gap-3 md:rtds-gap-6"> <small class="rtds-text-sm md:rtds-text-base"> Aggiornato al: <time class="rtds-font-bold" datetime="{{ date }}">{{ dateFormatted }}</time> </small> <small class="rtds-text-sm md:rtds-text-base"> Article ID: <strong>{{ articleId }}</strong> </small> </div> </div> </div> </div>

{ "button": { "classes": "rtds-btn--only-text", "icon": "mini--arrow-uturn-right", "iconSize": "rtds-w-4 rtds-h-4", "label": "Condividi l'evento", "callback": "openDialog('openModalShare', this)", "ariaHasPopup": "dialog", "ariaControls": "openModalShare", "ariaExpanded": true }, "date": "2024-04-10", "dateFormatted": "10.04.2024", "articleId": "1964689348", "share": true }

Componente utility ripetibile con riportata informazione di aggiornamento e pulsante di condivisione su social.

Comportamento

Il componente è renderizzato come <div class="rtds-container"> che include:

<button> (opzionale) — pulsante di condivisione che apre una modale social
Separatore orizzontale <hr>
<time datetime="..."> — data di aggiornamento con valore machine-readable
Testo semplice — Article ID

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

share (booleano, opzionale): Mostra il pulsante di condivisione e la modale social
button (oggetto, opzionale): Configurazione del pulsante di condivisione (passato a @button--icon-right)
date (stringa, obbligatorio): Valore machine-readable per l’attributo datetime dell’elemento <time> (es. 2025-05-30)
dateFormatted (stringa, obbligatorio): Data formattata visibile all’utente
articleId (stringa, obbligatorio): Identificatore dell’articolo

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

1.3.1 Informazioni e correlazioni — la data di aggiornamento è marcata con l’elemento semantico <time datetime="..."> per comunicarne il significato alle tecnologie assistive
1.3.3 Caratteristiche sensoriali — le informazioni (data, Article ID) non dipendono esclusivamente dalla posizione visuale

Struttura e semantica

<div> — wrapper presentazionale senza semantica propria
<time datetime="..."> — fornisce una versione machine-readable della data di aggiornamento; le tecnologie assistive possono usarla per comunicare la data in modo strutturato
<button> di condivisione (opzionale) — ruolo implicito button; il nome accessibile è fornito dal testo visibile e/o aria-label

<time datetime="..."> è letto con il testo visibile (es. “30 maggio 2025”); il valore machine-readable del datetime può essere usato dalle tecnologie assistive per formattare la data
Il testo visibile “Aggiornato al:” e l’ID articolo sono letti sequenzialmente come testo normale
Il <button> di condivisione (se presente) ha il proprio nome accessibile fornito dal testo visibile; l’icona decorativa ha aria-hidden="true" e viene ignorata

Esempi di utilizzo

<!-- Esempio base senza condivisione -->
<div class="rtds-container">
  <hr>
  <p>Aggiornato al: <time datetime="2025-05-30">30 maggio 2025</time></p>
  <p>Article ID: 12345</p>
</div>

<!-- Esempio con pulsante di condivisione -->
<div class="rtds-container">
  <button class="rtds-btn rtds-btn--outlined rtds-btn--icon-right">
    Condividi
    <svg class="rtds-icon" aria-hidden="true" focusable="false">
      <use href="#outline--share"></use>
    </svg>
  </button>
  <hr>
  <p>Aggiornato al: <time datetime="2025-05-30">30 maggio 2025</time></p>
  <p>Article ID: 12345</p>
</div>

Page updates information / share