npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.1 → 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.0 - Mend

@infineon/infineon-design-system-stencil 30.9.1 → 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.0

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 (187) hide show

package/dist/collection/components/button/button.stories.js CHANGED Viewed

@@ -10,43 +10,138 @@ export default {
         size: 'm',
         fullWidth: false,
         disabled: false,
+        icon: '',
         iconPosition: 'left',
         href: false,
         url: '',
         target: '_blank',
     },
     argTypes: {
+        label: {
+            name: 'Label of Button',
+            description: 'Sets the text displayed on the button.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: '<ifx-button> `label` </ifx-button>'
+                }
+            }
+        },
         icon: {
+            description: 'The icon to be displayed.',
+            control: 'select',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            table: {
+                category: 'ifx-button props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the button.',
+            control: 'radio',
             options: ['primary', 'secondary', 'tertiary'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'primary'
+                }
+            }
         },
         theme: {
+            description: 'Specifies the theme style of the button.',
+            control: 'radio',
             options: ['default', 'danger', 'inverse'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'default'
+                }
+            }
         },
         type: {
+            description: 'Sets the type attribute of the button.',
+            control: 'radio',
             options: ['button', 'submit', 'reset'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'button'
+                }
+            }
         },
         size: {
-            description: 'Size options: xs (32px) s (36px),  m (40px), l (48px) - default: m',
+            description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',
+            control: 'radio',
             options: ['xs', 's', 'm', 'l'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         fullWidth: {
-            control: { type: 'boolean' },
+            description: 'When set to **true**, expands the button to take the full width of its container.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the button when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
         },
         iconPosition: {
+            description: 'Determines the position of an icon within the button if an icon is used.',
+            control: 'radio',
             options: ['left', 'right'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'left'
+                }
+            }
+        },
+        href: {
+            description: 'When set to **true**, treats the button as a link by setting a URL.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        },
+        url: {
+            description: 'Specifies the destination URL for the button when it acts as a link.',
+            table: {
+                category: 'ifx-button props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         target: {
+            description: 'Determines where to open the linked document when the button is clicked.',
+            control: 'radio',
             options: ['_blank', '_self', '_parent'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: '_blank'
+                }
+            }
         },
     },
 };

package/dist/collection/components/button/button.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,MAAM;QACpB,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,QAAQ;KACjB;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,~~OAAO~~,EAAE,EAAE,IAAI,EAAE,~~QAAQ~~,EAAE;~~SAC5B~~;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACzC,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;YACtC,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,~~oEAAoE~~;~~YACjF~~,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YAC9B,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,~~IAAI~~,EAAE,SAAS,EAAE;~~SAC7B~~;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,qBAAqB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,SAAS;IAC5N,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Button',\n tags: ['autodocs'],\n\n args: {\n label: 'Button',\n variant: 'primary',\n theme: 'default',\n type: 'button',\n size: 'm',\n fullWidth: false,\n disabled: false,\n iconPosition: 'left',\n href: false,\n url: '',\n target: '_blank',\n },\n\n argTypes: {\n icon: {\n options: Object.values(icons).map(i => i['name']),\n ~~control~~: { type: '~~select~~' },\n },\n variant: {\n options: ['primary', 'secondary', 'tertiary'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n theme: {\n options: ['default', 'danger', 'inverse'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n type: {\n options: ['button', 'submit', 'reset'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n size: {\n description: '~~Size~~ ~~options~~: xs (32px) s (36px), m (40px), l (48px) ~~- default~~: m',\n options: ['xs', 's', 'm', 'l'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n fullWidth: {\n control: { ~~type~~: 'boolean' },\n },\n iconPosition: {\n options: ['left', 'right'],\n control: { ~~type~~: '~~radio~~' },\n },\n target: {\n options: ['_blank', '_self', '_parent'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Button',\n tags: ['autodocs'],\n\n args: {\n label: 'Button',\n variant: 'primary',\n theme: 'default',\n type: 'button',\n size: 'm',\n fullWidth: false,\n disabled: false,\n icon: '',\n iconPosition: 'left',\n href: false,\n url: '',\n target: '_blank',\n },\n\n argTypes: {\n label: {\n name: 'Label of Button',\n description: 'Sets the text displayed on the button.',\n table: {\n category: 'story controls',\n type: {\n summary: '<ifx-button> `label` </ifx-button>'\n }\n }\n },\n icon: {\n description: 'The icon to be displayed.',\n control: 'select',\n options: Object.values(icons).map(i => i['name']),\n table: {\n category: 'ifx-button props',\n type: {\n summary: 'string'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the button.',\n control: 'radio',\n options: ['primary', 'secondary', 'tertiary'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n theme: {\n description: 'Specifies the theme style of the button.',\n control: 'radio',\n options: ['default', 'danger', 'inverse'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'default'\n }\n }\n },\n type: {\n description: 'Sets the type attribute of the button.',\n control: 'radio',\n options: ['button', 'submit', 'reset'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'button'\n }\n }\n },\n size: {\n description: 'Sets the size of the button. Options: xs (32px) s (36px), m (40px), l (48px)',\n control: 'radio',\n options: ['xs', 's', 'm', 'l'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n fullWidth: {\n description: 'When set to true, expands the button to take the full width of its container.',\n control: 'boolean',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n disabled: {\n description: 'Disables the button when set to true.',\n control: 'boolean',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n iconPosition: {\n description: 'Determines the position of an icon within the button if an icon is used.',\n control: 'radio',\n options: ['left', 'right'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'left'\n }\n }\n },\n href: {\n description: 'When set to true, treats the button as a link by setting a URL.',\n control: 'boolean',\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n url: {\n description: 'Specifies the destination URL for the button when it acts as a link.',\n table: {\n category: 'ifx-button props',\n type: {\n summary: 'string'\n }\n }\n },\n target: {\n description: 'Determines where to open the linked document when the button is clicked.',\n control: 'radio',\n options: ['_blank', '_self', '_parent'],\n table: {\n category: 'ifx-button props',\n defaultValue: {\n summary: '_blank'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/card/card.stories.js CHANGED Viewed

@@ -2,10 +2,10 @@ export default {
     title: 'Components/Card',
     tags: ['autodocs'],
     args: {
-        direction: 'vertical',
         overline: 'Overline',
         headline: 'Headline',
         description: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+        direction: 'vertical',
         button: 'button',
         href: '',
         target: '_blank',
@@ -13,23 +13,105 @@ export default {
         src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',
     },
     argTypes: {
+        overline: {
+            name: 'Overline',
+            description: 'Sets the overline text of the card.',
+            type: { name: 'string' },
+            table: {
+                category: 'story controls',
+            },
+        },
+        headline: {
+            name: 'Headline',
+            description: 'Sets the headline text of the card.',
+            type: { name: 'string' },
+            table: {
+                category: 'story controls',
+            },
+        },
+        description: {
+            name: 'Description',
+            description: 'Sets the description text of the card.',
+            type: { name: 'string' },
+            table: {
+                category: 'story controls',
+            },
+        },
         button: {
+            name: 'Button',
             options: ['button', 'link', 'none'],
+            description: 'Sets the button type of the card.',
             control: { type: 'radio' },
+            table: {
+                category: 'story controls',
+            },
         },
         direction: {
+            description: 'Sets the direction of the card layout.',
+            table: {
+                category: 'ifx-card props',
+                defaultValue: {
+                    summary: 'vertical',
+                },
+                type: {
+                    summary: 'horizontal | vertical',
+                    disable: true,
+                },
+            },
             options: ['horizontal', 'vertical'],
             control: { type: 'radio' },
         },
         position: {
+            description: 'Sets the position of the image in the card.',
+            table: {
+                category: 'ifx-card-image props',
+            },
             options: ['left', 'right'],
             control: { type: 'radio' },
             if: { arg: 'direction', eq: 'horizontal' },
         },
+        href: {
+            description: 'Sets the hyperlink reference.',
+            type: { name: 'string' },
+            table: {
+                category: 'ifx-card props',
+            },
+        },
         target: {
+            description: 'Sets the target of the hyperlink reference',
+            table: {
+                category: 'ifx-card props',
+                defaultValue: {
+                    summary: '_self',
+                },
+            },
             options: ['_blank', '_self', '_parent'],
             control: { type: 'radio' },
         },
+        isHovered: {
+            description: 'Changes the color of the headline when hovered.',
+            type: 'boolean',
+            table: {
+                defaultValue: {
+                    summary: false
+                },
+                category: 'ifx-card-headline props',
+            },
+        },
+        src: {
+            description: 'Sets the image source.',
+            type: { name: 'string' },
+            table: {
+                category: 'ifx-card-image props',
+            },
+        },
+        alt: {
+            description: 'Sets the alternative text for the image.',
+            type: { name: 'string' },
+            table: {
+                category: 'ifx-card-image props',
+            },
+        },
     },
 };
 const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
@@ -70,10 +152,11 @@ const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="$
   </ifx-card>`;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
+    alt: 'Coffee',
     src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',
 };
 const HorizontalTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
-    <ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
+    <ifx-card-image position="${args.position}" src="${args.src}" alt="${args.alt}" slot="img"></ifx-card-image>
     ${args.overline
     ? `<ifx-card-overline>
         ${args.overline}

package/dist/collection/components/card/card.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n title: 'Components/Card',\n tags: ['autodocs'],\n args: {\n direction: 'vertical',\n overline: 'Overline',\n headline: 'Headline',\n description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n button: 'button',\n href: '',\n target: '_blank',\n position: 'right',\n src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n },\n\n argTypes: {\n button: {\n options: ['button', 'link', 'none'],\n control: { type: 'radio' },\n },\n direction: {\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' },\n },\n\n position: {\n options: ['left', 'right'],\n control: { type: 'radio' },\n if: { arg: 'direction', eq: 'horizontal' },\n },\n\n target: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' },\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n ${\n args.overline\n ? `<ifx-card-overline>\n ${args.overline}\n </ifx-card-overline>`\n : ''\n }\n ${\n args.headline\n ? `<ifx-card-headline>\n ${args.headline}\n </ifx-card-headline>`\n : ''\n }\n ${\n args.description\n ? `<ifx-card-text>\n ${args.description}\n </ifx-card-text>`\n : ''\n }\n ${\n args.button === 'button'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-button variant=\"primary\">Button</ifx-button>\n <ifx-button variant=\"secondary\">Button</ifx-button>\n </ifx-card-links>`\n : ''\n }\n ${\n args.button === 'link'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-link href=\"https://google.com\" target=\"_blank\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n </ifx-card-links>`\n : ''\n }\n </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n ${\n args.overline\n ? `<ifx-card-overline>\n ${args.overline}\n </ifx-card-overline>`\n : ''\n }\n ${\n args.headline\n ? `<ifx-card-headline>\n ${args.headline}\n </ifx-card-headline>`\n : ''\n }\n ${\n args.description\n ? `<ifx-card-text>\n ${args.description}\n </ifx-card-text>`\n : ''\n }\n ${\n args.button === 'button'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-button variant=\"primary\">Button</ifx-button>\n <ifx-button variant=\"secondary\">Button</ifx-button>\n </ifx-card-links>`\n : ''\n }\n ${\n args.button === 'link'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n </ifx-card-links>`\n : ''\n }\n </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n direction: 'horizontal',\n src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n direction: {\n table: {\n disable: true,\n },\n },\n};\n"]}
1	+ {"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n title: 'Components/Card',\n tags: ['autodocs'],\n args: {\n overline: 'Overline',\n headline: 'Headline',\n description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n direction: 'vertical',\n button: 'button',\n href: '',\n target: '_blank',\n position: 'right',\n src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n },\n\n argTypes: {\n overline: {\n name: 'Overline',\n description: 'Sets the overline text of the card.',\n type: { name: 'string' },\n table: {\n category: 'story controls',\n },\n },\n headline: {\n name: 'Headline',\n description: 'Sets the headline text of the card.',\n type: { name: 'string' },\n table: {\n category: 'story controls',\n },\n },\n description: {\n name: 'Description',\n description: 'Sets the description text of the card.',\n type: { name: 'string' },\n table: {\n category: 'story controls',\n },\n },\n button: {\n name: 'Button',\n options: ['button', 'link', 'none'],\n description: 'Sets the button type of the card.',\n control: { type: 'radio' },\n table: {\n category: 'story controls',\n },\n },\n direction: {\n description: 'Sets the direction of the card layout.',\n table: {\n category: 'ifx-card props',\n defaultValue: {\n summary: 'vertical',\n },\n type: {\n summary: 'horizontal \| vertical',\n disable: true,\n },\n },\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' },\n },\n\n position: {\n description: 'Sets the position of the image in the card.',\n table: {\n category: 'ifx-card-image props',\n },\n options: ['left', 'right'],\n control: { type: 'radio' },\n if: { arg: 'direction', eq: 'horizontal' },\n },\n href: {\n description: 'Sets the hyperlink reference.',\n type: { name: 'string' },\n table: {\n category: 'ifx-card props',\n },\n },\n target: {\n description: 'Sets the target of the hyperlink reference',\n table: {\n category: 'ifx-card props',\n defaultValue: {\n summary: '_self',\n },\n },\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' },\n },\n isHovered: {\n description: 'Changes the color of the headline when hovered.',\n type: 'boolean',\n table: {\n defaultValue: {\n summary: false\n },\n category: 'ifx-card-headline props',\n },\n },\n src: {\n description: 'Sets the image source.',\n type: { name: 'string' },\n table: {\n category: 'ifx-card-image props',\n },\n },\n alt: {\n description: 'Sets the alternative text for the image.',\n type: { name: 'string' },\n table: {\n category: 'ifx-card-image props',\n },\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n ${args.overline\n ? `<ifx-card-overline>\n ${args.overline}\n </ifx-card-overline>`\n : ''\n }\n ${args.headline\n ? `<ifx-card-headline>\n ${args.headline}\n </ifx-card-headline>`\n : ''\n }\n ${args.description\n ? `<ifx-card-text>\n ${args.description}\n </ifx-card-text>`\n : ''\n }\n ${args.button === 'button'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-button variant=\"primary\">Button</ifx-button>\n <ifx-button variant=\"secondary\">Button</ifx-button>\n </ifx-card-links>`\n : ''\n }\n ${args.button === 'link'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-link href=\"https://google.com\" target=\"_blank\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n </ifx-card-links>`\n : ''\n }\n </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n alt: 'Coffee',\n src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\n ${args.overline\n ? `<ifx-card-overline>\n ${args.overline}\n </ifx-card-overline>`\n : ''\n }\n ${args.headline\n ? `<ifx-card-headline>\n ${args.headline}\n </ifx-card-headline>`\n : ''\n }\n ${args.description\n ? `<ifx-card-text>\n ${args.description}\n </ifx-card-text>`\n : ''\n }\n ${args.button === 'button'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-button variant=\"primary\">Button</ifx-button>\n <ifx-button variant=\"secondary\">Button</ifx-button>\n </ifx-card-links>`\n : ''\n }\n ${args.button === 'link'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n </ifx-card-links>`\n : ''\n }\n </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n direction: 'horizontal',\n src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n direction: {\n table: {\n disable: true,\n },\n },\n};\n"]}

package/dist/collection/components/checkbox/checkbox.stories.js CHANGED Viewed

@@ -3,41 +3,102 @@ export default {
     title: 'Components/Checkbox',
     tags: ['autodocs'],
     args: {
+        label: 'Text',
         error: false,
+        disabled: false,
         checked: false,
-        label: 'Text',
         size: 's',
         indeterminate: false,
-        name: 'checkbox',
-        value: 'checkbox',
+        name: 'checkbox'
     },
     argTypes: {
+        label: {
+            name: 'Label of Checkbox',
+            description: 'Sets the label of *<ifx-checkbox>*.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: '<ifx-checkbox> `label` </ifx-checkbox>'
+                }
+            }
+        },
+        error: {
+            description: 'Toggles the error state for the checkbox.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the checkbox when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
+        checked: {
+            description: 'Controls whether the checkbox is checked.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
+        indeterminate: {
+            description: 'Activates the indeterminate state for the checkbox when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
         size: {
-            description: 'Size options: s (21px) and m (25px) - default: m',
+            description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: 's'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
+        },
+        name: {
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-checkbox props'
+            }
         },
         ifxChange: {
             action: 'ifxChange',
-            description: 'Custom event emitted when accordion-item is closed',
+            description: 'Custom event that is triggered when the checkbox is clicked.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
                 },
             },
         },
-        name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
-        },
-        value: {
-            description: 'The value that gets submitted, when the checkbox is seleted'
-        }
     },
 };
-const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) => {
+const Template = ({ error, disabled, checked, indeterminate, size, label, name }) => {
     const checkbox = document.createElement('ifx-checkbox');
     checkbox.setAttribute('error', error);
+    checkbox.setAttribute('disabled', disabled);
     checkbox.setAttribute('checked', checked);
     checkbox.setAttribute('size', size);
     checkbox.setAttribute('indeterminate', indeterminate);
@@ -48,5 +109,5 @@ const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) =
   `;
     return checkbox;
 };
-export const Default = DefaultTemplate.bind({});
+export const Default = Template.bind({});
 //# sourceMappingURL=checkbox.stories.js.map

package/dist/collection/components/checkbox/checkbox.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,~~OAAO~~,EAAE,KAAK;~~QACd~~,~~KAAK~~,EAAE,~~MAAM~~;~~QACb~~,IAAI,EAAE,GAAG;QACT,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,UAAU;~~QAChB~~,KAAK,EAAE,~~UAAU~~;~~KAClB~~;~~IAED~~,QAAQ,EAAE;~~QACR~~,IAAI,EAAE;~~YACJ~~,WAAW,EAAE,~~kDAAkD~~;~~YAC/D~~,OAAO,EAAE,~~CAAC~~,~~GAAG~~,EAAE,~~GAAG~~,~~CAAC~~;~~YACnB~~,OAAO,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,SAAS,EAAE;~~YACT~~,~~MAAM~~,EAAE,~~WAAW~~;~~YACnB~~,WAAW,EAAE,~~oDAAoD~~;~~YACjE~~,KAAK,EAAE;gBACL,IAAI,EAAE;~~oBACJ~~,OAAO,EAAE,~~uBAAuB~~;~~oBAChC~~,~~MAAM~~,~~EACJ~~,~~iLAAiL~~;~~iBACpL~~;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;~~SACxF~~;QACD,~~KAAK~~,EAAE;~~YACL~~,WAAW,EAAE,~~6DAA6D~~;~~SAC3E~~;KACF;CACF,CAAC;AAEF,MAAM,~~eAAe~~,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;~~IAC/E~~,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACtC,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACtD,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEpC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE5D,QAAQ,CAAC,SAAS,GAAG;MACjB,KAAK;GACR,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,~~eAAe~~,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Checkbox',\n tags: ['autodocs'],\n args: {\n error: false,\n ~~checked~~: false,\n ~~label~~: ~~'Text'~~,\n size: 's',\n indeterminate: false,\n name: 'checkbox',\n ~~value~~: 'checkbox',\n },\n\n ~~argTypes~~: {\n size: {\n description: '~~Size~~ ~~options~~: s (21px) and m (25px) ~~- default~~: m',\n options: ['s', 'm'],\n ~~control~~: { type: '~~radio~~' },\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event ~~emitted~~ when ~~accordion-item~~ is ~~closed~~',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.'\n },\n value: {\n description: 'The value that gets submitted, when the checkbox is seleted'\n }\n },\n};\n\nconst ~~DefaultTemplate~~ = ({ error, checked, indeterminate, size, label, name }) => {\n const checkbox = document.createElement('ifx-checkbox');\n checkbox.setAttribute('error', error);\n checkbox.setAttribute('checked', checked);\n checkbox.setAttribute('size', size);\n checkbox.setAttribute('indeterminate', indeterminate);\n checkbox.setAttribute('name', name);\n\n checkbox.addEventListener('ifxChange', action('ifxChange'));\n\n checkbox.innerHTML = `\n ${label}\n `;\n\n return checkbox;\n};\n\nexport const Default = ~~DefaultTemplate~~.bind({})~~;\n~~"]}
1	+ {"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Checkbox',\n tags: ['autodocs'],\n args: {\n label: 'Text',\n error: false,\n disabled: false,\n checked: false,\n size: 's',\n indeterminate: false,\n name: 'checkbox'\n },\n\n argTypes: {\n label: {\n name: 'Label of Checkbox',\n description: 'Sets the label of <ifx-checkbox>.',\n table: {\n category: 'story controls',\n type: {\n summary: '<ifx-checkbox> `label` </ifx-checkbox>'\n }\n }\n },\n error: {\n description: 'Toggles the error state for the checkbox.',\n control: 'boolean',\n table: {\n category: 'ifx-checkbox props',\n defaultValue: {\n summary: false,\n }\n }\n },\n disabled: {\n description: 'Disables the checkbox when set to true.',\n control: 'boolean',\n table: {\n category: 'ifx-checkbox props',\n defaultValue: {\n summary: false,\n }\n }\n },\n checked: {\n description: 'Controls whether the checkbox is checked.',\n control: 'boolean',\n table: {\n category: 'ifx-checkbox props',\n defaultValue: {\n summary: false,\n }\n }\n },\n indeterminate: {\n description: 'Activates the indeterminate state for the checkbox when set to true.',\n control: 'boolean',\n table: {\n category: 'ifx-checkbox props',\n defaultValue: {\n summary: false,\n }\n }\n },\n size: {\n description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-checkbox props',\n defaultValue: {\n summary: 's'\n },\n type: {\n summary: 's \| m'\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-checkbox props'\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event that is triggered when the checkbox is clicked.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst Template = ({ error, disabled, checked, indeterminate, size, label, name }) => {\n const checkbox = document.createElement('ifx-checkbox');\n checkbox.setAttribute('error', error);\n checkbox.setAttribute('disabled', disabled);\n checkbox.setAttribute('checked', checked);\n checkbox.setAttribute('size', size);\n checkbox.setAttribute('indeterminate', indeterminate);\n checkbox.setAttribute('name', name);\n\n checkbox.addEventListener('ifxChange', action('ifxChange'));\n\n checkbox.innerHTML = `\n ${label}\n `;\n\n return checkbox;\n};\n\nexport const Default = Template.bind({});"]}

package/dist/collection/components/content-switcher/content-switcher.stories.js CHANGED Viewed

@@ -1,18 +1,77 @@
 import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Content Switcher',
     tags: ['autodocs'],
     args: {
         amountOfItems: 4,
+        label: 'Item',
+        value: 'item',
+        selected: false,
+        icon: 'applications-16'
     },
     argTypes: {
         amountOfItems: {
+            name: 'Amount of Items',
             control: { type: 'number' },
+            description: 'Set the number of content-switcher-items to be rendered.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
+        label: {
+            name: 'Label',
+            control: { type: 'text' },
+            description: 'Set the label of the content-switcher-item.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Set the value of the content-switcher-item.',
+            table: {
+                category: 'content-switcher-item props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        selected: {
+            control: { type: 'boolean' },
+            description: 'Set the selected state of the content-switcher-item. Only one item can be selected at the time. If there initially exists more than one selected item, then only the first item will be selected.',
+            table: {
+                category: 'content-switcher-item props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        icon: {
+            description: 'The icon of the content-switcher-item.',
+            options: Object.values(icons).map(i => i['name']),
+            control: { type: 'select' },
+            table: {
+                category: 'ifx-icon props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         ifxChange: {
             action: 'ifxChange',
             description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
@@ -21,14 +80,17 @@ export default {
         }
     },
 };
-const DefaultTemplate = ({ amountOfItems }) => {
+const DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {
     const element = document.createElement('ifx-content-switcher');
     for (let i = 0; i < amountOfItems; i++) {
         const item = document.createElement('ifx-content-switcher-item');
-        item.setAttribute('value', `item-${i + 1}`);
+        item.setAttribute('value', `${value} ${i + 1}`);
         item.innerHTML = `
-      <ifx-icon icon="applications-16"></ifx-icon>Item ${i + 1}
+      <ifx-icon icon="${icon}"></ifx-icon> ${label} ${i + 1}
     `;
+        if (i === 1 && selected) {
+            item.setAttribute('selected', 'true');
+        }
         element.appendChild(item);
     }
     element.addEventListener('ifxChange', action('ifxChange'));

package/dist/collection/components/content-switcher/content-switcher.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content-switcher.stories.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;~~AAElD~~,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;~~KAEjB~~;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;~~SAC5B~~;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,0IAA0I;YACvJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE;~~IAC5C~~,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QACjE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,~~QAAQ~~,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;~~QAC5C~~,IAAI,CAAC,SAAS,GAAG;~~yDACoC~~,CAAC,GAAG,CAAC;~~KACzD~~,CAAC;~~QAEF~~,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;~~IAED~~,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Content Switcher',\n tags: ['autodocs'],\n\n args: {\n amountOfItems: 4,\n\n },\n argTypes: {\n amountOfItems: {\n control: { type: 'number' },\n }, \n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.'~~, \~~n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n }\n },\n};\n\nconst DefaultTemplate = ({ amountOfItems }) => {\n const element = document.createElement('ifx-content-switcher');\n\n for (let i = 0; i < amountOfItems; i++) {\n const item = document.createElement('ifx-content-switcher-item');\n item.setAttribute('value', ~~`item-$~~{i + 1}`);\n item.innerHTML = `\n <ifx-icon icon=\"~~applications-16~~\"></ifx-icon>~~Item~~ ${i + 1}\n `;\n\n element.appendChild(item);\n }\n\n element.addEventListener('ifxChange', action('ifxChange'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}
1	+ {"version":3,"file":"content-switcher.stories.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Content Switcher',\n tags: ['autodocs'],\n\n args: {\n amountOfItems: 4,\n label: 'Item',\n value: 'item',\n selected: false,\n icon: 'applications-16'\n\n },\n argTypes: {\n amountOfItems: {\n name: 'Amount of Items',\n control: { type: 'number' },\n description: 'Set the number of content-switcher-items to be rendered.',\n table: {\n category: 'story controls',\n type: {\n summary: 'number'\n }\n }\n },\n label: {\n name: 'Label',\n control: { type: 'text' },\n description: 'Set the label of the content-switcher-item.',\n table: {\n category: 'story controls',\n type: {\n summary: 'string'\n }\n }\n },\n value: {\n control: { type: 'text' },\n description: 'Set the value of the content-switcher-item.',\n table: {\n category: 'content-switcher-item props',\n type: {\n summary: 'string'\n }\n }\n },\n selected: {\n control: { type: 'boolean' },\n description: 'Set the selected state of the content-switcher-item. Only one item can be selected at the time. If there initially exists more than one selected item, then only the first item will be selected.',\n table: {\n category: 'content-switcher-item props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n icon: {\n description: 'The icon of the content-switcher-item.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon props',\n type: {\n summary: 'string'\n }\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n }\n },\n};\n\nconst DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {\n const element = document.createElement('ifx-content-switcher');\n\n for (let i = 0; i < amountOfItems; i++) {\n const item = document.createElement('ifx-content-switcher-item');\n item.setAttribute('value', `${value} ${i + 1}`);\n item.innerHTML = `\n <ifx-icon icon=\"${icon}\"></ifx-icon> ${label} ${i + 1}\n `;\n if (i === 1 && selected) {\n item.setAttribute('selected', 'true');\n }\n\n element.appendChild(item);\n }\n element.addEventListener('ifxChange', action('ifxChange'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}