@widergy/energy-ui 3.22.4 → 3.22.5

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.22.5](https://github.com/widergy/energy-ui/compare/v3.22.4...v3.22.5) (2024-10-03)
+
+
+### Bug Fixes
+
+* ut action card minor fixes ([#502](https://github.com/widergy/energy-ui/issues/502)) ([a0b41b5](https://github.com/widergy/energy-ui/commit/a0b41b5b7bc9608892b87af8c6946d37aa56e782))
+
 ## [3.22.4](https://github.com/widergy/energy-ui/compare/v3.22.3...v3.22.4) (2024-10-02)
 
 

package/dist/components/UTActionCard/README.md

@@ -14,12 +14,12 @@
 | `description`          | `string`                                                                                                                                                                                                 |            | Description text to be displayed.                                      |
 | `descriptionProps`     | `shape({ colorTheme: string, variant: string })`                                                                                                                                                         |            | Props to customize the description's style.                            |
 | `headerActions`        | `arrayOf(shape({ Icon: oneOfType([elementType, string]), iconProps: string, id: oneOfType([number, string]), label: string, loading: bool, onClick: func }))`                                            |            | List of actions available in the header section.                       |
-| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), maxNumberOfPrimaryActions: number, variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
+| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
 | `mainAction`           | `func`                                                                                                                                                                                                   |            | Main action function for the card.                                     |
 | `size`                 | `oneOf(['medium', 'small'])`                                                                                                                                                                             | `'medium'` | Size of the card, either small or medium.                              |
 | `status`               | `string`                                                                                                                                                                                                 |            | Status text to be displayed.                                           |
 | `statusLabel`          | `string`                                                                                                                                                                                                 |            | Status label for additional status info.                               |
 | `statusAlignment`      | `oneOf(['center', 'end', 'start'])`                                                                                                                                                                      |            | Alignment of the status element.                                       |
-| `title`                | `string.isRequired`                                                                                                                                                                                      |            | The title of the card, required.                                       |
+| `title`                | `string`                                                                                                                                                                                      |            | The title of the card.                                       |
 | `titleProps`           | `shape({ variant: string, weight: string })`                                                                                                                                                             |            | Props to configure the title style.                                    |
 | `withBodyPadding`      | `bool`                                                                                                                                                                                                   | `false`    | Adds padding to the card body if`true`.                                |

package/dist/components/UTActionCard/components/AdditionalMessage/index.js

@@ -25,8 +25,10 @@ const AdditionalMessage = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.additionalMessageContainer, " ").concat(_stylesModule.default[size])
   }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    area: true,
     colorTheme: "gray",
-    name: icon
+    name: icon,
+    size: 16
   }, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray",
     variant: "small",

package/dist/components/UTActionCard/components/BottomActions/index.js

@@ -15,7 +15,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const BottomActions = _ref => {
   let {
     actions = [],
-    bottomActionsVariant
+    bottomActionsVariant,
+    size
   } = _ref;
   const type = actions.length > 2 ? _constants.ACTION_TYPES.REDIRECTION : bottomActionsVariant || _constants.ACTION_TYPES.DEFAULT;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -32,7 +33,7 @@ const BottomActions = _ref => {
     return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
       classNames: {
         childrenContainer: "".concat(type === _constants.ACTION_TYPES.REDIRECTION && _stylesModule.default.redirectionChildrenContainer, " "),
-        root: "".concat(_stylesModule.default.actionButton, " ").concat(type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.fullWidth : ''),
+        root: "".concat(_stylesModule.default.actionButton, " ").concat(type === _constants.ACTION_TYPES.REDIRECTION && _stylesModule.default.fullWidth, " ").concat(size === _constants.SIZES.MEDIUM && _stylesModule.default.mediumPadding),
         text: "".concat(type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.redirectionText : _stylesModule.default.defaultText)
       },
       colorTheme: colorTheme,
@@ -56,6 +57,7 @@ BottomActions.propTypes = {
     loading: _propTypes.bool,
     onClick: _propTypes.func
   })),
-  bottomActionsVariant: _propTypes.string
+  bottomActionsVariant: _propTypes.string,
+  size: _propTypes.string
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(BottomActions);

package/dist/components/UTActionCard/components/BottomActions/styles.module.scss

@@ -38,3 +38,7 @@ $default-border-color: #E7E7E7;
 .fullWidth {
   flex: 1 0 100%;
 }
+
+.mediumPadding {
+  padding: 16px 24px;
+}

package/dist/components/UTActionCard/components/Header/constants.js

@@ -7,11 +7,24 @@ exports.ADORNMENT_COMPONENT_MAPPER = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _UTAvatar = _interopRequireDefault(require("../../../UTAvatar"));
 var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ADORNMENT_COMPONENT_MAPPER = exports.ADORNMENT_COMPONENT_MAPPER = {
   icon: _UTIcon.default,
-  avatar: _UTAvatar.default,
+  avatar: _ref => {
+    let {
+      className,
+      ...props
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement(_UTAvatar.default, _extends({
+      className: "".concat(_stylesModule.default.defaultAvatar, " ").concat(className),
+      labelProps: {
+        variant: 'title1',
+        weight: 'medium'
+      }
+    }, props));
+  },
   image: props => /*#__PURE__*/_react.default.createElement("img", _extends({
     alt: ""
   }, props))

package/dist/components/UTActionCard/components/Header/index.js

@@ -20,6 +20,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const Header = _ref => {
   let {
     adornment,
+    classNames,
     description,
     descriptionProps,
     headerActions,
@@ -33,10 +34,11 @@ const Header = _ref => {
     titleProps
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.header, " ").concat(_stylesModule.default[size])
+    className: "".concat(_stylesModule.default.header, " ").concat(_stylesModule.default[size], " ").concat(classNames.header)
   }, (0, _utils.renderAdornment)(adornment, 'left', size), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.headerTitles, " ").concat(_stylesModule.default["gap-".concat(size)])
+    className: _stylesModule.default.headerTitles
   }, (0, _utils.renderAdornment)(adornment, 'top', size), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    variant: "title3",
     weight: "medium"
   }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
@@ -55,6 +57,7 @@ Header.propTypes = {
     props: _propTypes.object,
     type: _propTypes.string
   }),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   description: _propTypes.string,
   descriptionProps: (0, _propTypes.shape)({
     colorTheme: _propTypes.string,
@@ -74,7 +77,6 @@ Header.propTypes = {
       colorTheme: _propTypes.string,
       shape: _propTypes.string
     }),
-    maxNumberOfPrimaryActions: _propTypes.number,
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
   setMainActionHoverVisible: _propTypes.string,

package/dist/components/UTActionCard/components/Header/styles.module.scss

@@ -7,6 +7,7 @@
 .headerTitles {
   display: flex;
   flex-direction: column;
+  grid-gap: 8px;
   margin-right: auto;
   overflow-wrap: anywhere;
 }
@@ -15,18 +16,10 @@
   padding: 24px;
 }
 
-.gap-medium {
-  grid-gap: 16px;
-}
-
 .small {
   padding: 16px;
 }
 
-.gap-small {
-  grid-gap: 8px;
-}
-
 .placeSelf-center {
   place-self: center;
 }
@@ -38,3 +31,8 @@
 .placeSelf-end {
   place-self: flex-end;
 }
+
+.defaultAvatar {
+  height: 64px;
+  width: 64px;
+}

package/dist/components/UTActionCard/components/HeaderActions/index.js

@@ -12,7 +12,6 @@ var _UTButtonGroup = _interopRequireDefault(require("../../../UTButtonGroup"));
 var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
 var _constants = require("../../constants");
 var _utils = require("./utils");
-var _constants2 = require("./constants");
 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); }
@@ -32,7 +31,6 @@ const HeaderActions = _ref => {
     colorTheme: buttonGroupColorTheme = 'secondary',
     shape: buttonGroupShape
   } = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.buttonGroupProps) || {};
-  const maxNumberOfPrimaryActions = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.maxNumberOfPrimaryActions) || _constants2.DEFAULT_MAX_NUMBER_OF_PRIMARY_ACTIONS;
   const handleSetMainActionHoverVisible = () => setMainActionHoverVisible(true);
   const handleSetMainActionHoverHidden = () => setMainActionHoverVisible(false);
   const openMenu = event => setMenu(event.currentTarget);
@@ -40,8 +38,10 @@ const HeaderActions = _ref => {
     handleSetMainActionHoverVisible();
     setMenu();
   };
-  const primaryActions = (0, _utils.mapActions)(headerActions, true).slice(0, maxNumberOfPrimaryActions);
-  const secondaryActions = (0, _utils.mapActions)(headerActions, false, !showButtonGroup ? closeMenu : null);
+  const {
+    primaryActions,
+    secondaryActions
+  } = (0, _utils.processActions)(headerActions, !showButtonGroup ? closeMenu : null);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerActionsContainer, " ").concat(_stylesModule.default["placeSelf-".concat(headerActionsProps.alignment)]),
     onClick: e => e.stopPropagation(),
@@ -72,7 +72,11 @@ const HeaderActions = _ref => {
     Icon: "IconDots",
     onClick: e => {
       e.stopPropagation();
-      openMenu(e);
+      if (menu) {
+        setMenu();
+      } else {
+        openMenu(e);
+      }
     },
     size: "medium",
     variant: "text"
@@ -104,7 +108,6 @@ HeaderActions.propTypes = {
       colorTheme: _propTypes.string,
       shape: _propTypes.string
     }),
-    maxNumberOfPrimaryActions: _propTypes.number,
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
   setMainActionHoverVisible: _propTypes.func

package/dist/components/UTActionCard/components/HeaderActions/utils.js

@@ -3,18 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapActions = void 0;
-const mapActions = function () {
-  let actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let isPrimary = arguments.length > 1 ? arguments[1] : undefined;
-  let onClickHandler = arguments.length > 2 ? arguments[2] : undefined;
-  return actions.filter(action => ((action === null || action === void 0 ? void 0 : action.isPrimary) || false) === isPrimary).map(action => ({
-    ...action,
-    onClick: e => {
-      e === null || e === void 0 || e.stopPropagation();
-      if (onClickHandler) onClickHandler();
-      action.onClick();
-    }
-  }));
-};
-exports.mapActions = mapActions;
+exports.processActions = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const mapAction = (action, onClickHandler) => ({
+  ...action,
+  onClick: e => {
+    var _action$onClick;
+    e === null || e === void 0 || e.stopPropagation();
+    if (onClickHandler) onClickHandler();
+    action === null || action === void 0 || (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+  }
+});
+const processActions = (headerActions, onClickHandler) => headerActions.reduce((final, current) => {
+  if (current.isPrimary && (0, _isEmpty.default)(final.primaryActions)) return {
+    ...final,
+    primaryActions: [current]
+  };
+  return {
+    ...final,
+    secondaryActions: [...final.secondaryActions, mapAction(current, onClickHandler)]
+  };
+}, {
+  primaryActions: [],
+  secondaryActions: []
+});
+exports.processActions = processActions;

package/dist/components/UTActionCard/index.js

@@ -17,6 +17,7 @@ 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTActionCard = _ref => {
   let {
     additionalMessage,
@@ -53,6 +54,7 @@ const UTActionCard = _ref => {
     className: "".concat(_stylesModule.default.headerAndChildrenContainer, " ").concat(classNames.headerAndChildrenContainer)
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
     adornment,
+    classNames,
     description,
     descriptionProps,
     headerActions,
@@ -67,15 +69,12 @@ const UTActionCard = _ref => {
     titleProps
   }), children && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(withBodyPadding ? _stylesModule.default["bodyPadding-".concat(size)] : _stylesModule.default["withoutBodyPadding-".concat(size)])
-  }, children))), !(0, _object.objectIsEmpty)(additionalMessage) && /*#__PURE__*/_react.default.createElement(_AdditionalMessage.default, {
-    icon: additionalMessage.icon,
-    iconProps: additionalMessage.iconProps,
-    labelProps: additionalMessage.labelProps,
-    message: additionalMessage.message,
+  }, children))), !(0, _object.objectIsEmpty)(additionalMessage) && /*#__PURE__*/_react.default.createElement(_AdditionalMessage.default, _extends({}, additionalMessage, {
     size: size
-  }), !(0, _array.isEmpty)(bottomActions) && /*#__PURE__*/_react.default.createElement(_BottomActions.default, {
+  })), !(0, _array.isEmpty)(bottomActions) && /*#__PURE__*/_react.default.createElement(_BottomActions.default, {
     actions: bottomActions,
-    bottomActionsVariant: bottomActionsVariant
+    bottomActionsVariant: bottomActionsVariant,
+    size: size
   }));
 };
 UTActionCard.propTypes = {
@@ -127,7 +126,6 @@ UTActionCard.propTypes = {
       colorTheme: _propTypes.string,
       shape: _propTypes.string
     }),
-    maxNumberOfPrimaryActions: _propTypes.number,
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
   mainAction: _propTypes.func,
@@ -135,7 +133,7 @@ UTActionCard.propTypes = {
   status: _propTypes.string,
   statusLabel: _propTypes.string,
   statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
-  title: _propTypes.string.isRequired,
+  title: _propTypes.string,
   titleProps: (0, _propTypes.shape)({
     variant: _propTypes.string,
     weight: _propTypes.string

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

@@ -5,7 +5,6 @@ $padding-xlarge: 12px;
 $padding-xxlarge: 21px;
 
 .withArea {
-  background-color: transparent;
   border-radius: 100px;
 }
 

package/package.json

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

package/dist/components/UTActionCard/components/HeaderActions/constants.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_MAX_NUMBER_OF_PRIMARY_ACTIONS = void 0;
-const DEFAULT_MAX_NUMBER_OF_PRIMARY_ACTIONS = exports.DEFAULT_MAX_NUMBER_OF_PRIMARY_ACTIONS = 1;