sag_components 1.0.793 → 1.0.795
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/EventInfo.js +92 -0
- package/dist/stories/components/EventInfo.style.js +20 -0
- package/dist/stories/components/FilterButton.js +4 -10
- package/dist/stories/components/FilterButton.style.js +1 -1
- package/dist/stories/components/TabMenu.style.js +1 -1
- package/dist/stories/components/TotalHorizontalCharts.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,92 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
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');
|
|
@@ -1,33 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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 = _interopRequireDefault(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,
|
|
15
14
|
height,
|
|
16
15
|
buttonText,
|
|
17
16
|
iconWidth,
|
|
18
17
|
iconHeight,
|
|
19
18
|
disabled,
|
|
20
|
-
openState,
|
|
21
19
|
onButtonClick
|
|
22
20
|
} = props;
|
|
23
|
-
const [activeState, setActiveState] = (0, _react.useState)(openState);
|
|
24
21
|
const onClickHandler = event => {
|
|
25
22
|
onButtonClick(event);
|
|
26
|
-
setActiveState(!activeState);
|
|
27
23
|
};
|
|
28
24
|
return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
|
|
29
25
|
height: height,
|
|
30
|
-
color:
|
|
26
|
+
color: color,
|
|
31
27
|
disabled: disabled,
|
|
32
28
|
onClick: event => {
|
|
33
29
|
onClickHandler(event);
|
|
@@ -35,7 +31,7 @@ const FilterButton = props => {
|
|
|
35
31
|
}, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
|
|
36
32
|
width: iconWidth,
|
|
37
33
|
height: iconHeight,
|
|
38
|
-
color:
|
|
34
|
+
color: color
|
|
39
35
|
}), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
|
|
40
36
|
};
|
|
41
37
|
exports.FilterButton = FilterButton;
|
|
@@ -44,10 +40,8 @@ FilterButton.defaultProps = {
|
|
|
44
40
|
buttonText: 'Filter',
|
|
45
41
|
height: '40px',
|
|
46
42
|
color: '#212121',
|
|
47
|
-
activeColor: '#229E38',
|
|
48
43
|
iconHeight: 12,
|
|
49
44
|
iconWidth: 12,
|
|
50
|
-
openState: false,
|
|
51
45
|
disabled: false,
|
|
52
46
|
onButtonClick: () => {}
|
|
53
47
|
};
|
|
@@ -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 #B1B1B1;\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);
|
|
12
12
|
const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
@@ -17,7 +17,7 @@ const Nav = exports.Nav = _styledComponents.default.nav(_templateObject3 || (_te
|
|
|
17
17
|
const Tabs = exports.Tabs = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n"])));
|
|
18
18
|
const Tab = exports.Tab = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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);
|
|
19
19
|
const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (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);
|
|
20
|
-
const Body = exports.Body = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n ", "\n overflow-x: hidden;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n"])), scrollableStyles, props => props.setBackground ? '20px' : '5px', props => props.setBackground ? 'white' : 'unset', props => props.setBackground ? '12px' : '0', props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset');
|
|
20
|
+
const Body = exports.Body = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n ", "\n position: relative;\n overflow-x: hidden;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n"])), scrollableStyles, props => props.setBackground ? '20px' : '5px', props => props.setBackground ? 'white' : 'unset', props => props.setBackground ? '12px' : '0', props => props.setBackground ? '0px 0px 20px 0px rgba(0, 0, 0, 0.10)' : 'unset');
|
|
21
21
|
const Label = exports.Label = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (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"])));
|
|
22
22
|
const ActionsWrapper = exports.ActionsWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n"])));
|
|
23
23
|
const SagIconButtonWrap = exports.SagIconButtonWrap = (0, _styledComponents.default)(_SagIconButton.default)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|