sag_components 1.0.198 → 1.0.200

package/dist/stories/components/Datepicker.js

@@ -27,9 +27,7 @@ var Datepicker = function Datepicker(_ref) {
     shape = _ref.shape,
     _onChange = _ref.onChange,
     value = _ref.value,
-    disableClearable = _ref.disableClearable,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disableClearable = _ref.disableClearable;
   /**
    *  SAG Datepicker
    */
@@ -103,7 +101,6 @@ var Datepicker = function Datepicker(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
     value: valueState,
     clearable: true,
-    disabled: disabled,
     onChange: function onChange(newValue) {
       setvalueState(newValue);
       console.log("newValue onChange", newValue === null || newValue === void 0 ? void 0 : newValue.format("YYYY-MM-DD").toString());

package/dist/stories/components/Dropdown.js

@@ -61,9 +61,7 @@ var Dropdown = function Dropdown(_ref) {
     _ref$reset = _ref.reset,
     reset = _ref$reset === void 0 ? false : _ref$reset,
     _ref$disableClearable = _ref.disableClearable,
-    disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable;
   /**
    *  SAG Dropdown
    */
@@ -187,7 +185,6 @@ var Dropdown = function Dropdown(_ref) {
       onInputChange: function onInputChange(event, newInputValue) {
         onInputChangeHandler(event, newInputValue);
       },
-      disabled: disabled,
       disablePortal: true,
       disableClearable: disableClearable
       // value={defaultValue && !currentOption?.newValue ? defaultValue : currentOption?.newValue}
@@ -268,7 +265,6 @@ var Dropdown = function Dropdown(_ref) {
       limitTags: limitTagsOnMultiSelect,
       id: "checkboxes-tags",
       options: options,
-      disabled: disabled,
       disableCloseOnSelect: true,
       disableClearable: disableClearable,
       getOptionLabel: function getOptionLabel(option) {

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");
@@ -24,7 +23,6 @@ var _styles = require("@mui/material/styles");
  *  SAG TextField
  */
 var TextField = function TextField(_ref) {
-  var _React$createElement;
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "100%" : _ref$width,
     _ref$height = _ref.height,
@@ -41,6 +39,7 @@ var TextField = function TextField(_ref) {
     resetDefaultValue = _ref.resetDefaultValue,
     required = _ref.required,
     inputRef = _ref.inputRef,
+    ref = _ref.ref,
     _ref$allowedInput = _ref.allowedInput,
     allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
     onChange = _ref.onChange;
@@ -164,6 +163,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 +177,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,14 +190,18 @@ 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;

package/dist/stories/components/TitleDescription.js

@@ -16,7 +16,7 @@ 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", "infoButtonOnClick", "objectivesShowMoreOnClick", "viewCreativeOnClick", "downloadButtonOnClick", "width", "height", "textColor", "disabled"];
+var _excluded = ["showRetailerIcon", "data", "infoButtonOnClick", "objectivesShowMoreOnClick", "viewCreativeOnClick", "downloadButtonOnClick", "width", "height", "textColor"];
 /*TitleDescription*/
 var TitleDescription = function TitleDescription(_ref) {
   var _ref$showRetailerIcon = _ref.showRetailerIcon,
@@ -32,8 +32,6 @@ var TitleDescription = function TitleDescription(_ref) {
     height = _ref$height === void 0 ? "100%" : _ref$height,
     _ref$textColor = _ref.textColor,
     textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var getRetailerIcon = function getRetailerIcon(retailerName) {
     switch (retailerName) {
@@ -93,8 +91,7 @@ var TitleDescription = function TitleDescription(_ref) {
     id: "EventName"
   }, data.eventName, "   "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ViewCreativeContainer, {
     onClick: viewCreativeOnClick,
-    id: "ViewCreativeContainer",
-    disabled: disabled
+    id: "ViewCreativeContainer"
   }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
     width: "12",
     height: "12"
@@ -132,7 +129,6 @@ var TitleDescription = function TitleDescription(_ref) {
     id: "ObjectivesTitle"
   }, "Objectives:", "  "), data.objectivesDescription, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesShowMore, {
     id: "ObjectivesShowMore",
-    disabled: disabled,
     onClick: function onClick(event) {
       objectivesShowMoreOnClick({
         eventName: "objectivesShowMoreOnClick",

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

@@ -16,7 +16,7 @@ var MainContainer = _styledComponents.default.div(_templateObject || (_templateO
   return props.height;
 });
 exports.MainContainer = MainContainer;
-var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem 1rem 1rem 3rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
+var PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 1rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
 exports.PanelContainer = PanelContainer;
 var EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
 exports.EventNameAndViewCreativeContainer = EventNameAndViewCreativeContainer;
@@ -24,11 +24,7 @@ var EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateO
 exports.EventNameViewCreativeSubContainer = EventNameViewCreativeSubContainer;
 var EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 700;\n  font-size: 1.2rem;\n  margin: 0;\n"])));
 exports.EventName = EventName;
-var ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  border: 1px solid #ccc;\n  margin-left: 10px;\n  padding: 3px 10px;\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
-  return props.disabled ? "#B1B1B1" : "#212121";
-}, function (props) {
-  return !props.disabled ? "pointer" : "default";
-});
+var ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  border: 1px solid #ccc;\n  margin-left: 10px;\n  padding: 3px 10px;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
 exports.ViewCreativeContainer = ViewCreativeContainer;
 var ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: 0 5px;\n"])));
 exports.ViewCreativeTextField = ViewCreativeTextField;
@@ -36,7 +32,7 @@ var FilterValuesContainer = _styledComponents.default.div(_templateObject8 || (_
 exports.FilterValuesContainer = FilterValuesContainer;
 var FilterValue = _styledComponents.default.p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n"])));
 exports.FilterValue = FilterValue;
-var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
+var FieldsDelimiter = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["  \n  color: #ccc;\n  margin: 0;\n"])));
 exports.FieldsDelimiter = FieldsDelimiter;
 var Retailer = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
 exports.Retailer = Retailer;
@@ -50,13 +46,9 @@ var ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject
 exports.ObjectiesAndPeriodsContainer = ObjectiesAndPeriodsContainer;
 var ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.ObjectivesTitle = ObjectivesTitle;
-var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+var ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;  \n  \n"])));
 exports.ObjectivesDescription = ObjectivesDescription;
-var ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
-  return props.disabled ? "#B1B1B1" : "#1b30aa";
-}, function (props) {
-  return !props.disabled ? "pointer" : "default";
-});
+var ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
 exports.ObjectivesShowMore = ObjectivesShowMore;
 var BottonsContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 1.5rem;\n"])));
 exports.BottonsContainer = BottonsContainer;

package/dist/stories/components/TotalBenchmark.js

@@ -72,7 +72,7 @@ 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,
@@ -87,7 +87,7 @@ var TotalBenchmark = function TotalBenchmark(_ref) {
       linearGradientUnderAvarageColor: "#FDB1B1",
       underAvarageColor: "#FD5959",
       backgroundColor: "#F2F2F2"
-    }) : ""))));
+    })))));
   }) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
     noDataText: noDataText
   }));

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

@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
   return props.height;
 });
 exports.ControlsContainer = ControlsContainer;
-var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  border-radius: 12px;\n  /* width: 90%;\n  height: 40%; */\n  //justify-content: center;  \n  //align-items: flex-start;\n  background: #ffffff;\n  margin-bottom: 2rem;\n  padding: 0px 0.8rem;\n"])));
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  border-radius: 12px;\n  /* width: 90%;\n  height: 40%; */\n  //justify-content: center;  \n  //align-items: flex-start;\n  background: #ffffff;\n  margin-bottom: 1rem;\n  padding: 0px 0.8rem;\n"])));
 exports.Controls = Controls;
 var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  //display: flex;\n  //flex-direction: column;\n  width: 100%;\n"])));
 exports.TitleAndValueContainer = TitleAndValueContainer;

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

@@ -22,7 +22,7 @@ var Controls = _styledComponents.default.div(_templateObject2 || (_templateObjec
 exports.Controls = Controls;
 var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 14rem; */\n  font-weight: 600;\n  font-size: 1rem;\n   margin-bottom: 1rem;\n"])));
 exports.Title = Title;
-var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: baseline;\n  /* width: 14rem; */\n  height: 45%;\n"])));
+var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: baseline;\n  /* width: 14rem; */\n  height: 50%;\n"])));
 exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
 var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 0.1rem;\n  font-weight: 500;\n  font-size: 2.2rem;\n"])));
 exports.FormattedValue = FormattedValue;

package/dist/stories/components/TotalDoughnutChart.js

@@ -97,8 +97,8 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
     onMouseEnter: onPieEnterHandler
   }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
     data: legendData,
-    outerRadius: 37 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
-    innerRadius: 26 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
+    outerRadius: 35 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
+    innerRadius: 24 * (rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT),
     fill: "#8884d8",
     dataKey: "value"
   }, legendData.map(function (row, index) {

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

@@ -34,9 +34,9 @@ var CurrencySign = _styledComponents.default.div(_templateObject8 || (_templateO
 exports.CurrencySign = CurrencySign;
 var FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 2.22rem;\n"])));
 exports.FormattedValue = FormattedValue;
-var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 95%;\n  height: 37%;\n  margin-top: 1em; //   35px;\n  margin-bottom: 1em; // 35px;\n"])));
+var DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 90%;\n  height: 37%;\n  margin-top: 1em; //   35px;\n  margin-bottom: 1em; // 35px;\n"])));
 exports.DoughnutChartAndLegendContainer = DoughnutChartAndLegendContainer;
-var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 34%;\n  height: 100%;\n  min-width: 105px;\n  min-height: 105px;\n"])));
+var DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 34%;\n  height: 100%;\n  min-width: 96px;\n  min-height: 96px;\n"])));
 exports.DoughnutChart = DoughnutChart;
 var LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 66%;\n  padding-left: 10px;\n  flex-direction: column;\n  align-items: left;\n  justify-content: space-between;\n"])));
 exports.LegendContainer = LegendContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.198",
+  "version": "1.0.200",
   "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;