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

@infineon/infineon-design-system-stencil 30.1.1--canary.1496.ada7ab553a087bc3fb372b950494343ccb1df41e.0 → 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.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 (528) hide show

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

@@ -4,25 +4,25 @@ export default {
     title: 'Components/Dropdown',
     tags: ['autodocs'],
     args: {
-        Label: 'Dropdown',
-        variant: 'primary',
+        label: 'Dropdown',
         disabled: false,
-        icon: 'c-check-16',
-        size: 'm',
-        Search: false,
-        Header: false,
-        href: '',
-        target: '_self',
-        Separator: false,
-        DropDownMenuItemIcon: false,
         defaultOpen: false,
         noCloseOnOutsideClick: false,
         noCloseOnMenuClick: false,
         noAppendToBody: false,
+        variant: 'primary',
         placement: 'bottom-start',
+        size: 'm',
+        searchField: false,
+        header: false,
+        separator: false,
+        href: '',
+        target: '_self',
+        icon: 'c-info-16',
     },
     argTypes: {
         placement: {
+            description: 'Specifies the position of the dropdown relative to its trigger element.',
             options: [
                 'auto',
                 'auto-start',
@@ -40,57 +40,159 @@ export default {
                 'left-start',
                 'left-end',
             ],
-            control: { type: 'select' },
+            control: 'select',
+            table: {
+                category: 'ifx-dropdown props',
+                defaultValue: {
+                    summary: 'bottom-start'
+                }
+            }
         },
-        Label: {
-            description: 'The visible name or label for the dropdown button',
+        label: {
+            name: 'Label of Dropdown',
+            description: 'The visible name or label for the dropdown button.',
+            table: {
+                category: 'story controls',
+                defaultValue: {
+                    summary: 'Dropdown'
+                }
+            }
             // if: { arg: 'Type', eq: 'Default' }
         },
         size: {
-            description: 'Font Size options for menu items: s (14px) and m (16px) - default: m',
+            description: 'Font Size options for menu items: s (14px) and m (16px) - default: m.',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-dropdown-menu props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
+        },
+        disabled: {
+            description: 'Determines if the dropdown button should be disabled.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-dropdown props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
-        disabled: { description: 'Determines if the dropdown button should be disabled' },
         variant: {
-            description: 'The visual style of the dropdown button. Accepted values are "primary", "secondary", "tertiary"',
+            description: 'The visual style of the dropdown button. Accepted values are "primary", "secondary", "tertiary".',
             options: ['primary', 'secondary', 'tertiary'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-dropdown-trigger-button props',
+                defaultValue: {
+                    summary: 'primary'
+                }
+            }
             // if: { arg: 'Type', eq: 'Default' }
         },
         target: {
+            description: 'Determines where to open the linked document when the dropdown item is clicked.',
             options: ['_self', '_blank'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-dropdown-item props',
+                defaultValue: {
+                    summary: '_self'
+                }
+            }
         },
         href: {
-            description: 'href link to menu item'
+            description: 'href link to menu item.',
+            table: {
+                category: 'ifx-dropdown-item props'
+            }
         },
         icon: {
-            description: 'The icon to be displayed on the dropdown button',
-            options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            description: 'The icon to be displayed on the dropdown items.',
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            control: 'select',
+            table: {
+                category: 'ifx-dropdown-item props',
+                defaultValue: {
+                    summary: 'c-info-16'
+                }
+            }
             // if: { arg: 'Type', eq: 'Label Trigger' }
         },
-        Search: {
-            description: 'Show Search Bar'
+        searchField: {
+            description: 'Show Search Bar.',
+            table: {
+                category: 'ifx-dropdown-menu props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        header: {
+            description: 'Add Header Text.',
+            table: {
+                category: 'ifx-dropdown-menu props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        separator: {
+            description: 'Use separator in dropdown.',
+            table: {
+                category: 'ifx-dropdown-menu props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        defaultOpen: {
+            description: 'Determines if the dropdown should be open by default.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-dropdown props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
-        Header: {
-            description: 'Add Header Text'
+        noCloseOnOutsideClick: {
+            description: 'Determines if the dropdown should not close when a click outside the dropdown happens.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-dropdown props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
-        Separator: {
-            description: 'Use seperator in dropdown'
+        noCloseOnMenuClick: {
+            description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-dropdown props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
-        DropDownMenuItemIcon: {
-            description: 'Show menu item icon in dropdown'
+        noAppendToBody: {
+            description: 'Determines if the dropdown should not be appended to the body.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-dropdown props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
-        defaultOpen: { description: 'Determines if the dropdown should be open by default' },
-        noCloseOnOutsideClick: { description: 'Determines if the dropdown should not close when a click outside the dropdown happens' },
-        noCloseOnMenuClick: { description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens' },
-        noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },
         ifxOpen: {
             action: 'ifxOpen',
-            description: 'Custom event that is emitted when the dropdown opens',
+            description: 'Custom event that is emitted when the dropdown opens.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
@@ -99,8 +201,9 @@ export default {
         },
         ifxClose: {
             action: 'ifxClose',
-            description: 'Custom event emitted when dropdown closes',
+            description: 'Custom event emitted when dropdown closes.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
@@ -109,8 +212,9 @@ export default {
         },
         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});',
@@ -129,18 +233,18 @@ const DefaultTemplate = args => {
   no-append-to-body="${args.noAppendToBody}">
     <ifx-dropdown-trigger-button variant="${args.variant}">
-      ${args.Label}
+      ${args.label}
     </ifx-dropdown-trigger-button>
   <ifx-dropdown-menu size="${args.size}">
-    ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}
-    ${args.Search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ''}
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}
+    ${args.searchField ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ''}
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
   </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
@@ -151,13 +255,6 @@ const DefaultTemplate = args => {
     return wrapper;
 };
 export const Default = DefaultTemplate.bind({});
-Default.argTypes = {
-    icon: {
-        table: {
-            disable: true
-        }
-    }
-};
 const LabelTriggerTemplate = args => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `<ifx-dropdown
@@ -170,18 +267,18 @@ const LabelTriggerTemplate = args => {
   >
     Hello World! Click on the text to open the dropdown
     <ifx-dropdown-trigger>
-      <ifx-icon icon="${args.icon}"></ifx-icon>
+      <ifx-icon icon="${'c-check-16'}"></ifx-icon>
     </ifx-dropdown-trigger>
     Some more text
   <ifx-dropdown-menu size="${args.size}">
-    ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}
-    ${args.Search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ''}
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
-    ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}
-    <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}
+    ${args.search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ''}
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
+    ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}
+    <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
   </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
@@ -193,7 +290,7 @@ const LabelTriggerTemplate = args => {
 };
 export const LabelTrigger = LabelTriggerTemplate.bind({});
 LabelTrigger.argTypes = {
-    Label: {
+    label: {
         table: {
             disable: true
         }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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/Dropdown',\n tags: ['autodocs'],\n args: {\n Label: 'Dropdown',\n variant: 'primary',\n disabled: false,\n icon: 'c-check-16',\n size: 'm',\n Search: false,\n Header: false,\n href: '',\n target: '_self',\n Separator: false,\n DropDownMenuItemIcon: false,\n defaultOpen: false,\n noCloseOnOutsideClick: false,\n noCloseOnMenuClick: false,\n noAppendToBody: false,\n placement: 'bottom-start',\n },\n argTypes: {\n placement: {\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n ],\n control: { type: 'select' },\n },\n Label: { \n description: 'The visible name or label for the dropdown button',\n // if: { arg: 'Type', eq: 'Default' }\n },\n size: {\n description: 'Font Size options for menu items: s (14px) and m (16px) - default: m',\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n disabled: { description: 'Determines if the dropdown button should be disabled' },\n variant: {\n description: 'The visual style of the dropdown button. Accepted values are \"primary\", \"secondary\", \"tertiary\"',\n options: ['primary', 'secondary', 'tertiary'],\n control: { type: 'radio' },\n // if: { arg: 'Type', eq: 'Default' }\n },\n\n target: {\n options: ['_self', '_blank'],\n control: { type: 'radio' },\n },\n href: {\n description: 'href link to menu item'\n },\n icon: {\n description: 'The icon to be displayed on the dropdown button',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n // if: { arg: 'Type', eq: 'Label Trigger' }\n },\n Search :{\n description: 'Show Search Bar'\n },\n Header: {\n description: 'Add Header Text'\n },\n Separator:{\n description: 'Use seperator in dropdown'\n },\n DropDownMenuItemIcon: {\n description: 'Show menu item icon in dropdown'\n },\n defaultOpen: { description: 'Determines if the dropdown should be open by default' },\n noCloseOnOutsideClick: { description: 'Determines if the dropdown should not close when a click outside the dropdown happens' },\n noCloseOnMenuClick: { description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens' },\n noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event that is emitted when the dropdown opens',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n },\n },\n },\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when dropdown closes',\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 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-dropdown placement=\"${args.placement}\" \n disabled=\"${args.disabled}\" \n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.Label}\n </ifx-dropdown-trigger-button>\n\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.Search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {\n icon: {\n table: {\n disable: true\n }\n }\n}\n\n\n\nconst LabelTriggerTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n disabled=\"${args.disabled}\"\n no-append-to-body=\"${args.noAppendToBody}\"\n >\n Hello World! Click on the text to open the dropdown\n <ifx-dropdown-trigger>\n <ifx-icon icon=\"${args.icon}\"></ifx-icon>\n </ifx-dropdown-trigger>\n Some more text\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.Search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const LabelTrigger = LabelTriggerTemplate.bind({});\nLabelTrigger.argTypes = {\n Label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n }\n}\n"]}
1	+ {"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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/Dropdown',\n tags: ['autodocs'],\n args: {\n label: 'Dropdown',\n disabled: false,\n defaultOpen: false,\n noCloseOnOutsideClick: false,\n noCloseOnMenuClick: false,\n noAppendToBody: false,\n variant: 'primary',\n placement: 'bottom-start',\n size: 'm',\n searchField: false,\n header: false,\n separator: false,\n href: '',\n target: '_self',\n icon: 'c-info-16',\n },\n argTypes: {\n placement: {\n description: 'Specifies the position of the dropdown relative to its trigger element.',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n ],\n control: 'select',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: 'bottom-start'\n }\n }\n },\n label: {\n name: 'Label of Dropdown',\n description: 'The visible name or label for the dropdown button.',\n table: {\n category: 'story controls',\n defaultValue: {\n summary: 'Dropdown'\n }\n }\n // if: { arg: 'Type', eq: 'Default' }\n },\n size: {\n description: 'Font Size options for menu items: s (14px) and m (16px) - default: m.',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n disabled: {\n description: 'Determines if the dropdown button should be disabled.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n variant: {\n description: 'The visual style of the dropdown button. Accepted values are \"primary\", \"secondary\", \"tertiary\".',\n options: ['primary', 'secondary', 'tertiary'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-trigger-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n // if: { arg: 'Type', eq: 'Default' }\n },\n\n target: {\n description: 'Determines where to open the linked document when the dropdown item is clicked.',\n options: ['_self', '_blank'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: '_self'\n }\n }\n },\n href: {\n description: 'href link to menu item.',\n table: {\n category: 'ifx-dropdown-item props'\n }\n },\n icon: {\n description: 'The icon to be displayed on the dropdown items.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n // if: { arg: 'Type', eq: 'Label Trigger' }\n },\n searchField: {\n description: 'Show Search Bar.',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: false\n }\n }\n },\n header: {\n description: 'Add Header Text.',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: false\n }\n }\n },\n separator: {\n description: 'Use separator in dropdown.',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: false\n }\n }\n },\n defaultOpen: {\n description: 'Determines if the dropdown should be open by default.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noCloseOnOutsideClick: {\n description: 'Determines if the dropdown should not close when a click outside the dropdown happens.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noCloseOnMenuClick: {\n description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noAppendToBody: {\n description: 'Determines if the dropdown should not be appended to the body.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event that is emitted when the dropdown opens.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n },\n },\n },\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when dropdown closes.',\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 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 wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown placement=\"${args.placement}\" \n disabled=\"${args.disabled}\" \n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.label}\n </ifx-dropdown-trigger-button>\n\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.searchField ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\n\nconst LabelTriggerTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n disabled=\"${args.disabled}\"\n no-append-to-body=\"${args.noAppendToBody}\"\n >\n Hello World! Click on the text to open the dropdown\n <ifx-dropdown-trigger>\n <ifx-icon icon=\"${'c-check-16'}\"></ifx-icon>\n </ifx-dropdown-trigger>\n Some more text\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const LabelTrigger = LabelTriggerTemplate.bind({});\nLabelTrigger.argTypes = {\n label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n }\n}\n"]}

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

@@ -5,7 +5,13 @@ export default {
         copyrightText: '© 1999 - 2024 Infineon Technologies AG',
     },
     argTypes: {
-        copyrightText: { control: 'text' },
+        copyrightText: {
+            description: 'Sets the text for the copyright.',
+            control: 'text',
+            table: {
+                category: 'ifx-footer props',
+            }
+        },
     },
 };
 const DefaultTemplate = args => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;KACxD;IACD,QAAQ,EAAE;QACR,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;~~KACnC~~;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BpC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;;;;;;;gBAOZ,CAAC;AAEjB,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuDY,CAAC;AAEf,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/Footer',\n tags: ['autodocs'],\n args: {\n copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n },\n argTypes: {\n copyrightText: { control: 'text' },\n },\n};\n\nconst DefaultTemplate = args => {\n return `\n <ifx-footer copyright-text=\"${args.copyrightText}\">\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n};\n\nexport const Medium = DefaultTemplate.bind({});\n\nconst SmallTemplate = () => `<ifx-footer>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n\nexport const Small = SmallTemplate.bind({});\n\nconst LargeTemplate = () =>\n `<ifx-footer>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n</ifx-footer>`;\n\nexport const Large = LargeTemplate.bind({});\n"]}
1	+ {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;KACxD;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,WAAW,EAAE,kCAAkC;YAC/C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;aAC7B;SACF;KAEF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BpC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;;;;;;;gBAOZ,CAAC;AAEjB,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuDY,CAAC;AAEf,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/Footer',\n tags: ['autodocs'],\n args: {\n copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n },\n argTypes: {\n copyrightText: {\n description: 'Sets the text for the copyright.',\n control: 'text',\n table: {\n category: 'ifx-footer props',\n }\n },\n\n },\n};\n\nconst DefaultTemplate = args => {\n return `\n <ifx-footer copyright-text=\"${args.copyrightText}\">\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n};\n\nexport const Medium = DefaultTemplate.bind({});\n\nconst SmallTemplate = () => `<ifx-footer>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n\nexport const Small = SmallTemplate.bind({});\n\nconst LargeTemplate = () =>\n `<ifx-footer>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n</ifx-footer>`;\n\nexport const Large = LargeTemplate.bind({});\n"]}

package/dist/collection/components/icon/infineonIconStencil.stories.js CHANGED Viewed

@@ -8,16 +8,21 @@ export default {
     },
     argTypes: {
         icon: {
+            description: 'Set the icon.',
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            table: {
+                category: 'ifx-icon props',
+            }
         },
         consoleError: {
             action: 'consoleError',
-            description: 'Custom event emitted when icon is invalid',
+            description: 'Custom event emitted when icon is invalid.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onConsoleError={handleChange}\nVue:@consoleError="handleChange"\nAngular:(consoleError)="handleChange()"\nVanillaJs:.addEventListener("consoleError", (event) => {//handle change});',
+                    detail: 'React: onConsoleError={handleError}\nVue:@consoleError="handleError"\nAngular:(consoleError)="handleError()"\nVanillaJs:.addEventListener("consoleError", (event) => {//handle error});',
                 },
             },
         },

package/dist/collection/components/icon/infineonIconStencil.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infineonIconStencil.stories.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,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,YAAY,EAAE;YACZ,MAAM,EAAE,cAAc;YACtB,WAAW,EAAE,~~2CAA2C~~;~~YACxD~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,~~6LAA6L~~;~~iBAChM~~;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IACjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nimport { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Icon',\n tags: ['autodocs'],\n\n args: {\n icon: 'c-check-16',\n },\n argTypes: {\n icon: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n },\n consoleError: {\n action: 'consoleError',\n description: 'Custom event emitted when icon is invalid',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onConsoleError={~~handleChange~~}\\nVue:@consoleError=\"~~handleChange~~\"\\nAngular:(consoleError)=\"~~handleChange~~()\"\\nVanillaJs:.addEventListener(\"consoleError\", (event) => {//handle ~~change~~});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ icon }) => {\n const ifxIcon = document.createElement('ifx-icon');\n ifxIcon.setAttribute('icon', icon);\n ifxIcon.addEventListener('consoleError', action('consoleError'));\n return ifxIcon;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"infineonIconStencil.stories.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,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;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,cAAc;YACtB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yLAAyL;iBAC5L;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IACjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nimport { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Icon',\n tags: ['autodocs'],\n\n args: {\n icon: 'c-check-16',\n },\n argTypes: {\n icon: {\n description: 'Set the icon.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon props',\n }\n },\n consoleError: {\n action: 'consoleError',\n description: 'Custom event emitted when icon is invalid.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onConsoleError={handleError}\\nVue:@consoleError=\"handleError\"\\nAngular:(consoleError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"consoleError\", (event) => {//handle error});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ icon }) => {\n const ifxIcon = document.createElement('ifx-icon');\n ifxIcon.setAttribute('icon', icon);\n ifxIcon.addEventListener('consoleError', action('consoleError'));\n return ifxIcon;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -13,25 +13,81 @@ export default {
     },
     argTypes: {
         icon: {
+            description: 'The icon to be displayed.',
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'c-info-24'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the icon button.',
+            control: 'radio',
             options: ['primary', 'secondary', 'tertiary'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'primary'
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the icon button when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        },
+        href: {
+            description: 'Specifies the URL to which the icon button will link.',
+            table: {
+                category: 'ifx-icon-button props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         size: {
-            description: 'Size options: s (24px), m (40px) and l (48px) - default: m',
+            description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',
+            control: 'radio',
             options: ['s', 'm', 'l'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'm'
+                },
+                type: {
+                    summary: 's | m | l'
+                }
+            }
         },
         target: {
+            description: 'Determines where to open the linked URL when the button is clicked.',
+            control: 'radio',
             options: ['_blank', '_self', '_parent'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: '_blank'
+                }
+            }
         },
         shape: {
+            description: 'Defines the shape of the icon button.',
+            control: 'radio',
             options: ['round', 'square'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'round'
+                }
+            }
         },
     },
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;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~~;~~QAED~~,IAAI,EAAE;YACJ,WAAW,EAAE,~~4DAA4D~~;~~YACzE~~,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,~~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~~;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC5B,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAEtB,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/Icon Button',\n tags: ['autodocs'],\n\n args: {\n variant: 'primary',\n size: 'm',\n disabled: false,\n icon: 'c-info-24',\n href: '',\n target: '_blank',\n shape: 'round',\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\n size: {\n description: '~~Size~~ ~~options~~: s (24px), m (40px) and l (48px) ~~- default~~: m',\n options: ['s', 'm', 'l'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n target: {\n options: ['_blank', '_self', '_parent'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n shape: {\n options: ['round', 'square'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" disabled=\"${args.disabled}\">\n </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,2BAA2B;YACxC,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;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,6EAA6E;YAC1F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC5B,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAEtB,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/Icon Button',\n tags: ['autodocs'],\n\n args: {\n variant: 'primary',\n size: 'm',\n disabled: false,\n icon: 'c-info-24',\n href: '',\n target: '_blank',\n shape: 'round',\n },\n\n argTypes: {\n icon: {\n description: 'The icon to be displayed.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'c-info-24'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the icon button.',\n control: 'radio',\n options: ['primary', 'secondary', 'tertiary'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n disabled: {\n description: 'Disables the icon button when set to true.',\n control: 'boolean',\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'false'\n }\n }\n },\n href: {\n description: 'Specifies the URL to which the icon button will link.',\n table: {\n category: 'ifx-icon-button props',\n type: {\n summary: 'string'\n }\n }\n },\n size: {\n description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',\n control: 'radio',\n options: ['s', 'm', 'l'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'm'\n },\n type: {\n summary: 's \| m \| l'\n }\n }\n },\n target: {\n description: 'Determines where to open the linked URL when the button is clicked.',\n control: 'radio',\n options: ['_blank', '_self', '_parent'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: '_blank'\n }\n }\n },\n shape: {\n description: 'Defines the shape of the icon button.',\n control: 'radio',\n options: ['round', 'square'],\n table: {\n category: 'ifx-icon-button props',\n defaultValue: {\n summary: 'round'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args =>\n `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" disabled=\"${args.disabled}\">\n </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}