contentoh-components-library 21.2.93 → 21.2.95

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

@@ -20,7 +20,7 @@ var _default = {
   component: _index.ButtonV2,
   argTypes: {
     type: {
-      options: [undefined, "white", "whiteS2", "pink", "gray", "purple", "black"],
+      options: [undefined, "white", "whiteS2", "whiteS3", "pink", "gray", "purple", "black"],
       control: {
         type: "select"
       }

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

@@ -51,7 +51,7 @@ var ButtonV2 = function ButtonV2(props) {
     disabled: disabled,
     isLoading: isLoading,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-      className: "button " + (["white", "whiteS2", "pink", "gray", "purple", "black"].includes(type) ? type : "white") + (transparent ? " transparent " : " fill ") + className,
+      className: "button " + (["white", "whiteS2", "whiteS3", "pink", "gray", "purple", "black"].includes(type) ? type : "white") + (transparent ? " transparent" : " fill"),
       variant: "text",
       disabled: disabled || isLoading,
       onClick: /*#__PURE__*/function () {

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0px;\n  cursor: ", ";\n  border-radius: ", ";\n  border: none;\n\n  .button {\n    --size: ", "px;\n    width: 100%;\n    min-width: min-content;\n    cursor: inherit;\n    display: flex;\n    flex-direction: ", ";\n    gap: 7px;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border-radius: inherit;\n    border: ", ";\n    font-family: ", ", sans-serif;\n    font-size: var(--size);\n    line-height: 1;\n    text-transform: none;\n\n    // tipos de botones fill\n    &.fill {\n      &.white {\n        background-color: white;\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS2 {\n        background-color: white;\n        color: #7b7979;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.pink {\n        background-color: #e33aa9;\n        color: white;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #b42983;\n        }\n      }\n      &.gray {\n        background-color: #e8e5e5;\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n        }\n        &:hover {\n          background-color: #d6d3d3;\n        }\n      }\n      &.purple {\n        background-color: #f7f7fc;\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #e0e0f1;\n        }\n      }\n    }\n\n    // tipos de botones transparent\n    &.transparent {\n      &:hover {\n        background-color: transparent;\n      }\n      &.white {\n        color: white;\n        border-color: #e33aa9;\n        &:hover {\n          color: #d6d4d4;\n        }\n      }\n      &.pink {\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          color: #b42983;\n        }\n      }\n      &.gray {\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n          transition: inherit;\n        }\n        &:hover {\n          color: #7b7979;\n          .icon,\n          .iconLoading {\n            color: #bdbbbb;\n          }\n        }\n      }\n      &.purple {\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          color: #714f95;\n        }\n      }\n      &.black {\n        color: #262626;\n        border-color: #262626;\n        &:hover {\n          color: #7b7979;\n        }\n      }\n    }\n\n    .icon,\n    .iconLoading {\n      display: grid;\n      place-items: center;\n      color: inherit;\n      font-size: ", ";\n    }\n    .iconLoading {\n      font-size: ", ";\n    }\n\n    // mismo estilo desabilitado para cualquier tipo de boton\n    &:disabled {\n      background-color: #fcebf7 !important;\n      color: #7b7979 !important;\n      border-color: #7b7979 !important;\n\n      .icon {\n        color: #9e9c9c !important;\n      }\n      .iconLoading {\n        color: #9e2674 !important;\n      }\n\n      &:hover {\n        background-color: #fcebf7 !important;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0px;\n  cursor: ", ";\n  border-radius: ", ";\n  border: none;\n\n  .button {\n    --size: ", "px;\n    width: 100%;\n    min-width: min-content;\n    cursor: inherit;\n    display: flex;\n    flex-direction: ", ";\n    gap: 7px;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border-radius: inherit;\n    border: ", ";\n    font-family: ", ", sans-serif;\n    font-size: var(--size);\n    line-height: 1.2;\n    text-transform: none;\n\n    // tipos de botones fill\n    &.fill {\n      &.white {\n        background-color: white;\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS2 {\n        background-color: white;\n        color: #7b7979;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.whiteS3 {\n        background-color: white;\n        color: #262626;\n        border-color: #f0f0f0;\n        &:hover {\n          background-color: #f4f4f4;\n        }\n      }\n      &.pink {\n        background-color: #e33aa9;\n        color: white;\n        border-color: #e33aa9;\n        &:hover {\n          background-color: #b42983;\n        }\n      }\n      &.gray {\n        background-color: #e8e5e5;\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n        }\n        &:hover {\n          background-color: #d6d3d3;\n        }\n      }\n      &.purple {\n        background-color: #f7f7fc;\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          background-color: #e0e0f1;\n        }\n      }\n    }\n\n    // tipos de botones transparent\n    &.transparent {\n      &:hover {\n        background-color: transparent;\n      }\n      &.white {\n        color: white;\n        border-color: #e33aa9;\n        &:hover {\n          color: #d6d4d4;\n        }\n      }\n      &.pink {\n        color: #e33aa9;\n        border-color: #e33aa9;\n        &:hover {\n          color: #b42983;\n        }\n      }\n      &.gray {\n        color: #262626;\n        border-color: #7b7979;\n        .icon,\n        .iconLoading {\n          color: #7b7979;\n          transition: inherit;\n        }\n        &:hover {\n          color: #7b7979;\n          .icon,\n          .iconLoading {\n            color: #bdbbbb;\n          }\n        }\n      }\n      &.purple {\n        color: #8a6caa;\n        border-color: #8a6caa;\n        &:hover {\n          color: #714f95;\n        }\n      }\n      &.black {\n        color: #262626;\n        border-color: #262626;\n        &:hover {\n          color: #7b7979;\n        }\n      }\n    }\n\n    .icon,\n    .iconLoading {\n      display: grid;\n      place-items: center;\n      color: inherit;\n      font-size: ", ";\n    }\n    .iconLoading {\n      font-size: ", ";\n    }\n\n    // mismo estilo desabilitado para cualquier tipo de boton\n    &:disabled {\n      background-color: #fcebf7 !important;\n      color: #7b7979 !important;\n      border-color: #7b7979 !important;\n\n      .icon {\n        color: #9e9c9c !important;\n      }\n      .iconLoading {\n        color: #9e2674 !important;\n      }\n\n      &:hover {\n        background-color: #fcebf7 !important;\n      }\n    }\n  }\n"])), function (_ref) {
   var disabled = _ref.disabled,
       isLoading = _ref.isLoading;
   return disabled || isLoading ? "not-allowed" : "pointer";

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

@@ -16,7 +16,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _default = {
   title: "Components/atoms/Image",
   component: _index.Image,
-  argTypes: {}
+  argTypes: {
+    borderType: {
+      options: [undefined, "rectangle", "circle"],
+      control: {
+        type: "select"
+      }
+    }
+  }
 };
 exports.default = _default;
 
@@ -25,7 +32,7 @@ var Template = function Template(args) {
 };
 
 var keyS3_test = "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
-var srcTest = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_test);
+var srcTest = "https://content-management-profile.s3.amazonaws.com/id-59/59.png";
 var ImageTest = Template.bind({});
 exports.ImageTest = ImageTest;
 ImageTest.args = {
@@ -35,7 +42,8 @@ ImageTest.args = {
   src: srcTest,
   componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
     children: " test error "
-  })
+  }),
+  borderType: undefined
 };
 var keyS3_OK = "84300/1/chat/f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png";
 var srcOK = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_OK);
@@ -47,7 +55,8 @@ ImageOK.args = {
   src: srcOK,
   componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
     children: " img no cargada "
-  })
+  }),
+  borderType: undefined
 };
 var keyS3_ERROR = "84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg";
 var srcERROR = "https://content-management-images.s3.amazonaws.com/".concat(keyS3_ERROR);
@@ -59,5 +68,6 @@ ImageERROR.args = {
   src: srcERROR,
   componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
     children: " ERROR al cargar "
-  })
+  }),
+  borderType: undefined
 };

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

@@ -27,7 +27,8 @@ var Image = function Image(props) {
       classNameLoading = props.classNameLoading,
       src = props.src,
       componentDefault = props.componentDefault,
-      classNameImg = props.classNameImg;
+      classNameImg = props.classNameImg,
+      borderType = props.borderType;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -49,6 +50,7 @@ var Image = function Image(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: className,
     width: width,
+    borderType: borderType,
     children: [src && (imgLoad === undefined || loading) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerLoading, {
       className: classNameLoading,
       sizeLoading: sizeLoading,

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

@@ -15,25 +15,28 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  place-items: center;\n  width: ", ";\n  min-width: min-content;\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  place-items: center;\n  width: ", ";\n  min-width: min-content;\n  overflow: hidden;\n  border-radius: ", ";\n"])), function (_ref) {
   var width = _ref.width;
   return width ? width : "min-content";
+}, function (_ref2) {
+  var borderType = _ref2.borderType;
+  return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "6px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "0px"; // default none
 });
 
 exports.Container = Container;
 
-var ContainerLoading = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  place-items: center;\n  min-width: min-content;\n  font-size: ", "px;\n  color: ", ";\n  padding: 5px;\n"])), function (_ref2) {
-  var sizeLoading = _ref2.sizeLoading;
+var ContainerLoading = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  place-items: center;\n  min-width: min-content;\n  font-size: ", "px;\n  color: ", ";\n  padding: 5px;\n"])), function (_ref3) {
+  var sizeLoading = _ref3.sizeLoading;
   return sizeLoading ? sizeLoading : "30";
-}, function (_ref3) {
-  var colorLoading = _ref3.colorLoading;
+}, function (_ref4) {
+  var colorLoading = _ref4.colorLoading;
   return colorLoading ? colorLoading : "#9e2674";
 });
 
 exports.ContainerLoading = ContainerLoading;
 
-var Img = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  width: 100%;\n  object-fit: contain;\n"])), function (_ref4) {
-  var show = _ref4.show;
+var Img = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: ", ";\n  width: 100%;\n  object-fit: contain;\n  border-radius: inherit;\n"])), function (_ref5) {
+  var show = _ref5.show;
   return show ? "grid" : "none";
 });
 

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectItemV2Test = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/SelectItemV2",
+  component: _index.SelectItemV2,
+  argTypes: {
+    checkbox: {
+      options: [undefined, true, false],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectItemV2, (0, _objectSpread2.default)({}, args));
+};
+
+var SelectItemV2Test = Template.bind({});
+exports.SelectItemV2Test = SelectItemV2Test;
+SelectItemV2Test.args = {
+  label: "Label del item",
+  value: 1,
+  checkbox: true,
+  selected: false,
+  onClick: function onClick(isSelected, value) {
+    console.log("isSelected:", isSelected);
+    console.log("value:", value);
+  }
+};

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectItemV2 = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _styles = require("./styles");
+
+var _utils = require("../../../global-files/utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SelectItemV2 = function SelectItemV2(props) {
+  var id = props.id,
+      keyId = props.keyId,
+      className = props.className,
+      label = props.label,
+      value = props.value,
+      checkbox = props.checkbox,
+      selected = props.selected,
+      _onClick = props.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "selectItemV2" + ((0, _utils.isStringEmpty)(className) ? "" : " " + className) + (!checkbox && selected ? " selectedItem" : ""),
+    id: id,
+    checkbox: checkbox,
+    onClick: function onClick(event) {
+      return _onClick && _onClick(!selected, value);
+    },
+    children: [checkbox !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+      className: "checkbox" + (checkbox ? "" : " hidden"),
+      checked: selected
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "label",
+      children: label
+    })]
+  }, keyId);
+};
+
+exports.SelectItemV2 = SelectItemV2;

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

@@ -0,0 +1,23 @@
+"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: fit-content;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  gap: 11px;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: 8px;\n  transition: background 0.25s;\n  //border: 1px solid lightgray;\n\n  &:hover {\n    background-color: #f0f0f0;\n  }\n\n  .checkbox {\n    padding: 3px;\n\n    &.hidden {\n      visibility: hidden;\n    }\n\n    &.Mui-checked {\n      color: #808080;\n    }\n\n    .MuiSvgIcon-root {\n      font-size: 16px;\n    }\n  }\n\n  .label {\n    cursor: inherit;\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    text-align: left;\n    color: #262626;\n    line-height: 1.25;\n    padding: ", "px;\n  }\n\n  // para item sin checkbox seleccionado\n  &.selectedItem {\n    background-color: #8e8e8e;\n    .label {\n      font-family: ", ", sans-serif;\n      color: white;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, function (_ref) {
+  var checkbox = _ref.checkbox;
+  return checkbox === undefined ? "3" : "0";
+}, _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;

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

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectV2Test = 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/SelectV2",
+  component: _index.SelectV2,
+  argTypes: {
+    positionDropdown: {
+      options: [undefined, "topStart", "topEnd", "topCenter", "rightStart", "rightEnd", "rightCenter", "bottomStart", "bottomEnd", "bottomCenter", "leftStart", "leftEnd", "leftCenter"],
+      control: {
+        type: "select"
+      }
+    },
+    triggerType: {
+      options: [undefined, "hover", "click"],
+      control: {
+        type: "select"
+      }
+    },
+    typeSelectItems: {
+      options: [undefined, "checkbox", "marginCheckbox", "labelOnly"],
+      control: {
+        type: "select"
+      }
+    },
+    borderType: {
+      options: [undefined, "rectangle", "oval"],
+      control: {
+        type: "select"
+      }
+    },
+    alignmentItemsOverflow: {
+      options: [undefined, "columns", "rows"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SelectV2, (0, _objectSpread2.default)({}, args));
+};
+
+var SelectV2Test = Template.bind({});
+exports.SelectV2Test = SelectV2Test;
+SelectV2Test.args = {
+  items: [{
+    label: "Palomitas de maiz",
+    value: 1,
+    selected: false
+  }, {
+    label: "Sabritas",
+    value: 2,
+    selected: true
+  }, {
+    label: "sabritas Doritos",
+    value: 3,
+    selected: false
+  }, {
+    label: "Este es un texto muy largo que deberia llegar al limite establecido para el width",
+    value: 4,
+    selected: true
+  }, {
+    label: "galletas",
+    value: 5,
+    selected: false
+  }, {
+    label: "jugo de uva",
+    value: 6,
+    selected: false
+  }],
+  triggerType: "hover",
+  selectButton: {
+    className: "btnSelectPrueba",
+    type: "whiteS3",
+    transparent: undefined,
+    disabled: false,
+    label: "select de prueba",
+    size: 12,
+    borderType: "oval"
+  },
+  defaultItem: {
+    label: "Ningun filtro",
+    itemType: undefined,
+    showLabelInSelect: true
+  },
+  inputSearch: {
+    className: "inputBusqueda",
+    defaultText: "hola"
+  },
+  typeSelectItems: undefined,
+  borderType: undefined,
+  maxWidthSelect: "150px",
+  maxWidthDropdown: "300px",
+  maxHeightDropdown: "300px",
+  maxWidthItems: "100px",
+  alignmentItemsOverflow: undefined,
+  multiple: true,
+  classNameSelect: "selectPrueba",
+  classNameDropdown: "dropdownSelectPrueba",
+  positionDropdown: undefined,
+  onChange: function onChange(selectedItems) {
+    console.log("selectedItems:", selectedItems);
+  }
+};