@infineon/infineon-design-system-stencil 30.9.2--canary.1640.6267534476a062d2af8dfb8bb31b064fd631373f.0 → 30.9.2--canary.1640.64bdc8df6d06e0c7326a4bfb6bcc6798b101e99a.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.
- package/dist/collection/components/navigation/sidebar/sidebar.stories.js +1 -2
- package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map +1 -1
- package/dist/collection/components/tabs/tabs.stories.js +1 -1
- package/dist/collection/components/tabs/tabs.stories.js.map +1 -1
- package/dist/types/components/navigation/sidebar/sidebar.stories.d.ts +0 -1
- package/package.json +1 -1
|
@@ -105,8 +105,7 @@ export default {
|
|
|
105
105
|
targetOfSidebarItem: {
|
|
106
106
|
name: 'target',
|
|
107
107
|
description: 'The target attribute of the sidebar item link.',
|
|
108
|
-
|
|
109
|
-
control: 'radio',
|
|
108
|
+
control: 'text',
|
|
110
109
|
table: {
|
|
111
110
|
category: 'ifx-sidebar-item props',
|
|
112
111
|
type: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.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/Navigation/Sidebar',\n // tags: ['autodocs'],\n\n args: {\n icon: 'image-16',\n applicationName: 'Application Name',\n showFooter: true,\n showHeader: true,\n initialCollapse: true,\n termsOfUse: 'https://yourwebsite.com/terms',\n imprint: 'https://yourwebsite.com/imprint',\n privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n numberIndicatorOfSidebarItem: \"\",\n hrefOfSidebarItem: 'https://google.com',\n targetOfSidebarItem: '_self',\n activeSidebarItem: false,\n isActionItem: false,\n },\n\n argTypes: {\n applicationName: {\n description: 'The name of the application to display at the top of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n showHeader: {\n description: 'Determines whether the header is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n showFooter: {\n description: 'Determines whether the footer is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n initialCollapse: {\n description: 'Determines if the sidebar should be collapsed by default when it first loads.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n imprint: {\n description: 'The URL link for the \"Imprint\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n termsOfUse: {\n description: 'The URL link for the \"Terms of Use\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n privacyPolicy: {\n description: 'The URL link for the \"Privacy Policy\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n copyrightText: {\n description: 'The copyright text to display at the bottom of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n icon: {\n description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-sidebar-item props',\n defaultValue: {\n summary: 'image-16'\n }\n }\n },\n hrefOfSidebarItem: {\n name: 'href',\n description: 'The URL of the sidebar item link.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n }\n },\n targetOfSidebarItem: {\n name: 'target',\n description: 'The target attribute of the sidebar item link.',\n options: ['_self'],\n control: 'radio',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: '_self'\n }\n }\n },\n numberIndicatorOfSidebarItem: {\n name: 'numberIndicator',\n description: 'The number indicator to display on the sidebar item.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n }\n }\n },\n activeSidebarItem: {\n name: 'active',\n description: 'Set to true manually or by clicking on a navigation item.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n }\n }\n },\n isActionItem: {\n description: 'If an item is an action item, it can not become active.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n },\n }\n },\n ifxSidebarNavigationItem: {\n action: 'ifxSidebarNavigationItem',\n description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarNavigationItem={handleChange}\nVue: @ifxSidebarNavigationItem=\"handleChange\"\nAngular: (ifxSidebarNavigationItem)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n }\n }\n },\n ifxSidebarActionItem: {\n action: 'ifxSidebarActionItem',\n description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarActionItem={handleAction}\nVue: @ifxSidebarActionItem=\"handleAction\"\nAngular: (ifxSidebarActionItem)=\"handleAction()\"\nVanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n },\n }\n },\n ifxSidebarMenu: {\n action: 'ifxSidebarMenu',\n description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarMenu={handleMenu}\nVue: @ifxSidebarMenu=\"handleMenu\"\nAngular: (ifxSidebarMenu)=\"handleMenu()\"\nVanillaJs: .addEventListener(\"ifxSidebarMenu\", (event) => {/*handle menu*/});`\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n sidebarElement.setAttribute('show-header', args.showHeader);\n sidebarElement.setAttribute('show-footer', args.showFooter);\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n sidebarElement.setAttribute('imprint', args.imprint);\n sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n sidebarElement.setAttribute('copyright-text', args.copyrightText);\n\n sidebarElement.innerHTML = `\n <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item>\n Section\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon='image-16'>\n Menu Item\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-title>Items group</ifx-sidebar-title>\n <ifx-sidebar-item href=\"${args.hrefOfSidebarItem}\" target=\"${args.targetOfSidebarItem}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" number-indicator=\"${args.numberIndicatorOfSidebarItem === \"\" ? '' : args.numberIndicatorOfSidebarItem}\" isActionItem=\"${args.isActionItem}\" active=\"${args.activeSidebarItem}\">Item 1</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 2</ifx-sidebar-item>\n `\n return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n // Create 3 sections\n for (let i = 0; i < 3; i++) {\n const sectionElement = document.createElement('ifx-sidebar-item');\n sectionElement.textContent = `Header Section ${i + 1}`;\n\n // In each section, create 3 menu items\n for (let j = 0; j < 3; j++) {\n const menuItemElement = document.createElement('ifx-sidebar-item');\n menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n // In the first menu item of each section, create 3 submenu items\n if (j === 0) {\n for (let k = 0; k < 3; k++) {\n const subMenuItemElement = document.createElement('ifx-sidebar-item');\n subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n menuItemElement.appendChild(subMenuItemElement);\n }\n }\n\n sectionElement.appendChild(menuItemElement);\n }\n sidebarElement.appendChild(sectionElement);\n }\n const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n `<ifx-sidebar application-name=\"Application name\">\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item active=\"false\">\n Header Section\n <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n Second layer\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n This Page\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n \n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Sub Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\">\n This one too\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
|
|
1
|
+
{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.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/Navigation/Sidebar',\n // tags: ['autodocs'],\n\n args: {\n icon: 'image-16',\n applicationName: 'Application Name',\n showFooter: true,\n showHeader: true,\n initialCollapse: true,\n termsOfUse: 'https://yourwebsite.com/terms',\n imprint: 'https://yourwebsite.com/imprint',\n privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n numberIndicatorOfSidebarItem: \"\",\n hrefOfSidebarItem: 'https://google.com',\n targetOfSidebarItem: '_self',\n activeSidebarItem: false,\n isActionItem: false,\n },\n\n argTypes: {\n applicationName: {\n description: 'The name of the application to display at the top of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n showHeader: {\n description: 'Determines whether the header is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n showFooter: {\n description: 'Determines whether the footer is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n initialCollapse: {\n description: 'Determines if the sidebar should be collapsed by default when it first loads.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n imprint: {\n description: 'The URL link for the \"Imprint\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n termsOfUse: {\n description: 'The URL link for the \"Terms of Use\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n privacyPolicy: {\n description: 'The URL link for the \"Privacy Policy\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n copyrightText: {\n description: 'The copyright text to display at the bottom of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n icon: {\n description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-sidebar-item props',\n defaultValue: {\n summary: 'image-16'\n }\n }\n },\n hrefOfSidebarItem: {\n name: 'href',\n description: 'The URL of the sidebar item link.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n }\n },\n targetOfSidebarItem: {\n name: 'target',\n description: 'The target attribute of the sidebar item link.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: '_self'\n }\n }\n },\n numberIndicatorOfSidebarItem: {\n name: 'numberIndicator',\n description: 'The number indicator to display on the sidebar item.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n }\n }\n },\n activeSidebarItem: {\n name: 'active',\n description: 'Set to true manually or by clicking on a navigation item.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n }\n }\n },\n isActionItem: {\n description: 'If an item is an action item, it can not become active.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n },\n }\n },\n ifxSidebarNavigationItem: {\n action: 'ifxSidebarNavigationItem',\n description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarNavigationItem={handleChange}\nVue: @ifxSidebarNavigationItem=\"handleChange\"\nAngular: (ifxSidebarNavigationItem)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n }\n }\n },\n ifxSidebarActionItem: {\n action: 'ifxSidebarActionItem',\n description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarActionItem={handleAction}\nVue: @ifxSidebarActionItem=\"handleAction\"\nAngular: (ifxSidebarActionItem)=\"handleAction()\"\nVanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n },\n }\n },\n ifxSidebarMenu: {\n action: 'ifxSidebarMenu',\n description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarMenu={handleMenu}\nVue: @ifxSidebarMenu=\"handleMenu\"\nAngular: (ifxSidebarMenu)=\"handleMenu()\"\nVanillaJs: .addEventListener(\"ifxSidebarMenu\", (event) => {/*handle menu*/});`\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n sidebarElement.setAttribute('show-header', args.showHeader);\n sidebarElement.setAttribute('show-footer', args.showFooter);\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n sidebarElement.setAttribute('imprint', args.imprint);\n sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n sidebarElement.setAttribute('copyright-text', args.copyrightText);\n\n sidebarElement.innerHTML = `\n <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item>\n Section\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon='image-16'>\n Menu Item\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-title>Items group</ifx-sidebar-title>\n <ifx-sidebar-item href=\"${args.hrefOfSidebarItem}\" target=\"${args.targetOfSidebarItem}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" number-indicator=\"${args.numberIndicatorOfSidebarItem === \"\" ? '' : args.numberIndicatorOfSidebarItem}\" isActionItem=\"${args.isActionItem}\" active=\"${args.activeSidebarItem}\">Item 1</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 2</ifx-sidebar-item>\n `\n return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n // Create 3 sections\n for (let i = 0; i < 3; i++) {\n const sectionElement = document.createElement('ifx-sidebar-item');\n sectionElement.textContent = `Header Section ${i + 1}`;\n\n // In each section, create 3 menu items\n for (let j = 0; j < 3; j++) {\n const menuItemElement = document.createElement('ifx-sidebar-item');\n menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n // In the first menu item of each section, create 3 submenu items\n if (j === 0) {\n for (let k = 0; k < 3; k++) {\n const subMenuItemElement = document.createElement('ifx-sidebar-item');\n subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n menuItemElement.appendChild(subMenuItemElement);\n }\n }\n\n sectionElement.appendChild(menuItemElement);\n }\n sidebarElement.appendChild(sectionElement);\n }\n const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n `<ifx-sidebar application-name=\"Application name\">\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item active=\"false\">\n Header Section\n <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n Second layer\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n This Page\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n \n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Sub Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\">\n This one too\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
|
|
@@ -110,7 +110,7 @@ export default {
|
|
|
110
110
|
},
|
|
111
111
|
ifxChange: {
|
|
112
112
|
action: 'ifxChange',
|
|
113
|
-
description: 'Custom event
|
|
113
|
+
description: 'Custom event that is emitted when the active tab changes.',
|
|
114
114
|
table: {
|
|
115
115
|
category: 'custom events',
|
|
116
116
|
type: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.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/Tabs',\n tags: ['autodocs'],\n\n component: 'ifx-tabs',\n args: {\n amountOfTabs: 3,\n orientation: 'horizontal',\n icon: '',\n header: 'Tab',\n disabled: false,\n fullWidth: false,\n },\n argTypes: {\n amountOfTabs: {\n name: 'Amount of Tabs', control: 'number',\n description: 'Set the number of tabs.',\n table: {\n category: 'story controls',\n type: {\n summary: 'number'\n }\n }\n },\n orientation: {\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' },\n description: 'Set the orientation of the tabs.',\n table: {\n category:\n 'ifx-tabs props',\n defaultValue: {\n summary: 'horizontal',\n },\n type: {\n summary: 'horizontal | vertical'\n }\n }\n },\n icon: {\n name: 'icon',\n control: { type: 'select' },\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n table: {\n category: 'ifx-tab props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n fullWidth: {\n control: { type: 'boolean' },\n description: \"Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent\",\n table: {\n category: 'ifx-tabs props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n iconPosition: {\n options: ['left', 'right'],\n control: { type: 'radio' },\n description: 'Set the position of the icon.',\n table: {\n category: 'ifx-tab props',\n defaultValue: {\n summary: 'left'\n },\n type: {\n summary: 'left | right'\n },\n },\n },\n activeTabIndex: {\n description: 'Set the tab as active by providing the index (tab can not be disabled).',\n table: {\n category: 'ifx-tabs props',\n defaultValue: { summary: '0' },\n type: {\n summary: 'number'\n }\n }\n },\n header: {\n control: 'text',\n description: 'Set the header of the tab.',\n table: {\n defaultValue: { summary: 'Tab' },\n category: 'ifx-tab props',\n type: {\n summary: 'string'\n }\n }\n },\n disabled: {\n control: 'boolean',\n description: 'Set the tab to disabled. In the storybook, the second tab will be disabled.',\n table: {\n category: 'ifx-tab props',\n defaultValue: { summary: 'false' },\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event that is emitted when the active tab changes.',\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 = args => {\n const tabsElement = document.createElement('ifx-tabs') as HTMLIfxTabsElement;\n tabsElement.setAttribute('orientation', args.orientation);\n tabsElement.setAttribute('active-tab-index', args.activeTabIndex);\n tabsElement.setAttribute('full-width', args.fullWidth);\n tabsElement.addEventListener('ifxChange', action(`ifxChange`));\n\n for (let i = 0; i < args.amountOfTabs; i++) {\n const tabContent = document.createElement('ifx-tab');\n tabContent.setAttribute('header', `${args.header} ${i + 1}`);\n if (i == 1) {\n tabContent.setAttribute('disabled', args.disabled);\n }\n var icon = args.icon === 'none' ? '' : args.icon;\n tabContent.setAttribute('icon', icon);\n tabContent.setAttribute('icon-position', args.iconPosition);\n tabContent.innerHTML = `\n Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n `;\n tabsElement.append(tabContent);\n }\n\n return tabsElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n amountOfTabs: 3,\n orientation: 'horizontal',\n activeTabIndex: 0,\n icon: '',\n iconPosition: 'left',\n header: 'Tab',\n disabled: false,\n};"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "30.9.2--canary.1640.
|
|
3
|
+
"version": "30.9.2--canary.1640.64bdc8df6d06e0c7326a4bfb6bcc6798b101e99a.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|