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

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

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

Files changed (187) hide show

package/dist/collection/components/date-picker/date-picker.stories.js CHANGED Viewed

@@ -12,24 +12,91 @@ export default {
         max: '',
         min: '',
         label: "Label Text",
-        caption: "Caption text, description, error notification",
+        caption: "Caption text, description, error notification.",
     },
     argTypes: {
+        label: {
+            description: 'Label of Date Picker.',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        caption: {
+            description: 'Caption text, description, error notification.',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        min: {
+            description: 'Minimum date that can be selected',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        max: {
+            description: 'The latest date that can be selected.',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        disabled: {
+            description: 'Disables the date picker',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        success: {
+            description: 'Indicates success in the date picker.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        error: {
+            description: 'Indicates error in the date picker.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
         size: {
-            description: 'Size options: Height small  (36px) and Height large (40px) - default: small',
+            description: 'Sets the size of the date picker. Options: Height small  (36px) and Height large (40px)',
+            control: 'radio',
             options: ['s', 'l'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: 's'
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-date-picker props'
+            }
         },
         value: {
-            description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd'
+            description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd',
+            table: {
+                category: 'ifx-date-picker props'
+            }
         },
         ifxDate: {
             action: 'ifxDate',
-            description: 'Custom event',
+            description: 'A custom event emitted when a date in the calendar is being selected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxDate={handleInput}\nVue:@ifxDate="handleInput"\nAngular:(ifxDate)="handleInput()"\nVanillaJs:.addEventListener("ifxDate", (event) => {//handle input});',

package/dist/collection/components/date-picker/date-picker.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE~~,+CAA+C~~;~~KACzD~~;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,~~6EAA6E~~;~~YAC1F~~,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,~~OAAO~~,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;~~SACxF~~;QACD,KAAK,EAAE;YACL,WAAW,EAAE,4HAA4H;~~SAC1I~~;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,~~cAAc~~;~~YAC3B~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,qKAAqK;iBACxK;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACvD,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/Date Picker',\n tags: ['autodocs'],\n\n args: {\n disabled: false,\n size: 's',\n success: false,\n error: false,\n name: 'date-picker',\n value: '',\n max: '',\n min: '',\n label: \"Label Text\",\n caption: \"Caption text, description, error notification\",\n },\n argTypes: {\n size: {\n description: '~~Size~~ ~~options~~: Height small (36px) and Height large (40px) ~~- default~~: ~~small~~',\n options: ['s', 'l'],\n ~~control~~: { ~~type~~: '~~radio~~' },\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.'\n },\n value: { \n description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd'\n },\n ifxDate: {\n action: 'ifxDate',\n description: '~~Custom~~ event',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label }) => {\n const element = document.createElement('ifx-date-picker');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('success', success);\n element.setAttribute('value', value);\n element.setAttribute('max', max);\n element.setAttribute('min', min);\n element.setAttribute('label', label);\n element.setAttribute('caption', caption);\n element.addEventListener('ifxDate', action('ifxDate'));\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}
1	+ {"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Date Picker',\n tags: ['autodocs'],\n\n args: {\n disabled: false,\n size: 's',\n success: false,\n error: false,\n name: 'date-picker',\n value: '',\n max: '',\n min: '',\n label: \"Label Text\",\n caption: \"Caption text, description, error notification.\",\n },\n argTypes: {\n label: {\n description: 'Label of Date Picker.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n caption: {\n description: 'Caption text, description, error notification.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n min: {\n description: 'Minimum date that can be selected',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n max: {\n description: 'The latest date that can be selected.',\n table: {\n category: 'ifx-date-picker props',\n }\n },\n disabled: {\n description: 'Disables the date picker',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n success: {\n description: 'Indicates success in the date picker.',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n error: {\n description: 'Indicates error in the date picker.',\n control: 'boolean',\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Sets the size of the date picker. Options: Height small (36px) and Height large (40px)',\n control: 'radio',\n options: ['s', 'l'],\n table: {\n category: 'ifx-date-picker props',\n defaultValue: {\n summary: 's'\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-date-picker props'\n }\n },\n value: { \n description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd',\n table: {\n category: 'ifx-date-picker props'\n }\n },\n ifxDate: {\n action: 'ifxDate',\n description: 'A custom event emitted when a date in the calendar is being selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label }) => {\n const element = document.createElement('ifx-date-picker');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('success', success);\n element.setAttribute('value', value);\n element.setAttribute('max', max);\n element.setAttribute('min', min);\n element.setAttribute('label', label);\n element.setAttribute('caption', caption);\n element.addEventListener('ifxDate', action('ifxDate'));\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}

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});',
                 },
             },
         },