@spw-ds/spw-stencil-library 1.11.0 → 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>`,
+        },
+    },
 };