@infineon/infineon-design-system-stencil 30.9.2--canary.1640.6c2a9d121c5f181774a7c39f1527cc5a11226b9c.0 → 30.9.2--canary.1640.f76a9971a802bdf1ef3179d96738679b1201a99a.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.
|
@@ -10,6 +10,7 @@ export default {
|
|
|
10
10
|
icon: '',
|
|
11
11
|
header: 'Tab',
|
|
12
12
|
disabled: false,
|
|
13
|
+
fullWidth: false,
|
|
13
14
|
},
|
|
14
15
|
argTypes: {
|
|
15
16
|
amountOfTabs: {
|
|
@@ -52,9 +53,17 @@ export default {
|
|
|
52
53
|
}
|
|
53
54
|
},
|
|
54
55
|
fullWidth: {
|
|
55
|
-
name: 'Full width',
|
|
56
56
|
control: { type: 'boolean' },
|
|
57
|
-
description: "Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent"
|
|
57
|
+
description: "Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent",
|
|
58
|
+
table: {
|
|
59
|
+
category: 'ifx-tabs props',
|
|
60
|
+
defaultValue: {
|
|
61
|
+
summary: 'false'
|
|
62
|
+
},
|
|
63
|
+
type: {
|
|
64
|
+
summary: 'boolean'
|
|
65
|
+
}
|
|
66
|
+
}
|
|
58
67
|
},
|
|
59
68
|
iconPosition: {
|
|
60
69
|
options: ['left', 'right'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.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,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC;QACf,WAAW,EAAE,YAAY;QACzB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,KAAK;
|
|
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 ifxTabChange: {\n action: 'ifxTabChange',\n description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab).',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxTabChange={handleChange}\\nVue:@ifxTabChange=\"handleChange\"\\nAngular:(ifxTabChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxTabChange\", (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('ifxTabChange', action(`ifxTabChange`));\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};"]}
|
|
@@ -8,6 +8,7 @@ declare const _default: {
|
|
|
8
8
|
icon: string;
|
|
9
9
|
header: string;
|
|
10
10
|
disabled: boolean;
|
|
11
|
+
fullWidth: boolean;
|
|
11
12
|
};
|
|
12
13
|
argTypes: {
|
|
13
14
|
amountOfTabs: {
|
|
@@ -55,11 +56,19 @@ declare const _default: {
|
|
|
55
56
|
};
|
|
56
57
|
};
|
|
57
58
|
fullWidth: {
|
|
58
|
-
name: string;
|
|
59
59
|
control: {
|
|
60
60
|
type: string;
|
|
61
61
|
};
|
|
62
62
|
description: string;
|
|
63
|
+
table: {
|
|
64
|
+
category: string;
|
|
65
|
+
defaultValue: {
|
|
66
|
+
summary: string;
|
|
67
|
+
};
|
|
68
|
+
type: {
|
|
69
|
+
summary: string;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
63
72
|
};
|
|
64
73
|
iconPosition: {
|
|
65
74
|
options: string[];
|
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.f76a9971a802bdf1ef3179d96738679b1201a99a.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",
|