Regione Toscana Design System

Accordion Smart - Servizi 

<div class="rtds-accordion rtds-accordion--smart rtds-gap-0">

    <div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
        <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
                <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
                    <button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-1" id="accordion1id">
                        <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                            <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-up" />
                            </svg>

                        </span>
                        <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
                            Titolo panel
                        </span>
                    </button>
                </h3>
            </div>

            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
                <span class="rtds-chip rtds-chip--status is-in-progress">
                    <span class="rtds-sr-only">Da pagare</span>

                    Da pagare</span>
                <span class="rtds-chip rtds-chip--category">
                    <span class="rtds-sr-only">Stato</span>

                    Stato</span>
                <div class="rtds-flex rtds-items-center rtds-gap-2">
                    <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--pencil-square" />
                        </svg>
                        <span class="rtds-sr-only">

                            Visualizza dettagli
                        </span>

                    </button>

                </div>
            </div>
        </div>

        <div id="accordionSection-1" role="region" aria-labelledby="accordion1id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
            Content
        </div>
    </div>

    <div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
        <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
                <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
                    <button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-2" id="accordion2id">
                        <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                            <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-up" />
                            </svg>

                        </span>
                        <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
                            Titolo panel
                        </span>
                    </button>
                </h3>
            </div>

            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
                <span class="rtds-chip rtds-chip--status is-in-progress">
                    <span class="rtds-sr-only">Da pagare</span>

                    Da pagare</span>
                <span class="rtds-chip rtds-chip--category">
                    <span class="rtds-sr-only">Stato</span>

                    Stato</span>
                <div class="rtds-flex rtds-items-center rtds-gap-2">
                    <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--pencil-square" />
                        </svg>
                        <span class="rtds-sr-only">

                            Visualizza dettagli
                        </span>

                    </button>

                </div>
            </div>
        </div>

        <div id="accordionSection-2" role="region" aria-labelledby="accordion2id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
            Content
        </div>
    </div>

    <div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
        <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
                <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
                    <button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-3" id="accordion3id">
                        <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                            <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-up" />
                            </svg>

                        </span>
                        <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
                            Titolo panel
                        </span>
                    </button>
                </h3>
            </div>

            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
                <span class="rtds-chip rtds-chip--status is-in-progress">
                    <span class="rtds-sr-only">Da pagare</span>

                    Da pagare</span>
                <span class="rtds-chip rtds-chip--category">
                    <span class="rtds-sr-only">Stato</span>

                    Stato</span>
                <div class="rtds-flex rtds-items-center rtds-gap-2">
                    <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--pencil-square" />
                        </svg>
                        <span class="rtds-sr-only">

                            Visualizza dettagli
                        </span>

                    </button>

                </div>
            </div>
        </div>

        <div id="accordionSection-3" role="region" aria-labelledby="accordion3id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
            Content
        </div>
    </div>

    <div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
        <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
                <h3 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-text-base rtds-content-01">
                    <button type="button" aria-expanded="false" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary" aria-controls="accordionSection-4" id="accordion4id">
                        <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                            <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-up" />
                            </svg>

                        </span>
                        <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
                            Titolo panel
                        </span>
                    </button>
                </h3>
            </div>

            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
                <span class="rtds-chip rtds-chip--status is-in-progress">
                    <span class="rtds-sr-only">Da pagare</span>

                    Da pagare</span>
                <span class="rtds-chip rtds-chip--category">
                    <span class="rtds-sr-only">Stato</span>

                    Stato</span>
                <div class="rtds-flex rtds-items-center rtds-gap-2">
                    <button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#solid--pencil-square" />
                        </svg>
                        <span class="rtds-sr-only">

                            Visualizza dettagli
                        </span>

                    </button>

                </div>
            </div>
        </div>

        <div id="accordionSection-4" role="region" aria-labelledby="accordion4id" class="rtds-accordion__pane rtds-transition-all rtds-pb-4 rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6" hidden>
            Content
        </div>
    </div>

</div>
 
<div{% if idSection %} id="accordionSection{{ idSection }}"{% endif %} class="rtds-accordion rtds-accordion--smart{% if spacingClasses %} {{ spacingClasses }}{% endif %}{% if classes %} {{ classes }}{% endif %}">
    {% for panel in panels %}
    <div class="rtds-accordion__item rtds-border-b rtds-border-gray-01 rtds-py-3">
        <div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2 rtds-pr-3">
            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
                <h3 class="rtds-accordion__title rtds-flex rtds-font-bold{% if titleSpacingClasses %} {{ titleSpacingClasses }}{% endif %}{% if panelTitleFont %} {{ panelTitleFont }}{% endif %}{% if panelTitleClasses %} {{ panelTitleClasses }}{% endif %}">
                    <button type="button" 
                            aria-expanded="{% if panel.isOpen %}true{% else %}false{% endif %}" 
                            class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-text-left rtds-flex-1 rtds-transition-all rtds-p-1 rtds-content-primary{% if triggerClasses %} {{ triggerClasses }}{% endif %}" 
                            aria-controls="accordionSection-{{ loop.index }}" 
                            id="accordion{{ loop.index }}id">
                        <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all{% if iconClasses %} {{ iconClasses }} {% endif %}">
                            {% render '@icon', {id: showMoreIcon, size: iconSize, classes: 'rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180'}, true %}
                        </span>
                        <span class="rtds-accordion__trigger-label rtds-content-01 rtds-flex rtds-items-center rtds-flex-1 rtds-min-w-0 rtds-text-base lg:rtds-text-lg">
                            {{ panel.label | safe }}
                        </span>
                    </button>
                </h3>
            </div>
            
            <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-ml-auto rtds-justify-end">
                {% render '@chip--status-in-corso',{icon: none, srLabel: "Da pagare", label: "Da pagare"}, true %}
                {% render '@chip--category',{icon: none, srLabel: "Stato", label: "Stato"}, true %}
                <div class="rtds-flex rtds-items-center rtds-gap-2">
                    {% render '@button--icon', {
                        classes: "rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03",
                        icon: "solid--pencil-square",
                        label: "Visualizza dettagli"
                        }, true %}
                </div>
            </div>
        </div>
        
        <div id="accordionSection-{{ loop.index }}" 
             role="region" 
             aria-labelledby="accordion{{ loop.index }}id" 
             class="rtds-accordion__pane rtds-transition-all{% if panelContentSpacing %} {{ panelContentSpacing }}{% endif %}{% if panelContentClasses %} {{ panelContentClasses }}{% endif %} rtds-pl-6 sm:rtds-pl-8 md:rtds-pl-10 rtds-pr-4 md:rtds-pr-6"{% if not panel.isOpen %} hidden{% endif %}>
            {{ panel.text | safe }}
        </div>
    </div>
    {% endfor %}
</div>
 
{
  "panelTitleClasses": "rtds-content-01",
  "panelTitleFont": "rtds-text-base",
  "spacingClasses": "rtds-gap-0",
  "panelContentSpacing": "rtds-pb-4",
  "iconSize": "rtds-w-6 rtds-h-6",
  "showMoreIcon": "mini--chevron-up",
  "panels": [
    {
      "label": "Titolo panel",
      "text": "Content"
    },
    {
      "label": "Titolo panel",
      "text": "Content"
    },
    {
      "label": "Titolo panel",
      "text": "Content"
    },
    {
      "label": "Titolo panel",
      "text": "Content"
    }
  ]
}

Componente Accordion Smart - Servizi

Introduzione

Il componente Accordion Smart è una versione specializzata dell’accordion standard, progettata specificamente per applicazioni di servizi digitali. Questo componente estende il sistema base dell’accordion con layout avanzati, controlli integrati e funzionalità specifiche per la gestione di pratiche, istanze e documenti.

L’Accordion Smart è stato spostato dalla sezione generale accordion alla sezione servizi per una migliore organizzazione e specializzazione funzionale.

Architettura e Ereditarietà

L’Accordion Smart utilizza:

  • Le stesse funzionalità JavaScript dell’accordion base
  • Sistema di classi CSS condiviso (rtds-accordion--smart)
  • Pattern di accessibilità ARIA consolidati
  • Struttura markup estesa con controlli aggiuntivi

Caratteristiche Principali

Layout Specializzato

  • Header Complesso: Combina titolo, chip di stato e azioni
  • Contenuto Strutturato: Sezioni con metadati e informazioni dettagliate
  • Controlli Integrati: Pulsanti di azione e menu contestuali
  • Design Responsivo: Adattamento ottimale per desktop e mobile

Componenti Integrati

  • Chip di Stato: Indicatori visivi per stato pratiche (@chip--status-in-corso, @chip--category)
  • Pulsanti Azione: Controlli per visualizzazione dettagli (@button--icon)
  • Layout Flessibile: Sistema di grid e flexbox per disposizione elementi

Accessibilità Avanzata

  • ARIA Completo: Tutti gli attributi necessari per screen reader
  • Navigazione Tastiera: Focus management ottimizzato
  • Etichette Semantiche: Descrizioni contestuali per ogni elemento
  • Controlli Associati: Relazioni corrette tra trigger e contenuto

Struttura Template

Header Section

<div class="rtds-flex rtds-items-center rtds-justify-between rtds-gap-2">
  <!-- Titolo e controllo accordion -->
  <div class="rtds-flex rtds-items-center rtds-gap-2 rtds-flex-1">
    <h3 class="rtds-accordion__title">
      <button class="rtds-accordion__trigger">
        <span class="rtds-accordion__icon"><!-- Icona espansione --></span>
        <span class="rtds-accordion__trigger-label"><!-- Titolo --></span>
      </button>
    </h3>
  </div>
  
  <!-- Controlli e azioni -->
  <div class="rtds-flex rtds-items-center rtds-gap-2">
    <!-- Chip di stato -->
    <!-- Pulsanti azione -->
  </div>
</div>

Content Section

<div class="rtds-accordion__pane">
  <!-- Contenuto principale -->
  <!-- Metadati strutturati -->
  <!-- Informazioni aggiuntive -->
</div>

Parametri di Configurazione

Parametri Base

  • idSection (numero, opzionale): ID numerico per sezioni multiple
  • classes (stringa, opzionale): Classi CSS aggiuntive
  • spacingClasses (stringa, opzionale): Classi per lo spaziamento (default: rtds-gap-0)
  • panelContentSpacing (stringa, opzionale): Spaziamento contenuto (default: rtds-pb-4)

Parametri Pannelli

  • panels (array, obbligatorio): Lista dei pannelli
    • label (stringa, obbligatorio): Titolo del pannello (es. “Istanza #12345 - Nome Soggetto”)
    • text (stringa, obbligatorio): Contenuto HTML strutturato
    • isOpen (booleano, opzionale): Stato iniziale del pannello

Parametri Stile

  • panelTitleClasses (stringa, opzionale): Classi per titoli (default: rtds-content-01)
  • panelTitleFont (stringa, opzionale): Font titoli (default: rtds-text-base)
  • triggerClasses (stringa, opzionale): Classi per trigger button
  • iconClasses (stringa, opzionale): Classi per icone

Parametri Icone

  • showMoreIcon (stringa, opzionale): ID icona espansione (default: mini--chevron-up)
  • iconSize (stringa, opzionale): Dimensioni icona (default: rtds-w-6 rtds-h-6)

Varianti Disponibili

Default

Configurazione base per gestione istanze e pratiche generiche.

Caratteristiche:

  • Layout standard con chip di stato
  • Contenuto con metadati autore e date
  • Pulsanti di azione integrati

Pagamenti

Specializzata per la gestione di pagamenti e transazioni.

Caratteristiche:

  • Informazioni importo e scadenze
  • Codici IUV e ricevute
  • Stati pagamento specifici

Notifiche

Ottimizzata per notifiche di sistema e comunicazioni.

Caratteristiche:

  • Indicatori temporali prominenti
  • Informazioni mittente e ufficio
  • Layout per messaggi urgenti

Stili CSS Specializzati

Classi Base

.rtds-accordion--smart {
  /* Stili specifici per accordion smart */
  gap: 0; /* Nessun gap tra elementi */
}

.rtds-accordion--smart .rtds-accordion__item {
  border-bottom: 1px solid var(--color-gray-01);
  padding: 0.75rem 0;
}

.rtds-accordion--smart .rtds-accordion__pane {
  padding-left: 1.5rem; /* sm:2rem md:2.5rem */
  padding-right: 1rem;   /* md:1.5rem */
}

Layout Responsivo

  • Mobile First: Stack verticale degli elementi
  • Tablet+: Layout orizzontale con spazi ottimizzati
  • Desktop: Disposizione completa con tutti i controlli visibili

JavaScript e Interattività

Integrazione con Sistema Base

L’Accordion Smart utilizza la stessa logica JavaScript dell’accordion standard:

// Auto-inizializzazione
document.querySelectorAll('.rtds-accordion__title').forEach((accordionEl) => {
  accordions.set(accordionEl, new Accordion(accordionEl));
});

Gestione Stati ARIA

  • aria-expanded: Stato espansione pannello
  • aria-controls: Associazione trigger-contenuto
  • aria-labelledby: Etichettatura semantica
  • role="region": Identificazione area contenuto

Esempi di Utilizzo

Best Practices di Implementazione

1. Strutturazione Contenuto

  • Utilizzare HTML semantico nel campo text
  • Includere metadati strutturati
  • Mantenere coerenza nelle etichette

2. Gestione Stati

  • Definire stati iniziali appropriati
  • Utilizzare chip di stato coerenti
  • Implementare feedback visivo chiaro

3. Accessibilità

  • Fornire etichette descrittive
  • Mantenere relazioni ARIA corrette
  • Testare con screen reader

4. Performance

  • Limitare il numero di pannelli per pagina
  • Utilizzare lazy loading per contenuti pesanti
  • Ottimizzare animazioni CSS

Documentazione aggiornata per la versione corrente del Design System RT-UI-Kit