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-tag';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Tag',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Tag permet d'afficher des étiquettes visuelles pour catégoriser, labelliser ou indiquer le statut d'un élément. Compact et discret, il attire l'attention sur des informations clés sans surcharger l'interface.

## Variantes disponibles

- **default** : Tag par défaut avec fond gris clair
- **grey** : Variante grise neutre
- **blue** : Tag bleu pour informations générales
- **green** : Tag vert pour statuts positifs ou succès
- **orange** : Tag orange pour avertissements ou actions en attente
- **red** : Tag rouge pour erreurs ou statuts critiques
- **purple** : Tag violet pour catégories spécifiques

## Fonctionnalités

- Plusieurs variantes de couleur pour différents contextes
- Deux tailles disponibles (small, medium)

## Cas d'usage

- Affichage de statuts (en cours, validé, rejeté)
- Catégorisation de contenu (type de document, thématique)
- Labels informatifs dans cartes et listes
- Badges de notification ou compteurs

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/621ede-tag)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = true;
    const slottedLabel = 'content';
    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 Default = Template.bind({});
Default.args = {
    variant: 'default',
    size: 'small',
    content: 'Mon tag',
};
export const Grey = Template.bind({});
Grey.args = {
    variant: 'grey',
    size: 'small',
    content: 'Mon tag',
};
export const Blue = Template.bind({});
Blue.args = {
    variant: 'blue',
    size: 'small',
    content: 'Mon tag',
};
export const Green = Template.bind({});
Green.args = {
    variant: 'green',
    size: 'small',
    content: 'Mon tag',
};
export const Orange = Template.bind({});
Orange.args = {
    variant: 'orange',
    size: 'small',
    content: 'Mon tag',
};
export const Red = Template.bind({});
Red.args = {
    variant: 'red',
    size: 'small',
    content: 'Mon tag',
};
export const Purple = Template.bind({});
Purple.args = {
    variant: 'purple',
    size: 'small',
    content: 'Mon tag',
};
Default.parameters = {
    docs: {
        description: {
            story: `Tag par défaut avec fond gris clair. Utilisé pour des labels neutres ou génériques qui ne nécessitent pas de code couleur particulier.`,
        },
    },
};
Grey.parameters = {
    docs: {
        description: {
            story: `Tag gris neutre. Alternative au variant default, utilisé pour des informations secondaires ou contextuelles.`,
        },
    },
};
Blue.parameters = {
    docs: {
        description: {
            story: `Tag bleu pour informations générales. Cas d'usage : notifications informatives, catégories standards, labels d'aide.`,
        },
    },
};
Green.parameters = {
    docs: {
        description: {
            story: `Tag vert pour statuts positifs. Cas d'usage : validé, actif, succès, disponible, en ligne.`,
        },
    },
};
Orange.parameters = {
    docs: {
        description: {
            story: `Tag orange pour avertissements. Cas d'usage : en attente, à vérifier, attention requise, modéré.`,
        },
    },
};
Red.parameters = {
    docs: {
        description: {
            story: `Tag rouge pour erreurs ou statuts critiques. Cas d'usage : rejeté, erreur, inactif, urgent, expiré.`,
        },
    },
};
Purple.parameters = {
    docs: {
        description: {
            story: `Tag violet pour catégories spécifiques. Cas d'usage : nouveauté, premium, featured, catégorie spéciale.`,
        },
    },
};
