let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-button';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Bouton',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Button est un élément d'interaction essentiel permettant à l'utilisateur d'effectuer des actions dans l'interface. Il offre plusieurs variantes visuelles et états pour s'adapter à tous les contextes d'utilisation.

## Variantes disponibles

- **primary** : Action principale, attire l'attention
- **secondary** : Action secondaire, moins proéminente
- **tertiary** : Action tertiaire, discrète

## Fonctionnalités

- Support des icônes FontAwesome (gauche, droite ou seule)
- État de chargement avec loader intégré
- Mode icône seule pour actions compactes
- États disabled et hover
- Tailles configurables (small, medium, large)
- Attributs href et target pour comportement lien


[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/9055b6-bouton)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = true;
    const slottedLabel = 'label';
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else {
            if (key !== slottedLabel) {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
export const Primary = Template.bind({});
Primary.args = {
    variant: 'primary',
    label: 'Primary Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
    variant: 'secondary',
    label: 'Secondary Button',
};
export const Tertiary = Template.bind({});
Tertiary.args = {
    variant: 'tertiary',
    label: 'Tertiary Button',
};
export const WithIcon = Template.bind({});
WithIcon.args = {
    variant: 'primary',
    label: 'Button with icon',
    icon: 'fa-arrow-right',
    iconPosition: 'right',
};
export const WithLoader = Template.bind({});
WithLoader.args = {
    variant: 'primary',
    label: 'Button with icon',
    icon: 'fa-arrow-right',
    iconPosition: 'right',
    isLoading: true,
};
export const IconOnly = Template.bind({});
IconOnly.args = {
    variant: 'primary',
    isIconOnly: true,
    icon: 'fa-arrow-right',
    label: '',
};
Primary.parameters = {
    docs: {
        description: {
            story: `Bouton primary avec fond coloré. C'est le variant le plus proéminent, utilisé pour l'action principale d'une page ou d'un formulaire. Cas d'usage : soumettre un formulaire, confirmer une action importante, accéder à la fonctionnalité principale.`,
        },
    },
};
Secondary.parameters = {
    docs: {
        description: {
            story: `Bouton secondary avec bordure. Moins proéminent que le primary, idéal pour les actions secondaires. Cas d'usage : annuler, actions alternatives dans un formulaire, boutons d'action dans les modales.`,
        },
    },
};
Tertiary.parameters = {
    docs: {
        description: {
            story: `Bouton tertiary discret, style texte simple. Pour les actions peu prioritaires ou inline dans le contenu. Cas d'usage : liens d'action dans du texte, actions optionnelles, navigation secondaire.`,
        },
    },
};
WithIcon.parameters = {
    docs: {
        description: {
            story: `Bouton avec icône positionnée à droite (fa-arrow-right). L'icône renforce visuellement l'action et améliore la compréhension. Cas d'usage : navigation ("Suivant", "Continuer"), téléchargement, actions avec direction.`,
        },
    },
};
WithLoader.parameters = {
    docs: {
        description: {
            story: `Bouton avec état de chargement (isLoading). Le loader remplace l'icône pendant le traitement. Cas d'usage : soumission de formulaire asynchrone, appels API, actions nécessitant un feedback visuel d'attente.`,
        },
    },
};
IconOnly.parameters = {
    docs: {
        description: {
            story: `Bouton avec icône seule, sans texte (isIconOnly). Format compact pour les espaces restreints. Cas d'usage : actions dans toolbars, boutons de modification/suppression dans tableaux, actions répétitives où l'icône suffit à la compréhension.`,
        },
    },
};
