sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/PopupCharts.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TotalDoughnutChart = require("./TotalDoughnutChart");
+var _BarChartsByWeeks = require("./BarChartsByWeeks");
+var _TotalHorizontalCharts = require("./TotalHorizontalCharts");
+var _MarketShareDescription = require("./MarketShareDescription");
+var _SalesAndROI = require("./SalesAndROI");
+var _CloseXIcon = require("./icons/CloseXIcon");
+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 _PopupCharts = require("./PopupCharts.style");
+const PopupCharts = props => {
+  const {
+    title,
+    chartType,
+    popupChartsItemsData,
+    isPopupChartsOpen,
+    width,
+    height,
+    subtitleTextColor,
+    onCloseClick
+  } = props;
+  const [IsPopupChartsOpen, setIsPopupChartsOpen] = (0, _react.useState)(isPopupChartsOpen);
+  const divRef = (0, _react.useRef)(null);
+  const [divHeight, setDivHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (divRef.current) {
+      const {
+        top,
+        bottom
+      } = divRef.current.getBoundingClientRect();
+      const newHeight = bottom - top;
+      setDivHeight(newHeight);
+    }
+  }, [height]);
+  (0, _react.useEffect)(() => {
+    setIsPopupChartsOpen(isPopupChartsOpen);
+  }, [isPopupChartsOpen]);
+  const closePopupCharts = e => {
+    setIsPopupChartsOpen(false);
+    onCloseClick(e);
+  };
+  const displayRetailerIcon = retailer => {
+    switch (retailer) {
+      case 'Food Lion':
+        return /*#__PURE__*/_react.default.createElement(_FoodLionNewIcon.FoodLionNewIcon, null);
+      case 'Hannaford':
+        return /*#__PURE__*/_react.default.createElement(_HannafordIcon_new.HannafordNewIcon, null);
+      case 'Stop&Shop':
+        return /*#__PURE__*/_react.default.createElement(_StopAndShopNewIcon.StopAndShopNewIcon, null);
+      case 'The Giant Company':
+        return /*#__PURE__*/_react.default.createElement(_TheGiantCompanyNewIcon.TheGiantCompanyIcon, null);
+      case 'Giant Food':
+        return /*#__PURE__*/_react.default.createElement(_GiantFoodIcon_new.GiantFoodNewIcon, null);
+      default:
+        return '';
+    }
+  };
+  const displayDoughnutChart = rowsData => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TotalDoughnutChart, {
+    currencySign: true,
+    dotCut: true,
+    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    height: "270px",
+    width: "100%",
+    itemsValuesSeparateLine: false,
+    isPercent: true
+  });
+  const displayBarChartsByWeeks = (rowsData, showTwoBars) => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarChartsByWeeks, {
+    showTwoBars: showTwoBars,
+    headerValueTopTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueTopTitle,
+    headerValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValue,
+    headerValueBottomTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueBottomTitle,
+    HeaderValueIsPercent: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue,
+    legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
+    showLegend: rowsData === null || rowsData === void 0 ? void 0 : rowsData.showLegend,
+    barChartColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartColor,
+    barChartSecondColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartSecondColor,
+    barChartData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartData,
+    endWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.endWeekRange,
+    startWeekRange: rowsData === null || rowsData === void 0 ? void 0 : rowsData.startWeekRange,
+    title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
+    tooltipTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipTitle,
+    tooltipSecondTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.tooltipSecondTitle,
+    height: "240px",
+    width: "100%",
+    xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor,
+    isPercentValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue
+  });
+  const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
+    currencySign: true,
+    dotCut: true,
+    chartsData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.chartsData,
+    noDataText: rowsData.noDataText,
+    title: rowsData.title,
+    value: rowsData.value,
+    showOutgoingBanner: false,
+    height: "240px",
+    width: "100%"
+  });
+  const displayMarketShareDescription = rowsData => {
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MarketShareDescription, {
+      marketShareData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.marketShareData,
+      height: "240px",
+      width: "100%",
+      iconColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.iconColor // "#229E38"
+    });
+    return content;
+  };
+  const displaySalesAndROI = rowsData => {
+    const content = /*#__PURE__*/_react.default.createElement(_SalesAndROI.SalesAndROI, {
+      title: rowsData === null || rowsData === void 0 ? void 0 : rowsData.title,
+      dotCut: rowsData === null || rowsData === void 0 ? void 0 : rowsData.dotCut,
+      currencySign: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencySign,
+      currencyType: rowsData === null || rowsData === void 0 ? void 0 : rowsData.currencyType,
+      salesData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.salesData,
+      noDataText: rowsData === null || rowsData === void 0 ? void 0 : rowsData.noDataText,
+      showBanner: false,
+      showBorderShadow: false,
+      height: "280px",
+      width: "100%"
+    });
+    return content;
+  };
+  const displayChart = item => {
+    var _item$rowsData, _item$rowsData2, _item$rowsData3, _item$rowsData4, _item$rowsData5, _item$rowsData6;
+    let content;
+    switch (chartType) {
+      case 'TotalDoughnutChart':
+        content = displayDoughnutChart((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.TotalDoughnutChartDetails);
+        break;
+      case 'TotalHorizontalCharts':
+        content = displayTotalHorizontalCharts((_item$rowsData2 = item.rowsData) === null || _item$rowsData2 === void 0 ? void 0 : _item$rowsData2.TotalHorizontalChartsDetails);
+        break;
+      case 'BarChartsByWeeks':
+        content = displayBarChartsByWeeks((_item$rowsData3 = item.rowsData) === null || _item$rowsData3 === void 0 ? void 0 : _item$rowsData3.BarChartsByWeeksDetails, false);
+        break;
+      case 'BarChartsByWeeksTwoBars':
+        content = displayBarChartsByWeeks((_item$rowsData4 = item.rowsData) === null || _item$rowsData4 === void 0 ? void 0 : _item$rowsData4.BarChartsByWeeksDetails, true);
+        break;
+      case 'MarketShareDescription':
+        content = displayMarketShareDescription((_item$rowsData5 = item.rowsData) === null || _item$rowsData5 === void 0 ? void 0 : _item$rowsData5.MarketShareDescriptionDetails);
+        break;
+      case 'SalesAndROI':
+        content = displaySalesAndROI((_item$rowsData6 = item.rowsData) === null || _item$rowsData6 === void 0 ? void 0 : _item$rowsData6.SalesAndROIDetails);
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", null, content);
+  };
+  const displayChartItem = item => /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemMainContainer, {
+    id: "ChartItemMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemContainer, {
+    id: "ChartItemContainer",
+    style: {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemIconContainer, {
+    id: "ChartItemIconContainer"
+  }, displayRetailerIcon(item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartItemTitle, {
+    id: "ChartItemTitle",
+    subtitleTextColor: subtitleTextColor
+  }, item.title)), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartContentContainer, {
+    id: "ChartContentContainer"
+  }, displayChart(item)));
+  return /*#__PURE__*/_react.default.createElement(_PopupCharts.MainContainer, {
+    id: "MainContainer"
+  }, IsPopupChartsOpen && /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalOverlay, {
+    id: "ModalOverlay",
+    className: "modal-overlay"
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.ModalContent, {
+    id: "ModalContent",
+    ref: divRef,
+    className: "modal-content",
+    height: height,
+    width: width,
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_PopupCharts.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
+    onClick: e => closePopupCharts(e)
+  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartsContainer, {
+    id: "ChartsContainer",
+    maxHeight: divHeight ? (divHeight - 110).toString().concat('', 'px') : null,
+    height: (popupChartsItemsData === null || popupChartsItemsData === void 0 ? void 0 : popupChartsItemsData.length) < 4 ? '45%' : '100%'
+  }, popupChartsItemsData.map(item => displayChartItem(item))))));
+};
+var _default = exports.default = PopupCharts;
+PopupCharts.defaultProps = {
+  title: 'Switching Pattern',
+  chartType: 'TotalDoughnutChart',
+  isPopupChartsOpen: true,
+  popupChartsItemsData: [{
+    title: 'Item 1',
+    chartType: 'TotalDoughnutChart',
+    value: 100,
+    legendData: [{
+      color: '#FF0000',
+      name: 'Red',
+      value: 50
+    }, {
+      color: '#00FF00',
+      name: 'Green',
+      value: 30
+    }, {
+      color: '#0000FF',
+      name: 'Blue',
+      value: 20
+    }],
+    noDataText: 'No data available'
+  }, {
+    title: 'Item 2',
+    chartType: 'TotalHorizontalCharts',
+    value: 200,
+    chartsData: [{
+      label: 'Label 1',
+      value: 50
+    }, {
+      label: 'Label 2',
+      value: 100
+    }, {
+      label: 'Label 3',
+      value: 150
+    }],
+    noDataText: 'No data available'
+  }
+  // Add more items as needed
+  ],
+  width: '1700px',
+  height: '800px',
+  onCloseClick: () => {},
+  subtitleTextColor: '#7E7E7E'
+};

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.CloseXIconContainer = exports.ChartsContainer = exports.ChartItemTitle = exports.ChartItemMainContainer = exports.ChartItemIconContainer = exports.ChartItemContainer = exports.ChartContentContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const scrollableStyles = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
+const MainContainer = exports.MainContainer = _styledComponents.default.div``;
+const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div`
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ModalContent = exports.ModalContent = _styledComponents.default.div`  
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  background-color: #fefefe;
+  padding: 20px 30px 20px 40px;
+  border: 1px solid #888;
+  border-radius: 10px;
+  height: ${props => props.height};
+  width: ${props => props.width};
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+`;
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 10px 0;
+  margin: 0;
+  border-bottom: 1px solid #b1b1b1;
+`;
+const Title = exports.Title = _styledComponents.default.p`
+  font-weight: 400;
+  font-size: 24px;
+  margin: 0;
+`;
+const ChartsContainer = exports.ChartsContainer = _styledComponents.default.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3 columns */
+  flex-wrap: wrap;  
+  overflow-y: auto;
+  ${scrollableStyles}
+  max-height:  ${props => props.maxHeight};
+  height: ${props => props.height};
+  padding: 10px 0 0 0;
+`;
+const ChartItemMainContainer = exports.ChartItemMainContainer = _styledComponents.default.div`
+ // display: flex;
+  margin: 10px 10px 10px 10px;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  padding-right: 10px;
+  
+`;
+const ChartItemContainer = exports.ChartItemContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 20px 10px;
+`;
+const ChartItemTitle = exports.ChartItemTitle = _styledComponents.default.h3`
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 10px;
+  color: ${props => props.subtitleTextColor};
+`;
+const ChartItemIconContainer = exports.ChartItemIconContainer = _styledComponents.default.h3`
+  margin: 0 0 0 10px;
+`;
+const ChartContentContainer = exports.ChartContentContainer = _styledComponents.default.div`
+  font-weight: 500;
+  font-size: 14px;
+  margin: 0;
+  border-radius: 12px;
+`;
+const CloseXIconContainer = exports.CloseXIconContainer = _styledComponents.default.div`
+  display: block;
+  margin: 0;
+  cursor: pointer;
+`;

package/dist/stories/components/ProductsVariety.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
+var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
+var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
+var _BannersDropdown = require("./BannersDropdown");
+var _ProductsVariety = require("./ProductsVariety.style");
+const ProductsVariety = props => {
+  const {
+    title,
+    subTitle,
+    productsData,
+    showBannersDropdown,
+    onSpotlightProductClick,
+    onClickBannersDropdown
+  } = props;
+  const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
+  const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
+    banners: [{
+      checked: true,
+      name: 'StopAndShop'
+    }, {
+      checked: true,
+      name: 'FoodLion'
+    }, {
+      checked: true,
+      name: 'GiantFood'
+    }, {
+      checked: true,
+      name: 'TheGiantCompany'
+    }, {
+      checked: true,
+      name: 'Hannaford'
+    }],
+    onClick: banners => {
+      onClickBannersDropdown({
+        banners
+      });
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyMainContainer, {
+    id: "ProductsVarietyMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContainer, {
+    id: "ProductsVarietyContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitleContainer, {
+    id: "ProductsVarietyTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyTitle, {
+    id: "ProductsVarietyTitle"
+  }, title), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
+    id: "ProductsVarietySubTitle"
+  }, "|"), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietySubTitle, {
+    id: "ProductsVarietySubTitle"
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), showBannersDropdown && displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    onClick: () => {
+      setIsProductsListOpen(!IsProductsListOpen);
+    }
+  }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
+    color: "#212121"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    color: "#212121"
+  }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsVarietyContentContainer, {
+    id: "ProductsVarietyContentContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductsTitle, {
+    id: "ProductsTitle"
+  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductContainer, {
+    id: "ProductContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ProductsVariety.Product, {
+    id: "Product"
+  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_ProductsVariety.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    background: "#F8CD00",
+    onClick: () => {
+      onSpotlightProductClick({
+        value: item.value,
+        label: item.label
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
+};
+var _default = exports.default = ProductsVariety;
+ProductsVariety.defaultProps = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  showBannersDropdown: true,
+  onSpotlightProductClick: () => {},
+  onClickBannersDropdown: () => {}
+};

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductsVarietyTitleContainer = exports.ProductsVarietyTitle = exports.ProductsVarietySubTitle = exports.ProductsVarietyMainContainer = exports.ProductsVarietyContentContainer = exports.ProductsVarietyContainer = exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const ProductsVarietyMainContainer = exports.ProductsVarietyMainContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  position: relative;
+  margin: 0;
+  padding: 10px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+`;
+const ProductsVarietyContainer = exports.ProductsVarietyContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 10px;
+`;
+const ProductsVarietyTitleContainer = exports.ProductsVarietyTitleContainer = _styledComponents.default.div`
+  font-size: 20px;
+  line-height: 25px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px;
+  gap: 15px;
+`;
+const ProductsVarietyTitle = exports.ProductsVarietyTitle = _styledComponents.default.h3`
+  font-weight: 500;
+  font-size: 20px;
+  margin: 0;
+`;
+const ProductsVarietySubTitle = exports.ProductsVarietySubTitle = _styledComponents.default.h3`
+  color: #757171;
+  font-weight: 500;
+  font-size: 20px;
+  margin: 0;
+`;
+const ProductsVarietyContentContainer = exports.ProductsVarietyContentContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 10px;
+  padding: 10px 20px 20px 50px;
+  font-size: 20px;
+  line-height: 25px;
+`;
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3`
+  font-weight: 600;
+  font-size: 14px;
+  margin: 10px 0;
+`;
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1px solid #00000010;
+  width: 100%;
+  gap: 20px;
+`;
+const Product = exports.Product = _styledComponents.default.h3`
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: 12px;
+`;
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  height: 25px;
+  padding: 0 15px;
+  user-select: none;
+  border-radius: 12px;
+  background: ${props => props.background || '#ffffff'};
+  &:hover {
+    background-color: #f0f0f0;
+    cursor: pointer;
+  }
+`;

package/dist/stories/components/ProgressBar.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ProgressBar = require("./ProgressBar.style");
+const ProgressBar = props => {
+  const {
+    progressPercent,
+    refreshInterval,
+    height,
+    width,
+    color
+  } = props;
+  const [progress, setProgress] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const timer = setInterval(() => {
+      setProgress(currentProgress => {
+        const newProgress = currentProgress + 1;
+        if (newProgress > 100) {
+          clearInterval(timer);
+          return 100;
+        }
+        return newProgress;
+      });
+    }, refreshInterval);
+    return () => clearInterval(timer);
+  }, [progressPercent, refreshInterval]);
+  (0, _react.useEffect)(() => {
+    setProgress(progressPercent);
+  }, [progressPercent]);
+  return /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarContainer, {
+    className: "ProgressBarContainer",
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBarFiller, {
+    className: "ProgressBarFiller",
+    color: color,
+    progress: progress
+  }));
+};
+var _default = exports.default = ProgressBar;
+ProgressBar.defaultProps = {
+  progressPercent: 0,
+  refreshInterval: 100,
+  width: '100%',
+  height: '9px',
+  color: '#066768'
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBarFiller = exports.ProgressBarContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+// Styled-components for the progress container and the filler
+const ProgressBarContainer = exports.ProgressBarContainer = _styledComponents.default.div`  
+  width: ${props => props.width};
+  background-color: #F2F2F2;
+  border-radius: 12px;
+  height:  ${props => props.height};
+  margin: 5px 0;  
+`;
+const ProgressBarFiller = exports.ProgressBarFiller = _styledComponents.default.div`
+  background-color: ${props => props.color};
+  height: 100%;
+  text-align: center;
+  border-radius: 12px;
+  transition: width 0.5s ease-in-out;
+  width: ${props => props.progress}%;
+`;