@salutejs/plasma-new-hope 0.185.0-canary.1500.11703995241.0 → 0.185.0-canary.1536.11704107927.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Badge/Badge.css +3 -3
- package/cjs/components/Badge/Badge.js +3 -10
- package/cjs/components/Badge/Badge.js.map +1 -1
- package/cjs/components/Badge/Badge.styles.js +5 -5
- package/cjs/components/Badge/Badge.styles.js.map +1 -1
- package/cjs/components/Badge/Badge.styles_8pi3br.css +4 -0
- package/cjs/components/Badge/Badge.tokens.js +1 -2
- package/cjs/components/Badge/Badge.tokens.js.map +1 -1
- package/cjs/components/Chip/Chip.js +15 -8
- package/cjs/components/Chip/Chip.js.map +1 -1
- package/cjs/components/Tabs/tokens.js +1 -2
- package/cjs/components/Tabs/tokens.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +6 -6
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -9
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_uaaqqg.css +5 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/base.js +1 -1
- package/{es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/base_j8lg9u.css → cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/base_4zingj.css} +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +6 -6
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -9
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_1g7zipg.css +5 -0
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/{base_12fk3xi.css → base_fueiq8.css} +1 -1
- package/cjs/index.css +15 -15
- package/emotion/cjs/components/Badge/Badge.js +3 -15
- package/emotion/cjs/components/Badge/Badge.styles.js +13 -4
- package/emotion/cjs/components/Badge/Badge.tokens.js +1 -2
- package/emotion/cjs/components/Chip/Chip.js +15 -8
- package/emotion/cjs/components/Tabs/tokens.js +1 -2
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -14
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +12 -12
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -14
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +12 -12
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +14 -17
- package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/emotion/es/components/Badge/Badge.js +3 -16
- package/emotion/es/components/Badge/Badge.styles.js +14 -5
- package/emotion/es/components/Badge/Badge.tokens.js +1 -2
- package/emotion/es/components/Chip/Chip.js +16 -9
- package/emotion/es/components/Tabs/tokens.js +1 -2
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -15
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +13 -13
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -15
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +13 -13
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +14 -17
- package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -18
- package/emotion/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +6 -9
- package/es/components/Badge/Badge.css +3 -3
- package/es/components/Badge/Badge.js +4 -11
- package/es/components/Badge/Badge.js.map +1 -1
- package/es/components/Badge/Badge.styles.js +5 -5
- package/es/components/Badge/Badge.styles.js.map +1 -1
- package/es/components/Badge/Badge.styles_8pi3br.css +4 -0
- package/es/components/Badge/Badge.tokens.js +1 -2
- package/es/components/Badge/Badge.tokens.js.map +1 -1
- package/es/components/Chip/Chip.js +18 -11
- package/es/components/Chip/Chip.js.map +1 -1
- package/es/components/Tabs/tokens.js +1 -2
- package/es/components/Tabs/tokens.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +6 -6
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +4 -10
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_uaaqqg.css +5 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/base.js +1 -1
- package/{cjs/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/base_j8lg9u.css → es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/base_4zingj.css} +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +6 -6
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +4 -10
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_1g7zipg.css +5 -0
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/{base_12fk3xi.css → base_fueiq8.css} +1 -1
- package/es/index.css +15 -15
- package/package.json +2 -2
- package/styled-components/cjs/components/Badge/Badge.js +3 -15
- package/styled-components/cjs/components/Badge/Badge.styles.js +2 -2
- package/styled-components/cjs/components/Badge/Badge.tokens.js +1 -2
- package/styled-components/cjs/components/Chip/Chip.js +15 -8
- package/styled-components/cjs/components/Tabs/tokens.js +1 -2
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -14
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +8 -8
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -14
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +9 -9
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +0 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/styled-components/es/components/Badge/Badge.js +3 -16
- package/styled-components/es/components/Badge/Badge.styles.js +3 -3
- package/styled-components/es/components/Badge/Badge.tokens.js +1 -2
- package/styled-components/es/components/Chip/Chip.js +16 -9
- package/styled-components/es/components/Tabs/tokens.js +1 -2
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +3 -15
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +9 -9
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js +3 -15
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +1 -5
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +19 -51
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -3
- package/styled-components/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +0 -3
- package/types/components/Badge/Badge.d.ts.map +1 -1
- package/types/components/Badge/Badge.styles.d.ts +1 -1
- package/types/components/Badge/Badge.styles.d.ts.map +1 -1
- package/types/components/Badge/Badge.tokens.d.ts +0 -1
- package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
- package/types/components/Badge/Badge.types.d.ts +0 -5
- package/types/components/Badge/Badge.types.d.ts.map +1 -1
- package/types/components/Chip/Chip.d.ts.map +1 -1
- package/types/components/Chip/Chip.types.d.ts +7 -1
- package/types/components/Chip/Chip.types.d.ts.map +1 -1
- package/types/components/Tabs/TabItem.types.d.ts +0 -5
- package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
- package/types/components/Tabs/tokens.d.ts +0 -1
- package/types/components/Tabs/tokens.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.d.ts +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +0 -6
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Badge/Badge.d.ts +0 -3
- package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts +0 -6
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.d.ts +0 -3
- package/types/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.d.ts.map +1 -1
- package/cjs/components/Badge/Badge.styles_hhbwyi.css +0 -4
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_1yi1gll.css +0 -5
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_17vv6lq.css +0 -5
- package/es/components/Badge/Badge.styles_hhbwyi.css +0 -4
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles_1yi1gll.css +0 -5
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles_17vv6lq.css +0 -5
@@ -31,9 +31,6 @@ const meta: Meta<typeof Badge> = {
|
|
31
31
|
control: { type: 'boolean' },
|
32
32
|
if: { arg: 'clear', truthy: false },
|
33
33
|
},
|
34
|
-
maxWidth: {
|
35
|
-
control: { type: 'text' },
|
36
|
-
},
|
37
34
|
...disableProps(['contentLeft', 'contentRight']),
|
38
35
|
},
|
39
36
|
};
|
@@ -67,7 +64,7 @@ export const Default: Story = {
|
|
67
64
|
},
|
68
65
|
},
|
69
66
|
args: {
|
70
|
-
text: 'Hello
|
67
|
+
text: 'Hello',
|
71
68
|
view: 'default',
|
72
69
|
size: 'm',
|
73
70
|
enableContentLeft: false,
|
@@ -75,7 +72,6 @@ export const Default: Story = {
|
|
75
72
|
clear: false,
|
76
73
|
pilled: false,
|
77
74
|
transparent: false,
|
78
|
-
maxWidth: '',
|
79
75
|
},
|
80
76
|
render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
|
81
77
|
const iconSize = size === 'l' ? '1rem' : '0.75rem';
|
@@ -29,7 +29,6 @@ type CustomStoryTabsProps = {
|
|
29
29
|
|
30
30
|
const contentLeftOptions = ['none', 'icon'];
|
31
31
|
const contentRightOptions = ['none', 'counter', 'icon'];
|
32
|
-
const labels = ['Label', 'Middle label', 'Very long label'];
|
33
32
|
|
34
33
|
const getContentLeft = (contentLeftOption: string, size: string) => {
|
35
34
|
const iconSize = size === 'xs' ? 'xs' : 's';
|
@@ -77,12 +76,6 @@ const meta: Meta<StoryTabsProps> = {
|
|
77
76
|
},
|
78
77
|
if: { arg: 'helperText', eq: '' },
|
79
78
|
},
|
80
|
-
maxItemWidth: {
|
81
|
-
control: {
|
82
|
-
type: 'text',
|
83
|
-
},
|
84
|
-
if: { arg: 'stretch', truthy: false },
|
85
|
-
},
|
86
79
|
},
|
87
80
|
};
|
88
81
|
|
@@ -97,14 +90,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
97
90
|
contentRight: contentRightOption,
|
98
91
|
hasDivider,
|
99
92
|
stretch,
|
100
|
-
maxItemWidth,
|
101
93
|
helperText,
|
102
94
|
} = props;
|
103
95
|
const items = Array(itemQuantity).fill(0);
|
104
96
|
const [index, setIndex] = useState(0);
|
105
97
|
|
106
98
|
return (
|
107
|
-
<Tabs
|
99
|
+
<Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
|
108
100
|
{items.map((_, i) => {
|
109
101
|
if (helperText !== '') {
|
110
102
|
return (
|
@@ -118,9 +110,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
118
110
|
value={helperText}
|
119
111
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
120
112
|
size={size as Size}
|
121
|
-
maxItemWidth={maxItemWidth}
|
122
113
|
>
|
123
|
-
{
|
114
|
+
{`Label${i + 1}`}
|
124
115
|
</TabItem>
|
125
116
|
);
|
126
117
|
}
|
@@ -136,9 +127,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
136
127
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
137
128
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
138
129
|
size={size as Size}
|
139
|
-
maxItemWidth={maxItemWidth}
|
140
130
|
>
|
141
|
-
{
|
131
|
+
{`Label${i + 1}`}
|
142
132
|
</TabItem>
|
143
133
|
);
|
144
134
|
})}
|
@@ -157,7 +147,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
157
147
|
hasDivider,
|
158
148
|
helperText,
|
159
149
|
width,
|
160
|
-
maxItemWidth,
|
161
150
|
} = props;
|
162
151
|
const items = Array(itemQuantity).fill(0);
|
163
152
|
const [index, setIndex] = useState(0);
|
@@ -177,9 +166,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
177
166
|
value={helperText}
|
178
167
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
179
168
|
size={size as Size}
|
180
|
-
maxItemWidth={maxItemWidth}
|
181
169
|
>
|
182
|
-
{
|
170
|
+
{`Label${i + 1}`}
|
183
171
|
</TabItem>
|
184
172
|
);
|
185
173
|
}
|
@@ -195,9 +183,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
195
183
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
196
184
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
197
185
|
size={size as Size}
|
198
|
-
maxItemWidth={maxItemWidth}
|
199
186
|
>
|
200
|
-
{
|
187
|
+
{`Label${i + 1}`}
|
201
188
|
</TabItem>
|
202
189
|
);
|
203
190
|
})}
|
@@ -215,7 +202,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
215
202
|
contentRight: contentRightOption,
|
216
203
|
hasDivider,
|
217
204
|
helperText,
|
218
|
-
maxItemWidth,
|
219
205
|
} = props;
|
220
206
|
const maxItemQuantity = 3;
|
221
207
|
const items = Array(itemQuantity).fill(0);
|
@@ -248,9 +234,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
248
234
|
value={helperText}
|
249
235
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
250
236
|
size={size as Size}
|
251
|
-
maxItemWidth={maxItemWidth}
|
252
237
|
>
|
253
|
-
{
|
238
|
+
{`Label${i + 1}`}
|
254
239
|
</TabItem>
|
255
240
|
);
|
256
241
|
}
|
@@ -266,9 +251,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
266
251
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
267
252
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
268
253
|
size={size as Size}
|
269
|
-
maxItemWidth={maxItemWidth}
|
270
254
|
>
|
271
|
-
{
|
255
|
+
{`Label${i + 1}`}
|
272
256
|
</TabItem>
|
273
257
|
);
|
274
258
|
})}
|
@@ -285,7 +269,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
285
269
|
tabIndex={!disabled ? 0 : -1}
|
286
270
|
disabled={disabled}
|
287
271
|
size={size as Size}
|
288
|
-
maxItemWidth="auto"
|
289
272
|
>
|
290
273
|
ShowAll
|
291
274
|
</TabItem>
|
@@ -302,10 +285,9 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
302
285
|
disabled: false,
|
303
286
|
hasDivider: true,
|
304
287
|
helperText: '',
|
305
|
-
itemQuantity:
|
288
|
+
itemQuantity: 8,
|
306
289
|
stretch: false,
|
307
290
|
width: '15rem',
|
308
|
-
maxItemWidth: '',
|
309
291
|
},
|
310
292
|
argTypes: {
|
311
293
|
contentLeft: {
|
@@ -361,7 +343,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
361
343
|
contentRight: contentRightOption,
|
362
344
|
hasDivider,
|
363
345
|
helperText,
|
364
|
-
maxItemWidth,
|
365
346
|
} = props;
|
366
347
|
const items = Array(itemQuantity).fill(0);
|
367
348
|
const [index, setIndex] = useState(0);
|
@@ -382,9 +363,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
382
363
|
value={helperText}
|
383
364
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
384
365
|
size={size as Size}
|
385
|
-
maxItemWidth={maxItemWidth}
|
386
366
|
>
|
387
|
-
{
|
367
|
+
{`Label${i + 1}`}
|
388
368
|
</TabItem>
|
389
369
|
);
|
390
370
|
}
|
@@ -401,9 +381,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
401
381
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
402
382
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
403
383
|
size={size as Size}
|
404
|
-
maxItemWidth={maxItemWidth}
|
405
384
|
>
|
406
|
-
{
|
385
|
+
{`Label${i + 1}`}
|
407
386
|
</TabItem>
|
408
387
|
);
|
409
388
|
})}
|
@@ -422,7 +401,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
422
401
|
hasDivider,
|
423
402
|
helperText,
|
424
403
|
height,
|
425
|
-
maxItemWidth,
|
426
404
|
} = props;
|
427
405
|
const items = Array(itemQuantity).fill(0);
|
428
406
|
const [index, setIndex] = useState(0);
|
@@ -450,9 +428,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
450
428
|
value={helperText}
|
451
429
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
452
430
|
size={size as Size}
|
453
|
-
maxItemWidth={maxItemWidth}
|
454
431
|
>
|
455
|
-
{
|
432
|
+
{`Label${i + 1}`}
|
456
433
|
</TabItem>
|
457
434
|
);
|
458
435
|
}
|
@@ -469,9 +446,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
469
446
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
470
447
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
471
448
|
size={size as Size}
|
472
|
-
maxItemWidth={maxItemWidth}
|
473
449
|
>
|
474
|
-
{
|
450
|
+
{`Label${i + 1}`}
|
475
451
|
</TabItem>
|
476
452
|
);
|
477
453
|
})}
|
@@ -489,7 +465,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
489
465
|
contentRight: contentRightOption,
|
490
466
|
hasDivider,
|
491
467
|
helperText,
|
492
|
-
maxItemWidth,
|
493
468
|
} = props;
|
494
469
|
const maxItemQuantity = 3;
|
495
470
|
const items = Array(itemQuantity).fill(0);
|
@@ -523,9 +498,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
523
498
|
value={helperText}
|
524
499
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
525
500
|
size={size as Size}
|
526
|
-
maxItemWidth={maxItemWidth}
|
527
501
|
>
|
528
|
-
{
|
502
|
+
{`Label${i + 1}`}
|
529
503
|
</TabItem>
|
530
504
|
);
|
531
505
|
}
|
@@ -542,9 +516,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
542
516
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
543
517
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
544
518
|
size={size as Size}
|
545
|
-
maxItemWidth={maxItemWidth}
|
546
519
|
>
|
547
|
-
{
|
520
|
+
{`Label${i + 1}`}
|
548
521
|
</TabItem>
|
549
522
|
);
|
550
523
|
})}
|
@@ -561,7 +534,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
561
534
|
tabIndex={!disabled ? 0 : -1}
|
562
535
|
disabled={disabled}
|
563
536
|
size={size as Size}
|
564
|
-
maxItemWidth="auto"
|
565
537
|
>
|
566
538
|
ShowAll
|
567
539
|
</TabItem>
|
@@ -576,11 +548,10 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
576
548
|
size: 'xs',
|
577
549
|
disabled: false,
|
578
550
|
hasDivider: true,
|
579
|
-
itemQuantity:
|
551
|
+
itemQuantity: 8,
|
580
552
|
orientation: 'vertical',
|
581
553
|
helperText: '',
|
582
554
|
height: '10rem',
|
583
|
-
maxItemWidth: '',
|
584
555
|
},
|
585
556
|
argTypes: {
|
586
557
|
contentLeft: {
|
@@ -633,7 +604,7 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
633
604
|
};
|
634
605
|
|
635
606
|
const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
|
636
|
-
const { disabled, itemQuantity, size, helperText
|
607
|
+
const { disabled, itemQuantity, size, helperText } = props;
|
637
608
|
const items = Array(itemQuantity).fill(0);
|
638
609
|
const [index, setIndex] = useState(0);
|
639
610
|
|
@@ -649,7 +620,6 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
|
|
649
620
|
disabled={disabled}
|
650
621
|
value={helperText}
|
651
622
|
size={size as HeaderSize}
|
652
|
-
maxItemWidth={maxItemWidth}
|
653
623
|
>
|
654
624
|
{`Label${i + 1}`}
|
655
625
|
</TabItem>
|
@@ -659,7 +629,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
|
|
659
629
|
};
|
660
630
|
|
661
631
|
const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
|
662
|
-
const { disabled, itemQuantity, size, helperText, width
|
632
|
+
const { disabled, itemQuantity, size, helperText, width } = props;
|
663
633
|
const items = Array(itemQuantity).fill(0);
|
664
634
|
const [index, setIndex] = useState(0);
|
665
635
|
|
@@ -675,9 +645,8 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
|
|
675
645
|
disabled={disabled}
|
676
646
|
value={helperText}
|
677
647
|
size={size as HeaderSize}
|
678
|
-
maxItemWidth={maxItemWidth}
|
679
648
|
>
|
680
|
-
{
|
649
|
+
{`Label${i + 1}`}
|
681
650
|
</TabItem>
|
682
651
|
))}
|
683
652
|
</Tabs>
|
@@ -689,9 +658,8 @@ export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
689
658
|
size: 'h5',
|
690
659
|
disabled: false,
|
691
660
|
helperText: '',
|
692
|
-
itemQuantity:
|
661
|
+
itemQuantity: 6,
|
693
662
|
width: '12rem',
|
694
|
-
maxItemWidth: '',
|
695
663
|
},
|
696
664
|
argTypes: {
|
697
665
|
clip: {
|