@salutejs/plasma-new-hope 0.172.0-canary.1493.11404929441.0 → 0.172.0-canary.1495.11436703986.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Tabs/createTabsController.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -2
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/index.js +0 -6
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/emotion/cjs/components/Tabs/index.js +0 -26
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +0 -6
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +1 -7
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/emotion/es/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/emotion/es/components/Tabs/index.js +0 -2
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
- package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.js +1 -7
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.js +2 -8
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/es/components/Tabs/createTabsController.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -2
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/index.js +0 -2
- package/es/index.js.map +1 -1
- package/package.json +4 -4
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/styled-components/cjs/components/Tabs/index.js +0 -26
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +0 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +1 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/styled-components/es/components/Tabs/index.js +0 -2
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +2 -3
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -3
- package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js +1 -7
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.js +2 -8
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/types/components/Tabs/TabItem.types.d.ts +10 -52
- package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
- package/types/components/Tabs/Tabs.types.d.ts +2 -39
- package/types/components/Tabs/Tabs.types.d.ts.map +1 -1
- package/types/components/Tabs/createTabsController.d.ts +3 -3
- package/types/components/Tabs/createTabsController.d.ts.map +1 -1
- package/types/components/Tabs/index.d.ts +1 -3
- package/types/components/Tabs/index.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts +2 -2
- package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +1 -74
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +2 -22
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts +0 -18
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -4
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts +0 -4
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +0 -13
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -37
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +0 -1
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +0 -16
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -37
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +0 -1
- package/emotion/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -34
- package/emotion/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -34
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/emotion/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -28
- package/emotion/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -28
- package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +0 -13
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -32
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +0 -1
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +0 -16
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -32
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +0 -1
- package/styled-components/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -34
- package/styled-components/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -34
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/styled-components/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -28
- package/styled-components/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -28
- package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts +0 -25
- package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts.map +0 -1
- package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts +0 -25
- package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts +0 -22
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts +0 -23
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts +0 -22
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts +0 -23
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts.map +0 -1
@@ -22,10 +22,6 @@ var config = exports.config = {
|
|
22
22
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":fit-content;", ":auto;", ":0rem;", ":0.25rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
23
23
|
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),
|
24
24
|
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),
|
25
|
-
/**
|
26
|
-
* @deprecated
|
27
|
-
* вместо h1-h5 использовать HorizontalTabs со свойством header
|
28
|
-
*/
|
29
25
|
h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
30
26
|
h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
31
27
|
h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":fit-content;", ":auto;", ":0.375rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
|
|
12
12
|
import { TabItem } from './TabItem';
|
13
13
|
|
14
14
|
const clips = ['none', 'scroll', 'showAll'];
|
15
|
-
const headerClips = ['none', 'scroll'];
|
16
15
|
const sizes = ['xs', 's', 'm', 'l'] as const;
|
17
16
|
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
|
18
17
|
|
@@ -53,7 +52,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
53
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
54
53
|
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
55
54
|
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
56
|
-
type HeaderStoryTabsProps = StoryTabsProps & { width: string };
|
57
55
|
|
58
56
|
const meta: Meta<StoryTabsProps> = {
|
59
57
|
title: 'plasma_web/Tabs',
|
@@ -70,7 +68,6 @@ const meta: Meta<StoryTabsProps> = {
|
|
70
68
|
'forwardedAs',
|
71
69
|
'outsideScroll',
|
72
70
|
'index',
|
73
|
-
'header',
|
74
71
|
]),
|
75
72
|
contentRight: {
|
76
73
|
options: contentRightOptions,
|
@@ -606,55 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
606
603
|
},
|
607
604
|
};
|
608
605
|
|
609
|
-
const
|
610
|
-
const {
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
key={`item:${i}`}
|
620
|
-
view="divider"
|
621
|
-
selected={i === index}
|
622
|
-
onClick={() => !disabled && setIndex(i)}
|
623
|
-
tabIndex={!disabled ? 0 : -1}
|
624
|
-
disabled={disabled}
|
625
|
-
value={helperText}
|
626
|
-
size={size as HeaderSize}
|
627
|
-
>
|
628
|
-
{`Label${i + 1}`}
|
629
|
-
</TabItem>
|
630
|
-
))}
|
631
|
-
</Tabs>
|
632
|
-
);
|
633
|
-
};
|
634
|
-
|
635
|
-
const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
636
|
-
const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
|
606
|
+
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
607
|
+
const {
|
608
|
+
disabled,
|
609
|
+
itemQuantity,
|
610
|
+
size,
|
611
|
+
contentLeft: contentLeftOption,
|
612
|
+
contentRight: contentRightOption,
|
613
|
+
hasDivider,
|
614
|
+
stretch,
|
615
|
+
} = props;
|
637
616
|
const items = Array(itemQuantity).fill(0);
|
638
617
|
const [index, setIndex] = useState(0);
|
639
618
|
|
640
619
|
return (
|
641
|
-
<Tabs
|
642
|
-
header
|
643
|
-
view={hasDivider ? 'divider' : 'clear'}
|
644
|
-
disabled={disabled}
|
645
|
-
size={size as HeaderSize}
|
646
|
-
style={{ width }}
|
647
|
-
>
|
620
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
|
648
621
|
{items.map((_, i) => (
|
649
622
|
<TabItem
|
650
|
-
header
|
651
623
|
key={`item:${i}`}
|
652
624
|
view="divider"
|
653
625
|
selected={i === index}
|
654
626
|
onClick={() => !disabled && setIndex(i)}
|
655
627
|
tabIndex={!disabled ? 0 : -1}
|
656
628
|
disabled={disabled}
|
657
|
-
|
629
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
630
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
658
631
|
size={size as HeaderSize}
|
659
632
|
>
|
660
633
|
{`Label${i + 1}`}
|
@@ -664,14 +637,12 @@ const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
|
664
637
|
);
|
665
638
|
};
|
666
639
|
|
667
|
-
export const HeaderTabs: StoryObj<
|
640
|
+
export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
668
641
|
args: {
|
669
642
|
size: 'h5',
|
670
643
|
disabled: false,
|
671
644
|
hasDivider: true,
|
672
|
-
|
673
|
-
itemQuantity: 6,
|
674
|
-
width: '12rem',
|
645
|
+
itemQuantity: 4,
|
675
646
|
},
|
676
647
|
argTypes: {
|
677
648
|
size: {
|
@@ -680,36 +651,23 @@ export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
|
|
680
651
|
type: 'select',
|
681
652
|
},
|
682
653
|
},
|
683
|
-
|
684
|
-
options:
|
654
|
+
contentLeft: {
|
655
|
+
options: contentLeftOptions,
|
685
656
|
control: {
|
686
657
|
type: 'select',
|
687
658
|
},
|
688
|
-
if: { arg: 'stretch', truthy: false },
|
689
659
|
},
|
690
|
-
|
660
|
+
contentRight: {
|
661
|
+
options: contentRightOptions,
|
691
662
|
control: {
|
692
|
-
type: '
|
693
|
-
},
|
694
|
-
if: { arg: 'clip', eq: 'scroll' },
|
695
|
-
},
|
696
|
-
stretch: {
|
697
|
-
table: {
|
698
|
-
disable: true,
|
663
|
+
type: 'select',
|
699
664
|
},
|
700
665
|
},
|
701
|
-
|
666
|
+
clip: {
|
702
667
|
table: {
|
703
668
|
disable: true,
|
704
669
|
},
|
705
670
|
},
|
706
671
|
},
|
707
|
-
render: (args) => {
|
708
|
-
switch (args.clip) {
|
709
|
-
case 'scroll':
|
710
|
-
return <StoryHeaderScroll {...args} />;
|
711
|
-
default:
|
712
|
-
return <StoryHeaderDefault {...args} />;
|
713
|
-
}
|
714
|
-
},
|
672
|
+
render: (args) => <StoryHeaderTabs {...args} />,
|
715
673
|
};
|
@@ -23,10 +23,6 @@ var config = exports.config = {
|
|
23
23
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2.5rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
|
24
24
|
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":3rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.375rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
|
25
25
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3.5rem;", ":0 0.875rem;", ":0 0.75rem;", ":1.75rem;", ":0.5rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.itemContentPadding, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
|
26
|
-
/**
|
27
|
-
* @deprecated
|
28
|
-
* вместо h1-h5 использовать HorizontalTabItem со свойством header
|
29
|
-
*/
|
30
26
|
h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
|
31
27
|
h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
|
32
28
|
h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemMarginLeft, _Tabs.tabsTokens.itemContentGap, _Tabs.tabsTokens.fontFamily, _Tabs.tabsTokens.fontSize, _Tabs.tabsTokens.fontStyle, _Tabs.tabsTokens.fontWeight, _Tabs.tabsTokens.letterSpacing, _Tabs.tabsTokens.lineHeight),
|
@@ -22,10 +22,6 @@ var config = exports.config = {
|
|
22
22
|
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":fit-content;", ":auto;", ":0rem;", ":0.25rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
23
23
|
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),
|
24
24
|
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),
|
25
|
-
/**
|
26
|
-
* @deprecated
|
27
|
-
* вместо h1-h5 использовать HorizontalTabs со свойством header
|
28
|
-
*/
|
29
25
|
h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
30
26
|
h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
31
27
|
h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":fit-content;", ":auto;", ":0.375rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
@@ -63,7 +63,6 @@ export function App() {
|
|
63
63
|
|
64
64
|
### Расположение табов
|
65
65
|
Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
|
66
|
-
Также у горизонтальных табов есть свойство `header`.
|
67
66
|
|
68
67
|
```tsx live
|
69
68
|
import React, { useState } from 'react';
|
@@ -72,11 +71,10 @@ import { IconClock } from '@salutejs/plasma-icons';
|
|
72
71
|
|
73
72
|
export function App() {
|
74
73
|
const items = Array(8).fill(0);
|
75
|
-
const [
|
76
|
-
const [horizontalIndex, setHorizontalIndex] = useState(0);
|
74
|
+
const [index, setIndex] = useState(0);
|
77
75
|
|
78
76
|
return (
|
79
|
-
<div
|
77
|
+
<div>
|
80
78
|
<Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
|
81
79
|
{items.map((_, i) => (
|
82
80
|
<TabItem
|
@@ -84,26 +82,10 @@ export function App() {
|
|
84
82
|
orientation="vertical"
|
85
83
|
key={`item:${i}`}
|
86
84
|
size="xs"
|
87
|
-
selected={i ===
|
85
|
+
selected={i === index}
|
88
86
|
tabIndex={0}
|
89
87
|
contentLeft={<IconClock size="xs" color="inherit" />}
|
90
|
-
onClick={() =>
|
91
|
-
>
|
92
|
-
{`Label${i + 1}`}
|
93
|
-
</TabItem>
|
94
|
-
))}
|
95
|
-
</Tabs>
|
96
|
-
|
97
|
-
<Tabs header view="divider" size="h5" style=\{{ width: '15rem' }}>
|
98
|
-
{items.map((_, i) => (
|
99
|
-
<TabItem
|
100
|
-
header
|
101
|
-
view="divider"
|
102
|
-
key={`item:${i}`}
|
103
|
-
size="h5"
|
104
|
-
selected={i === horizontalIndex}
|
105
|
-
tabIndex={0}
|
106
|
-
onClick={() => setHorizontalIndex(i)}
|
88
|
+
onClick={() => setIndex(i)}
|
107
89
|
>
|
108
90
|
{`Label${i + 1}`}
|
109
91
|
</TabItem>
|
@@ -2,8 +2,6 @@ export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/Horizo
|
|
2
2
|
export { horizontalTabItemRoot, horizontalTabItemConfig } from './ui/horizontal/HorizontalTabItem/HorizontalTabItem';
|
3
3
|
export { verticalTabsRoot, verticalTabsConfig } from './ui/vertical/VerticalTabs/VerticalTabs';
|
4
4
|
export { verticalTabItemRoot, verticalTabItemConfig } from './ui/vertical/VerticalTabItem/VerticalTabItem';
|
5
|
-
export { headerTabsRoot, headerTabsConfig } from './ui/header/HeaderTabs/HeaderTabs';
|
6
|
-
export { headerTabItemRoot, headerTabItemConfig } from './ui/header/HeaderTabItem/HeaderTabItem';
|
7
5
|
export { tokens as tabsTokens } from './tokens';
|
8
6
|
export { TabItemRefs, TabsContext } from './TabsContext';
|
9
7
|
export { createTabsController } from './createTabsController';
|
package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"
|
1
|
+
var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
|
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 _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; }
|
4
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; }
|
@@ -33,7 +33,6 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
|
33
33
|
tabIndex = props.tabIndex,
|
34
34
|
className = props.className,
|
35
35
|
onClick = props.onClick,
|
36
|
-
_header = props.header,
|
37
36
|
rest = _objectWithoutProperties(props, _excluded);
|
38
37
|
var innerRef = useRef(null);
|
39
38
|
var ref = useForkRef(outerRef, innerRef);
|
@@ -91,10 +90,10 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
|
|
91
90
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
92
91
|
ref: ref,
|
93
92
|
disabled: disabled,
|
93
|
+
pilled: pilled,
|
94
94
|
role: role,
|
95
95
|
view: view,
|
96
96
|
size: size,
|
97
|
-
pilled: pilled,
|
98
97
|
onFocus: onItemFocus,
|
99
98
|
tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
|
100
99
|
className: cx(pilledClass, selectedClass, animatedClass, className),
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"
|
1
|
+
var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
|
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."); }
|
@@ -43,7 +43,6 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
43
43
|
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
44
44
|
index = props.index,
|
45
45
|
className = props.className,
|
46
|
-
_header = props.header,
|
47
46
|
rest = _objectWithoutProperties(props, _excluded);
|
48
47
|
var _useState = useState(true),
|
49
48
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -192,8 +191,8 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
|
|
192
191
|
view: view,
|
193
192
|
role: "tablist",
|
194
193
|
size: size,
|
195
|
-
id: tabsId,
|
196
194
|
pilled: pilled,
|
195
|
+
id: tabsId,
|
197
196
|
ref: outerRef,
|
198
197
|
disabled: disabled,
|
199
198
|
className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
|
@@ -1,21 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import { horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
|
3
3
|
import { component, mergeConfig } from '../../../../engines';
|
4
4
|
import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
|
5
5
|
import { config as verticalConfig } from './vertical/VerticalTabItem.config';
|
6
|
-
import { config as headerConfig } from './header/HeaderTabItem.config';
|
7
6
|
var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, horizontalConfig);
|
8
7
|
var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
|
9
8
|
var mergedVerticalTabItemConfig = /*#__PURE__*/mergeConfig(verticalTabItemConfig, verticalConfig);
|
10
9
|
var VerticalTabItem = /*#__PURE__*/component(mergedVerticalTabItemConfig);
|
11
|
-
var mergedHeaderTabItemConfig = /*#__PURE__*/mergeConfig(headerTabItemConfig, headerConfig);
|
12
|
-
var HeaderTabItem = /*#__PURE__*/component(mergedHeaderTabItemConfig);
|
13
10
|
export var TabItem = function TabItem(props) {
|
14
11
|
if (props.orientation === 'vertical') {
|
15
12
|
return /*#__PURE__*/React.createElement(VerticalTabItem, props);
|
16
13
|
}
|
17
|
-
if (props.header) {
|
18
|
-
return /*#__PURE__*/React.createElement(HeaderTabItem, props);
|
19
|
-
}
|
20
14
|
return /*#__PURE__*/React.createElement(HorizontalTabItem, props);
|
21
15
|
};
|
@@ -1,21 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { horizontalTabsConfig, verticalTabsConfig
|
2
|
+
import { horizontalTabsConfig, verticalTabsConfig } from '../../../../components/Tabs';
|
3
3
|
import { component, mergeConfig } from '../../../../engines';
|
4
4
|
import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
|
5
5
|
import { config as verticalConfig } from './vertical/VerticalTabs.config';
|
6
|
-
import { config as headerConfig } from './header/HeaderTabs.config';
|
7
6
|
var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, horizontalConfig);
|
8
|
-
var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
|
9
7
|
var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
|
8
|
+
var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
|
10
9
|
var VerticalTabs = /*#__PURE__*/component(mergedVerticalTabsConfig);
|
11
|
-
var mergedHeaderTabsConfig = /*#__PURE__*/mergeConfig(headerTabsConfig, headerConfig);
|
12
|
-
var HeaderTabs = /*#__PURE__*/component(mergedHeaderTabsConfig);
|
13
10
|
export var Tabs = function Tabs(props) {
|
14
11
|
if (props.orientation === 'vertical') {
|
15
12
|
return /*#__PURE__*/React.createElement(VerticalTabs, props);
|
16
13
|
}
|
17
|
-
if (props.header) {
|
18
|
-
return /*#__PURE__*/React.createElement(HeaderTabs, props);
|
19
|
-
}
|
20
14
|
return /*#__PURE__*/React.createElement(HorizontalTabs, props);
|
21
15
|
};
|
@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
|
|
12
12
|
import { TabItem } from './TabItem';
|
13
13
|
|
14
14
|
const clips = ['none', 'scroll', 'showAll'];
|
15
|
-
const headerClips = ['none', 'scroll'];
|
16
15
|
const sizes = ['xs', 's', 'm', 'l'] as const;
|
17
16
|
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
|
18
17
|
|
@@ -53,7 +52,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
53
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
54
53
|
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
55
54
|
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
56
|
-
type HeaderStoryTabsProps = StoryTabsProps & { width: string };
|
57
55
|
|
58
56
|
const meta: Meta<StoryTabsProps> = {
|
59
57
|
title: 'plasma_b2c/Tabs',
|
@@ -70,7 +68,6 @@ const meta: Meta<StoryTabsProps> = {
|
|
70
68
|
'forwardedAs',
|
71
69
|
'outsideScroll',
|
72
70
|
'index',
|
73
|
-
'header',
|
74
71
|
]),
|
75
72
|
contentRight: {
|
76
73
|
options: contentRightOptions,
|
@@ -606,55 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
606
603
|
},
|
607
604
|
};
|
608
605
|
|
609
|
-
const
|
610
|
-
const {
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
key={`item:${i}`}
|
620
|
-
view="divider"
|
621
|
-
selected={i === index}
|
622
|
-
onClick={() => !disabled && setIndex(i)}
|
623
|
-
tabIndex={!disabled ? 0 : -1}
|
624
|
-
disabled={disabled}
|
625
|
-
value={helperText}
|
626
|
-
size={size as HeaderSize}
|
627
|
-
>
|
628
|
-
{`Label${i + 1}`}
|
629
|
-
</TabItem>
|
630
|
-
))}
|
631
|
-
</Tabs>
|
632
|
-
);
|
633
|
-
};
|
634
|
-
|
635
|
-
const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
636
|
-
const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
|
606
|
+
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
607
|
+
const {
|
608
|
+
disabled,
|
609
|
+
itemQuantity,
|
610
|
+
size,
|
611
|
+
contentLeft: contentLeftOption,
|
612
|
+
contentRight: contentRightOption,
|
613
|
+
hasDivider,
|
614
|
+
stretch,
|
615
|
+
} = props;
|
637
616
|
const items = Array(itemQuantity).fill(0);
|
638
617
|
const [index, setIndex] = useState(0);
|
639
618
|
|
640
619
|
return (
|
641
|
-
<Tabs
|
642
|
-
header
|
643
|
-
view={hasDivider ? 'divider' : 'clear'}
|
644
|
-
disabled={disabled}
|
645
|
-
size={size as HeaderSize}
|
646
|
-
style={{ width }}
|
647
|
-
>
|
620
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
|
648
621
|
{items.map((_, i) => (
|
649
622
|
<TabItem
|
650
|
-
header
|
651
623
|
key={`item:${i}`}
|
652
624
|
view="divider"
|
653
625
|
selected={i === index}
|
654
626
|
onClick={() => !disabled && setIndex(i)}
|
655
627
|
tabIndex={!disabled ? 0 : -1}
|
656
628
|
disabled={disabled}
|
657
|
-
|
629
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
630
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
658
631
|
size={size as HeaderSize}
|
659
632
|
>
|
660
633
|
{`Label${i + 1}`}
|
@@ -664,14 +637,12 @@ const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
|
664
637
|
);
|
665
638
|
};
|
666
639
|
|
667
|
-
export const HeaderTabs: StoryObj<
|
640
|
+
export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
668
641
|
args: {
|
669
642
|
size: 'h5',
|
670
643
|
disabled: false,
|
671
644
|
hasDivider: true,
|
672
|
-
|
673
|
-
itemQuantity: 6,
|
674
|
-
width: '12rem',
|
645
|
+
itemQuantity: 4,
|
675
646
|
},
|
676
647
|
argTypes: {
|
677
648
|
size: {
|
@@ -680,36 +651,23 @@ export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
|
|
680
651
|
type: 'select',
|
681
652
|
},
|
682
653
|
},
|
683
|
-
|
684
|
-
options:
|
654
|
+
contentLeft: {
|
655
|
+
options: contentLeftOptions,
|
685
656
|
control: {
|
686
657
|
type: 'select',
|
687
658
|
},
|
688
|
-
if: { arg: 'stretch', truthy: false },
|
689
659
|
},
|
690
|
-
|
660
|
+
contentRight: {
|
661
|
+
options: contentRightOptions,
|
691
662
|
control: {
|
692
|
-
type: '
|
693
|
-
},
|
694
|
-
if: { arg: 'clip', eq: 'scroll' },
|
695
|
-
},
|
696
|
-
stretch: {
|
697
|
-
table: {
|
698
|
-
disable: true,
|
663
|
+
type: 'select',
|
699
664
|
},
|
700
665
|
},
|
701
|
-
|
666
|
+
clip: {
|
702
667
|
table: {
|
703
668
|
disable: true,
|
704
669
|
},
|
705
670
|
},
|
706
671
|
},
|
707
|
-
render: (args) => {
|
708
|
-
switch (args.clip) {
|
709
|
-
case 'scroll':
|
710
|
-
return <StoryHeaderScroll {...args} />;
|
711
|
-
default:
|
712
|
-
return <StoryHeaderDefault {...args} />;
|
713
|
-
}
|
714
|
-
},
|
672
|
+
render: (args) => <StoryHeaderTabs {...args} />,
|
715
673
|
};
|
@@ -17,10 +17,6 @@ export var config = {
|
|
17
17
|
s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2.5rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
|
18
18
|
m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":3rem;", ":0 0.625rem;", ":0 0.5rem;", ":1.75rem;", ":0.375rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
|
19
19
|
l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3.5rem;", ":0 0.875rem;", ":0 0.75rem;", ":1.75rem;", ":0.5rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
|
20
|
-
/**
|
21
|
-
* @deprecated
|
22
|
-
* вместо h1-h5 использовать HorizontalTabItem со свойством header
|
23
|
-
*/
|
24
20
|
h5: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
|
25
21
|
h4: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
|
26
22
|
h3: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
|
package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js
CHANGED
@@ -16,10 +16,6 @@ export var config = {
|
|
16
16
|
s: /*#__PURE__*/css(["", ":0.625rem;", ":fit-content;", ":auto;", ":0rem;", ":0.25rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|
17
17
|
m: /*#__PURE__*/css(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|
18
18
|
l: /*#__PURE__*/css(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|
19
|
-
/**
|
20
|
-
* @deprecated
|
21
|
-
* вместо h1-h5 использовать HorizontalTabs со свойством header
|
22
|
-
*/
|
23
19
|
h5: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|
24
20
|
h4: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|
25
21
|
h3: /*#__PURE__*/css(["", ":0.625rem;", ":fit-content;", ":auto;", ":0.375rem;", ":0rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
|