chore: api add variants examples names

docs/come-iniziare/componente-base.md

@@ -7,6 +7,7 @@ title: Componente Base
 
 Secondo quanto descritto alla [pagina che spiega come modificare componenti]({{ site.baseurl }}/docs/come-iniziare/modificare-componenti/), di seguito è possibile analizzare il comportamento di un componente _base_ di esempio:
 
+{% comment %}Example name: Base {% endcomment %}
 {% capture example %}
 <span class="componente-base" data-value="Test Componente">componente base</span>
 {% endcapture %}{% include example.html content=example %}

docs/componenti/accordion.md

@@ -26,7 +26,7 @@ Tuttavia l'implementazione degli accordion va eseguita tenendo conto del contest
 
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
-{% comment %}Example name: Base, elementi richiudibili{% endcomment %}
+{% comment %}Example name: Base{% endcomment %}
 {% capture example %}
 
 <div class="accordion" id="collapseExample">

docs/componenti/affix.md

@@ -32,6 +32,7 @@ Un elemento Affix posizionato al lato del contenuto di pagina può essere ancora
 
 Per ancorare un elemento alla parte alta della pagina è sufficiente applicare la classe `.affix-parent` all'elemento che lo contiene e la classe `.affix-top` all'elemento stesso.
 
+{% comment %}Example name: Verticale in alto{% endcomment %}
 {% capture example %}
 
 <div class="affix-example container">
@@ -62,6 +63,7 @@ Per ancorare un elemento alla parte alta della pagina è sufficiente applicare l
 
 Per ancorare un elemento alla parte alta della pagina è sufficiente applicare la classe `.affix-parent` all'elemento che lo contiene e la classe `.affix-bottom` all'elemento stesso.
 
+{% comment %}Example name: Verticale in basso{% endcomment %}
 {% capture example %}
 
 <div class="affix-example container">
@@ -102,6 +104,7 @@ Un elemento Affix a sviluppo orizzontale può essere ancorato alla parte alta o
 
 Per ancorare un elemento a svliuppo orizzontale alla parte alta della pagina è sufficiente applicare la classe `.affix-parent` all'elemento che lo contiene e la classe `.affix-top` all'elemento stesso.
 
+{% comment %}Example name: Orizzontale in alto{% endcomment %}
 {% capture example %}
 
 <div class="affix-example container affix-parent">
@@ -119,6 +122,8 @@ Per ancorare un elemento a svliuppo orizzontale alla parte alta della pagina è
 ### Horizontal Affix bottom
 
 Per ancorare un elemento a sviluppo orizzontale alla parte inferiore della pagina è sufficiente applicare la classe `.affix-parent` all'elemento che lo contiene e la classe `.affix-bottom` all'elemento stesso.
+
+{% comment %}Example name: Orizzontale in basso{% endcomment %}
 {% capture example %}
 
 <div class="affix-example container affix-parent">

docs/componenti/alert.md

@@ -10,6 +10,7 @@ toc: true
 
 Gli avvisi sono disponibili in quattro tipologie diverse e sono adatti a qualsiasi lunghezza di testo. Inoltre possono prevedere un pulsante di chiusura utilizzando un pulsante con attributo `data-bs-dismiss="alert"`.
 
+{% comment %}Example name: Varianti per tipologia{% endcomment %}
 {% capture example %}
 {% assign colors = "info,success,warning,danger" | split: ','%}
 {% for color in colors %}
@@ -26,6 +27,7 @@ Gli avvisi sono disponibili in quattro tipologie diverse e sono adatti a qualsia
 
 Usa la classe `.alert-link` per dare risalto ad un link all'interno dell'alert.
 
+{% comment %}Example name: Link evidenziato{% endcomment %}
 {% capture example %}
 
 <div class="alert alert-danger" role="alert">
@@ -38,6 +40,7 @@ Usa la classe `.alert-link` per dare risalto ad un link all'interno dell'alert.
 
 I messaggi di avviso possono avere del contenuto HTML aggiuntivo come intestazioni, paragrafi e divisori.
 
+{% comment %}Example name: Contenuto aggiuntivo{% endcomment %}
 {% capture example %}
 
 <div class="alert alert-success" role="alert">
@@ -67,6 +70,7 @@ Ad esempio "chiudi nota", "chiudi", "nascondi", ecc.
 
 Clicca sul pulsante di chiusura per vedere la funzionalità di rimozione alert in azione:
 
+{% comment %}Example name: Pulsante di chiusura{% endcomment %}
 {% capture example %}
 
 <div class="alert alert-warning alert-dismissible fade show" role="alert">

docs/componenti/avatar.md

@@ -49,6 +49,7 @@ Per gli Avatar con icona inserire un testo alternativo: `<span class="visually-h
 
 L'Avatar ridimensiona automaticamente l'immagine adattandola al formato circolare e centrandola. Si consiglia in ogni caso di utilizzare immagini delle dimensioni corrette.
 
+{% comment %}Example name: Immagine{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap">
@@ -87,6 +88,7 @@ Oltre ai colori di default è possibile utilizzare uno sfondo a scelta fra:
 
 In questi casi il testo sarà di colore bianco.
 
+{% comment %}Example name: Testo{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap">
@@ -121,6 +123,7 @@ In questi casi il testo sarà di colore bianco.
 
 Per utilizzare un'icona all'interno degli Avatar è sufficiente includere il codice dell'icona prescelta dalla [libreria icone]({{ site.baseurl }}/docs/utilities/icone/) e indicarne il colore con una delle classi disponibili.
 
+{% comment %}Example name: Icona{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap">
@@ -155,6 +158,7 @@ Per utilizzare un'icona all'interno degli Avatar è sufficiente includere il cod
 
 Per associare un Avatar ad un'azione o un link, utilizzare il tag `<a>` con relativo link o chiamata JavaScript.
 
+{% comment %}Example name: Link{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap">
@@ -176,6 +180,7 @@ Per associare un Avatar ad un'azione o un link, utilizzare il tag `<a>` con rela
 
 È possibile associare un Tooltip con maggiori informazioni relative all'utente o all'azione associata utilizzando i <a href="{{ site.baseurl }}/docs/componenti/tooltip/">Tooltip di Bootstrap</a>.
 
+{% comment %}Example name: Link con tooltip{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap">
@@ -205,6 +210,7 @@ Utilizzando una <a href="{{ site.baseurl }}/docs/organizzare-i-contenuti/liste/#
 
 Lista verticale di Avatar di dimensione piccola con classe `.size-sm`.
 
+{% comment %}Example name: Gruppo, lista piccola{% endcomment %}
 {% capture example %}
 
 <div class="link-list-wrapper">
@@ -248,6 +254,7 @@ Lista verticale di Avatar di dimensione piccola con classe `.size-sm`.
 
 Lista verticale di Avatar di dimensione media con classe `.size-md`.
 
+{% comment %}Example name: Gruppo, lista media{% endcomment %}
 {% capture example %}
 
 <div class="link-list-wrapper">
@@ -295,6 +302,7 @@ Racchiudendo una serie di Avatar in una lista di tipo `<ul>` con classe `.avatar
 
 Gruppo di Avatar sovrapposti di dimensione piccola con classe `.size-sm`.
 
+{% comment %}Example name: Gruppo, sovrapposti piccoli{% endcomment %}
 {% capture example %}
 
 <ul class="avatar-group-stacked">
@@ -397,6 +405,7 @@ Gruppo di Avatar sovrapposti di dimensione piccola con classe `.size-sm`.
 
 Gruppo di Avatar sovrapposti di dimensione media con classe `.size-md`.
 
+{% comment %}Example name: Gruppo, sovrapposti medi{% endcomment %}
 {% capture example %}
 
 <ul class="avatar-group-stacked">
@@ -491,6 +500,7 @@ Inserendo un `<div>` con classe `.avatar-presence` all'interno dell'Avatar si ot
 
 Inserire un `<span>` riservato agli screen reader con indicazione della presenza dell'utente: `<span class="visually-hidden">Presenza: (stato presenza)</span>`.
 
+{% comment %}Example name: Con comportamento, presenza utente{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap mb-5">
@@ -576,6 +586,7 @@ Inserendo un `<div>` con classe `.avatar-status` all'interno dell'Avatar si otte
 Inserire un `<span>` riservato agli screen reader con indicazione dello stato dell'utenza: `<span class="visually-hidden">Stato: (stato utenza)</span>`
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
+{% comment %}Example name: Con comportamento, status utente{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap mb-5">
@@ -652,6 +663,7 @@ Per ottenere una versione più completa dell'Avatar con nome esteso ed eventuale
 
 Per il nome è possibile utilizzare i tag `<h3>` o `<h4>`. Il testo esteso può essere contenuto in un `<p>` o in un tag `<time>` nel caso di date/orari.
 
+{% comment %}Example name: Con testo aggiuntivo{% endcomment %}
 {% capture example %}
 
 <div class="d-flex align-items-center justify-content-start justify-content-md-around flex-wrap flex-sm-nowrap">

docs/componenti/badge.md

@@ -8,26 +8,21 @@ toc: true
 
 La grandezza di ogni badge si adatta come dimensione a quella del font (misurato in unità `em`) dell'elemento in cui è contenuto.
 
+{% comment %}Example name: Base{% endcomment %}
+{% capture example %}
 <div class="bd-example">
-<div class="h1">Titolo di esempio <span class="badge bg-secondary">New</span></div>
-<div class="h2">Titolo di esempio <span class="badge bg-secondary">New</span></div>
-<div class="h3">Titolo di esempio <span class="badge bg-secondary">New</span></div>
-<div class="h4">Titolo di esempio <span class="badge bg-secondary">New</span></div>
-<div class="h5">Titolo di esempio <span class="badge bg-secondary">New</span></div>
-<div class="h6">Titolo di esempio <span class="badge bg-secondary">New</span></div>
+<div class="h1">Titolo di esempio h1<span class="badge bg-secondary">New</span></div>
+<div class="h2">Titolo di esempio h2<span class="badge bg-secondary">New</span></div>
+<div class="h3">Titolo di esempio h3<span class="badge bg-secondary">New</span></div>
+<div class="h4">Titolo di esempio h4<span class="badge bg-secondary">New</span></div>
+<div class="h5">Titolo di esempio h5<span class="badge bg-secondary">New</span></div>
+<div class="h6">Titolo di esempio h6<span class="badge bg-secondary">New</span></div>
 </div>
-
-```html
-<h1>Titolo di esempio <span class="badge bg-secondary">New</span></h1>
-<h2>Titolo di esempio <span class="badge bg-secondary">New</span></h2>
-<h3>Titolo di esempio <span class="badge bg-secondary">New</span></h3>
-<h4>Titolo di esempio <span class="badge bg-secondary">New</span></h4>
-<h5>Titolo di esempio <span class="badge bg-secondary">New</span></h5>
-<h6>Titolo di esempio <span class="badge bg-secondary">New</span></h6>
-```
+{% endcapture %}{% include example.html content=example %}
 
 I badge possono essere utilizzati come parte di link o pulsanti per fornire un contatore.
 
+{% comment %}Example name: In pulsante{% endcomment %}
 {% capture example %}
 <button type="button" class="btn btn-primary">
 Notifiche <span class="badge neutral-2-bg text-secondary">4</span>
@@ -44,6 +39,7 @@ A meno che il contesto non sia chiaro (come con l'esempio "Notifiche", dove si c
 
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
+{% comment %}Example name: In pulsante, per screen reader{% endcomment %}
 {% capture example %}
 <button type="button" class="btn btn-primary">
 Profilo <span class="badge neutral-2-bg text-secondary">9</span>
@@ -55,6 +51,7 @@ Profilo <span class="badge neutral-2-bg text-secondary">9</span>
 
 Aggiungi una delle seguenti classi per modificare l'aspetto di un badge.
 
+{% comment %}Example name: Varianti di colore{% endcomment %}
 {% capture example %}
 {% for color in site.data.theme-colors %}
 <span class="badge bg-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
@@ -66,6 +63,7 @@ Aggiungi una delle seguenti classi per modificare l'aspetto di un badge.
 
 Per rendere i badge arrotondati puoi usare la classe `.rounded-pill`.
 
+{% comment %}Example name: Arrotondati{% endcomment %}
 {% capture example %}
 {% for color in site.data.theme-colors %}
 <span class="badge rounded-pill bg-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
@@ -75,6 +73,7 @@ Per rendere i badge arrotondati puoi usare la classe `.rounded-pill`.
 
 Se hai bisogno che un badge sia anche un link, aggiungi una delle classi contestuali `.badge-*` sull'elemento `<a>`. Di conseguenza anche gli stati **hover** e **focus** saranno attivi sul badge.
 
+{% comment %}Example name: Link{% endcomment %}
 {% capture example %}
 {% for color in site.data.theme-colors %}
 <a href="#" class="badge bg-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}

docs/componenti/buttons.md

@@ -143,7 +143,7 @@ La classe `.disabled` usa `pointer-events: none` per provare a disabilitare l'at
 
 Inoltre è possibile applicare un contorno cerchiato dell'icona utilizzando un contenitore con classe `.rounded-icon` da inserire all'interno della classe `.btn` con possibilità di personalizzazione del suo aspetto cromatico attraverso i modificatori `.rounded-*` e `.icon.icon-*`.
 
-{% comment %}Example name: Icona cerchiata{% endcomment %}
+{% comment %}Example name: Con icona, cerchiata{% endcomment %}
 {% capture example %}
 <button class="btn btn-success btn-lg btn-icon btn-me">
 <span class="rounded-icon">
@@ -188,23 +188,23 @@ Per ottenere pulsanti di dimensione più grande o più piccola, è sufficiente u
 
 #### Large
 
-{% comment %}Example name: Dimensione grande Large{% endcomment %}
+{% comment %}Example name: Dimensione grande{% endcomment %}
 {% capture example %}
 <button type="button" class="btn btn-primary btn-lg btn-me">Primary Large</button>
 <button type="button" class="btn btn-secondary btn-lg">Secondary Large</button>
 {% endcapture %}{% include example.html content=example %}
 
 #### Small
 
-{% comment %}Example name: Dimensione normale Small{% endcomment %}
+{% comment %}Example name: Dimensione normale{% endcomment %}
 {% capture example %}
 <button type="button" class="btn btn-primary btn-sm btn-me">Primary Small</button>
 <button type="button" class="btn btn-secondary btn-sm">Secondary Small</button>
 {% endcapture %}{% include example.html content=example %}
 
 #### Mini
 
-{% comment %}Example name: Dimensione minima Mini{% endcomment %}
+{% comment %}Example name: Dimensione minima{% endcomment %}
 {% capture example %}
 <button type="button" class="btn btn-primary btn-xs btn-me">Primary Mini</button>
 <button type="button" class="btn btn-secondary btn-xs">Secondary Mini</button>
@@ -225,7 +225,7 @@ Per creare pulsanti o gruppi di pulsanti a tutta larghezza, come i _block button
 
 In questo caso è stata implemenentata una variante responsive che visualizza i tasti a tutta larghezza e sovrapposti in mobile per poi affiancarli dl breakpoint `md` in su.
 
-{% comment %}Example name: A tutta larghezza solo su mobile{% endcomment %}
+{% comment %}Example name: A tutta larghezza, solo su mobile{% endcomment %}
 {% capture example %}
 
 <div class="d-grid gap-2 d-md-block">

docs/componenti/callout.md

@@ -21,6 +21,7 @@ Al titolo può essere aggiunta un'icona a scelta fra quelle disponibili, avendo
 Nel caso l'icona comunicasse visivamente contenuti non disponibili nel testo (ad esempio un allarme o una conferma) questa andrà affiancata da un testo riservato agli screen reader: `<span class="visually-hidden">Testo alternativo</span>`
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
+{% comment %}Example name: Testo{% endcomment %}
 {% capture example %}
 
 <div class="callout">
@@ -35,6 +36,7 @@ Al Callout può essere aggiunta una classe che determina il colore del bordo e d
 
 Aggiungere la classe `.success` per indicare una procedura andata a buon fine.
 
+{% comment %}Example name: Successo{% endcomment %}
 {% capture example %}
 
 <div class="callout success">
@@ -47,6 +49,7 @@ Aggiungere la classe `.success` per indicare una procedura andata a buon fine.
 
 Aggiungere la classe `.warning` per indicare una procedura o testo che richiede l'attenzione dell'utente.
 
+{% comment %}Example name: Attenzione{% endcomment %}
 {% capture example %}
 
 <div class="callout warning">
@@ -59,6 +62,7 @@ Aggiungere la classe `.warning` per indicare una procedura o testo che richiede
 
 Aggiungere la classe `.danger` per indicare un errore o una procedura pericolosa o non consentita.
 
+{% comment %}Example name: Pericolo o errore{% endcomment %}
 {% capture example %}
 
 <div class="callout danger">
@@ -71,6 +75,7 @@ Aggiungere la classe `.danger` per indicare un errore o una procedura pericolosa
 
 Aggiungere la classe `.important` per attirare ulteriormente l'attenzione.
 
+{% comment %}Example name: Importante{% endcomment %}
 {% capture example %}
 
 <div class="callout important">
@@ -83,6 +88,7 @@ Aggiungere la classe `.important` per attirare ulteriormente l'attenzione.
 
 Aggiungere la classe `.note` per caratterizzare il Callout come una nota.
 
+{% comment %}Example name: Nota{% endcomment %}
 {% capture example %}
 
 <div class="callout note">
@@ -97,8 +103,8 @@ Aggiungendo la classe `.callout-highlight` si ottiene una differente versione de
 
 Per aumentare la dimensione di un paragrafo contenuto nel Callout applicare la classe `.callout-big-text` allo stesso.
 
+{% comment %}Example name: Testo, in evidenza{% endcomment %}
 {% capture example %}
-
 <div class="callout callout-highlight">
   <div class="callout-title">Titolo callout</div>
   <p class="callout-big-text">Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit.</p>
@@ -108,6 +114,7 @@ Per aumentare la dimensione di un paragrafo contenuto nel Callout applicare la c
 
 ### Highlight Success
 
+{% comment %}Example name: Successo, in evidenza{% endcomment %}
 {% capture example %}
 
 <div class="callout callout-highlight success">
@@ -119,6 +126,7 @@ Per aumentare la dimensione di un paragrafo contenuto nel Callout applicare la c
 
 ### Highlight Warning
 
+{% comment %}Example name: Attenzione, in evidenza{% endcomment %}
 {% capture example %}
 
 <div class="callout callout-highlight warning">
@@ -130,6 +138,7 @@ Per aumentare la dimensione di un paragrafo contenuto nel Callout applicare la c
 
 ### Highlight Danger
 
+{% comment %}Example name: Periocolo o errore, in evidenza{% endcomment %}
 {% capture example %}
 
 <div class="callout callout-highlight danger">
@@ -141,6 +150,7 @@ Per aumentare la dimensione di un paragrafo contenuto nel Callout applicare la c
 
 ### Highlight Important
 
+{% comment %}Example name: Importante, in evidenza{% endcomment %}
 {% capture example %}
 
 <div class="callout callout-highlight important">
@@ -152,6 +162,7 @@ Per aumentare la dimensione di un paragrafo contenuto nel Callout applicare la c
 
 ### Highlight Note
 
+{% comment %}Example name: Nota, in evidenza{% endcomment %}
 {% capture example %}
 
 <div class="callout callout-highlight note">
@@ -169,6 +180,7 @@ Come da esempio, è possibile aggiungere ulteriore testo all'interno di un <a hr
 
 Il pulsante di controllo del Collapse può essere affiancato da un link per download di PDF o altri tipi di documento, con relativa icona.
 
+{% comment %}Example name: Approfondimento{% endcomment %}
 {% capture example %}
 
 <div class="callout callout-more note">