@spw-ds/spw-stencil-library 1.3.3 → 1.3.5

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

@@ -221,6 +221,101 @@ function htmlContentBigTiles() {
     </spw-mosaic-item>
   `;
 }
+function htmlContentFeaturedCard() {
+    return /* HTML */ `
+    <spw-mosaic-item col-span-desktop="2" col-span-tablet="2">
+      <spw-card variant="highlighted" full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio-mobile="4/3" ratio-tablet="16/8" ratio-desktop="15/9">
+          <img alt="Vennbahn au Couvent Vert" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Vennbahn : une piste cyclable transfrontalière exceptionnelle</spw-card-title>
+          <spw-card-excerpt>
+            La Vennbahn, ancienne ligne de chemin de fer, est aujourd'hui une véloroute transfrontalière traversant la Belgique et l'Allemagne sur 125 km. Elle offre un parcours
+            unique à travers les Hautes Fagnes.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Mobilité" date="2024-02-08">
+          <spw-card-title>Nouveaux aménagements cyclables en Wallonie</spw-card-title>
+          <spw-card-excerpt>Le réseau cyclable wallon s'enrichit de nouveaux aménagements pour faciliter la mobilité douce.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Patrimoine" date="2024-02-07">
+          <spw-card-title>Restauration des châteaux wallons</spw-card-title>
+          <spw-card-excerpt>Programme de restauration pour préserver notre patrimoine historique exceptionnel.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Environnement" date="2024-02-06">
+          <spw-card-title>Protection des espaces naturels</spw-card-title>
+          <spw-card-excerpt>Nouvelles mesures pour préserver la biodiversité de nos régions.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Énergie" date="2024-02-05">
+          <spw-card-title>Transition énergétique en Wallonie</spw-card-title>
+          <spw-card-excerpt>Initiatives locales pour un avenir énergétique durable et renouvelable.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Tourisme" date="2024-02-04">
+          <spw-card-title>Promotion du tourisme local</spw-card-title>
+          <spw-card-excerpt>Campagne de valorisation des attraits touristiques wallons.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Infrastructure" date="2024-02-03">
+          <spw-card-title>Modernisation des routes régionales</spw-card-title>
+          <spw-card-excerpt>Travaux d'amélioration pour un réseau routier plus sûr et efficace.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Culture" date="2024-02-02">
+          <spw-card-title>Festivals culturels wallons 2024</spw-card-title>
+          <spw-card-excerpt>Découvrez la programmation culturelle exceptionnelle de cette année.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+  `;
+}
 function camelToKebab(str) {
     return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
 }
@@ -288,6 +383,22 @@ const TemplateBigTiles = args => {
     element.innerHTML = htmlContentBigTiles();
     return element;
 };
+const TemplateFeaturedCard = args => {
+    const element = document.createElement(elementTag);
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
+    Object.entries(args).forEach(([key, val]) => {
+        if (masterProps.includes(key)) {
+            const kebabKey = camelToKebab(key);
+            element.setAttribute(kebabKey, val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentFeaturedCard();
+    return element;
+};
 export const Cards = TemplateCards.bind({});
 Cards.args = {
     isMasonry: true,
@@ -316,6 +427,13 @@ BigTiles.args = {
     colsTablet: 2,
     colsMobile: 1,
 };
+export const FeaturedCard = TemplateFeaturedCard.bind({});
+FeaturedCard.args = {
+    isMasonry: true,
+    colsDesktop: 3,
+    colsTablet: 2,
+    colsMobile: 1,
+};
 Cards.parameters = {
     docs: {
         description: {
@@ -360,3 +478,16 @@ Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections
         },
     },
 };
+FeaturedCard.parameters = {
+    docs: {
+        description: {
+            story: `
+Mosaïque avec carte mise en avant utilisant l'override de colSpan. La première carte (variant="highlighted") occupe 2 colonnes en desktop et tablette grâce aux props col-span-desktop="2" et col-span-tablet="2" sur le spw-mosaic-item. Elle utilise également des ratios d'image responsifs différenciés (4/3 mobile, 16/8 tablette, 15/9 desktop). Les autres cartes occupent 1 colonne avec un ratio 16/9 standard.
+
+Cas d'usage : page d'actualités avec article principal mis en avant, galerie avec contenu featured, portail avec mise en évidence d'un événement majeur. Cette approche attire l'attention sur le contenu prioritaire tout en préservant une navigation claire vers les autres contenus.
+
+**Note technique** : Le mode masonry fonctionne mieux avec des items de largeur uniforme. L'utilisation de colSpan avec masonry peut créer des espacements inattendus. Pour des mises en page avec largeurs variables, envisager de désactiver le masonry (is-masonry="false").
+      `,
+        },
+    },
+};