@widergy/energy-ui 3.1.7 → 3.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.2.0](https://github.com/widergy/energy-ui/compare/v3.1.7...v3.2.0) (2024-02-14)
+
+
+### Bug Fixes
+
+* fix pr ([85fe5ba](https://github.com/widergy/energy-ui/commit/85fe5ba1a525fa189b289754f4322b3aa55fe64d))
+* fix pr ([9736b29](https://github.com/widergy/energy-ui/commit/9736b29787905fbbe38a1a46b0efcf1579b790d0))
+* minor fix ([b422f41](https://github.com/widergy/energy-ui/commit/b422f41aa0f46d1330a49aca6ac256a61c07fe01))
+
+
+### Features
+
+* new componente + lint identation fixes ([005287f](https://github.com/widergy/energy-ui/commit/005287fc033a7ff41606c026cb106e480631e9c7))
+
 ## [3.1.7](https://github.com/widergy/energy-ui/compare/v3.1.6...v3.1.7) (2024-02-07)
 
 

package/dist/components/UTProductItem/README.md

@@ -0,0 +1,28 @@
+# UTProductItem
+
+### Description
+Product item component.
+
+### Action
+This action object will wait for a function and a type to apply a determinate style to the action button:
+Available types:
+- `add`
+- `modify`
+- `detail`
+- `modifyDetail`
+
+Also, you can pass a CustomIcon if you want to.
+
+### Props
+
+| Name                 | Type                                                                                                            | Default   |Description                      |
+|----------------------|-----------------------------------------------------------------------------------------------------------------|-----------|---------------------------------|
+| action               | object: {CustomIcon: ReactComponent, type: 'add' \| 'modify' \| 'detail' \| 'modifyDetail', onClick: () => () } |           | The action definition.          |
+| additionalInfo       | string                                                                                                          |           | The additional info to detail.  |
+| amount               |                                                                                                                 |           | The current amount.             |
+| discount             | number                                                                                                          |           | Current discount.               |
+| discountSize         | 'small' \| 'medium'                                                                                             | medium    | UTLabel component variant.      | 
+| Image                | asset                                                                                                           |           | Image of the product.           |
+| previousAmount       | number                                                                                                          |           | Amount without discount applied.|
+| selectedQuantity     | number                                                                                                          |           | Selected item product quantity. |
+| title                | string                                                                                                          |           | Product name.                   |

package/dist/components/UTProductItem/assets/addIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C8.55228 0 9 0.447715 9 1V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H9V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V9H1C0.447715 9 0 8.55228 0 8C0 7.44772 0.447715 7 1 7H7V1C7 0.447715 7.44772 0 8 0Z" fill="#091E42"/>
+</svg>

package/dist/components/UTProductItem/assets/detailIcon.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" fill="white"/>
+</svg>

package/dist/components/UTProductItem/assets/editIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0189 6.67867L9.3239 3.98367L11.2719 2.03467L13.9659 4.72867L12.0189 6.67867ZM5.0799 13.6247L2.1029 13.8957L2.3669 10.9397L7.9839 5.32267L10.6799 8.01867L5.0799 13.6247ZM15.4039 3.33767L15.4029 3.33667L12.6649 0.598675C11.9239 -0.140325 10.6509 -0.175325 9.9489 0.529675L0.952896 9.52567C0.626896 9.85067 0.424896 10.2827 0.382896 10.7397L0.00389602 14.9097C-0.022104 15.2047 0.082896 15.4967 0.292896 15.7067C0.481896 15.8957 0.736896 15.9997 0.999896 15.9997C1.0309 15.9997 1.0609 15.9987 1.0909 15.9957L5.2609 15.6167C5.7189 15.5747 6.1499 15.3737 6.4749 15.0487L15.4719 6.05167C16.1999 5.32167 16.1689 4.10367 15.4039 3.33767Z" fill="#091E42"/>
+</svg>

package/dist/components/UTProductItem/assets/modifyDetailIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0189 6.67867L9.3239 3.98367L11.2719 2.03467L13.9659 4.72867L12.0189 6.67867ZM5.0799 13.6247L2.1029 13.8957L2.3669 10.9397L7.9839 5.32267L10.6799 8.01867L5.0799 13.6247ZM15.4039 3.33767L15.4029 3.33667L12.6649 0.598675C11.9239 -0.140325 10.6509 -0.175325 9.9489 0.529675L0.952896 9.52567C0.626896 9.85067 0.424896 10.2827 0.382896 10.7397L0.00389602 14.9097C-0.022104 15.2047 0.082896 15.4967 0.292896 15.7067C0.481896 15.8957 0.736896 15.9997 0.999896 15.9997C1.0309 15.9997 1.0609 15.9987 1.0909 15.9957L5.2609 15.6167C5.7189 15.5747 6.1499 15.3737 6.4749 15.0487L15.4719 6.05167C16.1999 5.32167 16.1689 4.10367 15.4039 3.33767Z" fill="white"/>
+</svg>

package/dist/components/UTProductItem/constants.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.actionMapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Add = function Add(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1Z",
+    fill: "#091E42"
+  }));
+};
+Add.defaultProps = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var Edit = function Edit(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.019 6.679 9.324 3.984l1.948-1.95 2.694 2.695-1.947 1.95Zm-6.94 6.946-2.976.27.264-2.955 5.617-5.617 2.696 2.696-5.6 5.606ZM15.405 3.338l-.001-.001L12.665.599c-.741-.74-2.014-.774-2.716-.07L.953 9.527a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.38a1.974 1.974 0 0 0 1.214-.567l8.997-8.997c.728-.73.697-1.948-.068-2.714Z",
+    fill: "#091E42"
+  }));
+};
+Edit.defaultProps = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var Detail = function Detail(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M.293.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L5.586 7 .293 1.707a1 1 0 0 1 0-1.414Z",
+    fill: "#fff"
+  }));
+};
+Detail.defaultProps = {
+  width: "8",
+  height: "14",
+  viewBox: "0 0 8 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var ModifyDetail = function ModifyDetail(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.019 6.679 9.324 3.984l1.948-1.95 2.694 2.695-1.947 1.95Zm-6.94 6.946-2.976.27.264-2.955 5.617-5.617 2.696 2.696-5.6 5.606ZM15.405 3.338l-.001-.001L12.665.599c-.741-.74-2.014-.774-2.716-.07L.953 9.527a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.38a1.974 1.974 0 0 0 1.214-.567l8.997-8.997c.728-.73.697-1.948-.068-2.714Z",
+    fill: "#fff"
+  }));
+};
+ModifyDetail.defaultProps = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const ADD = 'add';
+const MODIFY = 'modify';
+const DETAIL = 'detail';
+const MODIFY_DETAIL = 'modifyDetail';
+const actionMapper = exports.actionMapper = {
+  [ADD]: {
+    colorTheme: 'secondary',
+    Icon: Add,
+    size: 'small',
+    variant: 'semitransparent'
+  },
+  [MODIFY]: {
+    colorTheme: 'secondary',
+    Icon: Edit,
+    size: 'small',
+    variant: 'text'
+  },
+  [DETAIL]: {
+    colorTheme: 'primary',
+    Icon: Detail,
+    size: 'small'
+  },
+  [MODIFY_DETAIL]: {
+    colorTheme: 'primary',
+    Icon: ModifyDetail,
+    size: 'small'
+  }
+};

package/dist/components/UTProductItem/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _object = require("@widergy/web-utils/lib/object");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const UTProductItem = _ref => {
+  let {
+    action = {},
+    additionalInfo,
+    amount,
+    classes,
+    discount,
+    discountSize = 'medium',
+    Image,
+    previousAmount,
+    selectedQuantity,
+    title
+  } = _ref;
+  const {
+    CustomIcon,
+    onClick,
+    type = 'add'
+  } = action;
+  const {
+    colorTheme,
+    Icon,
+    size,
+    variant
+  } = _constants.actionMapper[type] || {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.leftSection
+  }, !!Image && /*#__PURE__*/_react.default.createElement(Image, {
+    className: classes.image
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.mainInfo
+  }, !!title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium",
+    variant: "small"
+  }, title), !!additionalInfo && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: "gray"
+  }, additionalInfo), !!discount && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.amountContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.discountChip
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "light",
+    variant: discountSize
+  }, "".concat(discount, "% OFF"))), !!previousAmount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: classes.previousAmount
+  }, "$ ".concat(previousAmount))), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium",
+    variant: "subtitle1"
+  }, "$ ".concat(amount)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.rightSection
+  }, !!selectedQuantity && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.selectedQuantity
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "light",
+    weight: "medium"
+  }, selectedQuantity)), !(0, _object.objectIsEmpty)(action) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: classes.buttonIcon
+    },
+    colorTheme: colorTheme,
+    onClick: onClick,
+    Icon: CustomIcon || Icon,
+    size: size,
+    variant: variant
+  })));
+};
+UTProductItem.propTypes = {
+  action: (0, _propTypes.shape)({
+    onClick: _propTypes.func,
+    type: _propTypes.string
+  }),
+  additionalInfo: _propTypes.string,
+  amount: _propTypes.number,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  discount: _propTypes.number,
+  discountSize: _propTypes.string,
+  Image: _propTypes.node,
+  previousAmount: _propTypes.number,
+  selectedQuantity: _propTypes.number,
+  title: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTProductItem);

package/dist/components/UTProductItem/theme.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    amountContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    buttonIcon: {
+      height: '16px',
+      width: '16px'
+    },
+    container: {
+      borderBottom: "1px solid ".concat(theme.Palette.light['04']),
+      display: 'flex',
+      gridGap: '12px',
+      justifyContent: 'space-between',
+      paddingBottom: '24px'
+    },
+    discountChip: {
+      backgroundColor: theme.Palette.actions.accent['04'],
+      borderRadius: '4px',
+      padding: '4px 8px'
+    },
+    image: {
+      borderRadius: '12px',
+      height: '70px',
+      width: '70px'
+    },
+    leftSection: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '16px'
+    },
+    mainInfo: {
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '4px',
+      minWidth: '160px'
+    },
+    previousAmount: {
+      textDecoration: 'line-through'
+    },
+    rightSection: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '12px'
+    },
+    selectedQuantity: {
+      backgroundColor: theme.Palette.actions.neutral['04'],
+      borderRadius: '4px',
+      padding: '4px 8px'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/index.js

@@ -219,6 +219,12 @@ Object.defineProperty(exports, "UTPieChart", {
     return _UTPieChart.default;
   }
 });
+Object.defineProperty(exports, "UTProductItem", {
+  enumerable: true,
+  get: function () {
+    return _UTProductItem.default;
+  }
+});
 Object.defineProperty(exports, "UTProgressBar", {
   enumerable: true,
   get: function () {
@@ -388,6 +394,7 @@ var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
 var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
 var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
 var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
+var _UTProductItem = _interopRequireDefault(require("./components/UTProductItem"));
 var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
 var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
 var _UTRating = _interopRequireDefault(require("./components/UTRating"));

package/package.json

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