@itcase/ui 1.8.63 → 1.8.65
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_DR5o7zLg.js → DatePicker_cjs_BsLBVElQ.js} +1 -1
- package/dist/{DatePicker_es_vpk_NT3S.js → DatePicker_es_BotT8lRT.js} +1 -1
- package/dist/cjs/components/Button.js +1 -1
- package/dist/cjs/components/Checkmark.js +6 -6
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/DatePeriod.js +2 -2
- package/dist/cjs/components/DatePicker.js +2 -2
- package/dist/cjs/components/Drawer.js +3 -3
- package/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Tab.js +1 -3
- package/dist/cjs/components/Tile.js +38 -11
- package/dist/components/Button.js +1 -1
- package/dist/components/Checkmark.js +6 -6
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/DatePeriod.js +2 -2
- package/dist/components/DatePicker.js +2 -2
- package/dist/components/Drawer.js +3 -3
- package/dist/components/Response.js +1 -1
- package/dist/components/Tab.js +1 -3
- package/dist/components/Tile.js +38 -11
- package/dist/css/components/Drawer/Drawer.css +17 -11
- package/dist/css/components/Tile/Tile.css +0 -12
- package/dist/css/components/Title/Title.css +1 -1
- package/dist/types/components/Button/appearance/buttonShape.d.ts +2 -2
- package/dist/types/components/Tile/appearance/tileShape.d.ts +25 -0
- package/dist/types/components/Tile/appearance/tileStyle.d.ts +4 -6
- package/dist/types/components/Tile/appearance/tileSurface.d.ts +4 -0
- package/package.json +1 -1
- package/dist/{Button_cjs_C_9WLtoA.js → Button_cjs_CA7J_adG.js} +4 -4
- package/dist/{Button_es_CuFysaNl.js → Button_es_BSxEly4r.js} +4 -4
|
@@ -9,7 +9,7 @@ var DatePicker = require('react-datepicker');
|
|
|
9
9
|
var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
|
|
12
|
-
var Button = require('./
|
|
12
|
+
var Button = require('./Button_cjs_CA7J_adG.js');
|
|
13
13
|
var Icon = require('./Icon_cjs_D1Ze-oNL.js');
|
|
14
14
|
var Input = require('./Input_cjs_BGLd0EQu.js');
|
|
15
15
|
var Label = require('./Label_cjs_BPu58uG9.js');
|
|
@@ -7,7 +7,7 @@ import DatePicker from 'react-datepicker';
|
|
|
7
7
|
import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import { useStyles } from './hooks/useStyles/useStyles.js';
|
|
10
|
-
import { B as Button } from './
|
|
10
|
+
import { B as Button } from './Button_es_BSxEly4r.js';
|
|
11
11
|
import { I as Icon } from './Icon_es_DrQu8Zp8.js';
|
|
12
12
|
import { I as Input } from './Input_es_D2mNCqiH.js';
|
|
13
13
|
import { L as Label } from './Label_es_CH68RBo-.js';
|
|
@@ -100,24 +100,24 @@ var checkmarkConfig = {
|
|
|
100
100
|
},
|
|
101
101
|
};
|
|
102
102
|
function Checkmark(props) {
|
|
103
|
-
var className = props.className, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isChecked = props.isChecked, onClick = props.onClick;
|
|
103
|
+
var className = props.className, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isActive = props.isActive, isChecked = props.isChecked, onClick = props.onClick;
|
|
104
104
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkmarkConfig);
|
|
105
105
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
106
106
|
var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, checkmarkFillClass = propsGenerator.checkmarkFillClass, sizeClass = propsGenerator.sizeClass;
|
|
107
107
|
// @ts-expect-error
|
|
108
108
|
var checkmarkStyles = useStyles.useStyles(props).styles;
|
|
109
|
-
return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), !isChecked
|
|
109
|
+
return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), !isChecked || !isActive
|
|
110
110
|
? fillClass && "fill_".concat(fillClass)
|
|
111
|
-
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isChecked
|
|
111
|
+
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isChecked || !isActive
|
|
112
112
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
113
|
-
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), !isChecked
|
|
113
|
+
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), !isChecked || !isActive
|
|
114
114
|
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
115
115
|
: borderColorActiveClass &&
|
|
116
|
-
"border-color_active_".concat(borderColorActiveClass), !isChecked
|
|
116
|
+
"border-color_active_".concat(borderColorActiveClass), !isChecked || !isActive
|
|
117
117
|
? borderColorHoverClass &&
|
|
118
118
|
"border-color_hover_".concat(borderColorHoverClass)
|
|
119
119
|
: borderColorActiveHoverClass &&
|
|
120
|
-
"border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsxRuntime.jsx("div", { className: clsx('checkmark__icon', "svg_path_fill_".concat(checkmarkFillClass)), children: jsxRuntime.jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
|
|
120
|
+
"border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsxRuntime.jsx("div", { className: clsx('checkmark__icon', "svg_path_fill_".concat(checkmarkFillClass)), children: jsxRuntime.jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
exports.Checkmark = Checkmark;
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var Cookies = require('js-cookie');
|
|
7
7
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
8
8
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
9
|
-
var Button = require('../../
|
|
9
|
+
var Button = require('../../Button_cjs_CA7J_adG.js');
|
|
10
10
|
var Text = require('../../Text_cjs_B8nNXWBA.js');
|
|
11
11
|
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
12
12
|
require('lodash/camelCase');
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var common = require('@itcase/common');
|
|
7
|
-
var DatePicker = require('../../
|
|
7
|
+
var DatePicker = require('../../DatePicker_cjs_BsLBVElQ.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var ChipsGroup = require('../../ChipsGroup_cjs_DHNbkBEk.js');
|
|
@@ -22,7 +22,7 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
|
22
22
|
require('react-responsive');
|
|
23
23
|
require('../utils/setViewportProperty.js');
|
|
24
24
|
require('../hooks/useStyles/styleAttributes.js');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_CA7J_adG.js');
|
|
26
26
|
require('../../Icon_cjs_D1Ze-oNL.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var DatePicker = require('../../
|
|
3
|
+
var DatePicker = require('../../DatePicker_cjs_BsLBVElQ.js');
|
|
4
4
|
require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
require('react');
|
|
@@ -22,7 +22,7 @@ require('../utils/setViewportProperty.js');
|
|
|
22
22
|
require('../hooks/useStyles/useStyles.js');
|
|
23
23
|
require('lodash/maxBy');
|
|
24
24
|
require('../hooks/useStyles/styleAttributes.js');
|
|
25
|
-
require('../../
|
|
25
|
+
require('../../Button_cjs_CA7J_adG.js');
|
|
26
26
|
require('../../Icon_cjs_D1Ze-oNL.js');
|
|
27
27
|
require('react-inlinesvg');
|
|
28
28
|
require('../hoc/urlWithAssetPrefix.js');
|
|
@@ -68,18 +68,18 @@ var drawerConfig = {
|
|
|
68
68
|
},
|
|
69
69
|
};
|
|
70
70
|
function Drawer(props) {
|
|
71
|
-
var className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
71
|
+
var className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
72
72
|
var prevIsOpenModalRef = React.useRef(null);
|
|
73
73
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, drawerConfig);
|
|
74
74
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
75
|
-
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
75
|
+
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
76
76
|
React.useEffect(function () {
|
|
77
77
|
if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
|
|
78
78
|
onClose();
|
|
79
79
|
}
|
|
80
80
|
prevIsOpenModalRef.current = Boolean(isOpenModal);
|
|
81
81
|
}, [isOpenModal, onClose]);
|
|
82
|
-
return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour)), direction: direction || 'right', size: size || 600,
|
|
82
|
+
return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600,
|
|
83
83
|
// Drawer set prefix "EZDrawer" for any id
|
|
84
84
|
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
|
|
85
85
|
}
|
|
@@ -9,7 +9,7 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
|
|
|
9
9
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
10
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
11
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
12
|
-
var Button = require('../../
|
|
12
|
+
var Button = require('../../Button_cjs_CA7J_adG.js');
|
|
13
13
|
var Group = require('../../Group_cjs_D4QLNgcC.js');
|
|
14
14
|
var Text = require('../../Text_cjs_B8nNXWBA.js');
|
|
15
15
|
require('@itcase/common');
|
|
@@ -26,6 +26,31 @@ require('../hoc/urlWithAssetPrefix.js');
|
|
|
26
26
|
require('../context/UrlAssetPrefix.js');
|
|
27
27
|
require('../../Link_cjs_BqT6eVl6.js');
|
|
28
28
|
|
|
29
|
+
var tileAppearanceShape = {
|
|
30
|
+
circular: {
|
|
31
|
+
shape: 'circular',
|
|
32
|
+
},
|
|
33
|
+
rounded: {
|
|
34
|
+
shape: 'rounded',
|
|
35
|
+
},
|
|
36
|
+
roundedS: {
|
|
37
|
+
shape: 'rounded',
|
|
38
|
+
shapeStrength: '0_5m',
|
|
39
|
+
},
|
|
40
|
+
roundedM: {
|
|
41
|
+
shape: 'rounded',
|
|
42
|
+
shapeStrength: '1m',
|
|
43
|
+
},
|
|
44
|
+
roundedL: {
|
|
45
|
+
shape: 'rounded',
|
|
46
|
+
shapeStrength: '1_5m',
|
|
47
|
+
},
|
|
48
|
+
roundedXL: {
|
|
49
|
+
shape: 'rounded',
|
|
50
|
+
shapeStrength: '2m',
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
|
|
29
54
|
var tileAppearanceSize = {
|
|
30
55
|
sizeXL: {
|
|
31
56
|
size: 'xl',
|
|
@@ -78,18 +103,16 @@ var tileAppearanceSize = {
|
|
|
78
103
|
};
|
|
79
104
|
|
|
80
105
|
var tileAppearanceStyle = {
|
|
81
|
-
|
|
82
|
-
borderColor: '
|
|
83
|
-
},
|
|
84
|
-
ghost: {
|
|
85
|
-
fill: 'none',
|
|
86
|
-
borderColor: '0',
|
|
106
|
+
solid: {
|
|
107
|
+
borderColor: 'none',
|
|
87
108
|
},
|
|
88
109
|
outlined: {
|
|
89
110
|
fill: 'none',
|
|
90
111
|
},
|
|
91
|
-
|
|
92
|
-
|
|
112
|
+
full: {},
|
|
113
|
+
ghost: {
|
|
114
|
+
fill: 'none',
|
|
115
|
+
borderColor: 'none',
|
|
93
116
|
},
|
|
94
117
|
};
|
|
95
118
|
|
|
@@ -99,6 +122,7 @@ var tileAppearanceSurface = {
|
|
|
99
122
|
fillHover: 'surfacePrimaryHover',
|
|
100
123
|
titleTextColor: 'surfaceTextPrimary',
|
|
101
124
|
descTextColor: 'surfaceTextPrimary',
|
|
125
|
+
borderColor: 'surfaceBorderPrimary',
|
|
102
126
|
badgeAppearance: 'accentPrimary',
|
|
103
127
|
iconFillIcon: 'surfaceItemPrimary',
|
|
104
128
|
},
|
|
@@ -107,6 +131,7 @@ var tileAppearanceSurface = {
|
|
|
107
131
|
fillHover: 'surfaceSecondaryHover',
|
|
108
132
|
titleTextColor: 'surfaceTextPrimary',
|
|
109
133
|
descTextColor: 'surfaceTextPrimary',
|
|
134
|
+
borderColor: 'surfaceBorderPrimary',
|
|
110
135
|
badgeAppearance: 'accentPrimary',
|
|
111
136
|
iconFillIcon: 'surfaceItemPrimary',
|
|
112
137
|
},
|
|
@@ -115,6 +140,7 @@ var tileAppearanceSurface = {
|
|
|
115
140
|
fillHover: 'surfaceTertiaryHover',
|
|
116
141
|
titleTextColor: 'surfaceTextPrimary',
|
|
117
142
|
descTextColor: 'surfaceTextPrimary',
|
|
143
|
+
borderColor: 'surfaceBorderPrimary',
|
|
118
144
|
badgeAppearance: 'accentPrimary',
|
|
119
145
|
iconFillIcon: 'surfaceItemPrimary',
|
|
120
146
|
},
|
|
@@ -123,12 +149,13 @@ var tileAppearanceSurface = {
|
|
|
123
149
|
fillHover: 'surfaceQuaternaryHover',
|
|
124
150
|
titleTextColor: 'surfaceTextPrimary',
|
|
125
151
|
descTextColor: 'surfaceTextPrimary',
|
|
152
|
+
borderColor: 'surfaceBorderPrimary',
|
|
126
153
|
badgeAppearance: 'accentPrimary',
|
|
127
154
|
iconFillIcon: 'surfaceItemPrimary',
|
|
128
155
|
},
|
|
129
156
|
};
|
|
130
157
|
|
|
131
|
-
var tileAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, tileAppearanceSize), tileAppearanceSurface), tileAppearanceStyle);
|
|
158
|
+
var tileAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, tileAppearanceSize), tileAppearanceSurface), tileAppearanceShape), tileAppearanceStyle);
|
|
132
159
|
|
|
133
160
|
var tileConfig = {
|
|
134
161
|
appearance: tileAppearance,
|
|
@@ -140,10 +167,10 @@ function Tile(props) {
|
|
|
140
167
|
var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, title = props.title, desc = props.desc, badgeValue = props.badgeValue, reverse = props.reverse, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
|
|
141
168
|
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, tileConfig);
|
|
142
169
|
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
143
|
-
var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
|
|
170
|
+
var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
144
171
|
// @ts-expect-error
|
|
145
172
|
var tileStyles = useStyles.useStyles(props).styles;
|
|
146
|
-
return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "
|
|
173
|
+
return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), direction && "direction_".concat(direction), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), reverse && 'tile_reverse', sizeClass && "tile_size_".concat(sizeClass), type && "tile_type_".concat(type), badgeValue && "tile_state_badge", isSkeleton && "tile_skeleton"), dataTestId: dataTestId, dataTour: dataTour, style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxRuntime.jsxs("div", { className: "tile__header", children: [jsxRuntime.jsxs("div", { className: "tile__header-inner", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxRuntime.jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "tile__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('tile__icon'), appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
|
|
147
174
|
}
|
|
148
175
|
|
|
149
176
|
exports.Tile = Tile;
|
|
@@ -98,24 +98,24 @@ var checkmarkConfig = {
|
|
|
98
98
|
},
|
|
99
99
|
};
|
|
100
100
|
function Checkmark(props) {
|
|
101
|
-
var className = props.className, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isChecked = props.isChecked, onClick = props.onClick;
|
|
101
|
+
var className = props.className, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isActive = props.isActive, isChecked = props.isChecked, onClick = props.onClick;
|
|
102
102
|
var appearanceConfig = useAppearanceConfig(appearance, checkmarkConfig);
|
|
103
103
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
104
104
|
var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, checkmarkFillClass = propsGenerator.checkmarkFillClass, sizeClass = propsGenerator.sizeClass;
|
|
105
105
|
// @ts-expect-error
|
|
106
106
|
var checkmarkStyles = useStyles(props).styles;
|
|
107
|
-
return (jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), !isChecked
|
|
107
|
+
return (jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), !isChecked || !isActive
|
|
108
108
|
? fillClass && "fill_".concat(fillClass)
|
|
109
|
-
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isChecked
|
|
109
|
+
: fillActiveClass && "fill_active_".concat(fillActiveClass), !isChecked || !isActive
|
|
110
110
|
? fillHoverClass && "fill_hover_".concat(fillHoverClass)
|
|
111
|
-
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), !isChecked
|
|
111
|
+
: fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), !isChecked || !isActive
|
|
112
112
|
? borderColorClass && "border-color_".concat(borderColorClass)
|
|
113
113
|
: borderColorActiveClass &&
|
|
114
|
-
"border-color_active_".concat(borderColorActiveClass), !isChecked
|
|
114
|
+
"border-color_active_".concat(borderColorActiveClass), !isChecked || !isActive
|
|
115
115
|
? borderColorHoverClass &&
|
|
116
116
|
"border-color_hover_".concat(borderColorHoverClass)
|
|
117
117
|
: borderColorActiveHoverClass &&
|
|
118
|
-
"border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsx("div", { className: clsx('checkmark__icon', "svg_path_fill_".concat(checkmarkFillClass)), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
|
|
118
|
+
"border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsx("div", { className: clsx('checkmark__icon', "svg_path_fill_".concat(checkmarkFillClass)), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
export { Checkmark, checkmarkAppearance, checkmarkConfig };
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import Cookies from 'js-cookie';
|
|
5
5
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
6
6
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
7
|
-
import { B as Button } from '../
|
|
7
|
+
import { B as Button } from '../Button_es_BSxEly4r.js';
|
|
8
8
|
import { T as Text } from '../Text_es_BvmOR4nv.js';
|
|
9
9
|
import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
10
10
|
import 'lodash/camelCase';
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { DATE_PERIOD_INTERVALS } from '@itcase/common';
|
|
5
|
-
import { D as DatePickerInput } from '../
|
|
5
|
+
import { D as DatePickerInput } from '../DatePicker_es_BotT8lRT.js';
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_zirUM0Bc.js';
|
|
@@ -20,7 +20,7 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
|
|
|
20
20
|
import 'react-responsive';
|
|
21
21
|
import '../utils/setViewportProperty.js';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Button_es_BSxEly4r.js';
|
|
24
24
|
import '../Icon_es_DrQu8Zp8.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
26
|
import '../hoc/urlWithAssetPrefix.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../
|
|
1
|
+
export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_BotT8lRT.js';
|
|
2
2
|
import '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
@@ -20,7 +20,7 @@ import '../utils/setViewportProperty.js';
|
|
|
20
20
|
import '../hooks/useStyles/useStyles.js';
|
|
21
21
|
import 'lodash/maxBy';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
|
-
import '../
|
|
23
|
+
import '../Button_es_BSxEly4r.js';
|
|
24
24
|
import '../Icon_es_DrQu8Zp8.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
26
|
import '../hoc/urlWithAssetPrefix.js';
|
|
@@ -66,18 +66,18 @@ var drawerConfig = {
|
|
|
66
66
|
},
|
|
67
67
|
};
|
|
68
68
|
function Drawer(props) {
|
|
69
|
-
var className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
69
|
+
var className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, stickyButton = props.stickyButton, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
|
|
70
70
|
var prevIsOpenModalRef = useRef(null);
|
|
71
71
|
var appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
|
|
72
72
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
73
|
-
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
73
|
+
var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
|
|
74
74
|
useEffect(function () {
|
|
75
75
|
if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
|
|
76
76
|
onClose();
|
|
77
77
|
}
|
|
78
78
|
prevIsOpenModalRef.current = Boolean(isOpenModal);
|
|
79
79
|
}, [isOpenModal, onClose]);
|
|
80
|
-
return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour)), direction: direction || 'right', size: size || 600,
|
|
80
|
+
return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600,
|
|
81
81
|
// Drawer set prefix "EZDrawer" for any id
|
|
82
82
|
customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
|
|
83
83
|
}
|
|
@@ -7,7 +7,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
|
|
|
7
7
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
8
8
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
9
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
10
|
-
import { B as Button } from '../
|
|
10
|
+
import { B as Button } from '../Button_es_BSxEly4r.js';
|
|
11
11
|
import { G as Group } from '../Group_es_CruwH8Al.js';
|
|
12
12
|
import { T as Text } from '../Text_es_BvmOR4nv.js';
|
|
13
13
|
import '@itcase/common';
|
package/dist/components/Tab.js
CHANGED
package/dist/components/Tile.js
CHANGED
|
@@ -24,6 +24,31 @@ import '../hoc/urlWithAssetPrefix.js';
|
|
|
24
24
|
import '../context/UrlAssetPrefix.js';
|
|
25
25
|
import '../Link_es_BnUIX0QT.js';
|
|
26
26
|
|
|
27
|
+
var tileAppearanceShape = {
|
|
28
|
+
circular: {
|
|
29
|
+
shape: 'circular',
|
|
30
|
+
},
|
|
31
|
+
rounded: {
|
|
32
|
+
shape: 'rounded',
|
|
33
|
+
},
|
|
34
|
+
roundedS: {
|
|
35
|
+
shape: 'rounded',
|
|
36
|
+
shapeStrength: '0_5m',
|
|
37
|
+
},
|
|
38
|
+
roundedM: {
|
|
39
|
+
shape: 'rounded',
|
|
40
|
+
shapeStrength: '1m',
|
|
41
|
+
},
|
|
42
|
+
roundedL: {
|
|
43
|
+
shape: 'rounded',
|
|
44
|
+
shapeStrength: '1_5m',
|
|
45
|
+
},
|
|
46
|
+
roundedXL: {
|
|
47
|
+
shape: 'rounded',
|
|
48
|
+
shapeStrength: '2m',
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
|
|
27
52
|
var tileAppearanceSize = {
|
|
28
53
|
sizeXL: {
|
|
29
54
|
size: 'xl',
|
|
@@ -76,18 +101,16 @@ var tileAppearanceSize = {
|
|
|
76
101
|
};
|
|
77
102
|
|
|
78
103
|
var tileAppearanceStyle = {
|
|
79
|
-
|
|
80
|
-
borderColor: '
|
|
81
|
-
},
|
|
82
|
-
ghost: {
|
|
83
|
-
fill: 'none',
|
|
84
|
-
borderColor: '0',
|
|
104
|
+
solid: {
|
|
105
|
+
borderColor: 'none',
|
|
85
106
|
},
|
|
86
107
|
outlined: {
|
|
87
108
|
fill: 'none',
|
|
88
109
|
},
|
|
89
|
-
|
|
90
|
-
|
|
110
|
+
full: {},
|
|
111
|
+
ghost: {
|
|
112
|
+
fill: 'none',
|
|
113
|
+
borderColor: 'none',
|
|
91
114
|
},
|
|
92
115
|
};
|
|
93
116
|
|
|
@@ -97,6 +120,7 @@ var tileAppearanceSurface = {
|
|
|
97
120
|
fillHover: 'surfacePrimaryHover',
|
|
98
121
|
titleTextColor: 'surfaceTextPrimary',
|
|
99
122
|
descTextColor: 'surfaceTextPrimary',
|
|
123
|
+
borderColor: 'surfaceBorderPrimary',
|
|
100
124
|
badgeAppearance: 'accentPrimary',
|
|
101
125
|
iconFillIcon: 'surfaceItemPrimary',
|
|
102
126
|
},
|
|
@@ -105,6 +129,7 @@ var tileAppearanceSurface = {
|
|
|
105
129
|
fillHover: 'surfaceSecondaryHover',
|
|
106
130
|
titleTextColor: 'surfaceTextPrimary',
|
|
107
131
|
descTextColor: 'surfaceTextPrimary',
|
|
132
|
+
borderColor: 'surfaceBorderPrimary',
|
|
108
133
|
badgeAppearance: 'accentPrimary',
|
|
109
134
|
iconFillIcon: 'surfaceItemPrimary',
|
|
110
135
|
},
|
|
@@ -113,6 +138,7 @@ var tileAppearanceSurface = {
|
|
|
113
138
|
fillHover: 'surfaceTertiaryHover',
|
|
114
139
|
titleTextColor: 'surfaceTextPrimary',
|
|
115
140
|
descTextColor: 'surfaceTextPrimary',
|
|
141
|
+
borderColor: 'surfaceBorderPrimary',
|
|
116
142
|
badgeAppearance: 'accentPrimary',
|
|
117
143
|
iconFillIcon: 'surfaceItemPrimary',
|
|
118
144
|
},
|
|
@@ -121,12 +147,13 @@ var tileAppearanceSurface = {
|
|
|
121
147
|
fillHover: 'surfaceQuaternaryHover',
|
|
122
148
|
titleTextColor: 'surfaceTextPrimary',
|
|
123
149
|
descTextColor: 'surfaceTextPrimary',
|
|
150
|
+
borderColor: 'surfaceBorderPrimary',
|
|
124
151
|
badgeAppearance: 'accentPrimary',
|
|
125
152
|
iconFillIcon: 'surfaceItemPrimary',
|
|
126
153
|
},
|
|
127
154
|
};
|
|
128
155
|
|
|
129
|
-
var tileAppearance = __assign(__assign(__assign({}, tileAppearanceSize), tileAppearanceSurface), tileAppearanceStyle);
|
|
156
|
+
var tileAppearance = __assign(__assign(__assign(__assign({}, tileAppearanceSize), tileAppearanceSurface), tileAppearanceShape), tileAppearanceStyle);
|
|
130
157
|
|
|
131
158
|
var tileConfig = {
|
|
132
159
|
appearance: tileAppearance,
|
|
@@ -138,10 +165,10 @@ function Tile(props) {
|
|
|
138
165
|
var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, title = props.title, desc = props.desc, badgeValue = props.badgeValue, reverse = props.reverse, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
|
|
139
166
|
var appearanceConfig = useAppearanceConfig(appearance, tileConfig);
|
|
140
167
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
141
|
-
var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
|
|
168
|
+
var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
|
|
142
169
|
// @ts-expect-error
|
|
143
170
|
var tileStyles = useStyles(props).styles;
|
|
144
|
-
return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "
|
|
171
|
+
return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), direction && "direction_".concat(direction), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), reverse && 'tile_reverse', sizeClass && "tile_size_".concat(sizeClass), type && "tile_type_".concat(type), badgeValue && "tile_state_badge", isSkeleton && "tile_skeleton"), dataTestId: dataTestId, dataTour: dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxs("div", { className: "tile__header", children: [jsxs("div", { className: "tile__header-inner", children: [title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsx(Badge, { className: "tile__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tile__icon'), appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
|
|
145
172
|
}
|
|
146
173
|
|
|
147
174
|
export { Tile, tileAppearance, tileConfig };
|
|
@@ -34,30 +34,36 @@
|
|
|
34
34
|
backdrop-filter: var(--drawer-overlay-filter) !important;
|
|
35
35
|
}
|
|
36
36
|
&__close {
|
|
37
|
-
justify-content: flex-end;
|
|
38
|
-
position: relative;
|
|
39
37
|
padding: 3m 3m 0 3m;
|
|
38
|
+
position: relative;
|
|
40
39
|
display: flex;
|
|
40
|
+
justify-content: flex-end;
|
|
41
41
|
}
|
|
42
42
|
&__header {
|
|
43
|
+
padding: 0 3m 3m 3m;
|
|
43
44
|
display: flex;
|
|
44
45
|
flex-direction: column;
|
|
45
|
-
padding: 0 3m 3m 3m;
|
|
46
46
|
}
|
|
47
47
|
&__wrapper {
|
|
48
|
+
padding: 3m;
|
|
48
49
|
flex: 1;
|
|
49
50
|
}
|
|
50
51
|
&__after {
|
|
51
52
|
z-index: 10;
|
|
52
53
|
}
|
|
53
|
-
&
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
&_sticky-button {
|
|
55
|
+
^^&__after {
|
|
56
|
+
width: 100%;
|
|
57
|
+
position: sticky;
|
|
58
|
+
left: 0;
|
|
59
|
+
bottom: 0;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
.drawer {
|
|
64
|
+
&_reset-padding {
|
|
65
|
+
^&__wrapper {
|
|
66
|
+
padding: 0;
|
|
61
67
|
}
|
|
62
68
|
}
|
|
63
69
|
}
|
|
@@ -17,16 +17,6 @@
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
.tile {
|
|
21
|
-
&_shape {
|
|
22
|
-
&_rounded {
|
|
23
|
-
border-radius: var(--tile-shape-rounded);
|
|
24
|
-
}
|
|
25
|
-
&_circular {
|
|
26
|
-
border-radius: 50%;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
20
|
.tile {
|
|
31
21
|
&_size {
|
|
32
22
|
@each $size in xl, l, m, s, xs, xxs {
|
|
@@ -77,8 +67,6 @@
|
|
|
77
67
|
}
|
|
78
68
|
}
|
|
79
69
|
:root {
|
|
80
|
-
--tile-shape-rounded: 0;
|
|
81
|
-
|
|
82
70
|
--tile-size-xxl-min-width: 400px;
|
|
83
71
|
--tile-size-xxl-padding: 24px;
|
|
84
72
|
--tile-size-xxl-gap: 24px;
|
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
background-position: -200%;
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
/* stylelint-disable prettier/prettier */
|
|
31
30
|
.title {
|
|
32
31
|
&_size {
|
|
33
32
|
@each $size in h1, h2, h3, h4, h5, h6 {
|
|
@@ -35,6 +34,7 @@
|
|
|
35
34
|
padding: 0;
|
|
36
35
|
margin: 0;
|
|
37
36
|
display: flex;
|
|
37
|
+
gap: 8px;
|
|
38
38
|
@mixin $(size);
|
|
39
39
|
^^&__wrapper {
|
|
40
40
|
gap: var(--title-size-$(size)-gap);
|
|
@@ -5,7 +5,7 @@ declare const buttonAppearanceShape: {
|
|
|
5
5
|
rounded: {
|
|
6
6
|
shape: string;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
roundedS: {
|
|
9
9
|
shape: string;
|
|
10
10
|
shapeStrength: string;
|
|
11
11
|
};
|
|
@@ -13,7 +13,7 @@ declare const buttonAppearanceShape: {
|
|
|
13
13
|
shape: string;
|
|
14
14
|
shapeStrength: string;
|
|
15
15
|
};
|
|
16
|
-
|
|
16
|
+
roundedL: {
|
|
17
17
|
shape: string;
|
|
18
18
|
shapeStrength: string;
|
|
19
19
|
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
declare const tileAppearanceShape: {
|
|
2
|
+
circular: {
|
|
3
|
+
shape: string;
|
|
4
|
+
};
|
|
5
|
+
rounded: {
|
|
6
|
+
shape: string;
|
|
7
|
+
};
|
|
8
|
+
roundedS: {
|
|
9
|
+
shape: string;
|
|
10
|
+
shapeStrength: string;
|
|
11
|
+
};
|
|
12
|
+
roundedM: {
|
|
13
|
+
shape: string;
|
|
14
|
+
shapeStrength: string;
|
|
15
|
+
};
|
|
16
|
+
roundedL: {
|
|
17
|
+
shape: string;
|
|
18
|
+
shapeStrength: string;
|
|
19
|
+
};
|
|
20
|
+
roundedXL: {
|
|
21
|
+
shape: string;
|
|
22
|
+
shapeStrength: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export { tileAppearanceShape };
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
declare const tileAppearanceStyle: {
|
|
2
|
-
|
|
3
|
-
borderColor: string;
|
|
4
|
-
};
|
|
5
|
-
ghost: {
|
|
6
|
-
fill: string;
|
|
2
|
+
solid: {
|
|
7
3
|
borderColor: string;
|
|
8
4
|
};
|
|
9
5
|
outlined: {
|
|
10
6
|
fill: string;
|
|
11
7
|
};
|
|
12
|
-
|
|
8
|
+
full: {};
|
|
9
|
+
ghost: {
|
|
10
|
+
fill: string;
|
|
13
11
|
borderColor: string;
|
|
14
12
|
};
|
|
15
13
|
};
|
|
@@ -4,6 +4,7 @@ declare const tileAppearanceSurface: {
|
|
|
4
4
|
fillHover: string;
|
|
5
5
|
titleTextColor: string;
|
|
6
6
|
descTextColor: string;
|
|
7
|
+
borderColor: string;
|
|
7
8
|
badgeAppearance: string;
|
|
8
9
|
iconFillIcon: string;
|
|
9
10
|
};
|
|
@@ -12,6 +13,7 @@ declare const tileAppearanceSurface: {
|
|
|
12
13
|
fillHover: string;
|
|
13
14
|
titleTextColor: string;
|
|
14
15
|
descTextColor: string;
|
|
16
|
+
borderColor: string;
|
|
15
17
|
badgeAppearance: string;
|
|
16
18
|
iconFillIcon: string;
|
|
17
19
|
};
|
|
@@ -20,6 +22,7 @@ declare const tileAppearanceSurface: {
|
|
|
20
22
|
fillHover: string;
|
|
21
23
|
titleTextColor: string;
|
|
22
24
|
descTextColor: string;
|
|
25
|
+
borderColor: string;
|
|
23
26
|
badgeAppearance: string;
|
|
24
27
|
iconFillIcon: string;
|
|
25
28
|
};
|
|
@@ -28,6 +31,7 @@ declare const tileAppearanceSurface: {
|
|
|
28
31
|
fillHover: string;
|
|
29
32
|
titleTextColor: string;
|
|
30
33
|
descTextColor: string;
|
|
34
|
+
borderColor: string;
|
|
31
35
|
badgeAppearance: string;
|
|
32
36
|
iconFillIcon: string;
|
|
33
37
|
};
|
package/package.json
CHANGED
|
@@ -222,17 +222,17 @@ var buttonAppearanceShape = {
|
|
|
222
222
|
rounded: {
|
|
223
223
|
shape: 'rounded',
|
|
224
224
|
},
|
|
225
|
-
|
|
225
|
+
roundedS: {
|
|
226
226
|
shape: 'rounded',
|
|
227
|
-
shapeStrength: '
|
|
227
|
+
shapeStrength: '0_5m',
|
|
228
228
|
},
|
|
229
229
|
roundedM: {
|
|
230
230
|
shape: 'rounded',
|
|
231
231
|
shapeStrength: '1m',
|
|
232
232
|
},
|
|
233
|
-
|
|
233
|
+
roundedL: {
|
|
234
234
|
shape: 'rounded',
|
|
235
|
-
shapeStrength: '
|
|
235
|
+
shapeStrength: '1_5m',
|
|
236
236
|
},
|
|
237
237
|
roundedXL: {
|
|
238
238
|
shape: 'rounded',
|
|
@@ -220,17 +220,17 @@ var buttonAppearanceShape = {
|
|
|
220
220
|
rounded: {
|
|
221
221
|
shape: 'rounded',
|
|
222
222
|
},
|
|
223
|
-
|
|
223
|
+
roundedS: {
|
|
224
224
|
shape: 'rounded',
|
|
225
|
-
shapeStrength: '
|
|
225
|
+
shapeStrength: '0_5m',
|
|
226
226
|
},
|
|
227
227
|
roundedM: {
|
|
228
228
|
shape: 'rounded',
|
|
229
229
|
shapeStrength: '1m',
|
|
230
230
|
},
|
|
231
|
-
|
|
231
|
+
roundedL: {
|
|
232
232
|
shape: 'rounded',
|
|
233
|
-
shapeStrength: '
|
|
233
|
+
shapeStrength: '1_5m',
|
|
234
234
|
},
|
|
235
235
|
roundedXL: {
|
|
236
236
|
shape: 'rounded',
|