contentoh-components-library 21.4.136 → 21.4.138

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/ProductImage/ProductImage.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/ProductImage",
+  component: _.ProductImage,
+  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)(_.ProductImage, (0, _objectSpread2.default)({}, args));
+};
+
+exports.Template = Template;
+var ProductImageDefault = Template.bind({});
+ProductImageDefault.args = {
+  imageType: "main-image",
+  altText: "default image"
+};

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductImage = 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 ProductImage = function ProductImage(_ref) {
+  var img = _ref.img,
+      imageType = _ref.imageType,
+      altText = _ref.altText,
+      onClick = _ref.onClick;
+  // Expresión regular para validar que los últimos tres caracteres sean ".mp4"
+  var regex = /\.mp4$/;
+
+  if (regex.test(img)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: imageType,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+        controls: true,
+        width: "100%",
+        height: "auto",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+          src: img,
+          type: "video/mp4"
+        })
+      })
+    });
+  } else {
+    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.ProductImage = ProductImage;

package/dist/components/atoms/ProductImage/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: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    display: flex; \n    justify-content: center; \n    align-items: center; \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    flex: 1 0 50%;\n    cursor: pointer;\n\n    img {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n    display: flex; \n    justify-content: center; \n    align-items: center; \n\n    img {\n      width: 710px;\n      height: 710px;\n    }\n  }\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/ProductPercentCard/Percent.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductPercentCardDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var status = ["-", "Pr", "R", "AS", "CA", "IE", "AC", "AA", "AP", "ACA", "RA", "RC", "RP", "RCA", "Ex"];
+var _default = {
+  title: "Components/atoms/ProductPercentCard",
+  component: _index.ProductPercentCard,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductPercentCard, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductPercentCardDefault = Template.bind({});
+exports.ProductPercentCardDefault = ProductPercentCardDefault;
+ProductPercentCardDefault.args = {
+  statusType: "-",
+  productsInStatus: 0,
+  totalProcucts: 0
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductPercentCard = void 0;
+
+var _styles = require("./styles");
+
+var _polygon = _interopRequireDefault(require("../../../assets/images/arrow/polygon.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductPercentCard = function ProductPercentCard(_ref) {
+  var statusType = _ref.statusType,
+      _ref$totalProcucts = _ref.totalProcucts,
+      totalProcucts = _ref$totalProcucts === void 0 ? 0 : _ref$totalProcucts,
+      _ref$productsInStatus = _ref.productsInStatus,
+      productsInStatus = _ref$productsInStatus === void 0 ? 0 : _ref$productsInStatus;
+  var result = productsInStatus / totalProcucts * 100;
+  var percent = result.toString().search(/\./) ? result.toFixed(2) : result;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "status-".concat(statusType),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "text",
+      children: "Productos en proceso"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "percent-text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "number",
+        children: productsInStatus
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _polygon.default,
+        alt: ""
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: "span",
+        children: [percent === "NaN" ? 0 : percent, "%"]
+      })]
+    })]
+  });
+};
+
+exports.ProductPercentCard = ProductPercentCard;

package/dist/components/atoms/ProductPercentCard/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  border-radius: 7px;\n  max-width: fit-content;\n  flex-direction: column;\n  height: 83px;\n  padding: 10px;\n\n  &.status-PA,\n  &.status-RC {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n  &.status-- {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-AS,\n  &.status-CA,\n  &.status-IE {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-AC,\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\n    border: 1px solid #d74ded;\n    .span {\n      color: #d74ded;\n    }\n  }\n\n  &.status-Ex {\n    border: 1px solid ", ";\n    .span {\n      color: ", ";\n    }\n  }\n\n  .text {\n    color: ", ";\n    text-align: center;\n    font-size: 12px;\n    width: 70px;\n    font-family: ", ";\n    line-height: 14px;\n    margin: auto;\n  }\n  .percent-text {\n    display: flex;\n    font-family: ", ";\n    align-items: center;\n    .number {\n      font-size: 28px;\n      color: ", ";\n    }\n    .span {\n      padding-top: 8px;\n      font-size: 18px;\n    }\n  }\n"])), _variables.GlobalColors.reception, _variables.GlobalColors.reception, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.finished, _variables.GlobalColors.finished, _variables.GlobalColors.exported, _variables.GlobalColors.exported, _variables.GlobalColors.s4, _variables.FontFamily.Raleway, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+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;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = 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, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  width: fit-content;\n  height: 20px;\n  padding: 4px;\n  border-radius: 3px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 10px;\n  line-height: 12px;\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.AvenirNext, 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;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  @font-face {\n    font-family: \"Material Symbols Outlined\";\n    font-style: normal;\n    font-weight: 100 700;\n    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n      format(\"woff2\");\n  }\n\n  .hola {\n    font-family: \"Material Symbols Outlined\";\n    font-size: 30px;\n    //line-height: 1;\n    margin-top: 10px;\n  }\n  .hola {\n    font-variation-settings: \"FILL\"\n        ", ",\n      \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n    \n  }\n  .icono-police{\n    font-size:20px;\n    color: ", ";\n  }\n"])), function (props) {
+  return props.percentageRequired < 100 ? 0 : 1;
+}, function (props) {
+  return props.percentageRequired < 100 ? "#d4d1d7" : "#ECDD1D";
+});
+
+exports.ContainerIcon = ContainerIcon;

package/dist/components/atoms/ProgressBar/ProgressBar.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.ProgressBarDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/ProgressBar",
+  component: _.ProgressBar,
+  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)(_.ProgressBar, (0, _objectSpread2.default)({}, args));
+};
+
+var ProgressBarDefault = Template.bind({});
+exports.ProgressBarDefault = ProgressBarDefault;
+ProgressBarDefault.args = {
+  percent: 0,
+  backgroundColor: "s2"
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = void 0;
+
+var _styles = require("./styles");
+
+var _Tooltip = require("../Tooltip");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProgressBar = function ProgressBar(_ref) {
+  var percent = _ref.percent,
+      progressBarType = _ref.progressBarType,
+      percentRequired = _ref.percentRequired;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [percentRequired ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_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: "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: "hola",
+            children: "local_police"
+          })
+        }),
+        classNameTooltip: "container-tooltip"
+      })
+    }) : "", /*#__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"
+    })]
+  });
+};
+
+exports.ProgressBar = ProgressBar;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = 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, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  width: fit-content;\n  height: 27px;\n  padding: 4px;\n  border-radius: 15px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 19px;\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.AvenirNext, 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;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  @font-face {\n    font-family: \"Material Symbols Outlined\";\n    font-style: normal;\n    font-weight: 100 700;\n    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n      format(\"woff2\");\n  }\n\n  .hola {\n    font-family: \"Material Symbols Outlined\";\n    font-size: 30px;\n    //line-height: 1;\n    margin-top: 10px;\n  }\n  .hola {\n    font-variation-settings: \"FILL\"\n        ", ",\n      \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n    color: ", ";\n  }\n"])), function (props) {
+  return props.percentageRequired < 100 ? 0 : 1;
+}, function (props) {
+  return props.percentageRequired < 100 ? "#d4d1d7" : "#e33aa9";
+});
+
+exports.ContainerIcon = ContainerIcon;