npm - @spw-ds/spw-stencil-library - Versions diffs - 1.3.0 → 1.3.2 - Mend

@spw-ds/spw-stencil-library 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (782) hide show

package/dist/collection/stories/components/spw-skeleton/spw-skeleton.stories.js CHANGED Viewed

@@ -20,7 +20,28 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Affiche un aperçu de votre contenu avant le chargement des données pour réduire la frustration liée au temps de chargement.
+Le composant Skeleton affiche un aperçu animé du contenu avant son chargement complet. Il améliore l'expérience utilisateur en réduisant la frustration liée aux temps d'attente et donne une indication visuelle de la structure à venir.
+## Variantes disponibles
+- **text** : Lignes de texte avec variations de largeur
+- **article** : Bloc article avec titre et paragraphes
+- **layout** : Structure de page complète avec zones définies
+## Fonctionnalités
+- Animation de pulsation (shimmer effect)
+- Nombre de blocs configurable
+- Hauteur personnalisable
+- Intégrable dans cartes, listes et grilles
+- Adaptation automatique à la largeur du conteneur
+## Cas d'usage
+- Chargement de listes d'articles ou actualités
+- Aperçu de cartes avant rendu du contenu
+- Placeholder pour images en cours de chargement
+- États de chargement de pages entières
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/54b742-squelette)
         `,
@@ -106,10 +127,38 @@ VarianteLayout.args = {
 };
 // Story pour toutes les variantes ensemble
 export const VarianteMosaique = VariantsTemplate.bind({});
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Skeleton par défaut avec 3 blocs. Version générique adaptable à différents types de contenu. Cas d'usage : placeholder simple, chargement de contenu court.`,
+        },
+    },
+};
+VarianteTexte.parameters = {
+    docs: {
+        description: {
+            story: `Skeleton variant text avec 5 lignes de texte. Largeurs variables pour simuler du texte naturel. Cas d'usage : chargement de paragraphes, aperçu de contenu textuel, descriptions.`,
+        },
+    },
+};
+VarianteArticle.parameters = {
+    docs: {
+        description: {
+            story: `Skeleton variant article avec structure titre + contenu. Simule un bloc article complet. Cas d'usage : chargement d'articles de blog, actualités, contenus éditoriaux.`,
+        },
+    },
+};
+VarianteLayout.parameters = {
+    docs: {
+        description: {
+            story: `Skeleton variant layout avec structure de page complète. Blocs multiples simulant header, sidebar et content. Cas d'usage : chargement de pages entières, dashboards, interfaces complexes.`,
+        },
+    },
+};
 VarianteMosaique.parameters = {
     docs: {
         description: {
-            story: "Il est également possible d'intégrer le composant dans une mosaïque pour afficher plusieurs squelettes sous forme de cartes.",
+            story: `Skeleton intégré dans une mosaïque de cartes. Démontre l'utilisation dans un contexte réel avec spw-mosaic et spw-card. Cas d'usage : galeries d'actualités, listes de produits, grilles de contenus à charger.`,
         },
     },
 };

package/dist/collection/stories/components/spw-skeleton/spw-skeleton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-skeleton.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-skeleton/spw-skeleton.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;;;SAMV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC;IACtB,MAAM,YAAY,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,wCAAwC;AACxC,MAAM,gBAAgB,GAAY,GAAG,EAAE;IACrC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;GAwBhC,CAAC;IACF,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,mBAAmB;AACnB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,+BAA+B;AAC/B,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,gCAAgC;AAChC,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,QAAQ;CAClB,CAAC;AAEF,2CAA2C;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;~~AAC1D~~,gBAAgB,CAAC,UAAU,GAAG;IAC5B,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,~~8HAA8H~~;~~SACtI~~;KACF;CACF,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-skeleton';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Squelette (skeleton)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\~~nAffiche~~ un aperçu de ~~votre~~ contenu avant le chargement ~~des~~ ~~données~~ ~~pour~~ ~~réduire~~ la frustration liée au temps de ~~chargement~~.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/54b742-squelette)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML / `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = false;\n const slottedLabel = 'label';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\n// Template pour les variantes complexes\nconst VariantsTemplate: StoryFn = () => {\n const container = document.createElement('div');\n container.innerHTML = / HTML */ `\n <spw-mosaic is-masonry=\"true\" cols-desktop=\"3\" cols-tablet=\"2\" cols-mobile=\"1\">\n <spw-mosaic-item>\n <spw-card full-height=\"true\">\n <spw-card-content>\n <spw-skeleton blocks=\"8\" variant=\"article\"></spw-skeleton>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\">\n <spw-card-content>\n <spw-skeleton blocks=\"8\" variant=\"article\"></spw-skeleton>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\">\n <spw-card-content>\n <spw-skeleton blocks=\"8\" variant=\"article\"></spw-skeleton>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n </spw-mosaic>\n `;\n return container;\n};\n\n// Story par défaut\nexport const Default = Template.bind({});\nDefault.args = {\n blocks: 3,\n};\n\n// Story pour la variante texte\nexport const VarianteTexte = Template.bind({});\nVarianteTexte.args = {\n blocks: 5,\n variant: 'text',\n};\n\n// Story pour la variante article\nexport const VarianteArticle = Template.bind({});\nVarianteArticle.args = {\n blocks: 6,\n variant: 'article',\n};\n\n// Story pour la variante layout\nexport const VarianteLayout = Template.bind({});\nVarianteLayout.args = {\n blocks: 8,\n variant: 'layout',\n};\n\n// Story pour toutes les variantes ensemble\nexport const VarianteMosaique = VariantsTemplate.bind({});\~~nVarianteMosaique~~.parameters = {\n docs: {\n description: {\n story: \~~"Il~~ ~~est~~ ~~également~~ ~~possible~~ d'~~intégrer~~ le ~~composant~~ dans une mosaïque ~~pour~~ ~~afficher~~ ~~plusieurs~~ ~~squelettes~~ ~~sous~~ ~~forme~~ de ~~cartes.\",\~~n },\n },\n};\n"]}
1	+ {"version":3,"file":"spw-skeleton.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-skeleton/spw-skeleton.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-skeleton';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Squelette (skeleton)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Skeleton affiche un aperçu animé du contenu avant son chargement complet. Il améliore l'expérience utilisateur en réduisant la frustration liée aux temps d'attente et donne une indication visuelle de la structure à venir.\n\n## Variantes disponibles\n\n- text : Lignes de texte avec variations de largeur\n- article : Bloc article avec titre et paragraphes\n- layout : Structure de page complète avec zones définies\n\n## Fonctionnalités\n\n- Animation de pulsation (shimmer effect)\n- Nombre de blocs configurable\n- Hauteur personnalisable\n- Intégrable dans cartes, listes et grilles\n- Adaptation automatique à la largeur du conteneur\n\n## Cas d'usage\n\n- Chargement de listes d'articles ou actualités\n- Aperçu de cartes avant rendu du contenu\n- Placeholder pour images en cours de chargement\n- États de chargement de pages entières\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/54b742-squelette)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML / `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = false;\n const slottedLabel = 'label';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\n// Template pour les variantes complexes\nconst VariantsTemplate: StoryFn = () => {\n const container = document.createElement('div');\n container.innerHTML = / HTML */ `\n <spw-mosaic is-masonry=\"true\" cols-desktop=\"3\" cols-tablet=\"2\" cols-mobile=\"1\">\n <spw-mosaic-item>\n <spw-card full-height=\"true\">\n <spw-card-content>\n <spw-skeleton blocks=\"8\" variant=\"article\"></spw-skeleton>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\">\n <spw-card-content>\n <spw-skeleton blocks=\"8\" variant=\"article\"></spw-skeleton>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\">\n <spw-card-content>\n <spw-skeleton blocks=\"8\" variant=\"article\"></spw-skeleton>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n </spw-mosaic>\n `;\n return container;\n};\n\n// Story par défaut\nexport const Default = Template.bind({});\nDefault.args = {\n blocks: 3,\n};\n\n// Story pour la variante texte\nexport const VarianteTexte = Template.bind({});\nVarianteTexte.args = {\n blocks: 5,\n variant: 'text',\n};\n\n// Story pour la variante article\nexport const VarianteArticle = Template.bind({});\nVarianteArticle.args = {\n blocks: 6,\n variant: 'article',\n};\n\n// Story pour la variante layout\nexport const VarianteLayout = Template.bind({});\nVarianteLayout.args = {\n blocks: 8,\n variant: 'layout',\n};\n\n// Story pour toutes les variantes ensemble\nexport const VarianteMosaique = VariantsTemplate.bind({});\n\nDefault.parameters = {\n docs: {\n description: {\n story: `Skeleton par défaut avec 3 blocs. Version générique adaptable à différents types de contenu. Cas d'usage : placeholder simple, chargement de contenu court.`,\n },\n },\n};\n\nVarianteTexte.parameters = {\n docs: {\n description: {\n story: `Skeleton variant text avec 5 lignes de texte. Largeurs variables pour simuler du texte naturel. Cas d'usage : chargement de paragraphes, aperçu de contenu textuel, descriptions.`,\n },\n },\n};\n\nVarianteArticle.parameters = {\n docs: {\n description: {\n story: `Skeleton variant article avec structure titre + contenu. Simule un bloc article complet. Cas d'usage : chargement d'articles de blog, actualités, contenus éditoriaux.`,\n },\n },\n};\n\nVarianteLayout.parameters = {\n docs: {\n description: {\n story: `Skeleton variant layout avec structure de page complète. Blocs multiples simulant header, sidebar et content. Cas d'usage : chargement de pages entières, dashboards, interfaces complexes.`,\n },\n },\n};\n\nVarianteMosaique.parameters = {\n docs: {\n description: {\n story: `Skeleton intégré dans une mosaïque de cartes. Démontre l'utilisation dans un contexte réel avec spw-mosaic et spw-card. Cas d'usage : galeries d'actualités, listes de produits, grilles de contenus à charger.`,\n },\n },\n};\n"]}

package/dist/collection/stories/components/spw-tag/spw-tag.stories.js CHANGED Viewed

@@ -20,7 +20,29 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Affiche discrètement des informations supplémentaires.
+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)
         `,
@@ -93,4 +115,53 @@ Purple.args = {
     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.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-tag.stories.js.map

package/dist/collection/stories/components/spw-tag/spw-tag.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-tag.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-tag/spw-tag.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,SAAS,CAAC;AAE7B,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;;;SAMV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC;IACrB,MAAM,YAAY,GAAG,SAAS,CAAC;IAE/B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrC,GAAG,CAAC,IAAI,GAAG;IACT,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tag';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Tag',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\~~nAffiche~~ ~~discrètement~~ des informations ~~supplémentaires~~.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/621ede-tag)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = true;\n const slottedLabel = 'content';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n variant: 'default',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Grey = Template.bind({});\nGrey.args = {\n variant: 'grey',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Blue = Template.bind({});\nBlue.args = {\n variant: 'blue',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Green = Template.bind({});\nGreen.args = {\n variant: 'green',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Orange = Template.bind({});\nOrange.args = {\n variant: 'orange',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Red = Template.bind({});\nRed.args = {\n variant: 'red',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Purple = Template.bind({});\nPurple.args = {\n variant: 'purple',\n size: 'small',\n content: 'Mon tag',\n};\n"]}
1	+ {"version":3,"file":"spw-tag.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-tag/spw-tag.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tag';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Tag',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe 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.\n\n## Variantes disponibles\n\n- default : Tag par défaut avec fond gris clair\n- grey : Variante grise neutre\n- blue : Tag bleu pour informations générales\n- green : Tag vert pour statuts positifs ou succès\n- orange : Tag orange pour avertissements ou actions en attente\n- red : Tag rouge pour erreurs ou statuts critiques\n- purple : Tag violet pour catégories spécifiques\n\n## Fonctionnalités\n\n- Plusieurs variantes de couleur pour différents contextes\n- Deux tailles disponibles (small, medium)\n\n## Cas d'usage\n\n- Affichage de statuts (en cours, validé, rejeté)\n- Catégorisation de contenu (type de document, thématique)\n- Labels informatifs dans cartes et listes\n- Badges de notification ou compteurs\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/621ede-tag)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = true;\n const slottedLabel = 'content';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n variant: 'default',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Grey = Template.bind({});\nGrey.args = {\n variant: 'grey',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Blue = Template.bind({});\nBlue.args = {\n variant: 'blue',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Green = Template.bind({});\nGreen.args = {\n variant: 'green',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Orange = Template.bind({});\nOrange.args = {\n variant: 'orange',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Red = Template.bind({});\nRed.args = {\n variant: 'red',\n size: 'small',\n content: 'Mon tag',\n};\n\nexport const Purple = Template.bind({});\nPurple.args = {\n variant: 'purple',\n size: 'small',\n content: 'Mon tag',\n};\n\nDefault.parameters = {\n docs: {\n description: {\n 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.`,\n },\n },\n};\n\nGrey.parameters = {\n docs: {\n description: {\n story: `Tag gris neutre. Alternative au variant default, utilisé pour des informations secondaires ou contextuelles.`,\n },\n },\n};\n\nBlue.parameters = {\n docs: {\n description: {\n story: `Tag bleu pour informations générales. Cas d'usage : notifications informatives, catégories standards, labels d'aide.`,\n },\n },\n};\n\nGreen.parameters = {\n docs: {\n description: {\n story: `Tag vert pour statuts positifs. Cas d'usage : validé, actif, succès, disponible, en ligne.`,\n },\n },\n};\n\nOrange.parameters = {\n docs: {\n description: {\n story: `Tag orange pour avertissements. Cas d'usage : en attente, à vérifier, attention requise, modéré.`,\n },\n },\n};\n\nRed.parameters = {\n docs: {\n description: {\n story: `Tag rouge pour erreurs ou statuts critiques. Cas d'usage : rejeté, erreur, inactif, urgent, expiré.`,\n },\n },\n};\n\nPurple.parameters = {\n docs: {\n description: {\n story: `Tag violet pour catégories spécifiques. Cas d'usage : nouveauté, premium, featured, catégorie spéciale.`,\n },\n },\n};\n"]}

package/dist/collection/stories/components/spw-text-field/spw-text-field.stories.js CHANGED Viewed

@@ -20,7 +20,33 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Permet aux utilisateurs d’entrer du texte ou une valeur.
+Le composant Text Field permet aux utilisateurs d'entrer du texte court sur une seule ligne. Élément fondamental des formulaires, il intègre label, placeholder, validation et messages d'aide.
+## Variantes disponibles
+- **text** : Texte standard (par défaut)
+- **email** : Validation d'adresse email
+- **password** : Masquage du texte saisi
+- **tel** : Numéro de téléphone
+- **url** : Adresse web
+- **number** : Valeur numérique
+## Fonctionnalités
+- Label et placeholder configurables
+- Texte d'assistance avec icône optionnelle
+- États de validation (erreur, succès)
+- Champ requis avec indicateur visuel
+- Support de l'autocomplétion
+- Largeur adaptative
+## Cas d'usage
+- Saisie de nom, prénom, email
+- Formulaires de contact et d'inscription
+- Recherche et filtres
+- Champs de connexion
+- Saisie d'adresses et coordonnées
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/859851-champ-de-saisie-input-field)
         `,
@@ -60,4 +86,11 @@ Default.args = {
     required: true,
     showHintIcon: false,
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Champ de saisie par défaut avec label, placeholder et texte d'assistance. Le champ est marqué comme requis avec l'astérisque. Cas d'usage : formulaires de contact, saisie de données personnelles, champs de recherche simples.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-text-field.stories.js.map

package/dist/collection/stories/components/spw-text-field/spw-text-field.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-text-field.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-text-field/spw-text-field.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;;;SAMV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC;IACtB,MAAM,YAAY,GAAG,SAAS,CAAC;IAE/B,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,iBAAiB;IAC9B,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-text-field';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Champ de saisie (input text)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\~~nPermet~~ aux utilisateurs d’entrer du texte ou une ~~valeur~~.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/859851-champ-de-saisie-input-field)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = false;\n const slottedLabel = 'content';\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n placeholder: 'Mon placeholder',\n label: 'Mon label',\n name: 'input',\n hint: \"Mon texte d'assistance\",\n required: true,\n showHintIcon: false,\n};\n"]}
1	+ {"version":3,"file":"spw-text-field.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-text-field/spw-text-field.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAEpC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAgCV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC;IACtB,MAAM,YAAY,GAAG,SAAS,CAAC;IAE/B,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,iBAAiB;IAC9B,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,OAAO,CAAC,UAAU,GAAG;IACnB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE,kOAAkO;SAC1O;KACF;CACF,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-text-field';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Champ de saisie (input text)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Text Field permet aux utilisateurs d'entrer du texte court sur une seule ligne. Élément fondamental des formulaires, il intègre label, placeholder, validation et messages d'aide.\n\n## Variantes disponibles\n\n- text : Texte standard (par défaut)\n- email : Validation d'adresse email\n- password : Masquage du texte saisi\n- tel : Numéro de téléphone\n- url : Adresse web\n- number : Valeur numérique\n\n## Fonctionnalités\n\n- Label et placeholder configurables\n- Texte d'assistance avec icône optionnelle\n- États de validation (erreur, succès)\n- Champ requis avec indicateur visuel\n- Support de l'autocomplétion\n- Largeur adaptative\n\n## Cas d'usage\n\n- Saisie de nom, prénom, email\n- Formulaires de contact et d'inscription\n- Recherche et filtres\n- Champs de connexion\n- Saisie d'adresses et coordonnées\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/859851-champ-de-saisie-input-field)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = false;\n const slottedLabel = 'content';\n\n const controls = withComponentControls(componentsData, { tag: elementTag }) \|\| {};\n const masterProps = controls.__realProps \|\| Object.keys(controls);\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n element.setAttribute(toKebabCase(key), val as string);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n placeholder: 'Mon placeholder',\n label: 'Mon label',\n name: 'input',\n hint: \"Mon texte d'assistance\",\n required: true,\n showHintIcon: false,\n};\n\nDefault.parameters = {\n docs: {\n description: {\n story: `Champ de saisie par défaut avec label, placeholder et texte d'assistance. Le champ est marqué comme requis avec l'astérisque. Cas d'usage : formulaires de contact, saisie de données personnelles, champs de recherche simples.`,\n },\n },\n};\n"]}

package/dist/collection/stories/components/spw-textarea/spw-textarea.stories.js CHANGED Viewed

@@ -20,7 +20,22 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Permet à l’utilisateur de taper du contenu plus long.
+Le composant Textarea permet aux utilisateurs de saisir du texte long sur plusieurs lignes. Idéal pour les commentaires, descriptions et contenus étendus dans les formulaires.
+## Fonctionnalités
+- Hauteur configurable (nombre de lignes)
+- Label et placeholder
+- Texte d'assistance avec icône
+- États de validation (erreur, succès)
+## Cas d'usage
+- Commentaires et remarques
+- Messages dans formulaires de contact
+- Contenu éditorial ou rédactionnel
+- Feedback utilisateur et témoignages
+- Notes et observations
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/6692b4-champ-texte-textarea)
         `,

package/dist/collection/stories/components/spw-textarea/spw-textarea.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-textarea.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-textarea/spw-textarea.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;;;SAMV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC;IACtB,MAAM,YAAY,GAAG,SAAS,CAAC;IAE/B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,iBAAiB;IAC9B,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-textarea';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Champ de texte (textarea)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\~~nPermet~~ à ~~l’utilisateur~~ de ~~taper~~ du ~~contenu~~ ~~plus~~ ~~long~~.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/6692b4-champ-texte-textarea)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = false;\n const slottedLabel = 'content';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n placeholder: 'Mon placeholder',\n label: 'Mon label',\n name: 'textarea',\n hint: \"Mon texte d'assistance\",\n required: true,\n showHintIcon: false,\n};\n"]}
1	+ {"version":3,"file":"spw-textarea.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-textarea/spw-textarea.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;SAqBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC;IACtB,MAAM,YAAY,GAAG,SAAS,CAAC;IAE/B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,iBAAiB;IAC9B,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-textarea';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Champ de texte (textarea)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Textarea permet aux utilisateurs de saisir du texte long sur plusieurs lignes. Idéal pour les commentaires, descriptions et contenus étendus dans les formulaires.\n\n## Fonctionnalités\n\n- Hauteur configurable (nombre de lignes)\n- Label et placeholder\n- Texte d'assistance avec icône\n- États de validation (erreur, succès)\n\n## Cas d'usage\n\n- Commentaires et remarques\n- Messages dans formulaires de contact\n- Contenu éditorial ou rédactionnel\n- Feedback utilisateur et témoignages\n- Notes et observations\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/6692b4-champ-texte-textarea)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = false;\n const slottedLabel = 'content';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n placeholder: 'Mon placeholder',\n label: 'Mon label',\n name: 'textarea',\n hint: \"Mon texte d'assistance\",\n required: true,\n showHintIcon: false,\n};\n"]}

package/dist/collection/stories/components/spw-tooltip/spw-tooltip.stories.js CHANGED Viewed

@@ -20,7 +20,23 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Affiche des informations supplémentaires lorsque l'utilisateur survole un élément.
+Le composant Tooltip affiche des informations contextuelles supplémentaires au survol d'un élément. Il permet de fournir des explications, des aides ou des précisions sans surcharger l'interface.
+## Fonctionnalités
+- Affichage au survol
+- Titre et contenu configurables
+- Positionnement automatique
+- Support de contenu HTML
+- Accessibilité avec ARIA
+## Cas d'usage
+- Aide contextuelle sur les champs de formulaire
+- Explication de termes techniques ou d'abréviations
+- Informations supplémentaires sur les icônes ou boutons
+- Descriptions détaillées sans encombrer l'interface
+- Aide à la complétion de formulaires complexes
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/748e85-infobulle-tooltip)
         `,

package/dist/collection/stories/components/spw-tooltip/spw-tooltip.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-tooltip.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-tooltip/spw-tooltip.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;;;SAMV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC;IACrB,MAAM,YAAY,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,WAAW;IACzB,WAAW,EAAE,WAAW;IACxB,KAAK,EAAE,yBAAyB;CACjC,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tooltip';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Infobulle (tooltip)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\~~nAffiche~~ des informations supplémentaires ~~lorsque~~ l'~~utilisateur~~ ~~survole~~ un ~~élément~~.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/748e85-infobulle-tooltip)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = true;\n const slottedLabel = 'label';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n tooltipTitle: 'Mon titre',\n tooltipText: 'Mon texte',\n label: 'Mon élément déclencheur',\n};\n"]}
1	+ {"version":3,"file":"spw-tooltip.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-tooltip/spw-tooltip.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;SAsBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,IAAI;IACvB,OAAO,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC;IACrB,MAAM,YAAY,GAAG,OAAO,CAAC;IAE7B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,WAAW;IACzB,WAAW,EAAE,WAAW;IACxB,KAAK,EAAE,yBAAyB;CACjC,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-tooltip';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Composants/Infobulle (tooltip)',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLe composant Tooltip affiche des informations contextuelles supplémentaires au survol d'un élément. Il permet de fournir des explications, des aides ou des précisions sans surcharger l'interface.\n\n## Fonctionnalités\n\n- Affichage au survol\n- Titre et contenu configurables\n- Positionnement automatique\n- Support de contenu HTML\n- Accessibilité avec ARIA\n\n## Cas d'usage\n\n- Aide contextuelle sur les champs de formulaire\n- Explication de termes techniques ou d'abréviations\n- Informations supplémentaires sur les icônes ou boutons\n- Descriptions détaillées sans encombrer l'interface\n- Aide à la complétion de formulaires complexes\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/748e85-infobulle-tooltip)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slot) {\n return /* HTML */ `${slot}`;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n const hasSlot = true;\n const slottedLabel = 'label';\n\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n } else {\n if (key !== slottedLabel) {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n if (hasSlot) {\n element.innerHTML = htmlContent(args[slottedLabel]);\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n tooltipTitle: 'Mon titre',\n tooltipText: 'Mon texte',\n label: 'Mon élément déclencheur',\n};\n"]}

package/dist/collection/stories/organisms/spw-accordion/spw-accordion.stories.js CHANGED Viewed

@@ -30,15 +30,28 @@ const meta = {
     argTypes,
     tags: ['autodocs'],
     parameters: {
-        // status: {
-        //   type: 'aVenir',
-        // },
         docs: {
             description: {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.
+Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page. Ils sont particulièrement utiles pour organiser de grandes quantités d'informations de manière compacte et améliorer la lisibilité du contenu.
+## Structure
+Le composant se compose de trois parties :
+- **spw-accordion** : Le conteneur principal qui englobe tous les items
+- **spw-accordion-item** : Chaque élément pliable individuel
+- **spw-accordion-title** : Le titre cliquable de chaque item
+- **spw-accordion-content** : Le contenu qui s'affiche/se masque
+## Fonctionnalités
+- Ouverture/fermeture animée des sections
+- Possibilité d'avoir plusieurs items ouverts simultanément
+- Support des icônes personnalisées pour chaque titre
+- Accessibilité avec gestion du clavier et attributs ARIA
+- Personnalisation du niveau de titre pour le SEO
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/054567-accordeon)
         `,

package/dist/collection/stories/organisms/spw-accordion/spw-accordion.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-accordion.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-accordion/spw-accordion.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEtE,MAAM,UAAU,GAAG,eAAe,CAAC;AAEnC,MAAM,gBAAgB,GAAG,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,qBAAqB,CAAC,CAAC;AAEhG,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE;IACvC,GAAG,EAAE,UAAU;IACf,kBAAkB;IAClB,MAAM;IACN,uCAAuC;IACvC,+DAA+D;IAC/D,4BAA4B;IAC5B,OAAO;IACP,MAAM;IACN,4CAA4C;IAC5C,4DAA4D;IAC5D,4BAA4B;IAC5B,OAAO;IACP,KAAK;CACN,CAAC,GACC,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,~~YAAY;QACZ,oBAAoB;QACpB,KAAK;QACL,~~IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;;;SAMV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,QAAQ;IAC3B,OAAO,UAAU,CAAC;wCACoB,QAAQ,CAAC,WAAW;kCAC1B,QAAQ,CAAC,GAAG,WAAW,QAAQ,CAAC,IAAI;;;;;;;;;;kCAUpC,QAAQ,CAAC,GAAG,WAAW,QAAQ,CAAC,IAAI;;;;;;;;;GASnE,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,uCAAuC;IACvC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,yBAAyB;IACzB,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,IAAI;IACT,WAAW,EAAE,IAAI;CAClB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nconst elementTag = 'spw-accordion';\n\nconst subComponentTags = ['spw-accordion-content', 'spw-accordion-item', 'spw-accordion-title'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, {\n tag: elementTag,\n // customTokens: [\n // {\n // name: '--spw-accordion-padding',\n // description: 'Padding interne des items de l’accordéon',\n // defaultValue: '16px',\n // },\n // {\n // name: '--spw-accordion-border-color',\n // description: 'Couleur de la bordure entre les items',\n // defaultValue: '#ccc',\n // },\n // ],\n }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Accordéon',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n ~~// status: {\n // type: 'aVenir',\n // },\n~~ docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLes accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/054567-accordeon)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n return /* HTML */ `\n <spw-accordion-item default-open=\"${slotArgs.defaultOpen}\">\n <spw-accordion-title tag=\"${slotArgs.tag}\" icon=\"${slotArgs.icon}\" slot=\"title\">Titre avec icône</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut\n malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Pellentesque suscipit magna tellus,\n eu ullamcorper risus efficitur at. Donec eu tincidunt dolor. Suspendisse imperdiet, velit non tristique dignissim, sem est viverra arcu, eget malesuada felis massa eget\n sem. Nam sed felis eu sem suscipit sollicitudin volutpat vitae turpis. Sed quis facilisis magna, sed condimentum enim. Sed gravida est eget est dapibus rutrum. Suspendisse\n lacus leo, imperdiet et leo at, ultrices porta libero.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title tag=\"${slotArgs.tag}\" icon=\"${slotArgs.icon}\" slot=\"title\">Titre avec icône</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut\n malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Pellentesque suscipit magna tellus,\n eu ullamcorper risus efficitur at. Donec eu tincidunt dolor. Suspendisse imperdiet, velit non tristique dignissim, sem est viverra arcu, eget malesuada felis massa eget\n sem. Nam sed felis eu sem suscipit sollicitudin volutpat vitae turpis. Sed quis facilisis magna, sed condimentum enim. Sed gravida est eget est dapibus rutrum. Suspendisse\n lacus leo, imperdiet et leo at, ultrices porta libero.\n </spw-accordion-content>\n </spw-accordion-item>\n `;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n // Apply properties to the main element\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n // Set inner HTML content\n element.innerHTML = htmlContent(args);\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n icon: 'fa-book',\n tag: 'h3',\n defaultOpen: true,\n};\n"]}
1	+ {"version":3,"file":"spw-accordion.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-accordion/spw-accordion.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEtE,MAAM,UAAU,GAAG,eAAe,CAAC;AAEnC,MAAM,gBAAgB,GAAG,CAAC,uBAAuB,EAAE,oBAAoB,EAAE,qBAAqB,CAAC,CAAC;AAEhG,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE;IACvC,GAAG,EAAE,UAAU;IACf,kBAAkB;IAClB,MAAM;IACN,uCAAuC;IACvC,+DAA+D;IAC/D,4BAA4B;IAC5B,OAAO;IACP,MAAM;IACN,4CAA4C;IAC5C,4DAA4D;IAC5D,4BAA4B;IAC5B,OAAO;IACP,KAAK;CACN,CAAC,GACC,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;SAsBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,QAAQ;IAC3B,OAAO,UAAU,CAAC;wCACoB,QAAQ,CAAC,WAAW;kCAC1B,QAAQ,CAAC,GAAG,WAAW,QAAQ,CAAC,IAAI;;;;;;;;;;kCAUpC,QAAQ,CAAC,GAAG,WAAW,QAAQ,CAAC,IAAI;;;;;;;;;GASnE,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,uCAAuC;IACvC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,yBAAyB;IACzB,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,IAAI;IACT,WAAW,EAAE,IAAI;CAClB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nconst elementTag = 'spw-accordion';\n\nconst subComponentTags = ['spw-accordion-content', 'spw-accordion-item', 'spw-accordion-title'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, {\n tag: elementTag,\n // customTokens: [\n // {\n // name: '--spw-accordion-padding',\n // description: 'Padding interne des items de l’accordéon',\n // defaultValue: '16px',\n // },\n // {\n // name: '--spw-accordion-border-color',\n // description: 'Couleur de la bordure entre les items',\n // defaultValue: '#ccc',\n // },\n // ],\n }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Accordéon',\n component: elementTag,\n argTypes,\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nLes accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page. Ils sont particulièrement utiles pour organiser de grandes quantités d'informations de manière compacte et améliorer la lisibilité du contenu.\n\n## Structure\n\nLe composant se compose de trois parties :\n- spw-accordion : Le conteneur principal qui englobe tous les items\n- spw-accordion-item : Chaque élément pliable individuel\n- spw-accordion-title : Le titre cliquable de chaque item\n- spw-accordion-content : Le contenu qui s'affiche/se masque\n\n## Fonctionnalités\n\n- Ouverture/fermeture animée des sections\n- Possibilité d'avoir plusieurs items ouverts simultanément\n- Support des icônes personnalisées pour chaque titre\n- Accessibilité avec gestion du clavier et attributs ARIA\n- Personnalisation du niveau de titre pour le SEO\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/054567-accordeon)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n return /* HTML */ `\n <spw-accordion-item default-open=\"${slotArgs.defaultOpen}\">\n <spw-accordion-title tag=\"${slotArgs.tag}\" icon=\"${slotArgs.icon}\" slot=\"title\">Titre avec icône</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut\n malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Pellentesque suscipit magna tellus,\n eu ullamcorper risus efficitur at. Donec eu tincidunt dolor. Suspendisse imperdiet, velit non tristique dignissim, sem est viverra arcu, eget malesuada felis massa eget\n sem. Nam sed felis eu sem suscipit sollicitudin volutpat vitae turpis. Sed quis facilisis magna, sed condimentum enim. Sed gravida est eget est dapibus rutrum. Suspendisse\n lacus leo, imperdiet et leo at, ultrices porta libero.\n </spw-accordion-content>\n </spw-accordion-item>\n <spw-accordion-item>\n <spw-accordion-title tag=\"${slotArgs.tag}\" icon=\"${slotArgs.icon}\" slot=\"title\">Titre avec icône</spw-accordion-title>\n <spw-accordion-content slot=\"content\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel imperdiet diam. Aliquam in quam nulla. Duis mi erat, tempus vitae tincidunt in, pretium ut diam. Ut\n malesuada ante et scelerisque eleifend. Curabitur luctus faucibus pretium. Praesent lacinia laoreet ipsum, at mattis magna cursus non. Pellentesque suscipit magna tellus,\n eu ullamcorper risus efficitur at. Donec eu tincidunt dolor. Suspendisse imperdiet, velit non tristique dignissim, sem est viverra arcu, eget malesuada felis massa eget\n sem. Nam sed felis eu sem suscipit sollicitudin volutpat vitae turpis. Sed quis facilisis magna, sed condimentum enim. Sed gravida est eget est dapibus rutrum. Suspendisse\n lacus leo, imperdiet et leo at, ultrices porta libero.\n </spw-accordion-content>\n </spw-accordion-item>\n `;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n // Apply properties to the main element\n Object.entries(args).forEach(([key, val]) => {\n if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n // Set inner HTML content\n element.innerHTML = htmlContent(args);\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n icon: 'fa-book',\n tag: 'h3',\n defaultOpen: true,\n};\n"]}

package/dist/collection/stories/organisms/spw-card/spw-card.stories.js CHANGED Viewed

@@ -24,7 +24,39 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-La carte est un lien vers une page éditoriale dont elle donne un aperçu. Elle fait généralement partie d'une liste d'aperçus de contenus similaires.
+Le composant Carte est un conteneur cliquable qui affiche un aperçu visuel de contenu (article, événement, personne, vidéo). Il permet de présenter des informations de manière attrayante et structurée, souvent utilisé dans des listes ou grilles de contenus similaires.
+## Variants disponibles
+- **Default / Horizontal** : Carte classique avec image à gauche, contenu à droite
+- **Vertical** : Image en haut, contenu en dessous
+- **Event** : Carte événement avec date et tags
+- **Video** : Carte vidéo avec icône de lecture
+- **Light** : Version allégée sans image, texte seul
+- **Mini** : Version compacte pour sidebars
+- **People** : Carte profil avec avatar rond
+- **Sidebar** : Version pour barre latérale
+## Structure
+Le composant se compose de plusieurs parties :
+- **spw-card** : Conteneur principal avec la propriété href
+- **spw-card-image** : Bloc image avec label optionnel
+- **spw-card-content** : Conteneur du contenu textuel
+- **spw-card-title** : Titre de la carte
+- **spw-card-excerpt** : Description/extrait
+- **spw-card-subtags** : Liste de sous-tags (liens ou tags)
+- **spw-card-subtag-item** : Item de sous-tag individuel
+## Fonctionnalités
+- Cartes entièrement cliquables
+- Support des images avec labels
+- Tags et catégories personnalisables
+- Versions compactes pour sidebars
+- Cartes profil avec affiliations
+- Responsive design adaptatif
+- Hover states et transitions fluides
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/71f31e-carte-card)
         `,
@@ -280,4 +312,67 @@ PeopleWithAffiliates.args = {
     imgAlt: 'Image',
     imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Carte horizontale par défaut avec image à gauche et contenu à droite. Affiche un tag, une date, un titre, un extrait et des sous-tags cliquables. Format idéal pour listes d'articles ou actualités.`,
+        },
+    },
+};
+WithoutImage.parameters = {
+    docs: {
+        description: {
+            story: `Carte sans image, contenu textuel uniquement. Utile lorsqu'aucune image pertinente n'est disponible ou pour varier la présentation dans une liste.`,
+        },
+    },
+};
+Light.parameters = {
+    docs: {
+        description: {
+            story: `Version allégée avec titre seul, sans image ni métadonnées. Parfaite pour des listes simples de liens ou menus de navigation secondaire.`,
+        },
+    },
+};
+Vertical.parameters = {
+    docs: {
+        description: {
+            story: `Carte verticale avec image en haut et contenu en dessous. Format populaire pour grilles d'articles, articles connexes ou publications. Idéale pour présentation en colonnes.`,
+        },
+    },
+};
+Event.parameters = {
+    docs: {
+        description: {
+            story: `Carte événement avec dates de début/fin visibles. Optimisée pour afficher des événements avec période définie.`,
+        },
+    },
+};
+Video.parameters = {
+    docs: {
+        description: {
+            story: `Carte vidéo avec icône de lecture superposée sur l'image. Signale clairement un contenu vidéo et invite au clic pour visionner.`,
+        },
+    },
+};
+Mini.parameters = {
+    docs: {
+        description: {
+            story: `Version compacte pour sidebar ou colonne latérale. Image réduite à gauche avec titre à droite, format économe en espace.`,
+        },
+    },
+};
+People.parameters = {
+    docs: {
+        description: {
+            story: `Carte profil avec avatar rond, nom, fonction, et coordonnées. Idéale pour annuaires, équipes, organigrammes ou pages de contact.`,
+        },
+    },
+};
+PeopleWithAffiliates.parameters = {
+    docs: {
+        description: {
+            story: `Carte profil enrichie avec affiliations/organisations associées. Permet de montrer les relations et appartenances d'une personne.`,
+        },
+    },
+};
 //# sourceMappingURL=spw-card.stories.js.map