sag_components 1.0.979 → 1.0.981
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/Button.js +11 -2
- package/dist/stories/components/Button.style.js +2 -2
- package/dist/stories/components/DialogOverlay.js +42 -0
- package/dist/stories/components/DialogOverlay.style.js +69 -0
- package/dist/stories/components/TabMenu.js +44 -25
- package/dist/stories/components/TabMenu.style.js +7 -1
- package/dist/stories/components/icons/ButtonArrowRight.js +27 -0
- package/dist/stories/components/icons/CloseXIcon.js +3 -3
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ 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 _ButtonArrowRight = require("./icons/ButtonArrowRight");
|
|
19
20
|
const Button = props => {
|
|
20
21
|
const {
|
|
21
22
|
text,
|
|
@@ -55,14 +56,22 @@ const Button = props => {
|
|
|
55
56
|
}, 300);
|
|
56
57
|
};
|
|
57
58
|
const getIcon = icon => {
|
|
58
|
-
const iconHeight = '
|
|
59
|
-
const iconWidth = '
|
|
59
|
+
const iconHeight = '16px';
|
|
60
|
+
const iconWidth = '16px';
|
|
60
61
|
const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
|
|
61
62
|
const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
|
|
62
63
|
const newDisabledTextColor = disabledTextColor || '#B1B1B1';
|
|
63
64
|
const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
|
|
64
65
|
const color = disabled ? newDisabledTextColor : newEnabledTextColor;
|
|
65
66
|
switch (icon.toLowerCase()) {
|
|
67
|
+
case 'arrow':
|
|
68
|
+
return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
|
|
69
|
+
className: "ArrowRightIcon"
|
|
70
|
+
}, /*#__PURE__*/_react.default.createElement(_ButtonArrowRight.ButtonArrowRight, {
|
|
71
|
+
height: iconHeight,
|
|
72
|
+
width: iconWidth,
|
|
73
|
+
color: color
|
|
74
|
+
}));
|
|
66
75
|
case 'filter':
|
|
67
76
|
return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
|
|
68
77
|
className: "FilterIcon"
|
|
@@ -47,10 +47,10 @@ const ButtonItem = exports.ButtonItem = _styledComponents.default.div`
|
|
|
47
47
|
`;
|
|
48
48
|
const Label = exports.Label = _styledComponents.default.label`
|
|
49
49
|
font-family: "Poppins";
|
|
50
|
-
font-
|
|
50
|
+
font-size: 14px;
|
|
51
51
|
font-weight: 400;
|
|
52
|
+
line-height: 0;
|
|
52
53
|
pointer-events: none;
|
|
53
|
-
font-size: 14px;
|
|
54
54
|
user-select: none;
|
|
55
55
|
`;
|
|
56
56
|
const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
|
|
@@ -0,0 +1,42 @@
|
|
|
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 _CloseXIcon = require("./icons/CloseXIcon");
|
|
10
|
+
var _DialogOverlay = require("./DialogOverlay.style");
|
|
11
|
+
const DialogOverlay = props => {
|
|
12
|
+
const {
|
|
13
|
+
title,
|
|
14
|
+
children,
|
|
15
|
+
openModal
|
|
16
|
+
} = props;
|
|
17
|
+
const [isModalOpen, setIsModalOpen] = (0, _react.useState)(openModal);
|
|
18
|
+
(0, _react.useEffect)(() => {
|
|
19
|
+
if (isModalOpen) {
|
|
20
|
+
const modal = document.querySelector('dialog');
|
|
21
|
+
modal.showModal();
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
24
|
+
const closeModal = () => {
|
|
25
|
+
setIsModalOpen(false);
|
|
26
|
+
const modal = document.querySelector('dialog');
|
|
27
|
+
modal.close();
|
|
28
|
+
};
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.Modal, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalTitle, null, title), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalClose, {
|
|
30
|
+
type: "button",
|
|
31
|
+
onClick: closeModal,
|
|
32
|
+
"aria-label": "Close"
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
|
|
34
|
+
fill: "white"
|
|
35
|
+
}))), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalBody, null, children)));
|
|
36
|
+
};
|
|
37
|
+
var _default = exports.default = DialogOverlay;
|
|
38
|
+
DialogOverlay.defaultProps = {
|
|
39
|
+
title: 'Title',
|
|
40
|
+
children: null,
|
|
41
|
+
openModal: false
|
|
42
|
+
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ModalWrapper = exports.ModalTitle = exports.ModalHeader = exports.ModalClose = exports.ModalBody = exports.Modal = void 0;
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
const scrollableStyles = `
|
|
10
|
+
overflow-y: auto;
|
|
11
|
+
|
|
12
|
+
&::-webkit-scrollbar {
|
|
13
|
+
width: 8px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&::-webkit-scrollbar-track {
|
|
17
|
+
background: #D0D0D0;
|
|
18
|
+
border-radius: 5px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&::-webkit-scrollbar-thumb {
|
|
22
|
+
background: #E3E4E5;
|
|
23
|
+
border-radius: 5px;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
const ModalWrapper = exports.ModalWrapper = _styledComponents.default.dialog`
|
|
27
|
+
width: 100vw;
|
|
28
|
+
height: 100vh;
|
|
29
|
+
padding: 20px;
|
|
30
|
+
border: none;
|
|
31
|
+
border-radius: 8px;
|
|
32
|
+
background-color: #fff;
|
|
33
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
34
|
+
|
|
35
|
+
&[open] {
|
|
36
|
+
background-color: rgba(24, 24, 24, 0.80);
|
|
37
|
+
position: fixed;
|
|
38
|
+
inset: 0;
|
|
39
|
+
align-content: center;
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
const Modal = exports.Modal = _styledComponents.default.div`
|
|
43
|
+
width: 79%;
|
|
44
|
+
max-width: 1500px;
|
|
45
|
+
margin: 0 auto;
|
|
46
|
+
${scrollableStyles}
|
|
47
|
+
`;
|
|
48
|
+
const ModalHeader = exports.ModalHeader = _styledComponents.default.div`
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: space-between;
|
|
52
|
+
margin-bottom: 32px;
|
|
53
|
+
`;
|
|
54
|
+
const ModalBody = exports.ModalBody = _styledComponents.default.div`
|
|
55
|
+
${scrollableStyles}
|
|
56
|
+
max-height: 70%;
|
|
57
|
+
`;
|
|
58
|
+
const ModalTitle = exports.ModalTitle = _styledComponents.default.h5`
|
|
59
|
+
font-family: 'Poppins', sans-serif;
|
|
60
|
+
font-size: 32px;
|
|
61
|
+
font-weight: 500;
|
|
62
|
+
color: white;
|
|
63
|
+
margin: 0;
|
|
64
|
+
`;
|
|
65
|
+
const ModalClose = exports.ModalClose = _styledComponents.default.button`
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
border: none;
|
|
68
|
+
background-color: transparent;
|
|
69
|
+
`;
|
|
@@ -8,27 +8,34 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _MarketShareDescription = _interopRequireDefault(require("./MarketShareDescription"));
|
|
11
|
+
var _Button = _interopRequireDefault(require("./Button"));
|
|
11
12
|
var _TabMenu = require("./TabMenu.style");
|
|
12
13
|
var _SagIconButton = _interopRequireDefault(require("./SagIconButton"));
|
|
13
14
|
const TabMenu = props => {
|
|
14
15
|
const {
|
|
15
|
-
|
|
16
|
-
color,
|
|
16
|
+
activeColor,
|
|
17
17
|
children,
|
|
18
|
+
className,
|
|
19
|
+
color,
|
|
20
|
+
currentTab,
|
|
21
|
+
headlineInsteadTabs,
|
|
22
|
+
headlineText,
|
|
23
|
+
inputWidth,
|
|
24
|
+
onFilterButtonClick,
|
|
25
|
+
onSearchFieldTyping,
|
|
26
|
+
onTabChange,
|
|
27
|
+
panelIsOpen,
|
|
18
28
|
setBackground,
|
|
19
29
|
showActions,
|
|
20
30
|
showFilterButton,
|
|
21
|
-
showViewOptionsButton,
|
|
22
|
-
showSearchInput,
|
|
23
31
|
showLabel,
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
className
|
|
32
|
+
showSearchInput,
|
|
33
|
+
showViewOptionsButton,
|
|
34
|
+
setTopRightButton,
|
|
35
|
+
rightButtonText,
|
|
36
|
+
rightButtonIcon,
|
|
37
|
+
onTopButtonClick,
|
|
38
|
+
tabs
|
|
32
39
|
} = props;
|
|
33
40
|
const [activeTab, setActiveTab] = (0, _react.useState)(currentTab);
|
|
34
41
|
const handleTabChange = index => {
|
|
@@ -47,7 +54,7 @@ const TabMenu = props => {
|
|
|
47
54
|
openState: panelIsOpen,
|
|
48
55
|
activeColor: activeColor,
|
|
49
56
|
onButtonClick: onFilterButtonClick
|
|
50
|
-
}), /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, {
|
|
57
|
+
}), headlineInsteadTabs ? /*#__PURE__*/_react.default.createElement(_TabMenu.Headline, null, headlineText) : /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, {
|
|
51
58
|
className: "Nav"
|
|
52
59
|
}, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, {
|
|
53
60
|
className: "Tabs"
|
|
@@ -68,7 +75,12 @@ const TabMenu = props => {
|
|
|
68
75
|
color: color,
|
|
69
76
|
width: `${100 / tabs.length}%`,
|
|
70
77
|
role: "presentation"
|
|
71
|
-
})))
|
|
78
|
+
}))), setTopRightButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
79
|
+
text: rightButtonText,
|
|
80
|
+
rightIcon: rightButtonIcon,
|
|
81
|
+
size: "small",
|
|
82
|
+
onClick: () => onTopButtonClick()
|
|
83
|
+
})), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, {
|
|
72
84
|
className: "ActionsWrapper"
|
|
73
85
|
}, showLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Label, {
|
|
74
86
|
className: "Label"
|
|
@@ -86,15 +98,28 @@ const TabMenu = props => {
|
|
|
86
98
|
}, tabs[activeTab] && tabs[activeTab].content));
|
|
87
99
|
};
|
|
88
100
|
TabMenu.defaultProps = {
|
|
101
|
+
activeColor: '#229E38',
|
|
102
|
+
children: null,
|
|
103
|
+
className: 'TabMenuContainer',
|
|
89
104
|
color: '#229E38',
|
|
105
|
+
currentTab: 0,
|
|
106
|
+
headlineInsteadTabs: false,
|
|
107
|
+
headlineText: 'Headline',
|
|
108
|
+
inputWidth: '100%',
|
|
109
|
+
onFilterButtonClick: () => {},
|
|
110
|
+
onSearchFieldTyping: () => {},
|
|
111
|
+
onTabChange: () => {},
|
|
112
|
+
panelIsOpen: false,
|
|
90
113
|
setBackground: false,
|
|
91
114
|
showActions: true,
|
|
92
|
-
showLabel: true,
|
|
93
115
|
showFilterButton: true,
|
|
94
|
-
|
|
116
|
+
showLabel: true,
|
|
95
117
|
showSearchInput: true,
|
|
96
|
-
|
|
97
|
-
|
|
118
|
+
showViewOptionsButton: true,
|
|
119
|
+
setTopRightButton: false,
|
|
120
|
+
rightButtonText: 'Button',
|
|
121
|
+
rightButtonIcon: 'arrow',
|
|
122
|
+
onTopButtonClick: () => {},
|
|
98
123
|
tabs: [{
|
|
99
124
|
title: 'Overview',
|
|
100
125
|
content: /*#__PURE__*/_react.default.createElement(_MarketShareDescription.default, {
|
|
@@ -202,12 +227,6 @@ TabMenu.defaultProps = {
|
|
|
202
227
|
}, {
|
|
203
228
|
title: 'Shopper Behavior',
|
|
204
229
|
content: 'Content'
|
|
205
|
-
}]
|
|
206
|
-
onTabChange: () => {},
|
|
207
|
-
panelIsOpen: false,
|
|
208
|
-
activeColor: '#229E38',
|
|
209
|
-
onFilterButtonClick: () => {},
|
|
210
|
-
onSearchFieldTyping: () => {},
|
|
211
|
-
className: 'TabMenuContainer'
|
|
230
|
+
}]
|
|
212
231
|
};
|
|
213
232
|
var _default = exports.default = TabMenu;
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.TopRow = exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.SearchInputWrap = exports.SagIconButtonWrap = exports.PresentationSlider = exports.Nav = exports.Label = exports.Body = exports.ActionsWrapper = void 0;
|
|
7
|
+
exports.TopRow = exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.SearchInputWrap = exports.SagIconButtonWrap = exports.PresentationSlider = exports.Nav = exports.Label = exports.Headline = exports.Body = exports.ActionsWrapper = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
var _SagIconButton = _interopRequireDefault(require("./SagIconButton"));
|
|
10
10
|
var _SearchInput = _interopRequireDefault(require("./SearchInput"));
|
|
@@ -33,8 +33,14 @@ const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.di
|
|
|
33
33
|
`;
|
|
34
34
|
const TopRow = exports.TopRow = _styledComponents.default.div`
|
|
35
35
|
display: flex;
|
|
36
|
+
align-items: center;
|
|
36
37
|
gap: 20px;
|
|
37
38
|
`;
|
|
39
|
+
const Headline = exports.Headline = _styledComponents.default.span`
|
|
40
|
+
font-size: 18px;
|
|
41
|
+
font-weight: 500;
|
|
42
|
+
margin-right: auto;
|
|
43
|
+
`;
|
|
38
44
|
const Nav = exports.Nav = _styledComponents.default.nav`
|
|
39
45
|
`;
|
|
40
46
|
const Tabs = exports.Tabs = _styledComponents.default.div`
|
|
@@ -0,0 +1,27 @@
|
|
|
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.ButtonArrowRight = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
const ButtonArrowRight = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
width = '16',
|
|
12
|
+
height = '17'
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
viewBox: "0 0 16 17",
|
|
18
|
+
fill: "none",
|
|
19
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
20
|
+
}, /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
|
|
21
|
+
id: "icon",
|
|
22
|
+
d: "M14.5 8.48438C14.5 6.17188 13.25 4.04688 11.25 2.85938C9.21875 1.70312 6.75 1.70312 4.75 2.85938C2.71875 4.04688 1.5 6.17188 1.5 8.48438C1.5 10.8282 2.71875 12.9532 4.75 14.1406C6.75 15.2969 9.21875 15.2969 11.25 14.1406C13.25 12.9532 14.5 10.8282 14.5 8.48438ZM0 8.48438C0 5.64062 1.5 3.01562 4 1.57812C6.46875 0.140625 9.5 0.140625 12 1.57812C14.4688 3.01562 16 5.64062 16 8.48438C16 11.3594 14.4688 13.9844 12 15.4219C9.5 16.8594 6.46875 16.8594 4 15.4219C1.5 13.9844 0 11.3594 0 8.48438ZM9.03125 11.7656C8.71875 12.0782 8.25 12.0782 7.96875 11.7656C7.65625 11.4844 7.65625 11.0156 7.96875 10.7032L9.4375 9.23438H4.75C4.3125 9.23438 4 8.92188 4 8.48438C4 8.07812 4.3125 7.73438 4.75 7.73438H9.4375L7.96875 6.26562C7.65625 5.98438 7.65625 5.51562 7.96875 5.23438C8.25 4.92188 8.71875 4.92188 9.03125 5.23438L11.7812 7.98438C12.0625 8.26562 12.0625 8.73438 11.7812 9.01562L9.03125 11.7656Z",
|
|
23
|
+
fill: "white"
|
|
24
|
+
})));
|
|
25
|
+
};
|
|
26
|
+
exports.ButtonArrowRight = ButtonArrowRight;
|
|
27
|
+
var _default = exports.default = ButtonArrowRight;
|
|
@@ -8,9 +8,9 @@ exports.default = exports.CloseXIcon = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
const CloseXIcon = _ref => {
|
|
10
10
|
let {
|
|
11
|
-
width =
|
|
12
|
-
height =
|
|
13
|
-
fill =
|
|
11
|
+
width = '16',
|
|
12
|
+
height = '15',
|
|
13
|
+
fill = '#212121'
|
|
14
14
|
} = _ref;
|
|
15
15
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
16
16
|
width: width,
|