@infineon/infineon-design-system-stencil 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0 → 30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.0

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

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

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

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

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

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

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

@@ -12,91 +12,24 @@ 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: 'Sets the size of the date picker. Options: Height small  (36px) and Height large (40px)',
-            control: 'radio',
+            description: 'Size options: Height small  (36px) and Height large (40px) - default: small',
             options: ['s', 'l'],
-            table: {
-                category: 'ifx-date-picker props',
-                defaultValue: {
-                    summary: 's'
-                }
-            }
+            control: { type: 'radio' },
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.',
-            table: {
-                category: 'ifx-date-picker props'
-            }
+            description: 'Name of the element, that is used as reference when a form is submitted.'
         },
         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',
-            table: {
-                category: 'ifx-date-picker props'
-            }
+            description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd'
         },
         ifxDate: {
             action: 'ifxDate',
-            description: 'A custom event emitted when a date in the calendar is being selected.',
+            description: 'Custom event',
             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

@@ -1 +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({});"]}
+{"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({});"]}

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

@@ -4,25 +4,25 @@ export default {
     title: 'Components/Dropdown',
     tags: ['autodocs'],
     args: {
-        label: 'Dropdown',
+        Label: 'Dropdown',
+        variant: 'primary',
         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,159 +40,57 @@ export default {
                 'left-start',
                 'left-end',
             ],
-            control: 'select',
-            table: {
-                category: 'ifx-dropdown props',
-                defaultValue: {
-                    summary: 'bottom-start'
-                }
-            }
+            control: { type: 'select' },
         },
-        label: {
-            name: 'Label of Dropdown',
-            description: 'The visible name or label for the dropdown button.',
-            table: {
-                category: 'story controls',
-                defaultValue: {
-                    summary: 'Dropdown'
-                }
-            }
+        Label: {
+            description: 'The visible name or label for the dropdown button',
             // 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: '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
-                }
-            }
+            control: { type: 'radio' },
         },
+        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: 'radio',
-            table: {
-                category: 'ifx-dropdown-trigger-button props',
-                defaultValue: {
-                    summary: 'primary'
-                }
-            }
+            control: { type: 'radio' },
             // if: { arg: 'Type', eq: 'Default' }
         },
         target: {
-            description: 'Determines where to open the linked document when the dropdown item is clicked.',
             options: ['_self', '_blank'],
-            control: 'radio',
-            table: {
-                category: 'ifx-dropdown-item props',
-                defaultValue: {
-                    summary: '_self'
-                }
-            }
+            control: { type: 'radio' },
         },
         href: {
-            description: 'href link to menu item.',
-            table: {
-                category: 'ifx-dropdown-item props'
-            }
+            description: 'href link to menu item'
         },
         icon: {
-            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'
-                }
-            }
+            description: 'The icon to be displayed on the dropdown button',
+            options: Object.values(icons).map(i => i['name']),
+            control: { type: 'select' },
             // if: { arg: 'Type', eq: 'Label Trigger' }
         },
-        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
-                }
-            }
+        Search: {
+            description: 'Show Search Bar'
         },
-        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
-                }
-            }
+        Header: {
+            description: 'Add Header Text'
         },
-        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
-                }
-            }
+        Separator: {
+            description: 'Use seperator 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
-                }
-            }
+        DropDownMenuItemIcon: {
+            description: 'Show menu item icon in dropdown'
         },
+        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});',
@@ -201,9 +99,8 @@ 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});',
@@ -212,9 +109,8 @@ 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});',
@@ -233,18 +129,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.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>
+    ${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>
   </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
@@ -255,6 +151,13 @@ 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
@@ -267,18 +170,18 @@ const LabelTriggerTemplate = args => {
   >
     Hello World! Click on the text to open the dropdown
     <ifx-dropdown-trigger>
-      <ifx-icon icon="${'c-check-16'}"></ifx-icon>
+      <ifx-icon icon="${args.icon}"></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.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>
+    ${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>
   </ifx-dropdown-menu>
 </ifx-dropdown>`;
     const dropdown = wrapper.querySelector('ifx-dropdown');
@@ -290,7 +193,7 @@ const LabelTriggerTemplate = args => {
 };
 export const LabelTrigger = LabelTriggerTemplate.bind({});
 LabelTrigger.argTypes = {
-    label: {
+    Label: {
         table: {
             disable: true
         }