sag_components 1.0.752 → 1.0.754
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.
- package/dist/stories/components/BarChartsByWeeks.js +35 -10
- package/dist/stories/components/BarChartsByWeeks.style.js +2 -2
- package/dist/stories/components/FilterButton.js +10 -4
- package/dist/stories/components/FilterButton.style.js +1 -1
- package/dist/stories/components/LinnerDataBox.js +17 -1
- package/dist/stories/components/PopupCharts.js +1 -0
- package/package.json +1 -1
- package/dist/stories/components/EventInfo.js +0 -92
- package/dist/stories/components/EventInfo.style.js +0 -20
|
@@ -20,6 +20,7 @@ const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
|
|
|
20
20
|
/* BarChartsByWeeks */
|
|
21
21
|
const BarChartsByWeeks = props => {
|
|
22
22
|
const {
|
|
23
|
+
className,
|
|
23
24
|
title,
|
|
24
25
|
headerValueTopTitle,
|
|
25
26
|
headerValueBottomTitle,
|
|
@@ -42,7 +43,9 @@ const BarChartsByWeeks = props => {
|
|
|
42
43
|
interval,
|
|
43
44
|
showLegend,
|
|
44
45
|
legendData,
|
|
45
|
-
showTwoBars
|
|
46
|
+
showTwoBars,
|
|
47
|
+
setLimitHeight,
|
|
48
|
+
setLimitLow
|
|
46
49
|
} = props;
|
|
47
50
|
const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
|
|
48
51
|
const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
|
|
@@ -65,6 +68,24 @@ const BarChartsByWeeks = props => {
|
|
|
65
68
|
formattedValue = isPercentValue ? ''.concat('', value.toFixed(1), '%') : ''.concat('', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
|
|
66
69
|
return formattedValue;
|
|
67
70
|
};
|
|
71
|
+
const formmatedData = barChartData === null || barChartData === void 0 ? void 0 : barChartData.map(item => {
|
|
72
|
+
if (setLimitHeight && item.value > setLimitHeight) {
|
|
73
|
+
return {
|
|
74
|
+
title: item.title,
|
|
75
|
+
value: setLimitHeight
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
if (setLimitLow && item.value < setLimitLow) {
|
|
79
|
+
return {
|
|
80
|
+
title: item.title,
|
|
81
|
+
value: setLimitLow
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
return {
|
|
85
|
+
title: item.title,
|
|
86
|
+
value: item.value
|
|
87
|
+
};
|
|
88
|
+
});
|
|
68
89
|
|
|
69
90
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
70
91
|
const CustomTooltip = tooltipData => {
|
|
@@ -137,7 +158,7 @@ const BarChartsByWeeks = props => {
|
|
|
137
158
|
return "".concat(newHeight, "px");
|
|
138
159
|
};
|
|
139
160
|
return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.ControlsContainer, {
|
|
140
|
-
className:
|
|
161
|
+
className: className,
|
|
141
162
|
height: height,
|
|
142
163
|
width: width,
|
|
143
164
|
ref: controlsContainerRef
|
|
@@ -156,13 +177,12 @@ const BarChartsByWeeks = props => {
|
|
|
156
177
|
isPercent: HeaderValueIsPercent,
|
|
157
178
|
dotCut: true
|
|
158
179
|
})), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
159
|
-
className: "ResponsiveContainer",
|
|
160
180
|
width: "100%",
|
|
161
|
-
height: "100%"
|
|
181
|
+
height: "100%"
|
|
162
182
|
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
163
183
|
width: BarChartContainerWidth,
|
|
164
184
|
height: BarChartContainerHeight,
|
|
165
|
-
data:
|
|
185
|
+
data: formmatedData,
|
|
166
186
|
margin: {
|
|
167
187
|
top: 20,
|
|
168
188
|
right: 0,
|
|
@@ -176,10 +196,12 @@ const BarChartsByWeeks = props => {
|
|
|
176
196
|
dataKey: "title",
|
|
177
197
|
tick: false,
|
|
178
198
|
tickLine: false
|
|
179
|
-
}), /*#__PURE__*/_react.default.createElement(_recharts.YAxis
|
|
199
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.YAxis
|
|
200
|
+
// type="number"
|
|
201
|
+
, {
|
|
180
202
|
tickCount: yAxisCounter,
|
|
181
203
|
interval: interval || 'preserveEnd',
|
|
182
|
-
domain: [
|
|
204
|
+
domain: ['-20%', '10%'],
|
|
183
205
|
tick: {
|
|
184
206
|
fill: '#B1B1B1'
|
|
185
207
|
},
|
|
@@ -220,12 +242,13 @@ const BarChartsByWeeks = props => {
|
|
|
220
242
|
exports.BarChartsByWeeks = BarChartsByWeeks;
|
|
221
243
|
var _default = exports.default = BarChartsByWeeks;
|
|
222
244
|
BarChartsByWeeks.defaultProps = {
|
|
245
|
+
className: '',
|
|
223
246
|
title: '',
|
|
224
247
|
headerValueTopTitle: '',
|
|
225
248
|
headerValueBottomTitle: '',
|
|
226
|
-
headerValue:
|
|
249
|
+
headerValue: 0,
|
|
227
250
|
HeaderValueCurrencyType: '',
|
|
228
|
-
HeaderValueIsPercent:
|
|
251
|
+
HeaderValueIsPercent: false,
|
|
229
252
|
barChartData: [{
|
|
230
253
|
title: '202320',
|
|
231
254
|
value: 542366
|
|
@@ -289,5 +312,7 @@ BarChartsByWeeks.defaultProps = {
|
|
|
289
312
|
iconType: ICON_TYPE_LEGEND_LINE_ICON,
|
|
290
313
|
iconColor: '#C906FD'
|
|
291
314
|
}],
|
|
292
|
-
showTwoBars: false
|
|
315
|
+
showTwoBars: false,
|
|
316
|
+
setLimitHeight: null,
|
|
317
|
+
setLimitLow: null
|
|
293
318
|
};
|
|
@@ -14,8 +14,8 @@ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateO
|
|
|
14
14
|
const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
|
|
15
15
|
const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
|
|
16
16
|
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
|
|
17
|
-
const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 20px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n
|
|
18
|
-
const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n
|
|
17
|
+
const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 20px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
|
|
18
|
+
const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n"])));
|
|
19
19
|
const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
|
|
20
20
|
const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
|
|
21
21
|
const LegendWrapper = exports.LegendWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n padding: 10px 0 0 0;\n"])));
|
|
@@ -1,29 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
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 =
|
|
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
|
};
|
|
@@ -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
|
|
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"])));
|
|
@@ -19,7 +19,23 @@ const LinnerDataBox = props => {
|
|
|
19
19
|
backgroundColor: backgroundColor,
|
|
20
20
|
width: width || '100%',
|
|
21
21
|
height: height || '200px'
|
|
22
|
-
}, data.map(
|
|
22
|
+
}, data.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
|
|
23
|
+
style: {
|
|
24
|
+
display: 'flex',
|
|
25
|
+
flexDirection: 'row',
|
|
26
|
+
gap: '10px',
|
|
27
|
+
justifyContent: 'space-around',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
width: "".concat(100 / data.length, "%"),
|
|
30
|
+
height: '100%'
|
|
31
|
+
}
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, null, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, null, item.value !== null && item.value !== undefined ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentSign, null, item.sign), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, ''.concat('$', (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
style: {
|
|
34
|
+
width: '1px',
|
|
35
|
+
height: '100px',
|
|
36
|
+
backgroundColor: '#D0D0D0'
|
|
37
|
+
}
|
|
38
|
+
}))));
|
|
23
39
|
};
|
|
24
40
|
exports.LinnerDataBox = LinnerDataBox;
|
|
25
41
|
var _default = exports.default = LinnerDataBox;
|
|
@@ -80,6 +80,7 @@ const PopupCharts = props => {
|
|
|
80
80
|
headerValueTopTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueTopTitle,
|
|
81
81
|
headerValue: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValue,
|
|
82
82
|
headerValueBottomTitle: rowsData === null || rowsData === void 0 ? void 0 : rowsData.headerValueBottomTitle,
|
|
83
|
+
HeaderValueIsPercent: rowsData === null || rowsData === void 0 ? void 0 : rowsData.isPercentValue,
|
|
83
84
|
legendData: rowsData === null || rowsData === void 0 ? void 0 : rowsData.legendData,
|
|
84
85
|
showLegend: rowsData === null || rowsData === void 0 ? void 0 : rowsData.showLegend,
|
|
85
86
|
barChartColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.barChartColor,
|
package/package.json
CHANGED
|
@@ -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
|
-
};
|
|
@@ -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');
|