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

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

@@ -1 +1 @@
-{"version":3,"file":"spw-card.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-card/spw-card.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAc,CAAC;AAEnB,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,MAAM,cAAc,CAAC;AAEtE,MAAM,UAAU,GAAG,UAAU,CAAC;AAC9B,MAAM,gBAAgB,GAAG,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;AAElJ,MAAM,QAAQ,iDACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,KACpD,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,qEAAqE;KACnF,GACF,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,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,cAAc,CAAC,OAAO,EAAE,QAAQ;IACvC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,0BAA0B,QAAQ,CAAC,KAAK,eAAe,QAAQ,CAAC,MAAM,IAAI,EAAE,UAAU,QAAQ,CAAC,MAAM,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtK,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvG,MAAM,SAAS,GAAG,mBAAmB,QAAQ,CAAC,KAAK,mBAAmB,CAAC;IAEvE,MAAM,gBAAgB,GAAG;;;;;GAKxB,CAAC;IAEF,MAAM,eAAe,GAAG;;;;;GAKvB,CAAC;IAEF,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,qBAAqB,QAAQ,CAAC,KAAK,qBAAqB,CAAC;QAElE,KAAK,OAAO;YACV,OAAO;iCACoB,QAAQ,CAAC,UAAU;YACxC,SAAS;YACT,eAAe;;OAEpB,CAAC;QAEJ,KAAK,SAAS;YACZ,OAAO;UACH,SAAS;;YAEP,SAAS;;OAEd,CAAC;QAEJ,KAAK,UAAU;YACb,OAAO;UACH,SAAS;iCACc,QAAQ,CAAC,UAAU,WAAW,QAAQ,CAAC,WAAW;YACvE,SAAS;YACT,WAAW;YACX,eAAe;;OAEpB,CAAC;QAEJ,KAAK,OAAO;YACV,OAAO;UACH,SAAS;iCACc,QAAQ,CAAC,UAAU;YACxC,SAAS;;OAEd,CAAC;QAEJ,KAAK,QAAQ;YACX,IAAI,QAAQ,CAAC,cAAc,EAAE,CAAC;gBAC5B,OAAO;4BACa,QAAQ,CAAC,KAAK;;;8DAGoB,QAAQ,CAAC,UAAU;gCACjD,QAAQ,CAAC,WAAW;gCACpB,QAAQ,CAAC,OAAO;gCAChB,QAAQ,CAAC,IAAI;oCACT,QAAQ,CAAC,KAAK,WAAW,QAAQ,CAAC,KAAK;;;0BAGjD,QAAQ,CAAC,MAAM,IAAI,EAAE,UAAU,QAAQ,CAAC,MAAM;;;;;;;;;;;;;;wCAchC,QAAQ,CAAC,KAAK,WAAW,QAAQ,CAAC,KAAK;;;;;;;;;;;;;;;wCAevC,QAAQ,CAAC,KAAK,WAAW,QAAQ,CAAC,KAAK;;;;;;;;SAQtE,CAAC;YACJ,CAAC;YACD,OAAO;0BACa,QAAQ,CAAC,KAAK;;;4DAGoB,QAAQ,CAAC,UAAU;8BACjD,QAAQ,CAAC,WAAW;8BACpB,QAAQ,CAAC,OAAO;8BAChB,QAAQ,CAAC,IAAI;kCACT,QAAQ,CAAC,KAAK,WAAW,QAAQ,CAAC,KAAK;;;wBAGjD,QAAQ,CAAC,MAAM,IAAI,EAAE,UAAU,QAAQ,CAAC,MAAM;;;OAG/D,CAAC;QAEJ;YACE,OAAO;UACH,SAAS;iCACc,QAAQ,CAAC,UAAU,WAAW,QAAQ,CAAC,WAAW;YACvE,gBAAgB;YAChB,SAAS;YACT,WAAW;;OAEhB,CAAC;IACN,CAAC;AACH,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,OAAO,IAAI,MAAM,CAAC;IAEvC,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,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;QAEvE,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QACtC,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,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAElD,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,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,8DAA8D;IACtE,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,sDAAsD;IAC7D,OAAO,EACL,0OAA0O;CAC7O,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,mCACZ,OAAO,CAAC,IAAI,KACf,MAAM,EAAE,EAAE,GACX,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,IAAI;IAChB,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,sDAAsD;IAC7D,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,8DAA8D;IACtE,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,EAAE;IACT,UAAU,EAAE,aAAa;IACzB,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,sDAAsD;IAC7D,OAAO,EACL,0OAA0O;CAC7O,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,8DAA8D;IACtE,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,WAAW;IACvB,KAAK,EAAE,sDAAsD;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,8DAA8D;IACtE,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,EAAE;IACT,UAAU,EAAE,OAAO;IACnB,KAAK,EAAE,sDAAsD;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,8DAA8D;IACtE,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,sDAAsD;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,QAAQ;IACjB,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE,UAAU;IACtB,WAAW,EAAE,mBAAmB;IAChC,OAAO,EAAE,8BAA8B;IACvC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,uKAAuK;CAChL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,OAAO,EAAE,QAAQ;IACjB,cAAc,EAAE,IAAI;IACpB,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE,UAAU;IACtB,WAAW,EAAE,oBAAoB;IACjC,OAAO,EAAE,8BAA8B;IACvC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,uKAAuK;CAChL,CAAC","sourcesContent":["let componentsData;\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-card';\nconst subComponentTags = ['spw-card-image', 'spw-card-content', 'spw-card-title', 'spw-card-excerpt', 'spw-card-subtags', 'spw-card-subtag-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n  contentDate: {\n    control: 'text',\n    description: 'Date à afficher dans le contenu de la carte (au format YYYY-MM-DD).',\n  },\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Carte',\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\nLa carte est un lien vers une page éditoriale dont elle donne un aperçu. Elle fait généralement partie d'une liste d'aperçus de contenus similaires.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/71f31e-carte-card)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction getHtmlContent(variant, slotArgs) {\n  const cardImage = slotArgs.imgSrc ? `<spw-card-image label=\"${slotArgs.label}\"><img alt=\"${slotArgs.imgAlt || ''}\" src=\"${slotArgs.imgSrc}\" /></spw-card-image>` : '';\n\n  const cardExcerpt = slotArgs.excerpt ? `<spw-card-excerpt>${slotArgs.excerpt}</spw-card-excerpt>` : '';\n\n  const cardTitle = `<spw-card-title>${slotArgs.title}</spw-card-title>`;\n\n  const cardSubtagsLinks = `\n    <spw-card-subtags variant=\"link\">\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  `;\n\n  const cardSubtagsTags = `\n    <spw-card-subtags variant=\"tag\">\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  `;\n\n  switch (variant) {\n    case 'light':\n      return `<spw-card-content>${slotArgs.title}</spw-card-content>`;\n\n    case 'event':\n      return `\n        <spw-card-content tag=\"${slotArgs.contentTag}\">\n          ${cardTitle}\n          ${cardSubtagsTags}\n        </spw-card-content>\n      `;\n\n    case 'sidebar':\n      return `\n        ${cardImage}\n        <spw-card-content>\n          ${cardTitle}\n        </spw-card-content>\n      `;\n\n    case 'vertical':\n      return `\n        ${cardImage}\n        <spw-card-content tag=\"${slotArgs.contentTag}\" date=\"${slotArgs.contentDate}\">\n          ${cardTitle}\n          ${cardExcerpt}\n          ${cardSubtagsTags}\n        </spw-card-content>\n      `;\n\n    case 'video':\n      return `\n        ${cardImage}\n        <spw-card-content tag=\"${slotArgs.contentTag}\">\n          ${cardTitle}\n        </spw-card-content>\n      `;\n\n    case 'people':\n      if (slotArgs.withAffiliates) {\n        return `\n          <spw-card-title>${slotArgs.title}</spw-card-title>\n          <spw-card-content>\n            <spw-card-excerpt line-clamp=\"none\">\n              <h4 class=\"spw-ds-typography-heading-04 mb-1\">${slotArgs.personName}</h4>\n              <p class=\"mb-3\">${slotArgs.personTitle}</p>\n              <p class=\"mb-1\">${slotArgs.address}</p>\n              <p class=\"mb-1\">${slotArgs.city}</p>\n              <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n            </spw-card-excerpt>\n            <spw-card-image>\n              <img alt=\"${slotArgs.imgAlt || ''}\" src=\"${slotArgs.imgSrc}\" />\n            </spw-card-image>\n          </spw-card-content>\n          <spw-separator class=\"mb-2\"></spw-separator>\n          <spw-card-content>\n            <h4 class=\"spw-ds-typography-heading-04 mb-3\">Entités affiliées :</h4>\n            <spw-card class=\"mb-4\" variant=\"people\" full-height=\"true\">\n              <spw-card-title border-color=\"#F6CC1E\">SPW Support</spw-card-title>\n              <spw-card-content>\n                <spw-card-excerpt line-clamp=\"none\">\n                  <h4 class=\"spw-ds-typography-heading-04 mb-1\">John Doe</h4>\n                  <p class=\"mb-3\">Directeur général</p>\n                  <p class=\"mb-1\">Place Joséphine Charlotte, 1</p>\n                  <p class=\"mb-1\">5100 Jambes</p>\n                  <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n                </spw-card-excerpt>\n                <spw-card-image>\n                  <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" />\n                </spw-card-image>\n              </spw-card-content>\n            </spw-card>\n            <spw-card variant=\"people\" full-height=\"true\">\n              <spw-card-title border-color=\"#8005CC\">SPW Digital</spw-card-title>\n              <spw-card-content>\n                <spw-card-excerpt line-clamp=\"none\">\n                  <h4 class=\"spw-ds-typography-heading-04 mb-1\">John Doe</h4>\n                  <p class=\"mb-3\">Directeur général</p>\n                  <p class=\"mb-1\">Place Joséphine Charlotte, 1</p>\n                  <p class=\"mb-1\">5100 Jambes</p>\n                  <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n                </spw-card-excerpt>\n                <spw-card-image>\n                  <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" />\n                </spw-card-image>\n              </spw-card-content>\n            </spw-card>\n          </spw-card-content>\n        `;\n      }\n      return `\n        <spw-card-title>${slotArgs.title}</spw-card-title>\n        <spw-card-content>\n          <spw-card-excerpt line-clamp=\"none\">\n            <h4 class=\"spw-ds-typography-heading-04 mb-1\">${slotArgs.personName}</h4>\n            <p class=\"mb-3\">${slotArgs.personTitle}</p>\n            <p class=\"mb-1\">${slotArgs.address}</p>\n            <p class=\"mb-1\">${slotArgs.city}</p>\n            <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n          </spw-card-excerpt>\n          <spw-card-image>\n            <img alt=\"${slotArgs.imgAlt || ''}\" src=\"${slotArgs.imgSrc}\" />\n          </spw-card-image>\n        </spw-card-content>\n      `;\n\n    default:\n      return `\n        ${cardImage}\n        <spw-card-content tag=\"${slotArgs.contentTag}\" date=\"${slotArgs.contentDate}\">\n          ${cardSubtagsLinks}\n          ${cardTitle}\n          ${cardExcerpt}\n        </spw-card-content>\n      `;\n  }\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const variant = args.variant || 'news';\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    const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n\n    if (masterProps.includes(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 = getHtmlContent(variant, args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  fullHeight: true,\n  href: 'http://google.com',\n  label: 'Label',\n  target: '_blank',\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  contentTag: 'Actualités',\n  contentDate: '2024-02-09',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n  excerpt:\n    \"L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \\\"consom'acteur\\\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.\",\n};\n\nexport const WithoutImage = Template.bind({});\nWithoutImage.args = {\n  ...Default.args,\n  imgSrc: '',\n};\n\nexport const Light = Template.bind({});\nLight.args = {\n  fullHeight: true,\n  href: 'http://google.com',\n  target: '_blank',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n  subTag: '',\n  contentTag: '',\n  contentDate: '',\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n  variant: 'vertical',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  contentTag: 'Publication',\n  contentDate: '2024-02-09',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n  excerpt:\n    \"L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \\\"consom'acteur\\\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.\",\n};\n\nexport const Event = Template.bind({});\nEvent.args = {\n  variant: 'event',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  dateStart: '11/02',\n  dateEnd: '12/02',\n  contentTag: 'Evènement',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n};\n\nexport const Video = Template.bind({});\nVideo.args = {\n  variant: 'video',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  contentTag: 'Vidéo',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n};\n\nexport const Mini = Template.bind({});\nMini.args = {\n  variant: 'sidebar',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n};\n\nexport const People = Template.bind({});\nPeople.args = {\n  variant: 'people',\n  fullHeight: true,\n  title: 'SPW Secrétariat Général',\n  personName: 'John Doe',\n  personTitle: 'Directeur général',\n  address: 'Place Joséphine Charlotte, 1',\n  city: '5100 Jambes',\n  phone: '081000000',\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n};\n\nexport const PeopleWithAffiliates = Template.bind({});\nPeopleWithAffiliates.args = {\n  variant: 'people',\n  withAffiliates: true,\n  fullHeight: true,\n  title: 'SPW Secrétariat Général',\n  personName: 'John Doe',\n  personTitle: 'Secrétaire général',\n  address: 'Place Joséphine Charlotte, 1',\n  city: '5100 Jambes',\n  phone: '081000000',\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n};\n"]}
+{"version":3,"file":"spw-card.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-card/spw-card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["let componentsData;\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-card';\nconst subComponentTags = ['spw-card-image', 'spw-card-content', 'spw-card-title', 'spw-card-excerpt', 'spw-card-subtags', 'spw-card-subtag-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n  contentDate: {\n    control: 'text',\n    description: 'Date à afficher dans le contenu de la carte (au format YYYY-MM-DD).',\n  },\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Carte',\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 Carte est un conteneur cliquable qui affiche un aperçu visuel de contenu (article, événement, personne, vidéo). Il permet de présenter des informations de manière attrayante et structurée, souvent utilisé dans des listes ou grilles de contenus similaires.\n\n## Variants disponibles\n\n- **Default / Horizontal** : Carte classique avec image à gauche, contenu à droite\n- **Vertical** : Image en haut, contenu en dessous\n- **Event** : Carte événement avec date et tags\n- **Video** : Carte vidéo avec icône de lecture\n- **Light** : Version allégée sans image, texte seul\n- **Mini** : Version compacte pour sidebars\n- **People** : Carte profil avec avatar rond\n- **Sidebar** : Version pour barre latérale\n\n## Structure\n\nLe composant se compose de plusieurs parties :\n- **spw-card** : Conteneur principal avec la propriété href\n- **spw-card-image** : Bloc image avec label optionnel\n- **spw-card-content** : Conteneur du contenu textuel\n- **spw-card-title** : Titre de la carte\n- **spw-card-excerpt** : Description/extrait\n- **spw-card-subtags** : Liste de sous-tags (liens ou tags)\n- **spw-card-subtag-item** : Item de sous-tag individuel\n\n## Fonctionnalités\n\n- Cartes entièrement cliquables\n- Support des images avec labels\n- Tags et catégories personnalisables\n- Versions compactes pour sidebars\n- Cartes profil avec affiliations\n- Responsive design adaptatif\n- Hover states et transitions fluides\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/71f31e-carte-card)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction getHtmlContent(variant, slotArgs) {\n  const cardImage = slotArgs.imgSrc ? `<spw-card-image label=\"${slotArgs.label}\"><img alt=\"${slotArgs.imgAlt || ''}\" src=\"${slotArgs.imgSrc}\" /></spw-card-image>` : '';\n\n  const cardExcerpt = slotArgs.excerpt ? `<spw-card-excerpt>${slotArgs.excerpt}</spw-card-excerpt>` : '';\n\n  const cardTitle = `<spw-card-title>${slotArgs.title}</spw-card-title>`;\n\n  const cardSubtagsLinks = `\n    <spw-card-subtags variant=\"link\">\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  `;\n\n  const cardSubtagsTags = `\n    <spw-card-subtags variant=\"tag\">\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  `;\n\n  switch (variant) {\n    case 'light':\n      return `<spw-card-content>${slotArgs.title}</spw-card-content>`;\n\n    case 'event':\n      return `\n        <spw-card-content tag=\"${slotArgs.contentTag}\">\n          ${cardTitle}\n          ${cardSubtagsTags}\n        </spw-card-content>\n      `;\n\n    case 'sidebar':\n      return `\n        ${cardImage}\n        <spw-card-content>\n          ${cardTitle}\n        </spw-card-content>\n      `;\n\n    case 'vertical':\n      return `\n        ${cardImage}\n        <spw-card-content tag=\"${slotArgs.contentTag}\" date=\"${slotArgs.contentDate}\">\n          ${cardTitle}\n          ${cardExcerpt}\n          ${cardSubtagsTags}\n        </spw-card-content>\n      `;\n\n    case 'video':\n      return `\n        ${cardImage}\n        <spw-card-content tag=\"${slotArgs.contentTag}\">\n          ${cardTitle}\n        </spw-card-content>\n      `;\n\n    case 'people':\n      if (slotArgs.withAffiliates) {\n        return `\n          <spw-card-title>${slotArgs.title}</spw-card-title>\n          <spw-card-content>\n            <spw-card-excerpt line-clamp=\"none\">\n              <h4 class=\"spw-ds-typography-heading-04 mb-1\">${slotArgs.personName}</h4>\n              <p class=\"mb-3\">${slotArgs.personTitle}</p>\n              <p class=\"mb-1\">${slotArgs.address}</p>\n              <p class=\"mb-1\">${slotArgs.city}</p>\n              <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n            </spw-card-excerpt>\n            <spw-card-image>\n              <img alt=\"${slotArgs.imgAlt || ''}\" src=\"${slotArgs.imgSrc}\" />\n            </spw-card-image>\n          </spw-card-content>\n          <spw-separator class=\"mb-2\"></spw-separator>\n          <spw-card-content>\n            <h4 class=\"spw-ds-typography-heading-04 mb-3\">Entités affiliées :</h4>\n            <spw-card class=\"mb-4\" variant=\"people\" full-height=\"true\">\n              <spw-card-title border-color=\"#F6CC1E\">SPW Support</spw-card-title>\n              <spw-card-content>\n                <spw-card-excerpt line-clamp=\"none\">\n                  <h4 class=\"spw-ds-typography-heading-04 mb-1\">John Doe</h4>\n                  <p class=\"mb-3\">Directeur général</p>\n                  <p class=\"mb-1\">Place Joséphine Charlotte, 1</p>\n                  <p class=\"mb-1\">5100 Jambes</p>\n                  <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n                </spw-card-excerpt>\n                <spw-card-image>\n                  <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" />\n                </spw-card-image>\n              </spw-card-content>\n            </spw-card>\n            <spw-card variant=\"people\" full-height=\"true\">\n              <spw-card-title border-color=\"#8005CC\">SPW Digital</spw-card-title>\n              <spw-card-content>\n                <spw-card-excerpt line-clamp=\"none\">\n                  <h4 class=\"spw-ds-typography-heading-04 mb-1\">John Doe</h4>\n                  <p class=\"mb-3\">Directeur général</p>\n                  <p class=\"mb-1\">Place Joséphine Charlotte, 1</p>\n                  <p class=\"mb-1\">5100 Jambes</p>\n                  <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n                </spw-card-excerpt>\n                <spw-card-image>\n                  <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" />\n                </spw-card-image>\n              </spw-card-content>\n            </spw-card>\n          </spw-card-content>\n        `;\n      }\n      return `\n        <spw-card-title>${slotArgs.title}</spw-card-title>\n        <spw-card-content>\n          <spw-card-excerpt line-clamp=\"none\">\n            <h4 class=\"spw-ds-typography-heading-04 mb-1\">${slotArgs.personName}</h4>\n            <p class=\"mb-3\">${slotArgs.personTitle}</p>\n            <p class=\"mb-1\">${slotArgs.address}</p>\n            <p class=\"mb-1\">${slotArgs.city}</p>\n            <spw-link href=\"tel:${slotArgs.phone}\">Tel : ${slotArgs.phone}</spw-link>\n          </spw-card-excerpt>\n          <spw-card-image>\n            <img alt=\"${slotArgs.imgAlt || ''}\" src=\"${slotArgs.imgSrc}\" />\n          </spw-card-image>\n        </spw-card-content>\n      `;\n\n    default:\n      return `\n        ${cardImage}\n        <spw-card-content tag=\"${slotArgs.contentTag}\" date=\"${slotArgs.contentDate}\">\n          ${cardSubtagsLinks}\n          ${cardTitle}\n          ${cardExcerpt}\n        </spw-card-content>\n      `;\n  }\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const variant = args.variant || 'news';\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    const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n\n    if (masterProps.includes(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 = getHtmlContent(variant, args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  fullHeight: true,\n  href: 'http://google.com',\n  label: 'Label',\n  target: '_blank',\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  contentTag: 'Actualités',\n  contentDate: '2024-02-09',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n  excerpt:\n    \"L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \\\"consom'acteur\\\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.\",\n};\n\nexport const WithoutImage = Template.bind({});\nWithoutImage.args = {\n  ...Default.args,\n  imgSrc: '',\n};\n\nexport const Light = Template.bind({});\nLight.args = {\n  fullHeight: true,\n  href: 'http://google.com',\n  target: '_blank',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n  subTag: '',\n  contentTag: '',\n  contentDate: '',\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n  variant: 'vertical',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  contentTag: 'Publication',\n  contentDate: '2024-02-09',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n  excerpt:\n    \"L'actualité nous invite à nous engager, à devenir chaque jour un peu plus \\\"consom'acteur\\\". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité (APAQ-W) nous propose quelques pistes pour privilégier le local.\",\n};\n\nexport const Event = Template.bind({});\nEvent.args = {\n  variant: 'event',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  dateStart: '11/02',\n  dateEnd: '12/02',\n  contentTag: 'Evènement',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n};\n\nexport const Video = Template.bind({});\nVideo.args = {\n  variant: 'video',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  contentTag: 'Vidéo',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n};\n\nexport const Mini = Template.bind({});\nMini.args = {\n  variant: 'sidebar',\n  fullHeight: true,\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n  href: 'http://google.com',\n  target: '_blank',\n  label: '',\n  title: 'Comment soutenir nos agricultrices et agriculteurs ?',\n};\n\nexport const People = Template.bind({});\nPeople.args = {\n  variant: 'people',\n  fullHeight: true,\n  title: 'SPW Secrétariat Général',\n  personName: 'John Doe',\n  personTitle: 'Directeur général',\n  address: 'Place Joséphine Charlotte, 1',\n  city: '5100 Jambes',\n  phone: '081000000',\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n};\n\nexport const PeopleWithAffiliates = Template.bind({});\nPeopleWithAffiliates.args = {\n  variant: 'people',\n  withAffiliates: true,\n  fullHeight: true,\n  title: 'SPW Secrétariat Général',\n  personName: 'John Doe',\n  personTitle: 'Secrétaire général',\n  address: 'Place Joséphine Charlotte, 1',\n  city: '5100 Jambes',\n  phone: '081000000',\n  imgAlt: 'Image',\n  imgSrc: 'https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=717&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `Carte horizontale par défaut avec image à gauche et contenu à droite. Affiche un tag, une date, un titre, un extrait et des sous-tags cliquables. Format idéal pour listes d'articles ou actualités.`,\n    },\n  },\n};\n\nWithoutImage.parameters = {\n  docs: {\n    description: {\n      story: `Carte sans image, contenu textuel uniquement. Utile lorsqu'aucune image pertinente n'est disponible ou pour varier la présentation dans une liste.`,\n    },\n  },\n};\n\nLight.parameters = {\n  docs: {\n    description: {\n      story: `Version allégée avec titre seul, sans image ni métadonnées. Parfaite pour des listes simples de liens ou menus de navigation secondaire.`,\n    },\n  },\n};\n\nVertical.parameters = {\n  docs: {\n    description: {\n      story: `Carte verticale avec image en haut et contenu en dessous. Format populaire pour grilles d'articles, articles connexes ou publications. Idéale pour présentation en colonnes.`,\n    },\n  },\n};\n\nEvent.parameters = {\n  docs: {\n    description: {\n      story: `Carte événement avec dates de début/fin visibles. Optimisée pour afficher des événements avec période définie.`,\n    },\n  },\n};\n\nVideo.parameters = {\n  docs: {\n    description: {\n      story: `Carte vidéo avec icône de lecture superposée sur l'image. Signale clairement un contenu vidéo et invite au clic pour visionner.`,\n    },\n  },\n};\n\nMini.parameters = {\n  docs: {\n    description: {\n      story: `Version compacte pour sidebar ou colonne latérale. Image réduite à gauche avec titre à droite, format économe en espace.`,\n    },\n  },\n};\n\nPeople.parameters = {\n  docs: {\n    description: {\n      story: `Carte profil avec avatar rond, nom, fonction, et coordonnées. Idéale pour annuaires, équipes, organigrammes ou pages de contact.`,\n    },\n  },\n};\n\nPeopleWithAffiliates.parameters = {\n  docs: {\n    description: {\n      story: `Carte profil enrichie avec affiliations/organisations associées. Permet de montrer les relations et appartenances d'une personne.`,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,22 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Section inférieure récurrente d'une page utilisée pour afficher des informations de contact, des liens importants et des crédits.
+Le composant Footer est la section inférieure récurrente d'une page web. Il contient généralement des liens de navigation secondaire, des informations de contact, des mentions légales et le copyright du site.
+
+## Structure
+
+Le composant se compose de quatre sous-éléments :
+- **spw-footer** : Conteneur principal avec gestion des colonnes responsive
+- **spw-footer-content** : Section supérieure avec colonnes de liens
+- **spw-footer-content-col** : Colonne individuelle avec titre
+- **spw-footer-link** : Lien de navigation dans le footer
+- **spw-footer-bottom** : Barre inférieure avec mentions légales
+
+## Fonctionnalités
+
+- Configuration dynamique du nombre de colonnes par breakpoint
+- Support du Shadow DOM pour l'encapsulation
+- Deux versions : complète avec sections ou légère (bottom only)
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/91a10d-pied-de-page-footer)
         `,
@@ -126,8 +141,30 @@ Default.args = {
     colsTablet: 2,
     colsMobile: 1,
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Footer complet avec section de contenu et barre inférieure. Affiche 4 colonnes de liens sur desktop, 2 sur tablette et 1 sur mobile.
+
+Cas d'usage typique : footer principal d'un site avec accès rapides, liens utiles, sites partenaires et informations de contact. La configuration responsive s'adapte automatiquement selon la largeur de l'écran.
+      `,
+        },
+    },
+};
 export const Light = TemplateLight.bind({});
 Light.args = {
     siteTitle: 'Titre du site',
 };
+Light.parameters = {
+    docs: {
+        description: {
+            story: `
+Version légère du footer avec uniquement la barre inférieure contenant les mentions légales et le titre du site.
+
+Idéal pour les pages simples, pages de connexion ou applications où un footer complet n'est pas nécessaire. Contient les liens essentiels : plan du site, mentions légales, vie privée, médiateur et accessibilité.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-footer.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spw-footer.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-footer/spw-footer.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-footer';\n\nconst subComponentTags = ['spw-footer-bottom', 'spw-footer-content', 'spw-footer-content-col', 'spw-footer-link'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Pied de page (footer)',\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\nSection inférieure récurrente d'une page utilisée pour afficher des informations de contact, des liens importants et des crédits.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/91a10d-pied-de-page-footer)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n  return /* HTML */ `\n    <spw-footer-content>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle1}\">\n        <spw-footer-link href=\"https://www.wallonie.be/fr/demarches\">Démarches</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/jobs\">Jobs</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/actualites\">Actualités</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/agenda\">Agenda</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/acteurs-et-institutions\">Acteurs et institutions</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/appels-a-projets\">Appels à projets</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/demarches/se-renseigner-sur-la-charte-graphique-de-la-wallonie\">Charte graphique</spw-footer-link>\n      </spw-footer-content-col>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle2}\">\n        <spw-footer-link href=\"https://www.wallonie.be/fr/\">Lien 1</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/\">Lien 2</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/\">Lien 3</spw-footer-link>\n      </spw-footer-content-col>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle3}\">\n        <spw-footer-link href=\"https://spw.wallonie.be/\">Service public de Wallonie</spw-footer-link>\n        <spw-footer-link href=\"https://www.parlement-wallonie.be/\">Parlement de Wallonie</spw-footer-link>\n        <spw-footer-link href=\"https://geoportail.wallonie.be/\">Géoportail</spw-footer-link>\n        <spw-footer-link href=\"http://developpementdurable.wallonie.be/\">Développement durable</spw-footer-link>\n        <spw-footer-link href=\"https://wallex.wallonie.be/\">Wallex</spw-footer-link>\n        <spw-footer-link href=\"https://marchespublics.wallonie.be/\">Marchés publics wallons</spw-footer-link>\n        <spw-footer-link href=\"https://finances.wallonie.be/home/finances-wallonnes/budget-wallon.html\">Budget</spw-footer-link>\n        <spw-footer-link href=\"https://cortex.wallonie.be/home.html\">Cortex</spw-footer-link>\n      </spw-footer-content-col>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle4}\">\n        <spw-footer-link href=\"https://www.wallonie.be/formulaire-de-contact\">Formulaire de contact</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be//les-espaces-wallonie\">Espaces Wallonie</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/presse\">Presse</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/introduire-une-plainte-spw\">Introduire une plainte au SPW</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/signalement-dune-irregularite\">Signalement d'une irrégularité</spw-footer-link>\n      </spw-footer-content-col>\n    </spw-footer-content>\n    <spw-footer-bottom site-title=\"${slotArgs.siteTitle}\">\n      <spw-footer-link href=\"https://www.wallonie.be/fr/plan-du-site\">Plan du site</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mentions-legales\">Mentions légales</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/vie-privee\">Vie privée</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mediateur\">Médiateur</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/accessibilite\">Accessibilité</spw-footer-link>\n    </spw-footer-bottom>\n  `;\n}\n\nfunction htmlContentLight(slotArgs) {\n  return /* HTML */ `\n    <spw-footer-bottom site-title=\"${slotArgs.siteTitle}\">\n      <spw-footer-link href=\"https://www.wallonie.be/fr/plan-du-site\">Plan du site</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mentions-legales\">Mentions légales</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/vie-privee\">Vie privée</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mediateur\">Médiateur</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/accessibilite\">Accessibilité</spw-footer-link>\n    </spw-footer-bottom>\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(args);\n\n  return element;\n};\n\nconst TemplateLight: 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(key, val);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentLight(args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  colTitle1: 'Accès rapides',\n  colTitle2: 'Liens utiles',\n  colTitle3: 'Sites généraux de Wallonie',\n  colTitle4: 'Nous contacter',\n  siteTitle: 'Titre du site',\n  colsDesktop: 4,\n  colsTablet: 2,\n  colsMobile: 1,\n};\n\nexport const Light = TemplateLight.bind({});\nLight.args = {\n  siteTitle: 'Titre du site',\n};\n"]}
+{"version":3,"file":"spw-footer.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-footer/spw-footer.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-footer';\n\nconst subComponentTags = ['spw-footer-bottom', 'spw-footer-content', 'spw-footer-content-col', 'spw-footer-link'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Pied de page (footer)',\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 Footer est la section inférieure récurrente d'une page web. Il contient généralement des liens de navigation secondaire, des informations de contact, des mentions légales et le copyright du site.\n\n## Structure\n\nLe composant se compose de quatre sous-éléments :\n- **spw-footer** : Conteneur principal avec gestion des colonnes responsive\n- **spw-footer-content** : Section supérieure avec colonnes de liens\n- **spw-footer-content-col** : Colonne individuelle avec titre\n- **spw-footer-link** : Lien de navigation dans le footer\n- **spw-footer-bottom** : Barre inférieure avec mentions légales\n\n## Fonctionnalités\n\n- Configuration dynamique du nombre de colonnes par breakpoint\n- Support du Shadow DOM pour l'encapsulation\n- Deux versions : complète avec sections ou légère (bottom only)\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/91a10d-pied-de-page-footer)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n  return /* HTML */ `\n    <spw-footer-content>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle1}\">\n        <spw-footer-link href=\"https://www.wallonie.be/fr/demarches\">Démarches</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/jobs\">Jobs</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/actualites\">Actualités</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/agenda\">Agenda</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/acteurs-et-institutions\">Acteurs et institutions</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/appels-a-projets\">Appels à projets</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/demarches/se-renseigner-sur-la-charte-graphique-de-la-wallonie\">Charte graphique</spw-footer-link>\n      </spw-footer-content-col>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle2}\">\n        <spw-footer-link href=\"https://www.wallonie.be/fr/\">Lien 1</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/\">Lien 2</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/\">Lien 3</spw-footer-link>\n      </spw-footer-content-col>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle3}\">\n        <spw-footer-link href=\"https://spw.wallonie.be/\">Service public de Wallonie</spw-footer-link>\n        <spw-footer-link href=\"https://www.parlement-wallonie.be/\">Parlement de Wallonie</spw-footer-link>\n        <spw-footer-link href=\"https://geoportail.wallonie.be/\">Géoportail</spw-footer-link>\n        <spw-footer-link href=\"http://developpementdurable.wallonie.be/\">Développement durable</spw-footer-link>\n        <spw-footer-link href=\"https://wallex.wallonie.be/\">Wallex</spw-footer-link>\n        <spw-footer-link href=\"https://marchespublics.wallonie.be/\">Marchés publics wallons</spw-footer-link>\n        <spw-footer-link href=\"https://finances.wallonie.be/home/finances-wallonnes/budget-wallon.html\">Budget</spw-footer-link>\n        <spw-footer-link href=\"https://cortex.wallonie.be/home.html\">Cortex</spw-footer-link>\n      </spw-footer-content-col>\n      <spw-footer-content-col col-title=\"${slotArgs.colTitle4}\">\n        <spw-footer-link href=\"https://www.wallonie.be/formulaire-de-contact\">Formulaire de contact</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be//les-espaces-wallonie\">Espaces Wallonie</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/presse\">Presse</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/introduire-une-plainte-spw\">Introduire une plainte au SPW</spw-footer-link>\n        <spw-footer-link href=\"https://www.wallonie.be/fr/signalement-dune-irregularite\">Signalement d'une irrégularité</spw-footer-link>\n      </spw-footer-content-col>\n    </spw-footer-content>\n    <spw-footer-bottom site-title=\"${slotArgs.siteTitle}\">\n      <spw-footer-link href=\"https://www.wallonie.be/fr/plan-du-site\">Plan du site</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mentions-legales\">Mentions légales</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/vie-privee\">Vie privée</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mediateur\">Médiateur</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/accessibilite\">Accessibilité</spw-footer-link>\n    </spw-footer-bottom>\n  `;\n}\n\nfunction htmlContentLight(slotArgs) {\n  return /* HTML */ `\n    <spw-footer-bottom site-title=\"${slotArgs.siteTitle}\">\n      <spw-footer-link href=\"https://www.wallonie.be/fr/plan-du-site\">Plan du site</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mentions-legales\">Mentions légales</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/vie-privee\">Vie privée</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/mediateur\">Médiateur</spw-footer-link>\n      <spw-footer-link href=\"https://www.wallonie.be/fr/accessibilite\">Accessibilité</spw-footer-link>\n    </spw-footer-bottom>\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(args);\n\n  return element;\n};\n\nconst TemplateLight: 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(key, val);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContentLight(args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  colTitle1: 'Accès rapides',\n  colTitle2: 'Liens utiles',\n  colTitle3: 'Sites généraux de Wallonie',\n  colTitle4: 'Nous contacter',\n  siteTitle: 'Titre du site',\n  colsDesktop: 4,\n  colsTablet: 2,\n  colsMobile: 1,\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `\nFooter complet avec section de contenu et barre inférieure. Affiche 4 colonnes de liens sur desktop, 2 sur tablette et 1 sur mobile.\n\nCas d'usage typique : footer principal d'un site avec accès rapides, liens utiles, sites partenaires et informations de contact. La configuration responsive s'adapte automatiquement selon la largeur de l'écran.\n      `,\n    },\n  },\n};\n\nexport const Light = TemplateLight.bind({});\nLight.args = {\n  siteTitle: 'Titre du site',\n};\nLight.parameters = {\n  docs: {\n    description: {\n      story: `\nVersion légère du footer avec uniquement la barre inférieure contenant les mentions légales et le titre du site.\n\nIdéal pour les pages simples, pages de connexion ou applications où un footer complet n'est pas nécessaire. Contient les liens essentiels : plan du site, mentions légales, vie privée, médiateur et accessibilité.\n      `,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,20 @@ const meta = {
                 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.        `,
+Le composant Grid est un système de grille CSS avancé permettant d'organiser des éléments en colonnes et lignes responsives. Il supporte les spans (étendues) pour créer des mises en page complexes et dynamiques.
+
+## Structure
+
+Le composant se compose de deux éléments :
+- **spw-grid** : Conteneur de grille avec configuration responsive
+- **spw-grid-item** : Item individuel avec propriétés de positionnement
+
+## Cas d'usage
+
+- Grilles de tuiles ou cartes uniformes
+- Mise en avant d'un élément principal (span 2x2)
+- Sections de contenu avec hiérarchie visuelle
+        `,
             },
         },
     },
@@ -288,6 +301,17 @@ Default.args = {
     colsTablet: 2,
     colsMobile: 1,
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Grille de base avec 3 colonnes sur desktop, 2 sur tablette et 1 sur mobile. Toutes les tuiles ont la même taille et s'ajustent automatiquement.
+
+Cas d'usage : galerie de services, liste de catégories, ou présentation de contenus homogènes. La grille est responsive et s'adapte automatiquement selon le breakpoint.
+      `,
+        },
+    },
+};
 export const AvecTuileLarge = TemplateWithSpans.bind({});
 AvecTuileLarge.args = {
     colsDesktop: 3,

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

@@ -1 +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"]}
+{"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\nLe composant Grid est un système de grille CSS avancé permettant d'organiser des éléments en colonnes et lignes responsives. Il supporte les spans (étendues) pour créer des mises en page complexes et dynamiques.\n\n## Structure\n\nLe composant se compose de deux éléments :\n- **spw-grid** : Conteneur de grille avec configuration responsive\n- **spw-grid-item** : Item individuel avec propriétés de positionnement\n\n## Cas d'usage\n\n- Grilles de tuiles ou cartes uniformes\n- Mise en avant d'un élément principal (span 2x2)\n- Sections de contenu avec hiérarchie visuelle\n        `,\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};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `\nGrille de base avec 3 colonnes sur desktop, 2 sur tablette et 1 sur mobile. Toutes les tuiles ont la même taille et s'ajustent automatiquement.\n\nCas d'usage : galerie de services, liste de catégories, ou présentation de contenus homogènes. La grille est responsive et s'adapte automatiquement selon le breakpoint.\n      `,\n    },\n  },\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-group/spw-group.stories.js

@@ -20,7 +20,14 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Regroupe plusieurs boutons en une seule unité fonctionnelle pour des actions connexes.
+Le composant Groupe permet d'organiser plusieurs éléments interactifs (boutons, checkboxes, radios) en une unité visuelle cohérente. Il facilite la gestion d'actions connexes et améliore l'expérience utilisateur.
+
+## Types de groupes
+
+Le composant supporte trois types d'éléments :
+- **Buttons** : Groupe de boutons d'action
+- **Checkboxes** : Groupe de cases à cocher
+- **Radios** : Groupe de boutons radio
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/56fd38-groupe-de-boutons)
         `,
@@ -57,12 +64,21 @@ const Template = args => {
 };
 // Stories
 export const Default = Template.bind({});
-export const Vertical = Template.bind({});
-export const Links = Template.bind({});
-// Story args
 Default.args = {
     content: defaultHtmlContent(),
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Groupe de boutons horizontal par défaut. Les boutons sont alignés horizontalement avec un espacement régulier.
+
+Parfait pour des actions primaires et secondaires côte à côte (ex: "Enregistrer" / "Annuler").
+      `,
+        },
+    },
+};
+export const Vertical = Template.bind({});
 Vertical.args = {
     orientation: 'vertical',
     content: `
@@ -71,13 +87,36 @@ Vertical.args = {
     <spw-button variant="tertiary">Bouton vertical 3</spw-button>
   `,
 };
+Vertical.parameters = {
+    docs: {
+        description: {
+            story: `
+Groupe de boutons empilés verticalement. Utile pour des listes d'actions dans une sidebar ou un menu.
+
+L'orientation verticale est recommandée pour plus de 3 boutons ou sur mobile.
+      `,
+        },
+    },
+};
+export const Links = Template.bind({});
 Links.args = {
     orientation: 'vertical',
     content: `
     <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
-                <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
-                <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
-                <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
+    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
+    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
+    <spw-button variant="tertiary" icon="fa-plane" icon-position="left">Lien avec icône</spw-button>
   `,
 };
+Links.parameters = {
+    docs: {
+        description: {
+            story: `
+Groupe de liens tertiaires avec icônes, organisés verticalement. Idéal pour une navigation secondaire ou un menu de liens rapides.
+
+Les icônes positionnées à gauche améliorent la scannabilité visuelle de la liste.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-group.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spw-group.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-group/spw-group.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,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,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,uBAAuB;AACvB,SAAS,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;GAIjB,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,SAAS,CAAC;IAE/B,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,mDAAmD;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,kBAAkB,EAAE,CAAC;IAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;IAE5B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvC,aAAa;AACb,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,kBAAkB,EAAE;CAC9B,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,WAAW,EAAE,UAAU;IACvB,OAAO,EAAE;;;;GAIR;CACF,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG;IACX,WAAW,EAAE,UAAU;IACvB,OAAO,EAAE;;;;;GAKR;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-group';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Organismes/Groupe de boutons',\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\nRegroupe plusieurs boutons en une seule unité fonctionnelle pour des actions connexes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/56fd38-groupe-de-boutons)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n// Default HTML content\nfunction defaultHtmlContent() {\n  return /* HTML */ `\n    <spw-button>Bouton primaire</spw-button>\n    <spw-button variant=\"secondary\">Bouton secondaire</spw-button>\n    <spw-button variant=\"tertiary\">Bouton tertiaire</spw-button>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const slottedLabel = 'content';\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  // Use provided HTML content or fallback to default\n  const content = args[slottedLabel] || defaultHtmlContent();\n  element.innerHTML = content;\n\n  return element;\n};\n\n// Stories\nexport const Default = Template.bind({});\nexport const Vertical = Template.bind({});\nexport const Links = Template.bind({});\n\n// Story args\nDefault.args = {\n  content: defaultHtmlContent(),\n};\n\nVertical.args = {\n  orientation: 'vertical',\n  content: `\n    <spw-button>Bouton vertical 1</spw-button>\n    <spw-button variant=\"secondary\">Bouton vertical 2</spw-button>\n    <spw-button variant=\"tertiary\">Bouton vertical 3</spw-button>\n  `,\n};\n\nLinks.args = {\n  orientation: 'vertical',\n  content: `\n    <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n                <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n                <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n                <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n  `,\n};\n"]}
+{"version":3,"file":"spw-group.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-group/spw-group.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';\n\nconst elementTag = 'spw-group';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Organismes/Groupe de boutons',\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 Groupe permet d'organiser plusieurs éléments interactifs (boutons, checkboxes, radios) en une unité visuelle cohérente. Il facilite la gestion d'actions connexes et améliore l'expérience utilisateur.\n\n## Types de groupes\n\nLe composant supporte trois types d'éléments :\n- **Buttons** : Groupe de boutons d'action\n- **Checkboxes** : Groupe de cases à cocher\n- **Radios** : Groupe de boutons radio\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/56fd38-groupe-de-boutons)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n// Default HTML content\nfunction defaultHtmlContent() {\n  return /* HTML */ `\n    <spw-button>Bouton primaire</spw-button>\n    <spw-button variant=\"secondary\">Bouton secondaire</spw-button>\n    <spw-button variant=\"tertiary\">Bouton tertiaire</spw-button>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const slottedLabel = 'content';\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  // Use provided HTML content or fallback to default\n  const content = args[slottedLabel] || defaultHtmlContent();\n  element.innerHTML = content;\n\n  return element;\n};\n\n// Stories\nexport const Default = Template.bind({});\nDefault.args = {\n  content: defaultHtmlContent(),\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: `\nGroupe de boutons horizontal par défaut. Les boutons sont alignés horizontalement avec un espacement régulier.\n\nParfait pour des actions primaires et secondaires côte à côte (ex: \"Enregistrer\" / \"Annuler\").\n      `,\n    },\n  },\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n  orientation: 'vertical',\n  content: `\n    <spw-button>Bouton vertical 1</spw-button>\n    <spw-button variant=\"secondary\">Bouton vertical 2</spw-button>\n    <spw-button variant=\"tertiary\">Bouton vertical 3</spw-button>\n  `,\n};\nVertical.parameters = {\n  docs: {\n    description: {\n      story: `\nGroupe de boutons empilés verticalement. Utile pour des listes d'actions dans une sidebar ou un menu.\n\nL'orientation verticale est recommandée pour plus de 3 boutons ou sur mobile.\n      `,\n    },\n  },\n};\n\nexport const Links = Template.bind({});\nLinks.args = {\n  orientation: 'vertical',\n  content: `\n    <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n    <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n    <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n    <spw-button variant=\"tertiary\" icon=\"fa-plane\" icon-position=\"left\">Lien avec icône</spw-button>\n  `,\n};\nLinks.parameters = {\n  docs: {\n    description: {\n      story: `\nGroupe de liens tertiaires avec icônes, organisés verticalement. Idéal pour une navigation secondaire ou un menu de liens rapides.\n\nLes icônes positionnées à gauche améliorent la scannabilité visuelle de la liste.\n      `,\n    },\n  },\n};\n"]}

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

@@ -21,7 +21,30 @@ const meta = {
                 component: `
 <strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
-Section supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.
+Le composant Header est la section supérieure d'une page web. Il contient le logo, la navigation principale, la recherche, le sélecteur de langue et le sélecteur de persona. C'est un élément crucial pour l'orientation et l'accessibilité du site.
+
+## Structure
+
+Le composant se compose de plusieurs sous-éléments :
+- **spw-header** : Conteneur principal avec gestion responsive
+- **spw-header-navigation** : Menu de navigation principal
+- **spw-header-navigation-item** : Item de menu avec support dropdown
+- **spw-header-navigation-dropdown** : Sous-menu déroulant
+- **spw-header-lang** : Sélecteur de langue
+- **spw-header-persona** : Sélecteur de profil utilisateur
+
+## Slots
+
+- Support des slots logo, logo-mobile, top-left, right, search
+
+## Fonctionnalités
+
+- Navigation multi-niveaux (jusqu'à 3 niveaux)
+- Recherche intégrée avec suggestions
+- Menu mobile responsive avec hamburger
+- Support des boutons d'action supplémentaires
+- Gestion automatique des états actifs
+- Accessibilité complète (ARIA, navigation clavier)
 
 [<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)
         `,
@@ -318,18 +341,35 @@ Default.args = {
     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)',
+Default.parameters = {
+    docs: {
+        description: {
+            story: `
+Header complet avec toutes les fonctionnalités : sélecteur de persona, navigation multi-niveaux (jusqu'à 3 niveaux), recherche avec suggestions, et sélecteur de langue.
+
+Cas d'usage : header principal d'un site institutionnel avec navigation complexe. Inclut 6 rubriques de navigation dont une avec sous-menus imbriqués. La recherche propose des suggestions de pages populaires.
+      `,
+        },
+    },
 };
-Variant2Simplifie.storyName = 'Variante bouton supplémentaire';
+export const Variant2Simplifie = TemplateVariant2.bind({});
 Variant2Simplifie.args = {
     isActive: false,
     siteTitle: 'Titre du site',
     borderColor: 'var(--spw-ds-primary)',
 };
+Variant2Simplifie.storyName = 'Variante bouton supplémentaire';
+Variant2Simplifie.parameters = {
+    docs: {
+        description: {
+            story: `
+Header simplifié avec bouton d'action supplémentaire dans la navigation. Idéal pour mettre en avant une action principale (inscription, connexion, téléchargement).
+
+Le bouton extra peut être configuré avec icône, variant, lien et target. Navigation simplifiée avec 4 rubriques dont une avec dropdown.
+      `,
+        },
+    },
+};
 export const Variant3Etendu = TemplateVariant3.bind({});
 Variant3Etendu.args = {
     isActive: false,
@@ -338,4 +378,15 @@ Variant3Etendu.args = {
     borderColor: 'var(--spw-ds-tertiary)',
 };
 Variant3Etendu.storyName = 'Variante logo personnalisé';
+Variant3Etendu.parameters = {
+    docs: {
+        description: {
+            story: `
+Header avec logo personnalisé (slots logo et logo-mobile). Permet d'utiliser un logo custom au lieu du logo Wallonie par défaut.
+
+Configuration étendue avec sélecteur de persona à 3 options, recherche avec items prédéfinis, et navigation thématique. Parfait pour les sites spécialisés ou portails métiers nécessitant une identité visuelle distincte.
+      `,
+        },
+    },
+};
 //# sourceMappingURL=spw-header.stories.js.map