@salutejs/plasma-new-hope 0.321.1-canary.1943.14662029036.0 → 0.321.1-canary.1945.14661970912.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Carousel/Carousel.css +4 -0
- package/cjs/components/Carousel/Carousel.js +80 -0
- package/cjs/components/Carousel/Carousel.js.map +1 -0
- package/cjs/components/Carousel/Carousel.styles.js +67 -0
- package/cjs/components/Carousel/Carousel.styles.js.map +1 -0
- package/cjs/components/Carousel/Carousel.styles_1lyqijv.css +4 -0
- package/cjs/components/Carousel/CarouselItem.js +53 -0
- package/cjs/components/Carousel/CarouselItem.js.map +1 -0
- package/cjs/components/Carousel/CarouselItem_cqjszm.css +1 -0
- package/cjs/components/Carousel/useCarousel.js +487 -0
- package/cjs/components/Carousel/useCarousel.js.map +1 -0
- package/cjs/components/Carousel/useDragScroll.js +62 -0
- package/cjs/components/Carousel/useDragScroll.js.map +1 -0
- package/cjs/components/Tabs/tokens.js +0 -1
- package/cjs/components/Tabs/tokens.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +5 -5
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/{HorizontalTabItem.styles_1rvmyae.css → HorizontalTabItem.styles_1yi1gll.css} +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +5 -5
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabItem/{VerticalTabItem.styles_y2x2qv.css → VerticalTabItem.styles_17vv6lq.css} +1 -1
- package/cjs/index.css +17 -10
- package/cjs/index.js +7 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Carousel/Carousel.js +77 -0
- package/emotion/cjs/components/Carousel/Carousel.styles.js +49 -0
- package/emotion/cjs/components/Carousel/Carousel.types.js +5 -0
- package/emotion/cjs/components/Carousel/CarouselItem.js +38 -0
- package/emotion/cjs/components/Carousel/index.js +32 -0
- package/emotion/cjs/components/Carousel/useCarousel.js +478 -0
- package/emotion/cjs/components/Carousel/useDragScroll.js +65 -0
- package/emotion/cjs/components/Tabs/tokens.js +0 -1
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +10 -0
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +18 -0
- package/emotion/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +10 -0
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.js +18 -0
- package/emotion/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
- package/emotion/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Carousel/Carousel.js +69 -0
- package/emotion/es/components/Carousel/Carousel.styles.js +42 -0
- package/emotion/es/components/Carousel/Carousel.types.js +1 -0
- package/emotion/es/components/Carousel/CarouselItem.js +31 -0
- package/emotion/es/components/Carousel/index.js +3 -0
- package/emotion/es/components/Carousel/useCarousel.js +468 -0
- package/emotion/es/components/Carousel/useDragScroll.js +59 -0
- package/emotion/es/components/Tabs/tokens.js +0 -1
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +6 -6
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +6 -6
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +4 -0
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.js +6 -0
- package/emotion/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
- package/emotion/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.config.js +4 -0
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.js +6 -0
- package/emotion/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +16 -16
- package/emotion/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +7 -7
- package/emotion/es/index.js +2 -1
- package/es/components/Carousel/Carousel.css +4 -0
- package/es/components/Carousel/Carousel.js +71 -0
- package/es/components/Carousel/Carousel.js.map +1 -0
- package/es/components/Carousel/Carousel.styles.js +60 -0
- package/es/components/Carousel/Carousel.styles.js.map +1 -0
- package/es/components/Carousel/Carousel.styles_1lyqijv.css +4 -0
- package/es/components/Carousel/CarouselItem.js +45 -0
- package/es/components/Carousel/CarouselItem.js.map +1 -0
- package/es/components/Carousel/CarouselItem_cqjszm.css +1 -0
- package/es/components/Carousel/useCarousel.js +472 -0
- package/es/components/Carousel/useCarousel.js.map +1 -0
- package/es/components/Carousel/useDragScroll.js +58 -0
- package/es/components/Carousel/useDragScroll.js.map +1 -0
- package/es/components/Tabs/tokens.js +0 -1
- package/es/components/Tabs/tokens.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.css +5 -5
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/{HorizontalTabItem.styles_1rvmyae.css → HorizontalTabItem.styles_1yi1gll.css} +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.css +5 -5
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabItem/{VerticalTabItem.styles_y2x2qv.css → VerticalTabItem.styles_17vv6lq.css} +1 -1
- package/es/index.css +17 -10
- package/es/index.js +3 -0
- package/es/index.js.map +1 -1
- package/package.json +4 -4
- package/styled-components/cjs/components/Carousel/Carousel.js +77 -0
- package/styled-components/cjs/components/Carousel/Carousel.styles.js +38 -0
- package/styled-components/cjs/components/Carousel/Carousel.types.js +5 -0
- package/styled-components/cjs/components/Carousel/CarouselItem.js +37 -0
- package/styled-components/cjs/components/Carousel/index.js +32 -0
- package/styled-components/cjs/components/Carousel/useCarousel.js +478 -0
- package/styled-components/cjs/components/Carousel/useDragScroll.js +65 -0
- package/styled-components/cjs/components/Tabs/tokens.js +0 -1
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.config.js +10 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.js +18 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.config.js +10 -0
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.js +18 -0
- package/styled-components/cjs/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Carousel/Carousel.js +69 -0
- package/styled-components/es/components/Carousel/Carousel.styles.js +30 -0
- package/styled-components/es/components/Carousel/Carousel.types.js +1 -0
- package/styled-components/es/components/Carousel/CarouselItem.js +30 -0
- package/styled-components/es/components/Carousel/index.js +3 -0
- package/styled-components/es/components/Carousel/useCarousel.js +468 -0
- package/styled-components/es/components/Carousel/useDragScroll.js +59 -0
- package/styled-components/es/components/Tabs/tokens.js +0 -1
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js +1 -1
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.config.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.js +6 -0
- package/styled-components/es/examples/plasma_b2c/components/Carousel/Carousel.stories.tsx +80 -0
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.config.js +4 -0
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.js +6 -0
- package/styled-components/es/examples/plasma_web/components/Carousel/Carousel.stories.tsx +80 -0
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js +1 -1
- package/styled-components/es/index.js +2 -1
- package/types/components/Carousel/Carousel.d.ts +22 -0
- package/types/components/Carousel/Carousel.d.ts.map +1 -0
- package/types/components/Carousel/Carousel.styles.d.ts +16 -0
- package/types/components/Carousel/Carousel.styles.d.ts.map +1 -0
- package/types/components/Carousel/Carousel.types.d.ts +111 -0
- package/types/components/Carousel/Carousel.types.d.ts.map +1 -0
- package/types/components/Carousel/CarouselItem.d.ts +4 -0
- package/types/components/Carousel/CarouselItem.d.ts.map +1 -0
- package/types/components/Carousel/index.d.ts +5 -0
- package/types/components/Carousel/index.d.ts.map +1 -0
- package/types/components/Carousel/useCarousel.d.ts +63 -0
- package/types/components/Carousel/useCarousel.d.ts.map +1 -0
- package/types/components/Carousel/useDragScroll.d.ts +3 -0
- package/types/components/Carousel/useDragScroll.d.ts.map +1 -0
- package/types/components/Tabs/tokens.d.ts +0 -1
- package/types/components/Tabs/tokens.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts.map +1 -1
- package/types/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
@@ -0,0 +1,80 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
import styled from 'styled-components';
|
5
|
+
|
6
|
+
import { WithTheme } from '../../../_helpers';
|
7
|
+
|
8
|
+
import { Carousel, CarouselItem } from './Carousel';
|
9
|
+
|
10
|
+
type StoryCarouselProps = ComponentProps<typeof Carousel>;
|
11
|
+
|
12
|
+
const meta: Meta<StoryCarouselProps> = {
|
13
|
+
title: 'b2c/Data Display/Carousel',
|
14
|
+
component: Carousel,
|
15
|
+
decorators: [WithTheme],
|
16
|
+
argTypes: {
|
17
|
+
align: {
|
18
|
+
options: ['center', 'start', 'end'],
|
19
|
+
control: {
|
20
|
+
type: 'inline-radio',
|
21
|
+
},
|
22
|
+
},
|
23
|
+
isDragScrollDisabled: {
|
24
|
+
control: 'boolean',
|
25
|
+
},
|
26
|
+
},
|
27
|
+
args: {
|
28
|
+
align: 'center',
|
29
|
+
isDragScrollDisabled: false,
|
30
|
+
},
|
31
|
+
parameters: {
|
32
|
+
controls: {
|
33
|
+
include: ['align', 'isDragScrollDisabled'],
|
34
|
+
},
|
35
|
+
},
|
36
|
+
};
|
37
|
+
|
38
|
+
export default meta;
|
39
|
+
|
40
|
+
const items = Array(25)
|
41
|
+
.fill({
|
42
|
+
title: 'Заголовок',
|
43
|
+
})
|
44
|
+
.map(({ title }, i) => ({
|
45
|
+
id: i,
|
46
|
+
title: `${title} ${i}`,
|
47
|
+
}));
|
48
|
+
|
49
|
+
const StyledCard = styled.div`
|
50
|
+
position: relative;
|
51
|
+
border-radius: 8px;
|
52
|
+
width: 350px;
|
53
|
+
height: 50px;
|
54
|
+
padding: 8px;
|
55
|
+
background-color: #add8e6;
|
56
|
+
`;
|
57
|
+
|
58
|
+
const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
|
59
|
+
const [index, setIndex] = React.useState(0);
|
60
|
+
|
61
|
+
return (
|
62
|
+
<Carousel
|
63
|
+
index={index}
|
64
|
+
detectActive
|
65
|
+
onIndexChange={setIndex}
|
66
|
+
scrollAlign={align}
|
67
|
+
isDragScrollDisabled={isDragScrollDisabled}
|
68
|
+
>
|
69
|
+
{items.map((item, i) => (
|
70
|
+
<CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
|
71
|
+
<StyledCard>{item.title}</StyledCard>
|
72
|
+
</CarouselItem>
|
73
|
+
))}
|
74
|
+
</Carousel>
|
75
|
+
);
|
76
|
+
};
|
77
|
+
|
78
|
+
export const Default: StoryObj<StoryCarouselProps> = {
|
79
|
+
render: (args) => <StoryDefault {...args} />,
|
80
|
+
};
|
@@ -13,10 +13,10 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
clear: /*#__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);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"
|
17
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"
|
18
|
-
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);"
|
19
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"
|
16
|
+
clear: /*#__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);", ":0rem;", ":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
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":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.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
|
18
|
+
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),
|
19
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":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.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
|
20
20
|
},
|
21
21
|
size: {
|
22
22
|
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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),
|
package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.js
CHANGED
@@ -13,7 +13,7 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
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;", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"
|
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;", ":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.itemSelectedDividerWidth, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
|
17
17
|
},
|
18
18
|
size: {
|
19
19
|
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":0.5rem 0.625rem;", ":0.625rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemPaddingOrientationVertical, _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),
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Carousel = void 0;
|
7
|
+
Object.defineProperty(exports, "CarouselItem", {
|
8
|
+
enumerable: true,
|
9
|
+
get: function get() {
|
10
|
+
return _Carousel.CarouselItem;
|
11
|
+
}
|
12
|
+
});
|
13
|
+
exports.mergedConfig = void 0;
|
14
|
+
var _Carousel = /*#__PURE__*/require("../../../../components/Carousel");
|
15
|
+
var _engines = /*#__PURE__*/require("../../../../engines");
|
16
|
+
var _Carousel2 = /*#__PURE__*/require("./Carousel.config");
|
17
|
+
var mergedConfig = exports.mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Carousel.carouselConfig, _Carousel2.config);
|
18
|
+
var Carousel = exports.Carousel = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
@@ -0,0 +1,80 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
import styled from 'styled-components';
|
5
|
+
|
6
|
+
import { WithTheme } from '../../../_helpers';
|
7
|
+
|
8
|
+
import { Carousel, CarouselItem } from './Carousel';
|
9
|
+
|
10
|
+
type StoryCarouselProps = ComponentProps<typeof Carousel>;
|
11
|
+
|
12
|
+
const meta: Meta<StoryCarouselProps> = {
|
13
|
+
title: 'web/Data Display/Carousel',
|
14
|
+
component: Carousel,
|
15
|
+
decorators: [WithTheme],
|
16
|
+
argTypes: {
|
17
|
+
align: {
|
18
|
+
options: ['center', 'start', 'end'],
|
19
|
+
control: {
|
20
|
+
type: 'inline-radio',
|
21
|
+
},
|
22
|
+
},
|
23
|
+
isDragScrollDisabled: {
|
24
|
+
control: 'boolean',
|
25
|
+
},
|
26
|
+
},
|
27
|
+
args: {
|
28
|
+
align: 'center',
|
29
|
+
isDragScrollDisabled: false,
|
30
|
+
},
|
31
|
+
parameters: {
|
32
|
+
controls: {
|
33
|
+
include: ['align', 'isDragScrollDisabled'],
|
34
|
+
},
|
35
|
+
},
|
36
|
+
};
|
37
|
+
|
38
|
+
export default meta;
|
39
|
+
|
40
|
+
const items = Array(25)
|
41
|
+
.fill({
|
42
|
+
title: 'Заголовок',
|
43
|
+
})
|
44
|
+
.map(({ title }, i) => ({
|
45
|
+
id: i,
|
46
|
+
title: `${title} ${i}`,
|
47
|
+
}));
|
48
|
+
|
49
|
+
const StyledCard = styled.div`
|
50
|
+
position: relative;
|
51
|
+
border-radius: 8px;
|
52
|
+
width: 350px;
|
53
|
+
height: 50px;
|
54
|
+
padding: 8px;
|
55
|
+
background-color: #add8e6;
|
56
|
+
`;
|
57
|
+
|
58
|
+
const StoryDefault = ({ align, isDragScrollDisabled }: StoryCarouselProps) => {
|
59
|
+
const [index, setIndex] = React.useState(0);
|
60
|
+
|
61
|
+
return (
|
62
|
+
<Carousel
|
63
|
+
index={index}
|
64
|
+
detectActive
|
65
|
+
onIndexChange={setIndex}
|
66
|
+
scrollAlign={align}
|
67
|
+
isDragScrollDisabled={isDragScrollDisabled}
|
68
|
+
>
|
69
|
+
{items.map((item, i) => (
|
70
|
+
<CarouselItem key={i} style={{ padding: '0 0.5rem' }} scrollSnapAlign={align}>
|
71
|
+
<StyledCard>{item.title}</StyledCard>
|
72
|
+
</CarouselItem>
|
73
|
+
))}
|
74
|
+
</Carousel>
|
75
|
+
);
|
76
|
+
};
|
77
|
+
|
78
|
+
export const Default: StoryObj<StoryCarouselProps> = {
|
79
|
+
render: (args) => <StoryDefault {...args} />,
|
80
|
+
};
|
@@ -13,10 +13,10 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
clear: /*#__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);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"
|
17
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"
|
18
|
-
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);"
|
19
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":var(--text-primary);", ":var(--text-primary);"
|
16
|
+
clear: /*#__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);", ":0rem;", ":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
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-solid-card);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":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.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover),
|
18
|
+
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),
|
19
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":background-color 0.3s ease-in-out;", ":0.125rem;", ":var(--surface-accent);", ":0rem;", ":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.itemMarginLeftFilled, _Tabs.tabsTokens.outlineFocusColor, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
|
20
20
|
},
|
21
21
|
size: {
|
22
22
|
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":1.75rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-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),
|
package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.js
CHANGED
@@ -13,7 +13,7 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
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;", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"
|
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;", ":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.itemSelectedDividerWidth, _Tabs.tabsTokens.itemSelectedDividerHeight, _Tabs.tabsTokens.itemSelectedDividerColor, _Tabs.tabsTokens.itemSelectedDividerColorHover)
|
17
17
|
},
|
18
18
|
size: {
|
19
19
|
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":2rem;", ":0 0.5rem;", ":0 0.375rem;", ":0.5rem 0.625rem;", ":0.625rem;", ":0.25rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Tabs.tabsTokens.itemBorderRadius, _Tabs.tabsTokens.itemWidth, _Tabs.tabsTokens.itemHeight, _Tabs.tabsTokens.itemPadding, _Tabs.tabsTokens.itemPaddingPilled, _Tabs.tabsTokens.itemPaddingOrientationVertical, _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),
|
@@ -816,4 +816,15 @@ Object.keys(_ToastNew).forEach(function (key) {
|
|
816
816
|
return _ToastNew[key];
|
817
817
|
}
|
818
818
|
});
|
819
|
+
});
|
820
|
+
var _Carousel = /*#__PURE__*/require("./components/Carousel");
|
821
|
+
Object.keys(_Carousel).forEach(function (key) {
|
822
|
+
if (key === "default" || key === "__esModule") return;
|
823
|
+
if (key in exports && exports[key] === _Carousel[key]) return;
|
824
|
+
Object.defineProperty(exports, key, {
|
825
|
+
enumerable: true,
|
826
|
+
get: function get() {
|
827
|
+
return _Carousel[key];
|
828
|
+
}
|
829
|
+
});
|
819
830
|
});
|
@@ -0,0 +1,69 @@
|
|
1
|
+
var _excluded = ["index", "scrollSnapType", "scrollAlign", "detectActive", "detectThreshold", "scaleCallback", "scaleResetCallback", "onIndexChange", "paddingStart", "paddingEnd", "children", "ariaLive", "isDragScrollDisabled"];
|
2
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
3
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
4
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
5
|
+
import React, { forwardRef } from 'react';
|
6
|
+
import { useForkRef } from '@salutejs/plasma-core';
|
7
|
+
import { base, CarouselWrapper, CarouselTrack } from "./Carousel.styles";
|
8
|
+
import { useCarousel } from "./useCarousel";
|
9
|
+
import { useDragScroll } from "./useDragScroll";
|
10
|
+
|
11
|
+
/**
|
12
|
+
* Компонент для создания списков с прокруткой.
|
13
|
+
*/
|
14
|
+
export var carouselRoot = function carouselRoot(Root) {
|
15
|
+
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
16
|
+
var _ref$index = _ref.index,
|
17
|
+
index = _ref$index === void 0 ? 0 : _ref$index,
|
18
|
+
_ref$scrollSnapType = _ref.scrollSnapType,
|
19
|
+
scrollSnapType = _ref$scrollSnapType === void 0 ? 'mandatory' : _ref$scrollSnapType,
|
20
|
+
scrollAlign = _ref.scrollAlign,
|
21
|
+
detectActive = _ref.detectActive,
|
22
|
+
detectThreshold = _ref.detectThreshold,
|
23
|
+
scaleCallback = _ref.scaleCallback,
|
24
|
+
scaleResetCallback = _ref.scaleResetCallback,
|
25
|
+
onIndexChange = _ref.onIndexChange,
|
26
|
+
paddingStart = _ref.paddingStart,
|
27
|
+
paddingEnd = _ref.paddingEnd,
|
28
|
+
children = _ref.children,
|
29
|
+
_ref$ariaLive = _ref.ariaLive,
|
30
|
+
ariaLive = _ref$ariaLive === void 0 ? 'off' : _ref$ariaLive,
|
31
|
+
_ref$isDragScrollDisa = _ref.isDragScrollDisabled,
|
32
|
+
isDragScrollDisabled = _ref$isDragScrollDisa === void 0 ? false : _ref$isDragScrollDisa,
|
33
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
34
|
+
var axis = 'x';
|
35
|
+
var _useCarousel = useCarousel({
|
36
|
+
index: index,
|
37
|
+
axis: axis,
|
38
|
+
scrollAlign: scrollAlign,
|
39
|
+
detectActive: detectActive,
|
40
|
+
detectThreshold: detectThreshold,
|
41
|
+
scaleCallback: scaleCallback,
|
42
|
+
scaleResetCallback: scaleResetCallback,
|
43
|
+
onIndexChange: onIndexChange
|
44
|
+
}),
|
45
|
+
scrollRef = _useCarousel.scrollRef,
|
46
|
+
trackRef = _useCarousel.trackRef;
|
47
|
+
var handleRef = useForkRef(scrollRef, ref);
|
48
|
+
useDragScroll(scrollRef, isDragScrollDisabled);
|
49
|
+
return /*#__PURE__*/React.createElement(Root, {
|
50
|
+
index: index
|
51
|
+
}, /*#__PURE__*/React.createElement(CarouselWrapper, _extends({
|
52
|
+
ref: handleRef,
|
53
|
+
scrollSnapType: scrollSnapType
|
54
|
+
}, rest), /*#__PURE__*/React.createElement(CarouselTrack, {
|
55
|
+
ref: trackRef,
|
56
|
+
paddingStart: paddingStart,
|
57
|
+
paddingEnd: paddingEnd,
|
58
|
+
"aria-live": ariaLive
|
59
|
+
}, children)));
|
60
|
+
});
|
61
|
+
};
|
62
|
+
export var carouselConfig = {
|
63
|
+
name: 'Carousel',
|
64
|
+
tag: 'div',
|
65
|
+
layout: carouselRoot,
|
66
|
+
base: base,
|
67
|
+
variations: {},
|
68
|
+
defaults: {}
|
69
|
+
};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { css } from 'styled-components';
|
3
|
+
export var base = /*#__PURE__*/css([""]);
|
4
|
+
|
5
|
+
/**
|
6
|
+
* Компонент применяется, если требуется компенсировать отступы контейнера в сетке.
|
7
|
+
* При обертывании вокруг ``Carousel``, добавляет карусели и ее прокрутке дополнительные отступы.
|
8
|
+
* Стилизованный компонент, обладающий всеми свойствами ``div``.
|
9
|
+
*/
|
10
|
+
export var CarouselGridWrapper = /*#__PURE__*/styled.div.withConfig({
|
11
|
+
componentId: "plasma-new-hope__sc-9g0yg0-0"
|
12
|
+
})(["overflow:hidden;margin-left:calc(var(--plasma-grid-margin) * -1);margin-right:calc(var(--plasma-grid-margin) * -1);"]);
|
13
|
+
export var CarouselWrapper = /*#__PURE__*/styled.div.withConfig({
|
14
|
+
componentId: "plasma-new-hope__sc-9g0yg0-1"
|
15
|
+
})(["position:relative;margin:0;padding:0;list-style:none;::-webkit-scrollbar{display:none;}overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:", ";", " &{scroll-padding:0 var(--plasma-grid-margin);padding-left:var(--plasma-grid-margin);}user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);"], function (_ref) {
|
16
|
+
var scrollSnapType = _ref.scrollSnapType;
|
17
|
+
return "x ".concat(scrollSnapType);
|
18
|
+
}, CarouselGridWrapper);
|
19
|
+
export var CarouselTrack = /*#__PURE__*/styled.div.withConfig({
|
20
|
+
componentId: "plasma-new-hope__sc-9g0yg0-2"
|
21
|
+
})(["display:inline-flex;flex-direction:row;padding-left:", ";padding-right:", ";", " &{padding-right:", ";}"], function (_ref2) {
|
22
|
+
var paddingStart = _ref2.paddingStart;
|
23
|
+
return paddingStart || 0;
|
24
|
+
}, function (_ref3) {
|
25
|
+
var paddingEnd = _ref3.paddingEnd;
|
26
|
+
return paddingEnd || 0;
|
27
|
+
}, CarouselGridWrapper, function (_ref4) {
|
28
|
+
var paddingEnd = _ref4.paddingEnd;
|
29
|
+
return paddingEnd || 'var(--plasma-grid-margin)';
|
30
|
+
});
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
var _excluded = ["scrollSnapAlign", "scrollSnapStop", "children"];
|
2
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
3
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
4
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
5
|
+
import React from 'react';
|
6
|
+
import styled from 'styled-components';
|
7
|
+
var StyledItem = /*#__PURE__*/styled.div.withConfig({
|
8
|
+
componentId: "plasma-new-hope__sc-1h5d6du-0"
|
9
|
+
})(["scroll-snap-align:", ";scroll-snap-stop:", ";"], function (_ref) {
|
10
|
+
var scrollSnapAlign = _ref.scrollSnapAlign;
|
11
|
+
return scrollSnapAlign || 'none';
|
12
|
+
}, function (_ref2) {
|
13
|
+
var scrollSnapAlign = _ref2.scrollSnapAlign,
|
14
|
+
scrollSnapStop = _ref2.scrollSnapStop;
|
15
|
+
return scrollSnapAlign ? scrollSnapStop : 'normal';
|
16
|
+
});
|
17
|
+
export var CarouselItem = function CarouselItem(_ref3) {
|
18
|
+
var _ref3$scrollSnapAlign = _ref3.scrollSnapAlign,
|
19
|
+
scrollSnapAlign = _ref3$scrollSnapAlign === void 0 ? 'center' : _ref3$scrollSnapAlign,
|
20
|
+
_ref3$scrollSnapStop = _ref3.scrollSnapStop,
|
21
|
+
scrollSnapStop = _ref3$scrollSnapStop === void 0 ? 'always' : _ref3$scrollSnapStop,
|
22
|
+
children = _ref3.children,
|
23
|
+
rest = _objectWithoutProperties(_ref3, _excluded);
|
24
|
+
return /*#__PURE__*/React.createElement(StyledItem, _extends({
|
25
|
+
scrollSnapAlign: scrollSnapAlign,
|
26
|
+
scrollSnapStop: scrollSnapStop,
|
27
|
+
role: "group",
|
28
|
+
"aria-roledescription": "slide"
|
29
|
+
}, rest), children);
|
30
|
+
};
|