import{S as c}from"./Icons-B5XPY4E9.js";import{b as P}from"./Utilities-DayKp0i-.js";import"./index-D_tyJqW5.js";import"./iframe-B9oeq4ZS.js";import"./index-CfOrKyLd.js";import"./index-DrFu-skq.js";function V({disabilitato:e,isCompleta:t,allineaDestra:i,allineaSinistra:n,simpleLink:k,iconaSinistra:E,iconaDestra:L}){const R=[k?"btn btn-link":"btn btn-primary",t?"btn-success":"",i?"pull-right":"",n?"pull-left":""].filter(Boolean).join(" "),u=d(E),p=d(L,!0);return`
  <button type="submit" class="${R}" ${e?"disabled":""}>
${u?`${u}
`:""}Tasto
${p?`${p}
`:""}</button>`.trim()}function d(e,t=!1){if(!e||e==="none")return"";const i=O(e),n=F(e);return`
    <span class="${i} ${t?"right":""}" title = "${n}" > </span>`}function O(e){var t;return((t=c[e])==null?void 0:t.class)||""}function F(e){var t;return((t=c[e])==null?void 0:t.functionality)||""}function M(){return`
  
  <button disabled type="submit" class="btn btn-primary">Tasto</button>
  `}function $(){return`
  
  <button type="submit" class="btn btn-primary btn-success">Tasto</button>
  `}function H(){return`
  
  <button type="submit" class="btn btn-primary pull-right">Tasto</button>
  `}function N(){return`
  
  <button type="submit" class="btn btn-primary pull-left">Tasto</button>
  `}const j=`I tasti possono essere allineati sia a sinistra che a destra.
Ogni tasto presenta un nome che esplicita la sua funzionalità.
Adiacente ad un tasto può essere presente un'indicazione di testo.

Nel caso in cui a seguito del click su un tasto si preveda un tempo lungo di caricamento, si indica di:
- utilizzare le icone di caricamento riportate all'interno della pagina [Componenti>Box e Tab](?path=/story/components-box-e-tab-rotella-di-caricamento--loading)
- disattivare il tasto per evitare ulteriori click. `,U=`**PANORAMICA**  
- **Descrizione generale**: Il componente Button rappresenta un elemento interattivo che consente agli utenti di eseguire azioni o triggerare eventi all'interno di un'interfaccia web.
- **Funzionalità principali**: Offre un'ampia gamma di varianti stilistiche e dimensioni per adattarsi a diversi contesti d'uso, garantendo coerenza e accessibilità.

**CASO D'USO**  
- **Scenari di utilizzo principali**: Utilizzato per inviare moduli, avviare processi, navigare tra pagine o eseguire qualsiasi azione definita dall'applicazione.
- **Contesto di implementazione consigliato**: Ideale in qualsiasi punto dell'interfaccia dove è richiesta un'interazione utente per eseguire un'azione specifica.
- **Posizionamento ideale nell'interfaccia**: Può essere posizionato in moduli, toolbar, dialoghi o come call-to-action prominente nelle pagine.

**CARATTERISTICHE PRINCIPALI**  
- **Funzionalità chiave**:
  - Supporto per varianti di stile: primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Dimensioni personalizzabili: piccolo, medio, grande.
  - Stato disabilitato per indicare azioni non disponibili.
- **Aspetti tecnici rilevanti**: Implementato utilizzando l'elemento \`<button>\` o \`<a>\` con ruoli e attributi appropriati per garantire l'accessibilità.
- **Caratteristiche di accessibilità**: Progettato per essere completamente navigabile tramite tastiera e compatibile con screen reader, includendo attributi ARIA quando necessario.

**VARIANTI**  
- **Elenco e descrizione delle varianti disponibili**:
  - Stili: primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Dimensioni: piccolo, medio, grande.
- **Casi d'uso specifici per ogni variante**:
  - Stili diversi per indicare l'importanza o la natura dell'azione.
  - Dimensioni diverse per adattarsi a spazi specifici nell'interfaccia.

**PROPRIETÀ**  
- **Proprietà configurabili**:
  - \`type\`: specifica il tipo di pulsante (\`button\`, \`submit\`, \`reset\`).
  - \`disabled\`: disabilita l'interazione con il pulsante.
  - \`aria-label\`: fornisce un'etichetta accessibile per il pulsante.
- **Parametri disponibili**: Possibilità di aggiungere attributi personalizzati per estendere la funzionalità.
- **Attributi per l'accessibilità**: Utilizzo di \`aria-label\` o \`aria-labelledby\` per descrivere l'azione del pulsante.

**DETTAGLI DI IMPLEMENTAZIONE**  
- **Struttura HTML**: Il pulsante è rappresentato da un elemento \`<button>\` o \`<a>\` con classi specifiche per lo stile e attributi per l'accessibilità.
- **Stile e CSS utilizzati**: Utilizza classi CSS per gestire il layout e l'aspetto, garantendo coerenza con il design system.
- **Variabili CSS disponibili e loro funzione**:
  - \`--btn-padding\`: padding interno del pulsante.
  - \`--btn-font-size\`: dimensione del testo del pulsante.
  - \`--btn-border-radius\`: raggio dei bordi del pulsante.
  - \`--btn-background-color\`: colore di sfondo del pulsante.
  - \`--btn-text-color\`: colore del testo del pulsante.

**BEST PRACTICES**  
- **Raccomandazioni d'uso**:
  - Utilizzare etichette chiare e concise che descrivano l'azione del pulsante.
  - Assicurarsi che il pulsante sia facilmente identificabile e distinguibile dagli altri elementi.
- **Linee guida implementative**: Evitare di utilizzare pulsanti per navigare tra pagine; preferire link per la navigazione.
- **Pratiche da evitare**: Evitare di utilizzare pulsanti senza etichette o con etichette ambigue.

**LINEE GUIDA PER L'ACCESSIBILITÀ**  
- **Requisiti di accessibilità**: Assicurarsi che il pulsante sia navigabile tramite tastiera e che abbia un'etichetta descrittiva.
- **Supporto tastiera**: Il pulsante deve essere attivabile tramite la barra spaziatrice o Invio.
- **Configurazione screen reader**: Utilizzare attributi ARIA per fornire informazioni sul contesto e la funzione del pulsante.

**COMPONENTI CORRELATI**  
- **Componenti associati**: Button Group, Toolbar, Icon Button.
- **Relazioni con altri elementi**: Spesso utilizzato all'interno di moduli, dialoghi o come call-to-action nelle pagine.
`,J={title:"Componenti/Buttons",render:e=>{const t=V(e);var i=document.createElement("div");i.innerHTML=t;const n=i.querySelector("button");return n&&n.addEventListener("click",e.onClick),n||""},decorators:[(e,t)=>P(e,t,1,["static-webkit/js/custom-webkit.js"],!1),e=>`<main id="contenutoPrincipale">${e()}</main>`],parameters:{docs:{description:{component:U},mdxPage:j}}},a={name:"Tasto",argTypes:{onClick:{action:"onClick",description:"Evento al click del button."},disabilitato:{control:"boolean",description:"Disabilita il button",table:{defaultValue:{summary:"False"}}},isCompleta:{control:"boolean",description:"Mostra lo stile del button Completa",table:{defaultValue:{summary:"False"}}},allineaDestra:{control:"boolean",description:"Allinea il button a destra.",table:{defaultValue:{summary:"False"}}},allineaSinistra:{control:"boolean",description:"Allinea il button a sinistra.",table:{defaultValue:{summary:"False"}}},simpleLink:{control:"boolean",description:"Mostra lo stile link per il button",table:{defaultValue:{summary:"False"}}},iconaSinistra:{control:{type:"select"},options:[...Object.keys(c),"none"],description:"Icona prima del button",table:{defaultValue:{summary:"-"}}},iconaDestra:{control:{type:"select"},options:[...Object.keys(c),"none"],description:"Icona dopo il button",table:{defaultValue:{summary:"-"}}}},args:{disabilitato:!1,isCompleta:!1,allineaDestra:!1,allineaSinistra:!1,simpleLink:!1,iconaSinistra:"",iconaDestra:""}},o={name:"Tasto disabilitato",render:()=>M()},r={name:"Tasto completa",render:()=>$()},s={name:"Tasto allineato a sinistra",render:()=>N()},l={name:"Tasto allineato a destra:",render:()=>H()};var m,b,f;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{
  name: "Tasto",
  argTypes: {
    onClick: {
      action: "onClick",
      description: "Evento al click del button."
    },
    disabilitato: {
      control: "boolean",
      description: "Disabilita il button",
      table: {
        defaultValue: {
          summary: "False"
        }
      }
    },
    isCompleta: {
      control: "boolean",
      description: "Mostra lo stile del button Completa",
      table: {
        defaultValue: {
          summary: "False"
        }
      }
    },
    allineaDestra: {
      control: "boolean",
      description: "Allinea il button a destra.",
      table: {
        defaultValue: {
          summary: "False"
        }
      }
    },
    allineaSinistra: {
      control: "boolean",
      description: "Allinea il button a sinistra.",
      table: {
        defaultValue: {
          summary: "False"
        }
      }
    },
    simpleLink: {
      control: "boolean",
      description: "Mostra lo stile link per il button",
      table: {
        defaultValue: {
          summary: "False"
        }
      }
    },
    iconaSinistra: {
      control: {
        type: "select"
      },
      options: [...Object.keys(ShowIcons), "none"],
      description: "Icona prima del button",
      table: {
        defaultValue: {
          summary: "-"
        }
      }
    },
    iconaDestra: {
      control: {
        type: "select"
      },
      options: [...Object.keys(ShowIcons), "none"],
      description: "Icona dopo il button",
      table: {
        defaultValue: {
          summary: "-"
        }
      }
    }
  },
  args: {
    disabilitato: false,
    isCompleta: false,
    allineaDestra: false,
    allineaSinistra: false,
    simpleLink: false,
    iconaSinistra: "",
    iconaDestra: ""
  }
}`,...(f=(b=a.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};var g,z,v;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:`{
  name: "Tasto disabilitato",
  render: () => {
    return createButtonDisabled();
  }
}`,...(v=(z=o.parameters)==null?void 0:z.docs)==null?void 0:v.source}}};var y,I,S;r.parameters={...r.parameters,docs:{...(y=r.parameters)==null?void 0:y.docs,source:{originalSource:`{
  name: "Tasto completa",
  render: () => {
    return createButtonCompleta();
  }
}`,...(S=(I=r.parameters)==null?void 0:I.docs)==null?void 0:S.source}}};var C,T,h;s.parameters={...s.parameters,docs:{...(C=s.parameters)==null?void 0:C.docs,source:{originalSource:`{
  name: "Tasto allineato a sinistra",
  render: () => {
    return createButtonLeft();
  }
}`,...(h=(T=s.parameters)==null?void 0:T.docs)==null?void 0:h.source}}};var B,A,D;l.parameters={...l.parameters,docs:{...(B=l.parameters)==null?void 0:B.docs,source:{originalSource:`{
  name: "Tasto allineato a destra:",
  render: () => {
    return createButtonRight();
  }
}`,...(D=(A=l.parameters)==null?void 0:A.docs)==null?void 0:D.source}}};const K=["Button","ButtonDisablitato","ButtonCompleta","ButtonLeft","ButtonRight"];export{a as Button,r as ButtonCompleta,o as ButtonDisablitato,s as ButtonLeft,l as ButtonRight,K as __namedExportsOrder,J as default};
