@widergy/energy-ui 3.18.0 → 3.18.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.18.2](https://github.com/widergy/energy-ui/compare/v3.18.1...v3.18.2) (2024-08-27)
+
+
+### Bug Fixes
+
+* minor fix ([#481](https://github.com/widergy/energy-ui/issues/481)) ([a5d456e](https://github.com/widergy/energy-ui/commit/a5d456e9b89148c03126f1437c432da098457b19))
+
+## [3.18.1](https://github.com/widergy/energy-ui/compare/v3.18.0...v3.18.1) (2024-08-26)
+
+
+### Bug Fixes
+
+* add counter ([#480](https://github.com/widergy/energy-ui/issues/480)) ([7d2d122](https://github.com/widergy/energy-ui/commit/7d2d12228d53af2937c0258756037329ba32714d))
+
 # [3.18.0](https://github.com/widergy/energy-ui/compare/v3.17.1...v3.18.0) (2024-08-26)
 
 

package/dist/components/UTBadge/constants.js

@@ -3,16 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
-const COLORS_MAPPER = exports.COLORS_MAPPER = {
-  alert: 'error',
-  identity: 'accent',
-  identitySecondary: 'neutral',
-  information: 'information',
-  negative: 'negative',
-  success: 'success',
-  warning: 'warning'
-};
+exports.DEFAULT_PROPS = void 0;
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
-  colorTheme: 'alert'
+  colorTheme: 'error'
 };

package/dist/components/UTBadge/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _Palette = require("../../constants/Palette");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _theme = require("./theme");
@@ -19,7 +20,7 @@ const UTBadge = _ref => {
     className,
     colorTheme
   } = _ref;
-  const textColorTheme = colorTheme === 'negative' ? 'dark' : 'negative';
+  const textColorTheme = [_Palette.COLOR_THEMES.negative, _Palette.COLOR_THEMES.light].includes(colorTheme) ? 'dark' : 'negative';
   const Component = children ? _UTLabel.default : 'span';
   const componentProps = children ? {
     colorTheme: textColorTheme,

package/dist/components/UTBadge/theme.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _componentUtils = require("../../utils/componentUtils");
 var _constants = require("./constants");
 const variantsColorTheme = (theme, colorTheme) => {
-  const colorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const paletteTheme = theme.Palette[colorName] || theme.Palette.actions?.[colorName];
-  const backgroundColorMapper = {
-    alert: paletteTheme['04'],
-    information: paletteTheme['05'],
-    warning: paletteTheme['05'],
-    success: paletteTheme['05'],
-    identity: paletteTheme['05'],
-    identitySecondary: paletteTheme['05'],
-    negative: paletteTheme['04']
-  };
+  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
+  const colorShade = (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return {
-    backgroundColor: backgroundColorMapper[colorTheme]
+    backgroundColor: colorThemeDefinition[colorShade]
   };
 };
 exports.variantsColorTheme = variantsColorTheme;
@@ -29,7 +21,6 @@ const baseButtonTheme = () => ({
     display: 'inline-flex',
     height: 'fit-content',
     justifyContent: 'center',
-    margin: 10,
     minHeight: '10px',
     minWidth: '10px',
     verticalAlign: 'middle'

package/dist/components/UTButton/index.js

@@ -8,7 +8,9 @@ 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 = require("../../utils/componentUtils");
 var _classesUtils = require("../../utils/classesUtils");
+var _UTBadge = _interopRequireDefault(require("../UTBadge"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _constants = require("./constants");
 var _theme = require("./theme");
@@ -23,6 +25,7 @@ const UTButton = _ref => {
     classes: theme,
     classNames,
     colorTheme,
+    count,
     dataTestId,
     disabled,
     hideTextOnResponsive,
@@ -54,16 +57,21 @@ const UTButton = _ref => {
     variant
   }), [colorTheme, children, hideTextOnResponsive, icon, Icon, size, variant]);
   const IconToShow = IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, iconProps);
+  const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
   const RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-        ${childrenContainer}
-        ${_stylesModule.default.childrenContainer}
-      `
-  }, iconPlacement === _constants.ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.text} ${hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive} ${classes.text}`
+    className: `${childrenContainer} ${_stylesModule.default.childrenContainer}`
+  }, count && /*#__PURE__*/_react.default.createElement(_UTBadge.default, {
+    colorTheme: counterColorTheme
+  }, count), iconPlacement === _constants.ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.textContainer} ${classes.text}`
   }, children), iconPlacement !== _constants.ICON_PLACEMENTS.left && IconToShow);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     classes: materialButtonClasses,
+    className: `
+        ${_stylesModule.default[`padding${(0, _componentUtils.capitalize)(size)}`]}
+        ${hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive}
+        ${!hideTextOnResponsive && !children && _stylesModule.default.noChildren}
+      `,
     "data-testid": dataTestId,
     disabled: disabled || loading,
     onClick: onClick,
@@ -80,6 +88,7 @@ UTButton.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   colorTheme: _propTypes.string,
+  count: _propTypes.number,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,

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

@@ -3,26 +3,6 @@
 $big-icon: 1.5rem;
 $small-icon: 1.25rem;
 
-.hideTextOnResponsive {
-  @media #{$mobile} {
-    display: none;
-  }
-}
-
-.text {
-  .baseIcon + &,
-  & + .baseIcon {
-    margin-left: 8px;
-
-    &.adaptableIconMedium,
-    &.adaptableIconLarge {
-      @media #{$mobile} {
-        margin-left: -4px;
-      }
-    }
-  }
-}
-
 .baseIcon {
   box-sizing: border-box;
   flex-shrink: 0;
@@ -40,26 +20,14 @@ $small-icon: 1.25rem;
 .iconOnlyMedium {
   font-size: $big-icon;
   height: $big-icon;
-  margin: -1px -5px;
   width: $big-icon;
 }
 
-.iconOnlySmall {
-  margin: -1px -5px;
-}
-
-.adaptableIconSmall {
-  @media #{$mobile} {
-    margin: -1px -5px;
-  }
-}
-
 .adaptableIconLarge,
 .adaptableIconMedium {
   @media #{$mobile} {
     font-size: $big-icon;
     height: $big-icon;
-    margin: -1px -5px;
     width: $big-icon;
   }
 }
@@ -67,9 +35,62 @@ $small-icon: 1.25rem;
 .childrenContainer {
   align-items: center;
   display: flex;
+  grid-gap: 8px;
   justify-content: flex-start;
 }
 
 .loading {
   position: absolute;
 }
+
+.paddingLarge {
+  padding: 12px 16px;
+}
+
+.paddingMedium {
+  padding: 8px 12px;
+}
+
+.paddingSmall {
+  padding: 4px 8px;
+}
+
+.hideTextOnResponsive {
+  .textContainer {
+    @media #{$mobile} {
+      display: none;
+    }
+  }
+
+  &.paddingLarge {
+    @media #{$mobile} {
+      padding: 12px;
+    }
+  }
+
+  &.paddingMedium {
+    @media #{$mobile} {
+      padding: 8px;
+    }
+  }
+
+  &.paddingSmall {
+    @media #{$mobile} {
+      padding: 4px;
+    }
+  }
+}
+
+.noChildren {
+  &.paddingLarge {
+    padding: 12px;
+  }
+
+  &.paddingMedium {
+    padding: 8px;
+  }
+
+  &.paddingSmall {
+    padding: 4px;
+  }
+}

package/dist/components/UTButton/theme.js

@@ -135,19 +135,16 @@ const baseButtonTheme = theme => ({
     fontWeight: '500',
     lineHeight: '1.375rem',
     minWidth: 'auto',
-    padding: '8px 12px',
     textTransform: 'none',
     transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
   },
   sizeLarge: {
     fontSize: '1rem',
-    fontWeight: '500',
-    padding: '12px 16px'
+    fontWeight: '500'
   },
   sizeSmall: {
     fontSize: '0.875rem',
-    fontWeight: '500',
-    padding: '4px 8px'
+    fontWeight: '500'
   },
   circularProgress: {
     color: theme.UTButton?.circularProgress?.color || '484848'

package/dist/components/UTButton/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconProps = void 0;
+exports.getIconProps = exports.getCounterColorTheme = void 0;
 var _Palette = require("../../constants/Palette");
 var _componentUtils = require("../../utils/componentUtils");
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
@@ -36,4 +36,6 @@ const getIconProps = _ref => {
     } : {})
   };
 };
-exports.getIconProps = getIconProps;
+exports.getIconProps = getIconProps;
+const getCounterColorTheme = (colorTheme, variant) => variant === _constants.VARIANTS_NAMES.filled ? colorTheme === _Palette.COLOR_THEMES.negative ? 'dark' : 'negative' : _constants.COLORS_MAPPER[colorTheme];
+exports.getCounterColorTheme = getCounterColorTheme;

package/dist/components/UTIcon/theme.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveColor = exports.getIconProps = void 0;
-var _Palette = require("../../constants/Palette");
+var _componentUtils = require("../../utils/componentUtils");
 var _constants = require("./constants");
-const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 const retrieveColor = _ref => {
   let {
     colorTheme,
@@ -14,7 +13,7 @@ const retrieveColor = _ref => {
     theme
   } = _ref;
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_COLOR_THEME];
-  const colorShade = shade || getDefaultColorShade(colorTheme);
+  const colorShade = shade || (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade];
 };
 exports.retrieveColor = retrieveColor;

package/dist/components/UTLabel/theme.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _Palette = require("../../constants/Palette");
+var _componentUtils = require("../../utils/componentUtils");
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 const variantsColorTheme = (colorTheme, shade, theme) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
-  const colorShade = Object.values(_Palette.COLOR_SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  const colorShade = Object.values(_Palette.COLOR_SHADES).includes(shade) ? shade : (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade] || _colorsModule.default.black;
 };
 const linkColor = (theme, colorTheme) => {

package/dist/utils/componentUtils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isUTIcon = exports.default = exports.capitalize = void 0;
+exports.isUTIcon = exports.getDefaultColorShade = exports.default = exports.capitalize = void 0;
+var _Palette = require("../constants/Palette");
 const A_CHAR_CODE = 65;
 const Z_CHAR_CODE = 90;
 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
@@ -18,6 +19,8 @@ const getAvatarColors = (userName, colors) => {
 const getFirstLetter = userName => userName?.trim().slice(0, 1).toUpperCase() || 'A';
 const isUTIcon = icon => typeof icon === 'string';
 exports.isUTIcon = isUTIcon;
+const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
+exports.getDefaultColorShade = getDefaultColorShade;
 var _default = exports.default = {
   capitalize,
   getAvatarColors,

package/package.json

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