sag_components 1.0.450 → 1.0.452

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.
@@ -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.OffersPage = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _PageFilterBar = _interopRequireDefault(require("../components/CampaignTool/PageFilterBar"));
10
+ var _default = exports.default = {
11
+ title: 'Campaign Tool/PageFilterBar',
12
+ component: _PageFilterBar.default,
13
+ argTypes: {
14
+ pageHeadline: {
15
+ name: 'Headline Text',
16
+ control: {
17
+ type: 'text'
18
+ },
19
+ description: 'Headline text',
20
+ defaultValue: ''
21
+ }
22
+ }
23
+ };
24
+ const Template = args => /*#__PURE__*/_react.default.createElement(_PageFilterBar.default, args);
25
+ const OffersPage = exports.OffersPage = Template.bind({});
26
+ OffersPage.args = {
27
+ pageHeadline: 'Offers'
28
+ };
@@ -0,0 +1,85 @@
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.ExamplePopup = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _Popup = _interopRequireDefault(require("../components/CampaignTool/Popup"));
10
+ const accordionItemsData1 = [{
11
+ title: 'Details',
12
+ content: 'Content for Details'
13
+ }, {
14
+ title: 'Permissions',
15
+ content: 'Content for Permissions'
16
+ }, {
17
+ title: 'Other',
18
+ content: 'Content for Other'
19
+ }];
20
+ var _default = exports.default = {
21
+ title: 'Campaign Tool/Popup',
22
+ component: _Popup.default,
23
+ tags: ['autodocs'],
24
+ argTypes: {
25
+ title: {
26
+ name: 'title',
27
+ control: {
28
+ type: 'text'
29
+ },
30
+ description: 'title'
31
+ },
32
+ isPopupOpen: {
33
+ name: 'isPopupOpen',
34
+ control: {
35
+ type: 'boolean'
36
+ },
37
+ description: 'true/false - open or close popup'
38
+ },
39
+ width: {
40
+ name: 'width',
41
+ control: {
42
+ type: 'text'
43
+ },
44
+ description: 'width of the form'
45
+ },
46
+ height: {
47
+ name: 'height',
48
+ control: {
49
+ type: 'text'
50
+ },
51
+ description: 'height of the form'
52
+ },
53
+ accordionItemBackgroundColor: {
54
+ name: 'accordionItemBackgroundColor',
55
+ description: 'Sets the background color for accordion item',
56
+ control: {
57
+ type: 'color',
58
+ presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
59
+ }
60
+ },
61
+ onSaveClick: {
62
+ name: 'Click on save event',
63
+ action: 'onClick',
64
+ description: 'Click on save event'
65
+ },
66
+ onCancelClick: {
67
+ name: 'Click on cancel event',
68
+ action: 'onClick',
69
+ description: 'Click on cancel event'
70
+ },
71
+ accordionItemsData: {
72
+ description: 'array [] of objects: {title: string, content } to fill the accordion items. '
73
+ }
74
+ }
75
+ };
76
+ const Template = args => /*#__PURE__*/_react.default.createElement(_Popup.default, args);
77
+ const ExamplePopup = exports.ExamplePopup = Template.bind({});
78
+ ExamplePopup.args = {
79
+ title: 'Offer Details',
80
+ isPopupOpen: true,
81
+ accordionItemsData: accordionItemsData1,
82
+ width: '800px',
83
+ height: '600px',
84
+ accordionItemBackgroundColor: '#f4f6f7'
85
+ };
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _NewInput = _interopRequireDefault(require("../NewInput"));
11
+ var _PageFilterBar = require("./PageFilterBar.style");
12
+ const PageFilterBar = props => {
13
+ const {
14
+ pageHeadline
15
+ } = props;
16
+ return /*#__PURE__*/_react.default.createElement(_PageFilterBar.BarContainer, null, /*#__PURE__*/_react.default.createElement(_PageFilterBar.Headline, null, pageHeadline), /*#__PURE__*/_react.default.createElement(_NewInput.default, {
17
+ inputType: "search"
18
+ }));
19
+ };
20
+ var _default = exports.default = PageFilterBar;
21
+ PageFilterBar.defaultProps = {
22
+ pageHeadline: ''
23
+ };
@@ -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.Headline = exports.BarContainer = 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 BarContainer = exports.BarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n position: relative;\n padding: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: white;\n"])));
12
+ const Headline = exports.Headline = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 20px;\n font-weight: 500;\n margin: 0;\n"])));
@@ -0,0 +1,96 @@
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 _ComboBoxArrowDownIcon = require("../icons/ComboBoxArrowDownIcon");
10
+ var _ComboBoxArrowUpIcon = require("../icons/ComboBoxArrowUpIcon");
11
+ var _Popup = require("./Popup.style");
12
+ const Popup = props => {
13
+ const {
14
+ title,
15
+ accordionItemsData,
16
+ isPopupOpen,
17
+ width,
18
+ height,
19
+ accordionItemBackgroundColor,
20
+ onSaveClick,
21
+ onCancelClick
22
+ } = props;
23
+ const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
24
+ (0, _react.useEffect)(() => {
25
+ setIsPopupOpen(isPopupOpen);
26
+ }, [isPopupOpen]);
27
+ const openPopup = () => {
28
+ setIsPopupOpen(true);
29
+ };
30
+ const closePopup = () => {
31
+ setIsPopupOpen(false);
32
+ };
33
+ const AccordionItem = _ref => {
34
+ let {
35
+ title,
36
+ content
37
+ } = _ref;
38
+ const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
39
+ const handleToggle = () => {
40
+ setIsItemOpen(!IsItemOpen);
41
+ };
42
+ return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, null, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
43
+ id: "AccordionItemContainer",
44
+ accordionItemBackgroundColor: accordionItemBackgroundColor,
45
+ onClick: handleToggle,
46
+ style: {
47
+ cursor: "pointer"
48
+ }
49
+ }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
50
+ id: "AccordionItemTitle"
51
+ }, title), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
52
+ id: "AccordionItemIconContainer"
53
+ }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
54
+ id: "AccordionContentContainer"
55
+ }, content));
56
+ };
57
+ const Accordion = _ref2 => {
58
+ let {
59
+ items
60
+ } = _ref2;
61
+ return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
62
+ id: "AccordionContainer"
63
+ }, items.map((item, index) => /*#__PURE__*/_react.default.createElement(AccordionItem, {
64
+ key: index,
65
+ title: item.title,
66
+ content: item.content
67
+ })));
68
+ };
69
+ return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
70
+ id: "MainContainer"
71
+ }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
72
+ id: "ModalOverlay",
73
+ className: "modal-overlay",
74
+ onClick: closePopup
75
+ }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
76
+ id: "ModalContent",
77
+ className: "modal-content",
78
+ height: height,
79
+ width: width,
80
+ onClick: e => e.stopPropagation()
81
+ }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
82
+ id: "Close",
83
+ className: "close",
84
+ onClick: closePopup
85
+ }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
86
+ items: accordionItemsData
87
+ }))));
88
+ };
89
+ var _default = exports.default = Popup;
90
+ Popup.defaultProps = {
91
+ isPopupOpen: true,
92
+ width: "800px",
93
+ height: "600px",
94
+ onSaveClick: () => {},
95
+ onCancelClick: () => {}
96
+ };
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.Close = exports.AccordionItemTitle = exports.AccordionItemMainContainer = exports.AccordionItemIconContainer = exports.AccordionItemContainer = exports.AccordionContentContainer = exports.AccordionContainer = 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, _templateObject11, _templateObject12;
11
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
12
+ const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
13
+ const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\n background-color: #fefefe;\n padding: 20px;\n border: 1px solid #888;\n height: ", ";\n width: ", ";\n border-radius: 10px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
14
+ const Close = exports.Close = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #aaa;\n float: right;\n font-size: 28px;\n font-weight: bold;\n cursor: pointer;\n\n .close:hover,\n .close:focus {\n color: black;\n text-decoration: none;\n }\n"])));
15
+ const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display:flex; \n justify-content: space-between;\n align-items: center;\n margin: 0;\n"])));
16
+ const Title = exports.Title = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 18px;\n margin: 0;\n \n"])));
17
+ const AccordionContainer = exports.AccordionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
18
+ const AccordionItemMainContainer = exports.AccordionItemMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0;\n \n"])));
19
+ const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n display:flex; \n justify-content: space-between;\n align-items: center;\n margin: 10px;\n background-color: ", ";\n"])), props => props.accordionItemBackgroundColor);
20
+ const AccordionItemTitle = exports.AccordionItemTitle = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 16px;\n line-height: 25px;\n margin: 10px; \n"])));
21
+ const AccordionItemIconContainer = exports.AccordionItemIconContainer = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 10px; \n"])));
22
+ const AccordionContentContainer = exports.AccordionContentContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n margin: 10px 10px 10px 30px; \n \n"])));
@@ -10,23 +10,24 @@ var _NewInput = require("./NewInput.style");
10
10
  const NewInput = props => {
11
11
  const {
12
12
  labelText,
13
+ inputType,
13
14
  onTyping
14
15
  } = props;
15
16
  const [inputValue, setInputValue] = (0, _react.useState)('');
16
17
  const handleInputChange = e => {
17
18
  setInputValue(e.target.value);
19
+ onTyping(e);
18
20
  };
19
21
  return /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldContainer, null, /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldInput, {
20
- type: "text",
22
+ type: inputType,
21
23
  value: inputValue,
22
- onChange: handleInputChange,
23
- placeholder: labelText
24
- }), /*#__PURE__*/_react.default.createElement(_NewInput.Label, null, {
25
- labelText
26
- }));
24
+ onChange: handleInputChange
25
+ // placeholder={labelText}
26
+ }), /*#__PURE__*/_react.default.createElement(_NewInput.Label, null, labelText));
27
27
  };
28
28
  var _default = exports.default = NewInput;
29
29
  NewInput.defaultProps = {
30
30
  labelText: '',
31
+ inputType: 'text',
31
32
  onTyping: () => {}
32
33
  };
@@ -8,6 +8,6 @@ exports.TextFieldInput = exports.TextFieldContainer = exports.Label = 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, _templateObject3;
11
- const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin: 20px;\n"])));
12
- const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 4px;\n\n &:focus + label,\n &:not(:placeholder-shown) + label {\n top: -10px;\n font-size: 12px;\n color: #007bff;\n }\n"])));
11
+ const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
12
+ const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 10px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 4px;\n\n &:focus + label,\n &:not(:placeholder-shown) + label {\n top: -8px;\n font-size: 12px;\n color: #007bff;\n background-color: white;\n }\n"])));
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 12px;\n left: 10px;\n transition: all 0.3s ease;\n pointer-events: none;\n font-size: 16px;\n color: #555;\n"])));
@@ -55,14 +55,14 @@ const TotalBenchmarkBarchart = props => {
55
55
  const getSizeFactor = () => rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
56
56
  const getFormattedBarChartData = () => {
57
57
  const formattedBarChartData = [];
58
- const currencySign = currency === true ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString() : '';
58
+ const currencySign = currency === true ? (0, _CommonFunctions.getCurrencySign)(currencyType, value).toString() : '';
59
59
  if (barChartData && (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 2) {
60
60
  barChartData.forEach((data, i) => {
61
61
  const formattedData = {
62
62
  id: i,
63
63
  title: data.title,
64
64
  value: data.value,
65
- formattedValue: data.value !== undefined && data.value != null ? currencySign.concat((0, _CommonFunctions.getCurrencySign)(currencyType, data.value), (0, _CommonFunctions.getFormattedValue)(data.value), '', (0, _CommonFunctions.getFormattedUnits)(data.value)) : 'No Data',
65
+ formattedValue: data.value !== undefined && data.value != null ? currencySign.concat('', (0, _CommonFunctions.getFormattedValue)(data.value), '', (0, _CommonFunctions.getFormattedUnits)(data.value)) : 'No Data',
66
66
  color: data.color
67
67
  };
68
68
  formattedBarChartData.push(formattedData);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.450",
3
+ "version": "1.0.452",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {