sag_components 1.0.206 → 1.0.208

package/dist/stories/components/Benchmark.js

@@ -90,11 +90,9 @@ var Benchmark = function Benchmark(_ref) {
     return /*#__PURE__*/_react.default.createElement("h", 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(_BenchmarkStyle.ControlsContainer, {
-    id: "ControlsContainer",
     height: height,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    id: "Tooltip",
     content: getTooltipText(),
     direction: tooltipDirection
   }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.Controls, {
@@ -102,18 +100,15 @@ var Benchmark = function Benchmark(_ref) {
     height: height,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.BackgroundValueRectangle, {
-    id: "BackgroundValueRectangle",
     height: height,
     width: width,
     color: backgroundColor
   }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.CurrentValueRectangle, {
-    id: "CurrentValueRectangle",
     height: height,
     width: getCurrentValueRectangleWidth(),
     color: getUnderAvarageColor(),
     linearGradientColor: getUnderAvaragelinearGradientColor()
   }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.AvarageDelimiter, {
-    id: "AvarageDelimiter",
     height: height + 4,
     width: 0,
     top: -2,

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

@@ -8,7 +8,7 @@ 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: \"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"])), function (props) {
+var 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"])), function (props) {
   return props.width.toString().concat("", "px");
 }, function (props) {
   return props.height.toString().concat("", "px");

package/dist/stories/components/TextField.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TextField = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _TextFieldStyle = require("./TextField.style.js");
@@ -23,8 +22,7 @@ var _styles = require("@mui/material/styles");
 /**
  *  SAG TextField
  */
-var TextField = function TextField(_ref) {
-  var _React$createElement;
+var TextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "100%" : _ref$width,
     _ref$height = _ref.height,
@@ -57,15 +55,17 @@ var TextField = function TextField(_ref) {
       return !show;
     });
   };
-  (0, _react.useEffect)(function () {
-    var delayDebounceFn = setTimeout(function () {
-      onChange(currentInputValue);
-    }, 1000);
-    return function () {
-      return clearTimeout(delayDebounceFn);
-    };
-  }, [currentInputValue]);
+
+  // useEffect(() => {
+  //   const delayDebounceFn = setTimeout(() => {
+  //     onChange(currentInputValue);
+  //   }, delayOnChange);
+
+  //   return () => clearTimeout(delayDebounceFn);
+  // }, [currentInputValue]);
+
   var onChangeHandler = function onChangeHandler(event) {
+    onChange(event);
     setCurrentInputValue({
       event: event,
       value: event.target.value
@@ -164,6 +164,7 @@ var TextField = function TextField(_ref) {
     size: size,
     required: required,
     inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
+    ref: ref !== null && ref !== void 0 ? ref : null,
     onKeyDown: function onKeyDown(event) {
       if (!isInputAllowed(event.key)) {
         event.preventDefault();
@@ -177,7 +178,7 @@ var TextField = function TextField(_ref) {
     variant: "outlined"
   }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
     htmlFor: "outlined-adornment-password"
-  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, (_React$createElement = {
+  }, label), /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, {
     id: "outlined-adornment-password",
     type: showPassword ? "text" : "password",
     size: size,
@@ -190,15 +191,19 @@ var TextField = function TextField(_ref) {
       edge: "end"
     }, showPassword ? /*#__PURE__*/_react.default.createElement(_Visibility.default, null) : /*#__PURE__*/_react.default.createElement(_VisibilityOff.default, null))),
     defaultValue: defaultValue,
-    label: label
-  }, (0, _defineProperty2.default)(_React$createElement, "defaultValue", defaultValue), (0, _defineProperty2.default)(_React$createElement, "inputRef", inputRef !== null && inputRef !== void 0 ? inputRef : null), (0, _defineProperty2.default)(_React$createElement, "onKeyDown", function onKeyDown(event) {
-    if (!isInputAllowed(event.key)) {
-      event.preventDefault();
+    label: label,
+    inputRef: inputRef !== null && inputRef !== void 0 ? inputRef : null,
+    ref: ref !== null && ref !== void 0 ? ref : null,
+    onKeyDown: function onKeyDown(event) {
+      if (!isInputAllowed(event.key)) {
+        event.preventDefault();
+      }
+    },
+    onChange: function onChange(event) {
+      onChangeHandler(event);
     }
-  }), (0, _defineProperty2.default)(_React$createElement, "onChange", function onChange(event) {
-    onChangeHandler(event);
-  }), _React$createElement)))))));
-};
+  }))))));
+});
 exports.TextField = TextField;
 var _default = TextField;
 exports.default = _default;

package/dist/stories/components/TitleDescription.js

@@ -16,14 +16,16 @@ var _HannafordIcon = require("./icons/HannafordIcon");
 var _StopAndShopIcon = require("./icons/StopAndShopIcon");
 var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
 var _TitleDescriptionStyle = require("./TitleDescription.style.js");
-var _excluded = ["showRetailerIcon", "data", "viewCreativeOnClick", "width", "height", "textColor"];
+var _excluded = ["showRetailerIcon", "data", "infoButtonOnClick", "objectivesShowMoreOnClick", "viewCreativeOnClick", "downloadButtonOnClick", "width", "height", "textColor"];
 /*TitleDescription*/
 var TitleDescription = function TitleDescription(_ref) {
-  var _data$objectivesDescr;
   var _ref$showRetailerIcon = _ref.showRetailerIcon,
     showRetailerIcon = _ref$showRetailerIcon === void 0 ? true : _ref$showRetailerIcon,
     data = _ref.data,
+    infoButtonOnClick = _ref.infoButtonOnClick,
+    objectivesShowMoreOnClick = _ref.objectivesShowMoreOnClick,
     viewCreativeOnClick = _ref.viewCreativeOnClick,
+    downloadButtonOnClick = _ref.downloadButtonOnClick,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? "100%" : _ref$width,
     _ref$height = _ref.height,
@@ -125,7 +127,15 @@ var TitleDescription = function TitleDescription(_ref) {
     id: "ObjectivesDescription"
   }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesTitle, {
     id: "ObjectivesTitle"
-  }, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? "Objectives:  " : ""), data.objectivesDescription)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
+  }, "Objectives:", "  "), data.objectivesDescription, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesShowMore, {
+    id: "ObjectivesShowMore",
+    onClick: function onClick(event) {
+      objectivesShowMoreOnClick({
+        eventName: "objectivesShowMoreOnClick",
+        event: event
+      });
+    }
+  }, " ", " show more ..."))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
     id: "PeriodsContainer"
   }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
     id: "SubLineContainer"

package/dist/stories/components/TotalBenchmark.js

@@ -72,19 +72,22 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
     }, dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkStyle.BenchmarkContainer, {
       id: "BenchmarkContainer",
       width: width
-    }, item.totalValue ? /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
+    }, item.totalValue && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
       id: "Benchmark",
       totalValue: item.totalValue,
       currentValue: item.value,
       benchmarkValue: item.benchmarkValue,
       height: 12 * getSizeFactor(),
-      width: 85 * getSizeFactor(),
+      width: 85 * getSizeFactor()
+      // height={14 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT)}
+      // width={115 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT)}
+      ,
       color: "#79DB95",
       linearGradientColor: "#C3EFD0",
       linearGradientUnderAvarageColor: "#FDB1B1",
       underAvarageColor: "#FD5959",
       backgroundColor: "#F2F2F2"
-    }) : ""))));
+    })))));
   }) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));

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

@@ -28,7 +28,7 @@ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4
 exports.Title = Title;
 var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  font-weight: 500;\n  font-size: 2.22rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var BenchmarkContainerParent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex; \n  align-items: baseline;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n\n"])));
+var BenchmarkContainerParent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"])));
 exports.BenchmarkContainerParent = BenchmarkContainerParent;
-var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-top: 0;\n  margin-left: 1rem;\n  height: 0.9rem;\n  //margin: 0;\n"])));
+var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-top: 0;\n  margin-left: 1rem;\n  height: 0.9rem;\n"])));
 exports.BenchmarkContainer = BenchmarkContainer;

package/dist/stories/components/TotalBenchmarkBarchart.js

@@ -48,68 +48,12 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     heightFactor = _useState4[0],
     setHeightFactor = _useState4[1];
-
-  //const [formattedBarChartData, setFormattedBarChartData] = useState([]);
-
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    formattedBarChartData = _useState6[0],
+    setFormattedBarChartData = _useState6[1];
   var controlsContainerRef = (0, _react.useRef)();
-
-  // useEffect(() => {
-  //   let tempFormattedBarChartData = [];
-
-  //   const currencySign =
-  //     currency == true ? getCurrencySign(currencyType).toString() : "";
-
-  //   if (barChartData && barChartData.length === 2) {
-  //     tempFormattedBarChartData.push({
-  //       title1: barChartData[0].title,
-  //       value1: barChartData[0].value,
-  //       formattedValue1: currencySign.concat(
-  //         "",
-  //         getFormattedValue(barChartData[0].value),
-  //         "",
-  //         getFormattedUnits(barChartData[0].value)
-  //       ),
-
-  //       color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
-
-  //       title2: barChartData[1].title,
-  //       value2: barChartData[1].value,
-  //       formattedValue2: currencySign.concat(
-  //         "",
-  //         getFormattedValue(barChartData[1].value),
-  //         "",
-  //         getFormattedUnits(barChartData[1].value)
-  //       ),
-  //       color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF",
-  //     });
-
-  //     console.log("barChartData changed", barChartData);
-  //     setFormattedBarChartData(tempFormattedBarChartData);
-  //     console.log(
-  //       "tempFormattedBarChartData changed",
-  //       tempFormattedBarChartData
-  //     );
-  //   }
-  // }, [barChartData, currency, currencyType]);
-
   (0, _react.useEffect)(function () {
-    var offsetWidth = controlsContainerRef.current.offsetWidth;
-    setRootFont(getRootFont(offsetWidth));
-  }, [width]);
-  (0, _react.useEffect)(function () {
-    var offsetHeight = controlsContainerRef.current.offsetHeight;
-    var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
-    setHeightFactor(factor);
-  }, [height]);
-  var getRootFont = function getRootFont(width) {
-    var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
-    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
-    return fontRoot;
-  };
-  var getSizeFactor = function getSizeFactor() {
-    return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
-  };
-  var getFormattedBarChartData = function getFormattedBarChartData() {
     var tempFormattedBarChartData = [];
     var currencySign = currency == true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : "";
     if (barChartData && barChartData.length === 2) {
@@ -123,12 +67,27 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
         formattedValue2: currencySign.concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)),
         color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
       });
-
-      //console.log("barChartData changed", barChartData);
-      //setFormattedBarChartData(tempFormattedBarChartData);
+      console.log("barChartData changed", barChartData);
+      setFormattedBarChartData(tempFormattedBarChartData);
       console.log("tempFormattedBarChartData changed", tempFormattedBarChartData);
-      return tempFormattedBarChartData;
     }
+  }, [barChartData, currency, currencyType]);
+  (0, _react.useEffect)(function () {
+    var offsetWidth = controlsContainerRef.current.offsetWidth;
+    setRootFont(getRootFont(offsetWidth));
+  }, [width]);
+  (0, _react.useEffect)(function () {
+    var offsetHeight = controlsContainerRef.current.offsetHeight;
+    var factor = offsetHeight / DEFAULT_COMPONENT_HEIGHT;
+    setHeightFactor(factor);
+  }, [height]);
+  var getRootFont = function getRootFont(width) {
+    var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
+    var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
+    return fontRoot;
+  };
+  var getSizeFactor = function getSizeFactor() {
+    return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
   };
   return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ControlsContainer, {
     id: "ControlsContainer",
@@ -164,10 +123,10 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     backgroundColor: "#F2F2F2"
   })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
     id: "BarchartContainer"
-  }, getFormattedBarChartData().length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+  }, formattedBarChartData && formattedBarChartData.length === 1 && /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
     width: 224 * getSizeFactor(),
     height: 150 * heightFactor,
-    data: getFormattedBarChartData(),
+    data: formattedBarChartData,
     margin: {
       top: 40 * heightFactor,
       right: -25 * getSizeFactor(),
@@ -179,7 +138,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     vertical: false
   }), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
     dataKey: "value1",
-    fill: getFormattedBarChartData()[0].color1,
+    fill: formattedBarChartData[0].color1,
     name: "Actual",
     maxBarSize: 60 * getSizeFactor(),
     radius: [5, 5, 0, 0]
@@ -189,7 +148,7 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     fill: textColor
   })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
     dataKey: "value2",
-    fill: getFormattedBarChartData()[0].color2,
+    fill: formattedBarChartData[0].color2,
     name: "Base Line",
     maxBarSize: 60 * getSizeFactor(),
     radius: [5, 5, 0, 0],
@@ -198,13 +157,13 @@ var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
     dataKey: "formattedValue2",
     position: "top",
     fill: textColor
-  }))), getFormattedBarChartData().length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
+  }))), formattedBarChartData && formattedBarChartData.length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
     id: "BottomDetailsRowContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
     id: "BottomDetailsRowTitle1"
-  }, getFormattedBarChartData()[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
+  }, formattedBarChartData[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
     id: "BottomDetailsRowTitle2"
-  }, getFormattedBarChartData()[0].title2)) : "")) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
+  }, formattedBarChartData[0].title2)) : "")) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));
 };

package/package.json

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

package/dist/stories/components/InfoIcon.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.InfoIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var InfoIcon = function InfoIcon(_ref) {
-  var clicked = _ref.clicked;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: clicked ? "white" : "black",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "feather feather-info"
-  }, /*#__PURE__*/_react.default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/_react.default.createElement("line", {
-    x1: "12",
-    y1: "16",
-    x2: "12",
-    y2: "12"
-  }), /*#__PURE__*/_react.default.createElement("line", {
-    x1: "12",
-    y1: "8",
-    x2: "12",
-    y2: "8"
-  }));
-};
-exports.InfoIcon = InfoIcon;
-var _default = InfoIcon;
-exports.default = _default;