@itcase/ui 1.8.32 → 1.8.34
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/dist/{DatePicker_cjs_BYh1Dsto.js → DatePicker_cjs_C-VbK2J4.js} +9 -9
- package/dist/{DatePicker_es_DEAcYDTL.js → DatePicker_es_CIEHQyHC.js} +9 -9
- package/dist/{Input_cjs_BAVggtkk.js → Input_cjs_arr_wxD2.js} +21 -20
- package/dist/{Input_es_CNduH28G.js → Input_es_BW6cZThr.js} +21 -20
- package/dist/{Label_cjs_CZMMdwt5.js → Label_cjs_BWbVsB-u.js} +3 -3
- package/dist/{Label_es_DmDqs4Rc.js → Label_es_ouC2i_iI.js} +3 -3
- package/dist/cjs/components/Breadcrumbs/stories/__mock__.js +7 -15
- package/dist/cjs/components/Cell.js +1 -1
- package/dist/cjs/components/Choice/stories/__mock__.js +15 -15
- package/dist/cjs/components/Choice.js +33 -28
- package/dist/cjs/components/Code.js +31 -42
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +3 -3
- package/dist/cjs/components/DatePicker.js +3 -3
- package/dist/cjs/components/Dropdown/stories/__mock__.js +2 -2
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/Label.js +1 -1
- package/dist/cjs/components/MenuItem.js +14 -7
- package/dist/cjs/components/Notification/stories/__mock__.js +4 -0
- package/dist/cjs/components/Notification.js +27 -9
- package/dist/cjs/components/Pagination.js +101 -20
- package/dist/cjs/components/Search.js +15 -14
- package/dist/cjs/components/Segmented/stories/__mock__.js +38 -0
- package/dist/cjs/components/Segmented.js +13 -10
- package/dist/cjs/components/Tab/stories/__mock__.js +6 -1
- package/dist/cjs/context/Notifications.js +6 -6
- package/dist/components/Breadcrumbs/stories/__mock__.js +7 -15
- package/dist/components/Cell.js +1 -1
- package/dist/components/Choice/stories/__mock__.js +16 -16
- package/dist/components/Choice.js +33 -28
- package/dist/components/Code.js +31 -42
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +3 -3
- package/dist/components/DatePicker.js +3 -3
- package/dist/components/Dropdown/stories/__mock__.js +2 -2
- package/dist/components/Input.js +1 -1
- package/dist/components/Label.js +1 -1
- package/dist/components/MenuItem.js +14 -7
- package/dist/components/Notification/stories/__mock__.js +4 -0
- package/dist/components/Notification.js +27 -9
- package/dist/components/Pagination.js +103 -22
- package/dist/components/Search.js +15 -14
- package/dist/components/Segmented/stories/__mock__.js +36 -0
- package/dist/components/Segmented.js +13 -10
- package/dist/components/Tab/stories/__mock__.js +6 -1
- package/dist/context/Notifications.js +6 -6
- package/dist/css/components/Input/Input.css +6 -0
- package/dist/css/components/Notification/Notification.css +23 -0
- package/dist/css/components/Pagination/Pagination.css +19 -6
- package/dist/css/components/Search/Search.css +0 -1
- package/dist/css/components/Search/css/search-input/search-input.css +0 -1
- package/dist/css/components/Segmented/Segmented.css +24 -0
- package/dist/css/components/Tab/Tab.css +4 -0
- package/dist/css/styles/border-color/border-color_hover.css +3 -0
- package/dist/stories/CellOverview.mdx +3 -2
- package/dist/stories/DatePeriodPlayground.mdx +2 -2
- package/dist/stories/RangeSliderOverview.mdx +0 -3
- package/dist/stories/VideoOverview.mdx +2 -10
- package/dist/stories/VideoPlayground.mdx +2 -2
- package/dist/types/components/Breadcrumbs/stories/__mock__/index.d.ts +1 -0
- package/dist/types/components/Choice/appearance/choiceDefault.d.ts +7 -0
- package/dist/types/components/Choice/appearance/choiceDisabled.d.ts +7 -0
- package/dist/types/components/Choice/appearance/choiceRequire.d.ts +6 -0
- package/dist/types/components/Choice/appearance/choiceStyle.d.ts +4 -0
- package/dist/types/components/Choice/appearance/choiceSuccess.d.ts +6 -0
- package/dist/types/components/Choice/stories/__mock__/index.d.ts +9 -3
- package/dist/types/components/Code/appearance/codeDisabled.d.ts +7 -11
- package/dist/types/components/Code/appearance/codeRequire.d.ts +7 -15
- package/dist/types/components/Code/appearance/codeStyle.d.ts +9 -9
- package/dist/types/components/Code/appearance/codeSuccess.d.ts +8 -7
- package/dist/types/components/DatePicker/DatePicker.appearance.d.ts +1 -1
- package/dist/types/components/DatePicker/appearance/datePickerStyle.d.ts +1 -1
- package/dist/types/components/Input/appearance/inputDefault.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputDisabled.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputError.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputRequire.d.ts +2 -2
- package/dist/types/components/Input/appearance/inputStyle.d.ts +7 -6
- package/dist/types/components/Input/appearance/inputSuccess.d.ts +2 -2
- package/dist/types/components/Label/appearance/labelInfo.d.ts +1 -1
- package/dist/types/components/MenuItem/appearance/menuItemAccent.d.ts +1 -0
- package/dist/types/components/MenuItem/appearance/menuItemError.d.ts +1 -0
- package/dist/types/components/MenuItem/appearance/menuItemStyle.d.ts +6 -4
- package/dist/types/components/MenuItem/appearance/menuItemSurface.d.ts +3 -0
- package/dist/types/components/Notification/appearance/notificationInfo.d.ts +17 -0
- package/dist/types/components/Notification/appearance/notificationStyle.d.ts +4 -4
- package/dist/types/components/Notification/stories/__mock__/index.d.ts +1 -0
- package/dist/types/components/Pagination/appearance/paginationAccent.d.ts +21 -0
- package/dist/types/components/Pagination/appearance/paginationSize.d.ts +57 -0
- package/dist/types/components/Pagination/appearance/paginationStyle.d.ts +14 -0
- package/dist/types/components/Pagination/appearance/paginationSurface.d.ts +2 -15
- package/dist/types/components/Search/appearance/searchDefault.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchDisabled.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchError.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchRequire.d.ts +1 -1
- package/dist/types/components/Search/appearance/searchStyle.d.ts +8 -7
- package/dist/types/components/Search/appearance/searchSuccess.d.ts +1 -1
- package/dist/types/components/Segmented/Segmented.interface.d.ts +1 -0
- package/dist/types/components/Segmented/appearance/segmentedSuccess.d.ts +1 -1
- package/dist/types/components/Segmented/stories/__mock__/index.d.ts +17 -0
- package/package.json +5 -5
- package/dist/types/components/Choice/appearance/choiceSurface.d.ts +0 -25
|
@@ -10,8 +10,8 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
|
|
|
10
10
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
11
11
|
var Button = require('./Button_cjs_CW6ENTbm.js');
|
|
12
12
|
var Tooltip = require('./Tooltip_cjs_DinScDnC.js');
|
|
13
|
-
var Input = require('./
|
|
14
|
-
var Label = require('./
|
|
13
|
+
var Input = require('./Input_cjs_arr_wxD2.js');
|
|
14
|
+
var Label = require('./Label_cjs_BWbVsB-u.js');
|
|
15
15
|
var Text = require('./Text_cjs_C9fOm0nd.js');
|
|
16
16
|
var _default = require('@itcase/icons/default');
|
|
17
17
|
|
|
@@ -21,16 +21,16 @@ var datePickerSize = {
|
|
|
21
21
|
daySize: 'xs',
|
|
22
22
|
dayTextSize: 'm',
|
|
23
23
|
iconFillSize: 24,
|
|
24
|
-
iconLeft: _default.icons14.Arrow.
|
|
25
|
-
iconRight: _default.icons14.Arrow.
|
|
24
|
+
iconLeft: _default.icons14.Arrow.ChevronLeft,
|
|
25
|
+
iconRight: _default.icons14.Arrow.ChevronRight,
|
|
26
26
|
},
|
|
27
27
|
sizeM: {
|
|
28
28
|
size: 'm',
|
|
29
29
|
daySize: 'xxl',
|
|
30
30
|
dayTextSize: 'm',
|
|
31
31
|
iconFillSize: 24,
|
|
32
|
-
iconLeft: _default.icons14.Arrow.
|
|
33
|
-
iconRight: _default.icons14.Arrow.
|
|
32
|
+
iconLeft: _default.icons14.Arrow.ChevronLeft,
|
|
33
|
+
iconRight: _default.icons14.Arrow.ChevronRight,
|
|
34
34
|
iconSize: 14,
|
|
35
35
|
monthTextSize: 'm',
|
|
36
36
|
yearTextSize: 'm',
|
|
@@ -40,8 +40,8 @@ var datePickerSize = {
|
|
|
40
40
|
daySize: 'xs',
|
|
41
41
|
dayTextSize: 'm',
|
|
42
42
|
iconFillSize: 24,
|
|
43
|
-
iconLeft: _default.icons14.Arrow.
|
|
44
|
-
iconRight: _default.icons14.Arrow.
|
|
43
|
+
iconLeft: _default.icons14.Arrow.ChevronLeft,
|
|
44
|
+
iconRight: _default.icons14.Arrow.ChevronRight,
|
|
45
45
|
},
|
|
46
46
|
};
|
|
47
47
|
|
|
@@ -56,13 +56,13 @@ var datePickerStyle = {
|
|
|
56
56
|
fill: 'none',
|
|
57
57
|
},
|
|
58
58
|
},
|
|
59
|
+
full: {},
|
|
59
60
|
ghost: {
|
|
60
61
|
inputProps: {
|
|
61
62
|
fill: 'none',
|
|
62
63
|
borderColor: 'none',
|
|
63
64
|
},
|
|
64
65
|
},
|
|
65
|
-
full: {},
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
var datePickerAppearanceSurface = {
|
|
@@ -8,8 +8,8 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
|
|
|
8
8
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
9
9
|
import { B as Button } from './Button_es_DTUagqgU.js';
|
|
10
10
|
import { I as Icon } from './Tooltip_es_B0nm9irO.js';
|
|
11
|
-
import { I as Input } from './
|
|
12
|
-
import { L as Label } from './
|
|
11
|
+
import { I as Input } from './Input_es_BW6cZThr.js';
|
|
12
|
+
import { L as Label } from './Label_es_ouC2i_iI.js';
|
|
13
13
|
import { T as Text } from './Text_es_BfLRfj-5.js';
|
|
14
14
|
import { icons14 } from '@itcase/icons/default';
|
|
15
15
|
|
|
@@ -19,16 +19,16 @@ var datePickerSize = {
|
|
|
19
19
|
daySize: 'xs',
|
|
20
20
|
dayTextSize: 'm',
|
|
21
21
|
iconFillSize: 24,
|
|
22
|
-
iconLeft: icons14.Arrow.
|
|
23
|
-
iconRight: icons14.Arrow.
|
|
22
|
+
iconLeft: icons14.Arrow.ChevronLeft,
|
|
23
|
+
iconRight: icons14.Arrow.ChevronRight,
|
|
24
24
|
},
|
|
25
25
|
sizeM: {
|
|
26
26
|
size: 'm',
|
|
27
27
|
daySize: 'xxl',
|
|
28
28
|
dayTextSize: 'm',
|
|
29
29
|
iconFillSize: 24,
|
|
30
|
-
iconLeft: icons14.Arrow.
|
|
31
|
-
iconRight: icons14.Arrow.
|
|
30
|
+
iconLeft: icons14.Arrow.ChevronLeft,
|
|
31
|
+
iconRight: icons14.Arrow.ChevronRight,
|
|
32
32
|
iconSize: 14,
|
|
33
33
|
monthTextSize: 'm',
|
|
34
34
|
yearTextSize: 'm',
|
|
@@ -38,8 +38,8 @@ var datePickerSize = {
|
|
|
38
38
|
daySize: 'xs',
|
|
39
39
|
dayTextSize: 'm',
|
|
40
40
|
iconFillSize: 24,
|
|
41
|
-
iconLeft: icons14.Arrow.
|
|
42
|
-
iconRight: icons14.Arrow.
|
|
41
|
+
iconLeft: icons14.Arrow.ChevronLeft,
|
|
42
|
+
iconRight: icons14.Arrow.ChevronRight,
|
|
43
43
|
},
|
|
44
44
|
};
|
|
45
45
|
|
|
@@ -54,13 +54,13 @@ var datePickerStyle = {
|
|
|
54
54
|
fill: 'none',
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
|
+
full: {},
|
|
57
58
|
ghost: {
|
|
58
59
|
inputProps: {
|
|
59
60
|
fill: 'none',
|
|
60
61
|
borderColor: 'none',
|
|
61
62
|
},
|
|
62
63
|
},
|
|
63
|
-
full: {},
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
var datePickerAppearanceSurface = {
|
|
@@ -10,7 +10,7 @@ var inputAppearanceDefault = {
|
|
|
10
10
|
defaultPrimary: {
|
|
11
11
|
fill: 'surfaceSecondary',
|
|
12
12
|
borderColor: 'surfaceBorderTertiary',
|
|
13
|
-
|
|
13
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
14
14
|
textColor: 'surfaceTextPrimary',
|
|
15
15
|
textColorDisabled: 'surfaceTextDisabled',
|
|
16
16
|
caret: 'secondaryItemSecondary',
|
|
@@ -20,7 +20,7 @@ var inputAppearanceDefault = {
|
|
|
20
20
|
defaultSecondary: {
|
|
21
21
|
fill: 'surfacePrimary',
|
|
22
22
|
borderColor: 'surfaceBorderTertiary',
|
|
23
|
-
|
|
23
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
24
24
|
textColor: 'surfaceTextPrimary',
|
|
25
25
|
textColorDisabled: 'surfaceTextDisabled',
|
|
26
26
|
caret: 'secondaryItemSecondary',
|
|
@@ -34,7 +34,7 @@ var inputAppearanceDisabled = {
|
|
|
34
34
|
disabledPrimary: {
|
|
35
35
|
fill: 'surfaceFillDisabled',
|
|
36
36
|
borderColor: 'errorBorderQuaternary',
|
|
37
|
-
|
|
37
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
38
38
|
textColor: 'surfaceTextQuaternary',
|
|
39
39
|
iconBeforeFill: 'errorItemQuaternary',
|
|
40
40
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -43,7 +43,7 @@ var inputAppearanceDisabled = {
|
|
|
43
43
|
disabledSecondary: {
|
|
44
44
|
fill: 'surfaceSecondary',
|
|
45
45
|
borderColor: 'surfaceBorderTertiary',
|
|
46
|
-
|
|
46
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
47
47
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
48
48
|
iconClearFill: 'surfaceItemPrimary',
|
|
49
49
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -54,7 +54,7 @@ var inputAppearanceError = {
|
|
|
54
54
|
errorPrimary: {
|
|
55
55
|
fill: 'errorTertiary',
|
|
56
56
|
borderColor: 'errorBorderQuaternary',
|
|
57
|
-
|
|
57
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
58
58
|
textColor: 'surfaceTextPrimary',
|
|
59
59
|
iconBeforeFill: 'errorItemQuaternary',
|
|
60
60
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -63,7 +63,7 @@ var inputAppearanceError = {
|
|
|
63
63
|
errorSecondary: {
|
|
64
64
|
fill: 'errorSecondary',
|
|
65
65
|
borderColor: 'errorBorderTertiary',
|
|
66
|
-
|
|
66
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
67
67
|
iconBeforeFill: 'errorItemQuaternary',
|
|
68
68
|
iconClearFill: 'errorItemPrimary',
|
|
69
69
|
placeholderTextColor: 'errorTextSecondary',
|
|
@@ -74,7 +74,7 @@ var inputAppearanceRequire = {
|
|
|
74
74
|
requirePrimary: {
|
|
75
75
|
fill: 'warningTertiary',
|
|
76
76
|
borderColor: 'warningBorderQuaternary',
|
|
77
|
-
|
|
77
|
+
borderColorHover: 'warningBorderQuaternary',
|
|
78
78
|
textColor: 'surfaceTextPrimary',
|
|
79
79
|
iconBeforeFill: 'warningItemQuaternary',
|
|
80
80
|
iconClearFill: 'warningItemPrimary',
|
|
@@ -83,7 +83,7 @@ var inputAppearanceRequire = {
|
|
|
83
83
|
requireSecondary: {
|
|
84
84
|
fill: 'surfaceSecondary',
|
|
85
85
|
borderColor: 'surfaceBorderTertiary',
|
|
86
|
-
|
|
86
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
87
87
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
88
88
|
iconClearFill: 'surfaceItemPrimary',
|
|
89
89
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -122,18 +122,17 @@ var inputAppearanceSize = {
|
|
|
122
122
|
};
|
|
123
123
|
|
|
124
124
|
var inputAppearanceStyle = {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
},
|
|
128
|
-
ghost: {
|
|
129
|
-
fill: 'none',
|
|
130
|
-
borderWidth: '0',
|
|
125
|
+
solid: {
|
|
126
|
+
borderColor: 'none',
|
|
131
127
|
},
|
|
132
128
|
outlined: {
|
|
133
129
|
fill: 'none',
|
|
134
130
|
},
|
|
135
|
-
|
|
136
|
-
|
|
131
|
+
full: {},
|
|
132
|
+
ghost: {
|
|
133
|
+
fill: 'none',
|
|
134
|
+
borderColor: 'none',
|
|
135
|
+
borderColorHover: 'none',
|
|
137
136
|
},
|
|
138
137
|
};
|
|
139
138
|
|
|
@@ -141,7 +140,7 @@ var inputAppearanceSuccess = {
|
|
|
141
140
|
successPrimary: {
|
|
142
141
|
fill: 'successTertiary',
|
|
143
142
|
borderColor: 'successBorderQuaternary',
|
|
144
|
-
|
|
143
|
+
borderColorHover: 'successBorderQuaternary',
|
|
145
144
|
textColor: 'surfaceTextPrimary',
|
|
146
145
|
iconBeforeFill: 'successItemQuaternary',
|
|
147
146
|
iconClearFill: 'successItemPrimary',
|
|
@@ -150,7 +149,7 @@ var inputAppearanceSuccess = {
|
|
|
150
149
|
successSecondary: {
|
|
151
150
|
fill: 'surfaceSecondary',
|
|
152
151
|
borderColor: 'surfaceBorderTertiary',
|
|
153
|
-
|
|
152
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
154
153
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
155
154
|
iconClearFill: 'surfaceItemPrimary',
|
|
156
155
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -176,13 +175,15 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
176
175
|
}, {});
|
|
177
176
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
178
177
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
179
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
178
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
180
179
|
return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
181
180
|
? fillClass && "fill_".concat(fillClass)
|
|
182
181
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
183
182
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
184
183
|
: borderWidthDisabledClass &&
|
|
185
|
-
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled
|
|
184
|
+
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled && fillHoverClass ? "fill_hover_".concat(fillHoverClass) : null, !isDisabled && borderColorHoverClass
|
|
185
|
+
? "border-color_hover_".concat(borderColorHoverClass)
|
|
186
|
+
: null, !isDisabled
|
|
186
187
|
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
187
188
|
: borderColorDisabledClass &&
|
|
188
189
|
"border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
|
|
@@ -8,7 +8,7 @@ var inputAppearanceDefault = {
|
|
|
8
8
|
defaultPrimary: {
|
|
9
9
|
fill: 'surfaceSecondary',
|
|
10
10
|
borderColor: 'surfaceBorderTertiary',
|
|
11
|
-
|
|
11
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
12
12
|
textColor: 'surfaceTextPrimary',
|
|
13
13
|
textColorDisabled: 'surfaceTextDisabled',
|
|
14
14
|
caret: 'secondaryItemSecondary',
|
|
@@ -18,7 +18,7 @@ var inputAppearanceDefault = {
|
|
|
18
18
|
defaultSecondary: {
|
|
19
19
|
fill: 'surfacePrimary',
|
|
20
20
|
borderColor: 'surfaceBorderTertiary',
|
|
21
|
-
|
|
21
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
22
22
|
textColor: 'surfaceTextPrimary',
|
|
23
23
|
textColorDisabled: 'surfaceTextDisabled',
|
|
24
24
|
caret: 'secondaryItemSecondary',
|
|
@@ -32,7 +32,7 @@ var inputAppearanceDisabled = {
|
|
|
32
32
|
disabledPrimary: {
|
|
33
33
|
fill: 'surfaceFillDisabled',
|
|
34
34
|
borderColor: 'errorBorderQuaternary',
|
|
35
|
-
|
|
35
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
36
36
|
textColor: 'surfaceTextQuaternary',
|
|
37
37
|
iconBeforeFill: 'errorItemQuaternary',
|
|
38
38
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -41,7 +41,7 @@ var inputAppearanceDisabled = {
|
|
|
41
41
|
disabledSecondary: {
|
|
42
42
|
fill: 'surfaceSecondary',
|
|
43
43
|
borderColor: 'surfaceBorderTertiary',
|
|
44
|
-
|
|
44
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
45
45
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
46
46
|
iconClearFill: 'surfaceItemPrimary',
|
|
47
47
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -52,7 +52,7 @@ var inputAppearanceError = {
|
|
|
52
52
|
errorPrimary: {
|
|
53
53
|
fill: 'errorTertiary',
|
|
54
54
|
borderColor: 'errorBorderQuaternary',
|
|
55
|
-
|
|
55
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
56
56
|
textColor: 'surfaceTextPrimary',
|
|
57
57
|
iconBeforeFill: 'errorItemQuaternary',
|
|
58
58
|
iconClearFill: 'errorItemPrimary',
|
|
@@ -61,7 +61,7 @@ var inputAppearanceError = {
|
|
|
61
61
|
errorSecondary: {
|
|
62
62
|
fill: 'errorSecondary',
|
|
63
63
|
borderColor: 'errorBorderTertiary',
|
|
64
|
-
|
|
64
|
+
borderColorHover: 'errorBorderQuaternary',
|
|
65
65
|
iconBeforeFill: 'errorItemQuaternary',
|
|
66
66
|
iconClearFill: 'errorItemPrimary',
|
|
67
67
|
placeholderTextColor: 'errorTextSecondary',
|
|
@@ -72,7 +72,7 @@ var inputAppearanceRequire = {
|
|
|
72
72
|
requirePrimary: {
|
|
73
73
|
fill: 'warningTertiary',
|
|
74
74
|
borderColor: 'warningBorderQuaternary',
|
|
75
|
-
|
|
75
|
+
borderColorHover: 'warningBorderQuaternary',
|
|
76
76
|
textColor: 'surfaceTextPrimary',
|
|
77
77
|
iconBeforeFill: 'warningItemQuaternary',
|
|
78
78
|
iconClearFill: 'warningItemPrimary',
|
|
@@ -81,7 +81,7 @@ var inputAppearanceRequire = {
|
|
|
81
81
|
requireSecondary: {
|
|
82
82
|
fill: 'surfaceSecondary',
|
|
83
83
|
borderColor: 'surfaceBorderTertiary',
|
|
84
|
-
|
|
84
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
85
85
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
86
86
|
iconClearFill: 'surfaceItemPrimary',
|
|
87
87
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -120,18 +120,17 @@ var inputAppearanceSize = {
|
|
|
120
120
|
};
|
|
121
121
|
|
|
122
122
|
var inputAppearanceStyle = {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
},
|
|
126
|
-
ghost: {
|
|
127
|
-
fill: 'none',
|
|
128
|
-
borderWidth: '0',
|
|
123
|
+
solid: {
|
|
124
|
+
borderColor: 'none',
|
|
129
125
|
},
|
|
130
126
|
outlined: {
|
|
131
127
|
fill: 'none',
|
|
132
128
|
},
|
|
133
|
-
|
|
134
|
-
|
|
129
|
+
full: {},
|
|
130
|
+
ghost: {
|
|
131
|
+
fill: 'none',
|
|
132
|
+
borderColor: 'none',
|
|
133
|
+
borderColorHover: 'none',
|
|
135
134
|
},
|
|
136
135
|
};
|
|
137
136
|
|
|
@@ -139,7 +138,7 @@ var inputAppearanceSuccess = {
|
|
|
139
138
|
successPrimary: {
|
|
140
139
|
fill: 'successTertiary',
|
|
141
140
|
borderColor: 'successBorderQuaternary',
|
|
142
|
-
|
|
141
|
+
borderColorHover: 'successBorderQuaternary',
|
|
143
142
|
textColor: 'surfaceTextPrimary',
|
|
144
143
|
iconBeforeFill: 'successItemQuaternary',
|
|
145
144
|
iconClearFill: 'successItemPrimary',
|
|
@@ -148,7 +147,7 @@ var inputAppearanceSuccess = {
|
|
|
148
147
|
successSecondary: {
|
|
149
148
|
fill: 'surfaceSecondary',
|
|
150
149
|
borderColor: 'surfaceBorderTertiary',
|
|
151
|
-
|
|
150
|
+
borderColorHover: 'surfaceBorderQuaternary',
|
|
152
151
|
iconBeforeFill: 'surfaceItemQuaternary',
|
|
153
152
|
iconClearFill: 'surfaceItemPrimary',
|
|
154
153
|
placeholderTextColor: 'surfaceTextSecondary',
|
|
@@ -174,13 +173,15 @@ var Input = React.forwardRef(function Input(props, ref) {
|
|
|
174
173
|
}, {});
|
|
175
174
|
// const stateConfig = state && inputConfig.state && inputConfig.state[state]
|
|
176
175
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
177
|
-
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
176
|
+
var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
|
|
178
177
|
return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textColorClass && "text-color_".concat(textColorClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), !isDisabled
|
|
179
178
|
? fillClass && "fill_".concat(fillClass)
|
|
180
179
|
: fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
|
|
181
180
|
? borderWidthClass && "border-width_".concat(borderWidthClass)
|
|
182
181
|
: borderWidthDisabledClass &&
|
|
183
|
-
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled
|
|
182
|
+
"border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled && fillHoverClass ? "fill_hover_".concat(fillHoverClass) : null, !isDisabled && borderColorHoverClass
|
|
183
|
+
? "border-color_hover_".concat(borderColorHoverClass)
|
|
184
|
+
: null, !isDisabled
|
|
184
185
|
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
185
186
|
: borderColorDisabledClass &&
|
|
186
187
|
"border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
|
|
@@ -113,7 +113,7 @@ var labelAppearanceError = {
|
|
|
113
113
|
};
|
|
114
114
|
|
|
115
115
|
var labelAppearanceInfo = {
|
|
116
|
-
|
|
116
|
+
infoMutedPrimary: {
|
|
117
117
|
fill: 'infoMuted',
|
|
118
118
|
labelTextColor: 'infoMutedTextPrimary',
|
|
119
119
|
labelTextColorHover: 'infoMutedTextPrimary',
|
|
@@ -373,10 +373,10 @@ function Label(props) {
|
|
|
373
373
|
return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = labelConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
374
374
|
}, {});
|
|
375
375
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
376
|
-
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass,
|
|
376
|
+
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, tooltipAlignment = propsGenerator.tooltipAlignment, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipArrowPosition = propsGenerator.tooltipArrowPosition, tooltipContent = propsGenerator.tooltipContent, tooltipText = propsGenerator.tooltipText, tooltipTextSize = propsGenerator.tooltipTextSize, tooltipTitle = propsGenerator.tooltipTitle, tooltipTitleSize = propsGenerator.tooltipTitleSize, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
|
377
377
|
// @ts-expect-error
|
|
378
378
|
var labelStyles = useStyles.useStyles(props).styles;
|
|
379
|
-
return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "label_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "label_size_".concat(sizeClass), wrapClass && "'word-wrap_".concat(wrapClass), widthClass && "label_width_".concat(widthClass), alignDirectionClass && "
|
|
379
|
+
return (jsxRuntime.jsxs("div", { className: clsx(className, 'label', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "label_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "label_size_".concat(sizeClass), wrapClass && "'word-wrap_".concat(wrapClass), widthClass && "label_width_".concat(widthClass), alignDirectionClass && "".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), type && "label_type_".concat(type), mode && "label_mode_".concat(mode), isSkeleton && "label_skeleton", onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "label__text", children: label })), children, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: "label__tooltip", appearance: tooltipAppearance, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize, arrowPosition: tooltipArrowPosition, ref: tooltipRef, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
exports.Label = Label;
|
|
@@ -111,7 +111,7 @@ var labelAppearanceError = {
|
|
|
111
111
|
};
|
|
112
112
|
|
|
113
113
|
var labelAppearanceInfo = {
|
|
114
|
-
|
|
114
|
+
infoMutedPrimary: {
|
|
115
115
|
fill: 'infoMuted',
|
|
116
116
|
labelTextColor: 'infoMutedTextPrimary',
|
|
117
117
|
labelTextColorHover: 'infoMutedTextPrimary',
|
|
@@ -371,10 +371,10 @@ function Label(props) {
|
|
|
371
371
|
return (__assign(__assign({}, resultConfig), (_a = labelConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
372
372
|
}, {});
|
|
373
373
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
374
|
-
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass,
|
|
374
|
+
var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, tooltipAlignment = propsGenerator.tooltipAlignment, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipArrowPosition = propsGenerator.tooltipArrowPosition, tooltipContent = propsGenerator.tooltipContent, tooltipText = propsGenerator.tooltipText, tooltipTextSize = propsGenerator.tooltipTextSize, tooltipTitle = propsGenerator.tooltipTitle, tooltipTitleSize = propsGenerator.tooltipTitleSize, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
|
375
375
|
// @ts-expect-error
|
|
376
376
|
var labelStyles = useStyles(props).styles;
|
|
377
|
-
return (jsxs("div", { className: clsx(className, 'label', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "label_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "label_size_".concat(sizeClass), wrapClass && "'word-wrap_".concat(wrapClass), widthClass && "label_width_".concat(widthClass), alignDirectionClass && "
|
|
377
|
+
return (jsxs("div", { className: clsx(className, 'label', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "label_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "label_size_".concat(sizeClass), wrapClass && "'word-wrap_".concat(wrapClass), widthClass && "label_width_".concat(widthClass), alignDirectionClass && "".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), type && "label_type_".concat(type), mode && "label_mode_".concat(mode), isSkeleton && "label_skeleton", onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "label__text", children: label })), children, showTooltip && (jsx(Tooltip, { className: "label__tooltip", appearance: tooltipAppearance, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize, arrowPosition: tooltipArrowPosition, ref: tooltipRef, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
|
|
378
378
|
}
|
|
379
379
|
|
|
380
380
|
export { Label as L, labelAppearance as a, labelConfig as l };
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var _default = require('@itcase/icons/default');
|
|
4
|
+
|
|
3
5
|
var breadcrumbsListMock = {
|
|
4
6
|
breadcrumbsList: [
|
|
5
7
|
{
|
|
@@ -7,45 +9,35 @@ var breadcrumbsListMock = {
|
|
|
7
9
|
key: 1,
|
|
8
10
|
text: 'Text 123',
|
|
9
11
|
href: '/',
|
|
10
|
-
|
|
11
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
12
|
-
// icon: icons16.Placeholder,
|
|
12
|
+
icon: _default.icons16.Placeholder.Default,
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
id: '2',
|
|
16
16
|
key: 2,
|
|
17
17
|
text: 'Text 123',
|
|
18
18
|
href: '/',
|
|
19
|
-
|
|
20
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
21
|
-
// icon: icons16.Placeholder,
|
|
19
|
+
icon: _default.icons16.Placeholder.Default,
|
|
22
20
|
},
|
|
23
21
|
{
|
|
24
22
|
id: '3',
|
|
25
23
|
key: 3,
|
|
26
24
|
text: 'Text 123',
|
|
27
25
|
href: '/',
|
|
28
|
-
|
|
29
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
30
|
-
// icon: icons16.Placeholder,
|
|
26
|
+
icon: _default.icons16.Placeholder.Default,
|
|
31
27
|
},
|
|
32
28
|
{
|
|
33
29
|
id: '4',
|
|
34
30
|
key: 4,
|
|
35
31
|
text: 'Text 123',
|
|
36
32
|
href: '/',
|
|
37
|
-
|
|
38
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
39
|
-
// icon: icons16.Placeholder,
|
|
33
|
+
icon: _default.icons16.Placeholder.Default,
|
|
40
34
|
},
|
|
41
35
|
{
|
|
42
36
|
id: '5',
|
|
43
37
|
key: 5,
|
|
44
38
|
text: 'Text 123',
|
|
45
39
|
href: '/',
|
|
46
|
-
|
|
47
|
-
// Use url to ".storybook/assets/icons/placeholder.svg"
|
|
48
|
-
// icon: icons16.Placeholder,
|
|
40
|
+
icon: _default.icons16.Placeholder.Default,
|
|
49
41
|
},
|
|
50
42
|
],
|
|
51
43
|
};
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
7
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
8
8
|
var Tooltip = require('../../Tooltip_cjs_DinScDnC.js');
|
|
9
|
-
var Label = require('../../
|
|
9
|
+
var Label = require('../../Label_cjs_BWbVsB-u.js');
|
|
10
10
|
var Text = require('../../Text_cjs_C9fOm0nd.js');
|
|
11
11
|
require('react');
|
|
12
12
|
require('lodash/camelCase');
|
|
@@ -9,32 +9,32 @@ var choiceListMock = {
|
|
|
9
9
|
choices: [
|
|
10
10
|
{
|
|
11
11
|
label: 'Label 1',
|
|
12
|
-
iconAfter: _default.
|
|
13
|
-
iconBefore: _default.
|
|
12
|
+
iconAfter: _default.icons24.Placeholder,
|
|
13
|
+
iconBefore: _default.icons24.Placeholder,
|
|
14
14
|
value: 1,
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
label: 'Label 2',
|
|
18
|
-
iconAfter: _default.
|
|
19
|
-
iconBefore: _default.
|
|
18
|
+
iconAfter: _default.icons24.Placeholder,
|
|
19
|
+
iconBefore: _default.icons24.Placeholder,
|
|
20
20
|
value: 2,
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
label: 'Label 3',
|
|
24
|
-
iconAfter: _default.
|
|
25
|
-
iconBefore: _default.
|
|
24
|
+
iconAfter: _default.icons24.Placeholder,
|
|
25
|
+
iconBefore: _default.icons24.Placeholder,
|
|
26
26
|
value: 3,
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
label: 'Label 4',
|
|
30
|
-
iconAfter: _default.
|
|
31
|
-
iconBefore: _default.
|
|
30
|
+
iconAfter: _default.icons24.Placeholder,
|
|
31
|
+
iconBefore: _default.icons24.Placeholder,
|
|
32
32
|
value: 4,
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
label: 'Label 5',
|
|
36
|
-
iconAfter: _default.
|
|
37
|
-
iconBefore: _default.
|
|
36
|
+
iconAfter: _default.icons24.Placeholder,
|
|
37
|
+
iconBefore: _default.icons24.Placeholder,
|
|
38
38
|
value: 5,
|
|
39
39
|
},
|
|
40
40
|
],
|
|
@@ -45,23 +45,23 @@ var choiceListIconMock = {
|
|
|
45
45
|
},
|
|
46
46
|
choices: [
|
|
47
47
|
{
|
|
48
|
-
icon: _default.
|
|
48
|
+
icon: _default.icons24.Placeholder,
|
|
49
49
|
value: 1,
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
|
-
icon: _default.
|
|
52
|
+
icon: _default.icons24.Placeholder,
|
|
53
53
|
value: 2,
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
|
-
icon: _default.
|
|
56
|
+
icon: _default.icons24.Placeholder,
|
|
57
57
|
value: 3,
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
|
-
icon: _default.
|
|
60
|
+
icon: _default.icons24.Placeholder,
|
|
61
61
|
value: 4,
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
|
-
icon: _default.
|
|
64
|
+
icon: _default.icons24.Placeholder,
|
|
65
65
|
value: 5,
|
|
66
66
|
},
|
|
67
67
|
],
|