contentoh-components-library 21.2.93 → 21.2.95

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

@@ -0,0 +1,298 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectV2 = void 0;
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _styles = require("./styles");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _utils = require("../../../global-files/utils");
+
+var _SelectItemV = require("../../atoms/SelectItemV2");
+
+var _InputText = require("../../atoms/InputText");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SelectV2 = function SelectV2(props) {
+  var _positions$positionDr;
+
+  var items = props.items,
+      triggerType = props.triggerType,
+      selectButton = props.selectButton,
+      defaultItem = props.defaultItem,
+      inputSearch = props.inputSearch,
+      maxWidthSelect = props.maxWidthSelect,
+      maxWidthDropdown = props.maxWidthDropdown,
+      maxHeightDropdown = props.maxHeightDropdown,
+      maxWidthItems = props.maxWidthItems,
+      alignmentItemsOverflow = props.alignmentItemsOverflow,
+      typeSelectItems = props.typeSelectItems,
+      multiple = props.multiple,
+      borderType = props.borderType,
+      classNameSelect = props.classNameSelect,
+      classNameDropdown = props.classNameDropdown,
+      positionDropdown = props.positionDropdown,
+      onChange = props.onChange;
+  var positions = {
+    topStart: "top-start",
+    topEnd: "top-end",
+    topCenter: "top",
+    rightStart: "right-start",
+    rightEnd: "right-end",
+    rightCenter: "right",
+    bottomStart: "bottom-start",
+    bottomEnd: "bottom-end",
+    bottomCenter: "bottom",
+    leftStart: "left-start",
+    leftEnd: "left-end",
+    leftCenter: "left"
+  };
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedItems = _useState2[0],
+      setSelectedItems = _useState2[1]; // { .. }
+
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      customItems = _useState4[0],
+      setCustomItems = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showDropdown = _useState6[0],
+      setShowDropdown = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("Sin titulo"),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      labelSelect = _useState8[0],
+      setLabelSelect = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      textInputSearch = _useState10[0],
+      setTextInputSearch = _useState10[1];
+
+  var refInputTextSearch = (0, _react.useRef)(); // cada que cambie la lista de items
+
+  (0, _react.useEffect)(function () {
+    if ((0, _utils.isArrayEmpty)(items)) {
+      setSelectedItems({});
+      return;
+    } // items iniciales seleccionados
+
+
+    var initialSelectedItems = {};
+    items.forEach(function (item) {
+      if (item.selected) {
+        if (multiple) initialSelectedItems[item.value] = item.value;else initialSelectedItems = (0, _defineProperty2.default)({}, item.value, item.value);
+      }
+    });
+    setSelectedItems(initialSelectedItems);
+  }, [items]); // cada que cambien los items seleccionados
+
+  (0, _react.useEffect)(function () {
+    if (!selectedItems) return;
+    renderItems();
+    renderLabelSelect();
+    onChange && onChange(Object.values(selectedItems));
+  }, [selectedItems]); // evento click de cada item de la lista
+
+  var onClickItem = function onClickItem(isSelected, value) {
+    var selectedItemsCopy = (0, _objectSpread2.default)({}, selectedItems);
+
+    if (isSelected) {
+      multiple ? selectedItemsCopy[value] = value : selectedItemsCopy = (0, _defineProperty2.default)({}, value, value);
+    } else delete selectedItemsCopy[value];
+
+    setSelectedItems(selectedItemsCopy);
+  };
+
+  var onClickSearch = function onClickSearch() {
+    setTextInputSearch(textInputSearch.trim());
+    (refInputTextSearch === null || refInputTextSearch === void 0 ? void 0 : refInputTextSearch.current) && refInputTextSearch.current.blur();
+    renderItems(textInputSearch.trim());
+  };
+
+  var renderLabelSelect = function renderLabelSelect() {
+    if (!selectedItems) return;
+    var selectedItemsCopy = Object.values(selectedItems);
+
+    if (selectedItemsCopy.length > 1) {
+      setLabelSelect("Personalizado");
+    } else if (selectedItemsCopy.length === 1) {
+      var labelItem = undefined;
+
+      var _iterator = (0, _createForOfIteratorHelper2.default)(items),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+
+          if (item.value == selectedItemsCopy[0]) {
+            labelItem = item.label;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      !(0, _utils.isStringEmpty)(labelItem) ? setLabelSelect(labelItem) : setLabelSelect("Sin titulo");
+    } else {
+      if (!(0, _utils.isStringEmpty)(defaultItem === null || defaultItem === void 0 ? void 0 : defaultItem.label) && defaultItem !== null && defaultItem !== void 0 && defaultItem.showLabelInSelect) {
+        setLabelSelect(defaultItem.label);
+      } else if (!(0, _utils.isStringEmpty)(selectButton === null || selectButton === void 0 ? void 0 : selectButton.label)) {
+        setLabelSelect(selectButton.label);
+      } else {
+        setLabelSelect("Sin titulo");
+      }
+    }
+  };
+
+  var renderItems = function renderItems() {
+    var textSearch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+    if ((0, _utils.isArrayEmpty)(items)) setCustomItems([]);
+    setCustomItems(items.map(function (item, index) {
+      if (!(0, _utils.isStringEmpty)(textSearch) && !item.label.trim().toLowerCase().includes(textSearch.trim().toLowerCase())) {
+        return null;
+      }
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemV.SelectItemV2, {
+        label: item.label,
+        value: item.value,
+        checkbox: typeSelectItems === "checkbox" ? true : typeSelectItems === "marginCheckbox" ? false : undefined,
+        selected: selectedItems && selectedItems[item.value] ? true : false,
+        onClick: onClickItem
+      }, classNameSelect + "_item" + index);
+    }));
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+    onClickAway: function onClickAway(event) {
+      if (triggerType !== "hover") setShowDropdown(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: !(0, _utils.isStringEmpty)(classNameSelect) ? classNameSelect : "",
+      borderType: borderType,
+      maxWidthSelect: maxWidthSelect,
+      maxWidthDropdown: maxWidthDropdown,
+      maxHeightDropdown: maxHeightDropdown,
+      alignmentItemsOverflow: alignmentItemsOverflow,
+      maxWidthItems: maxWidthItems,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+        placement: (_positions$positionDr = positions[positionDropdown]) !== null && _positions$positionDr !== void 0 ? _positions$positionDr : positions.bottomCenter,
+        open: triggerType !== "hover" ? showDropdown : undefined,
+        arrow: false,
+        componentsProps: {
+          tooltip: {
+            className: "dropdownSelect" + ((0, _utils.isStringEmpty)(classNameDropdown) ? "" : " " + classNameDropdown)
+          },
+          popper: {
+            disablePortal: true
+          },
+          transition: {
+            timeout: 300
+          }
+        },
+        TransitionComponent: _material.Fade,
+        enterDelay: 100,
+        followCursor: false,
+        disableFocusListener: true,
+        disableTouchListener: true,
+        disableHoverListener: triggerType !== "hover",
+        title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [inputSearch && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "container-inputSearch" + (!(0, _utils.isStringEmpty)(inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.className) ? " " + inputSearch.className : ""),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+              className: "buttonSearch",
+              type: "gray",
+              transparent: true,
+              size: 14,
+              icon: _freeSolidSvgIcons.faSearch,
+              onClick: function onClick(event) {
+                if ((0, _utils.isStringEmpty)(textInputSearch) && refInputTextSearch !== null && refInputTextSearch !== void 0 && refInputTextSearch.current) {
+                  setTextInputSearch("");
+                  refInputTextSearch.current.focus();
+                } else {
+                  onClickSearch();
+                }
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputText.InputText, {
+              className: "inputSearch",
+              type: "black",
+              transparent: true,
+              size: 12,
+              placeHolder: (0, _utils.isStringEmpty)(inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.defaultText) ? "Texto a buscar" : inputSearch.defaultText,
+              text: textInputSearch,
+              onChangeText: function onChangeText(newValue) {
+                return setTextInputSearch(newValue);
+              },
+              onEnter: function onEnter(event) {
+                return onClickSearch();
+              },
+              refInputText: refInputTextSearch
+            })]
+          }), defaultItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItemV.SelectItemV2, {
+            label: defaultItem.label,
+            value: null,
+            checkbox: defaultItem.itemType === "checkbox" ? true : defaultItem.itemType === "marginCheckbox" ? false : undefined,
+            selected: selectedItems && Object.keys(selectedItems).length ? false : true,
+            onClick: function onClick(isSelected, value) {
+              selectedItems && Object.keys(selectedItems).length && setSelectedItems({});
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "container-items",
+            children: customItems
+          })]
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerSelect, {
+          className: "container-buttonSelect",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+            className: "buttonSelect" + (!(0, _utils.isStringEmpty)(selectButton === null || selectButton === void 0 ? void 0 : selectButton.className) ? " " + selectButton.className : ""),
+            disabled: selectButton === null || selectButton === void 0 ? void 0 : selectButton.disabled,
+            type: selectButton === null || selectButton === void 0 ? void 0 : selectButton.type,
+            transparent: selectButton === null || selectButton === void 0 ? void 0 : selectButton.transparent,
+            label: labelSelect,
+            size: selectButton === null || selectButton === void 0 ? void 0 : selectButton.size,
+            icon: _freeSolidSvgIcons.faCaretDown,
+            iconPosition: "end",
+            onClick: function onClick(event) {
+              if (triggerType !== "hover") setShowDropdown(function (prev) {
+                return !prev;
+              });
+            }
+          })
+        })
+      }))
+    })
+  });
+};
+
+exports.SelectV2 = SelectV2;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerSelect = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _variables = require("../../../global-files/variables");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  max-width: ", ";\n  //border: 1px solid red;\n  border-radius: ", ";\n"])), function (_ref) {
+  var maxWidthSelect = _ref.maxWidthSelect;
+  return maxWidthSelect ? maxWidthSelect : "unset";
+}, 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()) === "oval" ? "17px" : "0px"; // default none
+});
+
+exports.Container = Container;
+
+var ContainerSelect = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border-radius: inherit;\n\n  .buttonSelect {\n    width: 100%;\n    border-radius: inherit;\n\n    .button {\n      padding: 10px 16px;\n      gap: 10px;\n      .icon {\n        font-size: 13px;\n      }\n    }\n  }\n\n  + .MuiTooltip-popper {\n    background-color: transparent;\n\n    .dropdownSelect {\n      --background: white;\n      box-shadow: 0px 0px 10px 1px gray;\n      background-color: var(--background);\n      padding: 6px 0px;\n      border-radius: 7px;\n      display: flex;\n      flex-direction: column;\n      gap: 0px;\n      max-width: ", ";\n      max-height: ", ";\n\n      .container-inputSearch {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        align-items: center;\n        gap: 0px;\n        padding: 0px 10px 8px 10px;\n        border-bottom: 1px solid #f0f0f0;\n\n        .inputSearch {\n          padding-left: 8px;\n          flex-grow: 2;\n        }\n      }\n\n      .selectItemV2 {\n        width: 100%;\n      }\n\n      .container-items {\n        flex-grow: 2;\n        display: flex;\n        flex-direction: column;\n        flex-wrap: ", ";\n        overflow: auto;\n\n        .selectItemV2 {\n          width: ", ";\n        }\n      }\n    }\n\n    &[data-popper-placement*=\"bottom\"] .dropdownSelect {\n      margin-top: 10px;\n    }\n    &[data-popper-placement*=\"top\"] .dropdownSelect {\n      margin-bottom: 10px;\n    }\n    &[data-popper-placement*=\"left\"] .dropdownSelect {\n      margin-right: 10px;\n    }\n    &[data-popper-placement*=\"right\"] .dropdownSelect {\n      margin-left: 10px;\n    }\n  }\n"])), function (_ref3) {
+  var maxWidthDropdown = _ref3.maxWidthDropdown;
+  return maxWidthDropdown ? maxWidthDropdown : "400px";
+}, function (_ref4) {
+  var maxHeightDropdown = _ref4.maxHeightDropdown;
+  return maxHeightDropdown ? maxHeightDropdown : "80vh";
+}, function (_ref5) {
+  var alignmentItemsOverflow = _ref5.alignmentItemsOverflow;
+  return alignmentItemsOverflow === "columns" ? "wrap" : "nowrap";
+}, function (_ref6) {
+  var maxWidthItems = _ref6.maxWidthItems;
+  return maxWidthItems ? maxWidthItems : "100%";
+});
+
+exports.ContainerSelect = ContainerSelect;

package/dist/components/organisms/OrderDetail/OrderDetail.stories.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _index = _interopRequireDefault(require("./index.js"));
+var _index = require("./index.js");
 
 var _axios = _interopRequireDefault(require("axios"));
 
@@ -23,12 +23,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
   title: "Components/organisms/OrderDetail",
-  component: _index.default
+  component: _index.OrderDetail
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OrderDetail, (0, _objectSpread2.default)({}, args));
 };
 
 var objToQueryString = function objToQueryString(obj) {

package/dist/components/organisms/OrderDetail/index.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = OrderDetail;
+exports.OrderDetail = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -33,7 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 _moment.default.locale("es");
 
-function OrderDetail(props) {
+var OrderDetail = function OrderDetail(props) {
   var order = props.order;
 
   var _useState = (0, _react.useState)(order.payment !== "pagado"),
@@ -246,4 +246,6 @@ function OrderDetail(props) {
       })]
     })]
   });
-}
+};
+
+exports.OrderDetail = OrderDetail;

package/dist/index.js

@@ -784,7 +784,7 @@ Object.keys(_index59).forEach(function (key) {
   });
 });
 
-var _index60 = require("./components/organisms/ChangePassword/index");
+var _index60 = require("./components/molecules/SelectV2/index");
 
 Object.keys(_index60).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -797,7 +797,7 @@ Object.keys(_index60).forEach(function (key) {
   });
 });
 
-var _index61 = require("./components/organisms/Fullplan/index");
+var _index61 = require("./components/organisms/ChangePassword/index");
 
 Object.keys(_index61).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -810,7 +810,7 @@ Object.keys(_index61).forEach(function (key) {
   });
 });
 
-var _index62 = require("./components/organisms/FullProductNameHeader/index");
+var _index62 = require("./components/organisms/Fullplan/index");
 
 Object.keys(_index62).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -823,7 +823,7 @@ Object.keys(_index62).forEach(function (key) {
   });
 });
 
-var _index63 = require("./components/organisms/FullTabsMenu/index");
+var _index63 = require("./components/organisms/FullProductNameHeader/index");
 
 Object.keys(_index63).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -836,7 +836,7 @@ Object.keys(_index63).forEach(function (key) {
   });
 });
 
-var _index64 = require("./components/organisms/ImageDataTable/index");
+var _index64 = require("./components/organisms/FullTabsMenu/index");
 
 Object.keys(_index64).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -849,7 +849,7 @@ Object.keys(_index64).forEach(function (key) {
   });
 });
 
-var _index65 = require("./components/organisms/ImagePreviewer/index");
+var _index65 = require("./components/organisms/ImageDataTable/index");
 
 Object.keys(_index65).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -862,7 +862,7 @@ Object.keys(_index65).forEach(function (key) {
   });
 });
 
-var _index66 = require("./components/organisms/ImagesGroup/index");
+var _index66 = require("./components/organisms/ImagePreviewer/index");
 
 Object.keys(_index66).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -875,7 +875,7 @@ Object.keys(_index66).forEach(function (key) {
   });
 });
 
-var _index67 = require("./components/organisms/InputGroup/index");
+var _index67 = require("./components/organisms/ImagesGroup/index");
 
 Object.keys(_index67).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -888,7 +888,7 @@ Object.keys(_index67).forEach(function (key) {
   });
 });
 
-var _index68 = require("./components/organisms/ProductImageModal/index");
+var _index68 = require("./components/organisms/InputGroup/index");
 
 Object.keys(_index68).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -901,7 +901,7 @@ Object.keys(_index68).forEach(function (key) {
   });
 });
 
-var _index69 = require("./components/organisms/Chat/index");
+var _index69 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index69).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -914,7 +914,7 @@ Object.keys(_index69).forEach(function (key) {
   });
 });
 
-var _index70 = require("./components/organisms/Modal/index");
+var _index70 = require("./components/organisms/Chat/index");
 
 Object.keys(_index70).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -927,7 +927,7 @@ Object.keys(_index70).forEach(function (key) {
   });
 });
 
-var _index71 = require("./components/organisms/OrderDetail/index");
+var _index71 = require("./components/organisms/Modal/index");
 
 Object.keys(_index71).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -940,6 +940,19 @@ Object.keys(_index71).forEach(function (key) {
   });
 });
 
+var _index72 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index72).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index72[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index72[key];
+    }
+  });
+});
+
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.93",
+  "version": "21.2.95",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -10,6 +10,7 @@ export default {
         undefined,
         "white",
         "whiteS2",
+        "whiteS3",
         "pink",
         "gray",
         "purple",

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

@@ -10,7 +10,7 @@ export const ButtonV2 = (props) => {
     keyId,
     className,
     disabled,
-    type, // white | whiteS2 | pink | gray | purple | black => por default (white)
+    type, // white | whiteS2 | whiteS3 | pink | gray | purple | black => por default (white)
     transparent, // boolean => por default (NO transparent)
     label,
     size, // number ... label? size -> label && icon adaptable : size -> icon
@@ -39,13 +39,18 @@ export const ButtonV2 = (props) => {
       <ButtonMUI
         className={
           "button " +
-          (["white", "whiteS2", "pink", "gray", "purple", "black"].includes(
-            type
-          )
+          ([
+            "white",
+            "whiteS2",
+            "whiteS3",
+            "pink",
+            "gray",
+            "purple",
+            "black",
+          ].includes(type)
             ? type
             : "white") +
-          (transparent ? " transparent " : " fill ") +
-          className
+          (transparent ? " transparent" : " fill")
         }
         variant={"text"}
         disabled={disabled || isLoading}

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

@@ -49,7 +49,7 @@ export const Container = styled.div`
     }};
     font-family: ${FontFamily.RobotoMedium}, sans-serif;
     font-size: var(--size);
-    line-height: 1;
+    line-height: 1.2;
     text-transform: none;
 
     // tipos de botones fill
@@ -70,6 +70,14 @@ export const Container = styled.div`
           background-color: #f4f4f4;
         }
       }
+      &.whiteS3 {
+        background-color: white;
+        color: #262626;
+        border-color: #f0f0f0;
+        &:hover {
+          background-color: #f4f4f4;
+        }
+      }
       &.pink {
         background-color: #e33aa9;
         color: white;

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

@@ -3,14 +3,19 @@ import { Image } from "./index";
 export default {
   title: "Components/atoms/Image",
   component: Image,
-  argTypes: {},
+  argTypes: {
+    borderType: {
+      options: [undefined, "rectangle", "circle"],
+      control: { type: "select" },
+    },
+  },
 };
 
 const Template = (args) => <Image {...args} />;
 
 const keyS3_test =
   "84300/1/chat/playa-213f791b-d890-48e1-be19-28bf5a95d517.jpeg";
-const srcTest = `https://content-management-images.s3.amazonaws.com/${keyS3_test}`;
+const srcTest = `https://content-management-profile.s3.amazonaws.com/id-59/59.png`;
 export const ImageTest = Template.bind({});
 ImageTest.args = {
   width: "200px",
@@ -18,6 +23,7 @@ ImageTest.args = {
   colorLoading: "#bbbbbb",
   src: srcTest,
   componentDefault: <label> test error </label>,
+  borderType: undefined,
 };
 
 const keyS3_OK =
@@ -29,6 +35,7 @@ ImageOK.args = {
   sizeLoading: "40",
   src: srcOK,
   componentDefault: <label> img no cargada </label>,
+  borderType: undefined,
 };
 
 const keyS3_ERROR =
@@ -40,4 +47,5 @@ ImageERROR.args = {
   sizeLoading: "60",
   src: srcERROR,
   componentDefault: <label> ERROR al cargar </label>,
+  borderType: undefined,
 };