@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
@@ -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: {
|
@@ -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: {
|
@@ -1,11 +1,5 @@
|
|
1
|
-
|
2
|
-
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
|
1
|
+
var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
|
3
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
7
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
8
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
9
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
10
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
11
5
|
import React, { forwardRef } from 'react';
|
@@ -32,27 +26,20 @@ export var badgeRoot = function badgeRoot(Root) {
|
|
32
26
|
transparent = _props$transparent === void 0 ? false : _props$transparent,
|
33
27
|
_props$clear = props.clear,
|
34
28
|
clear = _props$clear === void 0 ? false : _props$clear,
|
35
|
-
_props$maxWidth = props.maxWidth,
|
36
|
-
maxWidth = _props$maxWidth === void 0 ? 'auto' : _props$maxWidth,
|
37
29
|
rest = _objectWithoutProperties(props, _excluded);
|
38
30
|
var pilledClass = pilled ? classes.badgePilled : undefined;
|
39
31
|
var transparentClass = transparent ? classes.badgeTransparent : undefined;
|
40
32
|
var clearClass = clear ? classes.badgeClear : undefined;
|
41
33
|
var txt = !text && typeof children === 'string' ? children : text;
|
42
|
-
var truncate = maxWidth !== 'auto';
|
43
34
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
44
35
|
ref: ref,
|
45
|
-
className: cx(pilledClass, transparentClass, clearClass,
|
36
|
+
className: cx(pilledClass, transparentClass, clearClass, className),
|
46
37
|
view: view,
|
47
38
|
size: size,
|
48
39
|
pilled: pilled,
|
49
40
|
transparent: transparent,
|
50
41
|
clear: clear
|
51
|
-
}, rest,
|
52
|
-
style: _objectSpread(_objectSpread({}, rest.style), {}, {
|
53
|
-
maxWidth: maxWidth
|
54
|
-
})
|
55
|
-
}), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
|
42
|
+
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
|
56
43
|
});
|
57
44
|
};
|
58
45
|
export var badgeConfig = {
|