contentoh-components-library 6.0.0 → 9.0.0

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

@@ -12,7 +12,9 @@ var CheckBox = function CheckBox(_ref) {
       label = _ref.label,
       onChange = _ref.onChange,
       isFilter = _ref.isFilter;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    key: "check-".concat(id)
+  }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     name: id,
     id: id,

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Commentary = void 0;
+
+var _styles = require("./styles");
+
+var Commentary = function Commentary(_ref) {
+  var comment = _ref.comment;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("p", null, comment));
+};
+
+exports.Commentary = Commentary;

package/dist/components/atoms/Commentary/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.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 500px;\n  height: 80px;\n  border: 1px solid ", ";\n  padding: 10px;\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 15px;\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

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

@@ -17,7 +17,8 @@ var CustomerTypeImages = function CustomerTypeImages(_ref) {
   var _ref$imageType = _ref.imageType,
       imageType = _ref$imageType === void 0 ? "retailer" : _ref$imageType;
   return /*#__PURE__*/React.createElement(_styles.Container, {
-    imageType: imageType
+    imageType: imageType,
+    key: "image-".concat(imageType)
   }, /*#__PURE__*/React.createElement("img", {
     src: imageType === "retailer" ? _Cadena.default : _Proveedor.default,
     alt: imageType === "retailer" ? "Cadena" : "Proveedor"

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditFieldDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/EditField",
+  component: _index.EditField
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.EditField, args);
+};
+
+var EditFieldDefault = Template.bind({});
+exports.EditFieldDefault = EditFieldDefault;
+EditFieldDefault.args = {
+  placeHolder: "Text to edit"
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditField = void 0;
+
+var _styles = require("./styles");
+
+var _editField = _interopRequireDefault(require("../../../assets/images/editField/editField.svg"));
+
+var EditField = function EditField(_ref) {
+  var placeHolder = _ref.placeHolder,
+      value = _ref.value;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeHolder: placeHolder,
+    value: value
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "button-container"
+  }, /*#__PURE__*/React.createElement("button", null, /*#__PURE__*/React.createElement("img", {
+    src: _editField.default,
+    alt: "save changes icon"
+  }))));
+};
+
+exports.EditField = EditField;

package/dist/components/atoms/EditField/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.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  input {\n    background-color: ", ";\n    height: 32px;\n    width: 100%;\n    border: 2px solid ", ";\n    border-bottom: none;\n    font-size: 15px;\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    line-height: 18px;\n    padding-left: 5px;\n    color: ", ";\n  }\n  .button-container {\n    background-color: ", ";\n    display: flex;\n    justify-content: end;\n    align-items: center;\n    padding: 3px;\n    button {\n      height: 20px;\n      width: 20px;\n      border: none;\n      background-color: ", ";\n      padding: 0%;\n      cursor: pointer;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.white);
+
+exports.Container = Container;

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

@@ -15,7 +15,7 @@ var _default = {
   component: _index.Button,
   argTypes: {
     buttonType: {
-      options: ["general-default-button", "general-green-button", "general-white-button", "general-purple-button", "general-transparent-button", "open-modal-button", "close-button", "circular-button accept-button", "circular-button reject-button", "circular-button null-button", "grid-layout", "row-layout"],
+      options: ["general-default-button", "general-green-button", "general-white-button", "general-purple-button", "general-transparent-button", "general-arrow-button", "open-modal-button", "close-button", "circular-button accept-button", "circular-button reject-button", "circular-button null-button", "circular-button save-button", "circular-button delete-button", "grid-layout", "row-layout"],
       control: {
         type: "select"
       }

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

@@ -17,7 +17,9 @@ var Button = function Button(_ref) {
   return /*#__PURE__*/React.createElement(_styles.Container, {
     className: buttonType,
     buttonFont: buttonFont,
-    onClick: onClick
+    onClick: onClick,
+    key: "button-".concat(buttonType),
+    disabled: buttonType === "general-button-disabled"
   }, buttonType.includes("general") && label, image && /*#__PURE__*/React.createElement("img", {
     src: image,
     alt: altText

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

@@ -27,12 +27,22 @@ var _rowLayout = _interopRequireDefault(require("../../../assets/images/generalB
 
 var _gridLayout = _interopRequireDefault(require("../../../assets/images/generalButton/gridLayout.svg"));
 
+var _arrowIcon = _interopRequireDefault(require("../../../assets/images/arrow/arrowIcon.svg"));
+
+var _saveIcon = _interopRequireDefault(require("../../../assets/images/generalButton/saveIcon.svg"));
+
+var _saveIconHover = _interopRequireDefault(require("../../../assets/images/generalButton/saveIconHover.svg"));
+
+var _deleteIcon = _interopRequireDefault(require("../../../assets/images/generalButton/deleteIcon.svg"));
+
+var _deleteIconHover = _interopRequireDefault(require("../../../assets/images/generalButton/deleteIconHover.svg"));
+
 var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", "\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.accept-button {\n    background-image: url(", ");\n  }\n\n  &.reject-button {\n    background-image: url(", ");\n  }\n\n  &.null-button {\n    background-image: url(", ");\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return props.buttonFont;
-}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default);
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
 
 exports.Container = Container;

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

@@ -9,8 +9,12 @@ exports.GeneralInput = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _jsBase = require("js-base64");
+
 var _react = require("react");
 
+var _styledComponents = require("styled-components");
+
 var _styles = require("./styles");
 
 var GeneralInput = function GeneralInput(_ref) {
@@ -20,10 +24,19 @@ var GeneralInput = function GeneralInput(_ref) {
       inputRows = _ref.inputRows,
       inputName = _ref.inputName,
       inputValue = _ref.inputValue,
-      inputPlaceholder = _ref.inputPlaceholder;
+      articleId = _ref.articleId,
+      isRequired = _ref.isRequired,
+      version = _ref.version,
+      inputPlaceholder = _ref.inputPlaceholder,
+      updatedDescriptions = _ref.updatedDescriptions,
+      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      updatedDatasheets = _ref.updatedDatasheets,
+      setUpdatedDatasheets = _ref.setUpdatedDatasheets,
+      index = _ref.index,
+      dinamicHeight = _ref.dinamicHeight;
 
   var _useState = (0, _react.useState)({
-    value: inputValue
+    value: inputValue ? inputValue : ""
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       textValue = _useState2[0],
@@ -34,23 +47,62 @@ var GeneralInput = function GeneralInput(_ref) {
       var value = _ref2.value;
       return value = e.target.value;
     });
+    addTextAreaToArray(e.target.value, updatedDatasheets, setUpdatedDatasheets);
   };
 
-  return /*#__PURE__*/React.createElement(_styles.Container, null, inputType === "text" ? /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    id: inputId,
+  var onHandleTextAreaChange = function onHandleTextAreaChange(e) {
+    setTextValue(function (_ref3) {
+      var value = _ref3.value;
+      return value = e.target.value;
+    });
+    addTextAreaToArray(e.target.value, updatedDescriptions, setUpdatedDescriptions);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (dinamicHeight) {
+      var input = document.querySelector("textarea#description-".concat(inputId, "-").concat(index));
+
+      if (input) {
+        input.style.cssText = "height:" + input.scrollHeight + "px";
+      }
+    }
+  }, [textValue]);
+
+  var addTextAreaToArray = function addTextAreaToArray(textValue, array, setArray) {
+    var tempDescriptions = array;
+    var newArticle = {
+      articleId: articleId,
+      attributeId: inputId,
+      value: textValue,
+      versionId: version
+    };
+    var isOnArray = tempDescriptions.some(function (desc, index) {
+      if (desc.attributeId === newArticle.attributeId) {
+        tempDescriptions[index] = newArticle;
+        return true;
+      }
+    });
+    !isOnArray && tempDescriptions.push(newArticle);
+    setArray(tempDescriptions);
+  };
+
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    isRequired: isRequired && !textValue
+  }, inputType !== "textarea" ? /*#__PURE__*/React.createElement("input", {
+    type: inputType,
+    id: "datasheet-" + inputId + "-" + index,
     className: "general-input",
     placeholder: inputPlaceholder,
-    value: textValue.value,
+    value: textValue === null || textValue === void 0 ? void 0 : textValue.value,
     onChange: onHandleChange
   }) : /*#__PURE__*/React.createElement("textarea", {
     name: inputName,
-    id: inputId,
+    id: "description-" + inputId + "-" + index,
     cols: inputCols,
     rows: inputRows,
     placeholder: inputPlaceholder,
     value: textValue.value,
-    onChange: onHandleChange
+    onChange: onHandleTextAreaChange
   }));
 };
 

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

@@ -15,6 +15,9 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid ", ";\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"])), function (_ref) {
+  var isRequired = _ref.isRequired;
+  return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-wrap: wrap;\n    border: 1px solid ", ";\n    border-radius: 10px;\n    flex-direction: column;\n    align-items: center;\n    padding: 20px;\n    background-color: transparent;\n    .number-text{\n        color: ", "; \n        font-family: ", ";\n        font-style: normal;\n        font-weight: normal;\n        font-size: 36px;\n        line-height: 42px;\n        font-feature-settings: 'pnum' on, 'lnum' on;\n    }\n    .name-text{\n        color: ", ";\n        font-family: ", ";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 21px;\n    }\n    &:hover{ \n        border: 2px solid ", ";\n    }\n    &.active{\n        border: 1px solid ", ";\n    }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.original_purpura, _variables.FontFamily.Raleway, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-wrap: wrap;\n    border: 1px solid ", ";\n    border-radius: 10px;\n    flex-direction: column;\n    align-items: center;\n    padding: 15px;\n    background-color: transparent;\n    .number-text{\n        color: ", "; \n        font-family: ", ";\n        font-style: normal;\n        font-weight: normal;\n        font-size: 36px;\n        line-height: 42px;\n        font-feature-settings: 'pnum' on, 'lnum' on;\n    }\n    .name-text{\n        color: ", ";\n        font-family: ", ";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 21px;\n    }\n    &:hover{ \n        border: 2px solid ", ";\n    }\n    &.active{\n        border: 1px solid ", ";\n    }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.original_purpura, _variables.FontFamily.Raleway, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

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

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UploadImageDefault = exports.SendInvitationDefault = exports.ProductEditionDefault = exports.GenericModalDefault = exports.DeleteProductDefault = void 0;
+
+var _index = require("./index");
+
+var _index2 = require("../ScreenHeader/index");
+
+var _index3 = require("../LoadImageMenu/index");
+
+var _index4 = require("../GeneralButton/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _genericModalWarning = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalWarning.svg"));
+
+var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
+
+var _default = {
+  title: "Components/atoms/GenericModal",
+  component: _index.GenericModal
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.GenericModal, args);
+};
+
+var GenericModalDefault = Template.bind({});
+exports.GenericModalDefault = GenericModalDefault;
+GenericModalDefault.args = {
+  componentsArray: [/*#__PURE__*/React.createElement("img", {
+    key: "1",
+    src: _genericModalWarning.default,
+    alt: "Warning icon"
+  }), /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.Raleway_500,
+    headerType: "with-bold-text",
+    color: _variables.GlobalColors.white,
+    text: "¿Estás seguro que quieres ",
+    boldText: "cerrar sesión?",
+    key: "2"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    key: "3",
+    buttonType: "general-white-button",
+    label: "Cancelar"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-button-default",
+    label: "Cerrar Sesión",
+    key: "4"
+  })],
+  buttonType: "log-out"
+};
+var DeleteProductDefault = Template.bind({});
+exports.DeleteProductDefault = DeleteProductDefault;
+DeleteProductDefault.args = {
+  componentsArray: [/*#__PURE__*/React.createElement("img", {
+    key: "1",
+    src: _genericModalWarning.default,
+    alt: "Warning icon"
+  }), /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.Raleway_500,
+    headerType: "product-name-header",
+    color: _variables.GlobalColors.white,
+    text: "¿Estás seguro de eliminar estos productos?",
+    key: "2"
+  }), /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.Raleway_500,
+    headerType: "retailer-name-header",
+    color: _variables.GlobalColors.white,
+    text: "No podrás recuperar la información eliminada",
+    key: "3"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-white-button",
+    label: "Cancelar",
+    key: "4"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-button-default",
+    label: "Confirmar",
+    key: "5"
+  })],
+  buttonType: "delete-product"
+};
+var ProductEditionDefault = Template.bind({});
+exports.ProductEditionDefault = ProductEditionDefault;
+ProductEditionDefault.args = {
+  componentsArray: [/*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.Raleway_500,
+    headerType: "product-name-header",
+    color: _variables.GlobalColors.white,
+    text: "¿Deseas salir de edicion de producto múltiple?",
+    key: "1"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-white-button",
+    label: "Salir",
+    key: "2"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    buttonType: "general-button-default",
+    label: "Regresar",
+    key: "3"
+  })],
+  buttonType: "product-edition"
+};
+var SendInvitationDefault = Template.bind({});
+exports.SendInvitationDefault = SendInvitationDefault;
+SendInvitationDefault.args = {
+  componentsArray: [/*#__PURE__*/React.createElement("img", {
+    key: "1",
+    src: _genericModalCheck.default,
+    alt: "Check icon"
+  }), /*#__PURE__*/React.createElement("p", {
+    key: "2"
+  }, /*#__PURE__*/React.createElement("span", null, " Fichas t\xE9cnicas validadas con \xE9xito"), ", Completa los productos para poder exportar.")],
+  buttonType: "send-invitation"
+};
+var UploadImageDefault = Template.bind({});
+exports.UploadImageDefault = UploadImageDefault;
+UploadImageDefault.args = {
+  componentsArray: [/*#__PURE__*/React.createElement("img", {
+    key: "1",
+    className: "check",
+    src: _genericModalCheck.default,
+    alt: "Check icon"
+  }), /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.Raleway_500,
+    headerType: "product-name-header",
+    color: _variables.GlobalColors.white,
+    text: "Imagen cargada con éxito,",
+    key: "2"
+  }), /*#__PURE__*/React.createElement(_index2.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    headerType: "input-name-header",
+    color: _variables.GlobalColors.white,
+    text: "Por favor elige el tipo de empaque e imagen.",
+    key: "3"
+  }), /*#__PURE__*/React.createElement(_index3.LoadImageMenu, {
+    tipo: "Tipo de empaque ",
+    product: "Producto expuesto",
+    content: [{
+      label: "Enbalaje adicional - 0"
+    }, {
+      label: "En paquete - 1"
+    }, {
+      label: "Producto expuesto - 2"
+    }, {
+      label: "Embalaje multiforme - 3"
+    }, {
+      label: "Si no es una imagen / no corresponde - X"
+    }],
+    id: "menu-packaging-type",
+    key: "4"
+  }), /*#__PURE__*/React.createElement(_index3.LoadImageMenu, {
+    tipo: "Tipo de imagen ",
+    product: "Render",
+    content: [{
+      label: "fotografía del producto"
+    }],
+    id: "menu-image-type",
+    key: "5"
+  }), /*#__PURE__*/React.createElement(_index4.Button, {
+    key: "6",
+    buttonType: "general-button-default",
+    label: "Guardar"
+  })],
+  buttonType: "upload-image"
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GenericModal = void 0;
+
+var _styles = require("./styles");
+
+var GenericModal = function GenericModal(_ref) {
+  var _ref$componentsArray = _ref.componentsArray,
+      componentsArray = _ref$componentsArray === void 0 ? [] : _ref$componentsArray,
+      buttonType = _ref.buttonType;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "global-styles " + buttonType
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "close-button"
+  }), componentsArray === null || componentsArray === void 0 ? void 0 : componentsArray.map(function (component) {
+    return component;
+  })));
+};
+
+exports.GenericModal = GenericModal;

package/dist/components/atoms/GenericModal/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 _genericModalClose = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalClose.svg"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n\n  .global-styles {\n    background-color: ", ";\n    height: auto;\n    width: auto;\n    position: relative;\n    border-radius: 15px;\n    padding: 40px;\n    text-align: center;\n    .close-button {\n      background-image: url(", ");\n      background-color: transparent;\n      width: 14px;\n      height: 14px;\n      cursor: pointer;\n      border: none;\n      position: absolute;\n      right: 20px;\n      top: 20px;\n    }\n    .general-white-button {\n      width: 160px;\n      height: 40px;\n      color: ", ";\n      border: 1px solid ", ";\n      background-color: transparent;\n      & + * {\n        margin-left: 45px;\n        height: 40px;\n        width: 161px;\n      }\n    }\n\n    &.log-out {\n      padding-bottom: 60px;\n      img {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .with-bold-text {\n        font-size: 24px;\n        & + * {\n          margin-top: 20px;\n        }\n      }\n    }\n\n    &.delete-product {\n      img {\n        height: 50px;\n        width: 56px;\n        & + * {\n          margin-top: 30px;\n        }\n      }\n      .product-name-header {\n        & + * {\n          margin-bottom: 30px;\n        }\n      }\n    }\n\n    &.product-edition {\n      padding-top: 50px;\n      .product-name-header {\n        & + * {\n          margin-top: 25px;\n        }\n      }\n    }\n\n    &.send-invitation {\n      width: 604px;\n      img {\n        & + * {\n          margin-top: 40px;\n        }\n      }\n      p {\n        font-family: ", ";\n        font-style: normal;\n        font-size: 24px;\n        color: ", ";\n        line-height: 28px;\n        span {\n          font-family: ", ";\n        }\n      }\n    }\n\n    &.upload-image {\n      width: 430px;\n      padding: 50px;\n      img {\n        & + * {\n          margin-top: 33px;\n        }\n      }\n      .input-name-header {\n        & + * {\n          margin-top: 20px;\n        }\n      }\n      .list-container {\n        & + .general-button-default {\n          margin-top: 40px;\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.white, _variables.GlobalColors.deep_gray, _genericModalClose.default, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.white, _variables.FontFamily.Raleway_700);
+
+exports.Container = Container;