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

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

@@ -0,0 +1,333 @@
+let componentsData;
+try {
+    componentsData = require('../../../../dist/components_json.json');
+}
+catch (error) {
+    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
+    componentsData = {};
+}
+import { withComponentControls, extractArgTypes, toKebabCase } from "../../../utils/utils";
+const elementTag = 'spw-grid';
+const subComponentTags = ['spw-grid-item'];
+const argTypes = Object.assign(Object.assign({}, withComponentControls(componentsData, { tag: elementTag })), extractArgTypes(componentsData, subComponentTags));
+const meta = {
+    title: 'Organismes/Grille (grid)',
+    component: elementTag,
+    argTypes,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
+
+Système de grille pour organiser les éléments en colonnes et lignes responsives.        `,
+            },
+        },
+    },
+};
+export default meta;
+function htmlContentBasicGrid() {
+    return /* HTML */ `
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Services aux citoyens" variant="light" href="#">
+        <spw-tile-title>Services aux citoyens</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Aides et subsides" variant="light" href="#">
+        <spw-tile-title>Aides et subsides</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Emploi et formation" variant="light" href="#">
+        <spw-tile-title>Emploi et formation</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Environnement" variant="light" href="#">
+        <spw-tile-title>Environnement</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Mobilité" variant="light" href="#">
+        <spw-tile-title>Mobilité</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Patrimoine" variant="light" href="#">
+        <spw-tile-title>Patrimoine</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+  `;
+}
+function htmlContentWithSpans() {
+    return /* HTML */ `
+    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Actualité principale" variant="big" href="#">
+        <spw-tile-title>Actualité principale - Grande tuile 2x2</spw-tile-title>
+        <spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Actualité 2" variant="light" href="#">
+        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Actualité 3" variant="light" href="#">
+        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Actualité 4" variant="light" href="#">
+        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Actualité 5" variant="light" href="#">
+        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Actualité 6" variant="light" href="#">
+        <spw-tile-title>Actualité secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+  `;
+}
+function htmlContentSquareTiles() {
+    return /* HTML */ `
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tourisme" variant="light" href="#">
+        <spw-tile-title>Tourisme</spw-tile-title>
+        <spw-tile-description>Visitez la Wallonie</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Culture" variant="light" href="#">
+        <spw-tile-title>Culture</spw-tile-title>
+        <spw-tile-description>Événements culturels</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Économie" variant="light" href="#">
+        <spw-tile-title>Économie</spw-tile-title>
+        <spw-tile-description>Soutien aux entreprises</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Innovation" variant="light" href="#">
+        <spw-tile-title>Innovation</spw-tile-title>
+        <spw-tile-description>Projets innovants</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Éducation" variant="light" href="#">
+        <spw-tile-title>Éducation</spw-tile-title>
+        <spw-tile-description>Enseignement et écoles</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Santé" variant="light" href="#">
+        <spw-tile-title>Santé</spw-tile-title>
+        <spw-tile-description>Services de santé</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4" image-alt="Sport" variant="light" href="#">
+        <spw-tile-title>Sport</spw-tile-title>
+        <spw-tile-description>Infrastructures sportives</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Nature" variant="light" href="#">
+        <spw-tile-title>Nature</spw-tile-title>
+        <spw-tile-description>Espaces naturels</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+  `;
+}
+function htmlContentMixedSpans() {
+    return /* HTML */ `
+    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Mise en avant" variant="big" href="#">
+        <spw-tile-title>Contenu principal 2x2</spw-tile-title>
+        <spw-tile-description>Grande tuile occupant 2 colonnes et 2 lignes</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tuile 1" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Tuile 2" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Tuile 3" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Tuile 4" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Tuile 5" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Tuile 6" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+  `;
+}
+const TemplateBasic = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentBasicGrid();
+    return element;
+};
+const TemplateWithSpans = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentWithSpans();
+    return element;
+};
+const TemplateSquare = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentSquareTiles();
+    return element;
+};
+const TemplateMixed = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentMixedSpans();
+    return element;
+};
+export const Default = TemplateBasic.bind({});
+Default.args = {
+    colsDesktop: 3,
+    colsTablet: 2,
+    colsMobile: 1,
+};
+export const AvecTuileLarge = TemplateWithSpans.bind({});
+AvecTuileLarge.args = {
+    colsDesktop: 3,
+    colsTablet: 2,
+    colsMobile: 1,
+};
+AvecTuileLarge.storyName = 'Grille avec tuile large (3 colonnes)';
+AvecTuileLarge.parameters = {
+    docs: {
+        description: {
+            story: 'Grille de 3 colonnes avec une tuile mise en avant occupant 2 colonnes et 2 lignes sur desktop et tablette.',
+        },
+    },
+};
+export const GrilleCarree = TemplateSquare.bind({});
+GrilleCarree.args = {
+    colsDesktop: 4,
+    colsTablet: 2,
+    colsMobile: 1,
+};
+GrilleCarree.storyName = 'Grille carrée (4 colonnes)';
+GrilleCarree.parameters = {
+    docs: {
+        description: {
+            story: 'Grille de 4 colonnes sur desktop avec des tuiles carrées de taille uniforme.',
+        },
+    },
+};
+export const GrilleMixte = TemplateMixed.bind({});
+GrilleMixte.args = {
+    colsDesktop: 4,
+    colsTablet: 2,
+    colsMobile: 1,
+};
+GrilleMixte.storyName = 'Grille mixte (4 colonnes)';
+GrilleMixte.parameters = {
+    docs: {
+        description: {
+            story: 'Grille de 4 colonnes avec une grande tuile 2x2 et des tuiles normales carrées.',
+        },
+    },
+};
+//# sourceMappingURL=spw-grid.stories.js.map

package/dist/collection/stories/organisms/spw-grid/spw-grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-grid.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-grid/spw-grid.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, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-grid';\n\nconst subComponentTags = ['spw-grid-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Grille (grid)',\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\nSystème de grille pour organiser les éléments en colonnes et lignes responsives.        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContentBasicGrid() {\n  return /* HTML */ `\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Services aux citoyens\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Services aux citoyens</spw-tile-title>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab\" image-alt=\"Aides et subsides\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Aides et subsides</spw-tile-title>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1542744173-8e7e53415bb0\" image-alt=\"Emploi et formation\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Emploi et formation</spw-tile-title>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1497366216548-37526070297c\" image-alt=\"Environnement\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Environnement</spw-tile-title>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40\" image-alt=\"Mobilité\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Mobilité</spw-tile-title>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1531482615713-2afd69097998\" image-alt=\"Patrimoine\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Patrimoine</spw-tile-title>\n      </spw-tile>\n    </spw-grid-item>\n  `;\n}\n\nfunction htmlContentWithSpans() {\n  return /* HTML */ `\n    <spw-grid-item col-span-desktop=\"2\" row-span-desktop=\"2\" col-span-tablet=\"2\" row-span-tablet=\"2\">\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\" image-alt=\"Actualité principale\" variant=\"big\" href=\"#\">\n        <spw-tile-title>Actualité principale - Grande tuile 2x2</spw-tile-title>\n        <spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Actualité 2\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Actualité secondaire</spw-tile-title>\n        <spw-tile-description>Tuile de taille normale</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab\" image-alt=\"Actualité 3\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Actualité secondaire</spw-tile-title>\n        <spw-tile-description>Tuile de taille normale</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1542744173-8e7e53415bb0\" image-alt=\"Actualité 4\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Actualité secondaire</spw-tile-title>\n        <spw-tile-description>Tuile de taille normale</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1497366216548-37526070297c\" image-alt=\"Actualité 5\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Actualité secondaire</spw-tile-title>\n        <spw-tile-description>Tuile de taille normale</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"landscape\" image-src=\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40\" image-alt=\"Actualité 6\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Actualité secondaire</spw-tile-title>\n        <spw-tile-description>Tuile de taille normale</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n  `;\n}\n\nfunction htmlContentSquareTiles() {\n  return /* HTML */ `\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Tourisme\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tourisme</spw-tile-title>\n        <spw-tile-description>Visitez la Wallonie</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab\" image-alt=\"Culture\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Culture</spw-tile-title>\n        <spw-tile-description>Événements culturels</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1542744173-8e7e53415bb0\" image-alt=\"Économie\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Économie</spw-tile-title>\n        <spw-tile-description>Soutien aux entreprises</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1497366216548-37526070297c\" image-alt=\"Innovation\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Innovation</spw-tile-title>\n        <spw-tile-description>Projets innovants</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40\" image-alt=\"Éducation\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Éducation</spw-tile-title>\n        <spw-tile-description>Enseignement et écoles</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1531482615713-2afd69097998\" image-alt=\"Santé\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Santé</spw-tile-title>\n        <spw-tile-description>Services de santé</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4\" image-alt=\"Sport\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Sport</spw-tile-title>\n        <spw-tile-description>Infrastructures sportives</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\" image-alt=\"Nature\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Nature</spw-tile-title>\n        <spw-tile-description>Espaces naturels</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n  `;\n}\n\nfunction htmlContentMixedSpans() {\n  return /* HTML */ `\n    <spw-grid-item col-span-desktop=\"2\" row-span-desktop=\"2\" col-span-tablet=\"2\" row-span-tablet=\"2\">\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\" image-alt=\"Mise en avant\" variant=\"big\" href=\"#\">\n        <spw-tile-title>Contenu principal 2x2</spw-tile-title>\n        <spw-tile-description>Grande tuile occupant 2 colonnes et 2 lignes</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Tuile 1\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tuile normale</spw-tile-title>\n        <spw-tile-description>Contenu standard</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab\" image-alt=\"Tuile 2\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tuile normale</spw-tile-title>\n        <spw-tile-description>Contenu standard</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1542744173-8e7e53415bb0\" image-alt=\"Tuile 3\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tuile normale</spw-tile-title>\n        <spw-tile-description>Contenu standard</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1497366216548-37526070297c\" image-alt=\"Tuile 4\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tuile normale</spw-tile-title>\n        <spw-tile-description>Contenu standard</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40\" image-alt=\"Tuile 5\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tuile normale</spw-tile-title>\n        <spw-tile-description>Contenu standard</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n\n    <spw-grid-item>\n      <spw-tile height=\"square\" image-src=\"https://images.unsplash.com/photo-1531482615713-2afd69097998\" image-alt=\"Tuile 6\" variant=\"light\" href=\"#\">\n        <spw-tile-title>Tuile normale</spw-tile-title>\n        <spw-tile-description>Contenu standard</spw-tile-description>\n      </spw-tile>\n    </spw-grid-item>\n  `;\n}\n\nconst TemplateBasic: 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 = htmlContentBasicGrid();\n\n  return element;\n};\n\nconst TemplateWithSpans: 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 = htmlContentWithSpans();\n\n  return element;\n};\n\nconst TemplateSquare: 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 = htmlContentSquareTiles();\n\n  return element;\n};\n\nconst TemplateMixed: 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 = htmlContentMixedSpans();\n\n  return element;\n};\n\nexport const Default = TemplateBasic.bind({});\nDefault.args = {\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const AvecTuileLarge = TemplateWithSpans.bind({});\nAvecTuileLarge.args = {\n  colsDesktop: 3,\n  colsTablet: 2,\n  colsMobile: 1,\n};\nAvecTuileLarge.storyName = 'Grille avec tuile large (3 colonnes)';\nAvecTuileLarge.parameters = {\n  docs: {\n    description: {\n      story: 'Grille de 3 colonnes avec une tuile mise en avant occupant 2 colonnes et 2 lignes sur desktop et tablette.',\n    },\n  },\n};\n\nexport const GrilleCarree = TemplateSquare.bind({});\nGrilleCarree.args = {\n  colsDesktop: 4,\n  colsTablet: 2,\n  colsMobile: 1,\n};\nGrilleCarree.storyName = 'Grille carrée (4 colonnes)';\nGrilleCarree.parameters = {\n  docs: {\n    description: {\n      story: 'Grille de 4 colonnes sur desktop avec des tuiles carrées de taille uniforme.',\n    },\n  },\n};\n\nexport const GrilleMixte = TemplateMixed.bind({});\nGrilleMixte.args = {\n  colsDesktop: 4,\n  colsTablet: 2,\n  colsMobile: 1,\n};\nGrilleMixte.storyName = 'Grille mixte (4 colonnes)';\nGrilleMixte.parameters = {\n  docs: {\n    description: {\n      story: 'Grille de 4 colonnes avec une grande tuile 2x2 et des tuiles normales carrées.',\n    },\n  },\n};\n"]}

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

@@ -119,6 +119,154 @@ function htmlContent(slotArgs) {
     </spw-header-navigation>
   `;
 }
+function htmlContentVariant2(slotArgs) {
+    return /* HTML */ `
+    <div slot="right">
+      <spw-header-lang>
+        <option data-link="#" selected value="fr">Fr</option>
+        <option data-link="#" value="nl">Nl</option>
+      </spw-header-lang>
+    </div>
+
+    <div slot="search">
+      <spw-search-field class="mb-4" size="medium" name="search" placeholder="Rechercher..."></spw-search-field>
+      <h2 class="spw-ds-typography-heading-04 mb-4">Accès rapide :</h2>
+      <spw-group orientation="vertical">
+        <spw-link variant="tertiary">Contact</spw-link>
+        <spw-link variant="tertiary">FAQ</spw-link>
+        <spw-link variant="tertiary">Services en ligne</spw-link>
+      </spw-group>
+    </div>
+
+    <spw-header-navigation
+      extra-button="true"
+      extra-button-text="Bouton"
+      extra-button-href="#"
+      extra-button-target="_blank"
+      extra-button-icon="fa-arrow-right"
+      extra-button-variant="primary"
+    >
+      <spw-header-navigation-item is-active="${slotArgs.isActive}">
+        <a href="#">Accueil</a>
+      </spw-header-navigation-item>
+
+      <spw-header-navigation-item>
+        <a href="#">Services</a>
+        <spw-header-navigation-dropdown>
+          <spw-header-navigation-item>
+            <a href="#">Service 1</a>
+          </spw-header-navigation-item>
+          <spw-header-navigation-item>
+            <a href="#">Service 2</a>
+          </spw-header-navigation-item>
+          <spw-header-navigation-item>
+            <a href="#">Service 3</a>
+          </spw-header-navigation-item>
+        </spw-header-navigation-dropdown>
+      </spw-header-navigation-item>
+
+      <spw-header-navigation-item>
+        <a href="#">Documentation</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Contact</a>
+      </spw-header-navigation-item>
+    </spw-header-navigation>
+  `;
+}
+function htmlContentVariant3(slotArgs) {
+    return /* HTML */ `
+    <div slot="logo">
+      <img src="https://placehold.co/200x80/EEE/31343C?text=Logo" alt="Logo personnalisé" />
+    </div>
+    <div slot="logo-mobile">
+      <img src="https://placehold.co/200x80/EEE/31343C?text=Logo" alt="Logo personnalisé" />
+    </div>
+    <div slot="top-left">
+      <spw-header-persona>
+        <option data-link="#" selected value="particulier">Particulier</option>
+        <option data-link="#" value="professionnel">Professionnel</option>
+        <option data-link="#" value="administration">Administration</option>
+      </spw-header-persona>
+    </div>
+
+    <div slot="right">
+      <spw-header-lang>
+        <option data-link="#" selected value="fr">Fr</option>
+        <option data-link="#" value="nl">Nl</option>
+        <option data-link="#" value="en">En</option>
+      </spw-header-lang>
+    </div>
+
+    <div slot="search">
+      <spw-search-field
+        class="mb-4"
+        size="medium"
+        name="search"
+        items='[
+                    {"url": "#", "label": "Formulaires"},
+                    {"url": "#", "label": "Aides et subsides"},
+                    {"url": "#", "label": "Permis"},
+                    {"url": "#", "label": "Attestations"}
+                  ]'
+        placeholder="Que recherchez-vous ?"
+      ></spw-search-field>
+      <h2 class="spw-ds-typography-heading-04 mb-4">Les plus consultés :</h2>
+      <spw-group orientation="vertical">
+        <spw-link variant="tertiary">Mon compte</spw-link>
+        <spw-link variant="tertiary">Primes habitation</spw-link>
+        <spw-link variant="tertiary">Mobilité et transport</spw-link>
+        <spw-link variant="tertiary">Environnement</spw-link>
+        <spw-link variant="tertiary">Emploi et formation</spw-link>
+      </spw-group>
+    </div>
+
+    <spw-header-navigation>
+      <spw-header-navigation-item is-active="${slotArgs.isActive}">
+        <a href="#">Thématiques</a>
+
+        <spw-header-navigation-dropdown>
+          <spw-header-navigation-item>
+            <a href="#">Aménagement du territoire</a>
+            <spw-header-navigation-dropdown>
+              <spw-header-navigation-item>
+                <a href="#">Urbanisme</a>
+              </spw-header-navigation-item>
+              <spw-header-navigation-item>
+                <a href="#">Patrimoine</a>
+              </spw-header-navigation-item>
+              <spw-header-navigation-item>
+                <a href="#">Lotissements</a>
+              </spw-header-navigation-item>
+            </spw-header-navigation-dropdown>
+          </spw-header-navigation-item>
+          <spw-header-navigation-item>
+            <a href="#">Mobilité</a>
+          </spw-header-navigation-item>
+          <spw-header-navigation-item>
+            <a href="#">Environnement</a>
+          </spw-header-navigation-item>
+          <spw-header-navigation-item>
+            <a href="#">Économie</a>
+          </spw-header-navigation-item>
+        </spw-header-navigation-dropdown>
+      </spw-header-navigation-item>
+
+      <spw-header-navigation-item>
+        <a href="#">Démarches</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Actualités</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">À propos</a>
+      </spw-header-navigation-item>
+      <spw-header-navigation-item>
+        <a href="#">Mon espace</a>
+      </spw-header-navigation-item>
+    </spw-header-navigation>
+  `;
+}
 const Template = args => {
     const element = document.createElement(elementTag);
     const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
@@ -134,10 +282,60 @@ const Template = args => {
     element.innerHTML = htmlContent(args);
     return element;
 };
+const TemplateVariant2 = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentVariant2(args);
+    return element;
+};
+const TemplateVariant3 = 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)) {
+            element.setAttribute(toKebabCase(key), val);
+        }
+        else if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+    });
+    element.innerHTML = htmlContentVariant3(args);
+    return element;
+};
 export const Default = Template.bind({});
 Default.args = {
     isActive: false,
     siteTitle: 'Titre du site',
     borderColor: 'var(--spw-ds-primary)',
 };
+export const Variant2Simplifie = TemplateVariant2.bind({});
+Variant2Simplifie.args = {
+    isActive: false,
+    siteTitle: 'Portail simplifié',
+    borderColor: 'var(--spw-ds-secondary)',
+};
+Variant2Simplifie.storyName = 'Variante bouton supplémentaire';
+Variant2Simplifie.args = {
+    isActive: false,
+    siteTitle: 'Titre du site',
+    borderColor: 'var(--spw-ds-primary)',
+};
+export const Variant3Etendu = TemplateVariant3.bind({});
+Variant3Etendu.args = {
+    isActive: false,
+    siteTitle: '',
+    hasWallonieLogo: false,
+    borderColor: 'var(--spw-ds-tertiary)',
+};
+Variant3Etendu.storyName = 'Variante logo personnalisé';
 //# sourceMappingURL=spw-header.stories.js.map