@widergy/energy-ui 2.0.2 → 2.1.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.1.1](https://github.com/widergy/energy-ui/compare/v2.1.0...v2.1.1) (2023-02-09)
+
+
+### Bug Fixes
+
+* fixes on utbutton styles ([3c3dc8c](https://github.com/widergy/energy-ui/commit/3c3dc8c371e395a6a9bf597fff1885893c002ff7))
+
+# [2.1.0](https://github.com/widergy/energy-ui/compare/v2.0.2...v2.1.0) (2023-02-07)
+
+
+### Features
+
+* utstatus ([#341](https://github.com/widergy/energy-ui/issues/341)) ([0c2663c](https://github.com/widergy/energy-ui/commit/0c2663c7533e5b004b6765bc9ddc61d3959be573))
+
 ## [2.0.2](https://github.com/widergy/energy-ui/compare/v2.0.1...v2.0.2) (2023-02-03)
 
 

package/dist/components/UTButton/index.js

@@ -14,7 +14,7 @@ var _classesUtils = require("../../utils/classesUtils");
 var _constants = require("./constants");
 var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _excluded = ["childrenContainer", "circularProgress", "icon", "leftIcon", "rightIcon"];
+var _excluded = ["childrenContainer", "circularProgress", "icon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -40,17 +40,16 @@ var UTButton = function UTButton(_ref) {
   var childrenContainer = classes.childrenContainer,
     circularProgress = classes.circularProgress,
     icon = classes.icon,
-    leftIcon = classes.leftIcon,
-    rightIcon = classes.rightIcon,
     materialButtonClasses = _objectWithoutProperties(classes, _excluded);
+  var iconClassname = "\n    ".concat(_stylesModule.default.baseIcon, "\n    ").concat(icon, "\n    ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly, "\n    ").concat(hideTextOnResponsive && _stylesModule.default.adaptableIcon, "\n  ");
   var RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n        ".concat(childrenContainer, "\n        ").concat(_stylesModule.default.childrenContainer, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n      ")
+    className: "\n        ".concat(childrenContainer, "\n        ").concat(_stylesModule.default.childrenContainer, "\n      ")
   }, iconPlacement === _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: "".concat(icon, " ").concat(leftIcon, " ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly)
+    className: iconClassname
   }), children && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.text, " ").concat(classes.text)
+    className: "".concat(_stylesModule.default.text, " ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, " ").concat(classes.text)
   }, children), iconPlacement !== _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: "".concat(icon, " ").concat(rightIcon, " ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly)
+    className: iconClassname
   }));
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: disabled || loading,

package/dist/components/UTButton/styles.module.scss

@@ -1,32 +1,46 @@
 @import '../../scss/variables/mediaQueries';
 
+$big-icon: 1.5rem;
+$small-icon: 1.25rem;
+
 .hideTextOnResponsive {
   @media #{$mobile} {
-    .text {
-      display: none;
-    }
+    display: none;
+  }
+}
 
-    .icon {
-      margin: 0 -4px;
-    }
+.text {
+  .baseIcon + &,
+  & + .baseIcon {
+    margin-left: 8px;
   }
 }
 
-.icon {
+.baseIcon {
   box-sizing: border-box;
   flex-shrink: 0;
-  font-size: 1.25rem;
-  height: 1.25rem;
-  width: 1.25rem;
+}
+
+.icon {
+  font-size: $small-icon;
+  height: $small-icon;
+  width: $small-icon;
 }
 
 .iconOnly {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  height: 1.5rem;
+  font-size: $big-icon;
+  height: $big-icon;
   margin: 0 -4px;
-  width: 1.5rem;
+  width: $big-icon;
+}
+
+.adaptableIcon {
+  @media #{$mobile} {
+    font-size: $big-icon;
+    height: $big-icon;
+    margin: 0 -4px;
+    width: $big-icon;
+  }
 }
 
 .childrenContainer {

package/dist/components/UTButton/theme.js

@@ -147,12 +147,6 @@ var baseButtonTheme = function baseButtonTheme(theme) {
       fontWeight: '500',
       padding: '4px 8px'
     },
-    leftIcon: {
-      marginRight: '8px'
-    },
-    rightIcon: {
-      marginLeft: '8px'
-    },
     circularProgress: {
       color: ((_theme$UTButton = theme.UTButton) === null || _theme$UTButton === void 0 ? void 0 : (_theme$UTButton$circu = _theme$UTButton.circularProgress) === null || _theme$UTButton$circu === void 0 ? void 0 : _theme$UTButton$circu.color) || '484848'
     }

package/dist/components/UTStatus/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPES = exports.SIZES = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+var SIZES = {
+  medium: 'small',
+  large: 'body'
+};
+exports.SIZES = SIZES;
+var COLOR_THEMES = {
+  error: 'error',
+  information: 'information',
+  success: 'success',
+  unassigned: 'unassigned',
+  warning: 'warning'
+};
+exports.COLOR_THEMES = COLOR_THEMES;
+var TYPES = {
+  default: 'default',
+  light: 'light',
+  negative: 'negative'
+};
+exports.TYPES = TYPES;
+var DEFAULT_PROPS = {
+  colorTheme: 'success',
+  size: 'medium',
+  type: 'default'
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;

package/dist/components/UTStatus/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/no-children-prop */
+
+var UTStatus = function UTStatus(_ref) {
+  var children = _ref.children,
+    classes = _ref.classes,
+    className = _ref.className,
+    colorTheme = _ref.colorTheme,
+    Icon = _ref.Icon,
+    size = _ref.size,
+    title = _ref.title,
+    type = _ref.type;
+  return children == null && !Icon ? null : /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.root, " ").concat(className),
+    title: title
+  }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+    className: classes.icon
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.label,
+    variant: _constants.SIZES[size] || _constants.SIZES[_constants.DEFAULT_PROPS.size],
+    colorTheme: (0, _theme.getLabelTheme)((0, _theme.validateProps)({
+      colorTheme: colorTheme,
+      type: type
+    })),
+    weight: "medium"
+  }, children)));
+};
+UTStatus.defaultProps = _constants.DEFAULT_PROPS;
+UTStatus.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  colorTheme: _propTypes.string,
+  Icon: _propTypes.elementType,
+  size: _propTypes.string,
+  title: _propTypes.string,
+  type: _propTypes.string
+};
+var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStatus);
+exports.default = _default;

package/dist/components/UTStatus/theme.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateProps = exports.retrieveStyle = exports.getLabelTheme = void 0;
+var _constants = require("./constants");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var getBackgroundColor = function getBackgroundColor(_ref) {
+  var theme = _ref.theme,
+    type = _ref.type,
+    colorTheme = _ref.colorTheme;
+  return colorTheme !== _constants.COLOR_THEMES.unassigned ? theme.Palette[colorTheme][type === _constants.TYPES.negative ? '04' : '01'] : type === _constants.TYPES.negative ? theme.Palette.gray['04'] : theme.Palette.light['04'];
+};
+var getIconFill = function getIconFill(_ref2) {
+  var _TYPES$default$TYPES$;
+  var theme = _ref2.theme,
+    type = _ref2.type,
+    colorTheme = _ref2.colorTheme;
+  return (_TYPES$default$TYPES$ = {}, _defineProperty(_TYPES$default$TYPES$, _constants.TYPES.default, theme.Palette.dark['05']), _defineProperty(_TYPES$default$TYPES$, _constants.TYPES.light, theme.Palette[colorTheme !== _constants.COLOR_THEMES.unassigned ? colorTheme : 'gray']['05']), _defineProperty(_TYPES$default$TYPES$, _constants.TYPES.negative, theme.Palette.light['01']), _TYPES$default$TYPES$)[type];
+};
+var validateProps = function validateProps(_ref3) {
+  var colorTheme = _ref3.colorTheme,
+    type = _ref3.type;
+  return {
+    type: _constants.TYPES[type] || _constants.TYPES[_constants.DEFAULT_PROPS.type],
+    colorTheme: _constants.COLOR_THEMES[colorTheme] || _constants.COLOR_THEMES[_constants.DEFAULT_PROPS.colorTheme]
+  };
+};
+exports.validateProps = validateProps;
+var retrieveStyle = function retrieveStyle(_ref4) {
+  var colorTheme = _ref4.colorTheme,
+    theme = _ref4.theme,
+    Icon = _ref4.Icon,
+    type = _ref4.type,
+    uppercase = _ref4.uppercase;
+  return {
+    root: {
+      alignItems: 'center',
+      backgroundColor: getBackgroundColor(_objectSpread({
+        theme: theme
+      }, validateProps({
+        colorTheme: colorTheme,
+        type: type
+      }))),
+      borderRadius: '4px',
+      display: 'flex',
+      height: 'fit-content',
+      padding: '4px 8px',
+      width: 'fit-content'
+    },
+    label: _objectSpread(_objectSpread({}, uppercase ? {
+      textTransform: 'uppercase'
+    } : {}), Icon ? {
+      marginLeft: '8px !important'
+    } : {}),
+    icon: {
+      height: '1.25rem',
+      width: '1.25rem',
+      '& path': {
+        fill: getIconFill(_objectSpread({
+          theme: theme
+        }, validateProps({
+          colorTheme: colorTheme,
+          type: type
+        })))
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;
+var getLabelTheme = function getLabelTheme(_ref5) {
+  var _TYPES$default$TYPES$2;
+  var type = _ref5.type,
+    colorTheme = _ref5.colorTheme;
+  return (_TYPES$default$TYPES$2 = {}, _defineProperty(_TYPES$default$TYPES$2, _constants.TYPES.default, 'dark'), _defineProperty(_TYPES$default$TYPES$2, _constants.TYPES.light, colorTheme !== _constants.COLOR_THEMES.unassigned ? colorTheme : 'gray'), _defineProperty(_TYPES$default$TYPES$2, _constants.TYPES.negative, 'light'), _TYPES$default$TYPES$2)[type];
+};
+exports.getLabelTheme = getLabelTheme;

package/dist/index.js

@@ -243,6 +243,12 @@ Object.defineProperty(exports, "UTSkeleton", {
     return _UTSkeleton.default;
   }
 });
+Object.defineProperty(exports, "UTStatus", {
+  enumerable: true,
+  get: function get() {
+    return _UTStatus.default;
+  }
+});
 Object.defineProperty(exports, "UTSwitch", {
   enumerable: true,
   get: function get() {
@@ -327,58 +333,59 @@ Object.defineProperty(exports, "componentUtils", {
     return _componentUtils.default;
   }
 });
-var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
-var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
 var _AlertHandler = _interopRequireDefault(require("./components/UTAlert/AlertHandler"));
+var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
+var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
+var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
+var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTAutocomplete = _interopRequireDefault(require("./components/UTAutocomplete"));
+var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
+var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));
+var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
 var _UTButton = _interopRequireDefault(require("./components/UTButton"));
 var _UTCaptcha = _interopRequireDefault(require("./components/UTCaptcha"));
 var _UTCard = _interopRequireDefault(require("./components/UTCard"));
+var _UTCarousel = _interopRequireDefault(require("./components/UTCarousel"));
+var _UTCBUInput = _interopRequireDefault(require("./components/UTCBUInput"));
+var _UTCheckbox = _interopRequireDefault(require("./components/UTCheckbox"));
+var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
+var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
 var _UTCuit = _interopRequireDefault(require("./components/UTCuit"));
+var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
+var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));
+var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
+var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
+var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
+var _UTFileInput = _interopRequireDefault(require("./components/UTFileInput"));
 var _UTIconButton = _interopRequireDefault(require("./components/UTIconButton"));
 var _UTImageRadio = _interopRequireDefault(require("./components/UTImageRadio"));
-var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
 var _UTLabel = _interopRequireDefault(require("./components/UTLabel"));
+var _UTList = _interopRequireDefault(require("./components/UTList"));
 var _UTLoading = _interopRequireDefault(require("./components/UTLoading"));
-var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
+var _UTMap = _interopRequireDefault(require("./components/UTMap"));
+var _UTMenu = _interopRequireDefault(require("./components/UTMenu"));
+var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
+var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
+var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
+var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
+var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
 var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
+var _UTRating = _interopRequireDefault(require("./components/UTRating"));
 var _UTSelect = _interopRequireDefault(require("./components/UTSelect"));
-var _UTMap = _interopRequireDefault(require("./components/UTMap"));
-var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtualizedList"));
-var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));
-var _UTTouchableWithoutFeedback = _interopRequireDefault(require("./components/UTTouchableWithoutFeedback"));
-var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
+var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
+var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
+var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
+var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));
+var _UTTable = _interopRequireDefault(require("./components/UTTable"));
+var _UTTabs = _interopRequireDefault(require("./components/UTTabs"));
+var _UTTextArea = _interopRequireDefault(require("./components/UTTextArea"));
+var _UTTextInput = _interopRequireDefault(require("./components/UTTextInput"));
 var _UTThirdPartyCookieChecker = _interopRequireDefault(require("./components/UTThirdPartyCookieChecker"));
 var _UTToggle = _interopRequireDefault(require("./components/UTToggle"));
-var _UTList = _interopRequireDefault(require("./components/UTList"));
-var _UTFileInput = _interopRequireDefault(require("./components/UTFileInput"));
-var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
-var _UTCBUInput = _interopRequireDefault(require("./components/UTCBUInput"));
-var _UTTextInput = _interopRequireDefault(require("./components/UTTextInput"));
-var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTTooltip = _interopRequireDefault(require("./components/UTTooltip"));
-var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
-var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
-var _UTCarousel = _interopRequireDefault(require("./components/UTCarousel"));
-var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
-var _UTCheckbox = _interopRequireDefault(require("./components/UTCheckbox"));
-var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
-var _UTTextArea = _interopRequireDefault(require("./components/UTTextArea"));
-var _UTRating = _interopRequireDefault(require("./components/UTRating"));
-var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("./components/UTTouchableWithoutFeedback"));
+var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtualizedList"));
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
-var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));
-var _UTTabs = _interopRequireDefault(require("./components/UTTabs"));
-var _UTMenu = _interopRequireDefault(require("./components/UTMenu"));
-var _UTTable = _interopRequireDefault(require("./components/UTTable"));
-var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
-var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
-var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
-var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));
-var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
-var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
-var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
-var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
-var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
-var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
+var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
+var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",