@salutejs/plasma-new-hope 0.163.1-canary.1476.11274907051.0 → 0.164.0-canary.1452.11274846938.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Slider/Slider.css +15 -13
- package/cjs/components/Slider/Slider.js +11 -3
- package/cjs/components/Slider/Slider.js.map +1 -1
- package/cjs/components/Slider/Slider.tokens.js +17 -5
- package/cjs/components/Slider/Slider.tokens.js.map +1 -1
- package/cjs/components/Slider/components/Double/Double.css +8 -8
- package/cjs/components/Slider/components/Double/Double.js +17 -9
- package/cjs/components/Slider/components/Double/Double.js.map +1 -1
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +77 -0
- package/cjs/components/Slider/components/Single/Single.css +14 -14
- package/cjs/components/Slider/components/Single/Single.js +57 -31
- package/cjs/components/Slider/components/Single/Single.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles.js +4 -4
- package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles_12d5mbj.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +5 -5
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
- package/cjs/components/Slider/ui/Handler/Handler.css +3 -3
- package/cjs/components/Slider/ui/Handler/Handler.js +49 -88
- package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles.js +17 -7
- package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
- package/cjs/components/Slider/ui/Handler/Handler.styles_19zy2jw.css +2 -0
- package/cjs/components/Slider/ui/Handler/computeKeyPressData.js +122 -0
- package/cjs/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
- package/cjs/components/Slider/utils/index.js +28 -10
- package/cjs/components/Slider/utils/index.js.map +1 -1
- package/cjs/components/Slider/variations/_view/base.js +1 -1
- package/cjs/components/Slider/variations/_view/base.js.map +1 -1
- package/cjs/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/cjs/index.css +15 -13
- package/cjs/utils/index.js.map +1 -1
- package/emotion/cjs/components/Slider/Slider.js +10 -2
- package/emotion/cjs/components/Slider/Slider.tokens.js +17 -5
- package/emotion/cjs/components/Slider/components/Double/Double.js +13 -5
- package/emotion/cjs/components/Slider/components/Single/Single.js +57 -31
- package/emotion/cjs/components/Slider/components/Single/Single.styles.js +18 -9
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/emotion/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +10 -10
- package/emotion/cjs/components/Slider/ui/Handler/Handler.js +52 -88
- package/emotion/cjs/components/Slider/ui/Handler/Handler.styles.js +9 -15
- package/emotion/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
- package/emotion/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/emotion/cjs/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
- package/emotion/cjs/components/Slider/utils/index.js +28 -10
- package/emotion/cjs/components/Slider/variations/_view/base.js +2 -1
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/emotion/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +17 -30
- package/emotion/es/components/Slider/Slider.js +11 -2
- package/emotion/es/components/Slider/Slider.tokens.js +17 -5
- package/emotion/es/components/Slider/components/Double/Double.js +13 -5
- package/emotion/es/components/Slider/components/Single/Single.js +58 -32
- package/emotion/es/components/Slider/components/Single/Single.styles.js +17 -8
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/emotion/es/components/Slider/components/SliderBase/SliderBase.styles.js +11 -11
- package/emotion/es/components/Slider/ui/Handler/Handler.js +51 -86
- package/emotion/es/components/Slider/ui/Handler/Handler.styles.js +10 -16
- package/emotion/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
- package/emotion/es/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/emotion/es/components/Slider/ui/Thumb/Thumb.styles.js +3 -3
- package/emotion/es/components/Slider/utils/index.js +28 -10
- package/emotion/es/components/Slider/variations/_view/base.js +2 -1
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/emotion/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/emotion/es/examples/plasma_web/components/Slider/Slider.config.js +7 -7
- package/emotion/es/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +17 -30
- package/es/components/Slider/Slider.css +15 -13
- package/es/components/Slider/Slider.js +11 -3
- package/es/components/Slider/Slider.js.map +1 -1
- package/es/components/Slider/Slider.tokens.js +17 -5
- package/es/components/Slider/Slider.tokens.js.map +1 -1
- package/es/components/Slider/components/Double/Double.css +8 -8
- package/es/components/Slider/components/Double/Double.js +13 -5
- package/es/components/Slider/components/Double/Double.js.map +1 -1
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +77 -0
- package/es/components/Slider/components/Single/Single.css +14 -14
- package/es/components/Slider/components/Single/Single.js +58 -32
- package/es/components/Slider/components/Single/Single.js.map +1 -1
- package/es/components/Slider/components/Single/Single.styles.js +4 -4
- package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
- package/es/components/Slider/components/Single/Single.styles_12d5mbj.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +5 -5
- package/es/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -1
- package/es/components/Slider/components/SliderBase/SliderBase.styles_1qt1224.css +5 -0
- package/es/components/Slider/ui/Handler/Handler.css +3 -3
- package/es/components/Slider/ui/Handler/Handler.js +48 -87
- package/es/components/Slider/ui/Handler/Handler.js.map +1 -1
- package/es/components/Slider/ui/Handler/Handler.styles.js +17 -7
- package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -1
- package/es/components/Slider/ui/Handler/Handler.styles_19zy2jw.css +2 -0
- package/es/components/Slider/ui/Handler/computeKeyPressData.js +118 -0
- package/es/components/Slider/ui/Handler/computeKeyPressData.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.css +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -1
- package/es/components/Slider/ui/Thumb/Thumb.styles_uyn20e.css +1 -0
- package/es/components/Slider/utils/index.js +28 -10
- package/es/components/Slider/utils/index.js.map +1 -1
- package/es/components/Slider/variations/_view/base.js +1 -1
- package/es/components/Slider/variations/_view/base.js.map +1 -1
- package/es/components/Slider/variations/_view/base_1s3f6q8.css +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js.map +1 -1
- package/es/index.css +15 -13
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Slider/Slider.js +10 -2
- package/styled-components/cjs/components/Slider/Slider.tokens.js +17 -5
- package/styled-components/cjs/components/Slider/components/Double/Double.js +13 -5
- package/styled-components/cjs/components/Slider/components/Single/Single.js +57 -31
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +5 -5
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +6 -6
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +52 -88
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +7 -4
- package/styled-components/cjs/components/Slider/ui/Handler/computeKeyPressData.js +121 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
- package/styled-components/cjs/components/Slider/utils/index.js +28 -10
- package/styled-components/cjs/components/Slider/variations/_view/base.js +2 -1
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +3 -3
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +17 -30
- package/styled-components/es/components/Slider/Slider.js +11 -2
- package/styled-components/es/components/Slider/Slider.tokens.js +17 -5
- package/styled-components/es/components/Slider/components/Double/Double.js +13 -5
- package/styled-components/es/components/Slider/components/Single/Single.js +58 -32
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +4 -4
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +27 -12
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +7 -7
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +51 -86
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -5
- package/styled-components/es/components/Slider/ui/Handler/computeKeyPressData.js +115 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +3 -2
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +2 -2
- package/styled-components/es/components/Slider/utils/index.js +28 -10
- package/styled-components/es/components/Slider/variations/_view/base.js +2 -1
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +2 -2
- package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +90 -16
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +16 -29
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +3 -3
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +90 -15
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +17 -30
- package/types/components/Slider/Slider.d.ts.map +1 -1
- package/types/components/Slider/Slider.tokens.d.ts +16 -4
- package/types/components/Slider/Slider.tokens.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.types.d.ts +1 -0
- package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts +1 -1
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Single/Single.types.d.ts +75 -7
- package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -1
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts +6 -2
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts +4 -1
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -1
- package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts +12 -0
- package/types/components/Slider/ui/Handler/computeKeyPressData.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -1
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -1
- package/types/components/Slider/utils/index.d.ts +26 -8
- package/types/components/Slider/utils/index.d.ts.map +1 -1
- package/types/components/Slider/variations/_view/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +80 -2
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +80 -2
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
- package/types/utils/index.d.ts +1 -1
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
- package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
- package/cjs/components/Slider/variations/_view/base_x642ct.css +0 -1
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +0 -6
- package/es/components/Slider/components/SliderBase/SliderBase.styles_9s4eb3.css +0 -5
- package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +0 -2
- package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +0 -1
- package/es/components/Slider/variations/_view/base_x642ct.css +0 -1
@@ -4,14 +4,18 @@ import styled from 'styled-components';
|
|
4
4
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
5
|
import type { StoryObj, Meta } from '@storybook/react';
|
6
6
|
|
7
|
+
import { IconMic } from '../../../../components/_Icon';
|
7
8
|
import { WithTheme } from '../../../_helpers';
|
8
9
|
|
9
10
|
import { Slider } from './Slider';
|
10
11
|
|
11
12
|
const sizes = ['l', 'm', 's'];
|
13
|
+
const pointerSizes = ['small', 'large', 'none'];
|
12
14
|
const views = ['default', 'accent', 'gradient'];
|
13
|
-
const
|
14
|
-
const
|
15
|
+
const sliderAligns = ['center', 'left', 'right', 'none'];
|
16
|
+
const labelPlacements = ['top', 'left'];
|
17
|
+
const scaleAligns = ['side', 'bottom'];
|
18
|
+
const orientations: Array<string> = ['vertical', 'horizontal'];
|
15
19
|
|
16
20
|
const meta: Meta<typeof Slider> = {
|
17
21
|
title: 'plasma_web/Slider',
|
@@ -30,9 +34,24 @@ const meta: Meta<typeof Slider> = {
|
|
30
34
|
type: 'inline-radio',
|
31
35
|
},
|
32
36
|
},
|
37
|
+
pointerSize: {
|
38
|
+
options: pointerSizes,
|
39
|
+
control: {
|
40
|
+
type: 'inline-radio',
|
41
|
+
},
|
42
|
+
},
|
43
|
+
orientation: {
|
44
|
+
options: orientations,
|
45
|
+
control: {
|
46
|
+
type: 'select',
|
47
|
+
},
|
48
|
+
},
|
33
49
|
...disableProps([
|
34
50
|
'value',
|
35
51
|
'onChangeCommitted',
|
52
|
+
'onChangeTextField',
|
53
|
+
'onBlurTextField',
|
54
|
+
'onKeyDownTextField',
|
36
55
|
'ariaLabel',
|
37
56
|
'onChange',
|
38
57
|
'fontSizeMultiplier',
|
@@ -52,8 +71,9 @@ type StorySingleProps = StoryProps;
|
|
52
71
|
type StorySingle = StoryObj<StorySingleProps>;
|
53
72
|
type StoryDouble = StoryObj<StoryProps>;
|
54
73
|
|
55
|
-
const SliderWrapper = styled.div
|
56
|
-
width: 25rem;
|
74
|
+
const SliderWrapper = styled.div<{ isVertical?: boolean }>`
|
75
|
+
width: ${({ isVertical }) => (isVertical ? 'auto' : '25rem')};
|
76
|
+
height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
|
57
77
|
`;
|
58
78
|
|
59
79
|
const StoryDefault = (args: StorySingleProps) => {
|
@@ -67,41 +87,86 @@ const StoryDefault = (args: StorySingleProps) => {
|
|
67
87
|
setValue(values);
|
68
88
|
};
|
69
89
|
|
90
|
+
const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
|
91
|
+
const isVertical = orientation === 'vertical';
|
92
|
+
|
70
93
|
return (
|
71
|
-
<SliderWrapper>
|
72
|
-
<Slider
|
94
|
+
<SliderWrapper isVertical={isVertical}>
|
95
|
+
<Slider
|
96
|
+
value={value}
|
97
|
+
orientation={orientation}
|
98
|
+
labelPlacement={labelPlacement}
|
99
|
+
labelContent={showIcon ? <IconMic size={rest.size === 's' ? 'xs' : 's'} /> : null}
|
100
|
+
onChangeCommitted={onChangeCommittedHandle}
|
101
|
+
onChange={onChangeHandle}
|
102
|
+
{...rest}
|
103
|
+
/>
|
73
104
|
</SliderWrapper>
|
74
105
|
);
|
75
106
|
};
|
76
107
|
|
77
108
|
export const Default: StorySingle = {
|
78
109
|
argTypes: {
|
110
|
+
sliderAlign: {
|
111
|
+
options: sliderAligns,
|
112
|
+
control: {
|
113
|
+
type: 'inline-radio',
|
114
|
+
},
|
115
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
116
|
+
},
|
79
117
|
labelPlacement: {
|
80
118
|
options: labelPlacements,
|
81
119
|
control: {
|
82
120
|
type: 'inline-radio',
|
83
121
|
},
|
122
|
+
if: { arg: 'orientation', eq: 'horizontal' },
|
123
|
+
},
|
124
|
+
labelReversed: {
|
125
|
+
control: {
|
126
|
+
type: 'boolean',
|
127
|
+
expanded: true,
|
128
|
+
},
|
129
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
130
|
+
},
|
131
|
+
scaleAlign: {
|
132
|
+
options: scaleAligns,
|
133
|
+
control: {
|
134
|
+
type: 'inline-radio',
|
135
|
+
},
|
136
|
+
if: { arg: 'orientation', eq: 'horizontal' },
|
84
137
|
},
|
85
|
-
|
86
|
-
options:
|
138
|
+
orientation: {
|
139
|
+
options: orientations,
|
87
140
|
control: {
|
88
141
|
type: 'inline-radio',
|
89
142
|
},
|
90
143
|
},
|
144
|
+
reversed: {
|
145
|
+
control: {
|
146
|
+
type: 'boolean',
|
147
|
+
},
|
148
|
+
if: { arg: 'orientation', eq: 'vertical' },
|
149
|
+
},
|
91
150
|
},
|
92
151
|
args: {
|
93
152
|
view: 'default',
|
94
153
|
size: 'm',
|
154
|
+
pointerSize: 'small',
|
95
155
|
min: 0,
|
96
156
|
max: 100,
|
97
|
-
|
98
|
-
ariaLabel: 'Цена
|
157
|
+
orientation: 'horizontal',
|
158
|
+
ariaLabel: 'Цена микрофона',
|
99
159
|
multipleStepSize: 10,
|
100
|
-
label: 'Цена
|
101
|
-
labelPlacement: '
|
102
|
-
|
103
|
-
|
160
|
+
label: 'Цена микрофона',
|
161
|
+
labelPlacement: 'top',
|
162
|
+
sliderAlign: 'center',
|
163
|
+
scaleAlign: 'bottom',
|
164
|
+
showScale: true,
|
104
165
|
showCurrentValue: false,
|
166
|
+
showIcon: true,
|
167
|
+
reversed: false,
|
168
|
+
labelReversed: false,
|
169
|
+
disabled: false,
|
105
170
|
},
|
106
171
|
render: (args) => <StoryDefault {...args} />,
|
107
172
|
};
|
@@ -141,7 +206,7 @@ const StoryMultipleValues = (args: StoryProps) => {
|
|
141
206
|
};
|
142
207
|
|
143
208
|
return (
|
144
|
-
<SliderWrapper>
|
209
|
+
<SliderWrapper isVertical={args.orientation === 'vertical'}>
|
145
210
|
<Slider
|
146
211
|
value={value}
|
147
212
|
onKeyDownTextField={onKeyDownTextField}
|
@@ -158,6 +223,7 @@ export const MultipleValues: StoryDouble = {
|
|
158
223
|
args: {
|
159
224
|
view: 'default',
|
160
225
|
size: 'm',
|
226
|
+
pointerSize: 'small',
|
161
227
|
min: 0,
|
162
228
|
max: 100,
|
163
229
|
disabled: false,
|
@@ -165,5 +231,14 @@ export const MultipleValues: StoryDouble = {
|
|
165
231
|
ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
|
166
232
|
multipleStepSize: 10,
|
167
233
|
},
|
234
|
+
argTypes: {
|
235
|
+
pointerSize: {
|
236
|
+
options: ['small', 'large'],
|
237
|
+
control: {
|
238
|
+
type: 'inline-radio',
|
239
|
+
},
|
240
|
+
},
|
241
|
+
...disableProps(['orientation']),
|
242
|
+
},
|
168
243
|
render: (args) => <StoryMultipleValues {...args} />,
|
169
244
|
};
|
@@ -50,11 +50,9 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
50
50
|
};
|
51
51
|
|
52
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
53
|
-
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
54
|
-
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
55
53
|
|
56
54
|
const meta: Meta<StoryTabsProps> = {
|
57
|
-
title: '
|
55
|
+
title: 'plasma_web/Tabs',
|
58
56
|
component: Tabs,
|
59
57
|
decorators: [WithTheme],
|
60
58
|
argTypes: {
|
@@ -81,7 +79,7 @@ const meta: Meta<StoryTabsProps> = {
|
|
81
79
|
|
82
80
|
export default meta;
|
83
81
|
|
84
|
-
const StoryHorizontalDefault = (props:
|
82
|
+
const StoryHorizontalDefault = (props: StoryTabsProps) => {
|
85
83
|
const {
|
86
84
|
disabled,
|
87
85
|
itemQuantity,
|
@@ -136,7 +134,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
|
|
136
134
|
);
|
137
135
|
};
|
138
136
|
|
139
|
-
const StoryHorizontalScroll = (props:
|
137
|
+
const StoryHorizontalScroll = (props: StoryTabsProps) => {
|
140
138
|
const {
|
141
139
|
disabled,
|
142
140
|
itemQuantity,
|
@@ -146,13 +144,18 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
146
144
|
contentRight: contentRightOption,
|
147
145
|
hasDivider,
|
148
146
|
helperText,
|
149
|
-
width,
|
150
147
|
} = props;
|
151
148
|
const items = Array(itemQuantity).fill(0);
|
152
149
|
const [index, setIndex] = useState(0);
|
153
150
|
|
154
151
|
return (
|
155
|
-
<Tabs
|
152
|
+
<Tabs
|
153
|
+
clip={clip}
|
154
|
+
view={hasDivider ? 'divider' : 'clear'}
|
155
|
+
disabled={disabled}
|
156
|
+
size={size}
|
157
|
+
style={{ width: '15rem' }}
|
158
|
+
>
|
156
159
|
{items.map((_, i) => {
|
157
160
|
if (helperText !== '') {
|
158
161
|
return (
|
@@ -192,7 +195,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
|
|
192
195
|
);
|
193
196
|
};
|
194
197
|
|
195
|
-
const StoryHorizontalShowAll = (props:
|
198
|
+
const StoryHorizontalShowAll = (props: StoryTabsProps) => {
|
196
199
|
const {
|
197
200
|
disabled,
|
198
201
|
itemQuantity,
|
@@ -279,15 +282,13 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
|
|
279
282
|
);
|
280
283
|
};
|
281
284
|
|
282
|
-
export const HorizontalTabs: StoryObj<
|
285
|
+
export const HorizontalTabs: StoryObj<StoryTabsProps> = {
|
283
286
|
args: {
|
284
287
|
size: 'xs',
|
285
288
|
disabled: false,
|
286
289
|
hasDivider: true,
|
287
290
|
helperText: '',
|
288
291
|
itemQuantity: 8,
|
289
|
-
stretch: false,
|
290
|
-
width: '15rem',
|
291
292
|
},
|
292
293
|
argTypes: {
|
293
294
|
contentLeft: {
|
@@ -309,12 +310,6 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
309
310
|
},
|
310
311
|
if: { arg: 'stretch', truthy: false },
|
311
312
|
},
|
312
|
-
width: {
|
313
|
-
control: {
|
314
|
-
type: 'text',
|
315
|
-
},
|
316
|
-
if: { arg: 'clip', eq: 'scroll' },
|
317
|
-
},
|
318
313
|
size: {
|
319
314
|
options: sizes,
|
320
315
|
control: {
|
@@ -334,7 +329,7 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
|
|
334
329
|
},
|
335
330
|
};
|
336
331
|
|
337
|
-
const StoryVerticalDefault = (props:
|
332
|
+
const StoryVerticalDefault = (props: StoryTabsProps) => {
|
338
333
|
const {
|
339
334
|
disabled,
|
340
335
|
itemQuantity,
|
@@ -390,7 +385,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
|
|
390
385
|
);
|
391
386
|
};
|
392
387
|
|
393
|
-
const StoryVerticalScroll = (props:
|
388
|
+
const StoryVerticalScroll = (props: StoryTabsProps) => {
|
394
389
|
const {
|
395
390
|
disabled,
|
396
391
|
itemQuantity,
|
@@ -400,7 +395,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
400
395
|
contentRight: contentRightOption,
|
401
396
|
hasDivider,
|
402
397
|
helperText,
|
403
|
-
height,
|
404
398
|
} = props;
|
405
399
|
const items = Array(itemQuantity).fill(0);
|
406
400
|
const [index, setIndex] = useState(0);
|
@@ -411,8 +405,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
411
405
|
size={size as Size}
|
412
406
|
disabled={disabled}
|
413
407
|
clip={clip}
|
408
|
+
style={{ height: '10rem' }}
|
414
409
|
hasDivider={hasDivider}
|
415
|
-
style={{ height }}
|
416
410
|
>
|
417
411
|
{items.map((_, i) => {
|
418
412
|
if (helperText !== '') {
|
@@ -455,7 +449,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
|
|
455
449
|
);
|
456
450
|
};
|
457
451
|
|
458
|
-
const StoryVerticalShowAll = (props:
|
452
|
+
const StoryVerticalShowAll = (props: StoryTabsProps) => {
|
459
453
|
const {
|
460
454
|
disabled,
|
461
455
|
itemQuantity,
|
@@ -543,7 +537,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
|
|
543
537
|
);
|
544
538
|
};
|
545
539
|
|
546
|
-
export const VerticalTabs: StoryObj<
|
540
|
+
export const VerticalTabs: StoryObj<StoryTabsProps> = {
|
547
541
|
args: {
|
548
542
|
size: 'xs',
|
549
543
|
disabled: false,
|
@@ -551,7 +545,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
551
545
|
itemQuantity: 8,
|
552
546
|
orientation: 'vertical',
|
553
547
|
helperText: '',
|
554
|
-
height: '10rem',
|
555
548
|
},
|
556
549
|
argTypes: {
|
557
550
|
contentLeft: {
|
@@ -584,12 +577,6 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
584
577
|
disable: true,
|
585
578
|
},
|
586
579
|
},
|
587
|
-
height: {
|
588
|
-
control: {
|
589
|
-
type: 'text',
|
590
|
-
},
|
591
|
-
if: { arg: 'clip', eq: 'scroll' },
|
592
|
-
},
|
593
580
|
},
|
594
581
|
render: (args) => {
|
595
582
|
switch (args.clip) {
|
@@ -4,10 +4,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
5
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
6
6
|
import React, { forwardRef } from 'react';
|
7
|
+
import { cx } from '../../utils';
|
7
8
|
import { base as viewCSS } from './variations/_view/base';
|
8
9
|
import { base as sizeCSS } from './variations/_size/base';
|
9
10
|
import { base as disabledCSS } from './variations/_disabled/base';
|
10
11
|
import { SingleSlider, DoubleUncontrolled } from './components';
|
12
|
+
import { classes } from './Slider.tokens';
|
13
|
+
|
11
14
|
// TODO: проверить, можно ли обойтись без каста типов
|
12
15
|
|
13
16
|
var isSingleValueProps = function isSingleValueProps(props, type) {
|
@@ -21,9 +24,15 @@ export var sliderRoot = function sliderRoot(Root) {
|
|
21
24
|
var _ref$type = _ref.type,
|
22
25
|
type = _ref$type === void 0 ? 'single' : _ref$type,
|
23
26
|
props = _objectWithoutProperties(_ref, _excluded);
|
24
|
-
|
27
|
+
if (isSingleValueProps(props, type)) {
|
28
|
+
return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
|
29
|
+
className: cx(props.orientation === 'vertical' && classes.verticalOrientation, props.className),
|
30
|
+
ref: ref
|
31
|
+
}), /*#__PURE__*/React.createElement(SingleSlider, props));
|
32
|
+
}
|
33
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
25
34
|
ref: ref
|
26
|
-
}
|
35
|
+
}, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
|
27
36
|
});
|
28
37
|
};
|
29
38
|
export var sliderConfig = {
|
@@ -1,6 +1,12 @@
|
|
1
1
|
export var classes = {
|
2
2
|
labelPlacementOuter: 'slider-label-placement-outer',
|
3
3
|
labelPlacementInner: 'slider-label-placement-inner',
|
4
|
+
labelPlacementBottom: 'slider-label-placement-bottom',
|
5
|
+
labelAlignLeft: 'slider-label-align-left',
|
6
|
+
labelAlignCenter: 'slider-label-align-center',
|
7
|
+
labelAlignRight: 'slider-label-align-right',
|
8
|
+
labelAlignNone: 'slider-label-align-none',
|
9
|
+
labelContentReversed: 'slider-label-content-reversed',
|
4
10
|
rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
|
5
11
|
rangeValuesPlacementInner: 'slider-range-values-placement-inner',
|
6
12
|
maxRangeValue: 'slider-max-range-value',
|
@@ -9,13 +15,17 @@ export var classes = {
|
|
9
15
|
textFieldActive: 'slider-text-field-active',
|
10
16
|
firstTextField: 'slider-first-text-field',
|
11
17
|
secondTextField: 'slider-second-text-field',
|
12
|
-
activeRangeValue: 'slider-active-range-value'
|
18
|
+
activeRangeValue: 'slider-active-range-value',
|
19
|
+
verticalOrientation: 'slider-vertical-orientation',
|
20
|
+
valuePlacementLeft: 'slider-value-placement-left',
|
21
|
+
reversed: 'slider-reversed'
|
13
22
|
};
|
14
23
|
export var tokens = {
|
15
|
-
|
24
|
+
size: '--plasma-slider-size',
|
16
25
|
labelWrapperGap: '--plasma-slider-label-wrapper-gap',
|
17
26
|
labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
|
18
27
|
labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
|
28
|
+
labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',
|
19
29
|
labelColor: '--plasma-slider-label-color',
|
20
30
|
labelFontFamily: '--plasma-slider-label-font-family',
|
21
31
|
labelFontSize: '--plasma-slider-label-font-size',
|
@@ -23,9 +33,10 @@ export var tokens = {
|
|
23
33
|
labelFontWeight: '--plasma-slider-label-font-weight',
|
24
34
|
labelLetterSpacing: '--plasma-slider-label-letter-spacing',
|
25
35
|
labelLineHeight: '--plasma-slider-label-line-height',
|
26
|
-
rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
|
27
|
-
rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
|
28
36
|
rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
|
37
|
+
rangeValueHorizontalMargin: '--plasma-slider-range-value-horizontal-margin',
|
38
|
+
rangeValueLeftRightMargin: '--plasma-slider-range-value-left-right-margin',
|
39
|
+
rangeValueVerticalMargin: '--plasma-slider-range-value-vertical-margin',
|
29
40
|
rangeValueColor: '--plasma-slider-range-value-color',
|
30
41
|
rangeValueFontFamily: '--plasma-slider-range-value-font-family',
|
31
42
|
rangeValueFontSize: '--plasma-slider-range-value-font-size',
|
@@ -35,6 +46,7 @@ export var tokens = {
|
|
35
46
|
rangeValueLineHeight: '--plasma-slider-range-value-line-height',
|
36
47
|
doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
|
37
48
|
thumbSize: '--plasma-slider-thumb-size',
|
49
|
+
thumbSizeLarge: '--plasma-slider-thumb-size-large',
|
38
50
|
thumbBorder: '--plasma-slider-thumb-border',
|
39
51
|
thumbBorderColor: '--plasma-slider-thumb-border-color',
|
40
52
|
thumbBackgroundColor: '--plasma-slider-thumb-background-color',
|
@@ -47,7 +59,7 @@ export var tokens = {
|
|
47
59
|
currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
|
48
60
|
currentValueLineHeight: '--plasma-slider-current-value-line-height',
|
49
61
|
railBackgroundColor: '--plasma-slider-rail-background-color',
|
50
|
-
|
62
|
+
railThickness: '--plasma-slider-rail-thickness',
|
51
63
|
railBorderRadius: '--plasma-slider-rail-border-radius',
|
52
64
|
railIndent: '--plasma-slider-rail-indent',
|
53
65
|
fillColor: '--plasma-slider-fill-color',
|
@@ -1,5 +1,5 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
-
var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
|
2
|
+
var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
@@ -38,6 +38,8 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
38
38
|
labelContentLeft = _ref.labelContentLeft,
|
39
39
|
_ref$size = _ref.size,
|
40
40
|
size = _ref$size === void 0 ? 'm' : _ref$size,
|
41
|
+
_ref$pointerSize = _ref.pointerSize,
|
42
|
+
pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
|
41
43
|
onChangeCommitted = _ref.onChangeCommitted,
|
42
44
|
onChangeTextField = _ref.onChangeTextField,
|
43
45
|
onBlurTextField = _ref.onBlurTextField,
|
@@ -243,16 +245,19 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
243
245
|
ariaLabelLeft = _ref3[0],
|
244
246
|
ariaLabelRight = _ref3[1];
|
245
247
|
var currentFirstSliderValue = Math.max(state.firstValue, min);
|
248
|
+
var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
|
246
249
|
return /*#__PURE__*/React.createElement(DoubleWrapper, null, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderWrapper, null, /*#__PURE__*/React.createElement(SliderBase, _extends({
|
247
250
|
min: min,
|
248
251
|
max: max,
|
249
252
|
disabled: disabled,
|
250
253
|
setStepSize: setStepSize,
|
251
254
|
railFillWidth: state.railFillWidth,
|
252
|
-
settings:
|
253
|
-
railFillXPosition: state.railFillXPosition
|
255
|
+
settings: settings,
|
256
|
+
railFillXPosition: state.railFillXPosition,
|
257
|
+
orientation: "horizontal"
|
254
258
|
}, rest), /*#__PURE__*/React.createElement(Handler, {
|
255
259
|
ref: firstHandleRef,
|
260
|
+
size: pointerSize,
|
256
261
|
stepSize: state.stepSize,
|
257
262
|
multipleStepSize: multipleStepSize,
|
258
263
|
onChangeCommitted: onFirstHandleChangeCommitted,
|
@@ -262,7 +267,8 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
262
267
|
disabled: disabled,
|
263
268
|
bounds: [min, state.secondValue],
|
264
269
|
side: "left",
|
265
|
-
|
270
|
+
orientation: "horizontal",
|
271
|
+
position: state.xFirstHandle,
|
266
272
|
zIndex: state.firstHandleZIndex,
|
267
273
|
value: currentFirstSliderValue,
|
268
274
|
ariaLabel: ariaLabelLeft,
|
@@ -274,6 +280,7 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
274
280
|
}
|
275
281
|
}), /*#__PURE__*/React.createElement(Handler, {
|
276
282
|
ref: secondHandleRef,
|
283
|
+
size: pointerSize,
|
277
284
|
stepSize: state.stepSize,
|
278
285
|
multipleStepSize: multipleStepSize,
|
279
286
|
onChangeCommitted: onSecondHandleChangeCommitted,
|
@@ -284,7 +291,8 @@ export var DoubleSlider = function DoubleSlider(_ref) {
|
|
284
291
|
disabled: disabled,
|
285
292
|
bounds: [state.firstValue, max],
|
286
293
|
side: "right",
|
287
|
-
|
294
|
+
orientation: "horizontal",
|
295
|
+
position: state.xSecondHandle,
|
288
296
|
zIndex: state.secondHandleZIndex,
|
289
297
|
value: Math.max(state.secondValue, min),
|
290
298
|
ariaLabel: ariaLabelRight,
|