contentoh-components-library 21.4.124 → 21.4.126

package/dist/components/atoms/ObservationFlag/index.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObservationFlag = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _styles = require("./styles");
+
+var _Tooltip = require("../Tooltip");
+
+var _noPriority = _interopRequireDefault(require("../../../assets/images/flags/noPriority.svg"));
+
+var _highPriority = _interopRequireDefault(require("../../../assets/images/flags/highPriority.svg"));
+
+var _mediumPriority = _interopRequireDefault(require("../../../assets/images/flags/mediumPriority.svg"));
+
+var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
+
+var _saveIconpink = _interopRequireDefault(require("../../../assets/images/generalButton/saveIconpink.svg"));
+
+var _Modal = require("../../organisms/Modal");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ObservationFlag = function ObservationFlag(_ref) {
+  var _PriorityFlags;
+
+  var observation = _ref.observation,
+      contentObservation = _ref.contentObservation,
+      dataProduct = _ref.dataProduct,
+      isObservationVisible = _ref.isObservationVisible,
+      toggleObservation = _ref.toggleObservation,
+      hideObservation = _ref.hideObservation;
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags); //const [isObservationVisible, setObservationVisible] = useState(false);
+
+  var _useState = (0, _react.useState)(contentObservation || ""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      material = _useState2[0],
+      setMaterial = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(observation),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      currentObservation = _useState4[0],
+      setCurrentObservation = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showModal = _useState6[0],
+      setShowModal = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      modalData = _useState8[0],
+      setModalData = _useState8[1];
+
+  var textareaRef = (0, _react.useRef)(null); // const toggleObservation = () => {
+  //   setObservationVisible(!isObservationVisible);
+  // };
+
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
+        setObservationVisible(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+    return function () {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible]); // useEffect(() => {
+  //   document.addEventListener("click", handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener("click", handleClickOutside);
+  //   };
+  // }, [isObservationVisible, handleClickOutside]);
+
+  (0, _react.useEffect)(function () {
+    setMaterial(contentObservation || "");
+  }, [contentObservation]);
+  (0, _react.useEffect)(function () {
+    setCurrentObservation(observation);
+  }, [observation]);
+
+  var saveRequest = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var dataToSend, response, succesResponse, errorResponse;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              dataToSend = {
+                orderId: parseInt(dataProduct.orderId),
+                articleId: dataProduct.article.id_article,
+                observation: textareaRef.current.value
+              };
+              _context.prev = 1;
+              _context.next = 4;
+              return _axios.default.put(process.env.REACT_APP_UPDATE_OBSERVATION, dataToSend);
+
+            case 4:
+              response = _context.sent;
+              succesResponse = {
+                status: true,
+                message: "Información guardada correctamente",
+                detail: "",
+                img: true
+              };
+              errorResponse = {
+                status: false,
+                message: "Error al guardar la información",
+                detail: "",
+                img: false
+              };
+              setShowModal(true);
+              setModalData(response.data.statusCode === 200 ? succesResponse : errorResponse);
+              setCurrentObservation(material !== "" ? "high" : "low");
+              hideObservation();
+              return _context.abrupt("return", response);
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](1);
+              console.log(_context.t0);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 14]]);
+    }));
+
+    return function saveRequest() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: PriorityFlags[currentObservation],
+        alt: observation,
+        style: {
+          cursor: "pointer"
+        },
+        onClick: toggleObservation
+      }), isObservationVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Observation, {
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+        },
+        className: "Observation",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ServTab, {
+          onClick: function onClick(evt) {
+            evt.stopPropagation();
+          },
+          className: "close-Container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "Material completo"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "flex",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+              ref: textareaRef,
+              name: "textarea",
+              rows: "10",
+              cols: "50",
+              style: {
+                color: "black",
+                padding: "5px"
+              },
+              value: material,
+              onChange: function onChange(e) {
+                return setMaterial(e.target.value);
+              },
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SaveButton, {
+            onClick: function onClick(evt) {
+              evt.stopPropagation();
+              saveRequest();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: _saveIconpink.default,
+              alt: "Guardar"
+            })
+          })]
+        })
+      })]
+    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      show: showModal,
+      title: modalData.title,
+      message: modalData.message,
+      onClickBtnDefault: function onClickBtnDefault(event) {
+        return setShowModal(false);
+      }
+    })]
+  });
+};
+
+exports.ObservationFlag = ObservationFlag;

package/dist/components/atoms/ObservationFlag/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ServTab = exports.SaveButton = exports.Observation = exports.Content = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* position: relative;\n  height: 100%;\n  width: 100%; */\n"])));
+
+exports.Container = Container;
+
+var Observation = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* height: 100%;\n  width: 100%; */\n  z-index: 10000;\n"])));
+
+exports.Observation = Observation;
+
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  & > div {\n    width: 30px;\n    height: 20px;\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    border-radius: 3px;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_ref) {
+  var cont = _ref.cont;
+  return cont === "-" || cont === "Pt" ? "#817393" : "#FFF";
+}, function (_ref2) {
+  var cont = _ref2.cont;
+  return backgroundContent(cont);
+});
+
+exports.Content = Content;
+
+var ServTab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 10%;\n  z-index: 2;\n  width: 300px;\n  max-height: 280px;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: #281f33;\n  padding: 8px;\n  white-space: normal;\n  font-family: Avenir Next;\n  font-style: normal;\n  > div {\n    background-color: #503d66;\n    margin-bottom: 8px;\n    color: #f0eef2;\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    > span {\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 19px;\n    }\n    > p {\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 16px;\n    }\n  }\n  .flex {\n    display: flex;\n    width: 100%;\n    background-color: #503d6644;\n    margin-left: 0px;\n    p {\n      width: 16%;\n      &:first-child {\n        width: 50%;\n      }\n    }\n  }\n  .title {\n    position: sticky;\n    top: -9px;\n    background-color: #503d66;\n  }\n  .ignore-background {\n    background-color: #1111;\n    margin: 0;\n  }\n"])));
+
+exports.ServTab = ServTab;
+
+var SaveButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: sticky;\n  bottom: 0;\n  left: 100%;\n  background-color: #fbfbfb;\n  border: 2px solid #e33aa9;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  cursor: pointer;\n  min-height: initial;\n"])));
+
+exports.SaveButton = SaveButton;

package/dist/components/atoms/PercentTag/PercentTag.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PercentTagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/PercentTag",
+  component: _.PercentTag
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PercentTag, (0, _objectSpread2.default)({}, args));
+};
+
+var PercentTagDefault = Template.bind({});
+exports.PercentTagDefault = PercentTagDefault;
+PercentTagDefault.args = {
+  percent: 88,
+  progressBarType: "AA"
+};

package/dist/components/atoms/PercentTag/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PercentTag = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PercentTag = function PercentTag(_ref) {
+  var percent = _ref.percent,
+      progressBarType = _ref.progressBarType;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: "status-".concat(progressBarType),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      children: [percent, "%"]
+    })
+  });
+};
+
+exports.PercentTag = PercentTag;

package/dist/components/atoms/PercentTag/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: inline-block;\n  padding: 0 10px;\n  border-radius: 5px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 20px;\n  color: ", ";\n\n  &.status-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R,\n  &.status-AS,\n  &.status-PA {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Lato, function (backgroundColor) {
+  return backgroundColor === "s2" || backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
+}, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/atoms/PriorityFlagv2/PriorityFlagv2.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PriorityFlagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/PriorityFlagv2",
+  component: _index.PriorityFlagv2,
+  argTypes: {
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PriorityFlagv2, (0, _objectSpread2.default)({}, args));
+};
+
+var PriorityFlagDefault = Template.bind({});
+exports.PriorityFlagDefault = PriorityFlagDefault;
+PriorityFlagDefault.args = {
+  priority: "no priority"
+};

package/dist/components/atoms/PriorityFlagv2/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PriorityFlagv2 = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _styles = require("./styles");
+
+var _noPriority = _interopRequireDefault(require("../../../assets/images/flagsv2/noPriority.svg"));
+
+var _highPriority = _interopRequireDefault(require("../../../assets/images/flagsv2/highPriority.svg"));
+
+var _mediumPriority = _interopRequireDefault(require("../../../assets/images/flagsv2/mediumPriority.svg"));
+
+var _lowPriority = _interopRequireDefault(require("../../../assets/images/flagsv2/lowPriority.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PriorityFlagv2 = function PriorityFlagv2(_ref) {
+  var _PriorityFlags;
+
+  var priority = _ref.priority;
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: PriorityFlags[priority],
+      alt: priority
+    })
+  });
+};
+
+exports.PriorityFlagv2 = PriorityFlagv2;

package/dist/components/atoms/PriorityFlagv2/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\nwidth:20px;\nheight:20px;\n"])));
+
+exports.Container = Container;

package/dist/components/atoms/ProductImagev2/ProductImagev2.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Template = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/ProductImagev2",
+  component: _.ProductImagev2,
+  argTypes: {
+    imageType: {
+      options: ["main-image", "carousel-image", "catalogue-image-big-size", "catalogue-image-small-size", "catalogue-modal-image", "expanded-modal-image"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProductImagev2, (0, _objectSpread2.default)({}, args));
+};
+
+exports.Template = Template;
+var ProductImagev2Default = Template.bind({});
+ProductImagev2Default.args = {
+  imageType: "main-image",
+  altText: "default image"
+};

package/dist/components/atoms/ProductImagev2/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductImagev2 = void 0;
+
+var _styles = require("./styles");
+
+var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
+
+var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductImagev2 = function ProductImagev2(_ref) {
+  var img = _ref.img,
+      imageType = _ref.imageType,
+      altText = _ref.altText,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: imageType,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+      src: img,
+      fallbackImage: _defaultProductImage.default,
+      alt: altText,
+      onClick: onClick
+    })
+  });
+};
+
+exports.ProductImagev2 = ProductImagev2;

package/dist/components/atoms/ProductImagev2/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img {\n    object-fit: contain;\n  }\n\n  &.carousel-image {\n    img {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img {\n      width: 182px;\n      height: 182px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    img {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    cursor: pointer;\n\n    img {\n      width: 68px;\n      height: 68px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 500px;\n    height: 500px;\n\n    img {\n      width: 500px;\n      height: 500px;\n      border-radius:10px;\n    }\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/atoms/Progress/Progress.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProgressDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index.js");
+
+var _variables = require("../../../global-files/variables.js");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/Progress",
+  component: _index.Progress,
+  argTypes: {
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Progress, (0, _objectSpread2.default)({}, args));
+};
+
+var ProgressDefault = Template.bind({});
+exports.ProgressDefault = ProgressDefault;
+ProgressDefault.args = {
+  percent: 0,
+  backgroundColor: "s2"
+};

package/dist/components/atoms/Progress/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Progress = void 0;
+
+var _styles = require("./styles");
+
+var _Tooltip = require("../Tooltip");
+
+var _GeneralButton = require("../GeneralButton");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Progress = function Progress(_ref) {
+  var percent = _ref.percent,
+      progressBarType = _ref.progressBarType,
+      percentRequired = _ref.percentRequired,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      showShield = _ref.showShield;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+      componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+            children: "Porcentaje de requeridos"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Este porcentaje indica la completitud de los atributos requeridos para todos los servicios."
+        })]
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+        className: "status-".concat(progressBarType),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: [percent, "%"]
+        })
+      }),
+      classNameTooltip: "container-tooltip"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [version && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "general-button-rec version-button",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          e.preventDefault();
+          setShowVersionSelector(true);
+        },
+        label: "V".concat(version)
+      }), showShield && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+              children: "Campos requeridos"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            children: ["Este nuevo icono te indicar\xE1 cuando ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), " completes todos los campos requeridos"]
+          })]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+          className: "fondo",
+          percentageRequired: percentRequired,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            class: "material-icons icono-police",
+            children: "\uEF56"
+          })
+        }),
+        classNameTooltip: "container-tooltip"
+      })]
+    })]
+  });
+};
+
+exports.Progress = Progress;