sag_components 1.0.698 → 1.0.700
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 +6 -9
- package/dist/stories/components/BannerEventBoxList.js +6 -2
- package/dist/stories/components/BarChartTwoRows.js +1 -1
- package/dist/stories/components/DropdownSingleNew.style.js +2 -2
- package/dist/stories/components/TotalHorizontalCharts.style.js +3 -3
- package/package.json +1 -1
|
@@ -61,12 +61,9 @@ 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
|
-
|
|
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
|
-
})));
|
|
64
|
+
}, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
65
|
+
key: item.name
|
|
66
|
+
}, /*#__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)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null)))));
|
|
70
67
|
};
|
|
71
68
|
exports.BannerEventBox = BannerEventBox;
|
|
72
69
|
var _default = exports.default = BannerEventBox;
|
|
@@ -78,13 +75,13 @@ BannerEventBox.defaultProps = {
|
|
|
78
75
|
dates: ['2021-06-01', '2021-06-30'],
|
|
79
76
|
data: [{
|
|
80
77
|
name: 'Supplier',
|
|
81
|
-
items:
|
|
78
|
+
items: 7
|
|
82
79
|
}, {
|
|
83
80
|
name: 'Brands',
|
|
84
|
-
items:
|
|
81
|
+
items: 8
|
|
85
82
|
}, {
|
|
86
83
|
name: 'Product Lines',
|
|
87
|
-
items:
|
|
84
|
+
items: 9
|
|
88
85
|
}],
|
|
89
86
|
onInfoClick: () => {}
|
|
90
87
|
};
|
|
@@ -19,7 +19,8 @@ const BannerEventBoxList = props => {
|
|
|
19
19
|
height,
|
|
20
20
|
data,
|
|
21
21
|
retailerFile,
|
|
22
|
-
toggleColor
|
|
22
|
+
toggleColor,
|
|
23
|
+
disableToggle
|
|
23
24
|
} = props;
|
|
24
25
|
const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
|
|
25
26
|
const handleToggle = () => {
|
|
@@ -30,12 +31,14 @@ const BannerEventBoxList = props => {
|
|
|
30
31
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContainer, {
|
|
31
32
|
onClick: () => handleToggle()
|
|
32
33
|
}, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
|
|
34
|
+
disabled: disableToggle,
|
|
33
35
|
text: "Event Info",
|
|
34
36
|
leftIcon: "info",
|
|
35
37
|
rightIcon: "arrowdown",
|
|
36
38
|
textColor: toggleColor,
|
|
37
39
|
color: toggleColor
|
|
38
40
|
}) : /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
|
|
41
|
+
disabled: disableToggle,
|
|
39
42
|
text: "Event Info",
|
|
40
43
|
leftIcon: "info",
|
|
41
44
|
rightIcon: "arrowright",
|
|
@@ -95,6 +98,7 @@ BannerEventBoxList.defaultProps = {
|
|
|
95
98
|
items: ['coca', 'mentos', 'spring', 'cola']
|
|
96
99
|
}]
|
|
97
100
|
}],
|
|
98
|
-
retailerFile: () => {}
|
|
101
|
+
retailerFile: () => {},
|
|
102
|
+
disableToggle: false
|
|
99
103
|
};
|
|
100
104
|
var _default = exports.default = BannerEventBoxList;
|
|
@@ -147,7 +147,7 @@ const BarChartTwoRows = props => {
|
|
|
147
147
|
fill: barChartColorFirst,
|
|
148
148
|
minPointSize: 5,
|
|
149
149
|
barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
|
|
150
|
-
radius:
|
|
150
|
+
radius: 0,
|
|
151
151
|
stackId: "a"
|
|
152
152
|
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
153
153
|
dataKey: "highValue",
|
|
@@ -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
|
|
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');
|
|
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: white;\n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n max-height: 400px;\n overflow: auto;\n"])), 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
|
});
|
|
@@ -9,9 +9,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
11
11
|
const scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
|
|
12
|
-
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif; \n color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n margin: 0;\n .top {\n text-align: center;\n white-space: normal;\n &:before {\n display: none;\n }\n }\n"])), props => props.textColor, props => props.width, props => props.height);
|
|
13
|
-
const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n height: 80
|
|
14
|
-
const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n height: 100%;\n width: 100%;\n"])));
|
|
12
|
+
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif; \n color: ", ";\n width: ", ";\n height: ", ";\n background-color: white;\n display: flex;\n flex-direction: column;\n margin: 0;\n .top {\n text-align: center;\n white-space: normal;\n &:before {\n display: none;\n }\n }\n"])), props => props.textColor, props => props.width, props => props.height);
|
|
13
|
+
const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n /* height: 80%; */\n flex-grow: 1;\n width: 100%;\n"])), scrollableStyles);
|
|
14
|
+
const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0; \n height: 100%;\n width: 100%;\n ", "\n overflow-y: scroll;\n"])), scrollableStyles);
|
|
15
15
|
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n padding: 0 20px;\n"])));
|
|
16
16
|
const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
17
17
|
const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 20px;\n font-weight: 400;\n line-height: 1;\n margin: 0 0 8px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|