contentoh-components-library 16.0.0 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.7063 7.61134C13.2246 5.16759 11.0783 3.33301 8.5 3.33301C6.45292 3.33301 4.675 4.49467 3.78958 6.19467C1.6575 6.42134 0 8.22759 0 10.4163C0 12.7609 1.90542 14.6663 4.25 14.6663H13.4583C15.4133 14.6663 17 13.0797 17 11.1247C17 9.25467 15.5479 7.73884 13.7063 7.61134ZM12.0417 9.70801L8.5 13.2497L4.95833 9.70801H7.08333V6.87467H9.91667V9.70801H12.0417Z" fill="#817393"/>
3
+ </svg>
@@ -17,6 +17,6 @@ var _genericModalClose = _interopRequireDefault(require("../../../assets/images/
17
17
 
18
18
  var _templateObject;
19
19
 
20
- 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 z-index: 100;\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);
20
+ 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 top: 0;\n left: 0;\n z-index: 100;\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);
21
21
 
22
22
  exports.Container = Container;
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n width: 100%;\n overflow: auto;\n position: fixed;\n background-color: rgba(59, 59, 59, 0.53);\n backdrop-filter: blur(4px);\n\n .modal-container {\n display: flex;\n border-radius: 4px;\n overflow: hidden;\n\n .modal-data-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n min-width: 375px;\n background-color: ", ";\n\n .validation-and-table-container {\n .validation-panel {\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n .circular-button {\n & + * {\n margin-left: 10px;\n }\n }\n\n .close-button {\n border-radius: 3px;\n width: 30px;\n height: 30px;\n padding: 0;\n border: 1px solid #f0eef2;\n background-size: 30px;\n }\n\n & + * {\n margin-top: 25px;\n }\n }\n }\n }\n }\n"])), _variables.GlobalColors.deep_gray);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n width: 100%;\n overflow: auto;\n position: fixed;\n background-color: rgba(59, 59, 59, 0.53);\n backdrop-filter: blur(4px);\n left: 0;\n top: 0;\n z-index: 100;\n\n .modal-container {\n display: flex;\n border-radius: 4px;\n overflow: hidden;\n\n .modal-data-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n min-width: 375px;\n background-color: ", ";\n\n .validation-and-table-container {\n .validation-panel {\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n .circular-button {\n & + * {\n margin-left: 10px;\n }\n }\n\n .close-button {\n border-radius: 3px;\n width: 30px;\n height: 30px;\n padding: 0;\n border: 1px solid #f0eef2;\n background-size: 30px;\n }\n\n & + * {\n margin-top: 25px;\n }\n }\n }\n }\n }\n"])), _variables.GlobalColors.deep_gray);
19
19
 
20
20
  exports.Container = Container;
@@ -828,7 +828,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
828
828
 
829
829
  case 29:
830
830
  // setMainLoading(false);
831
- setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.<br>Recuerda hay campos obligatorios y no podras avanzar si no estan completos.");
831
+ setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
832
832
 
833
833
  case 30:
834
834
  case "end":
@@ -1608,9 +1608,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
1608
1608
  sendToFacilitator: sendToFacilitator,
1609
1609
  approveRejectButtons: approveRejectButtons
1610
1610
  }), message.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
1611
- componentsArray: componentsArray.length > 0 ? componentsArray : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
1611
+ componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
1612
1612
  text: message
1613
- }),
1613
+ }, "1")],
1614
1614
  onClick: function onClick() {
1615
1615
  return setMessage("");
1616
1616
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "16.0.0",
3
+ "version": "19.0.0",
4
4
  "dependencies": {
5
5
  "@babel/runtime": "^7.17.2",
6
6
  "@storybook/addon-postcss": "^2.0.0",
@@ -12,6 +12,8 @@ export const Container = styled.div`
12
12
  position: fixed;
13
13
  background-color: rgba(59, 59, 59, 0.53);
14
14
  backdrop-filter: blur(4px);
15
+ top: 0;
16
+ left: 0;
15
17
  z-index: 100;
16
18
 
17
19
  .global-styles {
@@ -11,6 +11,9 @@ export const Container = styled.div`
11
11
  position: fixed;
12
12
  background-color: rgba(59, 59, 59, 0.53);
13
13
  backdrop-filter: blur(4px);
14
+ left: 0;
15
+ top: 0;
16
+ z-index: 100;
14
17
 
15
18
  .modal-container {
16
19
  display: flex;
@@ -453,7 +453,7 @@ export const RetailerProductEdition = ({
453
453
  } else {
454
454
  // setMainLoading(false);
455
455
  setMessage(
456
- "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.<br>Recuerda hay campos obligatorios y no podras avanzar si no estan completos."
456
+ "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos."
457
457
  );
458
458
  }
459
459
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1146,11 +1146,9 @@ export const RetailerProductEdition = ({
1146
1146
  {message.length > 0 && (
1147
1147
  <GenericModal
1148
1148
  componentsArray={
1149
- componentsArray.length > 0 ? (
1150
- componentsArray
1151
- ) : (
1152
- <ScreenHeader text={message} />
1153
- )
1149
+ componentsArray.length > 0
1150
+ ? componentsArray
1151
+ : [<ScreenHeader key="1" text={message} />]
1154
1152
  }
1155
1153
  onClick={() => setMessage("")}
1156
1154
  />