@widergy/energy-ui 3.6.2 → 3.7.0

package/dist/components/UTSelectableCard/index.js

@@ -4,24 +4,49 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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");
+var _theme = require("./theme");
 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 && {}.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; }
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L10 15.586l9.293-9.293a1 1 0 0 1 1.414 0Z",
+    fill: "#0136E7"
+  }));
+};
+CheckIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var HelpIcon = function HelpIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 3.333a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334ZM1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm7.062-4.713a3 3 0 1 1 2.38 5.5.416.416 0 0 0-.277.416.833.833 0 0 1-1.664.094 2.083 2.083 0 0 1 1.376-2.078A1.334 1.334 0 1 0 8.997 7.17.833.833 0 1 1 7.67 6.163a3 3 0 0 1 1.06-.876ZM10 13.333c.46 0 .833.373.833.834v.008a.833.833 0 0 1-1.666 0v-.008c0-.46.373-.834.833-.834Z",
+    fill: "#091E42"
+  }));
+};
+HelpIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 const UTSelectableCard = _ref => {
   let {
     aditionalInfo = {},
-    apareance = 'white',
+    appearance = _constants.APPEARANCES.WHITE,
     checkIcon = true,
     classes,
     classNames = {},
@@ -30,73 +55,62 @@ const UTSelectableCard = _ref => {
     Icon,
     onClick,
     selected = false,
-    size = 'medium',
+    size = _constants.SIZES.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, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
     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")])
+    className: "\n      ".concat(classes.item, "\n      ").concat(disabled ? classes["".concat(appearance, "DisabledContainer")] : selected ? classes["".concat(appearance, "SelectedContainer")] : classes["".concat(appearance, "Apareance")], "\n      ").concat(classes["".concat(size, "Size")], "\n    ")
   }, 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)
+    className: "".concat(classes.icon, " ").concat(classNames.icon)
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.textContainer
+    className: "".concat(classes.textContainer, " ").concat(checkIcon && classes.textContainerWithCheckedIcon)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.column
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.titleAndTooltip
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.titleText,
     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
+    weight: "medium"
   }, 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 : '')
+  }, /*#__PURE__*/_react.default.createElement(HelpIcon, {
+    className: "".concat(classes.infoIcon)
   })))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    colorTheme: apareanceGrayPressed ? _constants.LIGHT : selected ? _constants.ACCENT : _constants.GRAY,
-    shade: apareanceGrayPressed ? _constants.shade01 : selectedItemShade || _constants.shade04
+    className: classes.description
   }, 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,
+    className: classes.aditionalInfoTitle,
     variant: "small",
-    weight: "semibold",
-    shade: apareanceGrayPressed ? _constants.shade01 : disabled ? _constants.shade04 : _constants.shade05
+    weight: "semibold"
   }, 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)
+    className: classes.aditionalInfoDescription,
+    variant: "small"
+  }, aditionalInfo.description))), checkIcon && selected && /*#__PURE__*/_react.default.createElement(CheckIcon, {
+    className: classes.checkIcon
   }));
 };
 UTSelectableCard.propTypes = {
   aditionalInfo: (0, _propTypes.shape)({
-    title: _propTypes.string,
-    description: _propTypes.string
+    description: _propTypes.string,
+    title: _propTypes.string
   }),
-  apareance: _propTypes.string,
+  appearance: (0, _propTypes.oneOf)([_constants.APPEARANCES.GRAY, _constants.APPEARANCES.WHITE]),
   checkIcon: _propTypes.bool,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: _propTypes.object,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   description: _propTypes.string,
   disabled: _propTypes.bool,
-  Icon: _propTypes.object,
+  Icon: _propTypes.elementType,
   onClick: _propTypes.func,
   selected: _propTypes.bool,
-  size: _propTypes.string,
+  size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
   titleText: _propTypes.string,
   tooltip: _propTypes.string
 };

package/dist/components/UTSelectableCard/theme.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../utils/shadowUtils");
 const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
   let {
     theme
   } = _ref;
@@ -17,17 +19,6 @@ const retrieveStyle = _ref => {
       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',
@@ -41,29 +32,6 @@ const retrieveStyle = _ref => {
       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',
@@ -79,16 +47,6 @@ const retrieveStyle = _ref => {
     mediumSize: {
       padding: '24px'
     },
-    selectedIcon: {
-      '& path': {
-        fill: theme.Palette.actions.accent['05']
-      }
-    },
-    selectedInfoIcon: {
-      '& path': {
-        color: theme.Palette.actions.accent['05']
-      }
-    },
     smallSize: {
       padding: '16px'
     },
@@ -98,6 +56,9 @@ const retrieveStyle = _ref => {
       justifyContent: 'space-between',
       width: '100%'
     },
+    textContainerWithCheckedIcon: {
+      minHeight: 24
+    },
     titleAndTooltip: {
       alignItems: 'center',
       display: 'flex',
@@ -106,66 +67,142 @@ const retrieveStyle = _ref => {
     tooltip: {
       display: 'flex'
     },
-    // white apareance
-
+    checkIcon: {
+      flexShrink: 0
+    },
+    icon: {
+      flexShrink: 0,
+      height: '36px',
+      width: '36px'
+    },
+    infoIcon: {
+      flexShrink: 0
+    },
+    titleText: {},
+    description: {},
+    aditionalInfoTitle: {},
+    aditionalInfoDescription: {},
+    // White apareance
     whiteApareance: {
       backgroundColor: theme.Palette.light['01'],
-      boxShadow: '0 3px 6px 0 #182C491A',
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      }),
+      outline: "2px solid transparent",
+      '& $titleText, & $aditionalInfoTitle': {
+        color: theme.Palette.dark['05']
+      },
+      '& $icon path, & $infoIcon path': {
+        fill: theme.Palette.dark['05']
+      },
+      '& $description, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
       '&: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'
+        boxShadow: 'none',
+        '& $aditionalInfoDescription': {
+          color: theme.Palette.gray['03']
+        }
       }
     },
     whiteSelectedContainer: {
-      border: "2px solid ".concat(theme.Palette.actions.accent['05']),
       boxShadow: 'none',
+      outline: "2px solid ".concat(theme.Palette.actions.accent['05']),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.actions.accent['05']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.actions.accent['05']
+      },
       '&:hover': {
         backgroundColor: theme.Palette.actions.accent['01'],
-        border: "2px solid ".concat(theme.Palette.actions.accent['05'])
+        outline: "2px solid ".concat(theme.Palette.actions.accent['05'])
       },
       '&:active': {
         backgroundColor: theme.Palette.actions.accent['02'],
-        border: "2px solid ".concat(theme.Palette.actions.accent['05'])
+        outline: "2px solid ".concat(theme.Palette.actions.accent['05'])
+      }
+    },
+    whiteDisabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
+      boxShadow: 'none',
+      outline: "2px solid transparent",
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        outline: "2px solid transparent",
+        pointerEvents: 'none'
       }
     },
     // Gray apareance
-
     grayApareance: {
       backgroundColor: theme.Palette.light['03'],
-      border: "1px solid ".concat(theme.Palette.light['05']),
+      outline: "1px solid ".concat(theme.Palette.light['05']),
+      '& $titleText, & $aditionalInfoTitle': {
+        color: theme.Palette.dark['05']
+      },
+      '& $icon path, & $infoIcon path': {
+        fill: theme.Palette.dark['05']
+      },
+      '& $description, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
       '&: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'
+        backgroundColor: theme.Palette.light['05'],
+        '& $aditionalInfoDescription': {
+          color: theme.Palette.gray['03']
+        }
       }
     },
     graySelectedContainer: {
       backgroundColor: theme.Palette.actions.accent['01'],
-      border: "2px solid ".concat(theme.Palette.actions.accent['03']),
+      outline: "2px solid ".concat(theme.Palette.actions.accent['03']),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.actions.accent['05']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.actions.accent['05']
+      },
       '&:hover': {
         backgroundColor: theme.Palette.actions.accent['02']
       },
       '&:active': {
-        backgroundColor: theme.Palette.actions.accent['03']
+        backgroundColor: theme.Palette.actions.accent['03'],
+        '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+          color: theme.Palette.light['01']
+        },
+        '& $icon path, & $infoIcon path, & $checkIcon path': {
+          fill: theme.Palette.light['01']
+        }
+      }
+    },
+    grayDisabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
+      outline: "2px solid ".concat(theme.Palette.light['05']),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        cursor: 'default',
+        pointerEvents: 'none'
       }
     }
   };

package/dist/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "UTAttachment", {
     return _UTAttachment.default;
   }
 });
+Object.defineProperty(exports, "UTAttachmentList", {
+  enumerable: true,
+  get: function () {
+    return _UTAttachmentList.default;
+  }
+});
 Object.defineProperty(exports, "UTAutocomplete", {
   enumerable: true,
   get: function () {
@@ -368,6 +374,7 @@ var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
 var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
 var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
 var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
+var _UTAttachmentList = _interopRequireDefault(require("./components/UTAttachmentList"));
 var _UTAutocomplete = _interopRequireDefault(require("./components/UTAutocomplete"));
 var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
 var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));

package/package.json

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