npm - @spw-ds/spw-stencil-library - Versions diffs - 1.2.0 → 1.2.1 - Mend

@spw-ds/spw-stencil-library 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (658) hide show

package/dist/collection/stories/organisms/spw-header/spw-header.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-header.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-header/spw-header.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,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,uBAAuB,EAAE,4BAA4B,CAAC,CAAC;AAEjF,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qCAAqC;IAC5C,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,WAAW,CAAC,QAAQ;IAC3B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA2C2B,QAAQ,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C7D,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,~~WAAW~~,GAAG,~~MAAM,CAAC,IAAI,CAAC,~~qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;~~IAElG~~,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,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,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,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,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,eAAe;IAC1B,WAAW,EAAE,uBAAuB;CACrC,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, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-header';\n\nconst subComponentTags = ['spw-header-navigation', 'spw-header-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/En-tête de site (header)',\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=\"orange\">En cours</spw-tag>\n\nSection supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n return /* HTML */ `\n <div slot=\"top-left\">\n <spw-header-persona>\n <option data-link=\"#\" selected value=\"citoyen\">Citoyen</option>\n <option data-link=\"#\" value=\"entreprise\">Entreprise</option>\n <option data-link=\"#\" value=\"pouvoirs-locaux\">Pouvoirs locaux</option>\n <option data-link=\"#\" value=\"non-marchands\">Non-marchands</option>\n </spw-header-persona>\n </div>\n\n <div slot=\"right\">\n <spw-header-lang>\n <option data-link=\"#\" selected value=\"fr\">Fr</option>\n <option data-link=\"#\" value=\"nl\">Nl</option>\n <option data-link=\"#\" value=\"en\">En</option>\n <option data-link=\"#\" value=\"de\">De</option>\n </spw-header-lang>\n </div>\n\n <div slot=\"search\">\n <spw-search-field\n class=\"mb-4\"\n size=\"medium\"\n name=\"search\"\n items='[\n {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n {\"label\": \"Pomme\"},\n {\"label\": \"Poire\"},\n {\"label\": \"Cerise\"},\n {\"label\": \"Raisin\"}\n ]'\n placeholder=\"Exemple : un mot-clé...\"\n ></spw-search-field>\n <h2 class=\"spw-ds-typography-heading-04 mb-4\">Suggestions de pages :</h2>\n <spw-group orientation=\"vertical\">\n <spw-link variant=\"tertiary\">Démarches</spw-link>\n <spw-link variant=\"tertiary\">Réforme primes énergie</spw-link>\n <spw-link variant=\"tertiary\">Jobs</spw-link>\n <spw-link variant=\"tertiary\">Trafiroutes</spw-link>\n </spw-group>\n </div>\n\n <spw-header-navigation>\n <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n <a href=\"#\">Rubrique 1</a>\n\n <spw-header-navigation-dropdown>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique niveau 2</a>\n <spw-header-navigation-dropdown>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique niveau 3</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique niveau 3</a>\n </spw-header-navigation-item>\n </spw-header-navigation-dropdown>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique</a>\n </spw-header-navigation-item>\n </spw-header-navigation-dropdown>\n </spw-header-navigation-item>\n\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 2</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 3</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 4</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 5</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 6</a>\n </spw-header-navigation-item>\n </spw-header-navigation>\n `;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const ~~masterProps~~ = ~~Object.keys(~~withComponentControls(componentsData, { tag: elementTag }) \|\| {});\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\nexport const Default = Template.bind({});\nDefault.args = {\n isActive: false,\n siteTitle: 'Titre du site',\n borderColor: 'var(--spw-ds-primary)',\n};\n"]}
1	+ {"version":3,"file":"spw-header.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-header/spw-header.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,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,uBAAuB,EAAE,4BAA4B,CAAC,CAAC;AAEjF,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qCAAqC;IAC5C,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,WAAW,CAAC,QAAQ;IAC3B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA2C2B,QAAQ,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C7D,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,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,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,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,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,eAAe;IAC1B,WAAW,EAAE,uBAAuB;CACrC,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, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-header';\n\nconst subComponentTags = ['spw-header-navigation', 'spw-header-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/En-tête de site (header)',\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=\"orange\">En cours</spw-tag>\n\nSection supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n return /* HTML */ `\n <div slot=\"top-left\">\n <spw-header-persona>\n <option data-link=\"#\" selected value=\"citoyen\">Citoyen</option>\n <option data-link=\"#\" value=\"entreprise\">Entreprise</option>\n <option data-link=\"#\" value=\"pouvoirs-locaux\">Pouvoirs locaux</option>\n <option data-link=\"#\" value=\"non-marchands\">Non-marchands</option>\n </spw-header-persona>\n </div>\n\n <div slot=\"right\">\n <spw-header-lang>\n <option data-link=\"#\" selected value=\"fr\">Fr</option>\n <option data-link=\"#\" value=\"nl\">Nl</option>\n <option data-link=\"#\" value=\"en\">En</option>\n <option data-link=\"#\" value=\"de\">De</option>\n </spw-header-lang>\n </div>\n\n <div slot=\"search\">\n <spw-search-field\n class=\"mb-4\"\n size=\"medium\"\n name=\"search\"\n items='[\n {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n {\"label\": \"Pomme\"},\n {\"label\": \"Poire\"},\n {\"label\": \"Cerise\"},\n {\"label\": \"Raisin\"}\n ]'\n placeholder=\"Exemple : un mot-clé...\"\n ></spw-search-field>\n <h2 class=\"spw-ds-typography-heading-04 mb-4\">Suggestions de pages :</h2>\n <spw-group orientation=\"vertical\">\n <spw-link variant=\"tertiary\">Démarches</spw-link>\n <spw-link variant=\"tertiary\">Réforme primes énergie</spw-link>\n <spw-link variant=\"tertiary\">Jobs</spw-link>\n <spw-link variant=\"tertiary\">Trafiroutes</spw-link>\n </spw-group>\n </div>\n\n <spw-header-navigation>\n <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n <a href=\"#\">Rubrique 1</a>\n\n <spw-header-navigation-dropdown>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique niveau 2</a>\n <spw-header-navigation-dropdown>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique niveau 3</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique niveau 3</a>\n </spw-header-navigation-item>\n </spw-header-navigation-dropdown>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Sous-rubrique</a>\n </spw-header-navigation-item>\n </spw-header-navigation-dropdown>\n </spw-header-navigation-item>\n\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 2</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 3</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 4</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 5</a>\n </spw-header-navigation-item>\n <spw-header-navigation-item>\n <a href=\"#\">Rubrique 6</a>\n </spw-header-navigation-item>\n </spw-header-navigation>\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\nexport const Default = Template.bind({});\nDefault.args = {\n isActive: false,\n siteTitle: 'Titre du site',\n borderColor: 'var(--spw-ds-primary)',\n};\n"]}

package/dist/collection/stories/organisms/spw-hero/spw-hero.stories.js CHANGED Viewed

@@ -35,8 +35,8 @@ function htmlContent() {
     <h1 class="spw-ds-typography-heading-01 mb-3">Mon titre</h1>
     <p class="spw-ds-typography-body-1 mb-4">Ceci est un exemple du hero banner avec une image.</p>
     <spw-group type="buttons" orientation="horizontal" alignment="left">
-      <spw-button is-full-width="true" variant="primary">Bouton primaire</spw-button>
-      <spw-button is-full-width="true" variant="tertiary">Bouton tertiaire</spw-button>
+      <spw-button is-full-width-mobile="true" variant="primary">Bouton primaire</spw-button>
+      <spw-button is-full-width-mobile="true" variant="tertiary">Bouton tertiaire</spw-button>
     </spw-group>
   `;
 }
@@ -69,7 +69,8 @@ function htmlContentMaxi() {
 }
 const Template = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             element.setAttribute(toKebabCase(key), val);
@@ -83,7 +84,8 @@ const Template = args => {
 };
 const TemplateMaxi = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             element.setAttribute(toKebabCase(key), val);
@@ -159,4 +161,22 @@ WhiteRight.args = {
     surface: 'light',
     alignment: 'right',
 };
+export const WhiteLeftPictureFull = Template.bind({});
+WhiteLeftPictureFull.args = {
+    variant: 'white',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Attribut alt',
+    surface: 'light',
+    alignment: 'left',
+    hasPictureFull: true,
+};
+export const WhiteRightPictureFull = Template.bind({});
+WhiteRightPictureFull.args = {
+    variant: 'white',
+    imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',
+    imageAlt: 'Attribut alt',
+    surface: 'light',
+    alignment: 'right',
+    hasPictureFull: true,
+};
 //# sourceMappingURL=spw-hero.stories.js.map

package/dist/collection/stories/organisms/spw-hero/spw-hero.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-hero.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-hero/spw-hero.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-hero';\n\nconst subComponentTags = [];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: \"Organismes/Bandeau d'en-tête (hero banner)\",\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\nBandeau illustré pour une mise en avant percutante.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n return /* HTML / `\n <h1 class=\"spw-ds-typography-heading-01 mb-3\">Mon titre</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">Ceci est un exemple du hero banner avec une image.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"left\">\n <spw-button is-full-width=\"true\" variant=\"primary\">Bouton primaire</spw-button>\n <spw-button is-full-width=\"true\" variant=\"tertiary\">Bouton tertiaire</spw-button>\n </spw-group>\n `;\n}\n\nfunction htmlContentMaxi() {\n return / HTML */ `\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Que cherchez-vous ?</h1>\n <spw-search-field\n class=\"mb-3\"\n size=\"large\"\n name=\"search\"\n items='[\n {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n {\"label\": \"Pomme\"},\n {\"label\": \"Poire\"},\n {\"label\": \"Cerise\"},\n {\"label\": \"Raisin\"}\n ]'\n placeholder=\"Exemple : un mot-clé...\"\n ></spw-search-field>\n <div class=\"d-flex justify-content-center flex-wrap\">\n <spw-button class=\"m-2\" variant=\"primary\">Démarches</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Réforme primes énergie</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Jobs</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Trafiroutes</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Précompte immobilier</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Taxes de circulation</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Plan de paiement</spw-button>\n </div>\n `;\n}\n\nconst Template: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) \|\| {});\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();\n\n return element;\n};\n\nconst TemplateMaxi: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) \|\| {});\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 = htmlContentMaxi();\n\n return element;\n};\n\nexport const PhotoLeft = Template.bind({});\nPhotoLeft.args = {\n variant: 'photo',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n};\n\nexport const PhotoRight = Template.bind({});\nPhotoRight.args = {\n variant: 'photo',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n};\n\nexport const PhotoCenter = Template.bind({});\nPhotoCenter.args = {\n variant: 'photo',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'center',\n};\n\nexport const Maxi = TemplateMaxi.bind({});\nMaxi.args = {\n variant: 'maxi',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'dark',\n overlayOpacity: 60,\n};\n\nexport const GreyLeft = Template.bind({});\nGreyLeft.args = {\n variant: 'grey',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n};\n\nexport const GreyRight = Template.bind({});\nGreyRight.args = {\n variant: 'grey',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n};\n\nexport const WhiteLeft = Template.bind({});\nWhiteLeft.args = {\n variant: 'white',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n};\n\nexport const WhiteRight = Template.bind({});\nWhiteRight.args = {\n variant: 'white',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n};\n"]}
1	+ {"version":3,"file":"spw-hero.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-hero/spw-hero.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-hero';\n\nconst subComponentTags = [];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: \"Organismes/Bandeau d'en-tête (hero banner)\",\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\nBandeau illustré pour une mise en avant percutante.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/5039a3-bandeau-den-tete-hero-banner)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContent() {\n return /* HTML / `\n <h1 class=\"spw-ds-typography-heading-01 mb-3\">Mon titre</h1>\n <p class=\"spw-ds-typography-body-1 mb-4\">Ceci est un exemple du hero banner avec une image.</p>\n <spw-group type=\"buttons\" orientation=\"horizontal\" alignment=\"left\">\n <spw-button is-full-width-mobile=\"true\" variant=\"primary\">Bouton primaire</spw-button>\n <spw-button is-full-width-mobile=\"true\" variant=\"tertiary\">Bouton tertiaire</spw-button>\n </spw-group>\n `;\n}\n\nfunction htmlContentMaxi() {\n return / HTML */ `\n <h1 class=\"spw-ds-typography-heading-01 mb-4\">Que cherchez-vous ?</h1>\n <spw-search-field\n class=\"mb-3\"\n size=\"large\"\n name=\"search\"\n items='[\n {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n {\"label\": \"Pomme\"},\n {\"label\": \"Poire\"},\n {\"label\": \"Cerise\"},\n {\"label\": \"Raisin\"}\n ]'\n placeholder=\"Exemple : un mot-clé...\"\n ></spw-search-field>\n <div class=\"d-flex justify-content-center flex-wrap\">\n <spw-button class=\"m-2\" variant=\"primary\">Démarches</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Réforme primes énergie</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Jobs</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Trafiroutes</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Précompte immobilier</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Taxes de circulation</spw-button>\n <spw-button class=\"m-2\" variant=\"primary\">Plan de paiement</spw-button>\n </div>\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();\n\n return element;\n};\n\nconst TemplateMaxi: 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 = htmlContentMaxi();\n\n return element;\n};\n\nexport const PhotoLeft = Template.bind({});\nPhotoLeft.args = {\n variant: 'photo',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n};\n\nexport const PhotoRight = Template.bind({});\nPhotoRight.args = {\n variant: 'photo',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n};\n\nexport const PhotoCenter = Template.bind({});\nPhotoCenter.args = {\n variant: 'photo',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'center',\n};\n\nexport const Maxi = TemplateMaxi.bind({});\nMaxi.args = {\n variant: 'maxi',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'dark',\n overlayOpacity: 60,\n};\n\nexport const GreyLeft = Template.bind({});\nGreyLeft.args = {\n variant: 'grey',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n};\n\nexport const GreyRight = Template.bind({});\nGreyRight.args = {\n variant: 'grey',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n};\n\nexport const WhiteLeft = Template.bind({});\nWhiteLeft.args = {\n variant: 'white',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n};\n\nexport const WhiteRight = Template.bind({});\nWhiteRight.args = {\n variant: 'white',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n};\n\nexport const WhiteLeftPictureFull = Template.bind({});\nWhiteLeftPictureFull.args = {\n variant: 'white',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'left',\n hasPictureFull: true,\n};\n\nexport const WhiteRightPictureFull = Template.bind({});\nWhiteRightPictureFull.args = {\n variant: 'white',\n imageSrc: 'https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5',\n imageAlt: 'Attribut alt',\n surface: 'light',\n alignment: 'right',\n hasPictureFull: true,\n};\n"]}

package/dist/collection/stories/organisms/spw-list/spw-list.stories.js CHANGED Viewed

@@ -80,7 +80,8 @@ function htmlContentDefault(slotArgs) {
 }
 const TemplateDefault = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             element.setAttribute(toKebabCase(key), val);

package/dist/collection/stories/organisms/spw-list/spw-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-list.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-list/spw-list.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,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,CAAC,eAAe,CAAC,CAAC;AAE3C,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,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,kBAAkB,CAAC,QAAQ;IAClC,OAAO,UAAU,CAAC;;cAEN,QAAQ,CAAC,IAAI;iBACV,QAAQ,CAAC,OAAO;kBACf,QAAQ,CAAC,QAAQ;uBACZ,QAAQ,CAAC,YAAY;uBACrB,QAAQ,CAAC,YAAY;oBACxB,QAAQ,CAAC,SAAS;cACxB,QAAQ,CAAC,IAAI;gBACX,QAAQ,CAAC,MAAM;cACjB,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;cAcb,QAAQ,CAAC,IAAI;iBACV,QAAQ,CAAC,OAAO;kBACf,QAAQ,CAAC,QAAQ;uBACZ,QAAQ,CAAC,YAAY;uBACrB,QAAQ,CAAC,YAAY;oBACxB,QAAQ,CAAC,SAAS;cACxB,QAAQ,CAAC,IAAI;gBACX,QAAQ,CAAC,MAAM;cACjB,QAAQ,CAAC,IAAI;;;;;;;;;;;;;GAaxB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,~~WAAW~~,GAAG,~~MAAM,CAAC,IAAI,CAAC,~~qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;~~IAElG~~,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,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,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,gBAAgB;IACtB,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,EAAE;IACR,YAAY,EAAE,mBAAmB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,+BAA+B;IACrC,YAAY,EAAE,EAAE;CACjB,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, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-list';\n\nconst subComponentTags = ['spw-list-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Liste',\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\nOrganise et présente des informations de manière structurée et facilement lisible. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault(slotArgs) {\n return /* HTML */ `\n <spw-list-item\n icon=\"${slotArgs.icon}\"\n variant=\"${slotArgs.variant}\"\n category=\"${slotArgs.category}\"\n category-link=\"${slotArgs.categoryLink}\"\n category-icon=\"${slotArgs.categoryIcon}\"\n line-clamp=\"${slotArgs.lineClamp}\"\n href=\"${slotArgs.href}\"\n target=\"${slotArgs.target}\"\n icon=\"${slotArgs.icon}\"\n >\n <spw-list-title\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-title>\n <spw-list-description\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-description>\n </spw-list-item>\n <spw-list-item\n icon=\"${slotArgs.icon}\"\n variant=\"${slotArgs.variant}\"\n category=\"${slotArgs.category}\"\n category-link=\"${slotArgs.categoryLink}\"\n category-icon=\"${slotArgs.categoryIcon}\"\n line-clamp=\"${slotArgs.lineClamp}\"\n href=\"${slotArgs.href}\"\n target=\"${slotArgs.target}\"\n icon=\"${slotArgs.icon}\"\n >\n <spw-list-title\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-title>\n <spw-list-description\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-description>\n </spw-list-item>\n `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const ~~masterProps~~ = ~~Object.keys(~~withComponentControls(componentsData, { tag: elementTag }) \|\| {});\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 = htmlContentDefault(args);\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n variant: 'default',\n category: '',\n categoryLink: '',\n lineClamp: '2',\n href: 'http://google.com',\n target: '_blank',\n icon: 'fa-arrow-right',\n categoryIcon: '',\n};\n\nexport const Category = TemplateDefault.bind({});\nCategory.args = {\n variant: 'default',\n category: 'Catégorie',\n categoryLink: '',\n lineClamp: '2',\n href: 'http://google.com',\n target: '_blank',\n icon: '',\n categoryIcon: 'fa-file-signature',\n};\n\nexport const Shortcut = TemplateDefault.bind({});\nShortcut.args = {\n variant: 'shortcut',\n category: '',\n categoryLink: '',\n lineClamp: '1',\n href: 'http://google.com',\n target: '_blank',\n icon: 'fa-arrow-up-right-from-square',\n categoryIcon: '',\n};\n"]}
1	+ {"version":3,"file":"spw-list.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-list/spw-list.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,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,gBAAgB,GAAG,CAAC,eAAe,CAAC,CAAC;AAE3C,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,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,kBAAkB,CAAC,QAAQ;IAClC,OAAO,UAAU,CAAC;;cAEN,QAAQ,CAAC,IAAI;iBACV,QAAQ,CAAC,OAAO;kBACf,QAAQ,CAAC,QAAQ;uBACZ,QAAQ,CAAC,YAAY;uBACrB,QAAQ,CAAC,YAAY;oBACxB,QAAQ,CAAC,SAAS;cACxB,QAAQ,CAAC,IAAI;gBACX,QAAQ,CAAC,MAAM;cACjB,QAAQ,CAAC,IAAI;;;;;;;;;;;;;;cAcb,QAAQ,CAAC,IAAI;iBACV,QAAQ,CAAC,OAAO;kBACf,QAAQ,CAAC,QAAQ;uBACZ,QAAQ,CAAC,YAAY;uBACrB,QAAQ,CAAC,YAAY;oBACxB,QAAQ,CAAC,SAAS;cACxB,QAAQ,CAAC,IAAI;gBACX,QAAQ,CAAC,MAAM;cACjB,QAAQ,CAAC,IAAI;;;;;;;;;;;;;GAaxB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,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,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,gBAAgB;IACtB,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,EAAE;IACR,YAAY,EAAE,mBAAmB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,EAAE;IACZ,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,+BAA+B;IACrC,YAAY,EAAE,EAAE;CACjB,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, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-list';\n\nconst subComponentTags = ['spw-list-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Liste',\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\nOrganise et présente des informations de manière structurée et facilement lisible. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/51c7cf-liste)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault(slotArgs) {\n return /* HTML */ `\n <spw-list-item\n icon=\"${slotArgs.icon}\"\n variant=\"${slotArgs.variant}\"\n category=\"${slotArgs.category}\"\n category-link=\"${slotArgs.categoryLink}\"\n category-icon=\"${slotArgs.categoryIcon}\"\n line-clamp=\"${slotArgs.lineClamp}\"\n href=\"${slotArgs.href}\"\n target=\"${slotArgs.target}\"\n icon=\"${slotArgs.icon}\"\n >\n <spw-list-title\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-title>\n <spw-list-description\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-description>\n </spw-list-item>\n <spw-list-item\n icon=\"${slotArgs.icon}\"\n variant=\"${slotArgs.variant}\"\n category=\"${slotArgs.category}\"\n category-link=\"${slotArgs.categoryLink}\"\n category-icon=\"${slotArgs.categoryIcon}\"\n line-clamp=\"${slotArgs.lineClamp}\"\n href=\"${slotArgs.href}\"\n target=\"${slotArgs.target}\"\n icon=\"${slotArgs.icon}\"\n >\n <spw-list-title\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-title>\n <spw-list-description\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Aliquam dapibus\n orci quam, ut lacinia turpis pharetra pulvinar. Duis vestibulum nisi nec quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus orci quam, ut\n lacinia turpis pharetra pulvinar.\n </spw-list-description>\n </spw-list-item>\n `;\n}\n\nconst TemplateDefault: 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 = htmlContentDefault(args);\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n variant: 'default',\n category: '',\n categoryLink: '',\n lineClamp: '2',\n href: 'http://google.com',\n target: '_blank',\n icon: 'fa-arrow-right',\n categoryIcon: '',\n};\n\nexport const Category = TemplateDefault.bind({});\nCategory.args = {\n variant: 'default',\n category: 'Catégorie',\n categoryLink: '',\n lineClamp: '2',\n href: 'http://google.com',\n target: '_blank',\n icon: '',\n categoryIcon: 'fa-file-signature',\n};\n\nexport const Shortcut = TemplateDefault.bind({});\nShortcut.args = {\n variant: 'shortcut',\n category: '',\n categoryLink: '',\n lineClamp: '1',\n href: 'http://google.com',\n target: '_blank',\n icon: 'fa-arrow-up-right-from-square',\n categoryIcon: '',\n};\n"]}

package/dist/collection/stories/organisms/spw-modal/spw-modal.stories.js CHANGED Viewed

@@ -40,7 +40,7 @@ const Template = args => {
             element.addEventListener(key.substring(2).toLowerCase(), val);
         }
         else {
-            if (key !== 'content' && key !== 'buttons') {
+            if (key !== 'content' && key !== 'buttons' && key !== 'closeModal' && key !== 'openModal') {
                 element.setAttribute(toKebabCase(key), val);
             }
         }

package/dist/collection/stories/organisms/spw-modal/spw-modal.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-modal.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-modal/spw-modal.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;AAClE,OAAO,iCAAiC,CAAC;AAEzC,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,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,QAAQ,kCACH,QAAQ,KACX,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC7B;IACD,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,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,QAAQ,GAAG,IAAI,gBAAgB,EAAE,CAAC;IAExC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,CAAC,WAAW,GAAG,uBAAuB,CAAC;IAE7C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,SAAS,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;~~gBAC3C~~,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;YACxD,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,CAAC,oBAAoB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAEnD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC3C,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;QACjB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC3C,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE9B,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;GAKR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,IAAI,EAAE,QAAQ;IACd,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;GAKR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;GAKR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,gFAAgF;IACzF,OAAO,EAAE;;;;;KAKN;CACJ,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';\nimport '../../assets/css/components.css';\n\nconst elementTag = 'spw-modal';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Organismes/Modale',\n component: elementTag,\n argTypes: {\n ...argTypes,\n content: { control: 'text' },\n buttons: { control: 'text' },\n },\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\nFenêtre superposée affichant du contenu ou des actions importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nconst Template: StoryFn = args => {\n const fragment = new DocumentFragment();\n\n const button = document.createElement('spw-button');\n button.textContent = 'Ouvrir fenêtre modale';\n\n const element = document.createElement(elementTag);\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 !== 'content' && key !== 'buttons') {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n button.setAttribute('data-modal-trigger', args.id);\n\n if (args.content) {\n const contentDiv = document.createElement('div');\n contentDiv.setAttribute('slot', 'content');\n contentDiv.innerHTML = args.content;\n element.appendChild(contentDiv);\n }\n\n if (args.buttons) {\n const buttonsDiv = document.createElement('div');\n buttonsDiv.setAttribute('slot', 'buttons');\n buttonsDiv.innerHTML = args.buttons;\n element.appendChild(buttonsDiv);\n }\n\n fragment.appendChild(button);\n fragment.appendChild(element);\n\n return fragment;\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n size: 'small',\n id: 'modal1',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal1\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal1\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n size: 'medium',\n id: 'modal2',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal2\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal2\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n size: 'large',\n id: 'modal3',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal3\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal3\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Fluid = Template.bind({});\nFluid.args = {\n size: 'fluid',\n id: 'modal4',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal4\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal4\">Fermer</spw-button>\n </spw-group>\n `,\n};\n"]}
1	+ {"version":3,"file":"spw-modal.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-modal/spw-modal.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';\nimport '../../assets/css/components.css';\n\nconst elementTag = 'spw-modal';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n title: 'Organismes/Modale',\n component: elementTag,\n argTypes: {\n ...argTypes,\n content: { control: 'text' },\n buttons: { control: 'text' },\n },\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\nFenêtre superposée affichant du contenu ou des actions importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/75759c-modale)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nconst Template: StoryFn = args => {\n const fragment = new DocumentFragment();\n\n const button = document.createElement('spw-button');\n button.textContent = 'Ouvrir fenêtre modale';\n\n const element = document.createElement(elementTag);\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 !== 'content' && key !== 'buttons' && key !== 'closeModal' && key !== 'openModal') {\n element.setAttribute(toKebabCase(key), val as string);\n }\n }\n });\n\n button.setAttribute('data-modal-trigger', args.id);\n\n if (args.content) {\n const contentDiv = document.createElement('div');\n contentDiv.setAttribute('slot', 'content');\n contentDiv.innerHTML = args.content;\n element.appendChild(contentDiv);\n }\n\n if (args.buttons) {\n const buttonsDiv = document.createElement('div');\n buttonsDiv.setAttribute('slot', 'buttons');\n buttonsDiv.innerHTML = args.buttons;\n element.appendChild(buttonsDiv);\n }\n\n fragment.appendChild(button);\n fragment.appendChild(element);\n\n return fragment;\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n size: 'small',\n id: 'modal1',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal1\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal1\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n size: 'medium',\n id: 'modal2',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal2\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal2\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n size: 'large',\n id: 'modal3',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal3\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal3\">Fermer</spw-button>\n </spw-group>\n `,\n};\n\nexport const Fluid = Template.bind({});\nFluid.args = {\n size: 'fluid',\n id: 'modal4',\n content: 'Lorem ipsum dolor sit amet consectetur adipiscing scelerisque dui lorem ipsum.',\n buttons: `\n <spw-group alignment=\"right\">\n <spw-button size=\"medium\" variant=\"primary\" data-modal-close=\"modal4\">Valider</spw-button>\n <spw-button size=\"medium\" variant=\"secondary\" data-modal-close=\"modal4\">Fermer</spw-button>\n </spw-group>\n `,\n};\n"]}

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

@@ -197,7 +197,8 @@ function camelToKebab(str) {
 }
 const TemplateCards = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -212,7 +213,8 @@ const TemplateCards = args => {
 };
 const TemplateIconTiles = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -227,7 +229,8 @@ const TemplateIconTiles = args => {
 };
 const TemplateLightTiles = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -242,7 +245,8 @@ const TemplateLightTiles = args => {
 };
 const TemplateBigTiles = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);

package/dist/collection/stories/organisms/spw-mosaic/spw-mosaic.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-mosaic.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-mosaic/spw-mosaic.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 } from '@utils/utils';\n\nconst elementTag = 'spw-mosaic';\n\nconst subComponentTags = ['spw-mosaic-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: \"Organismes/Mosaique d'éléments (masonry)\",\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\nPermet d'afficher une grille d'éléments sous la forme d'un masonry.\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentCards() {\n return /* HTML / `\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-subtags>\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 <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentIconTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-power-off\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-map-location-dot\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-paper-plane\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-user\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-image\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-bell\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentLightTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentBigTiles() {\n return / HTML */ `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction camelToKebab(str: string) {\n return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst TemplateCards: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) \|\| {});\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n const kebabKey = camelToKebab(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 = htmlContentCards();\n\n return element;\n};\n\nconst TemplateIconTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) \|\| {});\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n const kebabKey = camelToKebab(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 = htmlContentIconTiles();\n\n return element;\n};\n\nconst TemplateLightTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) \|\| {});\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n const kebabKey = camelToKebab(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 = htmlContentLightTiles();\n\n return element;\n};\n\nconst TemplateBigTiles: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) \|\| {});\n\n Object.entries(args).forEach(([key, val]) => {\n if (masterProps.includes(key)) {\n const kebabKey = camelToKebab(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 = htmlContentBigTiles();\n\n return element;\n};\n\nexport const Cards = TemplateCards.bind({});\nCards.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const IconTiles = TemplateIconTiles.bind({});\nIconTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const LightTiles = TemplateLightTiles.bind({});\nLightTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const BigTiles = TemplateBigTiles.bind({});\nBigTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n"]}
1	+ {"version":3,"file":"spw-mosaic.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-mosaic/spw-mosaic.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 } from '@utils/utils';\n\nconst elementTag = 'spw-mosaic';\n\nconst subComponentTags = ['spw-mosaic-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: \"Organismes/Mosaique d'éléments (masonry)\",\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\nPermet d'afficher une grille d'éléments sous la forme d'un masonry.\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentCards() {\n return /* HTML / `\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-subtags>\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 <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-image label=\"Tag\">\n <img alt=\"Image\" src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" />\n </spw-card-image>\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-card full-height=\"true\" href=\"http://google.com\" target=\"_blank\">\n <spw-card-content subtag=\"Tag\" tag=\"Catégorie\" date=\"2024-02-09\">\n <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>\n <spw-card-excerpt>\n Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.\n </spw-card-excerpt>\n </spw-card-content>\n </spw-card>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentIconTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-power-off\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-map-location-dot\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-paper-plane\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-user\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-image\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile variant=\"icon\" href=\"http://google.com\" target=\"_blank\">\n <spw-icon icon=\"fa-bell\"></spw-icon>\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n <spw-tile-description>Description de ma tuile</spw-tile-description>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentLightTiles() {\n return / HTML / `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"light\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction htmlContentBigTiles() {\n return / HTML */ `\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n <spw-mosaic-item>\n <spw-tile image-src=\"https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5\" image-alt=\"Image de tuile\" variant=\"big\" href=\"http://google.com\" target=\"_blank\">\n <spw-tile-title>Titre de ma tuile</spw-tile-title>\n </spw-tile>\n </spw-mosaic-item>\n `;\n}\n\nfunction camelToKebab(str: string) {\n return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst TemplateCards: 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 const kebabKey = camelToKebab(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 = htmlContentCards();\n\n return element;\n};\n\nconst TemplateIconTiles: 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 const kebabKey = camelToKebab(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 = htmlContentIconTiles();\n\n return element;\n};\n\nconst TemplateLightTiles: 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 const kebabKey = camelToKebab(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 = htmlContentLightTiles();\n\n return element;\n};\n\nconst TemplateBigTiles: 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 const kebabKey = camelToKebab(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 = htmlContentBigTiles();\n\n return element;\n};\n\nexport const Cards = TemplateCards.bind({});\nCards.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const IconTiles = TemplateIconTiles.bind({});\nIconTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const LightTiles = TemplateLightTiles.bind({});\nLightTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n\nexport const BigTiles = TemplateBigTiles.bind({});\nBigTiles.args = {\n isMasonry: true,\n colsDesktop: 3,\n colsTablet: 2,\n colsMobile: 1,\n};\n"]}

package/dist/collection/stories/organisms/spw-sidebar/spw-sidebar.stories.js CHANGED Viewed

@@ -80,7 +80,8 @@ function htmlContentDefault() {
 }
 const TemplateDefault = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             element.setAttribute(toKebabCase(key), val);

package/dist/collection/stories/organisms/spw-sidebar/spw-sidebar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-sidebar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-sidebar/spw-sidebar.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,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,gBAAgB,GAAG,CAAC,kCAAkC,EAAE,iCAAiC,EAAE,6BAA6B,CAAC,CAAC;AAEhI,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,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,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CjB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,~~WAAW~~,GAAG,~~MAAM,CAAC,IAAI,CAAC,~~qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;~~IAElG~~,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,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,kBAAkB,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,eAAe,EAAE,KAAK;CACvB,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, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-sidebar';\n\nconst subComponentTags = ['spw-sidebar-navigation-separator', 'spw-sidebar-navigation-dropdown', 'spw-sidebar-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Sidebar',\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\nPanneau latéral pour navigation ou actions contextuelles. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n return /* HTML */ `\n <div slot=\"navigation-top\">\n <spw-sidebar-navigation-item icon=\"fa-home\" tooltip-title=\"Accueil\" active> Accueil </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-file\" bubble=\"3\" tooltip-title=\"Documents\">\n Documents\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n </spw-sidebar-navigation-dropdown>\n </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-calendar\" tooltip-title=\"Calendrier\"> Calendrier </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-envelope\" tooltip-title=\"Messages\" bubble=\"9\"> Messages </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-chart-sine\" tooltip-title=\"Statistiques\"> Statistiques </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-cloud\" tooltip-title=\"Fichiers\"> Fichiers </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-user-shield\" tooltip-title=\"Permissions\" disabled> Permissions </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-address-book\" tooltip-title=\"Annuaire\" bubbles=\"1\"> Annuaire </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-moon\" tooltip-title=\"Mode sombre\"> Mode sombre </spw-sidebar-navigation-item>\n </div>\n <div slot=\"navigation-bottom\">\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-globe\" tooltip-title=\"Liens utiles\"> Liens utiles </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-circle-question\" tooltip-title=\"Aide\"> Aide </spw-sidebar-navigation-item>\n </div>\n `;\n}\n\nconst TemplateDefault: StoryFn = args => {\n const element = document.createElement(elementTag);\n\n const ~~masterProps~~ = ~~Object.keys(~~withComponentControls(componentsData, { tag: elementTag }) \|\| {});\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 = htmlContentDefault();\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n defaultExpanded: false,\n};\n"]}
1	+ {"version":3,"file":"spw-sidebar.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-sidebar/spw-sidebar.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,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC,MAAM,gBAAgB,GAAG,CAAC,kCAAkC,EAAE,iCAAiC,EAAE,6BAA6B,CAAC,CAAC;AAEhI,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,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,kBAAkB;IACzB,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CjB,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAY,IAAI,CAAC,EAAE;IACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,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,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,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,kBAAkB,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,eAAe,EAAE,KAAK;CACvB,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, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-sidebar';\n\nconst subComponentTags = ['spw-sidebar-navigation-separator', 'spw-sidebar-navigation-dropdown', 'spw-sidebar-navigation-item'];\n\nconst argTypes = {\n ...withComponentControls(componentsData, { tag: elementTag }),\n ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n title: 'Organismes/Sidebar',\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\nPanneau latéral pour navigation ou actions contextuelles. \n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/30d84f-sidebar)\n `,\n },\n },\n },\n};\n\nexport default meta;\n\nfunction htmlContentDefault() {\n return /* HTML */ `\n <div slot=\"navigation-top\">\n <spw-sidebar-navigation-item icon=\"fa-home\" tooltip-title=\"Accueil\" active> Accueil </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-file\" bubble=\"3\" tooltip-title=\"Documents\">\n Documents\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n <spw-sidebar-navigation-item>\n Sous-catégorie\n <spw-sidebar-navigation-dropdown slot=\"dropdown\">\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item> Item </spw-sidebar-navigation-item>\n </spw-sidebar-navigation-dropdown></spw-sidebar-navigation-item\n >\n </spw-sidebar-navigation-dropdown>\n </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-calendar\" tooltip-title=\"Calendrier\"> Calendrier </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-envelope\" tooltip-title=\"Messages\" bubble=\"9\"> Messages </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-chart-sine\" tooltip-title=\"Statistiques\"> Statistiques </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-cloud\" tooltip-title=\"Fichiers\"> Fichiers </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-user-shield\" tooltip-title=\"Permissions\" disabled> Permissions </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-address-book\" tooltip-title=\"Annuaire\" bubbles=\"1\"> Annuaire </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-moon\" tooltip-title=\"Mode sombre\"> Mode sombre </spw-sidebar-navigation-item>\n </div>\n <div slot=\"navigation-bottom\">\n <spw-sidebar-navigation-separator></spw-sidebar-navigation-separator>\n <spw-sidebar-navigation-item icon=\"fa-globe\" tooltip-title=\"Liens utiles\"> Liens utiles </spw-sidebar-navigation-item>\n <spw-sidebar-navigation-item icon=\"fa-circle-question\" tooltip-title=\"Aide\"> Aide </spw-sidebar-navigation-item>\n </div>\n `;\n}\n\nconst TemplateDefault: 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 = htmlContentDefault();\n\n return element;\n};\n\nexport const Default = TemplateDefault.bind({});\nDefault.args = {\n defaultExpanded: false,\n};\n"]}

package/dist/collection/stories/organisms/spw-table/spw-table.stories.js CHANGED Viewed

@@ -35,7 +35,8 @@ function camelToKebab(str) {
 }
 const Template = args => {
     const element = document.createElement(elementTag);
-    const masterProps = Object.keys(withComponentControls(componentsData, { tag: elementTag }) || {});
+    const controls = withComponentControls(componentsData, { tag: elementTag }) || {};
+    const masterProps = controls.__realProps || Object.keys(controls);
     Object.entries(args).forEach(([key, val]) => {
         if (masterProps.includes(key)) {
             const kebabKey = camelToKebab(key);
@@ -144,7 +145,46 @@ TableWithActionsAndTags.args = {
         <spw-table-header width="20" scope="col">
           <spw-checkbox></spw-checkbox>
         </spw-table-header>
-        <spw-table-header column-id="name" sortable scope="col">Nom</spw-table-header>
+        <spw-table-header tooltip-title="Information" tooltip-text="Ceci est une phrase d'exemple" column-id="name" sortable scope="col">
+          Nom
+          <spw-dropdown slot="filters" content-width="360" direction="bottom">
+            <spw-icon icon="fa-filter">
+              <div slot="dropdownContent">
+                <h3 class="spw-ds-typography-heading-03">Filtrer la colonne nom</h3>
+                <form>
+                  <spw-text-field
+                    required
+                    size="small"
+                    max-length="100"
+                    min-length="3"
+                    label="Champ texte"
+                    type="text"
+                    placeholder="Entrez un texte"
+                    name="firstname"
+                    class="mb-2"
+                  ></spw-text-field>
+                  <spw-custom-select
+                    label="Mon label"
+                    placeholder="Sélectionnez une option"
+                    name="mon-super-select"
+                    required="true"
+                    multiple="true"
+                    id="mon-custom-select-dynamique"
+                    is-search="true"
+                    class="mb-3"
+                  ></spw-custom-select>
+                  <spw-group label="Des choix horizontaux" required="true" type="radios" orientation="horizontal">
+                    <spw-radio name="radio1" value="option1">Un input radio</spw-radio>
+                    <spw-radio name="radio1" value="option2">Un input radio</spw-radio>
+                  </spw-group>
+                </form>
+                <spw-group orientation="vertical" is-full-width>
+                  <spw-button class="mt-3" is-full-width variant="primary" size="small">Appliquer</spw-button>
+                </spw-group>
+              </div>
+            </spw-icon>
+          </spw-dropdown>
+        </spw-table-header>
         <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
         <spw-table-header column-id="status" sortable scope="col">Statut</spw-table-header>
         <spw-table-header text-align="center" scope="col">Actions</spw-table-header>
@@ -158,9 +198,62 @@ TableWithActionsAndTags.args = {
         <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
         <spw-table-cell padding="small" width="10">
           <div class="d-flex">
-            <spw-button size="small" variant="secondary" class="mx-1"><spw-icon icon="fa-trash"></spw-icon></spw-button>
-            <spw-button size="small" variant="secondary" class="mx-1"><spw-icon icon="fa-edit"></spw-icon></spw-button>
-            <spw-button size="small" variant="secondary" class="mx-1"><spw-icon icon="fa-ellipsis"></spw-icon></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-dropdown direction="left">
+              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
+                <div slot="dropdownContent">
+                  <spw-group orientation="vertical" is-full-width>
+                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
+                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
+                  </spw-group>
+                </div>
+              </spw-button>
+            </spw-dropdown>
+          </div>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row state="disabled">
+        <spw-table-cell width="20"><spw-checkbox disabled="true"></spw-checkbox></spw-table-cell>
+        <spw-table-cell>Marie</spw-table-cell>
+        <spw-table-cell>22</spw-table-cell>
+        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <div class="d-flex">
+            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-dropdown direction="left">
+              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
+                <div slot="dropdownContent">
+                  <spw-group orientation="vertical" is-full-width>
+                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
+                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
+                  </spw-group>
+                </div>
+              </spw-button>
+            </spw-dropdown>
+          </div>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row state="selected">
+        <spw-table-cell width="20"><spw-checkbox checked="true"></spw-checkbox></spw-table-cell>
+        <spw-table-cell>Thomas</spw-table-cell>
+        <spw-table-cell>37</spw-table-cell>
+        <spw-table-cell width="40"><spw-tag size="small" variant="green">Validé</spw-tag></spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <div class="d-flex">
+            <spw-button size="small" variant="secondary" icon="fa-trash" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-button size="small" variant="secondary" icon="fa-edit" is-icon-only="true" class="mx-1"></spw-button>
+            <spw-dropdown direction="left">
+              <spw-button icon="fa-ellipsis-vertical" is-icon-only="true" size="small" variant="secondary" class="mx-1">
+                <div slot="dropdownContent">
+                  <spw-group orientation="vertical" is-full-width>
+                    <spw-button is-full-width variant="secondary" size="small">Modifier</spw-button>
+                    <spw-button is-full-width variant="secondary" size="small">Supprimer</spw-button>
+                  </spw-group>
+                </div>
+              </spw-button>
+            </spw-dropdown>
           </div>
         </spw-table-cell>
       </spw-table-row>