sag_components 1.0.696 → 1.0.698
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/BannerEventBox.js +9 -6
- package/dist/stories/components/BannerEventBoxList.js +2 -6
- package/dist/stories/components/DropdownSingleNew.style.js +2 -2
- package/dist/stories/components/FilterPanel.js +3 -2
- package/dist/stories/components/LinnerDataBox.js +6 -3
- package/dist/stories/components/LinnerDataBox.style.js +9 -9
- package/package.json +1 -1
|
@@ -61,9 +61,12 @@ const BannerEventBox = props => {
|
|
|
61
61
|
width: width
|
|
62
62
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBox.TitleWrapper, null, formatedBanners(banner).icon, "|", /*#__PURE__*/_react.default.createElement(_BannerEventBox.CardTitle, null, formatedBanners(banner).name)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Description"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, description)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Dates:"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, dates.join(' - '))), /*#__PURE__*/_react.default.createElement(_BannerEventBox.MoreInfo, {
|
|
63
63
|
onClick: () => onInfoClickHandler(banner)
|
|
64
|
-
}, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) =>
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
}, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => {
|
|
65
|
+
var _item$items;
|
|
66
|
+
return item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
67
|
+
key: item.name
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, null, item.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null));
|
|
69
|
+
})));
|
|
67
70
|
};
|
|
68
71
|
exports.BannerEventBox = BannerEventBox;
|
|
69
72
|
var _default = exports.default = BannerEventBox;
|
|
@@ -75,13 +78,13 @@ BannerEventBox.defaultProps = {
|
|
|
75
78
|
dates: ['2021-06-01', '2021-06-30'],
|
|
76
79
|
data: [{
|
|
77
80
|
name: 'Supplier',
|
|
78
|
-
items:
|
|
81
|
+
items: ['coca', 'cola', 'spring']
|
|
79
82
|
}, {
|
|
80
83
|
name: 'Brands',
|
|
81
|
-
items:
|
|
84
|
+
items: ['coca', 'cola', 'spring', 'cola']
|
|
82
85
|
}, {
|
|
83
86
|
name: 'Product Lines',
|
|
84
|
-
items:
|
|
87
|
+
items: ['coca', 'cola', 'spring']
|
|
85
88
|
}],
|
|
86
89
|
onInfoClick: () => {}
|
|
87
90
|
};
|
|
@@ -19,8 +19,7 @@ const BannerEventBoxList = props => {
|
|
|
19
19
|
height,
|
|
20
20
|
data,
|
|
21
21
|
retailerFile,
|
|
22
|
-
toggleColor
|
|
23
|
-
disableToggle
|
|
22
|
+
toggleColor
|
|
24
23
|
} = props;
|
|
25
24
|
const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
|
|
26
25
|
const handleToggle = () => {
|
|
@@ -31,14 +30,12 @@ const BannerEventBoxList = props => {
|
|
|
31
30
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContainer, {
|
|
32
31
|
onClick: () => handleToggle()
|
|
33
32
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
|
|
34
|
-
disabled: disableToggle,
|
|
35
33
|
text: "Event Info",
|
|
36
34
|
leftIcon: "info",
|
|
37
35
|
rightIcon: "arrowdown",
|
|
38
36
|
textColor: toggleColor,
|
|
39
37
|
color: toggleColor
|
|
40
38
|
}) : /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
|
|
41
|
-
disabled: disableToggle,
|
|
42
39
|
text: "Event Info",
|
|
43
40
|
leftIcon: "info",
|
|
44
41
|
rightIcon: "arrowright",
|
|
@@ -98,7 +95,6 @@ BannerEventBoxList.defaultProps = {
|
|
|
98
95
|
items: ['coca', 'mentos', 'spring', 'cola']
|
|
99
96
|
}]
|
|
100
97
|
}],
|
|
101
|
-
retailerFile: () => {}
|
|
102
|
-
disableToggle: false
|
|
98
|
+
retailerFile: () => {}
|
|
103
99
|
};
|
|
104
100
|
var _default = exports.default = BannerEventBoxList;
|
|
@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
11
11
|
/* eslint-disable no-nested-ternary */
|
|
12
12
|
const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px; \n"])), props => props.width || '300px');
|
|
13
|
-
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
|
|
13
|
+
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
|
|
14
14
|
const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n margin-bottom: 8px;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: transparent; \n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
|
|
15
15
|
const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: transparent; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
|
|
16
16
|
const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n background-color: transparent; \n color: ", "; \n border: none;\n"])), props => props.disabled ? '#888' : '#212121');
|
|
@@ -18,7 +18,7 @@ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.di
|
|
|
18
18
|
var _props$filteredoption;
|
|
19
19
|
return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
|
|
20
20
|
});
|
|
21
|
-
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 101;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color:
|
|
21
|
+
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 101;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: ", ";\n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n max-height: 400px;\n overflow: auto;\n"])), props => props.backgroundColor || 'transparent', props => {
|
|
22
22
|
var _props$filteredoption2;
|
|
23
23
|
return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? 'block' : 'none';
|
|
24
24
|
});
|
|
@@ -31,7 +31,8 @@ const FilterPanel = props => {
|
|
|
31
31
|
onItemValueChanged,
|
|
32
32
|
width,
|
|
33
33
|
height,
|
|
34
|
-
disableOKButton
|
|
34
|
+
disableOKButton,
|
|
35
|
+
className
|
|
35
36
|
} = props;
|
|
36
37
|
const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
|
|
37
38
|
const [Reset, setReset] = (0, _react.useState)(false);
|
|
@@ -419,7 +420,7 @@ const FilterPanel = props => {
|
|
|
419
420
|
}, displayField(item))));
|
|
420
421
|
};
|
|
421
422
|
return /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
|
|
422
|
-
className:
|
|
423
|
+
className: className,
|
|
423
424
|
height: height,
|
|
424
425
|
width: width
|
|
425
426
|
}, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
|
|
@@ -12,9 +12,11 @@ const LinnerDataBox = props => {
|
|
|
12
12
|
const {
|
|
13
13
|
width,
|
|
14
14
|
height,
|
|
15
|
-
data
|
|
15
|
+
data,
|
|
16
|
+
backgroundColor
|
|
16
17
|
} = props;
|
|
17
18
|
return /*#__PURE__*/_react.default.createElement(_LinnerDataBox.LinnerContainer, {
|
|
19
|
+
backgroundColor: backgroundColor,
|
|
18
20
|
width: width || '100%',
|
|
19
21
|
height: height || '200px'
|
|
20
22
|
}, data.map(item => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, null, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, 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)))), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, ''.concat('$', (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title))))));
|
|
@@ -23,6 +25,7 @@ exports.LinnerDataBox = LinnerDataBox;
|
|
|
23
25
|
var _default = exports.default = LinnerDataBox;
|
|
24
26
|
LinnerDataBox.defaultProps = {
|
|
25
27
|
width: '100%',
|
|
26
|
-
height: '
|
|
27
|
-
data: []
|
|
28
|
+
height: 'auto',
|
|
29
|
+
data: [],
|
|
30
|
+
backgroundColor: '#FFFFFF'
|
|
28
31
|
};
|
|
@@ -8,13 +8,13 @@ exports.LinnerContainer = exports.DataBoxTitle = exports.DataBoxExtraInfoCellVal
|
|
|
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;
|
|
11
|
-
const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-
|
|
12
|
-
const DataBox = exports.DataBox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
13
|
-
const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.
|
|
14
|
-
const DataBoxContent = exports.DataBoxContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n
|
|
15
|
-
const
|
|
16
|
-
const
|
|
11
|
+
const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n width: ", ";\n height: ", ";\n background-color: ", ";\n padding: 50px 40px 30px;\n"])), props => props.width, props => props.height, props => props.backgroundColor);
|
|
12
|
+
const DataBox = exports.DataBox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-weight: 400;\n"])));
|
|
13
|
+
const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n"])));
|
|
14
|
+
const DataBoxContent = exports.DataBoxContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n"])));
|
|
15
|
+
const DataBoxContentSign = exports.DataBoxContentSign = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n"])));
|
|
16
|
+
const DataBoxContentValue = exports.DataBoxContentValue = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 40px;\n font-weight: 500;\n"])));
|
|
17
17
|
const DataBoxExtraInfo = exports.DataBoxExtraInfo = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
|
|
18
|
-
const DataBoxExtraInfoCell = exports.DataBoxExtraInfoCell = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 5px;\n
|
|
19
|
-
const DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCellTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-
|
|
20
|
-
const DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-
|
|
18
|
+
const DataBoxExtraInfoCell = exports.DataBoxExtraInfoCell = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 5px;\n"])));
|
|
19
|
+
const DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCellTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-size: 12px;\n text-transform: uppercase;\n"])));
|
|
20
|
+
const DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-size: 12px;\n text-transform: uppercase;\n"])));
|