sag_components 1.0.108 → 1.0.109

package/dist/stories/components/OneColumnContainer.js

@@ -39,8 +39,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
+    hover = _useState2[0],
+    setHover = _useState2[1];
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
     className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, children && droppedStyle, divStyle),
     width: width,
@@ -57,17 +57,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
       gridTemplateColumns: gridTemplateColumns
     },
     ref: nodeRef
-  }, children, isLoading && /*#__PURE__*/_react.default.createElement("div", {
-    id: "loadingDiv",
-    style: {
-      marginTop: "20px",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-evenly",
-      alignItems: "center",
-      width: "76%",
-      height: "65%"
-    }
+  }, isLoading && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.LoadingDiv, {
+    id: "loadingDiv"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
     baseColor: "#EAEAEA"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
@@ -81,9 +72,8 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     width: width.replace("px", "") * 0.76,
     height: 10,
     containerClassName: "avatar-skeleton"
-  }))), !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
+  }))), !isLoading && !hover && children, !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hover && /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTextContainer, {
     id: "InfoTextContainer",
-    clicked: clicked,
     width: width,
     height: height
   }, /*#__PURE__*/_react.default.createElement(_OneColumnContainer.InfoTitleLabel, {
@@ -93,10 +83,10 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
   }, infoText)), /*#__PURE__*/_react.default.createElement(_OneColumnContainer.IconContainer, {
     id: "IconContainer",
     onMouseEnter: function onMouseEnter() {
-      return setClicked(true);
+      return setHover(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setClicked(false);
+      return setHover(false);
     }
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, null)))));
 };

package/dist/stories/components/OneColumnContainer.style.js

@@ -4,29 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainer = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
+exports.StyledContainer = exports.LoadingDiv = exports.InfoTitleLabel = exports.InfoTextLabel = exports.InfoTextContainer = exports.IconContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n  display: flex;\n  position: relative;\n  border-radius: 10px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 });
 exports.StyledContainer = StyledContainer;
-var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Lato\", sans-serif;\n  width: ", ";\n  height: ", ";\n  /* visibility: ", "; */\n  display: ", "; \n  flex-direction: column;\n  justify-content: center;\n  background: white;\n  margin: 0px 30px 0px 30px;\n"])), function (props) {
+var InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Lato\", sans-serif;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  background: white;\n  margin: 0px 30px 0px 30px;\n  \n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
-}, function (props) {
-  return props.clicked ? "visible" : "hidden";
-}, function (props) {
-  return props.clicked ? "flex" : "none";
 });
 exports.InfoTextContainer = InfoTextContainer;
-var InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 1.1em;  \n"])));
+var InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  color: black;\n  margin: 0px 0px 10px 0px;\n  font-size: 1.1em;\n  \n  /* overflow: scroll; */\n\n"])));
 exports.InfoTitleLabel = InfoTitleLabel;
-var InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 0.9em;\n  line-height: 1.4em;\n  font-weight: 500;\n"])));
+var InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: black;\n  font-size: 0.9em;\n  line-height: 1.4em;\n  font-weight: 500;\n\n  /* overflow: scroll; */\n"])));
 exports.InfoTextLabel = InfoTextLabel;
 var IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  margin-top: 10px;\n  margin-right: 10px;\n  top: 0;\n  right: 0;\n"])));
-exports.IconContainer = IconContainer;
+exports.IconContainer = IconContainer;
+var LoadingDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n  width: 76%;\n  height: 65%;\n"])));
+exports.LoadingDiv = LoadingDiv;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.108",
+  "version": "1.0.109",
   "description": "",
   "main": "dist/index.js",
   "scripts": {