@infineon/infineon-design-system-stencil 30.9.2--canary.1640.8e12ffd44dfe7f8dd5fbabab6fd2dffeebf3096c.0 → 30.9.2--canary.1640.6c2a9d121c5f181774a7c39f1527cc5a11226b9c.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/status/status.stories.js +2 -1
- package/dist/collection/components/status/status.stories.js.map +1 -1
- package/dist/collection/components/stepper/stepper.stories.js +18 -11
- package/dist/collection/components/stepper/stepper.stories.js.map +1 -1
- package/dist/types/components/status/status.stories.d.ts +1 -0
- package/dist/types/components/stepper/stepper.stories.d.ts +8 -3
- package/package.json +1 -1
|
@@ -8,11 +8,12 @@ export default {
|
|
|
8
8
|
},
|
|
9
9
|
argTypes: {
|
|
10
10
|
label: {
|
|
11
|
+
name: 'Label of Status',
|
|
11
12
|
description: 'Set the label of *<ifx-status>*.',
|
|
12
13
|
table: {
|
|
13
14
|
category: 'ifx-status props',
|
|
14
15
|
type: {
|
|
15
|
-
summary: '
|
|
16
|
+
summary: 'string'
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
19
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;YAC3E,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Status',\n tags: ['autodocs'],\n\n args: {\n label: 'text',\n color: 'orange',\n border: true,\n },\n argTypes: {\n label: {\n name: 'Label of Status',\n description: 'Set the label of *<ifx-status>*.',\n table: {\n category: 'ifx-status props',\n type: {\n summary: 'string'\n }\n }\n },\n border: {\n description: 'When set to **true** the status has a border.',\n control: 'boolean',\n attr: 'border',\n table: {\n category: 'ifx-status props',\n defaultValue: {\n summary: true\n }\n }\n },\n color: {\n description: 'Sets the color of the status.',\n control: 'radio',\n options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],\n table: {\n category: 'ifx-status props',\n defaultValue: {\n summary: 'orange'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
|
|
@@ -4,11 +4,11 @@ export default {
|
|
|
4
4
|
args: {
|
|
5
5
|
amountOfSteps: 5,
|
|
6
6
|
activeStep: 2,
|
|
7
|
-
errorStep: 0,
|
|
8
7
|
disabled: false,
|
|
9
8
|
indicatorPosition: 'left',
|
|
10
9
|
showStepNumber: false,
|
|
11
|
-
variant: 'default'
|
|
10
|
+
variant: 'default',
|
|
11
|
+
error: false,
|
|
12
12
|
},
|
|
13
13
|
argTypes: {
|
|
14
14
|
activeStep: {
|
|
@@ -55,12 +55,14 @@ export default {
|
|
|
55
55
|
},
|
|
56
56
|
if: { arg: 'variant', eq: 'default' }
|
|
57
57
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
description: 'Specified step number indicates to have an error.',
|
|
58
|
+
error: {
|
|
59
|
+
control: 'boolean',
|
|
60
|
+
description: 'Sets the error state for a step.',
|
|
62
61
|
table: {
|
|
63
|
-
category: 'ifx-step props'
|
|
62
|
+
category: 'ifx-step props',
|
|
63
|
+
type: {
|
|
64
|
+
summary: 'boolean'
|
|
65
|
+
}
|
|
64
66
|
},
|
|
65
67
|
},
|
|
66
68
|
indicatorPosition: {
|
|
@@ -88,7 +90,10 @@ export default {
|
|
|
88
90
|
description: 'Allows to switch between default and compact variant.',
|
|
89
91
|
control: 'radio',
|
|
90
92
|
table: {
|
|
91
|
-
category: 'ifx-stepper props'
|
|
93
|
+
category: 'ifx-stepper props',
|
|
94
|
+
type: {
|
|
95
|
+
summary: 'default | compact | vertical'
|
|
96
|
+
},
|
|
92
97
|
}
|
|
93
98
|
},
|
|
94
99
|
ifxChange: {
|
|
@@ -120,10 +125,12 @@ variant=${args.variant}>
|
|
|
120
125
|
return Array.from({ length: args.amountOfSteps }, (_, stepId) => {
|
|
121
126
|
const step = document.createElement('ifx-step');
|
|
122
127
|
step.innerHTML = `Step Label ${stepId + 1}`;
|
|
123
|
-
if (args.
|
|
124
|
-
step.setAttribute('error', 'true');
|
|
125
|
-
if (args.disabled)
|
|
128
|
+
if (args.disabled && stepId === 0) {
|
|
126
129
|
step.setAttribute('disabled', 'true');
|
|
130
|
+
}
|
|
131
|
+
if (args.error && stepId === 0) {
|
|
132
|
+
step.setAttribute('error', 'true');
|
|
133
|
+
}
|
|
127
134
|
return step.outerHTML;
|
|
128
135
|
}).join(`\n `);
|
|
129
136
|
})()}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE;QACF,aAAa,EAAE,CAAC;QAChB,UAAU,EAAE,CAAC;QACb,
|
|
1
|
+
{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Stepper',\n args: {\n amountOfSteps: 5,\n activeStep: 2,\n disabled: false,\n indicatorPosition: 'left',\n showStepNumber: false,\n variant: 'default',\n error: false,\n },\n argTypes: {\n activeStep: {\n control: {\n type: 'number',\n min: 1\n },\n description: 'Indicates the current active step.',\n table: {\n category: 'ifx-stepper props',\n defaultValue: { summary: 2 }\n }\n },\n amountOfSteps: {\n name: 'Amount of Steps',\n control: 'number',\n description: 'Indicates the number of steps in stepper in a story.',\n table: {\n category: 'story controls',\n defaultValue: { summary: 5 }\n }\n },\n completeStep: {\n name: 'complete',\n description: 'A boolean prop to mark one or more steps as complete.<br>Usage:',\n table: {\n category: 'ifx-step props',\n defaultValue: { summary: false },\n type: {\n summary: `<ifx-step complete=true> </ifx-step>`\n }\n }\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'A boolean prop to make one or more steps unclickable.',\n table: {\n category: 'ifx-step props',\n defaultValue: { summary: false },\n type: {\n summary: `<ifx-step disabled=true> </ifx-step>`\n }\n },\n if: { arg: 'variant', eq: 'default' }\n },\n error: {\n control: 'boolean',\n description: 'Sets the error state for a step.',\n table: {\n category: 'ifx-step props',\n type: {\n summary: 'boolean'\n }\n },\n },\n indicatorPosition: {\n control: 'radio',\n defaultValue: { summary: 'left' },\n description: 'Allows to swap the progress bar and steps\\' label.',\n options: ['left', 'right'],\n if: { arg: 'variant', eq: 'compact' },\n table: {\n category: 'ifx-stepper props'\n }\n },\n showStepNumber: {\n control: 'boolean',\n defaultValue: { summary: 'false' },\n description: 'Shows the step number when set true.',\n if: { arg: 'variant', eq: 'default' },\n table: {\n category: 'ifx-stepper props'\n }\n },\n variant: {\n options: ['default', 'compact', 'vertical'],\n defaultValue: { summary: 'default' },\n description: 'Allows to switch between default and compact variant.',\n control: 'radio',\n table: {\n category: 'ifx-stepper props',\n type: {\n summary: 'default | compact | vertical'\n },\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'A custom event emitted when active step changes.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: 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 wrapper = document.createElement('div');\n wrapper.innerHTML = `\n<ifx-stepper \nactive-step=${args.activeStep} \n${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''} \n${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''} \nvariant=${args.variant}>\n ${(() => {\n return Array.from({ length: args.amountOfSteps }, (_, stepId) => {\n const step = document.createElement('ifx-step');\n step.innerHTML = `Step Label ${stepId + 1}`;\n if (args.disabled && stepId === 0) {\n step.setAttribute('disabled', 'true');\n }\n if (args.error && stepId === 0) {\n step.setAttribute('error', 'true');\n }\n return step.outerHTML;\n }).join(`\\n `)\n })()\n }\n</ifx-stepper>`;\n\n const stepper = wrapper.querySelector('ifx-stepper');\n stepper.addEventListener('ifxChange', action('ifxChange'));\n\n return stepper;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n variant: 'default'\n};\n\nexport const Compact = Template.bind({});\nCompact.args = {\n variant: 'compact'\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n variant: 'vertical'\n}\n"]}
|
|
@@ -3,11 +3,11 @@ declare const _default: {
|
|
|
3
3
|
args: {
|
|
4
4
|
amountOfSteps: number;
|
|
5
5
|
activeStep: number;
|
|
6
|
-
errorStep: number;
|
|
7
6
|
disabled: boolean;
|
|
8
7
|
indicatorPosition: string;
|
|
9
8
|
showStepNumber: boolean;
|
|
10
9
|
variant: string;
|
|
10
|
+
error: boolean;
|
|
11
11
|
};
|
|
12
12
|
argTypes: {
|
|
13
13
|
activeStep: {
|
|
@@ -65,12 +65,14 @@ declare const _default: {
|
|
|
65
65
|
eq: string;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
|
-
|
|
69
|
-
name: string;
|
|
68
|
+
error: {
|
|
70
69
|
control: string;
|
|
71
70
|
description: string;
|
|
72
71
|
table: {
|
|
73
72
|
category: string;
|
|
73
|
+
type: {
|
|
74
|
+
summary: string;
|
|
75
|
+
};
|
|
74
76
|
};
|
|
75
77
|
};
|
|
76
78
|
indicatorPosition: {
|
|
@@ -111,6 +113,9 @@ declare const _default: {
|
|
|
111
113
|
control: string;
|
|
112
114
|
table: {
|
|
113
115
|
category: string;
|
|
116
|
+
type: {
|
|
117
|
+
summary: string;
|
|
118
|
+
};
|
|
114
119
|
};
|
|
115
120
|
};
|
|
116
121
|
ifxChange: {
|
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.6c2a9d121c5f181774a7c39f1527cc5a11226b9c.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",
|