@widergy/energy-ui 3.38.1 → 3.39.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/Loading/index.js +10 -10
  3. package/dist/components/UTStatusMessage/README.md +46 -0
  4. package/dist/components/UTStatusMessage/constants.js +36 -0
  5. package/dist/components/UTStatusMessage/index.js +105 -0
  6. package/dist/components/UTStatusMessage/styles.module.scss +37 -0
  7. package/dist/components/UTStatusMessage/theme.js +74 -0
  8. package/dist/index.js +7 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [3.39.0](https://github.com/widergy/energy-ui/compare/v3.38.1...v3.39.0) (2024-11-05)
2
+
3
+
4
+ ### Features
5
+
6
+ * [EVE-4330] UTStatusMessage ([#523](https://github.com/widergy/energy-ui/issues/523)) ([cdd5fd6](https://github.com/widergy/energy-ui/commit/cdd5fd61889a07ad30861607023f6a590bec6590))
7
+
1
8
  ## [3.38.1](https://github.com/widergy/energy-ui/compare/v3.38.0...v3.38.1) (2024-11-05)
2
9
 
3
10
 
package/dist/components/Loading/index.js CHANGED
@@ -16,13 +16,13 @@ var _constants = require("./constants");
16
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
17
  const Loading = _ref => {
18
18
  let {
19
- text,
19
+ classes,
20
20
  className,
21
- thickness,
22
21
  size,
23
- classes,
22
+ text = _constants.DEFAULT_LOADING_TEXT,
23
+ textClassName,
24
24
  theme,
25
- textClassName
25
+ thickness
26
26
  } = _ref;
27
27
  const defaultSize = (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'size'], 85);
28
28
  const defaultThickness = (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'thickness'], 1.5);
@@ -34,15 +34,15 @@ const Loading = _ref => {
34
34
  thickness: thickness || defaultThickness
35
35
  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
36
36
  className: "".concat(_stylesModule.default.text, " ").concat(classes.text, " ").concat(textClassName)
37
- }, text || _constants.DEFAULT_LOADING_TEXT));
37
+ }, text));
38
38
  };
39
39
  Loading.propTypes = {
40
- text: _propTypes.string,
41
- size: _propTypes.number,
42
- thickness: _propTypes.number,
43
40
  classes: (0, _propTypes.objectOf)(_propTypes.string),
44
- theme: _propTypes.object,
45
41
  className: _propTypes.string,
46
- textClassName: _propTypes.string
42
+ size: _propTypes.number,
43
+ text: _propTypes.string,
44
+ textClassName: _propTypes.string,
45
+ theme: _propTypes.object,
46
+ thickness: _propTypes.number
47
47
  };
48
48
  var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(Loading);
package/dist/components/UTStatusMessage/README.md ADDED
@@ -0,0 +1,46 @@
1
+ # UTStatusMessage
2
+
3
+ The purpose of this component, as its name indicates, is to communicate a message about the status of the view or component in which it is contextually situated.
4
+
5
+ ## Props
6
+
7
+ | Name | Type | Default | Description |
8
+ | --------------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------- |
9
+ | children | element | | The content to be rendered inside the component. |
10
+ | classes | object | | Custom CSS classes for styling the component. |
11
+ | colorTheme | string | default | Defines the color theme for the component. |
12
+ | description | string | | Description text providing additional context or information. |
13
+ | descriptionProps | object | | Props to be applied to the description UTLabel. |
14
+ | helpText | string | | Help text displayed to guide the user. |
15
+ | helpTextProps | object | | Props to be applied to the help text UTLabel. |
16
+ | icon | string | | Icon to be displayed in the header. |
17
+ | iconProps | object | | Props to be applied to the UTIcon |
18
+ | image | string | | URL of an image to be displayed in the header, replacing the icon. |
19
+ | loading | bool | false | Indicates whether the component is in a loading state. Replaces the header. |
20
+ | primaryAction | func | | Callback function for the primary action. |
21
+ | primaryActionProps | object | | Props to be applied to the primary action UTButton. |
22
+ | primaryActionText | string | | Text for the primary action UTButton. |
23
+ | secondaryAction | func | | Callback function for the secondary action. |
24
+ | secondaryActionProps | object | | Props to be applied to the secondary action UTButton. |
25
+ | secondaryActionText | string | | Text for the secondary action UTButton. |
26
+ | showHeader | bool | true | Indicates whether to display the header section of the component. |
27
+ | title | string | | Title for the component, providing context to the user. |
28
+ | titleProps | object | | Props to be applied to the title UTLabel. |
29
+
30
+ ### colorTheme
31
+
32
+ The value of `colorTheme` must be one of the following:
33
+
34
+ - `accent`
35
+ - `default`
36
+ - `error`
37
+ - `gradient`
38
+ - `gray`
39
+ - `identity1`
40
+ - `identity2`
41
+ - `identity3`
42
+ - `identity4`
43
+ - `info`
44
+ - `negative`
45
+ - `success`
46
+ - `warning`
package/dist/components/UTStatusMessage/constants.js ADDED
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ICON_COLOR_THEMES = exports.COLOR_THEMES = void 0;
7
+ const COLOR_THEMES = exports.COLOR_THEMES = {
8
+ ACCENT: 'accent',
9
+ DEFAULT: 'default',
10
+ ERROR: 'error',
11
+ GRADIENT: 'gradient',
12
+ GRAY: 'gray',
13
+ IDENTITY_1: 'identity1',
14
+ IDENTITY_2: 'identity2',
15
+ IDENTITY_3: 'identity3',
16
+ IDENTITY_4: 'identity4',
17
+ INFO: 'info',
18
+ NEGATIVE: 'negative',
19
+ SUCCESS: 'success',
20
+ WARNING: 'warning'
21
+ };
22
+ const ICON_COLOR_THEMES = exports.ICON_COLOR_THEMES = {
23
+ [COLOR_THEMES.ACCENT]: 'accent',
24
+ [COLOR_THEMES.DEFAULT]: 'dark',
25
+ [COLOR_THEMES.ERROR]: 'error',
26
+ [COLOR_THEMES.GRADIENT]: 'light',
27
+ [COLOR_THEMES.GRAY]: 'gray',
28
+ [COLOR_THEMES.IDENTITY_1]: 'light',
29
+ [COLOR_THEMES.IDENTITY_2]: 'light',
30
+ [COLOR_THEMES.IDENTITY_3]: 'light',
31
+ [COLOR_THEMES.IDENTITY_4]: 'light',
32
+ [COLOR_THEMES.INFO]: 'information',
33
+ [COLOR_THEMES.NEGATIVE]: 'dark',
34
+ [COLOR_THEMES.SUCCESS]: 'success',
35
+ [COLOR_THEMES.WARNING]: 'warning'
36
+ };
package/dist/components/UTStatusMessage/index.js ADDED
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _propTypes = require("prop-types");
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _UTButton = _interopRequireDefault(require("../UTButton"));
10
+ var _UTIcon = _interopRequireDefault(require("../UTIcon"));
11
+ var _UTLabel = _interopRequireDefault(require("../UTLabel"));
12
+ var _UTLoading = _interopRequireDefault(require("../UTLoading"));
13
+ var _WithTheme = _interopRequireDefault(require("../WithTheme"));
14
+ var _constants = require("./constants");
15
+ var _theme = require("./theme");
16
+ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
17
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
18
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
19
+ const UTStatusMessage = _ref => {
20
+ let {
21
+ children,
22
+ classes,
23
+ colorTheme = _constants.COLOR_THEMES.DEFAULT,
24
+ description,
25
+ descriptionProps,
26
+ helpText,
27
+ helpTextProps,
28
+ icon = 'IconInfoCircle',
29
+ iconProps = {},
30
+ image,
31
+ loading,
32
+ primaryAction,
33
+ primaryActionProps,
34
+ primaryActionText,
35
+ secondaryAction,
36
+ secondaryActionProps,
37
+ secondaryActionText,
38
+ showHeader = true,
39
+ title,
40
+ titleProps
41
+ } = _ref;
42
+ return /*#__PURE__*/_react.default.createElement("div", {
43
+ className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
44
+ }, loading ? /*#__PURE__*/_react.default.createElement(_UTLoading.default, {
45
+ loading: true,
46
+ text: null
47
+ }) : showHeader ? /*#__PURE__*/_react.default.createElement("div", {
48
+ className: classes.banner
49
+ }, image ? /*#__PURE__*/_react.default.createElement("img", {
50
+ src: image,
51
+ className: "".concat(_stylesModule.default.image, " ").concat(classes.image),
52
+ alt: ""
53
+ }) : /*#__PURE__*/_react.default.createElement("div", {
54
+ className: classes.iconContainer
55
+ }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
56
+ name: icon,
57
+ colorTheme: _constants.ICON_COLOR_THEMES[colorTheme]
58
+ }, iconProps)))) : null, /*#__PURE__*/_react.default.createElement("div", {
59
+ className: "".concat(_stylesModule.default.content, " ").concat(classes.content)
60
+ }, (title || description || helpText) && /*#__PURE__*/_react.default.createElement("div", {
61
+ className: _stylesModule.default.section
62
+ }, title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
63
+ className: _stylesModule.default.label,
64
+ variant: "title3",
65
+ weight: "medium"
66
+ }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
67
+ className: _stylesModule.default.label,
68
+ colorTheme: "gray",
69
+ variant: "body"
70
+ }, descriptionProps), description), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
71
+ className: _stylesModule.default.label,
72
+ colorTheme: "gray",
73
+ variant: "small"
74
+ }, helpTextProps), helpText)), children, (primaryAction || secondaryAction) && /*#__PURE__*/_react.default.createElement("div", {
75
+ className: _stylesModule.default.section
76
+ }, primaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
77
+ onClick: primaryAction
78
+ }, primaryActionProps), primaryActionText), secondaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
79
+ onClick: secondaryAction,
80
+ variant: "text"
81
+ }, secondaryActionProps), secondaryActionText))));
82
+ };
83
+ UTStatusMessage.propTypes = {
84
+ children: _propTypes.element,
85
+ classes: _propTypes.object,
86
+ colorTheme: _propTypes.string,
87
+ description: _propTypes.string,
88
+ descriptionProps: _propTypes.object,
89
+ helpText: _propTypes.string,
90
+ helpTextProps: _propTypes.object,
91
+ icon: _propTypes.string,
92
+ iconProps: _propTypes.object,
93
+ image: _propTypes.string,
94
+ loading: _propTypes.bool,
95
+ primaryAction: _propTypes.func,
96
+ primaryActionProps: _propTypes.object,
97
+ primaryActionText: _propTypes.string,
98
+ secondaryAction: _propTypes.func,
99
+ secondaryActionProps: _propTypes.object,
100
+ secondaryActionText: _propTypes.string,
101
+ showHeader: _propTypes.bool,
102
+ title: _propTypes.string,
103
+ titleProps: _propTypes.object
104
+ };
105
+ var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStatusMessage);
package/dist/components/UTStatusMessage/styles.module.scss ADDED
@@ -0,0 +1,37 @@
1
+ .container {
2
+ align-items: center;
3
+ display: flex;
4
+ flex-direction: column;
5
+ flex-grow: 1;
6
+ grid-gap: 24px;
7
+ justify-content: center;
8
+ width: 100%;
9
+ }
10
+
11
+ .content {
12
+ align-items: center;
13
+ display: flex;
14
+ flex-direction: column;
15
+ flex-grow: 1;
16
+ grid-gap: 24px;
17
+ justify-content: center;
18
+ max-width: 500px;
19
+ width: 100%;
20
+ }
21
+
22
+ .section {
23
+ align-items: center;
24
+ display: flex;
25
+ flex-direction: column;
26
+ grid-gap: 8px;
27
+ justify-content: center;
28
+ }
29
+
30
+ .label {
31
+ text-align: center;
32
+ }
33
+
34
+ .image {
35
+ height: 200px;
36
+ width: 200px;
37
+ }
package/dist/components/UTStatusMessage/theme.js ADDED
@@ -0,0 +1,74 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.retrieveStyle = void 0;
7
+ var _constants = require("./constants");
8
+ const getIconBackgroundColor = (colorTheme, theme) => {
9
+ var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11, _theme$Palette12;
10
+ return {
11
+ [_constants.COLOR_THEMES.ACCENT]: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01'],
12
+ [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['03'],
13
+ [_constants.COLOR_THEMES.ERROR]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.error['01'],
14
+ [_constants.COLOR_THEMES.GRADIENT]: 'light',
15
+ [_constants.COLOR_THEMES.GRAY]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03'],
16
+ [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 || (_theme$Palette5 = _theme$Palette5.identitySolid) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5['01'],
17
+ [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['02'],
18
+ [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['03'],
19
+ [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['04'],
20
+ [_constants.COLOR_THEMES.INFO]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9.information['01'],
21
+ [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.light['01'],
22
+ [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.success['01'],
23
+ [_constants.COLOR_THEMES.WARNING]: (_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.warning['01']
24
+ }[colorTheme];
25
+ };
26
+ const getBannerBackgroundColor = (colorTheme, theme) => {
27
+ var _theme$Palette13, _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24;
28
+ return {
29
+ [_constants.COLOR_THEMES.ACCENT]: (_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.accent['03'],
30
+ [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.gray['05'],
31
+ [_constants.COLOR_THEMES.ERROR]: (_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.error['03'],
32
+ [_constants.COLOR_THEMES.GRADIENT]: null,
33
+ [_constants.COLOR_THEMES.GRAY]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['03'],
34
+ [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 || (_theme$Palette17 = _theme$Palette17.identitySolid) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17['01'],
35
+ [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 || (_theme$Palette18 = _theme$Palette18.identitySolid) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18['02'],
36
+ [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['03'],
37
+ [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['04'],
38
+ [_constants.COLOR_THEMES.INFO]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21.information['03'],
39
+ [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22.light['01'],
40
+ [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.success['03'],
41
+ [_constants.COLOR_THEMES.WARNING]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.warning['03']
42
+ }[colorTheme];
43
+ };
44
+ const retrieveStyle = _ref => {
45
+ var _theme$Palette25, _theme$Palette26;
46
+ let {
47
+ showBanner = true,
48
+ theme,
49
+ colorTheme = _constants.COLOR_THEMES.DEFAULT
50
+ } = _ref;
51
+ const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
52
+ return {
53
+ iconContainer: {
54
+ alignItems: 'center',
55
+ background: colorTheme === _constants.COLOR_THEMES.GRADIENT && !showBanner ? gradient : '',
56
+ backgroundColor: getIconBackgroundColor(colorTheme, theme),
57
+ borderRadius: 100,
58
+ display: 'flex',
59
+ height: 56,
60
+ justifyContent: 'center',
61
+ width: 56
62
+ },
63
+ banner: {
64
+ alignItems: 'center',
65
+ background: colorTheme === _constants.COLOR_THEMES.GRADIENT && showBanner ? gradient : '',
66
+ backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
67
+ display: 'flex',
68
+ justifyContent: 'center',
69
+ padding: '12px 0',
70
+ width: '100%'
71
+ }
72
+ };
73
+ };
74
+ exports.retrieveStyle = retrieveStyle;
package/dist/index.js CHANGED
@@ -321,6 +321,12 @@ Object.defineProperty(exports, "UTStatus", {
321
321
  return _UTStatus.default;
322
322
  }
323
323
  });
324
+ Object.defineProperty(exports, "UTStatusMessage", {
325
+ enumerable: true,
326
+ get: function () {
327
+ return _UTStatusMessage.default;
328
+ }
329
+ });
324
330
  Object.defineProperty(exports, "UTSwitch", {
325
331
  enumerable: true,
326
332
  get: function () {
@@ -477,6 +483,7 @@ var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectabl
477
483
  var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
478
484
  var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
479
485
  var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
486
+ var _UTStatusMessage = _interopRequireDefault(require("./components/UTStatusMessage"));
480
487
  var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));
481
488
  var _UTTable = _interopRequireDefault(require("./components/UTTable"));
482
489
  var _UTTabs = _interopRequireDefault(require("./components/UTTabs"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@widergy/energy-ui",
3
- "version": "3.38.1",
3
+ "version": "3.39.0",
4
4
  "description": "Widergy Web Components",
5
5
  "author": "widergy",
6
6
  "license": "MIT",