@infineon/infineon-design-system-stencil 25.4.0 → 25.4.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,18 +1,4 @@
|
|
|
1
1
|
import { action } from "@storybook/addon-actions";
|
|
2
|
-
const tabHeaders = [
|
|
3
|
-
{
|
|
4
|
-
header: 'tab a',
|
|
5
|
-
disabled: false,
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
header: 'tab b',
|
|
9
|
-
disabled: true,
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
header: 'tab c',
|
|
13
|
-
disabled: false,
|
|
14
|
-
},
|
|
15
|
-
];
|
|
16
2
|
export default {
|
|
17
3
|
title: 'Components/Tabs',
|
|
18
4
|
tags: ['autodocs'],
|
|
@@ -57,8 +43,10 @@ const Template = args => {
|
|
|
57
43
|
tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));
|
|
58
44
|
for (let i = 0; i < args.amountOfTabs; i++) {
|
|
59
45
|
const tabContent = document.createElement('ifx-tab');
|
|
60
|
-
tabContent.setAttribute('header',
|
|
61
|
-
|
|
46
|
+
tabContent.setAttribute('header', `tab ${i + 1}`);
|
|
47
|
+
if (i == 1) {
|
|
48
|
+
tabContent.setAttribute('disabled', 'true');
|
|
49
|
+
}
|
|
62
50
|
if (args.icon) {
|
|
63
51
|
tabContent.setAttribute('icon', 'c-check-16');
|
|
64
52
|
tabContent.setAttribute('icon-position', args.iconPosition);
|
|
@@ -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;AAElD,
|
|
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';\n\nexport default {\n title: 'Components/Tabs',\n tags: ['autodocs'],\n\n component: 'ifx-tabs',\n argTypes: {\n amountOfTabs: { name: 'Amount of Tabs', control: 'number' },\n orientation: {\n name: 'Orientation',\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' },\n },\n icon: {\n name: 'Show icon',\n control: {type: 'boolean'}\n },\n iconPosition: {\n name: 'Icon position',\n options: ['left', 'right'],\n control: {type: 'radio'},\n if: {arg: 'icon', eq: true}\n },\n activeTabIndex: {\n name: 'Active tab index',\n description: 'Set a tab as active by providing the index (tab can not be disabled)',\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 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.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', `tab ${i+1}`);\n if(i == 1) {\n tabContent.setAttribute('disabled', 'true');\n }\n if(args.icon){\n tabContent.setAttribute('icon', 'c-check-16');\n tabContent.setAttribute('icon-position', args.iconPosition);\n }\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: false,\n iconPosition: 'left'\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n amountOfTabs: 3,\n orientation: 'horizontal',\n activeTabIndex: 2,\n};\n"]}
|
package/package.json
CHANGED