@widergy/energy-ui 3.16.2 → 3.16.4

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [3.16.4](https://github.com/widergy/energy-ui/compare/v3.16.3...v3.16.4) (2024-08-20)
+
+
+### Bug Fixes
+
+* button color & icon ([#476](https://github.com/widergy/energy-ui/issues/476)) ([887a843](https://github.com/widergy/energy-ui/commit/887a843d9cbf077a94b9c5a326409d6956edc9e6))
+
+## [3.16.3](https://github.com/widergy/energy-ui/compare/v3.16.2...v3.16.3) (2024-08-15)
+
+
+### Bug Fixes
+
+* minor fix ([fb0f02b](https://github.com/widergy/energy-ui/commit/fb0f02b855222908be47f67e5ecfe7365fe82ba7))
+* set id ([49f3a97](https://github.com/widergy/energy-ui/commit/49f3a978634188352afbadc68dc9be7f5415bf4a))
+
 ## [3.16.2](https://github.com/widergy/energy-ui/compare/v3.16.1...v3.16.2) (2024-08-14)
 
 

package/dist/components/UTButton/constants.js

@@ -3,15 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANTS = exports.SIZES = exports.SHADOW_MAPPER = exports.ICON_PLACEMENTS = exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
+exports.VARIANTS_NAMES = exports.VARIANTS = exports.SIZES = exports.SHADOW_MAPPER = exports.ICON_PLACEMENTS = exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
 var _Palette = require("../../constants/Palette");
-const VARIANTS = exports.VARIANTS = {
-  filled: 'contained',
+const VARIANTS_NAMES = exports.VARIANTS_NAMES = {
+  filled: 'filled',
   outlined: 'outlined',
-  semitransparent: 'contained',
-  shadow: 'text',
+  semitransparent: 'semitransparent',
+  shadow: 'shadow',
   text: 'text'
 };
+const VARIANTS = exports.VARIANTS = {
+  [VARIANTS_NAMES.filled]: 'contained',
+  [VARIANTS_NAMES.outlined]: 'outlined',
+  [VARIANTS_NAMES.semitransparent]: 'contained',
+  [VARIANTS_NAMES.shadow]: 'text',
+  [VARIANTS_NAMES.text]: 'text'
+};
 const SIZES = exports.SIZES = {
   small: 'small',
   medium: 'medium',

package/dist/components/UTButton/index.js

@@ -8,12 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
 var _propTypes = require("prop-types");
-var _componentUtils = _interopRequireDefault(require("../../utils/componentUtils"));
 var _classesUtils = require("../../utils/classesUtils");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _constants = require("./constants");
 var _theme = require("./theme");
+var _utils = require("./utils");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -23,6 +22,7 @@ const UTButton = _ref => {
     children,
     classes: theme,
     classNames,
+    colorTheme,
     dataTestId,
     disabled,
     hideTextOnResponsive,
@@ -34,9 +34,6 @@ const UTButton = _ref => {
     type,
     variant
   } = _ref;
-  const {
-    isUTIcon
-  } = _componentUtils.default;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const {
     childrenContainer,
@@ -44,18 +41,19 @@ const UTButton = _ref => {
     icon,
     ...materialButtonClasses
   } = classes;
-  const iconClassname = `
-    ${_stylesModule.default.baseIcon}
-    ${icon}
-    ${children ? _stylesModule.default.icon : _stylesModule.default.iconOnly}
-    ${hideTextOnResponsive && _stylesModule.default.adaptableIcon}
-  `;
-  const IconToShow = Icon && (isUTIcon(Icon) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
-    className: iconClassname,
-    name: Icon
-  }) : /*#__PURE__*/_react.default.createElement(Icon, {
-    className: iconClassname
-  }));
+  const {
+    IconComponent,
+    ...iconProps
+  } = (0, _react.useMemo)(() => (0, _utils.getIconProps)({
+    className: icon,
+    colorTheme,
+    hasContent: !!children,
+    hideTextOnResponsive,
+    Icon,
+    size,
+    variant
+  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, size, variant]);
+  const IconToShow = IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, iconProps);
   const RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
     className: `
         ${childrenContainer}
@@ -81,6 +79,7 @@ UTButton.defaultProps = _constants.DEFAULT_PROPS;
 UTButton.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  colorTheme: _propTypes.string,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,

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

@@ -14,7 +14,8 @@ $small-icon: 1.25rem;
   & + .baseIcon {
     margin-left: 8px;
 
-    &.adaptableIcon {
+    &.adaptableIconMedium,
+    &.adaptableIconLarge {
       @media #{$mobile} {
         margin-left: -4px;
       }
@@ -27,24 +28,38 @@ $small-icon: 1.25rem;
   flex-shrink: 0;
 }
 
-.icon {
+.icon,
+.iconOnlySmall,
+.adaptableIconSmall {
   font-size: $small-icon;
   height: $small-icon;
   width: $small-icon;
 }
 
-.iconOnly {
+.iconOnlyLarge,
+.iconOnlyMedium {
   font-size: $big-icon;
   height: $big-icon;
-  margin: 0 -4px;
+  margin: -1px -5px;
   width: $big-icon;
 }
 
-.adaptableIcon {
+.iconOnlySmall {
+  margin: -1px -5px;
+}
+
+.adaptableIconSmall {
+  @media #{$mobile} {
+    margin: -1px -5px;
+  }
+}
+
+.adaptableIconLarge,
+.adaptableIconMedium {
   @media #{$mobile} {
     font-size: $big-icon;
     height: $big-icon;
-    margin: 0 -4px;
+    margin: -1px -5px;
     width: $big-icon;
   }
 }

package/dist/components/UTButton/theme.js

@@ -15,7 +15,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
   const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];
   const neutralTheme = actionPaletteColors[_constants.COLORS_MAPPER.secondary];
   const definition = {
-    filled: {
+    [_constants.VARIANTS_NAMES.filled]: {
       backgroundColor: actionTheme['04'],
       border: '1px solid transparent',
       color: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
@@ -40,7 +40,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         opacity: (0, _classesUtils.withImportant)(0.5)
       }
     },
-    semitransparent: {
+    [_constants.VARIANTS_NAMES.semitransparent]: {
       backgroundColor: actionTheme['01'],
       border: '1px solid transparent',
       color: actionTheme['05'],
@@ -59,7 +59,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         opacity: (0, _classesUtils.withImportant)(0.5)
       }
     },
-    outlined: {
+    [_constants.VARIANTS_NAMES.outlined]: {
       border: `1px solid ${actionTheme['05']}`,
       color: actionTheme['05'],
       fill: actionTheme['05'],
@@ -77,7 +77,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         opacity: (0, _classesUtils.withImportant)(0.5)
       }
     },
-    text: {
+    [_constants.VARIANTS_NAMES.text]: {
       border: '1px solid transparent',
       color: actionTheme['05'],
       fill: actionTheme['05'],
@@ -94,7 +94,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         opacity: (0, _classesUtils.withImportant)(0.5)
       }
     },
-    shadow: {
+    [_constants.VARIANTS_NAMES.shadow]: {
       backgroundColor: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
       boxShadow: (0, _shadowUtils.getShadow)({
         color: shadowTheme,

package/dist/components/UTButton/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIconProps = void 0;
+var _Palette = require("../../constants/Palette");
+var _componentUtils = require("../../utils/componentUtils");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getIconProps = _ref => {
+  let {
+    className,
+    colorTheme,
+    hasContent,
+    hideTextOnResponsive,
+    Icon,
+    size,
+    variant
+  } = _ref;
+  if (!Icon) return {};
+  const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
+  return {
+    IconComponent: _componentUtils.isUTIcon ? _UTIcon.default : Icon,
+    className: `
+      ${_stylesModule.default.baseIcon}
+      ${className}
+      ${hasContent ? _stylesModule.default.icon : _stylesModule.default[`iconOnly${(0, _componentUtils.capitalize)(size)}`]}
+      ${hideTextOnResponsive ? _stylesModule.default[`adaptableIcon${(0, _componentUtils.capitalize)(size)}`] : ''}
+      `,
+    ...(_componentUtils.isUTIcon ? {
+      colorTheme: variant === _constants.VARIANTS_NAMES.filled ? actionColorName === _constants.COLORS_MAPPER.negative ? _Palette.COLOR_THEMES.neutral : _Palette.COLOR_THEMES.light : actionColorName,
+      name: Icon
+    } : {})
+  };
+};
+exports.getIconProps = getIconProps;

package/dist/components/UTIcon/theme.js

@@ -43,16 +43,21 @@ const getIconProps = _ref2 => {
     theme,
     shade: fillShade || _constants.DEFAULT_INTERNAL_SHADE
   });
+  const baseIconProps = {
+    flexShrink: 0
+  };
   const defaultIconProps = {
     color: iconColor,
-    size
+    size,
+    ...baseIconProps
   };
   const energyIconProps = {
     stroke: iconColor,
     ...(size && {
       width: size,
       height: size
-    })
+    }),
+    ...baseIconProps
   };
   return {
     style: filled ? {

package/dist/components/UTModal/index.js

@@ -7,10 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _object = require("@widergy/web-utils/lib/object");
+var _componentUtils = require("../../utils/componentUtils");
 var _classesUtils = require("../../utils/classesUtils");
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _theme = require("./theme");
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -44,13 +45,13 @@ const UTModal = _ref => {
   const StatusIcon = _constants.STATUS_ICONS[status];
   const withSecondaryActions = !(0, _object.objectIsEmpty)(secondaryAction) || SecondaryActionComponent;
   return /*#__PURE__*/_react.default.createElement("dialog", {
-    className: `${_stylesModule.default.container} ${classes.container} ${size ? _stylesModule.default[`container${size[0].toUpperCase()}${size.toLowerCase().slice(1)}`] : _stylesModule.default.containerM}`,
+    className: `${_stylesModule.default.container} ${classes.container} ${size ? _stylesModule.default[`container${(0, _componentUtils.capitalize)(size)}`] : _stylesModule.default.containerM}`,
     onClick: onClickDialog,
     ref: dialogRef
   }, /*#__PURE__*/_react.default.createElement("div", null, StatusIcon && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.status} ${classes[`status${status[0]?.toUpperCase()}${status?.toLowerCase().slice(1)}`]}`
+    className: `${_stylesModule.default.status} ${classes[`status${(0, _componentUtils.capitalize)(status)}`]}`
   }, /*#__PURE__*/_react.default.createElement(StatusIcon, {
-    className: `${_stylesModule.default.icon} ${classes[`icon${status[0]?.toUpperCase()}${status?.toLowerCase().slice(1)}`]}`
+    className: `${_stylesModule.default.icon} ${classes[`icon${(0, _componentUtils.capitalize)(status)}`]}`
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.header
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {

package/dist/components/UTTextInput/index.js

@@ -110,8 +110,9 @@ class UTTextInput extends _react.PureComponent {
     }) : adornment;
     const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
     const errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || '';
+    const fieldId = field.id ? `${field?.id}` : undefined;
     const TextInput = /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-      id: id || '',
+      id: fieldId,
       placeholder: placeholder,
       variant: variant,
       label: Icon ? /*#__PURE__*/_react.default.createElement("div", {
@@ -139,6 +140,7 @@ class UTTextInput extends _react.PureComponent {
       margin: "none",
       autoComplete: "off",
       InputProps: {
+        id: fieldId,
         endAdornment: endAction && /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
           position: "end",
           className: `${adornmentInside && _stylesModule.default.adornmentInside}`
@@ -155,7 +157,8 @@ class UTTextInput extends _react.PureComponent {
       InputLabelProps: {
         classes: {
           root: labelRootClassName
-        }
+        },
+        htmlFor: fieldId
       }
     }, textFieldPropsToForward));
     return /*#__PURE__*/_react.default.createElement("div", {

package/dist/utils/componentUtils.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.isUTIcon = exports.default = exports.capitalize = void 0;
 const A_CHAR_CODE = 65;
 const Z_CHAR_CODE = 90;
-const getFirstLetter = userName => userName?.trim().slice(0, 1).toUpperCase() || 'A';
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+exports.capitalize = capitalize;
 const getAvatarColors = (userName, colors) => {
   const hashIndex = userName?.split('').reduce((acum, _letter, index) => {
     const letterCode = userName.toUpperCase().charCodeAt(index);
@@ -14,9 +15,12 @@ const getAvatarColors = (userName, colors) => {
   }, 0) || 0;
   return colors[hashIndex % colors.length];
 };
+const getFirstLetter = userName => userName?.trim().slice(0, 1).toUpperCase() || 'A';
 const isUTIcon = icon => typeof icon === 'string';
+exports.isUTIcon = isUTIcon;
 var _default = exports.default = {
-  getFirstLetter,
+  capitalize,
   getAvatarColors,
+  getFirstLetter,
   isUTIcon
 };

package/package.json

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