@infineon/infineon-design-system-stencil 30.1.1--canary.1496.ada7ab553a087bc3fb372b950494343ccb1df41e.0 → 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0

package/dist/collection/components/alert/alert.stories.js

@@ -5,28 +5,55 @@ export default {
     args: {
         label: 'Attention! This is an alert message — check it out!',
         variant: 'primary',
-        showIcon: true,
         closable: true,
-        iconName: 'c-info-24',
+        icon: 'c-info-24',
         AriaLive: 'assertive',
     },
     argTypes: {
+        label: {
+            name: 'Label of Alert',
+            description: 'Sets the label of *<ifx-alert>*.',
+            table: {
+                category: 'story controls'
+            }
+        },
         variant: {
+            description: 'Sets the style variant of the alert.',
             options: ['primary', 'success', 'danger', 'warning'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'primary'
+                }
+            }
         },
-        iconName: {
-            options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+        icon: {
+            description: 'The icon to be displayed. Choose ***none*** to display no icon.',
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            control: 'select',
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'c-info-24'
+                }
+            }
         },
         closable: {
+            description: 'Defines whether the alert should be closable or not.',
             control: 'boolean',
-            default: true,
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'true'
+                }
+            }
         },
         ifxClose: {
             action: 'ifxClose',
-            description: 'Custom event emitted when close button clicked',
+            description: 'Custom event emitted when close button clicked.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
@@ -35,12 +62,18 @@ export default {
         },
         AriaLive: {
             options: ['off', 'polite', 'assertive'],
-            control: { type: 'radio' },
-            description: 'The aria-live attribute to indicate a dynamic content.'
+            control: 'radio',
+            description: 'The aria-live attribute to indicate a dynamic content.',
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'assertive'
+                }
+            }
         },
     },
 };
-const DefaultTemplate = args => `<ifx-alert aria-live="${args.AriaLive}" variant="${args.variant}" icon="${args.showIcon ? args.iconName : ''}" closable="${args.closable}">${args.label}</ifx-alert>`;
+const DefaultTemplate = args => `<ifx-alert aria-live="${args.AriaLive}" variant="${args.variant}" icon="${args.icon === 'none' ? '' : args.icon}" closable="${args.closable}">${args.label}</ifx-alert>`;
 export const Default = DefaultTemplate.bind({});
 const InfoTemplate = args => `  <ifx-alert variant="info" closable="${args.closable}">
       <div slot="headline">Headline</div>
@@ -55,7 +88,7 @@ Info.argTypes = {
             disable: true,
         },
     },
-    iconName: {
+    icon: {
         table: {
             disable: true,
         },

package/dist/collection/components/alert/alert.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QAED,QAAQ,EAAE;YACR,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;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,IAAI;SACd;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,WAAW,EAAE,wDAAwD;SACtE;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAEvM,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAC1B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Alert',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Attention! This is an alert message — check it out!',\n    variant: 'primary',\n    showIcon: true,\n    closable: true,\n    iconName: 'c-info-24',\n    AriaLive: 'assertive',\n  },\n\n  argTypes: {\n    variant: {\n      options: ['primary', 'success', 'danger', 'warning'],\n      control: { type: 'radio' },\n    },\n\n    iconName: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n\n    closable: {\n      control: 'boolean',\n      default: true,\n    },\n\n    ifxClose: {\n      action: 'ifxClose',\n      description: 'Custom event emitted when close button clicked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n        },\n      },\n    },\n\n    AriaLive: { \n      options: ['off', 'polite', 'assertive'],\n      control: { type: 'radio' },\n      description: 'The aria-live attribute to indicate a dynamic content.' \n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.showIcon ? args.iconName : ''}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = args =>\n  `  <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n      <div slot=\"headline\">Headline</div>\n      <div slot=\"desc\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n      </div>\n    </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n  variant: {\n    table: {\n      disable: true,\n    },\n  },\n  iconName: {\n    table: {\n      disable: true,\n    },\n  },\n  showIcon: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}
+{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Alert',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Attention! This is an alert message — check it out!',\n    variant: 'primary',\n    closable: true,\n    icon: 'c-info-24',\n    AriaLive: 'assertive',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Alert',\n      description: 'Sets the label of *<ifx-alert>*.',\n      table: {\n        category: 'story controls'\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the alert.',\n      options: ['primary', 'success', 'danger', 'warning'],\n      control: 'radio',\n      table: {\n        category: 'ifx-alert props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n\n    icon: {\n      description: 'The icon to be displayed. Choose ***none*** to display no icon.',\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      control: 'select',\n      table: {\n        category: 'ifx-alert props',\n        defaultValue: {\n          summary: 'c-info-24'\n        }\n      }\n    },\n    closable: {\n      description: 'Defines whether the alert should be closable or not.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-alert props',\n        defaultValue: {\n          summary: 'true'\n        }\n      }\n    },\n\n    ifxClose: {\n      action: 'ifxClose',\n      description: 'Custom event emitted when close button clicked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n        },\n      },\n    },\n\n    AriaLive: { \n      options: ['off', 'polite', 'assertive'],\n      control: 'radio',\n      description: 'The aria-live attribute to indicate a dynamic content.',\n      table: {\n        category: 'ifx-alert props',\n        defaultValue: {\n          summary: 'assertive'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = args =>\n  `  <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n      <div slot=\"headline\">Headline</div>\n      <div slot=\"desc\">\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n      </div>\n    </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n  variant: {\n    table: {\n      disable: true,\n    },\n  },\n  icon: {\n    table: {\n      disable: true,\n    },\n  },\n  showIcon: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}

package/dist/collection/components/badge/badge.stories.js

@@ -4,19 +4,40 @@ export default {
     tags: ['autodocs'],
     args: {
         label: 'Badge label',
-        icon: false,
+        icon: '',
     },
     argTypes: {
-        iconName: {
-            options: Object.values(icons).map(i => i['name']),
+        label: {
+            description: 'The label of the badge.',
+            name: 'Label',
+            control: { type: 'text' },
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        icon: {
             control: { type: 'select' },
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            description: 'Set the icon of the tab. Choose "none" to display no icon.',
+            table: {
+                category: 'ifx-tab props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
     },
 };
-const DefaultTemplate = args => `<ifx-badge>
-    ${args.icon ? `<ifx-icon icon="${args.iconName}"></ifx-icon>` : ''}
-    ${args.label}
-  </ifx-badge>`;
+const DefaultTemplate = args => {
+    const icon = args.icon === 'none' ? '' : args.icon;
+    return `<ifx-badge>
+  ${args.label}
+  ${icon ? `<ifx-icon icon="${icon}"></ifx-icon>` : ''}
+</ifx-badge>`;
+};
 export const Default = DefaultTemplate.bind({});
 Default.argTypes = {};
 //# sourceMappingURL=badge.stories.js.map

package/dist/collection/components/badge/badge.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,KAAK;KACZ;IAED,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,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;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B;MACI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,QAAQ,eAAe,CAAC,CAAC,CAAC,EAAE;MAChE,IAAI,CAAC,KAAK;eACD,CAAC;AAEhB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Badge',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Badge label',\n    icon: false,\n  },\n\n  argTypes: {\n    iconName: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-badge>\n    ${args.icon ? `<ifx-icon icon=\"${args.iconName}\"></ifx-icon>` : ''}\n    ${args.label}\n  </ifx-badge>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,EAAE;KACT;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,yBAAyB;YACtC,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YAC9D,WAAW,EAAE,4DAA4D;YACzE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAEnD,OAAO;IACL,IAAI,CAAC,KAAK;IACV,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;aACzC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Badge',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Badge label',\n    icon: '',\n  },\n\n  argTypes: {\n    label: {\n      description: 'The label of the badge.',\n      name: 'Label',\n      control: { type: 'text' },\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    icon: {\n      control: { type: 'select' },\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n      table: {\n        category: 'ifx-tab props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const icon = args.icon === 'none' ? '' : args.icon;\n\n  return `<ifx-badge>\n  ${args.label}\n  ${icon ? `<ifx-icon icon=\"${icon}\"></ifx-icon>` : ''}\n</ifx-badge>`;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.stories.js

@@ -1,15 +1,73 @@
 import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Breadcrumb',
     tags: ['autodocs'],
     args: {
-        icon: false,
+        icon: '',
+        iconArialLabel: '',
+        url: 'http://google.com',
+        target: '_self',
     },
     argTypes: {
+        icon: {
+            control: { type: 'select' },
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            description: 'Set the icon of the tab. Choose "none" to display no icon.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        target: {
+            control: { type: 'text' },
+            description: 'Set the target of the link.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: '_self'
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        iconArialLabel: {
+            control: { type: 'text' },
+            description: 'Set the aria label of the icon.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        url: {
+            control: { type: 'text' },
+            description: 'Set the url of the link.',
+            table: {
+                category: 'ifx-dropdown-item props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         ifxDropdownMenuItem: {
             action: 'ifxDropdownMenuItem',
-            description: 'Custom event emitted when an item is selected',
+            description: 'Custom event emitted when an item is selected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
@@ -19,12 +77,13 @@ export default {
     },
 };
 const DefaultTemplate = args => {
+    const icon = args.icon === 'none' ? '' : args.icon;
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `<ifx-breadcrumb>
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ''}">Breadcrumb 1</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 1</ifx-breadcrumb-item-label>
     <ifx-dropdown-menu>
-      <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
+      <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>
       <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
       <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
       <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
@@ -32,9 +91,9 @@ const DefaultTemplate = args => {
   </ifx-breadcrumb-item>
 
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
     <ifx-dropdown-menu>
-    <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
+    <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>
     <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
     <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
     <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
@@ -42,7 +101,7 @@ const DefaultTemplate = args => {
   </ifx-breadcrumb-item>
 
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ''}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
   </ifx-breadcrumb-item>
 </ifx-breadcrumb>`;
     const breadcrumb = wrapper.querySelector('ifx-breadcrumb');

package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;KACZ;IACD,QAAQ,EAAE;QACR,mBAAmB,EAAE;YACnB,MAAM,EAAE,qBAAqB;YAC7B,WAAW,EAAE,+CAA+C;YAC5D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yNAAyN;iBAC5N;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;oDAE8B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;oDAU5B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;oDAU5B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;kBAE9D,CAAC;IAEjB,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAC;IAC1E,oFAAoF;IACpF,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC3E,eAAe,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;QACvC,MAAM,YAAY,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACvE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC,CAAC;IAEH,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/Breadcrumb',\n  tags: ['autodocs'],\n\n  args: {\n    icon: false,\n  },\n  argTypes: {\n    ifxDropdownMenuItem: {\n      action: 'ifxDropdownMenuItem',\n      description: 'Custom event emitted when an item is selected',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `<ifx-breadcrumb>\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? 'c-info-16' : ''}\">Breadcrumb 1</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n      <ifx-dropdown-item url=\"http://google.com\">Google</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? 'c-info-16' : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n    <ifx-dropdown-item url=\"http://google.com\">Google</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? 'c-info-16' : ''}\" url=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n  </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n  const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n  // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n  const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n  breadcrumbItems.forEach(breadcrumbItem => {\n    const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n    dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n  });\n\n  return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.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/Breadcrumb',\n  tags: ['autodocs'],\n\n  args: {\n    icon: '',\n    iconArialLabel: '',\n    url: 'http://google.com',\n    target: '_self',\n  },\n  argTypes: {\n    icon: {\n      control: { type: 'select' },\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      control: { type: 'text' },\n      description: 'Set the target of the link.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: '_self'\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    iconArialLabel: {\n      control: { type: 'text' },\n      description: 'Set the aria label of the icon.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    url: {\n      control: { type: 'text' },\n      description: 'Set the url of the link.',\n      table: {\n        category: 'ifx-dropdown-item props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    ifxDropdownMenuItem: {\n      action: 'ifxDropdownMenuItem',\n      description: 'Custom event emitted when an item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const icon = args.icon === 'none' ? '' : args.icon;\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `<ifx-breadcrumb>\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 1</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n      <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n    <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" url=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n  </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n  const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n  // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n  const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n  breadcrumbItems.forEach(breadcrumbItem => {\n    const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n    dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n  });\n\n  return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -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

@@ -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"]}
+{"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

@@ -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}