@widergy/energy-ui 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [3.3.0](https://github.com/widergy/energy-ui/compare/v3.2.1...v3.3.0) (2024-02-23)
+
+
+### Bug Fixes
+
+* fix pr ([6004c11](https://github.com/widergy/energy-ui/commit/6004c114dbfa4038acc2d43d481c61f692aec069))
+
+
+### Features
+
+* added readme ([b4ee555](https://github.com/widergy/energy-ui/commit/b4ee555733e9f08ee0af5796c04ee1ebd4c67f67))
+* added utselectablecard ([a2ee373](https://github.com/widergy/energy-ui/commit/a2ee37370d13f7aeb8c4ed6f70cab287c4626b6f))
+
+## [3.2.1](https://github.com/widergy/energy-ui/compare/v3.2.0...v3.2.1) (2024-02-20)
+
+
+### Bug Fixes
+
+* minor fix ([#415](https://github.com/widergy/energy-ui/issues/415)) ([d26822e](https://github.com/widergy/energy-ui/commit/d26822e70070bbf7543f053fa6e2e808d937dbee))
+
 # [3.2.0](https://github.com/widergy/energy-ui/compare/v3.1.7...v3.2.0) (2024-02-14)
 
 

package/dist/components/UTSelectableCard/README.md

@@ -0,0 +1,23 @@
+# UTSelectableCard
+
+### Description
+Selectable card component.
+
+### Props
+
+| Name            | Type                                     | Default   |Description                                                           |
+|-----------------|------------------------------------------|-----------|----------------------------------------------------------------------|
+| aditionalInfo   | object: { title: '', description: ''}    |           | Aditional information to show in the card                            |
+| apareance       | string: 'white' \| 'gray' \|             | white     | The card apareance.                                                  |
+| checkIcon       | bool                                     | true      | Indicates if on "active" status shows a check icon                   |
+| classes         | string                                   |           | Classes returned by UTLabel's own [theme](./theme.js#)retrieveStyle. |
+| className       | string                                   |           | Additional classes.                                                  |
+| description     | string                                   |           | Card description                                                     |
+| disabled        | bool                                     | false     | Indicates if the card is disabled                                    |
+| Icon            | node                                     |           | An Icon component that can be displayed.                             |
+| OnClick         | func                                     |           | Function to be executed when clicking the card                       |
+| selected        | bool                                     | false     | Indicates if the current card has "Active" status                    |
+| size            | string: 'medium' \| 'small' \|           | medium    | Card size                                                            |
+| titleText       | string                                   |           | Title to show in the card                                            |
+| tooltip         | string                                   |           | Help icon tooltip as text                                            |
+

package/dist/components/UTSelectableCard/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shade05 = exports.shade04 = exports.shade03 = exports.shade01 = exports.PRESSED_STATE = exports.LIGHT = exports.HOVER_STATE = exports.GRAY = exports.DARK = exports.ACTIVE_STATE = exports.ACCENT = void 0;
+// States
+
+const ACTIVE_STATE = exports.ACTIVE_STATE = 'active';
+const HOVER_STATE = exports.HOVER_STATE = 'hover';
+const PRESSED_STATE = exports.PRESSED_STATE = 'pressed';
+
+// Label colors
+
+const ACCENT = exports.ACCENT = 'accent';
+const DARK = exports.DARK = 'dark';
+const GRAY = exports.GRAY = 'gray';
+const LIGHT = exports.LIGHT = 'light';
+
+// Label shades
+
+const shade01 = exports.shade01 = '01';
+const shade03 = exports.shade03 = '03';
+const shade04 = exports.shade04 = '04';
+const shade05 = exports.shade05 = '05';

package/dist/components/UTSelectableCard/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _HelpOutlineOutlined = _interopRequireDefault(require("@material-ui/icons/HelpOutlineOutlined"));
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _object = require("@widergy/web-utils/lib/object");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 UTSelectableCard = _ref => {
+  let {
+    aditionalInfo = {},
+    apareance = 'white',
+    checkIcon = true,
+    classes,
+    classNames = {},
+    description,
+    disabled = false,
+    Icon,
+    onClick,
+    selected = false,
+    size = 'medium',
+    titleText,
+    tooltip
+  } = _ref;
+  const [state, setState] = (0, _react.useState)('');
+  const pressedAndSelected = state === _constants.PRESSED_STATE && selected;
+  const selectedItemShade = selected && (state === _constants.HOVER_STATE || state === _constants.PRESSED_STATE || state === _constants.ACTIVE_STATE) && _constants.shade05;
+  const apareanceGrayPressed = apareance === _constants.GRAY && pressedAndSelected;
+  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    onClick: () => !disabled && onClick(),
+    onMouseDown: () => !disabled && setState(_constants.PRESSED_STATE),
+    onMouseUp: () => !disabled && setState(_constants.ACTIVE_STATE),
+    onMouseOver: () => !disabled && selected && setState(_constants.HOVER_STATE),
+    onMouseOut: () => !disabled && selected && setState(_constants.ACTIVE_STATE),
+    className: "".concat(classes.item, " ").concat(classes["".concat(apareance, "Apareance")], " ").concat(selected && classes["".concat(apareance, "SelectedContainer")], " ").concat(disabled && classes["".concat(apareance, "DisabledContainer")], " ").concat(classes["".concat(size, "Size")])
+  }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+    className: "".concat(classes.icon, " ").concat(selected ? classes.selectedIcon : '', " ").concat(disabled ? classes.disabledIcon : '', " ").concat(classNames.icon, " ").concat(apareanceGrayPressed && classes.apareanceGrayPressedIcon)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.textContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.column
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.titleAndTooltip
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "subtitle1",
+    weight: "medium",
+    colorTheme: apareanceGrayPressed ? _constants.LIGHT : disabled ? _constants.GRAY : selected ? _constants.ACCENT : _constants.DARK,
+    shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
+  }, titleText), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.tooltip
+  }, /*#__PURE__*/_react.default.createElement(_HelpOutlineOutlined.default, {
+    className: "".concat(classes.infoIcon, " ").concat(disabled ? classes.disabledTooltip : selected ? classes.selectedInfoIcon : '')
+  })))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: apareanceGrayPressed ? _constants.LIGHT : selected ? _constants.ACCENT : _constants.GRAY,
+    shade: apareanceGrayPressed ? _constants.shade01 : selectedItemShade || _constants.shade04
+  }, description)), !(0, _object.objectIsEmpty)(aditionalInfo) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.column, " ").concat(classes.aditionalInfoColumn)
+  }, !!aditionalInfo.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: apareanceGrayPressed ? _constants.LIGHT : disabled ? _constants.GRAY : selected ? _constants.ACCENT : _constants.DARK,
+    variant: "small",
+    weight: "semibold",
+    shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
+  }, aditionalInfo.title), !!aditionalInfo.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: apareanceGrayPressed ? _constants.LIGHT : selected ? _constants.ACCENT : _constants.GRAY,
+    variant: "small",
+    shade: apareanceGrayPressed ? _constants.shade01 : !selected && state === _constants.PRESSED_STATE ? _constants.shade03 : selectedItemShade || _constants.shade04
+  }, aditionalInfo.description))), checkIcon && selected && /*#__PURE__*/_react.default.createElement(_Check.default, {
+    className: "".concat(classes.checkIcon, " ").concat(apareanceGrayPressed && classes.grayPressedCheckIcon)
+  }));
+};
+UTSelectableCard.propTypes = {
+  aditionalInfo: (0, _propTypes.shape)({
+    title: _propTypes.string,
+    description: _propTypes.string
+  }),
+  apareance: _propTypes.string,
+  checkIcon: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: _propTypes.object,
+  description: _propTypes.string,
+  disabled: _propTypes.bool,
+  Icon: _propTypes.object,
+  onClick: _propTypes.func,
+  selected: _propTypes.bool,
+  size: _propTypes.string,
+  titleText: _propTypes.string,
+  tooltip: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSelectableCard);

package/dist/components/UTSelectableCard/theme.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    aditionalInfoColumn: {
+      textAlign: 'end !important'
+    },
+    amountContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    grayPressedCheckIcon: {
+      color: "".concat(theme.Palette.light['01'], "  !important")
+    },
+    apareanceGrayPressedIcon: {
+      '& path': {
+        fill: "".concat(theme.Palette.light['01'], "!important")
+      }
+    },
+    checkIcon: {
+      color: theme.Palette.actions.accent['05']
+    },
+    column: {
+      alignSelf: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '4px',
+      justifyContent: 'space-between',
+      textAlign: 'initial'
+    },
+    detailContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    disabledIcon: {
+      '& path': {
+        fill: "".concat(theme.Palette.gray['04'], " !important")
+      }
+    },
+    disabledTooltip: {
+      '& path': {
+        color: "".concat(theme.Palette.gray['04'], " !important")
+      }
+    },
+    icon: {
+      flexShrink: 0,
+      height: '36px',
+      width: '36px',
+      '& path': {
+        fill: theme.Palette.dark['05']
+      }
+    },
+    infoIcon: {
+      '& path': {
+        color: theme.Palette.dark['05']
+      }
+    },
+    item: {
+      alignItems: 'center',
+      borderRadius: '4px',
+      boxSizing: 'border-box',
+      display: 'flex',
+      gridGap: '16px',
+      transition: 'background-color 0.1s ease-in-out',
+      width: '100%',
+      '& + div': {
+        marginTop: '20px'
+      }
+    },
+    mediumSize: {
+      padding: '24px'
+    },
+    selectedIcon: {
+      '& path': {
+        fill: theme.Palette.actions.accent['05']
+      }
+    },
+    selectedInfoIcon: {
+      '& path': {
+        color: theme.Palette.actions.accent['05']
+      }
+    },
+    smallSize: {
+      padding: '16px'
+    },
+    textContainer: {
+      display: 'flex',
+      gridGap: '8px',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    titleAndTooltip: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '4px'
+    },
+    tooltip: {
+      display: 'flex'
+    },
+    // white apareance
+
+    whiteApareance: {
+      backgroundColor: theme.Palette.light['01'],
+      boxShadow: '0 3px 6px 0 #182C491A',
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['04'],
+        boxShadow: 'none'
+      }
+    },
+    whiteDisabledContainer: {
+      backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
+      boxShadow: 'none',
+      '&:hover': {
+        cursor: 'default'
+      }
+    },
+    whiteSelectedContainer: {
+      border: "2px solid ".concat(theme.Palette.actions.accent['05']),
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.Palette.actions.accent['01'],
+        border: "2px solid ".concat(theme.Palette.actions.accent['05'])
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.actions.accent['02'],
+        border: "2px solid ".concat(theme.Palette.actions.accent['05'])
+      }
+    },
+    // Gray apareance
+
+    grayApareance: {
+      backgroundColor: theme.Palette.light['03'],
+      border: "1px solid ".concat(theme.Palette.light['05']),
+      '&:hover': {
+        backgroundColor: theme.Palette.light['04']
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['05']
+      }
+    },
+    grayDisabledContainer: {
+      border: "2px solid ".concat(theme.Palette.light['05']),
+      '&:hover': {
+        backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
+        cursor: 'default'
+      }
+    },
+    graySelectedContainer: {
+      backgroundColor: theme.Palette.actions.accent['01'],
+      border: "2px solid ".concat(theme.Palette.actions.accent['03']),
+      '&:hover': {
+        backgroundColor: theme.Palette.actions.accent['02']
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.actions.accent['03']
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTable/components/TableRow/utils.js

@@ -7,6 +7,9 @@ exports.hasVisibleActions = void 0;
 var _array = require("@widergy/web-utils/lib/array");
 const hasVisibleActions = (secondaryActions, rowData) => !(0, _array.isEmpty)(secondaryActions) && secondaryActions.some(secondaryAction => {
   var _secondaryAction$acti;
-  return secondaryAction === null || secondaryAction === void 0 || (_secondaryAction$acti = secondaryAction.actions) === null || _secondaryAction$acti === void 0 ? void 0 : _secondaryAction$acti.some(action => action.isVisible(rowData));
+  return secondaryAction === null || secondaryAction === void 0 || (_secondaryAction$acti = secondaryAction.actions) === null || _secondaryAction$acti === void 0 ? void 0 : _secondaryAction$acti.some(action => {
+    var _action$isVisible;
+    return (_action$isVisible = action.isVisible) === null || _action$isVisible === void 0 ? void 0 : _action$isVisible.call(action, rowData);
+  });
 });
 exports.hasVisibleActions = hasVisibleActions;

package/dist/index.js

@@ -249,6 +249,12 @@ Object.defineProperty(exports, "UTSelect", {
     return _UTSelect.default;
   }
 });
+Object.defineProperty(exports, "UTSelectableCard", {
+  enumerable: true,
+  get: function () {
+    return _UTSelectableCard.default;
+  }
+});
 Object.defineProperty(exports, "UTSidebar", {
   enumerable: true,
   get: function () {
@@ -399,6 +405,7 @@ var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"
 var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
 var _UTRating = _interopRequireDefault(require("./components/UTRating"));
 var _UTSelect = _interopRequireDefault(require("./components/UTSelect"));
+var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectableCard"));
 var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
 var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
 var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));

package/package.json

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