@widergy/energy-ui 3.2.1 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/components/UTSelectableCard/README.md +23 -0
- package/dist/components/UTSelectableCard/constants.js +25 -0
- package/dist/components/UTSelectableCard/index.js +103 -0
- package/dist/components/UTSelectableCard/theme.js +173 -0
- package/dist/index.js +7 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# [3.3.0](https://github.com/widergy/energy-ui/compare/v3.2.1...v3.3.0) (2024-02-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* fix pr ([6004c11](https://github.com/widergy/energy-ui/commit/6004c114dbfa4038acc2d43d481c61f692aec069))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* added readme ([b4ee555](https://github.com/widergy/energy-ui/commit/b4ee555733e9f08ee0af5796c04ee1ebd4c67f67))
|
|
12
|
+
* added utselectablecard ([a2ee373](https://github.com/widergy/energy-ui/commit/a2ee37370d13f7aeb8c4ed6f70cab287c4626b6f))
|
|
13
|
+
|
|
1
14
|
## [3.2.1](https://github.com/widergy/energy-ui/compare/v3.2.0...v3.2.1) (2024-02-20)
|
|
2
15
|
|
|
3
16
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# UTSelectableCard
|
|
2
|
+
|
|
3
|
+
### Description
|
|
4
|
+
Selectable card component.
|
|
5
|
+
|
|
6
|
+
### Props
|
|
7
|
+
|
|
8
|
+
| Name | Type | Default |Description |
|
|
9
|
+
|-----------------|------------------------------------------|-----------|----------------------------------------------------------------------|
|
|
10
|
+
| aditionalInfo | object: { title: '', description: ''} | | Aditional information to show in the card |
|
|
11
|
+
| apareance | string: 'white' \| 'gray' \| | white | The card apareance. |
|
|
12
|
+
| checkIcon | bool | true | Indicates if on "active" status shows a check icon |
|
|
13
|
+
| classes | string | | Classes returned by UTLabel's own [theme](./theme.js#)retrieveStyle. |
|
|
14
|
+
| className | string | | Additional classes. |
|
|
15
|
+
| description | string | | Card description |
|
|
16
|
+
| disabled | bool | false | Indicates if the card is disabled |
|
|
17
|
+
| Icon | node | | An Icon component that can be displayed. |
|
|
18
|
+
| OnClick | func | | Function to be executed when clicking the card |
|
|
19
|
+
| selected | bool | false | Indicates if the current card has "Active" status |
|
|
20
|
+
| size | string: 'medium' \| 'small' \| | medium | Card size |
|
|
21
|
+
| titleText | string | | Title to show in the card |
|
|
22
|
+
| tooltip | string | | Help icon tooltip as text |
|
|
23
|
+
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.shade05 = exports.shade04 = exports.shade03 = exports.shade01 = exports.PRESSED_STATE = exports.LIGHT = exports.HOVER_STATE = exports.GRAY = exports.DARK = exports.ACTIVE_STATE = exports.ACCENT = void 0;
|
|
7
|
+
// States
|
|
8
|
+
|
|
9
|
+
const ACTIVE_STATE = exports.ACTIVE_STATE = 'active';
|
|
10
|
+
const HOVER_STATE = exports.HOVER_STATE = 'hover';
|
|
11
|
+
const PRESSED_STATE = exports.PRESSED_STATE = 'pressed';
|
|
12
|
+
|
|
13
|
+
// Label colors
|
|
14
|
+
|
|
15
|
+
const ACCENT = exports.ACCENT = 'accent';
|
|
16
|
+
const DARK = exports.DARK = 'dark';
|
|
17
|
+
const GRAY = exports.GRAY = 'gray';
|
|
18
|
+
const LIGHT = exports.LIGHT = 'light';
|
|
19
|
+
|
|
20
|
+
// Label shades
|
|
21
|
+
|
|
22
|
+
const shade01 = exports.shade01 = '01';
|
|
23
|
+
const shade03 = exports.shade03 = '03';
|
|
24
|
+
const shade04 = exports.shade04 = '04';
|
|
25
|
+
const shade05 = exports.shade05 = '05';
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
var _HelpOutlineOutlined = _interopRequireDefault(require("@material-ui/icons/HelpOutlineOutlined"));
|
|
10
|
+
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
|
|
11
|
+
var _object = require("@widergy/web-utils/lib/object");
|
|
12
|
+
var _UTLabel = _interopRequireDefault(require("../UTLabel"));
|
|
13
|
+
var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
|
|
14
|
+
var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
|
|
15
|
+
var _WithTheme = _interopRequireDefault(require("../WithTheme"));
|
|
16
|
+
var _theme = require("./theme");
|
|
17
|
+
var _constants = require("./constants");
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
20
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
21
|
+
const UTSelectableCard = _ref => {
|
|
22
|
+
let {
|
|
23
|
+
aditionalInfo = {},
|
|
24
|
+
apareance = 'white',
|
|
25
|
+
checkIcon = true,
|
|
26
|
+
classes,
|
|
27
|
+
classNames = {},
|
|
28
|
+
description,
|
|
29
|
+
disabled = false,
|
|
30
|
+
Icon,
|
|
31
|
+
onClick,
|
|
32
|
+
selected = false,
|
|
33
|
+
size = 'medium',
|
|
34
|
+
titleText,
|
|
35
|
+
tooltip
|
|
36
|
+
} = _ref;
|
|
37
|
+
const [state, setState] = (0, _react.useState)('');
|
|
38
|
+
const pressedAndSelected = state === _constants.PRESSED_STATE && selected;
|
|
39
|
+
const selectedItemShade = selected && (state === _constants.HOVER_STATE || state === _constants.PRESSED_STATE || state === _constants.ACTIVE_STATE) && _constants.shade05;
|
|
40
|
+
const apareanceGrayPressed = apareance === _constants.GRAY && pressedAndSelected;
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
|
|
42
|
+
onClick: () => !disabled && onClick(),
|
|
43
|
+
onMouseDown: () => !disabled && setState(_constants.PRESSED_STATE),
|
|
44
|
+
onMouseUp: () => !disabled && setState(_constants.ACTIVE_STATE),
|
|
45
|
+
onMouseOver: () => !disabled && selected && setState(_constants.HOVER_STATE),
|
|
46
|
+
onMouseOut: () => !disabled && selected && setState(_constants.ACTIVE_STATE),
|
|
47
|
+
className: "".concat(classes.item, " ").concat(classes["".concat(apareance, "Apareance")], " ").concat(selected && classes["".concat(apareance, "SelectedContainer")], " ").concat(disabled && classes["".concat(apareance, "DisabledContainer")], " ").concat(classes["".concat(size, "Size")])
|
|
48
|
+
}, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
|
|
49
|
+
className: "".concat(classes.icon, " ").concat(selected ? classes.selectedIcon : '', " ").concat(disabled ? classes.disabledIcon : '', " ").concat(classNames.icon, " ").concat(apareanceGrayPressed && classes.apareanceGrayPressedIcon)
|
|
50
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
+
className: classes.textContainer
|
|
52
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
+
className: classes.column
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
+
className: classes.titleAndTooltip
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
57
|
+
variant: "subtitle1",
|
|
58
|
+
weight: "medium",
|
|
59
|
+
colorTheme: apareanceGrayPressed ? _constants.LIGHT : disabled ? _constants.GRAY : selected ? _constants.ACCENT : _constants.DARK,
|
|
60
|
+
shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
|
|
61
|
+
}, titleText), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
|
|
62
|
+
content: tooltip
|
|
63
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
64
|
+
className: classes.tooltip
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_HelpOutlineOutlined.default, {
|
|
66
|
+
className: "".concat(classes.infoIcon, " ").concat(disabled ? classes.disabledTooltip : selected ? classes.selectedInfoIcon : '')
|
|
67
|
+
})))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
68
|
+
colorTheme: apareanceGrayPressed ? _constants.LIGHT : selected ? _constants.ACCENT : _constants.GRAY,
|
|
69
|
+
shade: apareanceGrayPressed ? _constants.shade01 : selectedItemShade || _constants.shade04
|
|
70
|
+
}, description)), !(0, _object.objectIsEmpty)(aditionalInfo) && /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
+
className: "".concat(classes.column, " ").concat(classes.aditionalInfoColumn)
|
|
72
|
+
}, !!aditionalInfo.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
73
|
+
colorTheme: apareanceGrayPressed ? _constants.LIGHT : disabled ? _constants.GRAY : selected ? _constants.ACCENT : _constants.DARK,
|
|
74
|
+
variant: "small",
|
|
75
|
+
weight: "semibold",
|
|
76
|
+
shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
|
|
77
|
+
}, aditionalInfo.title), !!aditionalInfo.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
78
|
+
colorTheme: apareanceGrayPressed ? _constants.LIGHT : selected ? _constants.ACCENT : _constants.GRAY,
|
|
79
|
+
variant: "small",
|
|
80
|
+
shade: apareanceGrayPressed ? _constants.shade01 : !selected && state === _constants.PRESSED_STATE ? _constants.shade03 : selectedItemShade || _constants.shade04
|
|
81
|
+
}, aditionalInfo.description))), checkIcon && selected && /*#__PURE__*/_react.default.createElement(_Check.default, {
|
|
82
|
+
className: "".concat(classes.checkIcon, " ").concat(apareanceGrayPressed && classes.grayPressedCheckIcon)
|
|
83
|
+
}));
|
|
84
|
+
};
|
|
85
|
+
UTSelectableCard.propTypes = {
|
|
86
|
+
aditionalInfo: (0, _propTypes.shape)({
|
|
87
|
+
title: _propTypes.string,
|
|
88
|
+
description: _propTypes.string
|
|
89
|
+
}),
|
|
90
|
+
apareance: _propTypes.string,
|
|
91
|
+
checkIcon: _propTypes.bool,
|
|
92
|
+
classes: (0, _propTypes.objectOf)(_propTypes.string),
|
|
93
|
+
classNames: _propTypes.object,
|
|
94
|
+
description: _propTypes.string,
|
|
95
|
+
disabled: _propTypes.bool,
|
|
96
|
+
Icon: _propTypes.object,
|
|
97
|
+
onClick: _propTypes.func,
|
|
98
|
+
selected: _propTypes.bool,
|
|
99
|
+
size: _propTypes.string,
|
|
100
|
+
titleText: _propTypes.string,
|
|
101
|
+
tooltip: _propTypes.string
|
|
102
|
+
};
|
|
103
|
+
var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSelectableCard);
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.retrieveStyle = void 0;
|
|
7
|
+
const retrieveStyle = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
theme
|
|
10
|
+
} = _ref;
|
|
11
|
+
return {
|
|
12
|
+
aditionalInfoColumn: {
|
|
13
|
+
textAlign: 'end !important'
|
|
14
|
+
},
|
|
15
|
+
amountContainer: {
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
display: 'flex',
|
|
18
|
+
gridGap: '8px'
|
|
19
|
+
},
|
|
20
|
+
grayPressedCheckIcon: {
|
|
21
|
+
color: "".concat(theme.Palette.light['01'], " !important")
|
|
22
|
+
},
|
|
23
|
+
apareanceGrayPressedIcon: {
|
|
24
|
+
'& path': {
|
|
25
|
+
fill: "".concat(theme.Palette.light['01'], "!important")
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
checkIcon: {
|
|
29
|
+
color: theme.Palette.actions.accent['05']
|
|
30
|
+
},
|
|
31
|
+
column: {
|
|
32
|
+
alignSelf: 'center',
|
|
33
|
+
display: 'flex',
|
|
34
|
+
flexDirection: 'column',
|
|
35
|
+
gridGap: '4px',
|
|
36
|
+
justifyContent: 'space-between',
|
|
37
|
+
textAlign: 'initial'
|
|
38
|
+
},
|
|
39
|
+
detailContainer: {
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
gridGap: '8px'
|
|
43
|
+
},
|
|
44
|
+
disabledIcon: {
|
|
45
|
+
'& path': {
|
|
46
|
+
fill: "".concat(theme.Palette.gray['04'], " !important")
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
disabledTooltip: {
|
|
50
|
+
'& path': {
|
|
51
|
+
color: "".concat(theme.Palette.gray['04'], " !important")
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
icon: {
|
|
55
|
+
flexShrink: 0,
|
|
56
|
+
height: '36px',
|
|
57
|
+
width: '36px',
|
|
58
|
+
'& path': {
|
|
59
|
+
fill: theme.Palette.dark['05']
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
infoIcon: {
|
|
63
|
+
'& path': {
|
|
64
|
+
color: theme.Palette.dark['05']
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
item: {
|
|
68
|
+
alignItems: 'center',
|
|
69
|
+
borderRadius: '4px',
|
|
70
|
+
boxSizing: 'border-box',
|
|
71
|
+
display: 'flex',
|
|
72
|
+
gridGap: '16px',
|
|
73
|
+
transition: 'background-color 0.1s ease-in-out',
|
|
74
|
+
width: '100%',
|
|
75
|
+
'& + div': {
|
|
76
|
+
marginTop: '20px'
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
mediumSize: {
|
|
80
|
+
padding: '24px'
|
|
81
|
+
},
|
|
82
|
+
selectedIcon: {
|
|
83
|
+
'& path': {
|
|
84
|
+
fill: theme.Palette.actions.accent['05']
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
selectedInfoIcon: {
|
|
88
|
+
'& path': {
|
|
89
|
+
color: theme.Palette.actions.accent['05']
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
smallSize: {
|
|
93
|
+
padding: '16px'
|
|
94
|
+
},
|
|
95
|
+
textContainer: {
|
|
96
|
+
display: 'flex',
|
|
97
|
+
gridGap: '8px',
|
|
98
|
+
justifyContent: 'space-between',
|
|
99
|
+
width: '100%'
|
|
100
|
+
},
|
|
101
|
+
titleAndTooltip: {
|
|
102
|
+
alignItems: 'center',
|
|
103
|
+
display: 'flex',
|
|
104
|
+
gridGap: '4px'
|
|
105
|
+
},
|
|
106
|
+
tooltip: {
|
|
107
|
+
display: 'flex'
|
|
108
|
+
},
|
|
109
|
+
// white apareance
|
|
110
|
+
|
|
111
|
+
whiteApareance: {
|
|
112
|
+
backgroundColor: theme.Palette.light['01'],
|
|
113
|
+
boxShadow: '0 3px 6px 0 #182C491A',
|
|
114
|
+
'&:hover': {
|
|
115
|
+
backgroundColor: theme.Palette.light['03'],
|
|
116
|
+
boxShadow: 'none'
|
|
117
|
+
},
|
|
118
|
+
'&:active': {
|
|
119
|
+
backgroundColor: theme.Palette.light['04'],
|
|
120
|
+
boxShadow: 'none'
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
whiteDisabledContainer: {
|
|
124
|
+
backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
|
|
125
|
+
boxShadow: 'none',
|
|
126
|
+
'&:hover': {
|
|
127
|
+
cursor: 'default'
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
whiteSelectedContainer: {
|
|
131
|
+
border: "2px solid ".concat(theme.Palette.actions.accent['05']),
|
|
132
|
+
boxShadow: 'none',
|
|
133
|
+
'&:hover': {
|
|
134
|
+
backgroundColor: theme.Palette.actions.accent['01'],
|
|
135
|
+
border: "2px solid ".concat(theme.Palette.actions.accent['05'])
|
|
136
|
+
},
|
|
137
|
+
'&:active': {
|
|
138
|
+
backgroundColor: theme.Palette.actions.accent['02'],
|
|
139
|
+
border: "2px solid ".concat(theme.Palette.actions.accent['05'])
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
// Gray apareance
|
|
143
|
+
|
|
144
|
+
grayApareance: {
|
|
145
|
+
backgroundColor: theme.Palette.light['03'],
|
|
146
|
+
border: "1px solid ".concat(theme.Palette.light['05']),
|
|
147
|
+
'&:hover': {
|
|
148
|
+
backgroundColor: theme.Palette.light['04']
|
|
149
|
+
},
|
|
150
|
+
'&:active': {
|
|
151
|
+
backgroundColor: theme.Palette.light['05']
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
grayDisabledContainer: {
|
|
155
|
+
border: "2px solid ".concat(theme.Palette.light['05']),
|
|
156
|
+
'&:hover': {
|
|
157
|
+
backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
|
|
158
|
+
cursor: 'default'
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
graySelectedContainer: {
|
|
162
|
+
backgroundColor: theme.Palette.actions.accent['01'],
|
|
163
|
+
border: "2px solid ".concat(theme.Palette.actions.accent['03']),
|
|
164
|
+
'&:hover': {
|
|
165
|
+
backgroundColor: theme.Palette.actions.accent['02']
|
|
166
|
+
},
|
|
167
|
+
'&:active': {
|
|
168
|
+
backgroundColor: theme.Palette.actions.accent['03']
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
};
|
|
173
|
+
exports.retrieveStyle = retrieveStyle;
|
package/dist/index.js
CHANGED
|
@@ -249,6 +249,12 @@ Object.defineProperty(exports, "UTSelect", {
|
|
|
249
249
|
return _UTSelect.default;
|
|
250
250
|
}
|
|
251
251
|
});
|
|
252
|
+
Object.defineProperty(exports, "UTSelectableCard", {
|
|
253
|
+
enumerable: true,
|
|
254
|
+
get: function () {
|
|
255
|
+
return _UTSelectableCard.default;
|
|
256
|
+
}
|
|
257
|
+
});
|
|
252
258
|
Object.defineProperty(exports, "UTSidebar", {
|
|
253
259
|
enumerable: true,
|
|
254
260
|
get: function () {
|
|
@@ -399,6 +405,7 @@ var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"
|
|
|
399
405
|
var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
|
|
400
406
|
var _UTRating = _interopRequireDefault(require("./components/UTRating"));
|
|
401
407
|
var _UTSelect = _interopRequireDefault(require("./components/UTSelect"));
|
|
408
|
+
var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectableCard"));
|
|
402
409
|
var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
|
|
403
410
|
var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
|
|
404
411
|
var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
|