@widergy/energy-ui 3.10.5 → 3.11.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 +7 -0
- package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicatorTop/index.js +44 -0
- package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicatorTop/styles.module.scss +41 -0
- package/dist/components/UTConsumptionBar/index.js +9 -10
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [3.11.0](https://github.com/widergy/energy-ui/compare/v3.10.5...v3.11.0) (2024-07-04)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* add indicator top component ([#460](https://github.com/widergy/energy-ui/issues/460)) ([f652dc2](https://github.com/widergy/energy-ui/commit/f652dc2f862fe9c417275c7f6d3b77cf7a6896fb))
|
|
7
|
+
|
|
1
8
|
## [3.10.5](https://github.com/widergy/energy-ui/compare/v3.10.4...v3.10.5) (2024-07-02)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
|
|
10
|
+
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
const ConsumptionBarIndicatorTop = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
left,
|
|
15
|
+
title,
|
|
16
|
+
subtitle,
|
|
17
|
+
classes
|
|
18
|
+
} = _ref;
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
20
|
+
className: _stylesModule.default.indicator,
|
|
21
|
+
style: {
|
|
22
|
+
left: "".concat(left, "%")
|
|
23
|
+
}
|
|
24
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
+
className: "".concat(_stylesModule.default.indicatorText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorText)
|
|
26
|
+
}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
27
|
+
className: _stylesModule.default.alignCenter,
|
|
28
|
+
colorTheme: "information",
|
|
29
|
+
weight: "bold"
|
|
30
|
+
}, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
31
|
+
className: _stylesModule.default.subtitleLabel,
|
|
32
|
+
colorTheme: "gray",
|
|
33
|
+
weight: "bold"
|
|
34
|
+
}, subtitle)), /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
+
className: _stylesModule.default.indicatorMarker
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
ConsumptionBarIndicatorTop.propTypes = {
|
|
39
|
+
classes: _propTypes.object,
|
|
40
|
+
left: _propTypes.number,
|
|
41
|
+
title: _propTypes.string,
|
|
42
|
+
subtitle: _propTypes.string
|
|
43
|
+
};
|
|
44
|
+
var _default = exports.default = ConsumptionBarIndicatorTop;
|
package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicatorTop/styles.module.scss
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
@import '../../../../scss/variables/colors.module.scss';
|
|
2
|
+
@import '../../../../scss/variables/mediaQueries.module.scss';
|
|
3
|
+
|
|
4
|
+
.alignCenter {
|
|
5
|
+
text-align: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.indicator {
|
|
9
|
+
align-items: center;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
min-height: 60px;
|
|
14
|
+
padding-bottom: 40px;
|
|
15
|
+
position: absolute;
|
|
16
|
+
transition: left 1.5s cubic-bezier(0.82, 0.84, 0.44, 0.66);
|
|
17
|
+
width: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.indicatorMarker {
|
|
21
|
+
background-color: $transparent;
|
|
22
|
+
border-left: 8px solid transparent;
|
|
23
|
+
border-right: 8px solid transparent;
|
|
24
|
+
border-top: 13px solid $text-blue;
|
|
25
|
+
height: 10px;
|
|
26
|
+
padding-bottom: 25px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.indicatorText {
|
|
30
|
+
align-items: center;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
|
|
34
|
+
@media #{$desktop-tablet} {
|
|
35
|
+
white-space: nowrap;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.subtitleLabel {
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
}
|
|
@@ -9,6 +9,7 @@ var _react2 = _interopRequireDefault(require("@tippy.js/react"));
|
|
|
9
9
|
var _propTypes = require("prop-types");
|
|
10
10
|
var _UTLabel = _interopRequireDefault(require("../UTLabel"));
|
|
11
11
|
var _ConsumptionBarIndicator = _interopRequireDefault(require("./components/ConsumptionBarIndicator"));
|
|
12
|
+
var _ConsumptionBarIndicatorTop = _interopRequireDefault(require("./components/ConsumptionBarIndicatorTop"));
|
|
12
13
|
var _constants = require("./constants");
|
|
13
14
|
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
14
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -64,15 +65,7 @@ const UTConsumptionBar = _ref => {
|
|
|
64
65
|
}
|
|
65
66
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
66
67
|
className: _stylesModule.default.lineContainer
|
|
67
|
-
},
|
|
68
|
-
className: _stylesModule.default.subsidiableAmountLabel,
|
|
69
|
-
weight: "bold"
|
|
70
|
-
}, indicator.title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
71
|
-
className: _stylesModule.default.warningText,
|
|
72
|
-
colorTheme: "gray"
|
|
73
|
-
}, indicator.subtitle), /*#__PURE__*/_react.default.createElement("div", {
|
|
74
|
-
className: _stylesModule.default.indicatorMarker
|
|
75
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
76
69
|
className: _stylesModule.default.line
|
|
77
70
|
})), /*#__PURE__*/_react.default.createElement(_react2.default, {
|
|
78
71
|
content: "Categor\xEDa ".concat(name, ": ").concat(tippyContent),
|
|
@@ -91,7 +84,13 @@ const UTConsumptionBar = _ref => {
|
|
|
91
84
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
92
85
|
className: "".concat(_stylesModule.default.bar, " ").concat(downIndicators.length > 0 && _stylesModule.default.colorizedBar),
|
|
93
86
|
ref: widthRef
|
|
94
|
-
}),
|
|
87
|
+
}), upIndicators.map(indicator => /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicatorTop.default, {
|
|
88
|
+
classes: classes,
|
|
89
|
+
key: indicator.title,
|
|
90
|
+
left: getIndicatorPosition(indicator.value),
|
|
91
|
+
title: indicator.title,
|
|
92
|
+
subtitle: indicator.subtitle
|
|
93
|
+
})), categoryLines.rates.map(renderCategoryLines), downIndicators.map(indicator => /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicator.default, {
|
|
95
94
|
classes: classes,
|
|
96
95
|
className: _stylesModule.default.indicator,
|
|
97
96
|
key: indicator.title,
|