@salutejs/plasma-new-hope 0.171.0-canary.1492.11402523696.0 → 0.172.0-canary.1493.11403245502.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/cjs/components/Tabs/createTabsController.js.map +1 -1
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +13 -0
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +37 -0
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +1 -0
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +16 -0
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +37 -0
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +0 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +0 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/components/TextArea/TextArea.js +1 -1
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
- package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/cjs/index.js +6 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
- package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +22 -4
- package/emotion/cjs/components/Tabs/index.js +26 -0
- package/emotion/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +34 -0
- package/emotion/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +34 -0
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +0 -1
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +0 -1
- package/emotion/cjs/components/TextArea/TextArea.js +2 -2
- package/emotion/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +6 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +7 -1
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +64 -22
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +29 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +30 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +19 -15
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +19 -15
- package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +64 -22
- package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +29 -0
- package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +30 -0
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +19 -15
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +19 -15
- package/emotion/es/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
- package/emotion/es/components/Tabs/Tabs.template-doc.mdx +22 -4
- package/emotion/es/components/Tabs/index.js +2 -0
- package/emotion/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +28 -0
- package/emotion/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +28 -0
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +0 -1
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +0 -1
- package/emotion/es/components/TextArea/TextArea.js +2 -2
- package/emotion/es/components/TextArea/hooks/useAutoResize.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.js +7 -1
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.js +8 -2
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +64 -22
- package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +23 -0
- package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +24 -0
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +19 -15
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +19 -15
- package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +64 -22
- package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +23 -0
- package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +24 -0
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +19 -15
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +19 -15
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/Tabs/createTabsController.js.map +1 -1
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +13 -0
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +32 -0
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +1 -0
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +16 -0
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +32 -0
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +0 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +0 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/hooks/useAutoResize.js +2 -2
- package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +19 -13
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +22 -4
- package/styled-components/cjs/components/Tabs/index.js +26 -0
- package/styled-components/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +34 -0
- package/styled-components/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +34 -0
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +0 -1
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +0 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +1 -1
- package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +6 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +7 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +64 -22
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +29 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +30 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +4 -0
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +64 -22
- package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +29 -0
- package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +30 -0
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -0
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +4 -0
- package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +32 -0
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +20 -14
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +22 -4
- package/styled-components/es/components/Tabs/index.js +2 -0
- package/styled-components/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +28 -0
- package/styled-components/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +28 -0
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +0 -1
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +0 -1
- package/styled-components/es/components/TextArea/TextArea.js +1 -1
- package/styled-components/es/components/TextArea/hooks/useAutoResize.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +63 -1
- package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js +7 -1
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.js +8 -2
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +64 -22
- package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +23 -0
- package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +24 -0
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +4 -0
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +63 -1
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +64 -22
- package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +23 -0
- package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +24 -0
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -0
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +4 -0
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts +17 -2
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +17 -9
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
- package/types/components/Tabs/TabItem.types.d.ts +52 -10
- package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
- package/types/components/Tabs/Tabs.types.d.ts +39 -2
- 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 +3 -1
- package/types/components/Tabs/index.d.ts.map +1 -1
- package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts +25 -0
- package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts.map +1 -0
- package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts +25 -0
- package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts.map +1 -0
- 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/components/TextArea/hooks/useAutoResize.d.ts +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +74 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +22 -2
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts +22 -0
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts +23 -0
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +4 -0
- 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 +4 -0
- 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 +18 -0
- 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/header/HeaderTabItem.config.d.ts +22 -0
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts +23 -0
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +4 -0
- 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 +4 -0
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
@@ -9,14 +9,20 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
|
|
9
9
|
var _engines = /*#__PURE__*/require("../../../../engines");
|
10
10
|
var _HorizontalTabItem = /*#__PURE__*/require("./horizontal/HorizontalTabItem.config");
|
11
11
|
var _VerticalTabItem = /*#__PURE__*/require("./vertical/VerticalTabItem.config");
|
12
|
+
var _HeaderTabItem = /*#__PURE__*/require("./header/HeaderTabItem.config");
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
13
14
|
var mergedHorizontalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabItemConfig, _HorizontalTabItem.config);
|
14
15
|
var HorizontalTabItem = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabItemConfig);
|
15
16
|
var mergedVerticalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabItemConfig, _VerticalTabItem.config);
|
16
17
|
var VerticalTabItem = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabItemConfig);
|
18
|
+
var mergedHeaderTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.headerTabItemConfig, _HeaderTabItem.config);
|
19
|
+
var HeaderTabItem = /*#__PURE__*/(0, _engines.component)(mergedHeaderTabItemConfig);
|
17
20
|
var TabItem = exports.TabItem = function TabItem(props) {
|
18
21
|
if (props.orientation === 'vertical') {
|
19
22
|
return /*#__PURE__*/_react["default"].createElement(VerticalTabItem, props);
|
20
23
|
}
|
24
|
+
if (props.header) {
|
25
|
+
return /*#__PURE__*/_react["default"].createElement(HeaderTabItem, props);
|
26
|
+
}
|
21
27
|
return /*#__PURE__*/_react["default"].createElement(HorizontalTabItem, props);
|
22
28
|
};
|
@@ -9,14 +9,20 @@ var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
|
|
9
9
|
var _engines = /*#__PURE__*/require("../../../../engines");
|
10
10
|
var _HorizontalTabs = /*#__PURE__*/require("./horizontal/HorizontalTabs.config");
|
11
11
|
var _VerticalTabs = /*#__PURE__*/require("./vertical/VerticalTabs.config");
|
12
|
+
var _HeaderTabs = /*#__PURE__*/require("./header/HeaderTabs.config");
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
13
14
|
var mergedHorizontalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabsConfig, _HorizontalTabs.config);
|
14
|
-
var mergedVerticalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabsConfig, _VerticalTabs.config);
|
15
15
|
var HorizontalTabs = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabsConfig);
|
16
|
+
var mergedVerticalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.verticalTabsConfig, _VerticalTabs.config);
|
16
17
|
var VerticalTabs = /*#__PURE__*/(0, _engines.component)(mergedVerticalTabsConfig);
|
18
|
+
var mergedHeaderTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.headerTabsConfig, _HeaderTabs.config);
|
19
|
+
var HeaderTabs = /*#__PURE__*/(0, _engines.component)(mergedHeaderTabsConfig);
|
17
20
|
var Tabs = exports.Tabs = function Tabs(props) {
|
18
21
|
if (props.orientation === 'vertical') {
|
19
22
|
return /*#__PURE__*/_react["default"].createElement(VerticalTabs, props);
|
20
23
|
}
|
24
|
+
if (props.header) {
|
25
|
+
return /*#__PURE__*/_react["default"].createElement(HeaderTabs, props);
|
26
|
+
}
|
21
27
|
return /*#__PURE__*/_react["default"].createElement(HorizontalTabs, props);
|
22
28
|
};
|
@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
|
|
12
12
|
import { TabItem } from './TabItem';
|
13
13
|
|
14
14
|
const clips = ['none', 'scroll', 'showAll'];
|
15
|
+
const headerClips = ['none', 'scroll'];
|
15
16
|
const sizes = ['xs', 's', 'm', 'l'] as const;
|
16
17
|
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
|
17
18
|
|
@@ -52,6 +53,7 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
52
53
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
54
|
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
55
|
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
56
|
+
type HeaderStoryTabsProps = StoryTabsProps & { width: string };
|
55
57
|
|
56
58
|
const meta: Meta<StoryTabsProps> = {
|
57
59
|
title: 'plasma_b2c/Tabs',
|
@@ -68,6 +70,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
68
70
|
'forwardedAs',
|
69
71
|
'outsideScroll',
|
70
72
|
'index',
|
73
|
+
'header',
|
71
74
|
]),
|
72
75
|
contentRight: {
|
73
76
|
options: contentRightOptions,
|
@@ -603,31 +606,23 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
603
606
|
},
|
604
607
|
};
|
605
608
|
|
606
|
-
const
|
607
|
-
const {
|
608
|
-
disabled,
|
609
|
-
itemQuantity,
|
610
|
-
size,
|
611
|
-
contentLeft: contentLeftOption,
|
612
|
-
contentRight: contentRightOption,
|
613
|
-
hasDivider,
|
614
|
-
stretch,
|
615
|
-
} = props;
|
609
|
+
const StoryHeaderDefault = (props: HeaderStoryTabsProps) => {
|
610
|
+
const { disabled, itemQuantity, size, hasDivider, helperText } = props;
|
616
611
|
const items = Array(itemQuantity).fill(0);
|
617
612
|
const [index, setIndex] = useState(0);
|
618
613
|
|
619
614
|
return (
|
620
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size
|
615
|
+
<Tabs header view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size as HeaderSize}>
|
621
616
|
{items.map((_, i) => (
|
622
617
|
<TabItem
|
618
|
+
header
|
623
619
|
key={`item:${i}`}
|
624
620
|
view="divider"
|
625
621
|
selected={i === index}
|
626
622
|
onClick={() => !disabled && setIndex(i)}
|
627
623
|
tabIndex={!disabled ? 0 : -1}
|
628
624
|
disabled={disabled}
|
629
|
-
|
630
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
625
|
+
value={helperText}
|
631
626
|
size={size as HeaderSize}
|
632
627
|
>
|
633
628
|
{`Label${i + 1}`}
|
@@ -637,12 +632,46 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
|
|
637
632
|
);
|
638
633
|
};
|
639
634
|
|
640
|
-
|
635
|
+
const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
636
|
+
const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
|
637
|
+
const items = Array(itemQuantity).fill(0);
|
638
|
+
const [index, setIndex] = useState(0);
|
639
|
+
|
640
|
+
return (
|
641
|
+
<Tabs
|
642
|
+
header
|
643
|
+
view={hasDivider ? 'divider' : 'clear'}
|
644
|
+
disabled={disabled}
|
645
|
+
size={size as HeaderSize}
|
646
|
+
style={{ width }}
|
647
|
+
>
|
648
|
+
{items.map((_, i) => (
|
649
|
+
<TabItem
|
650
|
+
header
|
651
|
+
key={`item:${i}`}
|
652
|
+
view="divider"
|
653
|
+
selected={i === index}
|
654
|
+
onClick={() => !disabled && setIndex(i)}
|
655
|
+
tabIndex={!disabled ? 0 : -1}
|
656
|
+
disabled={disabled}
|
657
|
+
value={helperText}
|
658
|
+
size={size as HeaderSize}
|
659
|
+
>
|
660
|
+
{`Label${i + 1}`}
|
661
|
+
</TabItem>
|
662
|
+
))}
|
663
|
+
</Tabs>
|
664
|
+
);
|
665
|
+
};
|
666
|
+
|
667
|
+
export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
|
641
668
|
args: {
|
642
669
|
size: 'h5',
|
643
670
|
disabled: false,
|
644
671
|
hasDivider: true,
|
645
|
-
|
672
|
+
helperText: '',
|
673
|
+
itemQuantity: 6,
|
674
|
+
width: '12rem',
|
646
675
|
},
|
647
676
|
argTypes: {
|
648
677
|
size: {
|
@@ -651,23 +680,36 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
651
680
|
type: 'select',
|
652
681
|
},
|
653
682
|
},
|
654
|
-
|
655
|
-
options:
|
683
|
+
clip: {
|
684
|
+
options: headerClips,
|
656
685
|
control: {
|
657
686
|
type: 'select',
|
658
687
|
},
|
688
|
+
if: { arg: 'stretch', truthy: false },
|
659
689
|
},
|
660
|
-
|
661
|
-
options: contentRightOptions,
|
690
|
+
width: {
|
662
691
|
control: {
|
663
|
-
type: '
|
692
|
+
type: 'text',
|
664
693
|
},
|
694
|
+
if: { arg: 'clip', eq: 'scroll' },
|
665
695
|
},
|
666
|
-
|
696
|
+
stretch: {
|
697
|
+
table: {
|
698
|
+
disable: true,
|
699
|
+
},
|
700
|
+
},
|
701
|
+
contentRight: {
|
667
702
|
table: {
|
668
703
|
disable: true,
|
669
704
|
},
|
670
705
|
},
|
671
706
|
},
|
672
|
-
render: (args) =>
|
707
|
+
render: (args) => {
|
708
|
+
switch (args.clip) {
|
709
|
+
case 'scroll':
|
710
|
+
return <StoryHeaderScroll {...args} />;
|
711
|
+
default:
|
712
|
+
return <StoryHeaderDefault {...args} />;
|
713
|
+
}
|
714
|
+
},
|
673
715
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Tabs = /*#__PURE__*/require("../../../../../components/Tabs");
|
9
|
+
var config = exports.config = {
|
10
|
+
defaults: {
|
11
|
+
view: 'divider',
|
12
|
+
size: 'h5'
|
13
|
+
},
|
14
|
+
variations: {
|
15
|
+
view: {
|
16
|
+
divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
|
17
|
+
},
|
18
|
+
size: {
|
19
|
+
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),
|
20
|
+
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),
|
21
|
+
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
|
+
h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-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),
|
23
|
+
h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":0.5rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-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)
|
24
|
+
},
|
25
|
+
disabled: {
|
26
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
|
27
|
+
}
|
28
|
+
}
|
29
|
+
};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Tabs = /*#__PURE__*/require("../../../../../components/Tabs");
|
9
|
+
var config = exports.config = {
|
10
|
+
defaults: {
|
11
|
+
view: 'divider',
|
12
|
+
size: 'h5'
|
13
|
+
},
|
14
|
+
variations: {
|
15
|
+
view: {
|
16
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
|
17
|
+
divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
|
18
|
+
},
|
19
|
+
size: {
|
20
|
+
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),
|
21
|
+
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),
|
22
|
+
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),
|
23
|
+
h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0.5rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
24
|
+
h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":1rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding)
|
25
|
+
},
|
26
|
+
disabled: {
|
27
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
|
28
|
+
}
|
29
|
+
}
|
30
|
+
};
|
@@ -23,6 +23,10 @@ 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
|
+
*/
|
26
30
|
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),
|
27
31
|
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),
|
28
32
|
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,6 +22,10 @@ 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
|
+
*/
|
25
29
|
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),
|
26
30
|
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),
|
27
31
|
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),
|
package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, { useState } from 'react';
|
2
2
|
import type { ComponentProps, ReactNode } from 'react';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
|
|
7
7
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
8
|
import { accordionConfig } from '../../../../components/Accordion';
|
9
9
|
import { Pin } from '../../../../utils/roundness';
|
10
|
+
import { IconButton } from '../IconButton/IconButton';
|
11
|
+
import { IconPlus } from '../../../../components/_Icon';
|
10
12
|
|
11
13
|
import { config } from './Accordion.config';
|
12
14
|
import { Accordion, AccordionItem } from './Accordion';
|
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
|
|
91
93
|
);
|
92
94
|
},
|
93
95
|
};
|
96
|
+
|
97
|
+
const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
|
98
|
+
|
99
|
+
const ControlledAccordion = (props: AccordionProps) => {
|
100
|
+
const args = { ...props, text: undefined };
|
101
|
+
const [activeFirst, setActiveFirst] = useState(false);
|
102
|
+
const [activeSecond, setActiveSecond] = useState(false);
|
103
|
+
const [activeThree, setActiveThree] = useState(false);
|
104
|
+
|
105
|
+
return (
|
106
|
+
<Accordion {...args}>
|
107
|
+
<AccordionItem
|
108
|
+
contentRight={
|
109
|
+
<IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
|
110
|
+
<IconPlus size={getSizeForIcon(args.size)} />
|
111
|
+
</IconButton>
|
112
|
+
}
|
113
|
+
alignWithTitle={args.alignWithTitle}
|
114
|
+
type={args.type}
|
115
|
+
pin={args.pin}
|
116
|
+
title={args.title}
|
117
|
+
opened={activeFirst}
|
118
|
+
>
|
119
|
+
{args.body}
|
120
|
+
</AccordionItem>
|
121
|
+
<AccordionItem
|
122
|
+
contentRight={
|
123
|
+
<IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
|
124
|
+
<IconPlus size={getSizeForIcon(args.size)} />
|
125
|
+
</IconButton>
|
126
|
+
}
|
127
|
+
alignWithTitle={args.alignWithTitle}
|
128
|
+
type={args.type}
|
129
|
+
pin={args.pin}
|
130
|
+
title={args.title}
|
131
|
+
opened={activeSecond}
|
132
|
+
>
|
133
|
+
{args.body}
|
134
|
+
</AccordionItem>
|
135
|
+
<AccordionItem
|
136
|
+
contentRight={
|
137
|
+
<IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
|
138
|
+
<IconPlus size={getSizeForIcon(args.size)} />
|
139
|
+
</IconButton>
|
140
|
+
}
|
141
|
+
alignWithTitle={args.alignWithTitle}
|
142
|
+
type={args.type}
|
143
|
+
pin={args.pin}
|
144
|
+
title={args.title}
|
145
|
+
opened={activeThree}
|
146
|
+
>
|
147
|
+
{args.body}
|
148
|
+
</AccordionItem>
|
149
|
+
</Accordion>
|
150
|
+
);
|
151
|
+
};
|
152
|
+
|
153
|
+
export const Controlled: StoryObj<AccordionProps> = {
|
154
|
+
render: (props: AccordionProps) => ControlledAccordion(props),
|
155
|
+
};
|
@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
|
|
12
12
|
import { TabItem } from './TabItem';
|
13
13
|
|
14
14
|
const clips = ['none', 'scroll', 'showAll'];
|
15
|
+
const headerClips = ['none', 'scroll'];
|
15
16
|
const sizes = ['xs', 's', 'm', 'l'] as const;
|
16
17
|
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
|
17
18
|
|
@@ -52,6 +53,7 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
52
53
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
54
|
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
55
|
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
56
|
+
type HeaderStoryTabsProps = StoryTabsProps & { width: string };
|
55
57
|
|
56
58
|
const meta: Meta<StoryTabsProps> = {
|
57
59
|
title: 'plasma_web/Tabs',
|
@@ -68,6 +70,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
68
70
|
'forwardedAs',
|
69
71
|
'outsideScroll',
|
70
72
|
'index',
|
73
|
+
'header',
|
71
74
|
]),
|
72
75
|
contentRight: {
|
73
76
|
options: contentRightOptions,
|
@@ -603,31 +606,23 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
603
606
|
},
|
604
607
|
};
|
605
608
|
|
606
|
-
const
|
607
|
-
const {
|
608
|
-
disabled,
|
609
|
-
itemQuantity,
|
610
|
-
size,
|
611
|
-
contentLeft: contentLeftOption,
|
612
|
-
contentRight: contentRightOption,
|
613
|
-
hasDivider,
|
614
|
-
stretch,
|
615
|
-
} = props;
|
609
|
+
const StoryHeaderDefault = (props: HeaderStoryTabsProps) => {
|
610
|
+
const { disabled, itemQuantity, size, hasDivider, helperText } = props;
|
616
611
|
const items = Array(itemQuantity).fill(0);
|
617
612
|
const [index, setIndex] = useState(0);
|
618
613
|
|
619
614
|
return (
|
620
|
-
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size
|
615
|
+
<Tabs header view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size as HeaderSize}>
|
621
616
|
{items.map((_, i) => (
|
622
617
|
<TabItem
|
618
|
+
header
|
623
619
|
key={`item:${i}`}
|
624
620
|
view="divider"
|
625
621
|
selected={i === index}
|
626
622
|
onClick={() => !disabled && setIndex(i)}
|
627
623
|
tabIndex={!disabled ? 0 : -1}
|
628
624
|
disabled={disabled}
|
629
|
-
|
630
|
-
contentRight={getContentRight(contentRightOption, size as Size)}
|
625
|
+
value={helperText}
|
631
626
|
size={size as HeaderSize}
|
632
627
|
>
|
633
628
|
{`Label${i + 1}`}
|
@@ -637,12 +632,46 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
|
|
637
632
|
);
|
638
633
|
};
|
639
634
|
|
640
|
-
|
635
|
+
const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
636
|
+
const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
|
637
|
+
const items = Array(itemQuantity).fill(0);
|
638
|
+
const [index, setIndex] = useState(0);
|
639
|
+
|
640
|
+
return (
|
641
|
+
<Tabs
|
642
|
+
header
|
643
|
+
view={hasDivider ? 'divider' : 'clear'}
|
644
|
+
disabled={disabled}
|
645
|
+
size={size as HeaderSize}
|
646
|
+
style={{ width }}
|
647
|
+
>
|
648
|
+
{items.map((_, i) => (
|
649
|
+
<TabItem
|
650
|
+
header
|
651
|
+
key={`item:${i}`}
|
652
|
+
view="divider"
|
653
|
+
selected={i === index}
|
654
|
+
onClick={() => !disabled && setIndex(i)}
|
655
|
+
tabIndex={!disabled ? 0 : -1}
|
656
|
+
disabled={disabled}
|
657
|
+
value={helperText}
|
658
|
+
size={size as HeaderSize}
|
659
|
+
>
|
660
|
+
{`Label${i + 1}`}
|
661
|
+
</TabItem>
|
662
|
+
))}
|
663
|
+
</Tabs>
|
664
|
+
);
|
665
|
+
};
|
666
|
+
|
667
|
+
export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
|
641
668
|
args: {
|
642
669
|
size: 'h5',
|
643
670
|
disabled: false,
|
644
671
|
hasDivider: true,
|
645
|
-
|
672
|
+
helperText: '',
|
673
|
+
itemQuantity: 6,
|
674
|
+
width: '12rem',
|
646
675
|
},
|
647
676
|
argTypes: {
|
648
677
|
size: {
|
@@ -651,23 +680,36 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
|
651
680
|
type: 'select',
|
652
681
|
},
|
653
682
|
},
|
654
|
-
|
655
|
-
options:
|
683
|
+
clip: {
|
684
|
+
options: headerClips,
|
656
685
|
control: {
|
657
686
|
type: 'select',
|
658
687
|
},
|
688
|
+
if: { arg: 'stretch', truthy: false },
|
659
689
|
},
|
660
|
-
|
661
|
-
options: contentRightOptions,
|
690
|
+
width: {
|
662
691
|
control: {
|
663
|
-
type: '
|
692
|
+
type: 'text',
|
664
693
|
},
|
694
|
+
if: { arg: 'clip', eq: 'scroll' },
|
665
695
|
},
|
666
|
-
|
696
|
+
stretch: {
|
697
|
+
table: {
|
698
|
+
disable: true,
|
699
|
+
},
|
700
|
+
},
|
701
|
+
contentRight: {
|
667
702
|
table: {
|
668
703
|
disable: true,
|
669
704
|
},
|
670
705
|
},
|
671
706
|
},
|
672
|
-
render: (args) =>
|
707
|
+
render: (args) => {
|
708
|
+
switch (args.clip) {
|
709
|
+
case 'scroll':
|
710
|
+
return <StoryHeaderScroll {...args} />;
|
711
|
+
default:
|
712
|
+
return <StoryHeaderDefault {...args} />;
|
713
|
+
}
|
714
|
+
},
|
673
715
|
};
|
package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Tabs = /*#__PURE__*/require("../../../../../components/Tabs");
|
9
|
+
var config = exports.config = {
|
10
|
+
defaults: {
|
11
|
+
view: 'divider',
|
12
|
+
size: 'h5'
|
13
|
+
},
|
14
|
+
variations: {
|
15
|
+
view: {
|
16
|
+
divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], _Tabs.tabsTokens.itemColor, _Tabs.tabsTokens.itemValueColor, _Tabs.tabsTokens.itemBackgroundColor, _Tabs.tabsTokens.itemColorHover, _Tabs.tabsTokens.itemValueColorHover, _Tabs.tabsTokens.itemColorActive, _Tabs.tabsTokens.itemValueColorActive, _Tabs.tabsTokens.itemBackgroundColorHover, _Tabs.tabsTokens.itemSelectedColor, _Tabs.tabsTokens.itemSelectedValueColor, _Tabs.tabsTokens.itemSelectedBackgroundColor, _Tabs.tabsTokens.itemSelectedColorHover, _Tabs.tabsTokens.itemSelectedValueColorHover, _Tabs.tabsTokens.itemSelectedBackgroundColorHover, _Tabs.tabsTokens.itemBackgroundTransition, _Tabs.tabsTokens.itemPaddingClear, _Tabs.tabsTokens.itemContentPaddingClear, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
|
17
|
+
},
|
18
|
+
size: {
|
19
|
+
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),
|
20
|
+
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),
|
21
|
+
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
|
+
h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-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),
|
23
|
+
h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":0.5rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-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)
|
24
|
+
},
|
25
|
+
disabled: {
|
26
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
|
27
|
+
}
|
28
|
+
}
|
29
|
+
};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Tabs = /*#__PURE__*/require("../../../../../components/Tabs");
|
9
|
+
var config = exports.config = {
|
10
|
+
defaults: {
|
11
|
+
view: 'divider',
|
12
|
+
size: 'h5'
|
13
|
+
},
|
14
|
+
variations: {
|
15
|
+
view: {
|
16
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius),
|
17
|
+
divider: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], _Tabs.tabsTokens.arrowColor, _Tabs.tabsTokens.tabsBackgroundColor, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.tabsDividerHeight, _Tabs.tabsTokens.tabsDividerColor, _Tabs.tabsTokens.tabsDividerBorderRadius)
|
18
|
+
},
|
19
|
+
size: {
|
20
|
+
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),
|
21
|
+
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),
|
22
|
+
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),
|
23
|
+
h2: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0.5rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
|
24
|
+
h1: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":1rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding)
|
25
|
+
},
|
26
|
+
disabled: {
|
27
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
|
28
|
+
}
|
29
|
+
}
|
30
|
+
};
|
@@ -23,6 +23,10 @@ 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
|
+
*/
|
26
30
|
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),
|
27
31
|
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),
|
28
32
|
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),
|