contentoh-components-library 21.4.50 → 21.4.51

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.
Files changed (5) hide show
  1. package/dist/components/molecules/BoxAttribute/index.js +35 -7
  2. package/dist/components/molecules/BoxAttribute/styles.js +2 -4
  3. package/package.json +1 -1
  4. package/src/components/molecules/BoxAttribute/index.js +24 -14
  5. package/src/components/molecules/BoxAttribute/styles.js +1 -15
package/dist/components/molecules/BoxAttribute/index.js CHANGED
@@ -2,11 +2,15 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
 
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
10
  exports.BoxAttribute = void 0;
9
11
 
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
13
+
10
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
11
15
 
12
16
  var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
@@ -15,12 +19,18 @@ var _styles = require("./styles");
15
19
 
16
20
  var _info = _interopRequireDefault(require("../../../assets/images/Icons/info.svg"));
17
21
 
18
- var _Tooltip = require("../../atoms/Tooltip");
19
-
20
22
  var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
21
23
 
24
+ var _Tooltip = _interopRequireWildcard(require("@mui/material/Tooltip"));
25
+
26
+ var _styles2 = require("@mui/material/styles");
27
+
28
+ var _variables = require("../../../global-files/variables");
29
+
22
30
  var _jsxRuntime = require("react/jsx-runtime");
23
31
 
32
+ var _excluded = ["className"];
33
+
24
34
  var BoxAttribute = function BoxAttribute(props) {
25
35
  // console.log({ props });
26
36
  var id = props.id,
@@ -42,6 +52,24 @@ var BoxAttribute = function BoxAttribute(props) {
42
52
  });
43
53
  };
44
54
 
55
+ var LightTooltip = (0, _styles2.styled)(function (_ref) {
56
+ var className = _ref.className,
57
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
58
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
59
+ classes: {
60
+ popper: className
61
+ }
62
+ }));
63
+ })(function (_ref2) {
64
+ var theme = _ref2.theme;
65
+ return (0, _defineProperty2.default)({}, "& .".concat(_Tooltip.tooltipClasses.tooltip), {
66
+ backgroundColor: _variables.GlobalColors.white,
67
+ color: 'rgba(0, 0, 0, 0.87)',
68
+ boxShadow: theme.shadows[1],
69
+ fontSize: 11,
70
+ fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif")
71
+ });
72
+ });
45
73
  var formattedData = Object.keys(atributos).reduce(function (result, id) {
46
74
  result["box".concat(id)] = atributos[id];
47
75
  return result;
@@ -55,10 +83,11 @@ var BoxAttribute = function BoxAttribute(props) {
55
83
  id: id,
56
84
  className: className,
57
85
  borderType: borderType,
58
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
59
- componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
86
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LightTooltip, {
87
+ title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
88
+ className: "container-tooltip",
60
89
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
61
- className: "tooltip-content",
90
+ className: "container-tooltip",
62
91
  children: description
63
92
  })
64
93
  }),
@@ -69,8 +98,7 @@ var BoxAttribute = function BoxAttribute(props) {
69
98
  src: _info.default,
70
99
  alt: "iconInfo"
71
100
  })
72
- }),
73
- classNameTooltip: "container-tooltip"
101
+ })
74
102
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
75
103
  children: [text, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
76
104
  className: required ? 'required-text' : '',
package/dist/components/molecules/BoxAttribute/styles.js CHANGED
@@ -15,11 +15,9 @@ 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 align-items: center;\n gap:4px;\n #atr-alto {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .caja-borde {\n font-family: ", ", sans-serif;\n font-size: 12px;\n line-height: 1.2;\n border-radius: ", ";\n }\n span {\n font-family: ", ", sans-serif;\n font-size: 12px;\n line-height: 1.2;\n font-weight: 600;\n }\n .icon {\n width: 8px;\n height: 8px;\n }\n .required-text {\n color: red;\n }\n\n .container-tooltip{\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 \n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap:4px;\n #atr-alto {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .caja-borde {\n font-family: ", ", sans-serif;\n font-size: 12px;\n line-height: 1.2;\n border-radius: ", ";\n }\n span {\n font-family: ", ", sans-serif;\n font-size: 12px;\n line-height: 1.2;\n font-weight: 600;\n }\n .icon {\n width: 8px;\n height: 8px;\n }\n .required-text {\n color: red;\n }\n\n\n \n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
19
19
  var borderType = _ref.borderType;
20
20
  return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "5px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "none";
21
- }, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, function (backgroundColor) {
22
- return backgroundColor === "s2" || backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
23
- });
21
+ }, _variables.FontFamily.RobotoMedium);
24
22
 
25
23
  exports.Container = Container;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.4.50",
3
+ "version": "21.4.51",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/molecules/BoxAttribute/index.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import { Container } from "./styles";
2
2
  import IconInfo from "../../../assets/images/Icons/info.svg";
3
- import { Tooltip } from "../../atoms/Tooltip";
4
3
  import TextField from "@mui/material/TextField";
4
+ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
5
+ import { styled } from '@mui/material/styles';
6
+ import { FontFamily, GlobalColors } from "../../../global-files/variables";
5
7
 
6
8
  export const BoxAttribute = (props) => {
7
9
  // console.log({ props });
@@ -23,6 +25,17 @@ export const BoxAttribute = (props) => {
23
25
  [name]: value,
24
26
  }));
25
27
  };
28
+ const LightTooltip = styled(({ className, ...props }) => (
29
+ <Tooltip {...props} classes={{ popper: className }} />
30
+ ))(({ theme }) => ({
31
+ [`& .${tooltipClasses.tooltip}`]: {
32
+ backgroundColor: GlobalColors.white,
33
+ color: 'rgba(0, 0, 0, 0.87)',
34
+ boxShadow: theme.shadows[1],
35
+ fontSize: 11,
36
+ fontFamily: `${FontFamily.Roboto}, sans-serif`,
37
+ },
38
+ }));
26
39
 
27
40
  const formattedData = Object.keys(atributos).reduce((result, id) => {
28
41
  result[`box${id}`] = atributos[id];
@@ -40,19 +53,16 @@ export const BoxAttribute = (props) => {
40
53
  className={className}
41
54
  borderType={borderType}
42
55
  >
43
- <Tooltip
44
- componentTooltip={
45
- <>
46
- <p className="tooltip-content">{description}</p>
47
- </>
48
- }
49
- children={
50
- <Container className="">
51
- <img className="icon" src={IconInfo} alt="iconInfo" />
52
- </Container>
53
- }
54
- classNameTooltip={"container-tooltip"}
55
- />
56
+ <LightTooltip title={
57
+ <div className="container-tooltip">
58
+ <p className="container-tooltip">{description}</p>
59
+ </div>
60
+ }>
61
+ <Container className="">
62
+ <img className="icon" src={IconInfo} alt="iconInfo" />
63
+ </Container>
64
+ </LightTooltip>
65
+
56
66
  <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
57
67
  <TextField
58
68
  hiddenLabel
package/src/components/molecules/BoxAttribute/styles.js CHANGED
@@ -36,20 +36,6 @@ export const Container = styled.div`
36
36
  color: red;
37
37
  }
38
38
 
39
- .container-tooltip{
40
- background-color: ${GlobalColors.s3};
41
- width: fit-content;
42
- height: 27px;
43
- padding: 4px;
44
- border-radius: 15px;
45
- font-family: ${FontFamily.AvenirNext};
46
- font-weight: 600;
47
- font-size: 14px;
48
- line-height: 19px;
49
- color: ${(backgroundColor) =>
50
- backgroundColor === "s2" || backgroundColor === "s1"
51
- ? GlobalColors.s4
52
- : GlobalColors.white};
53
- }
39
+
54
40
 
55
41
  `;