sag_components 1.0.998 → 1.0.999

package/dist/stories/components/BarChart.js

@@ -37,13 +37,25 @@ const BarChart = props => {
     referenceLinePoint,
     referenceLineColor,
     referenceLineDashed,
-    showCurrentCampaignStyle
+    showCurrentCampaignStyle,
+    isPercent
   } = props;
   const controlsContainerRef = (0, _react.useRef)();
-  const displayFormattedValue = value => {
-    if (!value) return '';
+  const areAllDatesEmpty = () => {
+    if (!barChartData || (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 0) return true;
+    return barChartData === null || barChartData === void 0 ? void 0 : barChartData.every(item => !item.date);
+  };
+  const displayFormattedValue = function (value) {
+    let showFullNumber = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (value === undefined || value === null) return '';
     let formattedValue = '';
-    formattedValue = !isDollar ? ''.concat('', value.toFixed(1)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
+    if (isPercent) {
+      formattedValue = ''.concat(value.toFixed(1), '%');
+    } else if (isDollar) {
+      formattedValue = ''.concat(showDollarSign ? '$' : '', !showFullNumber ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), !showFullNumber ? (0, _CommonFunctions.getFormattedUnits)(value) : '');
+    } else {
+      formattedValue = ''.concat(!showFullNumber ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), !showFullNumber ? (0, _CommonFunctions.getFormattedUnits)(value) : '');
+    }
     return formattedValue;
   };
 
@@ -58,7 +70,7 @@ const BarChart = props => {
     if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
     let currentTooltipValue = 0;
     if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.value) currentTooltipValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.value;
-    return /*#__PURE__*/_react.default.createElement(_BarChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChart.TooltipTitle, null, `${label}`), /*#__PURE__*/_react.default.createElement(_BarChart.TooltipLabel, null, `${displayFormattedValue(currentTooltipValue)}`));
+    return /*#__PURE__*/_react.default.createElement(_BarChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChart.TooltipTitle, null, `${label}`), /*#__PURE__*/_react.default.createElement(_BarChart.TooltipLabel, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -72,11 +84,11 @@ const BarChart = props => {
         return /*#__PURE__*/_react.default.createElement("g", {
           transform: `translate(${x},${y})`
         }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/_react.default.createElement("rect", {
-          x: -55 // Adjust this to position the background properly
+          x: -58 // Adjust this to position the background properly
           ,
-          y: 35 // Adjust this for vertical alignment with your text
+          y: 5 // Adjust this for vertical alignment with your text
           ,
-          width: 110 // Adjust width based on the text length
+          width: 116 // Adjust width based on the text length
           ,
           height: 22 // Adjust height based on font size
           ,
@@ -89,8 +101,8 @@ const BarChart = props => {
           fill: "#212121"
         }, /*#__PURE__*/_react.default.createElement(_BarChart.LabelBoldText, {
           textAnchor: "middle",
-          x: "0",
-          dy: "50",
+          x: 0,
+          dy: showCurrentCampaignStyle ? 20 : 50,
           fontSize: showCurrentCampaignStyle ? 12 : 16,
           fontWeight: showCurrentCampaignStyle ? 500 : 600
         }, payload.value), /*#__PURE__*/_react.default.createElement(_BarChart.LabelText, {
@@ -162,7 +174,7 @@ const BarChart = props => {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: 120,
+    height: areAllDatesEmpty() ? 50 : 120,
     stroke: "#D0D0D0",
     domain: [0, 'auto'],
     interval: 0
@@ -224,5 +236,6 @@ BarChart.defaultProps = {
   referenceLineColor: '#212121',
   referenceLineDashed: '5',
   showCurrentCampaignStyle: false,
-  currentBarColor: '#90CE9C'
+  currentBarColor: '#90CE9C',
+  isPercent: false
 };

package/dist/stories/components/EventInfo.js

@@ -0,0 +1,92 @@
+"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 _EventInfo = require("./EventInfo.style");
+const EventInfo = props => {
+  const {
+    title,
+    subTitle,
+    productsData,
+    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(_EventInfo.EventInfoMainContainer, {
+    id: "EventInfoMainContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
+    id: "EventInfoContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
+    id: "EventInfoTitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
+    id: "EventInfoTitle"
+  }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
+    id: "EventInfoSubTitle"
+  }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
+    id: "EventInfoSubTitle"
+  }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.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(_EventInfo.EventInfoContentContainer, {
+    id: "EventInfoContentContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
+    id: "ProductsTitle"
+  }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
+    id: "ProductContainer"
+  }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
+    id: "Product"
+  }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
+    id: "ProductButtonContainer",
+    background: "#F8CD00",
+    onClick: () => {
+      onSpotlightProductClick({
+        value: item.value,
+        label: item.label
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
+};
+var _default = exports.default = EventInfo;
+EventInfo.defaultProps = {
+  title: 'Products Variety',
+  subTitle: 'Product Name',
+  onSpotlightProductClick: () => {},
+  onClickBannersDropdown: () => {}
+};

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+const EventInfoMainContainer = exports.EventInfoMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  padding: 10px;\n  border-radius: 12px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
+const EventInfoContainer = exports.EventInfoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 10px;\n"])));
+const EventInfoTitleContainer = exports.EventInfoTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n  gap: 15px;\n"])));
+const EventInfoTitle = exports.EventInfoTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 20px;\n\n  margin: 0;\n"])));
+const EventInfoSubTitle = exports.EventInfoSubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #757171;\n  font-weight: 500;\n  font-size: 20px;\n  margin: 0;\n"])));
+const EventInfoContentContainer = exports.EventInfoContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 25px;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 10px;\n  padding: 10px 20px 20px 50px;\n"])));
+const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 10px 0;\n"])));
+const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  border-bottom: 1px solid #00000010;\n  width: 100%;\n  gap: 20px;\n"])));
+const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: 12px;\n"])));
+const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: ", ";\n  border-radius: 12px;\n  height: 25px;\n  padding: 0 15px;\n  user-select: none;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n  gap: 10px;\n"])), props => props.background || '#ffffff');

package/dist/stories/components/FilterButton.js

@@ -1,33 +1,29 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FilterButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _FilterButton = require("./FilterButton.style");
 var _FilterIcon = require("./icons/FilterIcon");
 const FilterButton = props => {
   const {
     color,
-    activeColor,
     height,
     buttonText,
     iconWidth,
     iconHeight,
     disabled,
-    openState,
     onButtonClick
   } = props;
-  const [activeState, setActiveState] = (0, _react.useState)(openState);
   const onClickHandler = event => {
     onButtonClick(event);
-    setActiveState(!activeState);
   };
   return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
     height: height,
-    color: activeState ? activeColor : color,
+    color: color,
     disabled: disabled,
     onClick: event => {
       onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
   }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
     width: iconWidth,
     height: iconHeight,
-    color: activeState ? activeColor : color
+    color: color
   }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
 };
 exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ FilterButton.defaultProps = {
   buttonText: 'Filter',
   height: '40px',
   color: '#212121',
-  activeColor: '#229E38',
   iconHeight: 12,
   iconWidth: 12,
-  openState: false,
   disabled: false,
   onButtonClick: () => {}
 };

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

@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
-const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid #B1B1B1;\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color);
 const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/package.json

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

package/dist/stories/components/DoublePanelDataRow.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DoublePanelDataRow = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DoublePanelDataRow = require("./DoublePanelDataRow.style");
-var _ArrowUpIcon = require("./icons/ArrowUpIcon");
-var _ArrowDownIcon = require("./icons/ArrowDownIcon");
-var _CommonFunctions = require("./CommonFunctions");
-/* eslint-disable no-restricted-globals */
-
-const DoublePanelDataRow = props => {
-  const {
-    width,
-    height,
-    data,
-    backgroundColor,
-    className,
-    customDataFormat,
-    showPercentChange
-  } = props;
-  const getArrowSign = arrowSign => {
-    if (!arrowSign) {
-      return '-';
-    }
-    if (arrowSign === 'up') {
-      return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
-        color: "#5FCC70",
-        value: 34 // TODO: when ready, replace with actual value
-      }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
-        width: 12,
-        height: 12
-      }), ' ', "(+34K)");
-    }
-    return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
-      color: "#D23630",
-      value: 66 // TODO: when ready, replace with actual value
-    }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
-      width: 12,
-      height: 12
-    }), ' ', "(-12K)");
-  };
-  return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.LinnerContainer, {
-    className: className,
-    backgroundColor: backgroundColor,
-    width: width,
-    height: height,
-    customDataFormat: customDataFormat
-  }, data.map(item => /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBox, {
-    className: "data-box-item"
-  }, item.title && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBoxTitle, {
-    className: "DataBoxTitle"
-  }, item.title), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItem, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, {
-    className: "DataBoxValue"
-  }, ''.concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemNoValue, null, "N/A")), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.ValueChange, null))));
-};
-exports.DoublePanelDataRow = DoublePanelDataRow;
-var _default = exports.default = DoublePanelDataRow;
-DoublePanelDataRow.defaultProps = {
-  className: '',
-  width: '100%',
-  height: 'auto',
-  data: [],
-  backgroundColor: '#FFFFFF',
-  customDataFormat: false,
-  showPercentChange: false
-};

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

@@ -1,66 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ValueChange = exports.PercentageChange = exports.LinnerContainer = exports.DataBoxTitle = exports.DataBox = exports.CellItemValueSign = exports.CellItemNoValue = exports.CellItem = exports.BigValue = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  display: grid;
-  gap: 48px 0;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: auto auto;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  background-color: ${props => props.backgroundColor};
-  padding: 50px 20px 20px;
-  box-sizing: border-box;
-`;
-const DataBox = exports.DataBox = _styledComponents.default.div`
-  height: 100%;
-  padding: 0 40px;
-  border-left: 1px solid #d0d0d0;
-  &:nth-child(1),
-  &:nth-child(6) {
-    border-left: none;
-    padding-left: 0;
-  }
-  &:nth-child(5),
-  &:nth-child(10) {
-    padding-right: 0;
-  }
-`;
-const CellItem = exports.CellItem = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-`;
-const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
-  font-size: 18px;
-  display: block;
-  margin: 0 0 12px;
-`;
-const BigValue = exports.BigValue = _styledComponents.default.span`
-  font-size: 40px;
-  font-weight: 500;
-  margin-right: 5px;
-`;
-const CellItemValueSign = exports.CellItemValueSign = _styledComponents.default.span`
-  font-size: 16px;
-  font-weight: 400;
-`;
-const ValueChange = exports.ValueChange = _styledComponents.default.span`
-  font-size: 16px;
-  font-weight: 400;
-`;
-const CellItemNoValue = exports.CellItemNoValue = _styledComponents.default.span`
-  font-size: 40px;
-  font-weight: 500;
-`;
-const PercentageChange = exports.PercentageChange = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  color: ${props => props.color};
-`;