contentoh-components-library 21.4.75 → 21.4.78

package/dist/assets/images/Icons/close.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2487" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
+<rect width="10" height="10" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2487)">
+<path d="M0.769231 10L0 9.23077L4.23077 5L0 0.769231L0.769231 0L5 4.23077L9.23077 0L10 0.769231L5.76923 5L10 9.23077L9.23077 10L5 5.76923L0.769231 10Z" fill="#B64545"/>
+</g>
+</svg>

package/dist/assets/images/Icons/edit.svg

@@ -0,0 +1,8 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_731_2312" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
+<rect width="12" height="12" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_731_2312)">
+<path d="M1.40041 10.5996H2.06071L8.70873 3.95157L8.04843 3.29127L1.40041 9.93929V10.5996ZM10.6146 3.30628L8.69372 1.3854L9.32401 0.755116C9.49409 0.585039 9.70418 0.5 9.9543 0.5C10.2044 0.5 10.4145 0.585039 10.5846 0.755116L11.2449 1.41542C11.415 1.58549 11.5 1.79559 11.5 2.0457C11.5 2.29582 11.415 2.50591 11.2449 2.67599L10.6146 3.30628ZM9.98431 3.93656L2.42087 11.5H0.5V9.57913L8.06344 2.01569L9.98431 3.93656Z" fill="#E33AA9"/>
+</g>
+</svg>

package/dist/assets/images/Icons/save.svg

@@ -0,0 +1,8 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_748_1469" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
+<rect width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_748_1469)">
+<path d="M14 3.05278V12.8333C14 13.1444 13.8833 13.4167 13.65 13.65C13.4167 13.8833 13.1444 14 12.8333 14H1.16667C0.855556 14 0.583333 13.8833 0.35 13.65C0.116667 13.4167 0 13.1444 0 12.8333V1.16667C0 0.855556 0.116667 0.583333 0.35 0.35C0.583333 0.116667 0.855556 0 1.16667 0H10.9472L14 3.05278ZM12.8333 3.57778L10.4222 1.16667H1.16667V12.8333H12.8333V3.57778ZM6.99543 11.5694C7.55588 11.5694 8.0338 11.3733 8.42917 10.981C8.82454 10.5886 9.02222 10.1123 9.02222 9.55179C9.02222 8.99134 8.82606 8.51343 8.43374 8.11806C8.04143 7.72269 7.56504 7.525 7.00457 7.525C6.44412 7.525 5.9662 7.72116 5.57083 8.11349C5.17546 8.5058 4.97778 8.98219 4.97778 9.54265C4.97778 10.1031 5.17394 10.581 5.56626 10.9764C5.95858 11.3718 6.43496 11.5694 6.99543 11.5694ZM2.19722 4.97778H9.15833V2.19722H2.19722V4.97778Z" fill="#E33AA9"/>
+</g>
+</svg>

package/dist/components/atoms/ObservationFlag/ObservationFlag.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/ObservationFlag",
+  component: _index.ObservationFlag,
+  argTypes: {
+    observation: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ObservationFlag, (0, _objectSpread2.default)({}, args));
+};
+
+var PriorityFlagDefault = Template.bind({});
+exports.PriorityFlagDefault = PriorityFlagDefault;
+PriorityFlagDefault.args = {
+  observation: "no observation"
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObservationFlag = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+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 _jsxRuntime = require("react/jsx-runtime");
+
+var ObservationFlag = function ObservationFlag(_ref) {
+  var _PriorityFlags;
+
+  var observation = _ref.observation,
+      contentObservation = _ref.contentObservation;
+  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)(_Tooltip.Tooltip, {
+    componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          children: "Observaciones del producto"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        children: [contentObservation, " "]
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: PriorityFlags[observation],
+        alt: observation
+      })
+    }),
+    classNameTooltip: "container-tooltip"
+  });
+};
+
+exports.ObservationFlag = ObservationFlag;

package/dist/components/atoms/ObservationFlag/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)([""])));
+
+exports.Container = Container;

package/dist/components/molecules/Phase/index.js

@@ -23,7 +23,7 @@ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
 var _material = require("@mui/material");
 
-var _Select = _interopRequireDefault(require("../../atoms/Select"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
 
 var _addv = _interopRequireDefault(require("../../../assets/images/Icons/addv2.svg"));
 
@@ -45,7 +45,8 @@ var Phase = function Phase(_ref) {
       phaseName = _ref.phaseName,
       nextPhase = _ref.nextPhase,
       groups = _ref.groups,
-      onDeletePhase = _ref.onDeletePhase;
+      onDeletePhase = _ref.onDeletePhase,
+      draggable = _ref.draggable;
 
   var _useState = (0, _react.useState)(""),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -79,6 +80,16 @@ var Phase = function Phase(_ref) {
 
   var idPhase = id + 1;
 
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      draggedItem = _useState12[0],
+      setDraggedItem = _useState12[1];
+
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      tempItems = _useState14[0],
+      setTempItems = _useState14[1];
+
   var onAdd = function onAdd() {
     if (selectedValue && !groupsSelected.includes(selectedValue)) {
       setGroupsSelected(function (prevGroups) {
@@ -113,8 +124,7 @@ var Phase = function Phase(_ref) {
         return chip !== chipToRemove;
       });
     });
-  }; // const combinedGroups = [...grupos, ...chips];
-
+  };
 
   var _React$useState = _react.default.useState(null),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -135,10 +145,10 @@ var Phase = function Phase(_ref) {
     var label = _ref2.label,
         onDelete = _ref2.onDelete;
 
-    var _useState11 = (0, _react.useState)(false),
-        _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-        isHovered = _useState12[0],
-        setIsHovered = _useState12[1];
+    var _useState15 = (0, _react.useState)(false),
+        _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+        isHovered = _useState16[0],
+        setIsHovered = _useState16[1];
 
     var handleMouseEnter = function handleMouseEnter() {
       setIsHovered(true);
@@ -163,9 +173,33 @@ var Phase = function Phase(_ref) {
     });
   };
 
-  console.log(id, phases, nextPhase, groups); // useEffect(() => initialPhase(),[]);
+  var onDragStartHandler = function onDragStartHandler(e) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(id);
+    onDragStart(e, id);
+  };
+
+  var onDragOverHandler = function onDragOverHandler(index) {
+    if (!draggedItem || draggedItem === id) {
+      return;
+    }
+
+    onDragOver(id);
+    setDraggedItem(null);
+  };
+
+  var onDragEndHandler = function onDragEndHandler() {
+    onDragEnd();
+    setDraggedItem(null);
+  };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    onDragStart: onDragStartHandler,
+    onDragOver: onDragOverHandler,
+    onDragEnd: onDragEndHandler,
+    draggable: draggable,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "header-phase",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
@@ -179,21 +213,41 @@ var Phase = function Phase(_ref) {
           className: "phase-sel",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
             className: "text-phase",
-            children: "Al rechazar en esta fase enviar a "
+            children: "Siguiente Fase "
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
             width: "100px",
-            valueSelected: nextPhase ? Object.values(nextPhase) : [],
+            value: selectedValue !== "" ? selectedValue : nextPhase,
             placeholder: "Fase",
-            options: phases.map(function (phase) {
-              return phase.phaseName;
-            }),
             onChange: function onChange(e) {
               var selectedPhase = phases.find(function (phase) {
                 return phase.phaseName === e.target.value;
               });
-              console.log("fase seleccionada", selectedPhase);
               setSelectedValue(selectedPhase.nextPhaseIfApproved);
-            }
+            },
+            sx: {
+              width: "auto",
+              minWidth: "100px",
+              height: "24px",
+              background: "#F7F7FC",
+              borderRadius: "5px"
+            },
+            MenuProps: {
+              PaperProps: {
+                style: {
+                  background: "#F7F7FC"
+                }
+              }
+            },
+            children: phases.map(function (phase) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                value: phase.phaseName,
+                sx: {
+                  fontSize: "10px",
+                  color: "#262626"
+                },
+                children: phase.phaseName
+              }, phase.phaseId);
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
             id: "basic-button",
             "aria-controls": open ? "basic-menu" : undefined,

package/dist/components/molecules/ProductNameHeader/index.js

@@ -15,6 +15,8 @@ var _index3 = require("../../atoms/ProgressBar/index");
 
 var _index4 = require("../../atoms/PriorityFlag/index");
 
+var _index5 = require("../../atoms/ObservationFlag/index");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductNameHeader = function ProductNameHeader(_ref) {
@@ -22,7 +24,9 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       statusType = _ref.statusType,
       priority = _ref.priority,
       date = _ref.date,
-      percentRequired = _ref.percentRequired;
+      percentRequired = _ref.percentRequired,
+      productObservation = _ref.productObservation;
+  var typeFlag = productObservation !== null && productObservation !== "" ? "high" : "low";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       headerType: "product-name-header",
@@ -33,8 +37,9 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       percent: percentRequired,
       progressBarType: statusType,
       percentRequired: percentRequired
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.PriorityFlag, {
-      priority: priority
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.ObservationFlag, {
+      observation: typeFlag,
+      contentObservation: productObservation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       headerType: "date-header",
       text: date