@salutejs/plasma-new-hope 0.155.1-canary.1374.11068058640.0 → 0.155.1-canary.1374.11103121553.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Tabs/tokens.js +1 -0
- package/cjs/components/Tabs/tokens.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/{base_wobm77.css → base_1iq8opt.css} +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.css +1 -3
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +5 -13
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base_rze03c.css +1 -0
- package/cjs/index.css +2 -4
- package/emotion/cjs/components/Tabs/tokens.js +1 -0
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +5 -13
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +21 -17
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js +6 -9
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +21 -15
- package/emotion/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js +6 -9
- package/emotion/es/components/Tabs/tokens.js +1 -0
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +5 -13
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +21 -17
- package/emotion/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js +6 -9
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +21 -15
- package/emotion/es/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js +6 -9
- package/es/components/Tabs/tokens.js +1 -0
- package/es/components/Tabs/tokens.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/{base_wobm77.css → base_1iq8opt.css} +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.css +1 -3
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +5 -13
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base_rze03c.css +1 -0
- package/es/index.css +2 -4
- package/package.json +2 -2
- package/styled-components/cjs/components/Tabs/tokens.js +1 -0
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +5 -13
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +21 -17
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js +0 -3
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +21 -15
- package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js +0 -3
- package/styled-components/es/components/Tabs/tokens.js +1 -0
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js +1 -1
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +5 -13
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +21 -17
- package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js +0 -3
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +21 -15
- package/styled-components/es/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js +0 -3
- package/types/components/Tabs/Tabs.types.d.ts +5 -5
- package/types/components/Tabs/Tabs.types.d.ts.map +1 -1
- package/types/components/Tabs/tokens.d.ts +1 -0
- package/types/components/Tabs/tokens.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.d.ts +0 -4
- package/types/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.d.ts +0 -3
- package/types/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.d.ts +0 -3
- package/types/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.d.ts.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js +0 -9
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js.map +0 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base_phkacz.css +0 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base_1fju8ww.css +0 -1
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js +0 -10
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/tokens.json +0 -4
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js +0 -4
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/tokens.json +0 -4
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js +0 -5
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js.map +0 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base_phkacz.css +0 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base_1fju8ww.css +0 -1
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js +0 -10
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/tokens.json +0 -4
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.js +0 -4
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/tokens.json +0 -4
- package/types/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.d.ts +0 -2
- package/types/components/Tabs/ui/vertical/VerticalTabs/variations/_stretch/base.d.ts.map +0 -1
package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js
CHANGED
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _tokens = /*#__PURE__*/require("../../../../../tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::after{top:1.5rem;}}&.", "{&::after{bottom:1.5rem;}}&.", "{&::after{width:0;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerWidth, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasTopArrow, _tokens.classes.tabsHasBottomArrow, _tokens.classes.tabsNoDivider);
|
@@ -22,7 +22,8 @@ type CustomStoryTabsProps = {
|
|
22
22
|
hasDivider: boolean;
|
23
23
|
contentLeft: string;
|
24
24
|
contentRight: string;
|
25
|
-
|
25
|
+
stretch: boolean;
|
26
|
+
helperText: string;
|
26
27
|
};
|
27
28
|
|
28
29
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -79,7 +80,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
79
80
|
contentRight: contentRightOption,
|
80
81
|
hasDivider,
|
81
82
|
stretch,
|
82
|
-
|
83
|
+
helperText,
|
83
84
|
} = props;
|
84
85
|
const items = Array(itemQuantity).fill(0);
|
85
86
|
const [index, setIndex] = useState(0);
|
@@ -94,7 +95,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
94
95
|
onClick={() => !disabled && setIndex(i)}
|
95
96
|
tabIndex={!disabled ? 0 : -1}
|
96
97
|
disabled={disabled}
|
97
|
-
value={
|
98
|
+
value={helperText}
|
98
99
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
99
100
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
100
101
|
size={size}
|
@@ -115,7 +116,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
115
116
|
contentLeft: contentLeftOption,
|
116
117
|
contentRight: contentRightOption,
|
117
118
|
hasDivider,
|
118
|
-
|
119
|
+
helperText,
|
119
120
|
} = props;
|
120
121
|
const items = Array(itemQuantity).fill(0);
|
121
122
|
const [index, setIndex] = useState(0);
|
@@ -136,7 +137,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
136
137
|
onClick={() => !disabled && setIndex(i)}
|
137
138
|
tabIndex={!disabled ? 0 : -1}
|
138
139
|
disabled={disabled}
|
139
|
-
value={
|
140
|
+
value={helperText}
|
140
141
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
141
142
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
142
143
|
size={size}
|
@@ -157,7 +158,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
157
158
|
contentLeft: contentLeftOption,
|
158
159
|
contentRight: contentRightOption,
|
159
160
|
hasDivider,
|
160
|
-
|
161
|
+
helperText,
|
161
162
|
} = props;
|
162
163
|
const maxItemQuantity = 3;
|
163
164
|
const items = Array(itemQuantity).fill(0);
|
@@ -188,7 +189,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
188
189
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
189
190
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
190
191
|
size={size}
|
191
|
-
value={
|
192
|
+
value={helperText}
|
192
193
|
>
|
193
194
|
{`Label${i + 1}`}
|
194
195
|
</TabItem>
|
@@ -221,7 +222,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
221
222
|
size: 'xs',
|
222
223
|
disabled: false,
|
223
224
|
hasDivider: true,
|
224
|
-
|
225
|
+
helperText: '',
|
225
226
|
itemQuantity: 8,
|
226
227
|
},
|
227
228
|
argTypes: {
|
@@ -267,12 +268,11 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
267
268
|
const {
|
268
269
|
disabled,
|
269
270
|
itemQuantity,
|
270
|
-
stretch,
|
271
271
|
size,
|
272
272
|
contentLeft: contentLeftOption,
|
273
273
|
contentRight: contentRightOption,
|
274
274
|
hasDivider,
|
275
|
-
|
275
|
+
helperText,
|
276
276
|
} = props;
|
277
277
|
const items = Array(itemQuantity).fill(0);
|
278
278
|
const [index, setIndex] = useState(0);
|
@@ -284,7 +284,6 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
284
284
|
hasDivider={hasDivider}
|
285
285
|
size={size as Size}
|
286
286
|
disabled={disabled}
|
287
|
-
stretch={stretch}
|
288
287
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
289
288
|
>
|
290
289
|
{items.map((_, i) => (
|
@@ -297,7 +296,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
297
296
|
tabIndex={!disabled ? 0 : -1}
|
298
297
|
size={size as Size}
|
299
298
|
disabled={disabled}
|
300
|
-
value={
|
299
|
+
value={helperText}
|
301
300
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
302
301
|
>
|
303
302
|
{`Label${i + 1}`}
|
@@ -317,7 +316,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
317
316
|
contentLeft: contentLeftOption,
|
318
317
|
contentRight: contentRightOption,
|
319
318
|
hasDivider,
|
320
|
-
|
319
|
+
helperText,
|
321
320
|
} = props;
|
322
321
|
const items = Array(itemQuantity).fill(0);
|
323
322
|
const [index, setIndex] = useState(0);
|
@@ -343,7 +342,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
343
342
|
tabIndex={!disabled ? 0 : -1}
|
344
343
|
size={size as Size}
|
345
344
|
disabled={disabled}
|
346
|
-
value={
|
345
|
+
value={helperText}
|
347
346
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
348
347
|
>
|
349
348
|
{`Label${i + 1}`}
|
@@ -363,7 +362,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
363
362
|
contentLeft: contentLeftOption,
|
364
363
|
contentRight: contentRightOption,
|
365
364
|
hasDivider,
|
366
|
-
|
365
|
+
helperText,
|
367
366
|
} = props;
|
368
367
|
const maxItemQuantity = 3;
|
369
368
|
const items = Array(itemQuantity).fill(0);
|
@@ -398,7 +397,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
398
397
|
onClick={() => !disabled && setIndex(i)}
|
399
398
|
tabIndex={!disabled ? 0 : -1}
|
400
399
|
disabled={disabled}
|
401
|
-
value={
|
400
|
+
value={helperText}
|
402
401
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
403
402
|
size={size as Size}
|
404
403
|
>
|
@@ -434,7 +433,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
434
433
|
hasDivider: true,
|
435
434
|
itemQuantity: 8,
|
436
435
|
orientation: 'vertical',
|
437
|
-
|
436
|
+
helperText: '',
|
438
437
|
},
|
439
438
|
argTypes: {
|
440
439
|
contentLeft: {
|
@@ -462,6 +461,11 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
462
461
|
},
|
463
462
|
if: { arg: 'stretch', truthy: false },
|
464
463
|
},
|
464
|
+
stretch: {
|
465
|
+
table: {
|
466
|
+
disable: true,
|
467
|
+
},
|
468
|
+
},
|
465
469
|
},
|
466
470
|
render: (args) => {
|
467
471
|
switch (args.clip) {
|
package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js
CHANGED
@@ -21,9 +21,6 @@ var config = exports.config = {
|
|
21
21
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
22
22
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding)
|
23
23
|
},
|
24
|
-
stretch: {
|
25
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;"], _Tabs.tabsTokens.containerHeight)
|
26
|
-
},
|
27
24
|
disabled: {
|
28
25
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
|
29
26
|
}
|
@@ -22,7 +22,8 @@ type CustomStoryTabsProps = {
|
|
22
22
|
hasDivider: boolean;
|
23
23
|
contentLeft: string;
|
24
24
|
contentRight: string;
|
25
|
-
|
25
|
+
stretch: boolean;
|
26
|
+
helperText: string;
|
26
27
|
};
|
27
28
|
|
28
29
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -79,7 +80,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
79
80
|
contentRight: contentRightOption,
|
80
81
|
hasDivider,
|
81
82
|
stretch,
|
82
|
-
|
83
|
+
helperText,
|
83
84
|
} = props;
|
84
85
|
const items = Array(itemQuantity).fill(0);
|
85
86
|
const [index, setIndex] = useState(0);
|
@@ -94,7 +95,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
94
95
|
onClick={() => !disabled && setIndex(i)}
|
95
96
|
tabIndex={!disabled ? 0 : -1}
|
96
97
|
disabled={disabled}
|
97
|
-
value={
|
98
|
+
value={helperText}
|
98
99
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
99
100
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
100
101
|
size={size}
|
@@ -115,7 +116,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
115
116
|
contentLeft: contentLeftOption,
|
116
117
|
contentRight: contentRightOption,
|
117
118
|
hasDivider,
|
118
|
-
|
119
|
+
helperText,
|
119
120
|
} = props;
|
120
121
|
const items = Array(itemQuantity).fill(0);
|
121
122
|
const [index, setIndex] = useState(0);
|
@@ -136,7 +137,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
136
137
|
onClick={() => !disabled && setIndex(i)}
|
137
138
|
tabIndex={!disabled ? 0 : -1}
|
138
139
|
disabled={disabled}
|
139
|
-
value={
|
140
|
+
value={helperText}
|
140
141
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
141
142
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
142
143
|
size={size}
|
@@ -157,7 +158,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
157
158
|
contentLeft: contentLeftOption,
|
158
159
|
contentRight: contentRightOption,
|
159
160
|
hasDivider,
|
160
|
-
|
161
|
+
helperText,
|
161
162
|
} = props;
|
162
163
|
const maxItemQuantity = 3;
|
163
164
|
const items = Array(itemQuantity).fill(0);
|
@@ -188,7 +189,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
188
189
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
189
190
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
190
191
|
size={size}
|
191
|
-
value={
|
192
|
+
value={helperText}
|
192
193
|
>
|
193
194
|
{`Label${i + 1}`}
|
194
195
|
</TabItem>
|
@@ -221,7 +222,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
221
222
|
size: 'xs',
|
222
223
|
disabled: false,
|
223
224
|
hasDivider: true,
|
224
|
-
|
225
|
+
helperText: '',
|
225
226
|
itemQuantity: 8,
|
226
227
|
},
|
227
228
|
argTypes: {
|
@@ -272,7 +273,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
272
273
|
contentLeft: contentLeftOption,
|
273
274
|
contentRight: contentRightOption,
|
274
275
|
hasDivider,
|
275
|
-
|
276
|
+
helperText,
|
276
277
|
} = props;
|
277
278
|
const items = Array(itemQuantity).fill(0);
|
278
279
|
const [index, setIndex] = useState(0);
|
@@ -297,7 +298,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
297
298
|
tabIndex={!disabled ? 0 : -1}
|
298
299
|
size={size as Size}
|
299
300
|
disabled={disabled}
|
300
|
-
value={
|
301
|
+
value={helperText}
|
301
302
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
302
303
|
>
|
303
304
|
{`Label${i + 1}`}
|
@@ -317,7 +318,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
317
318
|
contentLeft: contentLeftOption,
|
318
319
|
contentRight: contentRightOption,
|
319
320
|
hasDivider,
|
320
|
-
|
321
|
+
helperText,
|
321
322
|
} = props;
|
322
323
|
const items = Array(itemQuantity).fill(0);
|
323
324
|
const [index, setIndex] = useState(0);
|
@@ -343,7 +344,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
343
344
|
tabIndex={!disabled ? 0 : -1}
|
344
345
|
size={size as Size}
|
345
346
|
disabled={disabled}
|
346
|
-
value={
|
347
|
+
value={helperText}
|
347
348
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
348
349
|
>
|
349
350
|
{`Label${i + 1}`}
|
@@ -363,7 +364,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
363
364
|
contentLeft: contentLeftOption,
|
364
365
|
contentRight: contentRightOption,
|
365
366
|
hasDivider,
|
366
|
-
|
367
|
+
helperText,
|
367
368
|
} = props;
|
368
369
|
const maxItemQuantity = 3;
|
369
370
|
const items = Array(itemQuantity).fill(0);
|
@@ -398,7 +399,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
398
399
|
onClick={() => !disabled && setIndex(i)}
|
399
400
|
tabIndex={!disabled ? 0 : -1}
|
400
401
|
disabled={disabled}
|
401
|
-
value={
|
402
|
+
value={helperText}
|
402
403
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
403
404
|
size={size as Size}
|
404
405
|
>
|
@@ -434,7 +435,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
434
435
|
hasDivider: true,
|
435
436
|
itemQuantity: 8,
|
436
437
|
orientation: 'vertical',
|
437
|
-
|
438
|
+
helperText: '',
|
438
439
|
},
|
439
440
|
argTypes: {
|
440
441
|
contentLeft: {
|
@@ -462,6 +463,11 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
462
463
|
},
|
463
464
|
if: { arg: 'stretch', truthy: false },
|
464
465
|
},
|
466
|
+
stretch: {
|
467
|
+
table: {
|
468
|
+
disable: true,
|
469
|
+
},
|
470
|
+
},
|
465
471
|
},
|
466
472
|
render: (args) => {
|
467
473
|
switch (args.clip) {
|
package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js
CHANGED
@@ -21,9 +21,6 @@ var config = exports.config = {
|
|
21
21
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
22
22
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding)
|
23
23
|
},
|
24
|
-
stretch: {
|
25
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;"], _Tabs.tabsTokens.containerHeight)
|
26
|
-
},
|
27
24
|
disabled: {
|
28
25
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
|
29
26
|
}
|
@@ -3,6 +3,7 @@ export var classes = {
|
|
3
3
|
tabsPilled: 'tabs-pilled',
|
4
4
|
tabsGroupFilledBackground: 'tabs-group-filled-background',
|
5
5
|
tabsStretch: 'tabs-stretched',
|
6
|
+
tabsNoDivider: 'tabs-no-divider',
|
6
7
|
tabItemDivider: 'tab-item-divider',
|
7
8
|
tabItemAnimated: 'tab-item-animated',
|
8
9
|
tabContent: 'tab-item-content',
|
package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../../../../tokens';
|
3
3
|
import { TabItemValue } from '../../VerticalTabItem.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");", "{color:var(", ");}}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::
|
4
|
+
export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");", "{color:var(", ");}}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;top:0;left:0;bottom:0;background:var(", ");width:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, TabItemValue, tokens.itemValueColorHover, tokens.itemColorActive, TabItemValue, tokens.itemValueColorActive, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, TabItemValue, tokens.itemSelectedValueColorHover, tokens.itemSelectedValueColorHover, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerWidth);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "
|
1
|
+
var _excluded = ["id", "disabled", "clip", "size", "view", "children", "index", "className", "orientation", "hasDivider"];
|
2
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); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -18,7 +18,6 @@ import { base, StyledArrow, StyledContent, StyledContentWrapper } from './Vertic
|
|
18
18
|
import { base as sizeCSS } from './variations/_size/base';
|
19
19
|
import { base as viewCSS } from './variations/_view/base';
|
20
20
|
import { base as disabledCSS } from './variations/_disabled/base';
|
21
|
-
import { base as stretchCSS } from './variations/_stretch/base';
|
22
21
|
var Keys = /*#__PURE__*/function (Keys) {
|
23
22
|
Keys[Keys["end"] = 35] = "end";
|
24
23
|
Keys[Keys["home"] = 36] = "home";
|
@@ -29,8 +28,6 @@ var Keys = /*#__PURE__*/function (Keys) {
|
|
29
28
|
export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
30
29
|
return /*#__PURE__*/forwardRef(function (props, outerRef) {
|
31
30
|
var id = props.id,
|
32
|
-
_props$stretch = props.stretch,
|
33
|
-
stretch = _props$stretch === void 0 ? false : _props$stretch,
|
34
31
|
_props$disabled = props.disabled,
|
35
32
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
36
33
|
_props$clip = props.clip,
|
@@ -57,11 +54,11 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
57
54
|
}, []);
|
58
55
|
var uniqId = safeUseId();
|
59
56
|
var tabsId = id || uniqId;
|
60
|
-
var
|
57
|
+
var noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
|
61
58
|
var hasTopArrowClass = !firstItemVisible ? classes.tabsHasTopArrow : undefined;
|
62
59
|
var hasBottomArrowClass = !lastItemVisible ? classes.tabsHasBottomArrow : undefined;
|
63
|
-
var clipScrollClass =
|
64
|
-
var clipShowAllClass =
|
60
|
+
var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
|
61
|
+
var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
|
65
62
|
var scrollRef = useRef(null);
|
66
63
|
var trackRef = useRef(null);
|
67
64
|
var upArrowRef = useRef(null);
|
@@ -184,7 +181,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
184
181
|
id: tabsId,
|
185
182
|
ref: outerRef,
|
186
183
|
disabled: disabled,
|
187
|
-
className: cx(
|
184
|
+
className: cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className),
|
188
185
|
onKeyDown: onKeyDown,
|
189
186
|
orientation: orientation
|
190
187
|
}, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
@@ -192,7 +189,6 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
|
|
192
189
|
ref: scrollRef,
|
193
190
|
onScroll: handleScroll
|
194
191
|
}, /*#__PURE__*/React.createElement(StyledContent, {
|
195
|
-
hasDivider: hasDivider,
|
196
192
|
ref: trackRef
|
197
193
|
}, children)), !lastItemVisible && NextButton));
|
198
194
|
});
|
@@ -212,10 +208,6 @@ export var verticalTabsConfig = {
|
|
212
208
|
disabled: {
|
213
209
|
css: disabledCSS,
|
214
210
|
attrs: true
|
215
|
-
},
|
216
|
-
stretch: {
|
217
|
-
css: stretchCSS,
|
218
|
-
attrs: true
|
219
211
|
}
|
220
212
|
},
|
221
213
|
defaults: {
|
package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js
CHANGED
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../../../../tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["background-color:var(", ");&::
|
3
|
+
export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::after{top:1.5rem;}}&.", "{&::after{bottom:1.5rem;}}&.", "{&::after{width:0;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerWidth, tokens.tabsDividerBorderRadius, classes.tabsHasTopArrow, classes.tabsHasBottomArrow, classes.tabsNoDivider);
|
@@ -22,7 +22,8 @@ type CustomStoryTabsProps = {
|
|
22
22
|
hasDivider: boolean;
|
23
23
|
contentLeft: string;
|
24
24
|
contentRight: string;
|
25
|
-
|
25
|
+
stretch: boolean;
|
26
|
+
helperText: string;
|
26
27
|
};
|
27
28
|
|
28
29
|
const contentLeftOptions = ['none', 'icon'];
|
@@ -79,7 +80,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
79
80
|
contentRight: contentRightOption,
|
80
81
|
hasDivider,
|
81
82
|
stretch,
|
82
|
-
|
83
|
+
helperText,
|
83
84
|
} = props;
|
84
85
|
const items = Array(itemQuantity).fill(0);
|
85
86
|
const [index, setIndex] = useState(0);
|
@@ -94,7 +95,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
|
94
95
|
onClick={() => !disabled && setIndex(i)}
|
95
96
|
tabIndex={!disabled ? 0 : -1}
|
96
97
|
disabled={disabled}
|
97
|
-
value={
|
98
|
+
value={helperText}
|
98
99
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
99
100
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
100
101
|
size={size}
|
@@ -115,7 +116,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
115
116
|
contentLeft: contentLeftOption,
|
116
117
|
contentRight: contentRightOption,
|
117
118
|
hasDivider,
|
118
|
-
|
119
|
+
helperText,
|
119
120
|
} = props;
|
120
121
|
const items = Array(itemQuantity).fill(0);
|
121
122
|
const [index, setIndex] = useState(0);
|
@@ -136,7 +137,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
|
136
137
|
onClick={() => !disabled && setIndex(i)}
|
137
138
|
tabIndex={!disabled ? 0 : -1}
|
138
139
|
disabled={disabled}
|
139
|
-
value={
|
140
|
+
value={helperText}
|
140
141
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
141
142
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
142
143
|
size={size}
|
@@ -157,7 +158,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
157
158
|
contentLeft: contentLeftOption,
|
158
159
|
contentRight: contentRightOption,
|
159
160
|
hasDivider,
|
160
|
-
|
161
|
+
helperText,
|
161
162
|
} = props;
|
162
163
|
const maxItemQuantity = 3;
|
163
164
|
const items = Array(itemQuantity).fill(0);
|
@@ -188,7 +189,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
|
188
189
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
189
190
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
190
191
|
size={size}
|
191
|
-
value={
|
192
|
+
value={helperText}
|
192
193
|
>
|
193
194
|
{`Label${i + 1}`}
|
194
195
|
</TabItem>
|
@@ -221,7 +222,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
|
221
222
|
size: 'xs',
|
222
223
|
disabled: false,
|
223
224
|
hasDivider: true,
|
224
|
-
|
225
|
+
helperText: '',
|
225
226
|
itemQuantity: 8,
|
226
227
|
},
|
227
228
|
argTypes: {
|
@@ -267,12 +268,11 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
267
268
|
const {
|
268
269
|
disabled,
|
269
270
|
itemQuantity,
|
270
|
-
stretch,
|
271
271
|
size,
|
272
272
|
contentLeft: contentLeftOption,
|
273
273
|
contentRight: contentRightOption,
|
274
274
|
hasDivider,
|
275
|
-
|
275
|
+
helperText,
|
276
276
|
} = props;
|
277
277
|
const items = Array(itemQuantity).fill(0);
|
278
278
|
const [index, setIndex] = useState(0);
|
@@ -284,7 +284,6 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
284
284
|
hasDivider={hasDivider}
|
285
285
|
size={size as Size}
|
286
286
|
disabled={disabled}
|
287
|
-
stretch={stretch}
|
288
287
|
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
289
288
|
>
|
290
289
|
{items.map((_, i) => (
|
@@ -297,7 +296,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
|
|
297
296
|
tabIndex={!disabled ? 0 : -1}
|
298
297
|
size={size as Size}
|
299
298
|
disabled={disabled}
|
300
|
-
value={
|
299
|
+
value={helperText}
|
301
300
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
302
301
|
>
|
303
302
|
{`Label${i + 1}`}
|
@@ -317,7 +316,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
317
316
|
contentLeft: contentLeftOption,
|
318
317
|
contentRight: contentRightOption,
|
319
318
|
hasDivider,
|
320
|
-
|
319
|
+
helperText,
|
321
320
|
} = props;
|
322
321
|
const items = Array(itemQuantity).fill(0);
|
323
322
|
const [index, setIndex] = useState(0);
|
@@ -343,7 +342,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
|
|
343
342
|
tabIndex={!disabled ? 0 : -1}
|
344
343
|
size={size as Size}
|
345
344
|
disabled={disabled}
|
346
|
-
value={
|
345
|
+
value={helperText}
|
347
346
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
348
347
|
>
|
349
348
|
{`Label${i + 1}`}
|
@@ -363,7 +362,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
363
362
|
contentLeft: contentLeftOption,
|
364
363
|
contentRight: contentRightOption,
|
365
364
|
hasDivider,
|
366
|
-
|
365
|
+
helperText,
|
367
366
|
} = props;
|
368
367
|
const maxItemQuantity = 3;
|
369
368
|
const items = Array(itemQuantity).fill(0);
|
@@ -398,7 +397,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
|
398
397
|
onClick={() => !disabled && setIndex(i)}
|
399
398
|
tabIndex={!disabled ? 0 : -1}
|
400
399
|
disabled={disabled}
|
401
|
-
value={
|
400
|
+
value={helperText}
|
402
401
|
contentRight={getContentRight(contentRightOption, size as Size)}
|
403
402
|
size={size as Size}
|
404
403
|
>
|
@@ -434,7 +433,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
434
433
|
hasDivider: true,
|
435
434
|
itemQuantity: 8,
|
436
435
|
orientation: 'vertical',
|
437
|
-
|
436
|
+
helperText: '',
|
438
437
|
},
|
439
438
|
argTypes: {
|
440
439
|
contentLeft: {
|
@@ -462,6 +461,11 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
|
462
461
|
},
|
463
462
|
if: { arg: 'stretch', truthy: false },
|
464
463
|
},
|
464
|
+
stretch: {
|
465
|
+
table: {
|
466
|
+
disable: true,
|
467
|
+
},
|
468
|
+
},
|
465
469
|
},
|
466
470
|
render: (args) => {
|
467
471
|
switch (args.clip) {
|
package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js
CHANGED
@@ -15,9 +15,6 @@ export var config = {
|
|
15
15
|
m: /*#__PURE__*/css(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|
16
16
|
l: /*#__PURE__*/css(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding)
|
17
17
|
},
|
18
|
-
stretch: {
|
19
|
-
"true": /*#__PURE__*/css(["", ":100%;"], tabsTokens.containerHeight)
|
20
|
-
},
|
21
18
|
disabled: {
|
22
19
|
"true": /*#__PURE__*/css(["", ":0.4;"], tabsTokens.disabledOpacity)
|
23
20
|
}
|