sag_components 1.0.86-7.8 → 1.0.86-7.9

package/dist/Button.test.js

@@ -6,7 +6,7 @@ var _react2 = require("@testing-library/react");
 var _Button = _interopRequireDefault(require("./stories/components/Button"));
 require("@testing-library/jest-dom");
 test('Button Check text', () => {
-  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "test",
     type: "primary",
     size: "small",
@@ -20,7 +20,7 @@ test('Button Check text', () => {
 test('Button Check type functionality: when "primary" type selected then background color must be specified as "rgb(146, 207, 23)" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -36,7 +36,7 @@ test('Button Check type functionality: when "primary" type selected then backgro
 test('Button Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "secondary",
     size: "small",
@@ -52,7 +52,7 @@ test('Button Check type functionality: when "secondary" type selected then backg
 test('Button Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -68,7 +68,7 @@ test('Button Check disabled functionality: when disabled prop is true, button te
 test('Button Check leftIcon functionality: when "Filter"  icons is specified as the leftIcon  props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -82,7 +82,7 @@ test('Button Check leftIcon functionality: when "Filter"  icons is specified as
 test('Button Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -96,7 +96,7 @@ test('Button Check rightIcon functionality: when "Exit" icons is specified as th
 test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -112,7 +112,7 @@ test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit
 test('Button Check small/medium functionality: when "small" the height must be "33px" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",
@@ -128,7 +128,7 @@ test('Button Check small/medium functionality: when "small" the height must be "
 test('Button Check small/medium functionality: when "medium" the height must be "45px" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "medium",
@@ -142,7 +142,7 @@ test('Button Check small/medium functionality: when "medium" the height must be
 test('Button Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button",
     type: "primary",
     size: "small",

package/dist/LinkButton.test.js

@@ -6,7 +6,7 @@ var _react2 = require("@testing-library/react");
 var _LinkButton = _interopRequireDefault(require("./stories/components/LinkButton"));
 require("@testing-library/jest-dom");
 test('LinkButton Check text', () => {
-  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "test",
     type: "secondary",
     size: "small",
@@ -18,7 +18,7 @@ test('LinkButton Check text', () => {
 test('LinkButton Check type functionality: when "primary" type selected then text color must be specified as "rgb(146, 207, 23)" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -32,7 +32,7 @@ test('LinkButton Check type functionality: when "primary" type selected then tex
 test('LinkButton Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "secondary",
     size: "small",
@@ -46,7 +46,7 @@ test('LinkButton Check type functionality: when "secondary" type selected then b
 test('LinkButton Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -60,7 +60,7 @@ test('LinkButton Check disabled functionality: when disabled prop is true, butto
 test('LinkButton Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -76,7 +76,7 @@ test('LinkButton Check leftIcon and rightIcon functionality: when "Filter" and "
 test('LinkButton Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -89,7 +89,7 @@ test('LinkButton Check rightIcon functionality: when "Exit" icons is specified a
 test('LinkButton Check leftIcon  functionality: when "Filter" icons is specified as the leftIcon props, it should be rendered on the screen', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -102,7 +102,7 @@ test('LinkButton Check leftIcon  functionality: when "Filter" icons is specified
 test('LinkButton Check small/medium functionality: when "small" the font-size must be "14px" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",
@@ -116,7 +116,7 @@ test('LinkButton Check small/medium functionality: when "small" the font-size mu
 test('LinkButton Check small/medium functionality: when "medium" the font-size must be "16px" ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "medium",
@@ -130,7 +130,7 @@ test('LinkButton Check small/medium functionality: when "medium" the font-size m
 test('LinkButton Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
   const {
     container
-  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+  } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     text: "LinkButton",
     type: "primary",
     size: "small",

package/dist/SingleBar.test.js

@@ -45,7 +45,7 @@ const legendData1 = [{
   title: 'Incremental Sales ROI'
 }];
 test('SingleBarLineCharts Check if title data is rendered', async () => {
-  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
     width: "100%",
     height: "100%",
     title: "Total Cost Sales",
@@ -82,7 +82,7 @@ test('SingleBarLineCharts Check if title data is rendered', async () => {
   expect(total2Element).toBeInTheDocument();
 });
 test('SingleBarLineCharts Check if legend data is rendered', async () => {
-  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_SingleBarLineCharts.default, {
     width: "100%",
     height: "100%",
     title: "Total Cost Sales",

package/dist/index.js

@@ -6,7 +6,7 @@ var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
 var _App = _interopRequireDefault(require("./App"));
 const root = _client.default.createRoot(document.getElementById('root'));
-root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
+root.render(/*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

package/dist/stories/components/BannerEventBox/BannerEventBox.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.BannerEventBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BannerEventBox = require("./BannerEventBox.style");
-var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
-var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
-var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
-var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
-var _HannafordIcon_new = require("./icons/HannafordIcon_new");
-var _Button = require("./Button");
+var _FoodLionNewIcon = require("../../icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("../../icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("../../icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("../../icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("../../icons/HannafordIcon_new");
+var _Button = require("../Button/Button");
 const BannerEventBox = props => {
   const {
     width,

package/dist/stories/components/BannerEventBox.js

@@ -12,7 +12,6 @@ var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
 var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
 var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
 var _HannafordIcon_new = require("./icons/HannafordIcon_new");
-var _Button = require("./Button");
 const BannerEventBox = props => {
   const {
     width,
@@ -21,36 +20,34 @@ const BannerEventBox = props => {
     description,
     dates,
     data,
-    onInfoClick,
-    buttonText,
-    disabled
+    onInfoClick
   } = props;
   const formatedBanners = () => {
     switch (banner) {
-      case "Stop&Shop":
+      case 'Stop&Shop':
         return {
           icon: /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null),
-          name: "Stop&Shop"
+          name: 'Stop&Shop'
         };
-      case "Food Lion":
+      case 'Food Lion':
         return {
           icon: /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null),
-          name: "Food Lion"
+          name: 'Food Lion'
         };
-      case "Giant Food":
+      case 'Giant Food':
         return {
           icon: /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null),
-          name: "Giant Food"
+          name: 'Giant Food'
         };
-      case "The Giant Company":
+      case 'The Giant Company':
         return {
           icon: /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null),
-          name: "The Giant Company"
+          name: 'The Giant Company'
         };
-      case "Hannaford":
+      case 'Hannaford':
         return {
           icon: /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null),
-          name: "Hannaford"
+          name: 'Hannaford'
         };
       default:
         return null;
@@ -62,36 +59,29 @@ const BannerEventBox = props => {
   return /*#__PURE__*/_react.default.createElement(_BannerEventBox.MainContainer, {
     height: height,
     width: width
-  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.TitleWrapper, null, formatedBanners(banner).icon, "|", /*#__PURE__*/_react.default.createElement(_BannerEventBox.CardTitle, null, formatedBanners(banner).name)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Description"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, description)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Dates:"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, dates.join(" - "))), /*#__PURE__*/_react.default.createElement(_BannerEventBox.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    leftIcon: "Eye",
-    onClick: () => onInfoClickHandler(banner),
-    text: buttonText,
-    type: "secondary",
-    disabled: disabled
-  })), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.TitleWrapper, null, formatedBanners(banner).icon, "|", /*#__PURE__*/_react.default.createElement(_BannerEventBox.CardTitle, null, formatedBanners(banner).name)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Description"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, description)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Dates:"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, dates.join(' - '))), /*#__PURE__*/_react.default.createElement(_BannerEventBox.MoreInfo, {
+    onClick: () => onInfoClickHandler(banner)
+  }, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
     key: item.name
   }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, null, item.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, item.items)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null)))));
 };
 exports.BannerEventBox = BannerEventBox;
 var _default = exports.default = BannerEventBox;
 BannerEventBox.defaultProps = {
-  width: "auto",
-  height: "auto",
-  banner: "Food Lion",
-  description: "Dreft Portable Pretreater Pen",
-  dates: ["2021-06-01", "2021-06-30"],
-  buttonText: "View Creative",
+  width: 'auto',
+  height: 'auto',
+  banner: 'Food Lion',
+  description: 'Dreft Portable Pretreater Pen',
+  dates: ['2021-06-01', '2021-06-30'],
   data: [{
-    name: "Supplier",
+    name: 'Supplier',
     items: 7
   }, {
-    name: "Brands",
+    name: 'Brands',
     items: 8
   }, {
-    name: "Product Lines",
+    name: 'Product Lines',
     items: 9
   }],
-  onInfoClick: () => {},
-  disabled: false,
-  buttonText: "View creative"
+  onInfoClick: () => {}
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleWrapper = exports.Text = exports.Seperator = exports.MoreInfo = exports.MainContainer = exports.KeyBlock = exports.Key = exports.Headline = exports.DetailsWrapper = exports.Count = exports.CardTitle = exports.ButtonWrap = exports.Block = void 0;
+exports.TitleWrapper = exports.Text = exports.Seperator = exports.MoreInfo = exports.MainContainer = exports.KeyBlock = exports.Key = exports.Headline = exports.DetailsWrapper = exports.Count = exports.CardTitle = exports.Block = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const MainContainer = exports.MainContainer = _styledComponents.default.div`
     width: ${props => props.width};
@@ -71,8 +71,4 @@ const Count = exports.Count = _styledComponents.default.span`
 `;
 const Seperator = exports.Seperator = _styledComponents.default.div`
     border-right: 1px solid #F2F2F2;
-`;
-const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div`
-    display: flex;
-    justify-content: flex-start;
 `;

package/dist/stories/components/BannerEventBoxList.js

@@ -34,8 +34,7 @@ const BannerEventBoxList = props => {
     linkText,
     disableToggle,
     bannerWidth,
-    loaderColor,
-    showDraft
+    loaderColor
   } = props;
   const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
   const handleToggle = () => {
@@ -93,10 +92,8 @@ const BannerEventBoxList = props => {
     description: item === null || item === void 0 ? void 0 : item.description,
     dates: item === null || item === void 0 ? void 0 : item.dates,
     data: item === null || item === void 0 ? void 0 : item.data,
-    onInfoClick: () => retailerFile(item === null || item === void 0 ? void 0 : item.banner),
-    disabled: item === null || item === void 0 ? void 0 : item.disabled,
-    buttonText: item.buttonText
-  })), showDraft && /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.DraftTag, null, "DRAFT")) : children));
+    onInfoClick: () => retailerFile(item === null || item === void 0 ? void 0 : item.banner)
+  }))) : children));
 };
 BannerEventBoxList.defaultProps = {
   className: '',
@@ -147,7 +144,6 @@ BannerEventBoxList.defaultProps = {
   disableToggle: true,
   children: null,
   bannerWidth: 'auto',
-  loaderColor: '#212121',
-  showDraft: false
+  loaderColor: '#212121'
 };
 var _default = exports.default = BannerEventBoxList;

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

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.LoaderWrapper = exports.Loader = exports.DraftTag = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = exports.BannerIcon = void 0;
+exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.LoaderWrapper = exports.Loader = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = exports.BannerIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
@@ -179,11 +179,4 @@ const MainContainer = exports.MainContainer = _styledComponents.default.div`
   display: flex;
   gap: 20px;
   padding: 20px 0 4px;
-`;
-const DraftTag = exports.DraftTag = _styledComponents.default.div`
-  color: #E41111;
-  border: 2px solid #E41111;
-  font-size: 20px;
-  padding: 6px 18px;
-  height: fit-content;
 `;

package/dist/stories/components/BarChart.js

@@ -24,7 +24,6 @@ const BarChart = props => {
     title,
     barChartData,
     barSize,
-    barFontSizeValue,
     isDollar,
     width,
     height,
@@ -104,7 +103,7 @@ const BarChart = props => {
       y: y,
       dy: -8,
       fill: stroke,
-      fontSize: barFontSizeValue,
+      fontSize: "0.6em",
       textAnchor: "middle"
     }, displayFormattedValue(value));
   };
@@ -181,7 +180,6 @@ BarChart.defaultProps = {
   width: '100%',
   height: '100%',
   barSize: 60,
-  barFontSizeValue: '0.6em',
   barChartColor: '#BD9EFF',
   showDollarSign: true,
   isDollar: true,

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.LegendContainer = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
+var _PerformanceAnalyticsLegend = require("../PerformanceAnalyticsLegend/PerformanceAnalyticsLegend");
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
   width: ${props => props.width};

package/dist/stories/components/BarChartTwoRows.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _recharts = require("recharts");
 var _CommonFunctions = require("./CommonFunctions");
 var _BarChartTwoRows = require("./BarChartTwoRows.style");
+var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
 /* eslint-disable react/prop-types */
 /* eslint-disable no-shadow */
 /* eslint-disable react/no-unstable-nested-components */
@@ -20,28 +22,26 @@ const BarChartTwoRows = props => {
   const {
     className,
     title,
+    barChartData,
+    barSize,
+    isDollar,
     width,
     height,
-    barChartHeight,
-    barSize,
-    barFontSizeValue,
-    barChartData,
     barChartColorFirst,
     barChartColorSecond,
+    showLegend,
+    legendData,
     showDollarSign,
-    isDollar,
     showReferenceLine,
     referenceLinePoint,
     referenceLineColor,
     referenceLineDashed,
     lowerValueLabel,
-    highValueLabel,
-    showLegend,
-    legendData
+    highValueLabel
   } = props;
   const controlsContainerRef = (0, _react.useRef)();
   const displayFormattedValue = value => {
-    if (!value) return 'N/A';
+    if (!value) return '';
     let formattedValue = '';
     formattedValue = !isDollar ? ''.concat('', value.toFixed(1)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
     return formattedValue;
@@ -83,18 +83,13 @@ const BarChartTwoRows = props => {
         }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelBoldText, {
           textAnchor: "middle",
           x: "0",
-          dy: "30",
+          dy: "50",
           fontSize: 16,
           fontWeight: 600
-        }, payload.value)), /*#__PURE__*/_react.default.createElement("text", {
-          x: 0,
-          y: 0,
-          dy: 16,
-          fill: "#212121"
-        }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelText, {
+        }, payload.value), /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelText, {
           textAnchor: "middle",
           x: "0",
-          dy: "50",
+          dy: "30",
           fontSize: 14,
           fontWeight: 400
         }, retailerData[0].date)));
@@ -115,7 +110,7 @@ const BarChartTwoRows = props => {
       y: y,
       dy: -8,
       fill: stroke,
-      fontSize: barFontSizeValue,
+      fontSize: "0.6em",
       textAnchor: "middle"
     }, displayFormattedValue(value));
   };
@@ -124,20 +119,18 @@ const BarChartTwoRows = props => {
     height: height,
     width: width,
     ref: controlsContainerRef
-  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, {
-    className: "Controls"
-  }, title !== '' && /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, null, title), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    height: barChartHeight
+  }, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, null, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, null, title), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
   }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
     width: width,
     height: height,
     data: barChartData,
-    maxBarSize: 60,
     margin: {
       top: 20,
       right: 0,
-      left: 0,
-      bottom: 20
+      bottom: 0,
+      left: -5
     }
   }, showReferenceLine && /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
     y: referenceLinePoint,
@@ -147,9 +140,9 @@ const BarChartTwoRows = props => {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 80,
-    interval: 0,
-    stroke: "#D0D0D0"
+    height: 120,
+    stroke: "#D0D0D0",
+    interval: 0
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
   }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
@@ -167,7 +160,7 @@ const BarChartTwoRows = props => {
   }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
     dataKey: "value",
     content: CustomizedLabel
-  })))), showLegend && /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LegendContainer, {
+  })))), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
     legendData: legendData
   })));
 };
@@ -175,27 +168,6 @@ exports.BarChartTwoRows = BarChartTwoRows;
 var _default = exports.default = BarChartTwoRows;
 BarChartTwoRows.defaultProps = {
   title: 'String',
-  width: '100%',
-  height: '100%',
-  barChartHeight: 250,
-  barSize: 60,
-  barFontSizeValue: '0.6em',
-  barChartColorFirst: '#BD9EFF',
-  barChartColorSecond: '#0b00aaF',
-  showDollarSign: true,
-  isDollar: true,
-  showReferenceLine: false,
-  referenceLinePoint: 0,
-  referenceLineColor: '#212121',
-  referenceLineDashed: '5',
-  lowerValueLabel: 'Lower Value:',
-  highValueLabel: 'High Value:',
-  showLegend: true,
-  legendData: [{
-    title: 'Incremental Sales',
-    iconType: ICON_TYPE_SQUARE,
-    iconColor: '#BD9EFF'
-  }],
   barChartData: [{
     title: 'Food Lion',
     date: '15.01.24-31.01.24',
@@ -216,5 +188,24 @@ BarChartTwoRows.defaultProps = {
     title: 'Stop&Shop',
     date: '15.01.24-31.01.24',
     value: 415317
-  }]
+  }],
+  width: '100%',
+  height: '100%',
+  barSize: 60,
+  barChartColorFirst: '#BD9EFF',
+  barChartColorSecond: '#0b00aaF',
+  showDollarSign: true,
+  isDollar: true,
+  showLegend: true,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: ICON_TYPE_SQUARE,
+    iconColor: '#BD9EFF'
+  }],
+  showReferenceLine: false,
+  referenceLinePoint: 0,
+  referenceLineColor: '#212121',
+  referenceLineDashed: '5',
+  lowerValueLabel: 'Lower Value:',
+  highValueLabel: 'High Value:'
 };