@widergy/energy-ui 1.115.5 → 1.116.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.116.0](https://github.com/widergy/energy-ui/compare/v1.115.5...v1.116.0) (2022-04-11)
+
+
+### Features
+
+* utalert theme improvements and uttooltip theme ([#276](https://github.com/widergy/energy-ui/issues/276)) ([48778ed](https://github.com/widergy/energy-ui/commit/48778ed14aa0cdc803a4a9e6abdfe3137ca26278))
+
 ## [1.115.5](https://github.com/widergy/energy-ui/compare/v1.115.4...v1.115.5) (2022-04-07)
 
 

package/dist/components/UTAlert/index.js

@@ -123,7 +123,9 @@ var UTAlert = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           _this$props2$content = _this$props2.content,
           alert = _this$props2$content === void 0 ? {} : _this$props2$content,
-          withoutIcon = _this$props2.withoutIcon;
+          withoutIcon = _this$props2.withoutIcon,
+          _this$props2$classes = _this$props2.classes,
+          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes;
       var anchor = {
         vertical: alert.topRight ? 'top' : 'bottom',
         horizontal: alert.topRight ? 'right' : 'left'
@@ -143,20 +145,23 @@ var UTAlert = /*#__PURE__*/function (_PureComponent) {
           root: _stylesModule.default.snackbarRoot
         },
         ContentProps: {
-          className: "".concat(_stylesModule.default.snackbarContent, " ").concat(this.selectAlertType()),
+          className: "".concat(_stylesModule.default.snackbarContent, " ").concat(classes.snackbarContent, " ").concat(this.selectAlertType()),
           classes: {
             action: _stylesModule.default.action,
             message: _stylesModule.default.message
           }
         },
         message: /*#__PURE__*/_react.default.createElement("div", {
-          className: _stylesModule.default.content
+          className: "".concat(_stylesModule.default.content, " ").concat(classes.content)
         }, !withoutIcon && AlertTypeIcon && /*#__PURE__*/_react.default.createElement(AlertTypeIcon, {
           classes: {
             root: _stylesModule.default.alertTypeIcon
           }
         }), alert.message),
         action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
+          classes: {
+            root: classes.action
+          },
           key: "close",
           color: "inherit",
           onClick: this.handleClose

package/dist/components/UTAlert/theme.js

@@ -26,6 +26,17 @@ var retrieveStyle = function retrieveStyle(theme) {
     },
     warning: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'warning', 'backgroundColor'], _colors.default.notificationWarning)
+    },
+    action: {
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'action', 'padding']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'action', 'margin'])
+    },
+    snackbarContent: {
+      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'content', 'minWidth'])
+    },
+    content: {
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'content', 'fontSize']),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'content', 'fontWeight'])
     }
   };
 };

package/dist/components/UTTooltip/index.js

@@ -19,8 +19,14 @@ var _propTypes = require("prop-types");
 
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+
+var _classesUtils = require("../../utils/classesUtils");
+
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
+var _theme = require("./theme");
+
 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); }
@@ -29,92 +35,66 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var UTTooltip = /*#__PURE__*/function (_Component) {
-  _inherits(UTTooltip, _Component);
-
-  var _super = _createSuper(UTTooltip);
-
-  function UTTooltip() {
-    _classCallCheck(this, UTTooltip);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(UTTooltip, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          content = _this$props.content,
-          stringContentProps = _this$props.stringContentProps,
-          stringContentClassName = _this$props.stringContentClassName,
-          _this$props$hideOnCli = _this$props.hideOnClick,
-          hideOnClick = _this$props$hideOnCli === void 0 ? false : _this$props$hideOnCli,
-          _this$props$arrow = _this$props.arrow,
-          arrow = _this$props$arrow === void 0 ? true : _this$props$arrow,
-          _this$props$duration = _this$props.duration,
-          duration = _this$props$duration === void 0 ? [600, 350] : _this$props$duration,
-          _this$props$inertia = _this$props.inertia,
-          inertia = _this$props$inertia === void 0 ? true : _this$props$inertia,
-          tippyProps = _this$props.tippyProps,
-          _this$props$interacti = _this$props.interactive,
-          interactive = _this$props$interacti === void 0 ? true : _this$props$interacti,
-          className = _this$props.className;
-      if (!content) return children;
-      return /*#__PURE__*/_react.default.createElement(_react2.default, _extends({
-        animation: "shift-toward",
-        inertia: inertia,
-        duration: duration,
-        arrow: arrow,
-        hideOnClick: hideOnClick,
-        className: className,
-        interactive: interactive
-      }, tippyProps, {
-        content: /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, stringContentProps, {
-          className: "".concat(_stylesModule.default.baseContent, " ").concat(stringContentClassName)
-        }), content)
-      }), children);
-    }
-  }]);
-
-  return UTTooltip;
-}(_react.Component);
+var UTTooltip = function UTTooltip(_ref) {
+  var _ref$arrow = _ref.arrow,
+      arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+      children = _ref.children,
+      themeStyles = _ref.classes,
+      className = _ref.className,
+      content = _ref.content,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? [600, 350] : _ref$duration,
+      forceArrow = _ref.forceArrow,
+      _ref$hideOnClick = _ref.hideOnClick,
+      hideOnClick = _ref$hideOnClick === void 0 ? false : _ref$hideOnClick,
+      _ref$inertia = _ref.inertia,
+      inertia = _ref$inertia === void 0 ? true : _ref$inertia,
+      _ref$interactive = _ref.interactive,
+      interactive = _ref$interactive === void 0 ? true : _ref$interactive,
+      stringContentClassName = _ref.stringContentClassName,
+      stringContentProps = _ref.stringContentProps,
+      tippyProps = _ref.tippyProps;
+  var theme = (0, _react.useMemo)(function () {
+    return (0, _classesUtils.mergeClasses)(themeStyles, {
+      container: className,
+      stringContent: stringContentClassName
+    });
+  }, [className, stringContentClassName]);
+  if (!content) return children;
+  return /*#__PURE__*/_react.default.createElement(_react2.default, _extends({
+    animation: "shift-toward",
+    inertia: inertia,
+    duration: duration,
+    arrow: arrow,
+    hideOnClick: hideOnClick,
+    className: "".concat(theme.container, " ").concat(forceArrow && _stylesModule.default.arrow),
+    interactive: interactive
+  }, tippyProps, {
+    content: /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, stringContentProps, {
+      className: "".concat(_stylesModule.default.baseContent, " ").concat(theme.stringContent)
+    }), content)
+  }), children);
+};
 
 UTTooltip.propTypes = {
-  placement: _propTypes.string,
+  arrow: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
-  icon: _propTypes.element,
   content: _propTypes.node,
-  hideOnClick: _propTypes.bool,
-  arrow: _propTypes.bool,
   duration: (0, _propTypes.arrayOf)(_propTypes.number),
+  forceArrow: _propTypes.bool,
+  hideOnClick: _propTypes.bool,
+  icon: _propTypes.element,
   inertia: _propTypes.bool,
   interactive: _propTypes.bool,
+  placement: _propTypes.string,
   stringContentClassName: _propTypes.string,
   stringContentProps: _propTypes.any,
   // eslint-disable-line react/forbid-prop-types
   tippyProps: _propTypes.any // eslint-disable-line react/forbid-prop-types
 
 };
-var _default = UTTooltip;
+
+var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTooltip);
+
 exports.default = _default;

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

@@ -6,3 +6,8 @@
   text-align: left;
 }
 
+.arrow {
+  :global .tippy-arrow {
+    display: block !important;
+  }
+}

package/dist/components/UTTooltip/theme.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+
+var retrieveStyle = function retrieveStyle(theme) {
+  var _theme$UTTooltip, _theme$UTTooltip$cont, _theme$UTTooltip2, _theme$UTTooltip2$con, _theme$UTTooltip3, _theme$UTTooltip3$con, _theme$UTTooltip4, _theme$UTTooltip4$con, _theme$UTTooltip5, _theme$UTTooltip5$arr, _theme$UTTooltip6, _theme$UTTooltip6$str, _theme$UTTooltip7, _theme$UTTooltip7$str, _theme$UTTooltip8, _theme$UTTooltip8$str, _theme$UTTooltip9, _theme$UTTooltip9$str;
+
+  return {
+    container: {
+      backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip = theme.UTTooltip) === null || _theme$UTTooltip === void 0 ? void 0 : (_theme$UTTooltip$cont = _theme$UTTooltip.container) === null || _theme$UTTooltip$cont === void 0 ? void 0 : _theme$UTTooltip$cont.backgroundColor,
+      borderRadius: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip2 = theme.UTTooltip) === null || _theme$UTTooltip2 === void 0 ? void 0 : (_theme$UTTooltip2$con = _theme$UTTooltip2.container) === null || _theme$UTTooltip2$con === void 0 ? void 0 : _theme$UTTooltip2$con.borderRadius,
+      boxShadow: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip3 = theme.UTTooltip) === null || _theme$UTTooltip3 === void 0 ? void 0 : (_theme$UTTooltip3$con = _theme$UTTooltip3.container) === null || _theme$UTTooltip3$con === void 0 ? void 0 : _theme$UTTooltip3$con.boxShadow,
+      padding: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip4 = theme.UTTooltip) === null || _theme$UTTooltip4 === void 0 ? void 0 : (_theme$UTTooltip4$con = _theme$UTTooltip4.container) === null || _theme$UTTooltip4$con === void 0 ? void 0 : _theme$UTTooltip4$con.padding,
+      '& > .tippy-arrow': {
+        display: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip5 = theme.UTTooltip) === null || _theme$UTTooltip5 === void 0 ? void 0 : (_theme$UTTooltip5$arr = _theme$UTTooltip5.arrow) === null || _theme$UTTooltip5$arr === void 0 ? void 0 : _theme$UTTooltip5$arr.display
+      }
+    },
+    stringContent: {
+      fontSize: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip6 = theme.UTTooltip) === null || _theme$UTTooltip6 === void 0 ? void 0 : (_theme$UTTooltip6$str = _theme$UTTooltip6.stringContent) === null || _theme$UTTooltip6$str === void 0 ? void 0 : _theme$UTTooltip6$str.fontSize,
+      fontWeight: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip7 = theme.UTTooltip) === null || _theme$UTTooltip7 === void 0 ? void 0 : (_theme$UTTooltip7$str = _theme$UTTooltip7.stringContent) === null || _theme$UTTooltip7$str === void 0 ? void 0 : _theme$UTTooltip7$str.fontWeight,
+      lineHeight: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip8 = theme.UTTooltip) === null || _theme$UTTooltip8 === void 0 ? void 0 : (_theme$UTTooltip8$str = _theme$UTTooltip8.stringContent) === null || _theme$UTTooltip8$str === void 0 ? void 0 : _theme$UTTooltip8$str.lineHeight,
+      color: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip9 = theme.UTTooltip) === null || _theme$UTTooltip9 === void 0 ? void 0 : (_theme$UTTooltip9$str = _theme$UTTooltip9.stringContent) === null || _theme$UTTooltip9$str === void 0 ? void 0 : _theme$UTTooltip9$str.color
+    }
+  };
+};
+
+exports.retrieveStyle = retrieveStyle;

package/package.json

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