@widergy/energy-ui 3.20.0 → 3.21.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.21.0](https://github.com/widergy/energy-ui/compare/v3.20.0...v3.21.0) (2024-09-23)
+
+
+### Features
+
+* ut action card ([#495](https://github.com/widergy/energy-ui/issues/495)) ([3813a97](https://github.com/widergy/energy-ui/commit/3813a97c14a3e0ef079e0d694916d115c1e702e2))
+
 # [3.20.0](https://github.com/widergy/energy-ui/compare/v3.19.0...v3.20.0) (2024-09-23)
 
 

package/dist/components/UTActionCard/README.md

@@ -0,0 +1,25 @@
+# UTButton
+
+## Props
+
+
+| Name                   | Type                                                                                                                                                                                                    | Default    | Description                                                            |
+| :----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------ |
+| `additionalMessage`    | `shape({ Icon: elementType, iconProps: shape({ colorTheme: string, size: string }), labelProps: shape({ colorTheme: string, variant: string }), message: string })`                                     |            | Additional message information, including icons and labels.            |
+| `adornment`            | `shape({ alignment: oneOf(['center', 'end', 'start']), position: string, props: object, type: string })`                                                                                                |            | Adornment object to customize alignment, position, and type.           |
+| `BackgroundImage`      | `elementType`                                                                                                                                                                                           |            | A React component for the background image.                            |
+| `bottomActions`        | `arrayOf(shape({ colorTheme: string, disabled: bool, Icon: elementType, label: string, loading: bool, onClick: func }))`                                                                                |            | Defines the list of actions to be displayed at the bottom of the card. |
+| `bottomActionsVariant` | `oneOf(['default', 'redirection'])`                                                                                                                                                                     |            | Sets the style variant for bottom actions.                             |
+| `classNames`           | `objectOf(string)`                                                                                                                                                                                      |            | Css classes                                                            |
+| `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, type: string }), maxNumberOfPrimaryActions: number, 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.                                       |
+| `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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _constants = 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); }
+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 AdditionalMessage = _ref => {
+  let {
+    icon,
+    iconProps = {},
+    labelProps = {},
+    message,
+    size
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.additionalMessageContainer} ${_stylesModule.default[size]}`
+  }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    colorTheme: "gray",
+    name: icon
+  }, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray",
+    variant: "small",
+    withMarkdown: true
+  }, labelProps), message));
+};
+AdditionalMessage.propTypes = {
+  icon: _propTypes.string,
+  iconProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    size: _propTypes.string
+  }),
+  labelProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    variant: _propTypes.string
+  }),
+  message: _propTypes.string,
+  size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL])
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(AdditionalMessage);

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

@@ -0,0 +1,13 @@
+.additionalMessageContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.medium {
+  padding: 0 24px 24px;
+}
+
+.small {
+  padding: 0 16px 16px;
+}

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _constants = 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); }
+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; }
+const BottomActions = _ref => {
+  let {
+    actions = [],
+    bottomActionsVariant
+  } = _ref;
+  const type = actions.length > 2 ? _constants.ACTION_TYPES.REDIRECTION : bottomActionsVariant || _constants.ACTION_TYPES.DEFAULT;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsContainer
+  }, actions.map(_ref2 => {
+    let {
+      colorTheme = 'primary',
+      disabled,
+      Icon,
+      label,
+      loading,
+      onClick
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      classNames: {
+        childrenContainer: `${type === _constants.ACTION_TYPES.REDIRECTION && _stylesModule.default.redirectionChildrenContainer} `,
+        root: `${_stylesModule.default.actionButton} ${type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.fullWidth : ''}`,
+        text: `${type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.redirectionText : _stylesModule.default.defaultText}`
+      },
+      colorTheme: colorTheme,
+      disabled: disabled,
+      Icon: type === _constants.ACTION_TYPES.REDIRECTION ? 'IconChevronRight' : Icon,
+      iconPlacement: type === _constants.ACTION_TYPES.REDIRECTION ? 'right' : 'left',
+      key: label,
+      loading: loading,
+      onClick: onClick,
+      size: "large",
+      variant: "text"
+    }, label);
+  }));
+};
+BottomActions.propTypes = {
+  actions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    disabled: _propTypes.bool,
+    Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
+    label: _propTypes.string,
+    loading: _propTypes.bool,
+    onClick: _propTypes.func,
+    type: (0, _propTypes.oneOf)([_constants.ACTION_TYPES.DEFAULT, _constants.ACTION_TYPES.REDIRECTION])
+  })),
+  bottomActionsVariant: _propTypes.string
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(BottomActions);

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

@@ -0,0 +1,40 @@
+$default-border-color: #E7E7E7;
+
+.actionsContainer {
+  border-top: 1px solid var(--light04, $default-border-color);
+  display: flex;
+}
+
+.actionButton {
+  flex: 1;
+  width: 100%;
+
+  & + .actionButton {
+    border-left: 1px solid var(--light04, $default-border-color);
+  }
+}
+
+.redirectionChildrenContainer {
+  width: 100%;
+}
+
+.redirectionText {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.defaultText {
+  flex: 1;
+  min-width: 50%;
+}
+
+.actionsContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fullWidth {
+  flex: 1 0 100%;
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ADORNMENT_COMPONENT_MAPPER = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _UTAvatar = _interopRequireDefault(require("../../../UTAvatar"));
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+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,
+  image: props => /*#__PURE__*/_react.default.createElement("img", _extends({
+    alt: ""
+  }, props))
+};

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _array = require("@widergy/web-utils/lib/array");
+var _UTStatus = _interopRequireDefault(require("../../../UTStatus"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _HeaderActions = _interopRequireDefault(require("../HeaderActions"));
+var _constants = require("../../constants");
+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); }
+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 Header = _ref => {
+  let {
+    adornment,
+    description,
+    descriptionProps,
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible,
+    size,
+    status,
+    statusAlignment,
+    statusLabel,
+    title,
+    titleProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.header} ${_stylesModule.default[size]}`
+  }, (0, _utils.renderAdornment)(adornment, 'left', size), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.headerTitles} ${_stylesModule.default[`gap-${size}`]}`
+  }, (0, _utils.renderAdornment)(adornment, 'top', size), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    weight: "medium"
+  }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray"
+  }, descriptionProps), description)), status ? /*#__PURE__*/_react.default.createElement(_UTStatus.default, _extends({
+    className: `${_stylesModule.default[`placeSelf-${statusAlignment}`]}`,
+    type: "light"
+  }, (0, _utils.statusPropsMapper)(status)), statusLabel || status) : null, !(0, _array.isEmpty)(headerActions) && /*#__PURE__*/_react.default.createElement(_HeaderActions.default, {
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible
+  }));
+};
+Header.propTypes = {
+  adornment: (0, _propTypes.shape)({
+    position: _propTypes.string,
+    props: _propTypes.object,
+    type: _propTypes.string
+  }),
+  description: _propTypes.string,
+  descriptionProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    variant: _propTypes.string
+  }),
+  headerActions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
+    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    isPrimary: _propTypes.bool,
+    label: _propTypes.string,
+    loading: _propTypes.bool,
+    onClick: _propTypes.func
+  })),
+  headerActionsProps: (0, _propTypes.shape)({
+    alignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+    buttonGroupProps: (0, _propTypes.shape)({
+      colorTheme: _propTypes.string,
+      type: _propTypes.string
+    }),
+    maxNumberOfPrimaryActions: _propTypes.number,
+    variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  setMainActionHoverVisible: _propTypes.string,
+  size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
+  status: _propTypes.string,
+  statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+  statusLabel: _propTypes.string,
+  title: _propTypes.string.isRequired,
+  titleProps: (0, _propTypes.shape)({
+    variant: _propTypes.string,
+    weight: _propTypes.string
+  })
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Header);

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

@@ -0,0 +1,39 @@
+.header {
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+}
+
+.headerTitles {
+  display: flex;
+  flex-direction: column;
+  margin-right: auto;
+}
+
+.medium {
+  padding: 24px;
+}
+
+.gap-medium {
+  grid-gap: 16px;
+}
+
+.small {
+  padding: 16px;
+}
+
+.gap-small {
+  grid-gap: 8px;
+}
+
+.placeSelf-center {
+  place-self: center;
+}
+
+.placeSelf-start {
+  place-self: flex-start;
+}
+
+.placeSelf-end {
+  place-self: flex-end;
+}

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.statusPropsMapper = exports.renderAdornment = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _object = require("@widergy/web-utils/lib/object");
+var _constants = require("../../constants");
+var _constants2 = require("./constants");
+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 ACTIVE = 'active';
+const APPROVED = 'approved';
+const CHARGED_BILL = 'factura cobrada';
+const FINISHED = 'finished';
+const INACTIVE = 'inactive';
+const PENDING = 'pending';
+const BILLED = 'cobrada';
+const PAID = 'pagado';
+const ABOUT_TO_EXPIRE = 'por vencer';
+const UNPAID = 'impaga';
+const SUBSCRIBED = 'subscribed_from_utility';
+const UNSUBSCRIBED = 'unsubscribed';
+const CLOSED_STATUS = 'completed';
+const OBSERVED_STATUS = 'observed';
+const ONGOING_STATUS = 'pending';
+const FORM_STATUS = {
+  CANCELED: 'cancelled',
+  FINISHED: 'finished',
+  IN_PROGRESS: 'in_progress',
+  ON_HOLD: 'on_hold',
+  COMPLETED: 'completed'
+};
+const PAYMENTPLAN_STATUS = {
+  ACTIVE: 'active',
+  CANCELLED: 'canceled',
+  DRAFT: 'draft',
+  FINISHED: 'finished',
+  PENDING: 'pending',
+  PAYMENT_IN_PROGRESS: 'payment_in_progress',
+  PENDING_OFFLINE_PAYMENT: 'pending_offline_payment',
+  PENDING_PAYMENT: 'pending_payment'
+};
+const statusPropsMapper = status => ({
+  [ACTIVE]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [APPROVED]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [CHARGED_BILL]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [CLOSED_STATUS]: {
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  [BILLED]: {
+    variant: 'success',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [FINISHED]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [INACTIVE]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [OBSERVED_STATUS]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [ONGOING_STATUS]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [PAID]: {
+    variant: 'success',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [PAYMENTPLAN_STATUS.CANCELLED]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.DRAFT]: {
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PAYMENT_IN_PROGRESS]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PENDING_OFFLINE_PAYMENT]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PENDING_PAYMENT]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PENDING]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [ABOUT_TO_EXPIRE]: {
+    variant: 'unassigned',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [SUBSCRIBED]: {
+    variant: 'success'
+  },
+  [UNSUBSCRIBED]: {
+    variant: 'error'
+  },
+  [UNPAID]: {
+    variant: 'warning',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [FORM_STATUS.CANCELED]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [FORM_STATUS.IN_PROGRESS]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [FORM_STATUS.ON_HOLD]: {
+    variant: 'warning',
+    withoutIcon: true
+  }
+})[status?.toLowerCase()] || {
+  variant: 'error',
+  withoutIcon: true
+};
+exports.statusPropsMapper = statusPropsMapper;
+const renderAdornment = (adornment, position, size) => {
+  if ((0, _object.objectIsEmpty)(adornment) || adornment.position !== position) return null;
+  const AdornmentComponent = _constants2.ADORNMENT_COMPONENT_MAPPER[adornment.type];
+  const defaultPlaceSelf = adornment.position === 'left' ? _constants.PLACE_SELF_TYPES.CENTER : _constants.PLACE_SELF_TYPES.START;
+  return /*#__PURE__*/_react.default.createElement(AdornmentComponent, _extends({
+    className: `${_stylesModule.default[`placeSelf-${adornment.alignment || defaultPlaceSelf}`]} ${position === 'top' ? _stylesModule.default[`gap-${size}`] : ''}`
+  }, adornment.props || {}));
+};
+exports.renderAdornment = renderAdornment;

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

@@ -0,0 +1,7 @@
+"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;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+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); }
+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); } /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */
+const HeaderActions = _ref => {
+  let {
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible
+  } = _ref;
+  const [menu, setMenu] = (0, _react.useState)();
+  const [selectedAction, setSelectedAction] = (0, _react.useState)(null);
+  const showButtonGroup = headerActionsProps.variant === _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP;
+  const {
+    colorTheme: buttonGroupColorTheme = 'secondary',
+    type: buttonGroupType
+  } = headerActionsProps?.buttonGroupProps || {};
+  const maxNumberOfPrimaryActions = headerActionsProps?.maxNumberOfPrimaryActions || _constants2.DEFAULT_MAX_NUMBER_OF_PRIMARY_ACTIONS;
+  const handleSetMainActionHoverVisible = () => setMainActionHoverVisible(true);
+  const handleSetMainActionHoverHidden = () => setMainActionHoverVisible(false);
+  const openMenu = event => setMenu(event.currentTarget);
+  const closeMenu = () => {
+    handleSetMainActionHoverVisible();
+    setMenu();
+  };
+  const primaryActions = (0, _utils.mapActions)(headerActions, true).slice(0, maxNumberOfPrimaryActions);
+  const secondaryActions = (0, _utils.mapActions)(headerActions, false, !showButtonGroup ? closeMenu : null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.headerActionsContainer} ${_stylesModule.default[`placeSelf-${headerActionsProps.alignment}`]}`,
+    onClick: e => e.stopPropagation(),
+    onMouseEnter: handleSetMainActionHoverHidden,
+    onMouseLeave: handleSetMainActionHoverVisible
+  }, primaryActions.map(buttonProps => /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({}, buttonProps, {
+    classNames: {
+      root: _stylesModule.default.zIndex
+    },
+    size: "medium",
+    variant: "text"
+  }))), !(0, _isEmpty.default)(secondaryActions) && (!showButtonGroup ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+    anchor: menu,
+    iconBefore: true,
+    items: secondaryActions,
+    menuPlacement: "bottom-end",
+    onClose: closeMenu,
+    scrollBarProps: {
+      options: {
+        suppressScrollY: true,
+        suppressScrollX: true
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.zIndex
+    },
+    Icon: "IconDots",
+    onClick: e => {
+      e.stopPropagation();
+      openMenu(e);
+    },
+    size: "medium",
+    variant: "text"
+  })) : /*#__PURE__*/_react.default.createElement(_UTButtonGroup.default, {
+    actions: secondaryActions.map(action => ({
+      ...action,
+      onClick: () => {
+        setSelectedAction(action.id);
+        action.onClick();
+      }
+    })),
+    colorTheme: buttonGroupColorTheme,
+    selected: selectedAction || secondaryActions[0]?.id,
+    type: buttonGroupType
+  })));
+};
+HeaderActions.propTypes = {
+  headerActions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
+    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    isPrimary: _propTypes.bool,
+    label: _propTypes.string,
+    loading: _propTypes.bool,
+    onClick: _propTypes.func
+  })),
+  headerActionsProps: (0, _propTypes.shape)({
+    alignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+    buttonGroupProps: (0, _propTypes.shape)({
+      colorTheme: _propTypes.string,
+      type: _propTypes.string
+    }),
+    maxNumberOfPrimaryActions: _propTypes.number,
+    variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  setMainActionHoverVisible: _propTypes.func
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(HeaderActions);

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

@@ -0,0 +1,22 @@
+.headerActionsContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  height: fit-content;
+}
+
+.zIndex {
+  z-index: 2;
+}
+
+.placeSelf-center {
+  place-self: center;
+}
+
+.placeSelf-start {
+  place-self: flex-start;
+}
+
+.placeSelf-end {
+  place-self: flex-end;
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+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?.isPrimary || false) === isPrimary).map(action => ({
+    ...action,
+    onClick: e => {
+      e?.stopPropagation();
+      if (onClickHandler) onClickHandler();
+      action.onClick();
+    }
+  }));
+};
+exports.mapActions = mapActions;

package/dist/components/UTActionCard/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.PLACE_SELF_TYPES = exports.HEADER_ACTIONS_VARIANTS = exports.ACTION_TYPES = void 0;
+const SIZES = exports.SIZES = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
+const ACTION_TYPES = exports.ACTION_TYPES = {
+  DEFAULT: 'default',
+  REDIRECTION: 'redirection'
+};
+const HEADER_ACTIONS_VARIANTS = exports.HEADER_ACTIONS_VARIANTS = {
+  BUTTON_GROUP: 'buttonGroup',
+  DEFAULT: 'default'
+};
+const PLACE_SELF_TYPES = exports.PLACE_SELF_TYPES = {
+  CENTER: 'center',
+  END: 'end',
+  START: 'start'
+};

package/dist/components/UTActionCard/index.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _array = require("@widergy/web-utils/lib/array");
+var _object = require("@widergy/web-utils/lib/object");
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
+var _BottomActions = _interopRequireDefault(require("./components/BottomActions"));
+var _AdditionalMessage = _interopRequireDefault(require("./components/AdditionalMessage"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _constants = 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); }
+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; }
+const UTActionCard = _ref => {
+  let {
+    additionalMessage,
+    adornment,
+    BackgroundImage,
+    bottomActions,
+    bottomActionsVariant,
+    children,
+    classNames = {},
+    description,
+    descriptionProps = {},
+    headerActions,
+    headerActionsProps = {
+      variant: _constants.HEADER_ACTIONS_VARIANTS.DEFAULT
+    },
+    mainAction,
+    size = _constants.SIZES.MEDIUM,
+    status,
+    statusAlignment,
+    statusLabel,
+    title,
+    titleProps = {},
+    withBodyPadding = true
+  } = _ref;
+  const [mainActionHoverVisible, setMainActionHoverVisible] = (0, _react.useState)(true);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.cardContainer} ${classNames.container}`
+  }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: `${_stylesModule.default.innerContainer} ${classNames.innerContainer} ${!mainAction ? _stylesModule.default.withoutMainAction : `${_stylesModule.default.withMainAction} ${mainActionHoverVisible && `${_stylesModule.default.mainActionHover} ${classNames.mainActionHover}`}`}`,
+    onClick: () => mainAction?.()
+  }, BackgroundImage && /*#__PURE__*/_react.default.createElement(BackgroundImage, {
+    className: `${_stylesModule.default.backgroundImage} ${classNames.backgroundImage}`
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.headerAndChildrenContainer} ${classNames.headerAndChildrenContainer}`
+  }, /*#__PURE__*/_react.default.createElement(_Header.default, {
+    adornment,
+    description,
+    descriptionProps,
+    headerActions,
+    headerActionsProps,
+    mainAction,
+    setMainActionHoverVisible,
+    size,
+    status,
+    statusAlignment,
+    statusLabel,
+    title,
+    titleProps
+  }), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${withBodyPadding ? _stylesModule.default[`bodyPadding-${size}`] : _stylesModule.default[`withoutBodyPadding-${size}`]}`
+  }, children))), !(0, _object.objectIsEmpty)(additionalMessage) && /*#__PURE__*/_react.default.createElement(_AdditionalMessage.default, {
+    icon: additionalMessage.icon,
+    iconProps: additionalMessage.iconProps,
+    labelProps: additionalMessage.labelProps,
+    message: additionalMessage.message,
+    size: size
+  }), !(0, _array.isEmpty)(bottomActions) && /*#__PURE__*/_react.default.createElement(_BottomActions.default, {
+    actions: bottomActions,
+    bottomActionsVariant: bottomActionsVariant
+  }));
+};
+UTActionCard.propTypes = {
+  additionalMessage: (0, _propTypes.shape)({
+    Icon: _propTypes.elementType,
+    iconProps: (0, _propTypes.shape)({
+      colorTheme: _propTypes.string,
+      size: _propTypes.string
+    }),
+    labelProps: (0, _propTypes.shape)({
+      colorTheme: _propTypes.string,
+      variant: _propTypes.string
+    }),
+    message: _propTypes.string
+  }),
+  adornment: (0, _propTypes.shape)({
+    alignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+    position: _propTypes.string,
+    props: _propTypes.object,
+    type: _propTypes.string
+  }),
+  BackgroundImage: _propTypes.elementType,
+  bottomActions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    disabled: _propTypes.bool,
+    Icon: _propTypes.elementType,
+    label: _propTypes.string,
+    loading: _propTypes.bool,
+    onClick: _propTypes.func
+  })),
+  bottomActionsVariant: (0, _propTypes.oneOf)([_constants.ACTION_TYPES.DEFAULT, _constants.ACTION_TYPES.REDIRECTION]),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  description: _propTypes.string,
+  descriptionProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    variant: _propTypes.string
+  }),
+  headerActions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
+    iconProps: _propTypes.string,
+    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    label: _propTypes.string,
+    loading: _propTypes.bool,
+    onClick: _propTypes.func
+  })),
+  headerActionsProps: (0, _propTypes.shape)({
+    alignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
+    buttonGroupProps: (0, _propTypes.shape)({
+      colorTheme: _propTypes.string,
+      type: _propTypes.string
+    }),
+    maxNumberOfPrimaryActions: _propTypes.number,
+    variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  mainAction: _propTypes.func,
+  size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
+  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,
+  titleProps: (0, _propTypes.shape)({
+    variant: _propTypes.string,
+    weight: _propTypes.string
+  }),
+  withBodyPadding: _propTypes.bool
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(UTActionCard);

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

@@ -0,0 +1,79 @@
+$default-active-color: rgba(0, 0, 0, 0.2);
+$default-card-container-color: #FFFFFF;
+$default-hover-color: rgba(0, 0, 0, 0.08);
+$default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
+
+.cardContainer {
+  background: var(--light01, $default-card-container-color);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
+  overflow: hidden;
+}
+
+.bodyPadding-medium {
+  padding: 0 24px 24px;
+}
+
+.bodyPadding-small {
+  padding: 0 16px 16px;
+}
+
+.withoutMainAction {
+  cursor: auto;
+}
+
+.withMainAction {
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  &::after {
+    background-color: transparent;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition: all 0.2s;
+    width: 100%;
+  }
+}
+
+.mainActionHover {
+  &:hover::after {
+    background-color: $default-hover-color;
+  }
+
+  &:active::after {
+    background-color: $default-active-color;
+  }
+}
+
+.innerContainer {
+  height: auto;
+  position: relative;
+  width: 100%;
+}
+
+.backgroundImage {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 0;
+}
+
+.headerAndChildrenContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  z-index: 1;
+}
+
+.withoutBodyPadding-small {
+  padding-bottom: 16px;
+}
+
+.withoutBodyPadding-medium {
+  padding-bottom: 24px;
+}

package/dist/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "EnergyThemeProvider", {
     return _EnergyThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "UTActionCard", {
+  enumerable: true,
+  get: function () {
+    return _UTActionCard.default;
+  }
+});
 Object.defineProperty(exports, "UTAlert", {
   enumerable: true,
   get: function () {
@@ -408,6 +414,7 @@ Object.defineProperty(exports, "componentUtils", {
 var _AlertHandler = _interopRequireDefault(require("./components/UTAlert/AlertHandler"));
 var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
 var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
+var _UTActionCard = _interopRequireDefault(require("./components/UTActionCard"));
 var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
 var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTAttachmentList = _interopRequireDefault(require("./components/UTAttachmentList"));

package/package.json

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