@infineon/infineon-design-system-stencil 21.8.0 → 21.8.1
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.
|
@@ -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 args: {\n label: 'Dropdown',\n size: 'm',\n disabled: false,\n search: false,\n header: false,\n separator: false,\n variant: 'primary',\n url: '',\n target: '_self',\n icon: 'c-check-16',\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: { description: 'The visible name or label for the dropdown button' },\n size: {\n description: 'Font Size options: 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 },\n\n target: {\n options: ['_self', '_blank'],\n control: { type: 'radio' },\n },\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 },\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}\" disabled=\"${args.disabled}\" no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\">\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n dropdown\n </ifx-dropdown-trigger-button>\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.url !== '' ? args.url : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.dropdownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.url !== '' ? args.url : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.dropdownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.url !== '' ? args.url : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.dropdownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.url !== '' ? args.url : ''}\">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.url !== '' ? args.url : ''}\">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\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>\n <ifx-dropdown-item>Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item>Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item>Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item>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({});\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 size: 'm',\n disabled: false,\n search: false,\n header: false,\n separator: false,\n variant: 'primary',\n url: '',\n target: '_self',\n icon: 'c-check-16',\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: { description: 'The visible name or label for the dropdown button' },\n size: {\n description: 'Font Size options: 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 },\n\n target: {\n options: ['_self', '_blank'],\n control: { type: 'radio' },\n },\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 },\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}\" disabled=\"${args.disabled}\" no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\">\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n dropdown\n </ifx-dropdown-trigger-button>\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.url !== '' ? args.url : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.dropdownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.url !== '' ? args.url : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.dropdownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.url !== '' ? args.url : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.dropdownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.url !== '' ? args.url : ''}\">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.url !== '' ? args.url : ''}\">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\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>\n <ifx-dropdown-item>Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item>Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item>Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item>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({});\n"]}
|
package/package.json
CHANGED