contentoh-components-library 21.4.136 → 21.4.138

package/dist/components/molecules/PlanSelection/PlanSelection.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PlanSelectionDefault = 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/molecules/PlanSelection",
+  component: _index.PlanSelection
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PlanSelection, (0, _objectSpread2.default)({}, args));
+};
+
+var PlanSelectionDefault = Template.bind({});
+exports.PlanSelectionDefault = PlanSelectionDefault;
+PlanSelectionDefault.args = {
+  planSelection: [{
+    number: "300",
+    name: "Proveedores"
+  }, {
+    number: "1500",
+    name: "Proveedores"
+  }, {
+    number: "+3000",
+    name: "Proveedores"
+  }, {
+    number: "On demand",
+    name: "agrega proveedores a tu forma"
+  }]
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlanSelection = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/GeneralTextBox/index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PlanSelection = function PlanSelection(_ref) {
+  var planSelection = _ref.planSelection,
+      setbuttonActive = _ref.setbuttonActive;
+
+  var setActivePlan = function setActivePlan(e) {
+    var buttonsPlan = document.querySelectorAll(".button-plan");
+    buttonsPlan.forEach(function (button) {
+      return button.classList.remove("active");
+    });
+    e.target.closest(".button-plan").classList.add("active");
+    setbuttonActive(true);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GeneralTextBox, {
+        className: "button-plan",
+        onClick: function onClick(e) {
+          return setActivePlan(e);
+        },
+        number: plan === null || plan === void 0 ? void 0 : plan.number,
+        name: plan === null || plan === void 0 ? void 0 : plan.name
+      }, index);
+    })
+  });
+};
+
+exports.PlanSelection = PlanSelection;

package/dist/components/molecules/PlanSelection/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  display: grid;\n  row-gap: 15px;\n  column-gap: 15px;\n  grid-template-columns: repeat(3, 1fr);\n  button:nth-child(4) {\n    grid-column-start: 1;\n    grid-column-end: 4;\n  }\n  & + * {\n    margin-top: 90px;\n  }\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNameHeaderDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductNameHeader",
+  component: _index.ProductNameHeader,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNameHeader, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductNameHeaderDefault = Template.bind({});
+exports.ProductNameHeaderDefault = ProductNameHeaderDefault;
+ProductNameHeaderDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNameHeader = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _index2 = require("../../atoms/Status/index");
+
+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) {
+  var productName = _ref.productName,
+      statusType = _ref.statusType,
+      priority = _ref.priority,
+      date = _ref.date,
+      percentRequired = _ref.percentRequired,
+      productObservation = _ref.productObservation,
+      dataProduct = _ref.dataProduct,
+      isObservationVisible = _ref.isObservationVisible,
+      toggleObservation = _ref.toggleObservation,
+      hideObservation = _ref.hideObservation;
+  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",
+      text: productName
+    }), statusType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Status, {
+      statusType: statusType
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ProgressBar, {
+      percent: percentRequired,
+      progressBarType: statusType,
+      percentRequired: percentRequired
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.ObservationFlag, {
+      observation: typeFlag,
+      contentObservation: productObservation,
+      dataProduct: dataProduct,
+      isObservationVisible: isObservationVisible,
+      toggleObservation: toggleObservation // handleClickOutside = {handleClickOutside}
+      ,
+      hideObservation: hideObservation
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+      headerType: "date-header",
+      text: date
+    })]
+  });
+};
+
+exports.ProductNameHeader = ProductNameHeader;

package/dist/components/molecules/ProductNameHeader/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  display: flex;\n  align-items: center;\n\n  * + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ProductNameHeaderv2/ProductNameHeaderv2.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNameHeaderv2Default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductNameHeaderv2",
+  component: _index.ProductNameHeaderv2,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNameHeaderv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductNameHeaderv2Default = Template.bind({});
+exports.ProductNameHeaderv2Default = ProductNameHeaderv2Default;
+ProductNameHeaderv2Default.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString()
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNameHeaderv2 = void 0;
+
+var _styles = require("./styles");
+
+var _ScreenHeaderv = require("../../atoms/ScreenHeaderv2");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductNameHeaderv2 = function ProductNameHeaderv2(_ref) {
+  var productName = _ref.productName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
+      headerType: "product-name-header",
+      text: productName
+    })
+  });
+};
+
+exports.ProductNameHeaderv2 = ProductNameHeaderv2;

package/dist/components/molecules/ProductNameHeaderv2/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  display: flex;\n  align-items: center;\n\n  * + * {\n    margin-left: 10px;\n  }\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ProductNotification/ProductNotification.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNotificationDefault = 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/molecules/ProductNotification",
+  component: _index.ProductNotification
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNotification, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductNotificationDefault = Template.bind({});
+exports.ProductNotificationDefault = ProductNotificationDefault;
+ProductNotificationDefault.args = {
+  notification: false
+};

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNotification = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/Avatar/index");
+
+var _react = require("react");
+
+var _MenuNotification = require("../../atoms/MenuNotification");
+
+var _productNotification = _interopRequireDefault(require("../../../assets/images/productNotification/productNotification.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductNotification = function ProductNotification(_ref) {
+  var notification = _ref.notification;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest("#menu-notification") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  var content = [{
+    notificationType: "productComment",
+    label: "Asignaron el producto 23441244"
+  }, {
+    notificationType: "productAssignation",
+    label: "Ajustaron el nombre del producto"
+  }, {
+    notificationType: "productAssignation",
+    label: "Agregaron comentario en producto 123"
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setShowMenu(!showMenu);
+
+      if (showMenu) {
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: notification && "new-notification",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
+      image: _productNotification.default,
+      imageType: "big-image",
+      altText: "Notification Picture"
+    }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuNotification.MenuNotification, {
+      content: content
+    })]
+  });
+};
+
+exports.ProductNotification = ProductNotification;

package/dist/components/molecules/ProductNotification/styles.js

@@ -0,0 +1,20 @@
+"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.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 3px;\n  width: 50px;\n  height: 50px;\n  border: none;\n  position: relative;\n  &.new-notification::before {\n    content: \"\";\n    width: 10px;\n    height: 10px;\n    display: block;\n    border-radius: 100%;\n    background-color: #ff0094;\n    position: absolute;\n    left: 56%;\n    top: 11px;\n    z-index: 1;\n    animation: pulse 0.4s alternate infinite;\n    @keyframes pulse {\n      from {\n        transform: scale(1);\n      }\n      to {\n        transform: scale(1.1);\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/molecules/ProductSkuStatus/ProductSkuStatus.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductSkuStatusDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProductSkuStatus",
+  component: _index.ProductSkuStatus,
+  argTypes: {
+    statusType: {
+      options: Object.values(_variables.GlobalStatus),
+      control: {
+        type: "select"
+      }
+    },
+    percent: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    backgroundColor: {
+      options: Object.keys(_variables.GlobalColors),
+      control: {
+        type: "select"
+      }
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductSkuStatus, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductSkuStatusDefault = Template.bind({});
+exports.ProductSkuStatusDefault = ProductSkuStatusDefault;
+ProductSkuStatusDefault.args = {
+  statusType: "AP",
+  percent: 84,
+  backgroundColor: "s2",
+  priority: "no priority",
+  percentRequired: 100 // date: new Date().toLocaleDateString(),
+
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductSkuStatus = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/Status/index");
+
+var _Progress = require("../../atoms/Progress");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductSkuStatus = function ProductSkuStatus(_ref) {
+  var statusType = _ref.statusType,
+      percentRequired = _ref.percentRequired,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      showShield = _ref.showShield;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [statusType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Status, {
+      statusType: statusType
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+      percent: percentRequired,
+      progressBarType: statusType,
+      percentRequired: percentRequired,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector,
+      showShield: showShield
+    })]
+  });
+};
+
+exports.ProductSkuStatus = ProductSkuStatus;

package/dist/components/molecules/ProductSkuStatus/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  display: flex;\n  align-items: center;\n  gap:10px;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/ProfileHeader/ProfileHeader.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileHeaderDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _profilePicture = _interopRequireDefault(require("../../../assets/images/profileHeader/profilePicture.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/ProfileHeader",
+  component: _index.ProfileHeader
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProfileHeader, (0, _objectSpread2.default)({}, args));
+};
+
+var ProfileHeaderDefault = Template.bind({});
+exports.ProfileHeaderDefault = ProfileHeaderDefault;
+ProfileHeaderDefault.args = {
+  customerProfileImg: _profilePicture.default,
+  customerName: "Name default",
+  customer: "Customer default"
+};