@spw-ds/spw-stencil-library 1.10.2 → 1.12.0

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

@@ -32,15 +32,18 @@ Le composant se compose de deux éléments :
 ## Fonctionnalités
 
 - Navigation par flèches (clavier et boutons)
-- Indicateurs de pagination cliquables
-- Autoplay avec contrôle play/pause
+- Indicateurs de pagination (dots) cliquables
+- Position des flèches : intérieure (défaut) ou extérieure via arrows-position="outside"
+- Position des dots : intérieure (défaut) ou extérieure via dots-position="outside"
+- Autoplay avec contrôle play/pause et intervalle configurable
 - Swipe tactile sur mobile et tablette
 - Support du clavier (flèches gauche/droite)
-- Boucle infinie optionnelle
+- Hauteur fixe optionnelle via has-fixed-height
 
 ## Cas d'usage
 
 - Bannières de mise en avant sur homepage
+- Carrousels d'images (hero featured)
 - Carrousels d'actualités ou événements
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
@@ -50,7 +53,8 @@ Le composant se compose de deux éléments :
     },
 };
 export default meta;
-function htmlContent() {
+// ─── Contenus réutilisables ───────────────────────────────────────────────
+function heroSlides() {
     return /* HTML */ `
     <spw-slider-item>
       <spw-hero variant="photo" alignment="left" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Paysage naturel">
@@ -83,6 +87,31 @@ function htmlContent() {
     </spw-slider-item>
   `;
 }
+function featuredSlides() {
+    return /* HTML */ `
+    <spw-slider-item>
+      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600" image-alt="Montagne au coucher du soleil"></spw-hero>
+    </spw-slider-item>
+    <spw-slider-item>
+      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1600" image-alt="Forêt dense en automne"></spw-hero>
+    </spw-slider-item>
+    <spw-slider-item>
+      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600" image-alt="Plage tropicale"></spw-hero>
+    </spw-slider-item>
+    <spw-slider-item>
+      <spw-hero variant="featured" image-src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1600" image-alt="Lac de montagne"></spw-hero>
+    </spw-slider-item>
+  `;
+}
+// ─── Template générique ───────────────────────────────────────────────────
+function makeSlider(attrs, content) {
+    const element = document.createElement(elementTag);
+    Object.entries(attrs).forEach(([key, val]) => {
+        element.setAttribute(toKebabCase(key), String(val));
+    });
+    element.innerHTML = content;
+    return element;
+}
 const Template = args => {
     const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
@@ -95,14 +124,121 @@ const Template = args => {
             element.addEventListener(key.substring(2).toLowerCase(), val);
         }
     });
-    element.innerHTML = htmlContent();
+    element.innerHTML = heroSlides();
     return element;
 };
+// ─── Story 1 : Défaut ─────────────────────────────────────────────────────
 export const Default = Template.bind({});
 Default.args = {
     showArrows: true,
     showDots: true,
     showAutoplayToggle: false,
-    autoplayInterval: 5000,
     autoplayEnabled: false,
+    arrowsPosition: 'inside',
+    dotsPosition: 'inside',
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Carousel avec hero photo, flèches et dots à l'intérieur. Configuration par défaut pour une bannière homepage.`,
+        },
+    },
+};
+// ─── Story 2 : Flèches à l'extérieur ─────────────────────────────────────
+export const ArrowsOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'inside' }, heroSlides());
+ArrowsOutside.parameters = {
+    docs: {
+        description: {
+            story: `Flèches positionnées à l'extérieur du slider via arrows-position="outside". Le contenu n'est pas masqué par les boutons de navigation. Recommandé quand le contenu du hero est dense.`,
+        },
+        source: {
+            code: `<spw-slider show-arrows="true" arrows-position="outside">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
+        },
+    },
+};
+// ─── Story 3 : Dots à l'extérieur ────────────────────────────────────────
+export const DotsOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'inside', dotsPosition: 'outside' }, heroSlides());
+DotsOutside.parameters = {
+    docs: {
+        description: {
+            story: `Dots positionnés à l'extérieur du slider via dots-position="outside". Utile pour ne pas masquer le contenu de l'image par les indicateurs de pagination.`,
+        },
+        source: {
+            code: `<spw-slider show-dots="true" dots-position="outside">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
+        },
+    },
+};
+// ─── Story 4 : Flèches et dots à l'extérieur ─────────────────────────────
+export const AllOutside = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'outside' }, heroSlides());
+AllOutside.parameters = {
+    docs: {
+        description: {
+            story: `Flèches et dots tous les deux à l'extérieur. Le contenu du slider est entièrement libéré de tout élément UI superposé.`,
+        },
+        source: {
+            code: `<spw-slider arrows-position="outside" dots-position="outside">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
+        },
+    },
+};
+// ─── Story 5 : Galerie d'images (hero featured) ───────────────────────────
+export const GalerieImages = () => makeSlider({ showArrows: true, showDots: true, arrowsPosition: 'outside', dotsPosition: 'outside' }, featuredSlides());
+GalerieImages.parameters = {
+    docs: {
+        description: {
+            story: `Carousel d'images plein format avec le variant featured du hero. Aucun texte superposé — idéal pour une galerie photo immersive. Flèches et dots à l'extérieur pour ne pas obstruer les images.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-slider show-arrows="true" show-dots="true" arrows-position="outside" dots-position="outside">
+          <spw-slider-item>
+            <spw-hero variant="featured" image-src="..." image-alt="..."></spw-hero>
+          </spw-slider-item>
+          <!-- ... -->
+        </spw-slider>
+      `,
+        },
+    },
+};
+// ─── Story 6 : Autoplay ───────────────────────────────────────────────────
+export const Autoplay = () => makeSlider({ showArrows: true, showDots: true, showAutoplayToggle: true, autoplayEnabled: true, autoplayInterval: 3000, dotsPosition: 'inside' }, heroSlides());
+Autoplay.parameters = {
+    docs: {
+        description: {
+            story: `Défilement automatique activé par défaut avec un intervalle de 3 secondes. Le toggle play/pause est visible sous le slider via show-autoplay-toggle="true". L'autoplay se met en pause lors du swipe ou du changement manuel.`,
+        },
+        source: {
+            code: `<spw-slider show-autoplay-toggle="true" autoplay-enabled="true" autoplay-interval="3000">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
+        },
+    },
+};
+// ─── Story 7 : Autoplay + galerie images ──────────────────────────────────
+export const AutoplayGalerie = () => makeSlider({ showArrows: false, showDots: true, showAutoplayToggle: true, autoplayEnabled: true, autoplayInterval: 4000, arrowsPosition: 'inside', dotsPosition: 'outside' }, featuredSlides());
+AutoplayGalerie.parameters = {
+    docs: {
+        description: {
+            story: `Diaporama automatique d'images plein format sans flèches. Dots à l'extérieur et toggle autoplay visible.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-slider show-arrows="false" show-dots="true" dots-position="outside" show-autoplay-toggle="true" autoplay-enabled="true" autoplay-interval="4000">
+          <spw-slider-item>
+            <spw-hero variant="featured" image-src="..." image-alt="..."></spw-hero>
+          </spw-slider-item>
+          <!-- ... -->
+        </spw-slider>
+      `,
+        },
+    },
+};
+// ─── Story 8 : Hauteur fixe ───────────────────────────────────────────────
+export const HauteurFixe = () => makeSlider({ showArrows: true, showDots: true, hasFixedHeight: true, dotsPosition: 'inside' }, heroSlides());
+HauteurFixe.parameters = {
+    docs: {
+        description: {
+            story: `Avec has-fixed-height="true", le slider adopte la hauteur de la slide la plus haute et ne change plus de taille lors de la navigation. Évite le saut de layout entre des slides de hauteurs différentes.`,
+        },
+        source: {
+            code: `<spw-slider has-fixed-height="true">\n  <!-- spw-slider-item ... -->\n</spw-slider>`,
+        },
+    },
 };

package/dist/collection/stories/organisms/spw-toc/spw-toc.stories.js

@@ -30,6 +30,11 @@ Le composant se compose de trois parties :
 - spw-toc-container : Contient le contenu avec les titres à indexer
 - spw-toc-navigation : Affiche la navigation générée automatiquement
 
+## Variants de spw-toc-navigation
+
+- **progress** (défaut) : affiche une barre de progression par section h2 et un indicateur de section active
+- **simple** : navigation épurée sans barre de progression, uniquement les liens de navigation
+
 ## Fonctionnalités
 
 - Génération automatique des liens de navigation basée sur les titres h2-h6
@@ -138,22 +143,30 @@ function htmlContentWithAccordions() {
               </spw-toc-container>
             </div>
 
-            <aside class="spw-ds-template-generic__aside spw-ds-template-generic__aside--top-mobile spw-ds-template-generic__aside--is-sticky">
-              <div class="spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--top mb-4">
-                <h2 class="spw-ds-typography-heading-03 mb-3">Sommaire</h2>
-                <spw-toc-navigation></spw-toc-navigation>
-              </div>
-              <div class="spw-ds-template-generic__aside-content spw-ds-template-generic__aside-content--bottom">
-                <h2 class="spw-ds-typography-heading-03 mb-3">Besoin d'aide ?</h2>
-                <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
-                <spw-separator class="my-3"></spw-separator>
-                <spw-group orientation="vertical">
-                  <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
-                  <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
-                  <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
-                </spw-group>
-                <spw-button is-full-width class="mt-4 w-100" variant="primary">Formulaire en ligne</spw-button>
-              </div>
+            <aside class="spw-ds-template-generic__aside">
+              <spw-box is-sticky="false" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
+                <div slot="header">
+                  <h2 class="spw-ds-typography-heading-03 mb-0">Sommaire</h2>
+                </div>
+                <div class="mt-3">
+                  <spw-toc-navigation></spw-toc-navigation>
+                </div>
+              </spw-box>
+              <spw-box is-sticky="true" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
+                <div slot="header">
+                  <h2 class="spw-ds-typography-heading-03 mb-0">Besoin d'aide ?</h2>
+                </div>
+                <div class="mt-3">
+                  <p class="spw-ds-typography-body-01 mb-3">Contactez-nous si vous ne trouvez pas la réponse à votre question.</p>
+                  <spw-separator class="my-3"></spw-separator>
+                  <spw-group orientation="vertical">
+                    <spw-link variant="primary" icon="fa-phone" icon-position="left" href="tel:081654449">081 / 65 44 49</spw-link>
+                    <spw-link variant="primary" icon="fa-envelope" icon-position="left" href="mailto:mail@mail.be">mail@mail.be</spw-link>
+                    <spw-link variant="primary" icon="fa-globe" icon-position="left" href="#">www.wallonie.be</spw-link>
+                  </spw-group>
+                  <spw-button is-full-width class="mt-4 w-100" variant="primary">Formulaire en ligne</spw-button>
+                </div>
+              </spw-box>
             </aside>
           </div>
         </div>
@@ -204,11 +217,15 @@ function htmlContentSimple() {
               </spw-toc-container>
             </div>
 
-            <aside class="spw-ds-template-generic__aside spw-ds-template-generic__aside--is-sticky">
-              <div class="spw-ds-template-generic__aside-content">
-                <h2 class="spw-ds-typography-heading-03 mb-3">Sommaire</h2>
-                <spw-toc-navigation></spw-toc-navigation>
-              </div>
+            <aside class="spw-ds-template-generic__aside">
+              <spw-box is-sticky="false" padding="medium" has-radius="true" has-shadow="true" class="mb-4">
+                <div slot="header">
+                  <h2 class="spw-ds-typography-heading-03 mb-0">Sommaire</h2>
+                </div>
+                <div class="mt-3">
+                  <spw-toc-navigation variant="simple"></spw-toc-navigation>
+                </div>
+              </spw-box>
             </aside>
           </div>
         </div>
@@ -230,14 +247,7 @@ export const FAQ = TemplateFAQ.bind({});
 FAQ.parameters = {
     docs: {
         description: {
-            story: `
-Exemple complet d'une page FAQ avec Table of Contents. Le composant génère automatiquement la navigation basée sur les titres h2 présents dans le contenu.
-
-La navigation affiche :
-- Les sections principales (h2) avec une barre de progression
-- Un indicateur visuel de la section active
-- Un smooth scroll vers la section cliquée
-      `,
+            story: `Variant progress (défaut) — page FAQ avec accordéons. La navigation affiche une barre de progression par section h2, un indicateur de section active et un smooth scroll vers la section cliquée.`,
         },
     },
 };
@@ -245,11 +255,7 @@ export const Simple = TemplateSimple.bind({});
 Simple.parameters = {
     docs: {
         description: {
-            story: `
-Exemple simplifié avec un guide utilisateur. La table des matières génère automatiquement les liens pour tous les niveaux de titres (h2, h3, h4, etc.).
-
-Les titres sans ID se voient attribuer automatiquement un ID slugifié basé sur leur contenu textuel.
-      `,
+            story: `Variant simple — navigation épurée sans barre de progression. Les liens h2 et h3 sont générés automatiquement, les titres sans ID reçoivent un ID slugifié basé sur leur contenu textuel.`,
         },
     },
 };

package/dist/collection/utils/animation.js

@@ -1,8 +1,13 @@
 export function animationTo(element, keyframes, options) {
     const animated = element.animate(keyframes, Object.assign(Object.assign({}, options), { fill: 'both' }));
     animated.addEventListener('finish', () => {
-        // @ts-ignore
-        animated.commitStyles();
+        try {
+            // @ts-ignore
+            animated.commitStyles();
+        }
+        catch (_a) {
+            // Element may not be rendered (e.g. rapid open/close), safe to ignore
+        }
         animated.cancel();
     });
     return animated;