@widergy/energy-ui 1.132.0 → 1.132.2

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 CHANGED
@@ -1,3 +1,17 @@
1
+ ## [1.132.2](https://github.com/widergy/energy-ui/compare/v1.132.1...v1.132.2) (2022-10-31)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * adding posibility to use a non-color background ([#317](https://github.com/widergy/energy-ui/issues/317)) ([f55e9f7](https://github.com/widergy/energy-ui/commit/f55e9f7e7b620549b2b804a47e7e5451adb7b450))
7
+
8
+ ## [1.132.1](https://github.com/widergy/energy-ui/compare/v1.132.0...v1.132.1) (2022-10-19)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * added badge to sidebar ([#313](https://github.com/widergy/energy-ui/issues/313)) ([27f00ae](https://github.com/widergy/energy-ui/commit/27f00ae322a69afacfb45c7cb0e4dbef29dcb97d))
14
+
1
15
  # [1.132.0](https://github.com/widergy/energy-ui/compare/v1.131.2...v1.132.0) (2022-10-06)
2
16
 
3
17
 
@@ -29,7 +29,7 @@ var retrieveStyle = function retrieveStyle(theme) {
29
29
  borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'colorPrimary', 'borderRadius'])
30
30
  },
31
31
  barColorPrimary: {
32
- backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'backgroundColor'], _colors.default.blue),
32
+ background: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'background'], (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'backgroundColor'], _colors.default.blue)),
33
33
  borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'borderRadius']),
34
34
  transition: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'transition'])
35
35
  },
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _propTypes = require("prop-types");
13
13
 
14
+ var _energyUi = require("@widergy/energy-ui");
15
+
14
16
  var _DynamicIcon = _interopRequireDefault(require("./components/DynamicIcon"));
15
17
 
16
18
  var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -22,7 +24,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
22
24
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
25
 
24
26
  var LogosContainer = function LogosContainer(_ref) {
25
- var BigLogo = _ref.BigLogo,
27
+ var badgeClassName = _ref.badgeClassName,
28
+ badgeContent = _ref.badgeContent,
29
+ BigLogo = _ref.BigLogo,
26
30
  bigLogoClassName = _ref.bigLogoClassName,
27
31
  containerClassName = _ref.containerClassName,
28
32
  SmallLogo = _ref.SmallLogo,
@@ -36,10 +40,14 @@ var LogosContainer = function LogosContainer(_ref) {
36
40
  }), /*#__PURE__*/_react.default.createElement(_DynamicIcon.default, {
37
41
  Icon: SmallLogo,
38
42
  className: "".concat(smallLogoClassName, " ").concat(_stylesModule.default.logo, " ").concat(!showBigLogo && _stylesModule.default.visibleIcon)
39
- }));
43
+ }), badgeContent && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
44
+ className: badgeClassName
45
+ }, badgeContent));
40
46
  };
41
47
 
42
48
  LogosContainer.propTypes = {
49
+ badgeClassName: _propTypes.string,
50
+ badgeContent: _propTypes.string,
43
51
  BigLogo: _propTypes.elementType,
44
52
  bigLogoClassName: _propTypes.string,
45
53
  containerClassName: _propTypes.string,
@@ -1,11 +1,7 @@
1
- @import 'scss/variables/_mediaQueries.scss';
2
- @import '_sizes.scss';
3
- @import '_colors.scss';
4
-
5
1
  .option {
6
2
  cursor: pointer;
7
- padding: 0;
8
3
  overflow: hidden;
4
+ padding: 0;
9
5
 
10
6
  &:hover {
11
7
  .optionIcon {
@@ -25,6 +25,8 @@ var _array = require("@widergy/web-utils/lib/array");
25
25
 
26
26
  var _useScreenSize2 = require("../../utils/useScreenSize");
27
27
 
28
+ var _classesUtils = require("../../utils/classesUtils");
29
+
28
30
  var _WithTheme = _interopRequireDefault(require("../WithTheme"));
29
31
 
30
32
  var _types = require("./types");
@@ -56,8 +58,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
56
58
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
57
59
 
58
60
  var UTSidebar = function UTSidebar(_ref) {
59
- var BigLogo = _ref.BigLogo,
60
- classes = _ref.classes,
61
+ var badgeContent = _ref.badgeContent,
62
+ BigLogo = _ref.BigLogo,
63
+ themeClasses = _ref.classes,
64
+ classNames = _ref.classNames,
61
65
  FooterBigLogo = _ref.FooterBigLogo,
62
66
  FooterSmallLogo = _ref.FooterSmallLogo,
63
67
  handleOpen = _ref.handleOpen,
@@ -75,6 +79,10 @@ var UTSidebar = function UTSidebar(_ref) {
75
79
  var _useScreenSize = (0, _useScreenSize2.useScreenSize)(),
76
80
  isTabletOrDesktop = _useScreenSize.isTabletOrDesktop;
77
81
 
82
+ var classes = (0, _react.useMemo)(function () {
83
+ return (0, _classesUtils.mergeClasses)(themeClasses, classNames);
84
+ }, [classNames]);
85
+
78
86
  var toggleDrawer = function toggleDrawer() {
79
87
  return open ? handleClose() : handleOpen();
80
88
  };
@@ -96,6 +104,8 @@ var UTSidebar = function UTSidebar(_ref) {
96
104
  return withMouseActions && handleOpen();
97
105
  }
98
106
  }, /*#__PURE__*/_react.default.createElement(_LogosContainer.default, {
107
+ badgeClassName: open ? classes.logoBadgeOpen : classes.logoBadgeClose,
108
+ badgeContent: badgeContent,
99
109
  BigLogo: BigLogo,
100
110
  SmallLogo: SmallLogo,
101
111
  bigLogoClassName: classes.bigLogo,
@@ -154,12 +164,14 @@ var UTSidebar = function UTSidebar(_ref) {
154
164
  };
155
165
 
156
166
  UTSidebar.propTypes = {
167
+ badgeContent: _propTypes.string,
157
168
  BigLogo: (0, _propTypes.oneOfType)([_types.iconType, _propTypes.string]),
158
169
  classes: _types.classType,
159
- handleOpen: _propTypes.func,
160
- handleClose: _propTypes.func,
170
+ classNames: (0, _propTypes.objectOf)(_propTypes.string),
161
171
  FooterBigLogo: (0, _propTypes.oneOfType)([_types.iconType, _propTypes.string]),
162
172
  FooterSmallLogo: (0, _propTypes.oneOfType)([_types.iconType, _propTypes.string]),
173
+ handleClose: _propTypes.func,
174
+ handleOpen: _propTypes.func,
163
175
  labelAlwaysVisible: _propTypes.bool,
164
176
  open: _propTypes.bool,
165
177
  options: _types.optionsType,
@@ -1,4 +1,4 @@
1
- @import '_mediaQueries.scss';
1
+ @import '../../scss/variables/_mediaQueries.scss';
2
2
 
3
3
  .drawer {
4
4
  align-items: center;
@@ -9,9 +9,13 @@ var _seamlessImmutable = require("seamless-immutable");
9
9
 
10
10
  var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
11
11
 
12
+ var _fontSizes = _interopRequireDefault(require("../../scss/variables/_fontSizes.scss"));
13
+
12
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
15
 
14
16
  var retrieveStyle = function retrieveStyle(theme) {
17
+ var _theme$UTSidebar, _theme$UTSidebar$logo, _theme$UTSidebar2, _theme$UTSidebar2$log, _theme$UTSidebar3, _theme$UTSidebar3$log, _theme$UTSidebar4, _theme$UTSidebar4$log, _theme$UTSidebar5, _theme$UTSidebar5$log, _theme$UTSidebar6, _theme$UTSidebar6$log, _theme$UTSidebar7, _theme$UTSidebar7$log, _theme$UTSidebar8, _theme$UTSidebar8$log, _theme$UTSidebar9, _theme$UTSidebar9$log, _theme$UTSidebar10, _theme$UTSidebar10$lo, _theme$UTSidebar11, _theme$UTSidebar11$lo, _theme$UTSidebar12, _theme$UTSidebar12$lo, _theme$UTSidebar13, _theme$UTSidebar13$lo, _theme$UTSidebar14, _theme$UTSidebar14$lo, _theme$UTSidebar15, _theme$UTSidebar15$lo, _theme$UTSidebar16, _theme$UTSidebar16$lo;
18
+
15
19
  return {
16
20
  drawerRoot: {
17
21
  width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawer', 'width'], 60)
@@ -106,6 +110,26 @@ var retrieveStyle = function retrieveStyle(theme) {
106
110
  padding: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'listOpened', 'padding']),
107
111
  width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'listOpened', 'width'])
108
112
  },
113
+ logoBadgeOpen: {
114
+ backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar = theme.UTSidebar) === null || _theme$UTSidebar === void 0 ? void 0 : (_theme$UTSidebar$logo = _theme$UTSidebar.logoBadgeOpen) === null || _theme$UTSidebar$logo === void 0 ? void 0 : _theme$UTSidebar$logo.backgroundColor,
115
+ borderRadius: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar2 = theme.UTSidebar) === null || _theme$UTSidebar2 === void 0 ? void 0 : (_theme$UTSidebar2$log = _theme$UTSidebar2.logoBadgeOpen) === null || _theme$UTSidebar2$log === void 0 ? void 0 : _theme$UTSidebar2$log.borderRadius) || 8,
116
+ color: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar3 = theme.UTSidebar) === null || _theme$UTSidebar3 === void 0 ? void 0 : (_theme$UTSidebar3$log = _theme$UTSidebar3.logoBadgeOpen) === null || _theme$UTSidebar3$log === void 0 ? void 0 : _theme$UTSidebar3$log.color,
117
+ fontSize: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar4 = theme.UTSidebar) === null || _theme$UTSidebar4 === void 0 ? void 0 : (_theme$UTSidebar4$log = _theme$UTSidebar4.logoBadgeOpen) === null || _theme$UTSidebar4$log === void 0 ? void 0 : _theme$UTSidebar4$log.fontSize) || _fontSizes.default.small, " !important"),
118
+ fontWeight: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar5 = theme.UTSidebar) === null || _theme$UTSidebar5 === void 0 ? void 0 : (_theme$UTSidebar5$log = _theme$UTSidebar5.logoBadgeOpen) === null || _theme$UTSidebar5$log === void 0 ? void 0 : _theme$UTSidebar5$log.fontWeight) || 600, " !important"),
119
+ margin: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar6 = theme.UTSidebar) === null || _theme$UTSidebar6 === void 0 ? void 0 : (_theme$UTSidebar6$log = _theme$UTSidebar6.logoBadgeOpen) === null || _theme$UTSidebar6$log === void 0 ? void 0 : _theme$UTSidebar6$log.margin) || '12px auto 24px',
120
+ maxWidth: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar7 = theme.UTSidebar) === null || _theme$UTSidebar7 === void 0 ? void 0 : (_theme$UTSidebar7$log = _theme$UTSidebar7.logoBadgeOpen) === null || _theme$UTSidebar7$log === void 0 ? void 0 : _theme$UTSidebar7$log.maxWidth) || '96%',
121
+ padding: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar8 = theme.UTSidebar) === null || _theme$UTSidebar8 === void 0 ? void 0 : (_theme$UTSidebar8$log = _theme$UTSidebar8.logoBadgeOpen) === null || _theme$UTSidebar8$log === void 0 ? void 0 : _theme$UTSidebar8$log.padding) || '2px 8px'
122
+ },
123
+ logoBadgeClose: {
124
+ backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar9 = theme.UTSidebar) === null || _theme$UTSidebar9 === void 0 ? void 0 : (_theme$UTSidebar9$log = _theme$UTSidebar9.logoBadgeClose) === null || _theme$UTSidebar9$log === void 0 ? void 0 : _theme$UTSidebar9$log.backgroundColor,
125
+ borderRadius: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar10 = theme.UTSidebar) === null || _theme$UTSidebar10 === void 0 ? void 0 : (_theme$UTSidebar10$lo = _theme$UTSidebar10.logoBadgeClose) === null || _theme$UTSidebar10$lo === void 0 ? void 0 : _theme$UTSidebar10$lo.borderRadius) || 8,
126
+ color: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar11 = theme.UTSidebar) === null || _theme$UTSidebar11 === void 0 ? void 0 : (_theme$UTSidebar11$lo = _theme$UTSidebar11.logoBadgeClose) === null || _theme$UTSidebar11$lo === void 0 ? void 0 : _theme$UTSidebar11$lo.color,
127
+ fontSize: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar12 = theme.UTSidebar) === null || _theme$UTSidebar12 === void 0 ? void 0 : (_theme$UTSidebar12$lo = _theme$UTSidebar12.logoBadgeClose) === null || _theme$UTSidebar12$lo === void 0 ? void 0 : _theme$UTSidebar12$lo.fontSize) || _fontSizes.default.small, " !important"),
128
+ fontWeight: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar13 = theme.UTSidebar) === null || _theme$UTSidebar13 === void 0 ? void 0 : (_theme$UTSidebar13$lo = _theme$UTSidebar13.logoBadgeClose) === null || _theme$UTSidebar13$lo === void 0 ? void 0 : _theme$UTSidebar13$lo.fontWeight) || 600, " !important"),
129
+ margin: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar14 = theme.UTSidebar) === null || _theme$UTSidebar14 === void 0 ? void 0 : (_theme$UTSidebar14$lo = _theme$UTSidebar14.logoBadgeClose) === null || _theme$UTSidebar14$lo === void 0 ? void 0 : _theme$UTSidebar14$lo.margin) || '12px auto 24px',
130
+ maxWidth: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar15 = theme.UTSidebar) === null || _theme$UTSidebar15 === void 0 ? void 0 : (_theme$UTSidebar15$lo = _theme$UTSidebar15.logoBadgeClose) === null || _theme$UTSidebar15$lo === void 0 ? void 0 : _theme$UTSidebar15$lo.maxWidth) || '96%',
131
+ padding: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar16 = theme.UTSidebar) === null || _theme$UTSidebar16 === void 0 ? void 0 : (_theme$UTSidebar16$lo = _theme$UTSidebar16.logoBadgeClose) === null || _theme$UTSidebar16$lo === void 0 ? void 0 : _theme$UTSidebar16$lo.padding) || '2px 8px'
132
+ },
109
133
  option: {
110
134
  backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'backgroundColor']),
111
135
  border: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'border']),
@@ -2,7 +2,6 @@
2
2
  $xxsmall: 9px;
3
3
  $xsmall: 10px;
4
4
  $small: 12px;
5
- $xmedium: 13px;
6
5
  $medium: 14px;
7
6
  $large: 16px;
8
7
  $xlarge: 18px;
@@ -11,6 +10,19 @@ $xxxlarge: 23px;
11
10
  $title: 26px;
12
11
  $xtitle: 30px;
13
12
  $large-title: 36px;
14
- $icon-button-big: 40px;
15
- $icon-button-medium: 25px;
16
- $icon-buttom-small: 10px;
13
+
14
+ // sass-lint:disable no-misspelled-properties
15
+ // sass-lint:disable property-sort-order
16
+ :export {
17
+ xxsmall: $xxsmall;
18
+ xsmall: $xsmall;
19
+ small: $small;
20
+ medium: $medium;
21
+ large: $large;
22
+ xlarge: $xlarge;
23
+ xxlarge: $xxlarge;
24
+ xxxlarge: $xxxlarge;
25
+ title: $title;
26
+ xtitle: $xtitle;
27
+ largeTitle: $large-title;
28
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "1.132.0",
3
+ "version": "1.132.2",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",