@widergy/energy-ui 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.0.2](https://github.com/widergy/energy-ui/compare/v2.0.1...v2.0.2) (2023-02-03)
+
+
+### Bug Fixes
+
+* fixed error color on inputs ([43396d2](https://github.com/widergy/energy-ui/commit/43396d283c265612851635ebf06a04b7392404cc))
+* minor change ([d7d52df](https://github.com/widergy/energy-ui/commit/d7d52df9755ee90414d63093ab987594b074b9c2))
+* standarization fixes ([e0699c0](https://github.com/widergy/energy-ui/commit/e0699c03f4a122f211a7d2039fdafd81f178100b))
+
 ## [2.0.1](https://github.com/widergy/energy-ui/compare/v2.0.0...v2.0.1) (2023-02-03)
 
 

package/dist/components/UTAutocomplete/theme.js

@@ -61,6 +61,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           },
           '&:after': {
             borderBottom: ((_theme$UTTextInput14 = theme.UTTextInput) === null || _theme$UTTextInput14 === void 0 ? void 0 : (_theme$UTTextInput14$ = _theme$UTTextInput14.underline) === null || _theme$UTTextInput14$ === void 0 ? void 0 : (_theme$UTTextInput14$2 = _theme$UTTextInput14$.base) === null || _theme$UTTextInput14$2 === void 0 ? void 0 : _theme$UTTextInput14$2.borderBottom) || "2px solid ".concat(_colors.default.primary)
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTButton/index.js

@@ -44,13 +44,13 @@ var UTButton = function UTButton(_ref) {
     rightIcon = classes.rightIcon,
     materialButtonClasses = _objectWithoutProperties(classes, _excluded);
   var RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n        ".concat(childrenContainer, "\n        ").concat(_stylesModule.default.childrenContainer, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!children && _stylesModule.default.withoutText, "\n      ")
+    className: "\n        ".concat(childrenContainer, "\n        ").concat(_stylesModule.default.childrenContainer, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n      ")
   }, iconPlacement === _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: "".concat(icon, " ").concat(leftIcon, " ").concat(_stylesModule.default.icon)
+    className: "".concat(icon, " ").concat(leftIcon, " ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly)
   }), children && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.text, " ").concat(classes.text)
   }, children), iconPlacement !== _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: "".concat(icon, " ").concat(rightIcon, " ").concat(_stylesModule.default.icon)
+    className: "".concat(icon, " ").concat(rightIcon, " ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly)
   }));
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: disabled || loading,

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

@@ -13,16 +13,20 @@
 }
 
 .icon {
+  box-sizing: border-box;
   flex-shrink: 0;
-  font-size: 24px;
-  height: 24px;
-  width: 24px;
+  font-size: 1.25rem;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
-.withoutText {
-  .icon {
-    margin: 0 -4px;
-  }
+.iconOnly {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  height: 1.5rem;
+  margin: 0 -4px;
+  width: 1.5rem;
 }
 
 .childrenContainer {

package/dist/components/UTCheckList/index.js

@@ -107,7 +107,7 @@ var UTCheckList = function UTCheckList(_ref) {
     onChange: handleCheckAll,
     value: list.length === input.value.length,
     label: header ? headerLabel : additionalInfo && additionalInfo.header || _constants.defaultAdditionalInfoHeader,
-    classes: {
+    classNames: {
       root: !header && classes.selectAllRowRoot,
       checkedIcon: classes.checkedIcon,
       uncheckedIcon: classes.uncheckedIcon
@@ -132,7 +132,7 @@ var UTCheckList = function UTCheckList(_ref) {
         return handleChange(item[valueKey]);
       },
       customRowLabel: CustomRowLabel,
-      classes: {
+      classNames: {
         root: !withCheckRow && classes.customRowRoot,
         checkedIcon: classes.checkedIcon,
         uncheckedIcon: classes.uncheckedIcon,

package/dist/components/UTCuit/theme.js

@@ -34,6 +34,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTDatePicker/theme.js

@@ -171,6 +171,10 @@ var materialTheme = function materialTheme(theme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTExternalLink/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
+var DEFAULT_PROPS = {
+  colorTheme: 'secondary'
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;
+var COLORS_MAPPER = {
+  primary: 'accent',
+  secondary: 'neutral',
+  error: 'error',
+  negative: 'negative'
+};
+exports.COLORS_MAPPER = COLORS_MAPPER;

package/dist/components/UTExternalLink/index.js

@@ -6,17 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var UTExternalLink = function UTExternalLink(_ref) {
-  var url = _ref.url,
-    children = _ref.children,
+  var children = _ref.children,
+    classes = _ref.classes,
     className = _ref.className,
-    openProps = _ref.openProps;
+    openProps = _ref.openProps,
+    url = _ref.url;
   return /*#__PURE__*/_react.default.createElement("a", {
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: className,
+    className: "".concat(classes.root, " ").concat(className),
     onClick: openProps && function (event) {
       event.preventDefault();
       var openUrl = openProps.openUrl,
@@ -30,14 +33,15 @@ var UTExternalLink = function UTExternalLink(_ref) {
   }, children);
 };
 UTExternalLink.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
-  url: _propTypes.string.isRequired,
   openProps: (0, _propTypes.shape)({
     openUrl: _propTypes.string,
     targetName: _propTypes.string,
     options: _propTypes.string,
     replace: _propTypes.string
-  })
+  }),
+  url: _propTypes.string.isRequired
 };
-var _default = UTExternalLink;
+var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTExternalLink);
 exports.default = _default;

package/dist/components/UTExternalLink/theme.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _classesUtils = require("../../utils/classesUtils");
+var _constants = require("./constants");
+var variantsColorTheme = function variantsColorTheme(colorTheme, theme) {
+  var actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
+  var actionTheme = theme.Palette.actions[actionColorName];
+  return actionTheme['05'];
+};
+exports.variantsColorTheme = variantsColorTheme;
+var retrieveStyle = function retrieveStyle(_ref) {
+  var colorTheme = _ref.colorTheme,
+    theme = _ref.theme;
+  return {
+    root: {
+      color: (0, _classesUtils.withImportant)(variantsColorTheme(colorTheme, theme))
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTLabel/constants.js

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.SHADES = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable react/prop-types */
 
+var SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+exports.SHADES = SHADES;
 var VARIANTS = {
   title1: 'h1',
   title2: 'h2',

package/dist/components/UTLabel/theme.js

@@ -7,26 +7,30 @@ exports.variantsColorTheme = exports.retrieveStyle = exports.linkColor = void 0;
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var variantsColorTheme = function variantsColorTheme(theme, colorTheme) {
+var getDefaultColorShade = function getDefaultColorShade(colorTheme) {
+  return colorTheme === _constants.COLOR_THEMES.gray ? _constants.SHADES.shade04 : colorTheme === _constants.COLOR_THEMES.light ? _constants.SHADES.shade01 : _constants.SHADES.shade05;
+};
+var variantsColorTheme = function variantsColorTheme(colorTheme, shade, theme) {
   var colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
-  var colorNumber = colorTheme === _constants.COLOR_THEMES.gray ? '04' : colorTheme === _constants.COLOR_THEMES.light ? '01' : '05';
-  return colorThemeDefinition[colorNumber] || _colors.default.black;
+  var colorShade = Object.values(_constants.SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  return colorThemeDefinition[colorShade] || _colors.default.black;
 };
 exports.variantsColorTheme = variantsColorTheme;
 var linkColor = function linkColor(theme, colorTheme) {
-  var color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative['05'] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error['05'] : theme.Palette.actions.neutral['05'];
+  var color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative[_constants.SHADES.shade05] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error[_constants.SHADES.shade05] : theme.Palette.actions.neutral[_constants.SHADES.shade05];
   return color;
 };
 exports.linkColor = linkColor;
 var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$Fonts;
   var colorTheme = _ref.colorTheme,
+    shade = _ref.shade,
     theme = _ref.theme,
     variant = _ref.variant,
     weight = _ref.weight;
   return {
     root: {
-      color: variantsColorTheme(theme, colorTheme),
+      color: variantsColorTheme(colorTheme, shade, theme),
       fontFamily: theme === null || theme === void 0 ? void 0 : (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
       fontSize: _constants.VARIANTS_SIZES[variant] || _constants.VARIANTS_SIZES[_constants.DEFAULT_PROPS.variant],
       fontWeight: _constants.WEIGHTS[weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],

package/dist/components/UTPhoneInput/theme.js

@@ -103,6 +103,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTSelect/theme.js

@@ -122,6 +122,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.inputPrimary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTTextInput/theme.js

@@ -95,6 +95,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/package.json

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