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/organisms/spw-modal/spw-modal.stories.js CHANGED Viewed

@@ -21,7 +21,24 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Fenêtre superposée affichant du contenu ou des actions importantes.
+Le composant Modal affiche une fenêtre superposée qui capte l'attention de l'utilisateur pour afficher du contenu ou des actions importantes. Il masque temporairement le reste de l'interface et nécessite une interaction avant de continuer.
+## Tailles disponibles
+- **Small** : Pour des messages courts ou confirmations simples
+- **Medium** : Taille par défaut pour la plupart des cas d'usage
+- **Large** : Pour du contenu plus riche ou des formulaires complets
+- **Fluid** : S'adapte dynamiquement au contenu
+## Fonctionnalités
+- Ouverture via attribut data-modal-trigger sur n'importe quel élément
+- Fermeture via attribut data-modal-close, touche Escape, ou clic overlay
+- Piège de focus (focus trap) pour l'accessibilité
+- Animations d'entrée/sortie en fondu
+- Gestion automatique des vidéos (arrêt à la fermeture)
+- Méthodes programmatiques openModal() et closeModal()
+- Événements spwModalOpen et spwModalClose
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)
         `,
@@ -74,6 +91,17 @@ Small.args = {
   </spw-group>
   `,
 };
+Small.parameters = {
+    docs: {
+        description: {
+            story: `
+Modal de petite taille idéale pour des messages de confirmation courts ou des alertes simples. Elle capte l'attention sans occuper trop d'espace à l'écran.
+Cas d'usage : confirmations d'actions ("Êtes-vous sûr de vouloir supprimer ?"), messages d'alerte courts, notifications importantes nécessitant une action utilisateur.
+      `,
+        },
+    },
+};
 export const Medium = Template.bind({});
 Medium.args = {
     size: 'medium',
@@ -86,6 +114,17 @@ Medium.args = {
   </spw-group>
   `,
 };
+Medium.parameters = {
+    docs: {
+        description: {
+            story: `
+Modal de taille moyenne, la plus couramment utilisée. Elle offre un bon équilibre entre espace disponible et focus de l'utilisateur.
+Cas d'usage : formulaires de taille moyenne, affichage d'informations détaillées, paramètres de configuration, dialogues nécessitant plusieurs champs de saisie.
+      `,
+        },
+    },
+};
 export const Large = Template.bind({});
 Large.args = {
     size: 'large',
@@ -98,6 +137,17 @@ Large.args = {
   </spw-group>
   `,
 };
+Large.parameters = {
+    docs: {
+        description: {
+            story: `
+Grande modal pour afficher du contenu riche ou des formulaires complexes. Elle maximise l'espace disponible tout en conservant les marges nécessaires.
+Cas d'usage : formulaires longs avec plusieurs sections, affichage de tableaux ou listes détaillées, éditeurs de contenu, prévisualisation de documents.
+      `,
+        },
+    },
+};
 export const Fluid = Template.bind({});
 Fluid.args = {
     size: 'fluid',
@@ -110,4 +160,15 @@ Fluid.args = {
   </spw-group>
     `,
 };
+Fluid.parameters = {
+    docs: {
+        description: {
+            story: `
+Modal fluide qui s'adapte dynamiquement à la taille de son contenu. Elle ajuste automatiquement sa largeur en fonction de ce qu'elle contient, dans les limites raisonnables.
+Cas d'usage : contenu dynamique de taille variable, images ou médias dont la taille n'est pas connue à l'avance, galeries adaptatives.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-modal.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-modal.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-modal/spw-modal.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;AAClE,OAAO,iCAAiC,CAAC;AAEzC,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,QAAQ,kCACH,QAAQ,KACX,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC7B;IACD,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,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,QAAQ,GAAG,IAAI,gBAAgB,EAAE,CAAC;IAExC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,CAAC,WAAW,GAAG,uBAAuB,CAAC;IAE7C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,SAAS,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC1F,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,CAAC,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAEnD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC3C,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC3C,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE9B,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;GAKR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,IAAI,EAAE,QAAQ;IACd,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;GAKR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;GAKR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;KAKN;CACJ,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';\nimport '../../assets/css/components.css';\n\nconst elementTag = 'spw-modal';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Organismes/Modale',\n component: elementTag,\n argTypes: {\n ...argTypes,\n content: { control: 'text' },\n buttons: { control: 'text' },\n },\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\nFenêtre superposée affichant du contenu ou des actions importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nconst Template: StoryFn = args => {\n const fragment = new DocumentFragment();\n\n const button = document.createElement('spw-button');\n button.textContent = 'Ouvrir fenêtre modale';\n\n const element = document.createElement(elementTag);\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 !== 'content' && key !== 'buttons' && key !== 'closeModal' && key !== 'openModal') {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n button.setAttribute('data-modal-trigger', args.id);\n\n if (args.content) {\n const contentDiv = document.createElement('div');\n contentDiv.setAttribute('slot', 'content');\n contentDiv.innerHTML = args.content;\n element.appendChild(contentDiv);\n }\n\n if (args.buttons) {\n const buttonsDiv = document.createElement('div');\n buttonsDiv.setAttribute('slot', 'buttons');\n buttonsDiv.innerHTML = args.buttons;\n element.appendChild(buttonsDiv);\n }\n\n fragment.appendChild(button);\n fragment.appendChild(element);\n\n return fragment;\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n size: 'small',\n id: 'modal1',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal1\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal1\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n size: 'medium',\n id: 'modal2',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal2\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal2\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n size: 'large',\n id: 'modal3',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal3\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal3\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Fluid = Template.bind({});\nFluid.args = {\n size: 'fluid',\n id: 'modal4',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal4\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal4\">Fermer</spw-button>\n </spw-group>\n `,\n};\n"]}
1	+ {"version":3,"file":"spw-modal.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-modal/spw-modal.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';\nimport '../../assets/css/components.css';\n\nconst elementTag = 'spw-modal';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Organismes/Modale',\n component: elementTag,\n argTypes: {\n ...argTypes,\n content: { control: 'text' },\n buttons: { control: 'text' },\n },\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 Modal affiche une fenêtre superposée qui capte l'attention de l'utilisateur pour afficher du contenu ou des actions importantes. Il masque temporairement le reste de l'interface et nécessite une interaction avant de continuer.\n\n## Tailles disponibles\n\n- Small : Pour des messages courts ou confirmations simples\n- Medium : Taille par défaut pour la plupart des cas d'usage\n- Large : Pour du contenu plus riche ou des formulaires complets\n- Fluid : S'adapte dynamiquement au contenu\n\n## Fonctionnalités\n\n- Ouverture via attribut data-modal-trigger sur n'importe quel élément\n- Fermeture via attribut data-modal-close, touche Escape, ou clic overlay\n- Piège de focus (focus trap) pour l'accessibilité\n- Animations d'entrée/sortie en fondu\n- Gestion automatique des vidéos (arrêt à la fermeture)\n- Méthodes programmatiques openModal() et closeModal()\n- Événements spwModalOpen et spwModalClose\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nconst Template: StoryFn = args => {\n const fragment = new DocumentFragment();\n\n const button = document.createElement('spw-button');\n button.textContent = 'Ouvrir fenêtre modale';\n\n const element = document.createElement(elementTag);\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 !== 'content' && key !== 'buttons' && key !== 'closeModal' && key !== 'openModal') {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n button.setAttribute('data-modal-trigger', args.id);\n\n if (args.content) {\n const contentDiv = document.createElement('div');\n contentDiv.setAttribute('slot', 'content');\n contentDiv.innerHTML = args.content;\n element.appendChild(contentDiv);\n }\n\n if (args.buttons) {\n const buttonsDiv = document.createElement('div');\n buttonsDiv.setAttribute('slot', 'buttons');\n buttonsDiv.innerHTML = args.buttons;\n element.appendChild(buttonsDiv);\n }\n\n fragment.appendChild(button);\n fragment.appendChild(element);\n\n return fragment;\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n size: 'small',\n id: 'modal1',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal1\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal1\">Fermer</spw-button>\n </spw-group>\n `,\n};\nSmall.parameters = {\n docs: {\n description: {\n story: `\nModal de petite taille idéale pour des messages de confirmation courts ou des alertes simples. Elle capte l'attention sans occuper trop d'espace à l'écran.\n\nCas d'usage : confirmations d'actions (\"Êtes-vous sûr de vouloir supprimer ?\"), messages d'alerte courts, notifications importantes nécessitant une action utilisateur.\n `,\n },\n },\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n size: 'medium',\n id: 'modal2',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal2\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal2\">Fermer</spw-button>\n </spw-group>\n `,\n};\nMedium.parameters = {\n docs: {\n description: {\n story: `\nModal de taille moyenne, la plus couramment utilisée. Elle offre un bon équilibre entre espace disponible et focus de l'utilisateur.\n\nCas d'usage : formulaires de taille moyenne, affichage d'informations détaillées, paramètres de configuration, dialogues nécessitant plusieurs champs de saisie.\n `,\n },\n },\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n size: 'large',\n id: 'modal3',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal3\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal3\">Fermer</spw-button>\n </spw-group>\n `,\n};\nLarge.parameters = {\n docs: {\n description: {\n story: `\nGrande modal pour afficher du contenu riche ou des formulaires complexes. Elle maximise l'espace disponible tout en conservant les marges nécessaires.\n\nCas d'usage : formulaires longs avec plusieurs sections, affichage de tableaux ou listes détaillées, éditeurs de contenu, prévisualisation de documents.\n `,\n },\n },\n};\n\nexport const Fluid = Template.bind({});\nFluid.args = {\n size: 'fluid',\n id: 'modal4',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal4\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal4\">Fermer</spw-button>\n </spw-group>\n `,\n};\nFluid.parameters = {\n docs: {\n description: {\n story: `\nModal fluide qui s'adapte dynamiquement à la taille de son contenu. Elle ajuste automatiquement sa largeur en fonction de ce qu'elle contient, dans les limites raisonnables.\n\nCas d'usage : contenu dynamique de taille variable, images ou médias dont la taille n'est pas connue à l'avance, galeries adaptatives.\n `,\n },\n },\n};\n"]}

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

@@ -21,7 +21,36 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Permet d'afficher une grille d'éléments sous la forme d'un masonry.
+Le composant Mosaic permet d'afficher une grille d'éléments sous la forme d'un masonry (mise en page dynamique type Pinterest). Il s'adapte automatiquement à la hauteur variable des contenus et offre une configuration responsive.
+## Structure
+Le composant se compose de deux éléments :
+- **spw-mosaic** : Conteneur principal avec gestion du masonry layout
+- **spw-mosaic-item** : Wrapper pour chaque élément de la grille
+## Configuration responsive
+- **colsDesktop** : Nombre de colonnes en vue desktop (défaut: 3)
+- **colsTablet** : Nombre de colonnes en vue tablette (défaut: 2)
+- **colsMobile** : Nombre de colonnes en vue mobile (défaut: 1)
+- **isMasonry** : Active/désactive le mode masonry layout
+## Fonctionnalités
+- Layout masonry automatique avec bibliothèque Masonry.js
+- Grille responsive configurée par breakpoint
+- Chargement intelligent des images avant disposition
+- Support de tout type de contenu (cards, tiles)
+- Mode grille classique si masonry désactivé
+## Cas d'usage
+- Galeries d'actualités avec images de tailles variées
+- Grilles de cartes avec contenus de hauteurs différentes
+- Affichage de tuiles d'accès rapides organisées
+[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
         `,
             },
         },
@@ -287,4 +316,48 @@ BigTiles.args = {
     colsTablet: 2,
     colsMobile: 1,
 };
+Cards.parameters = {
+    docs: {
+        description: {
+            story: `
+Mosaïque de cartes (spw-card) avec masonry activé en 3 colonnes desktop, 2 tablette, 1 mobile. Mélange de cartes avec et sans images, avec contenus de hauteurs variables (titres courts et longs).
+Cas d'usage : galerie d'actualités, liste d'événements avec visuels optionnels, affichage de contenus éditoriaux mixtes. Le masonry permet une disposition harmonieuse malgré les hauteurs différentes.
+      `,
+        },
+    },
+};
+IconTiles.parameters = {
+    docs: {
+        description: {
+            story: `
+Mosaïque de tuiles icônes (spw-tile variant="icon") organisées en grille masonry. Chaque tuile affiche une icône FontAwesome, un titre et une description. Configuration 3/2/1 colonnes.
+Cas d'usage : grille d'accès rapides aux services, menu de fonctionnalités principales, portail d'outils avec icônes représentatives. Format compact et visuellement équilibré.
+      `,
+        },
+    },
+};
+LightTiles.parameters = {
+    docs: {
+        description: {
+            story: `
+Mosaïque de tuiles légères (spw-tile variant="light") avec images de fond. Format minimaliste avec titre en overlay sur l'image. Configuration responsive 3/2/1 colonnes.
+Cas d'usage : galerie de catégories thématiques, navigation visuelle par sections, portfolio de projets avec aperçu visuel. L'image attire l'attention et le titre identifie le contenu.
+      `,
+        },
+    },
+};
+BigTiles.parameters = {
+    docs: {
+        description: {
+            story: `
+Mosaïque de grandes tuiles (spw-tile variant="big") avec images plein format et titre en overlay. Format impactant avec icône chevron indiquant l'interactivité. Configuration 3/2/1 colonnes.
+Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections principales, portails avec accès aux univers majeurs. Format généreux qui valorise le contenu visuel.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-mosaic.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-mosaic.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-mosaic/spw-mosaic.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, extractArgTypes } from '@utils/utils';\n\nconst elementTag = 'spw-mosaic';\n\nconst subComponentTags = ['spw-mosaic-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: \"Organismes/Mosaique d'éléments (masonry)\",\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 d'afficher une grille d'éléments sous la forme d'un masonry.\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentCards() {\n return /* HTML / `\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-subtags>\n <spw-card-subtag-item link=\"http://google.be\">Sous-tag 1</spw-card-subtag-item>\n <spw-card-subtag-item link=\"http://google.be\">Sous-tag 2</spw-card-subtag-item>\n </spw-card-subtags>\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentIconTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-power-off\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-map-location-dot\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-paper-plane\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-user\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-image\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-bell\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentLightTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentBigTiles() {\n return / HTML */ `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction camelToKebab(str: string) {\n return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst TemplateCards: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentCards();\n\n return element;\n};\n\nconst TemplateIconTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentIconTiles();\n\n return element;\n};\n\nconst TemplateLightTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentLightTiles();\n\n return element;\n};\n\nconst TemplateBigTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentBigTiles();\n\n return element;\n};\n\nexport const Cards = TemplateCards.bind({});\nCards.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const IconTiles = TemplateIconTiles.bind({});\nIconTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const LightTiles = TemplateLightTiles.bind({});\nLightTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const BigTiles = TemplateBigTiles.bind({});\nBigTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n"]}
1	+ {"version":3,"file":"spw-mosaic.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-mosaic/spw-mosaic.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, extractArgTypes } from '@utils/utils';\n\nconst elementTag = 'spw-mosaic';\n\nconst subComponentTags = ['spw-mosaic-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: \"Organismes/Mosaique d'éléments (masonry)\",\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 Mosaic permet d'afficher une grille d'éléments sous la forme d'un masonry (mise en page dynamique type Pinterest). Il s'adapte automatiquement à la hauteur variable des contenus et offre une configuration responsive.\n\n## Structure\n\nLe composant se compose de deux éléments :\n- spw-mosaic : Conteneur principal avec gestion du masonry layout\n- spw-mosaic-item : Wrapper pour chaque élément de la grille\n\n## Configuration responsive\n\n- colsDesktop : Nombre de colonnes en vue desktop (défaut: 3)\n- colsTablet : Nombre de colonnes en vue tablette (défaut: 2)\n- colsMobile : Nombre de colonnes en vue mobile (défaut: 1)\n- isMasonry : Active/désactive le mode masonry layout\n\n## Fonctionnalités\n\n- Layout masonry automatique avec bibliothèque Masonry.js\n- Grille responsive configurée par breakpoint\n- Chargement intelligent des images avant disposition\n- Support de tout type de contenu (cards, tiles)\n- Mode grille classique si masonry désactivé\n\n## Cas d'usage\n\n- Galeries d'actualités avec images de tailles variées\n- Grilles de cartes avec contenus de hauteurs différentes\n- Affichage de tuiles d'accès rapides organisées\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentCards() {\n return /* HTML / `\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-subtags>\n <spw-card-subtag-item link=\"http://google.be\">Sous-tag 1</spw-card-subtag-item>\n <spw-card-subtag-item link=\"http://google.be\">Sous-tag 2</spw-card-subtag-item>\n </spw-card-subtags>\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentIconTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-power-off\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-map-location-dot\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-paper-plane\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-user\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-image\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-bell\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentLightTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentBigTiles() {\n return / HTML */ `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction camelToKebab(str: string) {\n return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst TemplateCards: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentCards();\n\n return element;\n};\n\nconst TemplateIconTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentIconTiles();\n\n return element;\n};\n\nconst TemplateLightTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentLightTiles();\n\n return element;\n};\n\nconst TemplateBigTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\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 const kebabKey = camelToKebab(key);\n element.setAttribute(kebabKey, val);\n } else if (key.startsWith('on')) {\n element.addEventListener(key.substring(2).toLowerCase(), val);\n }\n });\n\n element.innerHTML = htmlContentBigTiles();\n\n return element;\n};\n\nexport const Cards = TemplateCards.bind({});\nCards.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const IconTiles = TemplateIconTiles.bind({});\nIconTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const LightTiles = TemplateLightTiles.bind({});\nLightTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const BigTiles = TemplateBigTiles.bind({});\nBigTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nCards.parameters = {\n docs: {\n description: {\n story: `\nMosaïque de cartes (spw-card) avec masonry activé en 3 colonnes desktop, 2 tablette, 1 mobile. Mélange de cartes avec et sans images, avec contenus de hauteurs variables (titres courts et longs).\n\nCas d'usage : galerie d'actualités, liste d'événements avec visuels optionnels, affichage de contenus éditoriaux mixtes. Le masonry permet une disposition harmonieuse malgré les hauteurs différentes.\n `,\n },\n },\n};\n\nIconTiles.parameters = {\n docs: {\n description: {\n story: `\nMosaïque de tuiles icônes (spw-tile variant=\"icon\") organisées en grille masonry. Chaque tuile affiche une icône FontAwesome, un titre et une description. Configuration 3/2/1 colonnes.\n\nCas d'usage : grille d'accès rapides aux services, menu de fonctionnalités principales, portail d'outils avec icônes représentatives. Format compact et visuellement équilibré.\n `,\n },\n },\n};\n\nLightTiles.parameters = {\n docs: {\n description: {\n story: `\nMosaïque de tuiles légères (spw-tile variant=\"light\") avec images de fond. Format minimaliste avec titre en overlay sur l'image. Configuration responsive 3/2/1 colonnes.\n\nCas d'usage : galerie de catégories thématiques, navigation visuelle par sections, portfolio de projets avec aperçu visuel. L'image attire l'attention et le titre identifie le contenu.\n `,\n },\n },\n};\n\nBigTiles.parameters = {\n docs: {\n description: {\n story: `\nMosaïque de grandes tuiles (spw-tile variant=\"big\") avec images plein format et titre en overlay. Format impactant avec icône chevron indiquant l'interactivité. Configuration 3/2/1 colonnes.\n\nCas d'usage : mise en avant de grandes thématiques, landing pages avec sections principales, portails avec accès aux univers majeurs. Format généreux qui valorise le contenu visuel.\n `,\n },\n },\n};\n"]}

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

@@ -21,7 +21,37 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Panneau latéral pour navigation ou actions contextuelles.
+Le composant Sidebar est un panneau latéral rétractable pour la navigation principale ou les actions contextuelles. Idéal pour les back-offices et applications web complexes nécessitant une navigation permanente et accessible.
+## Structure
+Le composant se compose de quatre éléments :
+- **spw-sidebar** : Conteneur principal avec gestion de l'état déplié/rétracté
+- **spw-sidebar-navigation-item** : Item de navigation avec icône, tooltip, badge et état actif
+- **spw-sidebar-navigation-dropdown** : Menu déroulant multi-niveaux
+- **spw-sidebar-navigation-separator** : Séparateur visuel entre groupes d'items
+## Slots disponibles
+- **navigation-top** : Éléments de navigation principaux (partie haute)
+- **navigation-bottom** : Éléments de navigation secondaires (partie basse, fixée au bas)
+## Fonctionnalités
+- Rétracter/déplier via bouton toggle ou bordure cliquable
+- Navigation multi-niveaux avec dropdowns imbriqués
+- Tooltips automatiques en mode rétracté
+- Badges de notification sur items
+- État actif synchronisé avec la page courante
+- Gestion automatique de la classe body pour adaptation du layout
+- Compatible avec spw-topbar (détection automatique)
+## Cas d'usage
+- Navigation principale de back-office
+- Menus de configuration et administration
+- Interfaces d'applications métier
+- Portails avec navigation complexe
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)
         `,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-sidebar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-sidebar/spw-sidebar.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,gBAAgB,GAAG,CAAC,kCAAkC,EAAE,iCAAiC,EAAE,6BAA6B,CAAC,CAAC;AAEhI,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,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,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CjB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,OAAO,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,eAAe,EAAE,KAAK;CACvB,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-sidebar';\n\nconst subComponentTags = ['spw-sidebar-navigation-separator', 'spw-sidebar-navigation-dropdown', 'spw-sidebar-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Sidebar',\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\~~nPanneau~~ latéral pour navigation ou actions contextuelles. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n return /* HTML */ `\n <div slot=\"navigation-top\">\n <spw-sidebar-navigation-item icon=\"fa-home\" tooltip-title=\"Accueil\" active> Accueil </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-file\" bubble=\"3\" tooltip-title=\"Documents\">\n Documents\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n </spw-sidebar-navigation-dropdown>\n </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-calendar\" tooltip-title=\"Calendrier\"> Calendrier </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-envelope\" tooltip-title=\"Messages\" bubble=\"9\"> Messages </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-chart-sine\" tooltip-title=\"Statistiques\"> Statistiques </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-cloud\" tooltip-title=\"Fichiers\"> Fichiers </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-user-shield\" tooltip-title=\"Permissions\" disabled> Permissions </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-address-book\" tooltip-title=\"Annuaire\" bubbles=\"1\"> Annuaire </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-moon\" tooltip-title=\"Mode sombre\"> Mode sombre </spw-sidebar-navigation-item>\n </div>\n <div slot=\"navigation-bottom\">\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-globe\" tooltip-title=\"Liens utiles\"> Liens utiles </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-circle-question\" tooltip-title=\"Aide\"> Aide </spw-sidebar-navigation-item>\n </div>\n `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n const element = document.createElement(elementTag);\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 element.innerHTML = htmlContentDefault();\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n defaultExpanded: false,\n};\n"]}
1	+ {"version":3,"file":"spw-sidebar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-sidebar/spw-sidebar.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,gBAAgB,GAAG,CAAC,kCAAkC,EAAE,iCAAiC,EAAE,6BAA6B,CAAC,CAAC;AAEhI,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoCV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CjB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,OAAO,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,eAAe,EAAE,KAAK;CACvB,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-sidebar';\n\nconst subComponentTags = ['spw-sidebar-navigation-separator', 'spw-sidebar-navigation-dropdown', 'spw-sidebar-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Sidebar',\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 Sidebar est un panneau latéral rétractable pour la navigation principale ou les actions contextuelles. Idéal pour les back-offices et applications web complexes nécessitant une navigation permanente et accessible.\n\n## Structure\n\nLe composant se compose de quatre éléments :\n- spw-sidebar : Conteneur principal avec gestion de l'état déplié/rétracté\n- spw-sidebar-navigation-item : Item de navigation avec icône, tooltip, badge et état actif\n- spw-sidebar-navigation-dropdown : Menu déroulant multi-niveaux\n- spw-sidebar-navigation-separator : Séparateur visuel entre groupes d'items\n\n## Slots disponibles\n\n- navigation-top : Éléments de navigation principaux (partie haute)\n- navigation-bottom : Éléments de navigation secondaires (partie basse, fixée au bas)\n\n## Fonctionnalités\n\n- Rétracter/déplier via bouton toggle ou bordure cliquable\n- Navigation multi-niveaux avec dropdowns imbriqués\n- Tooltips automatiques en mode rétracté\n- Badges de notification sur items\n- État actif synchronisé avec la page courante\n- Gestion automatique de la classe body pour adaptation du layout\n- Compatible avec spw-topbar (détection automatique)\n\n## Cas d'usage\n\n- Navigation principale de back-office\n- Menus de configuration et administration\n- Interfaces d'applications métier\n- Portails avec navigation complexe\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n return /* HTML */ `\n <div slot=\"navigation-top\">\n <spw-sidebar-navigation-item icon=\"fa-home\" tooltip-title=\"Accueil\" active> Accueil </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-file\" bubble=\"3\" tooltip-title=\"Documents\">\n Documents\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n </spw-sidebar-navigation-dropdown>\n </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-calendar\" tooltip-title=\"Calendrier\"> Calendrier </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-envelope\" tooltip-title=\"Messages\" bubble=\"9\"> Messages </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-chart-sine\" tooltip-title=\"Statistiques\"> Statistiques </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-cloud\" tooltip-title=\"Fichiers\"> Fichiers </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-user-shield\" tooltip-title=\"Permissions\" disabled> Permissions </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-address-book\" tooltip-title=\"Annuaire\" bubbles=\"1\"> Annuaire </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-moon\" tooltip-title=\"Mode sombre\"> Mode sombre </spw-sidebar-navigation-item>\n </div>\n <div slot=\"navigation-bottom\">\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-globe\" tooltip-title=\"Liens utiles\"> Liens utiles </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-circle-question\" tooltip-title=\"Aide\"> Aide </spw-sidebar-navigation-item>\n </div>\n `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n const element = document.createElement(elementTag);\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 element.innerHTML = htmlContentDefault();\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n defaultExpanded: false,\n};\n"]}

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

@@ -21,7 +21,27 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Enchaînement d’éléments défilants pour navigation et mise en avant.
+Le composant Slider (carousel) permet d'afficher un enchaînement d'éléments défilants. Idéal pour mettre en avant plusieurs contenus importants dans un espace limité avec navigation fluide entre les items.
+## Structure
+Le composant se compose de deux éléments :
+- **spw-slider** : Conteneur du carousel avec contrôles
+- **spw-slider-item** : Item individuel du carousel (généralement contient un spw-hero)
+## Fonctionnalités
+- Navigation par flèches (clavier et boutons)
+- Indicateurs de pagination cliquables
+- Autoplay avec contrôle play/pause
+- Swipe tactile sur mobile et tablette
+- Support du clavier (flèches gauche/droite)
+- Boucle infinie optionnelle
+## Cas d'usage
+- Bannières de mise en avant sur homepage
+- Carrousels d'actualités ou événements
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
         `,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-slider.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-slider/spw-slider.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAE7C,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,8BAA8B;IACrC,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;IAClB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BjB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,OAAO,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;IAElC,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,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,IAAI;IACd,kBAAkB,EAAE,KAAK;IACzB,gBAAgB,EAAE,IAAI;IACtB,eAAe,EAAE,KAAK;CACvB,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-slider';\n\nconst subComponentTags = ['spw-slider-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Carousel (slider)',\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\~~nEnchaînement~~ d~~’éléments~~ défilants pour navigation et mise en avant.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n return /* HTML */ `\n <spw-slider-item>\n <spw-hero variant=\"photo\" alignment=\"left\" image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Paysage naturel\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Découvrez la Wallonie</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">Un territoire riche en patrimoine, culture et opportunités pour tous les citoyens.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"left\">\n <spw-button variant=\"primary\">En savoir plus</spw-button>\n <spw-button variant=\"secondary\">Voir les services</spw-button>\n </spw-group>\n </spw-hero>\n </spw-slider-item>\n <spw-slider-item>\n <spw-hero variant=\"photo\" alignment=\"center\" image-src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab\" image-alt=\"Architecture moderne\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Innovation et développement</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">La Wallonie investit dans l'avenir avec des projets innovants et durables.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"center\">\n <spw-button variant=\"primary\">Découvrir les projets</spw-button>\n </spw-group>\n </spw-hero>\n </spw-slider-item>\n <spw-slider-item>\n <spw-hero variant=\"photo\" alignment=\"right\" image-src=\"https://images.unsplash.com/photo-1542744173-8e7e53415bb0\" image-alt=\"Équipe collaborative\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Services aux citoyens</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">Accédez facilement à tous les services publics de la région wallonne en ligne.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"right\">\n <spw-button variant=\"primary\">Accéder aux services</spw-button>\n <spw-button variant=\"tertiary\">Contactez-nous</spw-button>\n </spw-group>\n </spw-hero>\n </spw-slider-item>\n `;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\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 element.innerHTML = htmlContent();\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n showArrows: true,\n showDots: true,\n showAutoplayToggle: false,\n autoplayInterval: 5000,\n autoplayEnabled: false,\n};\n"]}
1	+ {"version":3,"file":"spw-slider.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-slider/spw-slider.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,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAE7C,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW;IAClB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BjB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,OAAO,CAAC,SAAS,GAAG,WAAW,EAAE,CAAC;IAElC,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,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,IAAI;IACd,kBAAkB,EAAE,KAAK;IACzB,gBAAgB,EAAE,IAAI;IACtB,eAAe,EAAE,KAAK;CACvB,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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-slider';\n\nconst subComponentTags = ['spw-slider-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Carousel (slider)',\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 Slider (carousel) permet d'afficher un enchaînement d'éléments défilants. Idéal pour mettre en avant plusieurs contenus importants dans un espace limité avec navigation fluide entre les items.\n\n## Structure\n\nLe composant se compose de deux éléments :\n- spw-slider : Conteneur du carousel avec contrôles\n- spw-slider-item : Item individuel du carousel (généralement contient un spw-hero)\n\n## Fonctionnalités\n\n- Navigation par flèches (clavier et boutons)\n- Indicateurs de pagination cliquables\n- Autoplay avec contrôle play/pause\n- Swipe tactile sur mobile et tablette\n- Support du clavier (flèches gauche/droite)\n- Boucle infinie optionnelle\n\n## Cas d'usage\n\n- Bannières de mise en avant sur homepage\n- Carrousels d'actualités ou événements\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n return /* HTML */ `\n <spw-slider-item>\n <spw-hero variant=\"photo\" alignment=\"left\" image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Paysage naturel\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Découvrez la Wallonie</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">Un territoire riche en patrimoine, culture et opportunités pour tous les citoyens.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"left\">\n <spw-button variant=\"primary\">En savoir plus</spw-button>\n <spw-button variant=\"secondary\">Voir les services</spw-button>\n </spw-group>\n </spw-hero>\n </spw-slider-item>\n <spw-slider-item>\n <spw-hero variant=\"photo\" alignment=\"center\" image-src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab\" image-alt=\"Architecture moderne\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Innovation et développement</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">La Wallonie investit dans l'avenir avec des projets innovants et durables.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"center\">\n <spw-button variant=\"primary\">Découvrir les projets</spw-button>\n </spw-group>\n </spw-hero>\n </spw-slider-item>\n <spw-slider-item>\n <spw-hero variant=\"photo\" alignment=\"right\" image-src=\"https://images.unsplash.com/photo-1542744173-8e7e53415bb0\" image-alt=\"Équipe collaborative\">\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Services aux citoyens</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">Accédez facilement à tous les services publics de la région wallonne en ligne.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"right\">\n <spw-button variant=\"primary\">Accéder aux services</spw-button>\n <spw-button variant=\"tertiary\">Contactez-nous</spw-button>\n </spw-group>\n </spw-hero>\n </spw-slider-item>\n `;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\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 element.innerHTML = htmlContent();\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n showArrows: true,\n showDots: true,\n showAutoplayToggle: false,\n autoplayInterval: 5000,\n autoplayEnabled: false,\n};\n"]}

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

@@ -20,7 +20,20 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-Permet d'afficher un bandeau avec les réseaux sociaux.
+Le composant Réseaux sociaux affiche un bandeau horizontal contenant des liens vers les différents profils de réseaux sociaux d'une organisation. Il permet de centraliser et de mettre en valeur la présence sociale de manière cohérente.
+## Structure
+Le composant se compose de :
+- **Titre principal** : Customisable via la propriété mainTitle
+- **Slot** : Contient les liens vers les réseaux sociaux avec leurs icônes
+## Fonctionnalités
+- Affichage des icônes de réseaux sociaux dans un conteneur horizontal
+- Support de tous les réseaux sociaux via les icônes Font Awesome Brands
+- Style cohérent avec le design system
+- Responsive design adapté à tous les écrans
         `,
             },
         },
@@ -59,4 +72,15 @@ export const Default = Template.bind({});
 Default.args = {
     mainTitle: 'Restez connecté',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Exemple de bandeau de réseaux sociaux avec les principales plateformes sociales. Le composant affiche un titre personnalisable suivi des icônes cliquables des réseaux sociaux.
+Cas d'usage typique : placé en footer ou dans une sidebar pour encourager les utilisateurs à suivre l'organisation sur les réseaux sociaux. Les icônes utilisent Font Awesome Brands et s'ouvrent dans un nouvel onglet.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-socials.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-socials.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-socials/spw-socials.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,4BAA4B;IACnC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE~~;;;;SAIV~~;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW;IAClB,OAAO;;;;;;CAMR,CAAC;AACF,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,EAAE,CAAC;IACpC,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,SAAS,EAAE,iBAAiB;CAC7B,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-socials';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Organismes/Réseaux sociaux',\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~~ ~~d'afficher~~ un bandeau ~~avec~~ les réseaux sociaux.\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(): string {\n return `\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-facebook\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-instagram\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-x-twitter\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-youtube\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-linkedin-in\"></spw-icon></a>\n`;\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();\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n mainTitle: 'Restez connecté',\n};\n"]}
1	+ {"version":3,"file":"spw-socials.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-socials/spw-socials.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,4BAA4B;IACnC,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;SAiBV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW;IAClB,OAAO;;;;;;CAMR,CAAC;AACF,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,EAAE,CAAC;IACpC,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,SAAS,EAAE,iBAAiB;CAC7B,CAAC;AACF,OAAO,CAAC,UAAU,GAAG;IACnB,IAAI,EAAE;QACJ,WAAW,EAAE;YACX,KAAK,EAAE;;;;OAIN;SACF;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-socials';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Organismes/Réseaux sociaux',\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 Réseaux sociaux affiche un bandeau horizontal contenant des liens vers les différents profils de réseaux sociaux d'une organisation. Il permet de centraliser et de mettre en valeur la présence sociale de manière cohérente.\n\n## Structure\n\nLe composant se compose de :\n- Titre principal : Customisable via la propriété mainTitle\n- Slot : Contient les liens vers les réseaux sociaux avec leurs icônes\n\n## Fonctionnalités\n\n- Affichage des icônes de réseaux sociaux dans un conteneur horizontal\n- Support de tous les réseaux sociaux via les icônes Font Awesome Brands\n- Style cohérent avec le design system\n- Responsive design adapté à tous les écrans\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(): string {\n return `\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-facebook\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-instagram\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-x-twitter\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-youtube\"></spw-icon></a>\n <a target=\"_blank\" href=\"#\"><spw-icon variant=\"fa-brands\" icon=\"fa-linkedin-in\"></spw-icon></a>\n`;\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();\n }\n\n return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n mainTitle: 'Restez connecté',\n};\nDefault.parameters = {\n docs: {\n description: {\n story: `\nExemple de bandeau de réseaux sociaux avec les principales plateformes sociales. Le composant affiche un titre personnalisable suivi des icônes cliquables des réseaux sociaux.\n\nCas d'usage typique : placé en footer ou dans une sidebar pour encourager les utilisateurs à suivre l'organisation sur les réseaux sociaux. Les icônes utilisent Font Awesome Brands et s'ouvrent dans un nouvel onglet.\n `,\n },\n },\n};\n"]}