sag_components 1.0.800 → 1.0.803
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/CollapseHeader.js +267 -0
- package/dist/stories/components/CollapseHeader.style.js +35 -0
- package/dist/stories/components/EventList.style.js +3 -7
- package/dist/stories/components/FilterButton.js +10 -4
- package/dist/stories/components/FilterButton.style.js +1 -1
- package/dist/stories/components/PopupCharts.js +37 -4
- package/package.json +1 -1
- package/dist/stories/components/EventInfo.js +0 -92
- package/dist/stories/components/EventInfo.style.js +0 -20
|
@@ -0,0 +1,267 @@
|
|
|
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 = exports.CollapseHeader = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _EyeIcon = require("./icons/EyeIcon");
|
|
10
|
+
var _FoodLionIcon = require("./icons/FoodLionIcon");
|
|
11
|
+
var _GiantFoodIcon = require("./icons/GiantFoodIcon");
|
|
12
|
+
var _HannafordIcon = require("./icons/HannafordIcon");
|
|
13
|
+
var _StopAndShopIcon = require("./icons/StopAndShopIcon");
|
|
14
|
+
var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
|
|
15
|
+
var _ComboBoxArrowDownIcon = require("./icons/ComboBoxArrowDownIcon");
|
|
16
|
+
var _ComboBoxArrowUpIcon = require("./icons/ComboBoxArrowUpIcon");
|
|
17
|
+
var _ListBox = require("./ListBox");
|
|
18
|
+
var _CollapseHeader = require("./CollapseHeader.style");
|
|
19
|
+
const CollapseHeader = props => {
|
|
20
|
+
var _data$eventDescriptio, _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
|
|
21
|
+
const {
|
|
22
|
+
className,
|
|
23
|
+
showRetailerIcon,
|
|
24
|
+
showPeriodIcon,
|
|
25
|
+
viewCreativeRetailersData,
|
|
26
|
+
data,
|
|
27
|
+
viewCreativeOnClick,
|
|
28
|
+
width,
|
|
29
|
+
height,
|
|
30
|
+
textcolor,
|
|
31
|
+
showDraft,
|
|
32
|
+
disabled
|
|
33
|
+
} = props;
|
|
34
|
+
const [retailersDataState, setRetailersDataState] = (0, _react.useState)(null);
|
|
35
|
+
const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = (0, _react.useState)(false);
|
|
36
|
+
const viewCreativeContainerRef = (0, _react.useRef)(null);
|
|
37
|
+
(0, _react.useEffect)(() => {
|
|
38
|
+
let newData = [];
|
|
39
|
+
if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
|
|
40
|
+
newData = viewCreativeRetailersData === null || viewCreativeRetailersData === void 0 ? void 0 : viewCreativeRetailersData.map(item => ({
|
|
41
|
+
...item,
|
|
42
|
+
checked: false,
|
|
43
|
+
disabled: false
|
|
44
|
+
}));
|
|
45
|
+
setRetailersDataState(newData);
|
|
46
|
+
} else {
|
|
47
|
+
setRetailersDataState(null);
|
|
48
|
+
}
|
|
49
|
+
}, [viewCreativeRetailersData]);
|
|
50
|
+
const getRetailerIcon = retailerName => {
|
|
51
|
+
switch (retailerName) {
|
|
52
|
+
case 'Food Lion':
|
|
53
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
|
|
54
|
+
id: "RetailerIconContainer"
|
|
55
|
+
}, /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, {
|
|
56
|
+
width: "90",
|
|
57
|
+
height: "20"
|
|
58
|
+
}), "\xA0");
|
|
59
|
+
case 'Hannaford':
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
|
|
61
|
+
id: "RetailerIconContainer"
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement(_HannafordIcon.HannafordIcon, {
|
|
63
|
+
width: "90",
|
|
64
|
+
height: "20"
|
|
65
|
+
}), "\xA0");
|
|
66
|
+
case 'Giant Food':
|
|
67
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
|
|
68
|
+
id: "RetailerIconContainer"
|
|
69
|
+
}, /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
|
|
70
|
+
width: "60",
|
|
71
|
+
height: "20"
|
|
72
|
+
}), "\xA0");
|
|
73
|
+
case 'The Giant Company':
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
|
|
75
|
+
id: "RetailerIconContainer"
|
|
76
|
+
}, /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, {
|
|
77
|
+
width: "60",
|
|
78
|
+
height: "20"
|
|
79
|
+
}), "\xA0");
|
|
80
|
+
case 'Stop&Shop':
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
|
|
82
|
+
id: "RetailerIconContainer"
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
|
|
84
|
+
width: "90",
|
|
85
|
+
height: "20"
|
|
86
|
+
}), "\xA0");
|
|
87
|
+
default:
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
|
|
89
|
+
id: "RetailerIconContainer"
|
|
90
|
+
}, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
91
|
+
className: "FieldsDelimiter"
|
|
92
|
+
}, " | "));
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
const viewCreativeOnClickHandler = () => {
|
|
96
|
+
if (retailersDataState && retailersDataState.length > 0) {
|
|
97
|
+
setViewCreativeListBoxOpenedState(!viewCreativeListBoxOpenedState);
|
|
98
|
+
} else {
|
|
99
|
+
viewCreativeOnClick({
|
|
100
|
+
name: viewCreativeOnClick
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
const listBoxViewCreativeOnClickHandler = props => {
|
|
105
|
+
var _props$selectedData, _props$selectedData2;
|
|
106
|
+
const selectedRetailer = ((_props$selectedData = props.selectedData) === null || _props$selectedData === void 0 ? void 0 : _props$selectedData.length) > 0 ? props.selectedData[0].label : null;
|
|
107
|
+
if (selectedRetailer) {
|
|
108
|
+
viewCreativeOnClick({
|
|
109
|
+
selectedRetailer
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
if (((_props$selectedData2 = props.selectedData) === null || _props$selectedData2 === void 0 ? void 0 : _props$selectedData2.length) > 0) {
|
|
113
|
+
setViewCreativeListBoxOpenedState(false);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
const getViewCreativeContainerLeft = () => {
|
|
117
|
+
const {
|
|
118
|
+
offsetLeft
|
|
119
|
+
} = viewCreativeContainerRef.current;
|
|
120
|
+
return offsetLeft.toString().concat('', 'px');
|
|
121
|
+
};
|
|
122
|
+
const getViewCreativeContainerTop = () => {
|
|
123
|
+
const {
|
|
124
|
+
offsetTop
|
|
125
|
+
} = viewCreativeContainerRef.current;
|
|
126
|
+
return (offsetTop + 33).toString().concat('', 'px');
|
|
127
|
+
};
|
|
128
|
+
return /*#__PURE__*/_react.default.createElement(_CollapseHeader.MainContainer, {
|
|
129
|
+
id: "CollapseHeader",
|
|
130
|
+
className: className,
|
|
131
|
+
height: height,
|
|
132
|
+
width: width,
|
|
133
|
+
textcolor: textcolor
|
|
134
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.PanelContainer, {
|
|
135
|
+
id: "PanelContainer"
|
|
136
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.EventNameAndViewCreativeContainer, {
|
|
137
|
+
id: "EventNameAndViewCreativeContainer"
|
|
138
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.EventNameViewCreativeSubContainer, {
|
|
139
|
+
id: "EventNameViewCreativeSubContainer"
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeButtonAndListBoxContainer, {
|
|
141
|
+
id: "ViewCreativeButtonAndListBoxContainer"
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeContainer, {
|
|
143
|
+
id: "ViewCreativeContainer",
|
|
144
|
+
ref: viewCreativeContainerRef,
|
|
145
|
+
onClick: viewCreativeOnClickHandler,
|
|
146
|
+
disabled: disabled
|
|
147
|
+
}, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
|
|
148
|
+
width: "12",
|
|
149
|
+
height: "12"
|
|
150
|
+
}), /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeTextField, {
|
|
151
|
+
id: "ViewCreativeTextField"
|
|
152
|
+
}, "View creative"), retailersDataState && (retailersDataState === null || retailersDataState === void 0 ? void 0 : retailersDataState.length) > 0 && (viewCreativeListBoxOpenedState ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), viewCreativeListBoxOpenedState && /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeListBoxContainer, {
|
|
153
|
+
id: "ViewCreativeListBoxContainer",
|
|
154
|
+
top: getViewCreativeContainerTop(),
|
|
155
|
+
left: getViewCreativeContainerLeft(),
|
|
156
|
+
width: "100%",
|
|
157
|
+
height: "100%",
|
|
158
|
+
onMouseLeave: () => {
|
|
159
|
+
setViewCreativeListBoxOpenedState(false);
|
|
160
|
+
}
|
|
161
|
+
}, /*#__PURE__*/_react.default.createElement(_ListBox.ListBox, {
|
|
162
|
+
id: "ListBox",
|
|
163
|
+
data: retailersDataState,
|
|
164
|
+
buttonsBackgroundColorChecked: "#B1B1B1",
|
|
165
|
+
buttonsBackgroundColorUnchecked: "#FFF",
|
|
166
|
+
buttonsBorderColor: "##B1B1B1",
|
|
167
|
+
buttonsIconColor: "#212121",
|
|
168
|
+
buttonsTextColorChecked: "#212121",
|
|
169
|
+
buttonsTextColorUnchecked: "#212121",
|
|
170
|
+
height: "100%",
|
|
171
|
+
width: "100%",
|
|
172
|
+
onClick: props => {
|
|
173
|
+
listBoxViewCreativeOnClickHandler(props);
|
|
174
|
+
}
|
|
175
|
+
})))), showDraft && /*#__PURE__*/_react.default.createElement(_CollapseHeader.DraftTag, null, "DRAFT")), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValuesContainer, {
|
|
176
|
+
id: "FilterValuesContainer"
|
|
177
|
+
}, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_CollapseHeader.Retailer, {
|
|
178
|
+
id: "Retailer"
|
|
179
|
+
}, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
180
|
+
className: "FilterValue"
|
|
181
|
+
}, data.eventType), data.externalEventDescription && data.externalEventDescription !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
182
|
+
className: "FieldsDelimiter"
|
|
183
|
+
}, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
184
|
+
className: "FilterValue"
|
|
185
|
+
}, data.externalEventDescription)), data.externalEventID && data.externalEventID !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
186
|
+
className: "FieldsDelimiter"
|
|
187
|
+
}, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
188
|
+
className: "FilterValue"
|
|
189
|
+
}, data.externalEventID)), data.storeType && data.storeType !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
190
|
+
className: "FieldsDelimiter"
|
|
191
|
+
}, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
192
|
+
className: "FilterValue"
|
|
193
|
+
}, data.storeType)), data.category && data.category !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
194
|
+
className: "FieldsDelimiter"
|
|
195
|
+
}, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
196
|
+
className: "FilterValue"
|
|
197
|
+
}, data.category)), data.supplier && data.supplier !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
198
|
+
className: "FieldsDelimiter"
|
|
199
|
+
}, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
200
|
+
className: "FilterValue"
|
|
201
|
+
}, data.supplier)), data.brand && data.brand !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
|
|
202
|
+
className: "FieldsDelimiter"
|
|
203
|
+
}, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
|
|
204
|
+
className: "FilterValue"
|
|
205
|
+
}, data.brand))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesContainer, {
|
|
206
|
+
id: "ObjectiesContainer",
|
|
207
|
+
showPeriodIcon: showPeriodIcon
|
|
208
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesDescription, {
|
|
209
|
+
id: "ObjectivesDescription"
|
|
210
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesTitle, {
|
|
211
|
+
id: "ObjectivesTitle"
|
|
212
|
+
}, (data === null || data === void 0 ? void 0 : (_data$eventDescriptio = data.eventDescription) === null || _data$eventDescriptio === void 0 ? void 0 : _data$eventDescriptio.length) > 0 ? 'Event Description: ' : ''), data.eventDescription))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesAndPeriodsContainer, {
|
|
213
|
+
id: "ObjectiesAndPeriodsContainer"
|
|
214
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesContainer, {
|
|
215
|
+
id: "ObjectiesContainer",
|
|
216
|
+
showPeriodIcon: showPeriodIcon
|
|
217
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesDescription, {
|
|
218
|
+
id: "ObjectivesDescription"
|
|
219
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesTitle, {
|
|
220
|
+
id: "ObjectivesTitle"
|
|
221
|
+
}, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? 'Objectives: ' : ''), data.objectivesDescription)), showPeriodIcon && /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodsContainer, {
|
|
222
|
+
id: "PeriodsContainer"
|
|
223
|
+
}, /*#__PURE__*/_react.default.createElement(_CollapseHeader.SubLineContainer, {
|
|
224
|
+
id: "SubLineContainer"
|
|
225
|
+
}, (data === null || data === void 0 ? void 0 : (_data$eventDatesValue = data.eventDatesValue) === null || _data$eventDatesValue === void 0 ? void 0 : _data$eventDatesValue.length) > 0 ? /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodLabel, {
|
|
226
|
+
id: "PeriodLabel"
|
|
227
|
+
}, "Event Dates: ") : '', (data === null || data === void 0 ? void 0 : (_data$eventDatesValue2 = data.eventDatesValue) === null || _data$eventDatesValue2 === void 0 ? void 0 : _data$eventDatesValue2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodValue, {
|
|
228
|
+
id: "PeriodValue"
|
|
229
|
+
}, data.eventDatesValue) : '')))));
|
|
230
|
+
};
|
|
231
|
+
exports.CollapseHeader = CollapseHeader;
|
|
232
|
+
var _default = exports.default = CollapseHeader;
|
|
233
|
+
CollapseHeader.defaultProps = {
|
|
234
|
+
className: '',
|
|
235
|
+
showRetailerIcon: true,
|
|
236
|
+
showPeriodIcon: true,
|
|
237
|
+
viewCreativeRetailersData: [{
|
|
238
|
+
label: 'Food Lion'
|
|
239
|
+
}, {
|
|
240
|
+
label: 'Stop&Shop'
|
|
241
|
+
}, {
|
|
242
|
+
label: 'Giant Food'
|
|
243
|
+
}, {
|
|
244
|
+
label: 'The Giant Company'
|
|
245
|
+
}, {
|
|
246
|
+
label: 'Hannaford'
|
|
247
|
+
}],
|
|
248
|
+
data: {
|
|
249
|
+
eventType: 'Large Selling Event',
|
|
250
|
+
retailer: 'The Giant Company',
|
|
251
|
+
eventDescription: 'Large Selling Event Description',
|
|
252
|
+
objectivesDescription: 'Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ',
|
|
253
|
+
eventDatesValue: 'Feb 1, 2023 - Feb 28, 2023',
|
|
254
|
+
externalEventDescription: 'Large Selling Event P2 Description',
|
|
255
|
+
externalEventID: 'LSE2_23',
|
|
256
|
+
storeType: 'Total',
|
|
257
|
+
category: '',
|
|
258
|
+
supplier: '',
|
|
259
|
+
brand: ''
|
|
260
|
+
},
|
|
261
|
+
viewCreativeOnClick: () => {},
|
|
262
|
+
width: '100%',
|
|
263
|
+
height: '100%',
|
|
264
|
+
textcolor: '#212121',
|
|
265
|
+
showDraft: false,
|
|
266
|
+
disabled: false
|
|
267
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.ViewCreativeButtonAndListBoxContainer = exports.SubLineContainer = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.DraftTag = exports.DownloadButtonContainer = exports.BottonsContainer = 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, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
|
|
11
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-size: 1rem;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), props => props.textcolor ? props.textcolor : '#000', props => props.width, props => props.height);
|
|
12
|
+
const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-radius: 12px;\n background: white;\n padding: 20px;\n font-weight: 400;\n white-space: pre-wrap;\n width: 100%;\n @media (max-width: 1536px) {\n padding: 13px 16px;\n }\n @media (max-width: 1366px) {\n padding: 12px 16px;\n }\n"])));
|
|
13
|
+
const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n"])));
|
|
14
|
+
const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n align-content: center;\n align-items: center;\n gap: 20px;\n"])));
|
|
15
|
+
const DraftTag = exports.DraftTag = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #E41111;\n border: 2px solid #E41111;\n font-size: 20px;\n padding: 6px 18px;\n"])));
|
|
16
|
+
const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n padding: 2px 10px;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
|
|
17
|
+
const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n margin: 3px 10px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
18
|
+
const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n overflow: visible;\n font-size: 18px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
19
|
+
const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: absolute;\n left: ", ";\n top: ", ";\n z-index:1000;\n"])), props => props.left, props => props.top);
|
|
20
|
+
const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n width: 100%;\n margin: 0.5rem 0 0 0;\n"])));
|
|
21
|
+
const FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n margin: 0;\n font-size: 14px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
22
|
+
const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n color: #ccc;\n margin: 0;\n"])));
|
|
23
|
+
const Retailer = exports.Retailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n color: #1b30aa;\n margin: 0;\n margin-inline-end: 5px;\n"])));
|
|
24
|
+
const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
25
|
+
const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n flex-basis: 70%;\n"])));
|
|
26
|
+
const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 40px;\n width: 100%;\n margin-top: 8px;\n"])));
|
|
27
|
+
const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n"])));
|
|
28
|
+
const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n font-size: 14px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
29
|
+
const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), props => props.disabled ? '#B1B1B1' : '#1b30aa', props => !props.disabled ? 'pointer' : 'default');
|
|
30
|
+
const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n justify-content: flex-end;\n min-height: 1.5rem;\n"])));
|
|
31
|
+
const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
32
|
+
const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-start;\n flex-basis: calc(40% - 40px);\n margin-left: auto;\n font-size: 14px;\n @media (max-width: 1536px) {\n font-size: 12px;\n } \n"])));
|
|
33
|
+
const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
|
|
34
|
+
const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 14px;\n font-weight: 500;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n } \n"])));
|
|
35
|
+
const PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n margin: 0 0 0 10px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
@@ -8,11 +8,7 @@ exports.PanelContainer = exports.OneEventItemContainer = exports.MainContainer =
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
11
|
-
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex
|
|
12
|
-
return props.width;
|
|
13
|
-
}, props => {
|
|
14
|
-
return props.height;
|
|
15
|
-
});
|
|
11
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /* display: flex; */\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-size: 1rem;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
|
|
16
12
|
const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n padding: 0 10px;\n font-weight: 400;\n font-size: 14px;\n line-height: 19px;\n white-space: pre-wrap;\n overflow: hidden;\n width: 100%;\n"])));
|
|
17
|
-
const EventItemsContainer = exports.EventItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(3,1fr);\n padding: 10px;\n gap: 30px;\n width: 100%;\n"])));
|
|
18
|
-
const OneEventItemContainer = exports.OneEventItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
13
|
+
const EventItemsContainer = exports.EventItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n padding: 15px 10px 30px;\n gap: 30px;\n width: 100%;\n"])));
|
|
14
|
+
const OneEventItemContainer = exports.OneEventItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n margin: 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"])));
|
|
@@ -189,10 +189,7 @@ const PopupCharts = props => {
|
|
|
189
189
|
height: height,
|
|
190
190
|
width: width,
|
|
191
191
|
onClick: e => e.stopPropagation()
|
|
192
|
-
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.TitleContainer, {
|
|
193
|
-
id: "TitleContainer"
|
|
194
|
-
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
|
|
195
|
-
id: "CloseXIconContainer",
|
|
192
|
+
}, /*#__PURE__*/_react.default.createElement(_PopupCharts.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_PopupCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_PopupCharts.CloseXIconContainer, {
|
|
196
193
|
onClick: e => closePopupCharts(e)
|
|
197
194
|
}, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, null))), /*#__PURE__*/_react.default.createElement(_PopupCharts.ChartsContainer, {
|
|
198
195
|
id: "ChartsContainer",
|
|
@@ -205,6 +202,42 @@ PopupCharts.defaultProps = {
|
|
|
205
202
|
title: 'Switching Pattern',
|
|
206
203
|
chartType: 'TotalDoughnutChart',
|
|
207
204
|
isPopupChartsOpen: true,
|
|
205
|
+
popupChartsItemsData: [{
|
|
206
|
+
title: 'Item 1',
|
|
207
|
+
chartType: 'TotalDoughnutChart',
|
|
208
|
+
value: 100,
|
|
209
|
+
legendData: [{
|
|
210
|
+
color: '#FF0000',
|
|
211
|
+
name: 'Red',
|
|
212
|
+
value: 50
|
|
213
|
+
}, {
|
|
214
|
+
color: '#00FF00',
|
|
215
|
+
name: 'Green',
|
|
216
|
+
value: 30
|
|
217
|
+
}, {
|
|
218
|
+
color: '#0000FF',
|
|
219
|
+
name: 'Blue',
|
|
220
|
+
value: 20
|
|
221
|
+
}],
|
|
222
|
+
noDataText: 'No data available'
|
|
223
|
+
}, {
|
|
224
|
+
title: 'Item 2',
|
|
225
|
+
chartType: 'TotalHorizontalCharts',
|
|
226
|
+
value: 200,
|
|
227
|
+
chartsData: [{
|
|
228
|
+
label: 'Label 1',
|
|
229
|
+
value: 50
|
|
230
|
+
}, {
|
|
231
|
+
label: 'Label 2',
|
|
232
|
+
value: 100
|
|
233
|
+
}, {
|
|
234
|
+
label: 'Label 3',
|
|
235
|
+
value: 150
|
|
236
|
+
}],
|
|
237
|
+
noDataText: 'No data available'
|
|
238
|
+
}
|
|
239
|
+
// Add more items as needed
|
|
240
|
+
],
|
|
208
241
|
width: '1700px',
|
|
209
242
|
height: '800px',
|
|
210
243
|
onCloseClick: () => {},
|
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');
|