sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/Benchmark.js

@@ -5,41 +5,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Benchmark = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _BenchmarkStyle = require("./Benchmark.style.js");
-var _excluded = ["totalValue", "currentValue", "benchmarkValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor"];
-/*Benchmark*/
-var Benchmark = function Benchmark(_ref) {
-  var _ref$totalValue = _ref.totalValue,
-    totalValue = _ref$totalValue === void 0 ? 100 : _ref$totalValue,
-    _ref$currentValue = _ref.currentValue,
-    currentValue = _ref$currentValue === void 0 ? 60 : _ref$currentValue,
-    benchmarkValue = _ref.benchmarkValue,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 100 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 12 : _ref$height,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "#79DB95" : _ref$color,
-    _ref$linearGradientCo = _ref.linearGradientColor,
-    linearGradientColor = _ref$linearGradientCo === void 0 ? "#C3EFD0" : _ref$linearGradientCo,
-    _ref$underAvarageColo = _ref.underAvarageColor,
-    underAvarageColor = _ref$underAvarageColo === void 0 ? "#FD5959" : _ref$underAvarageColo,
-    _ref$linearGradientUn = _ref.linearGradientUnderAvarageColor,
-    linearGradientUnderAvarageColor = _ref$linearGradientUn === void 0 ? "#FDB1B1" : _ref$linearGradientUn,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? "#F2F2F2" : _ref$backgroundColor,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var getCurrentValueRectangleWidth = function getCurrentValueRectangleWidth() {
+var _Benchmark = require("./Benchmark.style");
+var _CommonFunctions = require("./CommonFunctions");
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+/* Benchmark */
+const Benchmark = props => {
+  const {
+    totalValue,
+    currentValue,
+    benchmarkValue,
+    width,
+    height,
+    color,
+    linearGradientColor,
+    underAvarageColor,
+    linearGradientUnderAvarageColor,
+    backgroundColor,
+    tooltipLabel,
+    tooltipDirection
+  } = props;
+  const getCurrentValueRectangleWidth = () => {
     if (!totalValue) return 0;
     if (currentValue > totalValue) return width;
     return currentValue / totalValue * width;
   };
-  var getUnderAvarageColor = function getUnderAvarageColor() {
+  const getUnderAvarageColor = () => {
     if (!totalValue) return backgroundColor;
     if (currentValue > totalValue) return color;
-    var benchmarkCurrentValue;
+    let benchmarkCurrentValue;
     if (!benchmarkValue) {
       benchmarkCurrentValue = 0.5;
     } else if (benchmarkValue > totalValue) {
@@ -47,16 +41,18 @@ var Benchmark = function Benchmark(_ref) {
     } else {
       benchmarkCurrentValue = benchmarkValue / totalValue;
     }
+    if (currentValue === benchmarkValue) {
+      return color;
+    }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return underAvarageColor;
-    } else {
-      return color;
     }
+    return color;
   };
-  var getUnderAvaragelinearGradientColor = function getUnderAvaragelinearGradientColor() {
+  const getUnderAvaragelinearGradientColor = () => {
     if (!totalValue) return backgroundColor;
     if (currentValue > totalValue) return linearGradientColor;
-    var benchmarkCurrentValue;
+    let benchmarkCurrentValue;
     if (!benchmarkValue) {
       benchmarkCurrentValue = 0.5;
     } else if (benchmarkValue > totalValue) {
@@ -64,13 +60,15 @@ var Benchmark = function Benchmark(_ref) {
     } else {
       benchmarkCurrentValue = benchmarkValue / totalValue;
     }
+    if (currentValue === benchmarkValue) {
+      return linearGradientColor;
+    }
     if (currentValue / totalValue <= benchmarkCurrentValue) {
       return linearGradientUnderAvarageColor;
-    } else {
-      return linearGradientColor;
     }
+    return linearGradientColor;
   };
-  var getBenchmarkLeft = function getBenchmarkLeft() {
+  const getBenchmarkLeft = () => {
     if (!benchmarkValue) {
       return width / 2;
     }
@@ -79,28 +77,54 @@ var Benchmark = function Benchmark(_ref) {
     }
     return width * (benchmarkValue / totalValue);
   };
-  return /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.ControlsContainer, {
+  const getTooltipText = () => {
+    var _getFormattedValue, _getFormattedUnits;
+    return /*#__PURE__*/_react.default.createElement("h4", null, tooltipLabel, tooltipLabel ? ': ' : '', (_getFormattedValue = (0, _CommonFunctions.getFormattedValue)(benchmarkValue)) === null || _getFormattedValue === void 0 ? void 0 : _getFormattedValue.toString(), (_getFormattedUnits = (0, _CommonFunctions.getFormattedUnits)(benchmarkValue)) === null || _getFormattedUnits === void 0 ? void 0 : _getFormattedUnits.toString());
+  };
+  return /*#__PURE__*/_react.default.createElement(_Benchmark.ControlsContainer, {
+    id: "ControlsContainer",
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.Controls, {
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    id: "Tooltip",
+    content: getTooltipText(),
+    direction: tooltipDirection
+  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Controls, {
+    id: "ControlsBenchmark",
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.BackgroundValueRectangle, {
+  }, /*#__PURE__*/_react.default.createElement(_Benchmark.BackgroundValueRectangle, {
+    id: "BackgroundValueRectangle",
     height: height,
     width: width,
     color: backgroundColor
-  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.CurrentValueRectangle, {
+  }), /*#__PURE__*/_react.default.createElement(_Benchmark.CurrentValueRectangle, {
+    id: "CurrentValueRectangle",
     height: height,
     width: getCurrentValueRectangleWidth(),
     color: getUnderAvarageColor(),
-    linearGradientColor: getUnderAvaragelinearGradientColor()
-  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.AvarageDelimiter, {
+    lineargradientcolor: getUnderAvaragelinearGradientColor()
+  }), /*#__PURE__*/_react.default.createElement(_Benchmark.AvarageDelimiter, {
+    id: "AvarageDelimiter",
     height: height + 4,
     width: 0,
     top: -2,
     left: getBenchmarkLeft()
-  })));
+  }))));
 };
 exports.Benchmark = Benchmark;
-var _default = Benchmark;
-exports.default = _default;
+var _default = exports.default = Benchmark;
+Benchmark.defaultProps = {
+  totalValue: 100,
+  currentValue: 60,
+  benchmarkValue: 500,
+  width: 100,
+  height: 12,
+  color: '#79DB95',
+  linearGradientColor: '#C3EFD0',
+  underAvarageColor: '#FD5959',
+  linearGradientUnderAvarageColor: '#FDB1B1',
+  backgroundColor: '#F2F2F2',
+  tooltipLabel: 'Benchmark',
+  tooltipDirection: 'bottom'
+};

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

@@ -8,43 +8,8 @@ exports.CurrentValueRectangle = exports.ControlsContainer = exports.Controls = e
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.height.toString().concat("", "px");
-});
-exports.ControlsContainer = ControlsContainer;
-var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.height.toString().concat("", "px");
-});
-exports.Controls = Controls;
-var BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.height.toString().concat("", "px");
-}, function (props) {
-  return props.color;
-});
-exports.BackgroundValueRectangle = BackgroundValueRectangle;
-var CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), function (props) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.height.toString().concat("", "px");
-}, function (props) {
-  return props.linearGradientColor;
-}, function (props) {
-  return props.color;
-});
-exports.CurrentValueRectangle = CurrentValueRectangle;
-var AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), function (props) {
-  return props.height.toString().concat("", "px");
-}, function (props) {
-  return props.width.toString().concat("", "px");
-}, function (props) {
-  return props.top.toString().concat("", "px");
-}, function (props) {
-  return props.left.toString().concat("", "px");
-});
-exports.AvarageDelimiter = AvarageDelimiter;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n  align-items: center;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'));
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'));
+const BackgroundValueRectangle = exports.BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'), props => props.color);
+const CurrentValueRectangle = exports.CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'), props => props.lineargradientcolor, props => props.color);
+const AvarageDelimiter = exports.AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), props => props.height.toString().concat('', 'px'), props => props.width.toString().concat('', 'px'), props => props.top.toString().concat('', 'px'), props => props.left.toString().concat('', 'px'));

package/dist/stories/components/Button/Button.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("./Button.style");
+var _FilterIcon = require("../../icons/FilterIcon");
+var _OptionsIcon = require("../../icons/OptionsIcon");
+var _DownloadIcon = require("../../icons/DownloadIcon");
+var _DocumentIcon = require("../../icons/DocumentIcon");
+var _FlyIcon = require("../../icons/FlyIcon");
+var _BellIcon = require("../../icons/BellIcon");
+var _MaintenanceIcon = require("../../icons/MaintenanceIcon");
+var _ExitIcon = require("../../icons/ExitIcon");
+var _EyeIcon = require("../../icons/EyeIcon");
+const Button = props => {
+  const {
+    text,
+    type,
+    size,
+    height,
+    width,
+    disabled,
+    textColor,
+    backgroundColor,
+    borderColor,
+    hoverTextColor,
+    hoverBackgroundColor,
+    hoverBorderColor,
+    disabledTextColor,
+    disabledBackgroundColor,
+    disabledBorderColor,
+    leftIcon,
+    rightIcon,
+    onClick,
+    isSubmitButton
+  } = props;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const handleSubmitButtonOnClick = () => {
+    setClicked(true);
+    onClick("SubmitButtonOnClick: ".concat(text));
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const handleButtonClick = event => {
+    setClicked(true);
+    onClick(event);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const getIcon = icon => {
+    const iconHeight = '12px';
+    const iconWidth = '12px';
+    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
+    const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
+    const newDisabledTextColor = disabledTextColor || '#B1B1B1';
+    const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
+    const color = disabled ? newDisabledTextColor : newEnabledTextColor;
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
+    }
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonContainer, {
+    className: "ButtonContainer",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px')
+  }, isSubmitButton ? /*#__PURE__*/_react.default.createElement(_Button.InputCommit, {
+    className: clicked ? 'InputCommit-clicked' : 'InputCommit',
+    value: text,
+    type: "submit",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px'),
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
+    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
+    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
+    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
+    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
+    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
+    disabled_text_color: disabledTextColor || '#B1B1B1',
+    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
+    disabled_border_color: disabledBorderColor || '#E3E4E5',
+    padding: size === 'small' ? '0 16px' : '0 20px',
+    onClick: !disabled ? handleSubmitButtonOnClick : null
+  }) : /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
+    className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    onClick: event => !disabled ? handleButtonClick(event) : null,
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px'),
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
+    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
+    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
+    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
+    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
+    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
+    disabled_text_color: disabledTextColor || '#B1B1B1',
+    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
+    disabled_border_color: disabledBorderColor || '#E3E4E5',
+    padding: size === 'small' ? '0 16px' : '0 20px'
+  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_Button.Label, {
+    className: "Label",
+    disabled: disabled
+  }, text), getRightIcon()));
+};
+exports.Button = Button;
+var _default = exports.default = Button;
+Button.defaultProps = {
+  text: '',
+  type: 'primary',
+  size: 'small',
+  height: '',
+  width: '',
+  disabled: false,
+  textColor: '',
+  backgroundColor: '',
+  borderColor: '',
+  hoverTextColor: '',
+  hoverBackgroundColor: '',
+  hoverBorderColor: '',
+  disabledTextColor: '',
+  disabledBackgroundColor: '',
+  disabledBorderColor: '',
+  onClick: () => {},
+  leftIcon: 'none',
+  rightIcon: 'none',
+  isSubmitButton: false
+};