sag_components 1.0.689 → 1.0.691
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/CampaignTool/PopupContent.stories.js +284 -0
- package/dist/stories/components/BannerEventBox.style.js +1 -1
- package/dist/stories/components/BannerEventBoxList.js +16 -11
- package/dist/stories/components/BannerEventBoxList.style.js +10 -11
- package/dist/stories/components/FilterButton.js +53 -0
- package/dist/stories/components/FilterButton.style.js +12 -0
- package/dist/stories/components/LinkButton.js +27 -0
- package/dist/stories/components/TabMenu.style.js +1 -1
- package/dist/stories/components/icons/ArrowDownIcon.js +2 -2
- package/dist/stories/components/icons/MenuItemOpenIcon.js +3 -3
- package/dist/stories/components/icons/MenuItemRightIcon.js +28 -0
- package/dist/stories/components/icons/MenuItemUpIcon.js +3 -3
- package/package.json +1 -1
- package/dist/stories/components/TotalCostModal.js +0 -143
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.ExamplePopupContent = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
|
|
10
|
+
const FieldsDataRow1 = [{
|
|
11
|
+
name: "FundationSource",
|
|
12
|
+
label: "Fundation Source",
|
|
13
|
+
disabled: false,
|
|
14
|
+
required: false,
|
|
15
|
+
inputType: "dropdown",
|
|
16
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
17
|
+
showInfo: true,
|
|
18
|
+
infoText: "This is one of the Popup content's fields",
|
|
19
|
+
placeHolder: "Select Source",
|
|
20
|
+
dropdownOptions: [{
|
|
21
|
+
value: 1,
|
|
22
|
+
label: "Source 1"
|
|
23
|
+
}, {
|
|
24
|
+
value: 2,
|
|
25
|
+
label: "Source 2"
|
|
26
|
+
}, {
|
|
27
|
+
value: 3,
|
|
28
|
+
label: "Source 3"
|
|
29
|
+
}],
|
|
30
|
+
dropdownDefaultValue: null
|
|
31
|
+
}, {
|
|
32
|
+
name: "Category",
|
|
33
|
+
label: "Category",
|
|
34
|
+
disabled: false,
|
|
35
|
+
required: false,
|
|
36
|
+
inputType: "dropdown",
|
|
37
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
38
|
+
showInfo: true,
|
|
39
|
+
infoText: "This is one of the Popup content's fields",
|
|
40
|
+
placeHolder: "Select Category",
|
|
41
|
+
dropdownOptions: [{
|
|
42
|
+
value: 1,
|
|
43
|
+
label: "Category 1"
|
|
44
|
+
}, {
|
|
45
|
+
value: 2,
|
|
46
|
+
label: "Category 2"
|
|
47
|
+
}, {
|
|
48
|
+
value: 3,
|
|
49
|
+
label: "Category 3"
|
|
50
|
+
}],
|
|
51
|
+
dropdownDefaultValue: null
|
|
52
|
+
}, {
|
|
53
|
+
name: "Supplier",
|
|
54
|
+
label: "Supplier",
|
|
55
|
+
disabled: false,
|
|
56
|
+
required: false,
|
|
57
|
+
inputType: "dropdown",
|
|
58
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
59
|
+
showInfo: true,
|
|
60
|
+
infoText: "This is one of the Popup content's fields",
|
|
61
|
+
placeHolder: "Select Supplier",
|
|
62
|
+
dropdownOptions: [{
|
|
63
|
+
value: 1,
|
|
64
|
+
label: "Supplier 1"
|
|
65
|
+
}, {
|
|
66
|
+
value: 2,
|
|
67
|
+
label: "Supplier 2"
|
|
68
|
+
}, {
|
|
69
|
+
value: 3,
|
|
70
|
+
label: "Supplier 3"
|
|
71
|
+
}],
|
|
72
|
+
dropdownDefaultValue: null
|
|
73
|
+
}, {
|
|
74
|
+
name: "ContactName",
|
|
75
|
+
label: "Contact Name",
|
|
76
|
+
disabled: false,
|
|
77
|
+
required: false,
|
|
78
|
+
inputType: "textbox",
|
|
79
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
80
|
+
showInfo: true,
|
|
81
|
+
infoText: "This is one of the Popup content's fields",
|
|
82
|
+
placeHolder: "Enter Contact Name",
|
|
83
|
+
dropdownOptions: null,
|
|
84
|
+
dropdownDefaultValue: null
|
|
85
|
+
}];
|
|
86
|
+
const FieldsDataRow2 = [{
|
|
87
|
+
name: "BrandName",
|
|
88
|
+
label: "Brand Name",
|
|
89
|
+
disabled: false,
|
|
90
|
+
required: false,
|
|
91
|
+
inputType: "dropdown",
|
|
92
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
93
|
+
showInfo: true,
|
|
94
|
+
infoText: "This is one of the Popup content's fields",
|
|
95
|
+
placeHolder: "Select Brand",
|
|
96
|
+
dropdownOptions: [{
|
|
97
|
+
value: 1,
|
|
98
|
+
label: "Brand 1"
|
|
99
|
+
}, {
|
|
100
|
+
value: 2,
|
|
101
|
+
label: "Brand 2"
|
|
102
|
+
}, {
|
|
103
|
+
value: 3,
|
|
104
|
+
label: "Brand 3"
|
|
105
|
+
}],
|
|
106
|
+
dropdownDefaultValue: null
|
|
107
|
+
}, {
|
|
108
|
+
name: "Budget",
|
|
109
|
+
label: "Budget",
|
|
110
|
+
disabled: false,
|
|
111
|
+
required: false,
|
|
112
|
+
inputType: "dropdown",
|
|
113
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
114
|
+
showInfo: true,
|
|
115
|
+
infoText: "This is one of the Popup content's fields",
|
|
116
|
+
placeHolder: "Select Budget",
|
|
117
|
+
dropdownOptions: [{
|
|
118
|
+
value: 1,
|
|
119
|
+
label: "Budget 1"
|
|
120
|
+
}, {
|
|
121
|
+
value: 2,
|
|
122
|
+
label: "Budget 2"
|
|
123
|
+
}, {
|
|
124
|
+
value: 3,
|
|
125
|
+
label: "Budget 3"
|
|
126
|
+
}],
|
|
127
|
+
dropdownDefaultValue: {
|
|
128
|
+
value: 1,
|
|
129
|
+
label: "Budget 1"
|
|
130
|
+
}
|
|
131
|
+
}, {
|
|
132
|
+
name: "CategoryManager",
|
|
133
|
+
label: "Category Manager",
|
|
134
|
+
disabled: false,
|
|
135
|
+
required: false,
|
|
136
|
+
inputType: "dropdown",
|
|
137
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
138
|
+
showInfo: true,
|
|
139
|
+
infoText: "This is one of the Popup content's fields",
|
|
140
|
+
placeHolder: "Select Category Manager",
|
|
141
|
+
dropdownOptions: [{
|
|
142
|
+
value: 1,
|
|
143
|
+
label: "Category Manager 1"
|
|
144
|
+
}, {
|
|
145
|
+
value: 2,
|
|
146
|
+
label: "Category Manager 2"
|
|
147
|
+
}, {
|
|
148
|
+
value: 3,
|
|
149
|
+
label: "Category Manager 3"
|
|
150
|
+
}],
|
|
151
|
+
dropdownDefaultValue: {
|
|
152
|
+
value: 3,
|
|
153
|
+
label: "Category Manager 3"
|
|
154
|
+
}
|
|
155
|
+
}, {
|
|
156
|
+
name: "ContactEmail",
|
|
157
|
+
label: "Contact Email",
|
|
158
|
+
disabled: false,
|
|
159
|
+
required: false,
|
|
160
|
+
inputType: "textbox",
|
|
161
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
162
|
+
showInfo: true,
|
|
163
|
+
infoText: "This is one of the Popup content's fields",
|
|
164
|
+
placeHolder: "Enter Contact Email",
|
|
165
|
+
dropdownOptions: null,
|
|
166
|
+
dropdownDefaultValue: null
|
|
167
|
+
}];
|
|
168
|
+
const FieldsDataRow3 = [{
|
|
169
|
+
name: "Broker",
|
|
170
|
+
label: "Broker",
|
|
171
|
+
disabled: false,
|
|
172
|
+
required: false,
|
|
173
|
+
inputType: "dropdown",
|
|
174
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
175
|
+
showInfo: true,
|
|
176
|
+
infoText: "This is one of the Popup content's fields",
|
|
177
|
+
placeHolder: "Select Broker",
|
|
178
|
+
dropdownOptions: [{
|
|
179
|
+
value: 1,
|
|
180
|
+
label: "Broker 1"
|
|
181
|
+
}, {
|
|
182
|
+
value: 2,
|
|
183
|
+
label: "Broker 2"
|
|
184
|
+
}, {
|
|
185
|
+
value: 3,
|
|
186
|
+
label: "Broker 3"
|
|
187
|
+
}],
|
|
188
|
+
dropdownDefaultValue: null
|
|
189
|
+
}, {
|
|
190
|
+
name: "SupplierOfferID",
|
|
191
|
+
label: "Supplier Offer ID",
|
|
192
|
+
disabled: false,
|
|
193
|
+
required: false,
|
|
194
|
+
inputType: "textbox",
|
|
195
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
196
|
+
showInfo: true,
|
|
197
|
+
infoText: "This is one of the Popup content's fields",
|
|
198
|
+
placeHolder: "Enter Supplier Offer ID",
|
|
199
|
+
dropdownOptions: null,
|
|
200
|
+
dropdownDefaultValue: null
|
|
201
|
+
}, {
|
|
202
|
+
name: "VendorID",
|
|
203
|
+
label: "Vendor ID",
|
|
204
|
+
disabled: false,
|
|
205
|
+
required: false,
|
|
206
|
+
inputType: "textbox",
|
|
207
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
208
|
+
showInfo: true,
|
|
209
|
+
infoText: "This is one of the Popup content's fields",
|
|
210
|
+
placeHolder: "Enter Vendor ID",
|
|
211
|
+
dropdownOptions: null,
|
|
212
|
+
dropdownDefaultValue: null
|
|
213
|
+
}, {
|
|
214
|
+
name: "ContactPhone",
|
|
215
|
+
label: "Contact Phone",
|
|
216
|
+
disabled: false,
|
|
217
|
+
required: true,
|
|
218
|
+
inputType: "textbox",
|
|
219
|
+
//aviliable values: textbox | dropdown | checkBox | datepicker
|
|
220
|
+
showInfo: true,
|
|
221
|
+
infoText: "This is one of the Popup content's fields",
|
|
222
|
+
placeHolder: "Enter Contact Phone",
|
|
223
|
+
dropdownOptions: null,
|
|
224
|
+
dropdownDefaultValue: null
|
|
225
|
+
}];
|
|
226
|
+
const RowsData1 = [{
|
|
227
|
+
fieldsArray: FieldsDataRow1
|
|
228
|
+
}, {
|
|
229
|
+
fieldsArray: FieldsDataRow2
|
|
230
|
+
}, {
|
|
231
|
+
fieldsArray: FieldsDataRow3
|
|
232
|
+
}];
|
|
233
|
+
var _default = exports.default = {
|
|
234
|
+
title: "Campaign Tool/PopupContent",
|
|
235
|
+
component: _PopupContent.default,
|
|
236
|
+
tags: ["autodocs"],
|
|
237
|
+
argTypes: {
|
|
238
|
+
FieldsData: {
|
|
239
|
+
name: "FieldsData",
|
|
240
|
+
control: {
|
|
241
|
+
type: "object"
|
|
242
|
+
},
|
|
243
|
+
description: " object: to fill kpi columns and buttons "
|
|
244
|
+
},
|
|
245
|
+
width: {
|
|
246
|
+
name: "width",
|
|
247
|
+
control: {
|
|
248
|
+
type: "text"
|
|
249
|
+
},
|
|
250
|
+
description: "width of the control (in px / %)"
|
|
251
|
+
},
|
|
252
|
+
height: {
|
|
253
|
+
name: "height",
|
|
254
|
+
control: {
|
|
255
|
+
type: "text"
|
|
256
|
+
},
|
|
257
|
+
description: "height of the control (in px / % )"
|
|
258
|
+
},
|
|
259
|
+
onClick: {
|
|
260
|
+
action: "onClick",
|
|
261
|
+
description: "onClick event - returns an object of check box {true/false} "
|
|
262
|
+
},
|
|
263
|
+
onChange: {
|
|
264
|
+
action: "onChange",
|
|
265
|
+
description: "onChange event "
|
|
266
|
+
},
|
|
267
|
+
borderColor: {
|
|
268
|
+
name: "borderColor",
|
|
269
|
+
description: "Sets the border color",
|
|
270
|
+
control: {
|
|
271
|
+
type: "color",
|
|
272
|
+
presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
|
|
278
|
+
const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
|
|
279
|
+
ExamplePopupContent.args = {
|
|
280
|
+
rowsData: RowsData1,
|
|
281
|
+
borderColor: "#066768",
|
|
282
|
+
width: "100%",
|
|
283
|
+
height: "100%"
|
|
284
|
+
};
|
|
@@ -8,7 +8,7 @@ exports.TitleWrapper = exports.Text = exports.Seperator = exports.MoreInfo = exp
|
|
|
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, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
11
|
-
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n font-family: 'Poppins', sans-serif;\n color: #212121;\n background-color: white;\n padding: 20px;\n border-radius: 12px;\n
|
|
11
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n font-family: 'Poppins', sans-serif;\n color: #212121;\n background-color: white;\n padding: 20px;\n border-radius: 12px;\n border: 1px solid #D0D0D0;\n"])), props => props.width, props => props.height);
|
|
12
12
|
const TitleWrapper = exports.TitleWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n gap: 6px;\n"])));
|
|
13
13
|
const CardTitle = exports.CardTitle = _styledComponents.default.h5(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 14px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
14
14
|
const Headline = exports.Headline = _styledComponents.default.h6(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 500;\n margin: 0;\n"])));
|
|
@@ -7,20 +7,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
|
|
11
|
-
var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
|
|
12
10
|
var _BannerEventBoxList = require("./BannerEventBoxList.style");
|
|
13
11
|
var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
|
|
12
|
+
var _LinkButton = _interopRequireDefault(require("./LinkButton"));
|
|
14
13
|
const BannerEventBoxList = props => {
|
|
15
14
|
const {
|
|
16
|
-
title,
|
|
17
15
|
className,
|
|
18
16
|
eventName,
|
|
19
17
|
eventType,
|
|
20
18
|
width,
|
|
21
19
|
height,
|
|
22
20
|
data,
|
|
23
|
-
retailerFile
|
|
21
|
+
retailerFile,
|
|
22
|
+
toggleColor
|
|
24
23
|
} = props;
|
|
25
24
|
const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
|
|
26
25
|
const handleToggle = () => {
|
|
@@ -30,12 +29,18 @@ const BannerEventBoxList = props => {
|
|
|
30
29
|
className: className
|
|
31
30
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContainer, {
|
|
32
31
|
onClick: () => handleToggle()
|
|
33
|
-
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
color:
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
|
|
33
|
+
text: "Event Info",
|
|
34
|
+
leftIcon: "info",
|
|
35
|
+
rightIcon: "arrowdown",
|
|
36
|
+
textColor: toggleColor,
|
|
37
|
+
color: toggleColor
|
|
38
|
+
}) : /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
|
|
39
|
+
text: "Event Info",
|
|
40
|
+
leftIcon: "info",
|
|
41
|
+
rightIcon: "arrowright",
|
|
42
|
+
textColor: toggleColor,
|
|
43
|
+
color: toggleColor
|
|
39
44
|
}))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContentContainer, {
|
|
40
45
|
id: "CollapseMenuItemContentContainer"
|
|
41
46
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.EventType, null, eventType), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.EventName, null, "Event Name |", ' ', /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.EventNameSpan, null, eventName)), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.MainContainer, {
|
|
@@ -53,12 +58,12 @@ const BannerEventBoxList = props => {
|
|
|
53
58
|
})))));
|
|
54
59
|
};
|
|
55
60
|
BannerEventBoxList.defaultProps = {
|
|
56
|
-
title: 'Title',
|
|
57
61
|
className: '',
|
|
58
62
|
width: 'auto',
|
|
59
63
|
height: 'auto',
|
|
60
64
|
eventType: 'Event Type',
|
|
61
65
|
eventName: 'Event Name',
|
|
66
|
+
toggleColor: '#212121',
|
|
62
67
|
data: [{
|
|
63
68
|
banner: 'Stop&Shop',
|
|
64
69
|
description: 'description',
|
|
@@ -4,16 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.ToggleContainer = exports.MainContainer = exports.EventType = exports.EventNameSpan = exports.EventName = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8
|
|
11
|
-
const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n background: white;\n padding: 20px;\n box-shadow: 0px
|
|
12
|
-
const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const EventNameSpan = exports.EventNameSpan = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n"])));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
11
|
+
const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n background: white;\n padding: 20px 24px;\n box-shadow: 0px 8px 20px -10px rgba(0, 0, 0, 0.2);\n"])));
|
|
12
|
+
const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n"])));
|
|
13
|
+
const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
|
|
14
|
+
const ToggleContainer = exports.ToggleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n right: 0;\n cursor: 'pointer';\n"])));
|
|
15
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n display: flex;\n gap: 20px;\n padding-bottom: 4px;\n"])), props => props.width, props => props.height);
|
|
16
|
+
const EventType = exports.EventType = _styledComponents.default.h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 500;\n margin: 16px 0 20px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
17
|
+
const EventName = exports.EventName = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 500;\n margin: 0 0 20px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
18
|
+
const EventNameSpan = exports.EventNameSpan = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n"])));
|
|
@@ -0,0 +1,53 @@
|
|
|
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.FilterButton = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _FilterButton = require("./FilterButton.style");
|
|
10
|
+
var _FilterIcon = require("./icons/FilterIcon");
|
|
11
|
+
const FilterButton = props => {
|
|
12
|
+
const {
|
|
13
|
+
color,
|
|
14
|
+
activeColor,
|
|
15
|
+
height,
|
|
16
|
+
buttonText,
|
|
17
|
+
iconWidth,
|
|
18
|
+
iconHeight,
|
|
19
|
+
disabled,
|
|
20
|
+
openState,
|
|
21
|
+
onButtonClick
|
|
22
|
+
} = props;
|
|
23
|
+
const [activeState, setActiveState] = (0, _react.useState)(openState);
|
|
24
|
+
const onClickHandler = event => {
|
|
25
|
+
onButtonClick(event);
|
|
26
|
+
setActiveState(!activeState);
|
|
27
|
+
};
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
|
|
29
|
+
height: height,
|
|
30
|
+
color: activeState ? activeColor : color,
|
|
31
|
+
disabled: disabled,
|
|
32
|
+
onClick: event => {
|
|
33
|
+
onClickHandler(event);
|
|
34
|
+
}
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
|
|
36
|
+
width: iconWidth,
|
|
37
|
+
height: iconHeight,
|
|
38
|
+
color: activeState ? activeColor : color
|
|
39
|
+
}), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
|
|
40
|
+
};
|
|
41
|
+
exports.FilterButton = FilterButton;
|
|
42
|
+
var _default = exports.default = FilterButton;
|
|
43
|
+
FilterButton.defaultProps = {
|
|
44
|
+
buttonText: 'Filter',
|
|
45
|
+
height: '40px',
|
|
46
|
+
color: '#212121',
|
|
47
|
+
activeColor: '#229E38',
|
|
48
|
+
iconHeight: 12,
|
|
49
|
+
iconWidth: 12,
|
|
50
|
+
openState: false,
|
|
51
|
+
disabled: false,
|
|
52
|
+
onButtonClick: () => {}
|
|
53
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.SpanText = exports.FilterButtonWrapper = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
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 ", ";\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
|
+
const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
@@ -16,6 +16,9 @@ var _BellIcon = require("./icons/BellIcon");
|
|
|
16
16
|
var _MaintenanceIcon = require("./icons/MaintenanceIcon");
|
|
17
17
|
var _ExitIcon = require("./icons/ExitIcon");
|
|
18
18
|
var _EyeIcon = require("./icons/EyeIcon");
|
|
19
|
+
var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
|
|
20
|
+
var _MenuItemRightIcon = require("./icons/MenuItemRightIcon");
|
|
21
|
+
var _InfoIcon = require("./icons/InfoIcon");
|
|
19
22
|
const LinkButton = props => {
|
|
20
23
|
const {
|
|
21
24
|
text,
|
|
@@ -115,6 +118,30 @@ const LinkButton = props => {
|
|
|
115
118
|
width: iconWidth,
|
|
116
119
|
color: color
|
|
117
120
|
}));
|
|
121
|
+
case 'arrowdown':
|
|
122
|
+
return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
|
|
123
|
+
className: "ArrowDownIcon"
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
|
|
125
|
+
height: iconHeight,
|
|
126
|
+
width: iconWidth,
|
|
127
|
+
color: color
|
|
128
|
+
}));
|
|
129
|
+
case 'arrowright':
|
|
130
|
+
return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
|
|
131
|
+
className: "ArrowRightIcon"
|
|
132
|
+
}, /*#__PURE__*/_react.default.createElement(_MenuItemRightIcon.MenuItemRightIcon, {
|
|
133
|
+
height: iconHeight,
|
|
134
|
+
width: iconWidth,
|
|
135
|
+
color: color
|
|
136
|
+
}));
|
|
137
|
+
case 'info':
|
|
138
|
+
return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
|
|
139
|
+
className: "InfoIcon"
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
|
|
141
|
+
height: iconHeight,
|
|
142
|
+
width: iconWidth,
|
|
143
|
+
color: color
|
|
144
|
+
}));
|
|
118
145
|
default:
|
|
119
146
|
return '';
|
|
120
147
|
}
|
|
@@ -15,7 +15,7 @@ const Nav = exports.Nav = _styledComponents.default.nav(_templateObject2 || (_te
|
|
|
15
15
|
const Tabs = exports.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n"])));
|
|
16
16
|
const Tab = exports.Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n position: relative;\n text-align: center;\n padding: 8px 12px;\n font-size: 16px;\n color: #000000;\n &.active {\n font-weight: 600;\n color: ", ";\n border-bottom: 1mm solid #229E38;\n //2px solid ", ";\n }\n"])), props => props.color, props => props.color);
|
|
17
17
|
const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #EAEAEA;\n &::before {\n content: '';\n position: absolute;\n left: 0;\n z-index: 1;\n width: ", ";\n height: 2px;\n /* background-color: ", "; */\n transform: translateX(calc(100% * ", "));\n transition: transform .35s ease;\n }\n"])), props => props.width, props => props.color, props => props.activeTab);
|
|
18
|
-
const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
18
|
+
const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n"])));
|
|
19
19
|
const Label = exports.Label = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 400;\n padding: 8px;\n color: #5a5a5a;\n background-color: #E7E7E7;\n border-radius: 4px;\n > span {\n font-weight: 500;\n }\n ~ span {\n margin: 0 24px;\n font-weight: 400;\n }\n"])));
|
|
20
20
|
const ActionsWrapper = exports.ActionsWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n"])));
|
|
21
21
|
const SagIconButtonWrap = exports.SagIconButtonWrap = (0, _styledComponents.default)(_SagIconButton.default)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
@@ -9,8 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
const ArrowDownIcon = _ref => {
|
|
10
10
|
let {
|
|
11
11
|
clicked,
|
|
12
|
-
width =
|
|
13
|
-
height =
|
|
12
|
+
width = '8',
|
|
13
|
+
height = '9'
|
|
14
14
|
} = _ref;
|
|
15
15
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
16
16
|
width: width,
|
|
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
const MenuItemOpenIcon = _ref => {
|
|
10
10
|
let {
|
|
11
11
|
clicked,
|
|
12
|
-
width =
|
|
13
|
-
height =
|
|
14
|
-
color =
|
|
12
|
+
width = '16',
|
|
13
|
+
height = '16',
|
|
14
|
+
color = '#7E7E7E'
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
17
|
width: width,
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.MenuItemRightIcon = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
const MenuItemRightIcon = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
clicked,
|
|
12
|
+
width = '16',
|
|
13
|
+
height = '16',
|
|
14
|
+
color = '#212121'
|
|
15
|
+
} = _ref;
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
width: width,
|
|
18
|
+
height: height,
|
|
19
|
+
viewBox: "0 0 16 16",
|
|
20
|
+
fill: "none",
|
|
21
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M11.2969 7.20312C11.5781 7.51562 11.5781 7.98438 11.2969 8.26562L5.29688 14.2656C4.98438 14.5782 4.51562 14.5782 4.23438 14.2656C3.92188 13.9844 3.92188 13.5156 4.23438 13.2344L9.70312 7.76562L4.23438 2.26562C3.92188 1.98438 3.92188 1.51562 4.23438 1.23438C4.51562 0.921875 4.98438 0.921875 5.26562 1.23438L11.2969 7.20312Z",
|
|
24
|
+
fill: color
|
|
25
|
+
}));
|
|
26
|
+
};
|
|
27
|
+
exports.MenuItemRightIcon = MenuItemRightIcon;
|
|
28
|
+
var _default = exports.default = MenuItemRightIcon;
|
|
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
const MenuItemUpIcon = _ref => {
|
|
10
10
|
let {
|
|
11
11
|
clicked,
|
|
12
|
-
width =
|
|
13
|
-
height =
|
|
14
|
-
color =
|
|
12
|
+
width = '16',
|
|
13
|
+
height = '16',
|
|
14
|
+
color = '#212121'
|
|
15
15
|
} = _ref;
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
17
|
width: width,
|
package/package.json
CHANGED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
12
|
-
var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
|
|
13
|
-
var _TextField = _interopRequireDefault(require("./TextField"));
|
|
14
|
-
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
|
|
15
|
-
var _reactHookForm = require("react-hook-form");
|
|
16
|
-
var _Modal2 = require("./Modal.style");
|
|
17
|
-
var TotalCostModal = function TotalCostModal(_ref) {
|
|
18
|
-
var title = _ref.title,
|
|
19
|
-
isModalOpen = _ref.isModalOpen,
|
|
20
|
-
setModalOpen = _ref.setModalOpen,
|
|
21
|
-
setResult = _ref.setResult;
|
|
22
|
-
var _useState = (0, _react.useState)([{
|
|
23
|
-
id: "title",
|
|
24
|
-
label: "Title",
|
|
25
|
-
type: "text"
|
|
26
|
-
}, {
|
|
27
|
-
id: "dotCut",
|
|
28
|
-
label: "Do Cut",
|
|
29
|
-
type: "select",
|
|
30
|
-
options: ["true", "false"]
|
|
31
|
-
}, {
|
|
32
|
-
id: "currency",
|
|
33
|
-
label: "Currency",
|
|
34
|
-
type: "select",
|
|
35
|
-
options: ["true", "false"]
|
|
36
|
-
}, {
|
|
37
|
-
id: "currencyType",
|
|
38
|
-
label: "Currency Type",
|
|
39
|
-
type: "select",
|
|
40
|
-
options: ["USD", "EUR", "ILS", "GBP", "JPY"]
|
|
41
|
-
}, {
|
|
42
|
-
id: "width",
|
|
43
|
-
label: "Width",
|
|
44
|
-
type: "text"
|
|
45
|
-
}, {
|
|
46
|
-
id: "height",
|
|
47
|
-
label: "Height",
|
|
48
|
-
type: "text"
|
|
49
|
-
}, {
|
|
50
|
-
id: "textColor",
|
|
51
|
-
label: "Text Color",
|
|
52
|
-
type: "text"
|
|
53
|
-
}, {
|
|
54
|
-
id: "noDataText",
|
|
55
|
-
label: "No Data Text",
|
|
56
|
-
type: "text"
|
|
57
|
-
}]),
|
|
58
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
59
|
-
params = _useState2[0],
|
|
60
|
-
setParams = _useState2[1];
|
|
61
|
-
var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
|
|
62
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
63
|
-
code = _useState4[0],
|
|
64
|
-
setCode = _useState4[1];
|
|
65
|
-
var _useForm = (0, _reactHookForm.useForm)(),
|
|
66
|
-
register = _useForm.register,
|
|
67
|
-
handleSubmit = _useForm.handleSubmit,
|
|
68
|
-
watch = _useForm.watch,
|
|
69
|
-
control = _useForm.control,
|
|
70
|
-
errors = _useForm.formState.errors;
|
|
71
|
-
var onSubmit = function onSubmit(data) {
|
|
72
|
-
return setResult(data);
|
|
73
|
-
};
|
|
74
|
-
return /*#__PURE__*/_react.default.createElement("form", {
|
|
75
|
-
onSubmit: handleSubmit(onSubmit)
|
|
76
|
-
}, /*#__PURE__*/_react.default.createElement(_Modal.default, {
|
|
77
|
-
isOpen: isModalOpen,
|
|
78
|
-
onClose: function onClose() {
|
|
79
|
-
return setModalOpen(false);
|
|
80
|
-
}
|
|
81
|
-
}, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
82
|
-
style: {
|
|
83
|
-
gap: "10px",
|
|
84
|
-
display: "grid"
|
|
85
|
-
}
|
|
86
|
-
}, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
|
|
87
|
-
value: code,
|
|
88
|
-
onChange: setCode
|
|
89
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
90
|
-
style: {
|
|
91
|
-
gap: "10px",
|
|
92
|
-
display: "grid",
|
|
93
|
-
gridTemplateColumns: "auto auto auto"
|
|
94
|
-
}
|
|
95
|
-
}, params.map(function (item) {
|
|
96
|
-
if (item.type === "text") {
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
|
|
98
|
-
control: control,
|
|
99
|
-
name: item.id,
|
|
100
|
-
render: function render(_ref2) {
|
|
101
|
-
var field = _ref2.field;
|
|
102
|
-
return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
|
|
103
|
-
allowedInput: "all",
|
|
104
|
-
height: "100%",
|
|
105
|
-
label: item.label,
|
|
106
|
-
multiline: true,
|
|
107
|
-
placeHolder: "Type...",
|
|
108
|
-
shape: "round",
|
|
109
|
-
size: "small",
|
|
110
|
-
width: "300px"
|
|
111
|
-
}));
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
} else {
|
|
115
|
-
return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
|
|
116
|
-
control: control,
|
|
117
|
-
name: item.id,
|
|
118
|
-
render: function render(_ref3) {
|
|
119
|
-
var field = _ref3.field;
|
|
120
|
-
return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
|
|
121
|
-
allowedInput: "all",
|
|
122
|
-
labelColor: "#1B30AA",
|
|
123
|
-
limitTagsOnMultiSelect: 0,
|
|
124
|
-
onInputChange: function onInputChange(e) {
|
|
125
|
-
var _e$inputValue;
|
|
126
|
-
console.log("e", e);
|
|
127
|
-
field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
|
|
128
|
-
},
|
|
129
|
-
options: item.options,
|
|
130
|
-
placeHolder: "Type...",
|
|
131
|
-
shape: "round",
|
|
132
|
-
size: "small",
|
|
133
|
-
text: item.label,
|
|
134
|
-
width: "300px"
|
|
135
|
-
}));
|
|
136
|
-
}
|
|
137
|
-
});
|
|
138
|
-
}
|
|
139
|
-
}))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
|
|
140
|
-
type: "submit"
|
|
141
|
-
})));
|
|
142
|
-
};
|
|
143
|
-
var _default = exports.default = TotalCostModal;
|