sag_components 1.0.726 → 1.0.727

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/stories/components/FilterButton.js +10 -4
  2. package/dist/stories/components/FilterButton.style.js +1 -1
  3. package/dist/stories/components/TotalDoughnutChart.js +9 -34
  4. package/package.json +1 -1
  5. package/dist/stories/components/EventInfo.js +0 -92
  6. package/dist/stories/components/EventInfo.style.js +0 -20
package/dist/stories/components/FilterButton.js CHANGED
@@ -1,29 +1,33 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.FilterButton = void 0;
8
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = _interopRequireWildcard(require("react"));
9
9
  var _FilterButton = require("./FilterButton.style");
10
10
  var _FilterIcon = require("./icons/FilterIcon");
11
11
  const FilterButton = props => {
12
12
  const {
13
13
  color,
14
+ activeColor,
14
15
  height,
15
16
  buttonText,
16
17
  iconWidth,
17
18
  iconHeight,
18
19
  disabled,
20
+ openState,
19
21
  onButtonClick
20
22
  } = props;
23
+ const [activeState, setActiveState] = (0, _react.useState)(openState);
21
24
  const onClickHandler = event => {
22
25
  onButtonClick(event);
26
+ setActiveState(!activeState);
23
27
  };
24
28
  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
25
29
  height: height,
26
- color: color,
30
+ color: activeState ? activeColor : color,
27
31
  disabled: disabled,
28
32
  onClick: event => {
29
33
  onClickHandler(event);
@@ -31,7 +35,7 @@ const FilterButton = props => {
31
35
  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
32
36
  width: iconWidth,
33
37
  height: iconHeight,
34
- color: color
38
+ color: activeState ? activeColor : color
35
39
  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
36
40
  };
37
41
  exports.FilterButton = FilterButton;
@@ -40,8 +44,10 @@ FilterButton.defaultProps = {
40
44
  buttonText: 'Filter',
41
45
  height: '40px',
42
46
  color: '#212121',
47
+ activeColor: '#229E38',
43
48
  iconHeight: 12,
44
49
  iconWidth: 12,
50
+ openState: false,
45
51
  disabled: false,
46
52
  onButtonClick: () => {}
47
53
  };
package/dist/stories/components/FilterButton.style.js CHANGED
@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2;
11
- 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);
11
+ 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);
12
12
  const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -10,7 +10,6 @@ var _recharts = require("recharts");
10
10
  var _CommonFunctions = require("./CommonFunctions");
11
11
  var _TotalDoughnutChart = require("./TotalDoughnutChart.style");
12
12
  var _Benchmark = require("./Benchmark");
13
- /* TotalDoughnutChart */
14
13
  const TotalDoughnutChart = props => {
15
14
  var _DoughnutChartContain, _DoughnutChartContain2;
16
15
  const {
@@ -63,15 +62,11 @@ const TotalDoughnutChart = props => {
63
62
  }, []);
64
63
  (0, _react.useEffect)(() => {
65
64
  const MIN_RADIUS = 45;
66
- if (!DoughnutChartContainerRef) {
67
- return;
68
- }
65
+ if (!DoughnutChartContainerRef) return;
69
66
  const {
70
67
  current
71
68
  } = DoughnutChartContainerRef;
72
- if (!current) {
73
- return;
74
- }
69
+ if (!current) return;
75
70
  const DoughnutChartContainerWidth = current === null || current === void 0 ? void 0 : current.clientWidth;
76
71
  const DoughnutChartContainerHeight = current === null || current === void 0 ? void 0 : current.clientHeight;
77
72
  const resolutionFactor = zoomResolution && zoomResolution >= 1 ? zoomResolution : 1;
@@ -79,18 +74,15 @@ const TotalDoughnutChart = props => {
79
74
  if (radius < MIN_RADIUS) {
80
75
  radius = MIN_RADIUS;
81
76
  }
82
- console.log('radius', radius);
83
77
  setDoughnutChartRadius(radius);
84
78
  }, [height, width, DoughnutChartContainerRef === null || DoughnutChartContainerRef === void 0 ? void 0 : (_DoughnutChartContain = DoughnutChartContainerRef.current) === null || _DoughnutChartContain === void 0 ? void 0 : _DoughnutChartContain.clientWidth, DoughnutChartContainerRef === null || DoughnutChartContainerRef === void 0 ? void 0 : (_DoughnutChartContain2 = DoughnutChartContainerRef.current) === null || _DoughnutChartContain2 === void 0 ? void 0 : _DoughnutChartContain2.clientHeight, zoomResolution]);
85
79
  const displayLegendValue = row => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
86
- id: "LegendFormattedValue",
87
80
  style: {
88
81
  fontWeight: itemsBoldedValues ? '700' : '500'
89
82
  }
90
- }, !isPercent && row.value && currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', !isPercent && row.value ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"), isPercent && row.value && "".concat(row.value.toFixed(1), "%"));
83
+ }, !isPercent && row.value && currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', !isPercent && row.value !== undefined && row.value !== null ? dotCutTrenty(row) : !isPercent && 'No Data', !isPercent && row.value && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', !isPercent && row.value && itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"), isPercent && row.value && "".concat(row.value.toFixed(1), "%"));
91
84
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
92
85
  className: className,
93
- id: "ControlsContainer",
94
86
  height: height,
95
87
  width: width,
96
88
  textcolor: textcolor
@@ -98,22 +90,11 @@ const TotalDoughnutChart = props => {
98
90
  id: "Controls",
99
91
  height: height,
100
92
  width: width
101
- }, !hideTitleAndValue && /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TitleAndValueContainer, {
102
- id: "TitleAndValueContainer"
103
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Title, {
104
- id: "Title",
93
+ }, !hideTitleAndValue && /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Title, {
105
94
  width: width
106
- }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySignAndFormattedValueContainer, {
107
- id: "CurrencySignAndFormattedValueContainer"
108
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.FormattedValue, {
109
- id: "FormattedValue",
95
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySignAndFormattedValueContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.FormattedValue, {
110
96
  width: width
111
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, {
112
- id: "CurrencySign"
113
- }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, {
114
- id: "DoughnutChartAndLegendContainer"
115
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartContainer, {
116
- id: "DoughnutChartContainer",
97
+ }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, null, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartContainer, {
117
98
  width: width,
118
99
  height: height,
119
100
  ref: DoughnutChartContainerRef
@@ -133,18 +114,11 @@ const TotalDoughnutChart = props => {
133
114
  value: value,
134
115
  isPercent: isPercent
135
116
  })
136
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendContainer, {
137
- id: "LegendContainer"
138
- }, legendData.map(row => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendControlsContainer, {
139
- id: "LegendControlsContainer",
117
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendContainer, null, legendData.map(row => /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendControlsContainer, {
140
118
  key: row.name
141
119
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendColorRectangle, {
142
- id: "LegendColorRectangle",
143
120
  color: row.color
144
- }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitleAndFormatedValueContainer, {
145
- id: "LegendTitleAndFormatedValueContainer"
146
- }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
147
- id: "LegendTitle",
121
+ }), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitleAndFormatedValueContainer, null, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
148
122
  style: {
149
123
  flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
150
124
  alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
@@ -154,6 +128,7 @@ const TotalDoughnutChart = props => {
154
128
  exports.TotalDoughnutChart = TotalDoughnutChart;
155
129
  var _default = exports.default = TotalDoughnutChart;
156
130
  TotalDoughnutChart.defaultProps = {
131
+ className: '',
157
132
  title: '',
158
133
  value: 0,
159
134
  addingBenchmark: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.726",
3
+ "version": "1.0.727",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/dist/stories/components/EventInfo.js DELETED
@@ -1,92 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
10
- var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
11
- var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
12
- var _BannersDropdown = require("./BannersDropdown");
13
- var _EventInfo = require("./EventInfo.style");
14
- const EventInfo = props => {
15
- const {
16
- title,
17
- subTitle,
18
- productsData,
19
- onSpotlightProductClick,
20
- onClickBannersDropdown
21
- } = props;
22
- const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
23
- const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
24
- banners: [{
25
- checked: true,
26
- name: 'StopAndShop'
27
- }, {
28
- checked: true,
29
- name: 'FoodLion'
30
- }, {
31
- checked: true,
32
- name: 'GiantFood'
33
- }, {
34
- checked: true,
35
- name: 'TheGiantCompany'
36
- }, {
37
- checked: true,
38
- name: 'Hannaford'
39
- }],
40
- onClick: banners => {
41
- onClickBannersDropdown({
42
- banners
43
- });
44
- }
45
- });
46
- return /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoMainContainer, {
47
- id: "EventInfoMainContainer"
48
- }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
49
- id: "EventInfoContainer"
50
- }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
51
- id: "EventInfoTitleContainer"
52
- }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
53
- id: "EventInfoTitle"
54
- }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
55
- id: "EventInfoSubTitle"
56
- }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
57
- id: "EventInfoSubTitle"
58
- }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
59
- id: "ProductButtonContainer",
60
- onClick: () => {
61
- setIsProductsListOpen(!IsProductsListOpen);
62
- }
63
- }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
64
- color: "#212121"
65
- }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
66
- color: "#212121"
67
- }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
68
- id: "EventInfoContentContainer"
69
- }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
70
- id: "ProductsTitle"
71
- }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
72
- id: "ProductContainer"
73
- }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
74
- id: "Product"
75
- }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
76
- id: "ProductButtonContainer",
77
- background: "#F8CD00",
78
- onClick: () => {
79
- onSpotlightProductClick({
80
- value: item.value,
81
- label: item.label
82
- });
83
- }
84
- }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
85
- };
86
- var _default = exports.default = EventInfo;
87
- EventInfo.defaultProps = {
88
- title: 'Products Variety',
89
- subTitle: 'Product Name',
90
- onSpotlightProductClick: () => {},
91
- onClickBannersDropdown: () => {}
92
- };
package/dist/stories/components/EventInfo.style.js DELETED
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
- var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
- 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"])));
12
- 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"])));
13
- 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"])));
14
- 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"])));
15
- 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"])));
16
- 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"])));
17
- 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"])));
18
- 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"])));
19
- 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"])));
20
- 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');