sag_components 1.0.557 → 1.0.558

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.
Files changed (7) hide show
  1. package/dist/stories/components/AttachedFile.js +1 -1
  2. package/dist/stories/components/AttachedFile.style.js +1 -1
  3. package/dist/stories/components/CollapseMenuItem.js +4 -4
  4. package/dist/stories/components/ReportTable.js +46 -48
  5. package/dist/stories/components/TabMenu.js +49 -0
  6. package/dist/stories/components/TabMenu.style.js +16 -0
  7. package/package.json +1 -1
package/dist/stories/components/AttachedFile.js CHANGED
@@ -29,7 +29,7 @@ const AttachedFile = props => {
29
29
  setSelectedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
30
30
  const fileInput = document.getElementById('fileInput');
31
31
  fileInput.value = ''; // Reset input value
32
- onRemoveFile(fileToRemove);
32
+ onRemoveFile();
33
33
  };
34
34
  return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map(file => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
35
35
  key: "".concat(file.name, "_").concat(file.lastModified)
package/dist/stories/components/AttachedFile.style.js CHANGED
@@ -10,5 +10,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
11
  const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins';\n font-size: 14px;\n font-weight: 400;\n"])));
12
12
  const InputLabel = exports.InputLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n cursor: pointer;\n > span {\n color: ", ";\n }\n"])), props => props.inputColor);
13
- const UploadedFile = exports.UploadedFile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n color: #A4A4A4;\n max-width: 220px;\n padding: 2px 8px;\n margin-bottom: 10px;\n > span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n > svg {\n min-width: 12px;\n }\n"])));
13
+ const UploadedFile = exports.UploadedFile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n align-items: center;\n color: #A4A4A4;\n max-width: 220px;\n padding: 2px 8px;\n margin-bottom: 10px;\n"])));
14
14
  const RemoveButton = exports.RemoveButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n background: none;\n padding: 0;\n display: flex;\n align-items: center;\n margin-left: auto;\n cursor: pointer;\n"])));
package/dist/stories/components/CollapseMenuItem.js CHANGED
@@ -25,7 +25,7 @@ const CollapseMenuItem = props => {
25
25
  id: "CollapseMenuItemContainer",
26
26
  onClick: handleToggle,
27
27
  style: {
28
- cursor: "pointer"
28
+ cursor: 'pointer'
29
29
  }
30
30
  }, /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemIconContainer, {
31
31
  id: "CollapseMenuItemIconContainer"
@@ -41,10 +41,10 @@ const CollapseMenuItem = props => {
41
41
  id: "CollapseMenuItemSubTitle"
42
42
  }, subTitle)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContentContainer, {
43
43
  id: "CollapseMenuItemContentContainer"
44
- }, children ? children : ""));
44
+ }, children || ''));
45
45
  };
46
46
  var _default = exports.default = CollapseMenuItem;
47
47
  CollapseMenuItem.defaultProps = {
48
- title: "",
49
- subTitle: ""
48
+ title: '',
49
+ subTitle: ''
50
50
  };
package/dist/stories/components/ReportTable.js CHANGED
@@ -27,7 +27,7 @@ const ReportTable = props => {
27
27
  }
28
28
  if (!useSelectButtons) {
29
29
  var _tableData$columnsHea;
30
- //do not use select Buttons - remove the "button" from table data
30
+ // do not use select Buttons - remove the "button" from table data
31
31
  const newTableData = {
32
32
  columnsHeadings: [],
33
33
  rowsValues: []
@@ -43,28 +43,28 @@ const ReportTable = props => {
43
43
  }
44
44
  if (useSelectButtons) {
45
45
  var _tableData$columnsHea2, _newTableData$columns, _tableData$rowsValues;
46
- //use select Buttons - add a "button" to table data
46
+ // use select Buttons - add a "button" to table data
47
47
 
48
48
  const newTableData = {
49
49
  columnsHeadings: [],
50
50
  rowsValues: []
51
51
  };
52
52
 
53
- //columnsHeadings
53
+ // columnsHeadings
54
54
  tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea2 = tableData.columnsHeadings) === null || _tableData$columnsHea2 === void 0 ? void 0 : _tableData$columnsHea2.forEach(item => {
55
55
  newTableData.columnsHeadings.push(item);
56
56
  });
57
- if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === "button" && item.key === "button"))) {
57
+ if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'button' && item.key === 'button'))) {
58
58
  newTableData.columnsHeadings.push({
59
- label: "button",
60
- key: "button"
59
+ label: 'button',
60
+ key: 'button'
61
61
  });
62
62
  }
63
63
 
64
- //rowsValues
64
+ // rowsValues
65
65
  const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map((item, index) => useSelectButtons ? {
66
66
  ...item,
67
- button: "button",
67
+ button: 'button',
68
68
  rowIndex: index
69
69
  } : item);
70
70
  newTableData.rowsValues = newRowValues;
@@ -75,85 +75,83 @@ const ReportTable = props => {
75
75
  const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
76
76
  const handleRowClick = row => {
77
77
  const {
78
- ["button"]: propToRemove,
78
+ button: propToRemove,
79
79
  ...rest
80
80
  } = row;
81
81
  onSelectRowClick(rest);
82
82
  };
83
- const displaySelectButton = rowData => {
84
- return /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
85
- id: "SelectButtonContainer"
86
- }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
87
- id: "SelectButtonSubContainer",
88
- selectTextColor: selectTextColor,
89
- onClick: () => handleRowClick(rowData)
90
- }, "Select ", /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
91
- id: "ArrowSelectIcon"
92
- })));
93
- };
83
+ const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
84
+ id: "SelectButtonContainer"
85
+ }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
86
+ id: "SelectButtonSubContainer",
87
+ selectTextColor: selectTextColor,
88
+ onClick: () => handleRowClick(rowData)
89
+ }, "Select", ' ', /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
90
+ id: "ArrowSelectIcon"
91
+ })));
94
92
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
95
93
  maxColumnsNumber: useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber,
96
94
  columnsNumber: columnsNumber
97
95
  }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
98
96
  tableWidthSize: tableWidthSize
99
- }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === "button" ? /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
97
+ }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
100
98
  key: index
101
99
  }) : /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
102
100
  key: index
103
101
  }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
104
102
  key: index,
105
103
  useColorLinearGradient: useColorLinearGradient
106
- }, Object.values(rowData).map((value, dataIndex) => value === "button" ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
104
+ }, Object.values(rowData).map((value, dataIndex) => value === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
107
105
  key: index
108
106
  }, displaySelectButton(rowData)) : /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
109
107
  key: dataIndex
110
108
  }, value))))))), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
111
109
  color: "#1B30AA"
112
- }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : "");
110
+ }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : '');
113
111
  };
114
112
  exports.ReportTable = ReportTable;
115
113
  var _default = exports.default = ReportTable;
116
114
  ReportTable.defaultProps = {
117
115
  tableData: {
118
116
  columnsHeadings: [{
119
- label: "Event Name",
120
- key: "eventName"
117
+ label: 'Event Name',
118
+ key: 'eventName'
121
119
  }, {
122
- label: "Retailer",
123
- key: "retailer"
120
+ label: 'Retailer',
121
+ key: 'retailer'
124
122
  }, {
125
- label: "Total Cost",
126
- key: "totalCost"
123
+ label: 'Total Cost',
124
+ key: 'totalCost'
127
125
  }, {
128
- label: "Inc. Baseline Sales",
129
- key: "incBaselineSales"
126
+ label: 'Inc. Baseline Sales',
127
+ key: 'incBaselineSales'
130
128
  }],
131
129
  rowsValues: [{
132
- retailer: "Large Selling Event P2 2023",
133
- eventDescription: "Food",
134
- totalCost: "Food Lion",
135
- incBaselineSales: "50K"
130
+ retailer: 'Large Selling Event P2 2023',
131
+ eventDescription: 'Food',
132
+ totalCost: 'Food Lion',
133
+ incBaselineSales: '50K'
136
134
  }, {
137
- retailer: "Large Selling Event P2 2023",
138
- eventDescription: "Food",
139
- totalCost: "$500K",
140
- incBaselineSales: "50K"
135
+ retailer: 'Large Selling Event P2 2023',
136
+ eventDescription: 'Food',
137
+ totalCost: '$500K',
138
+ incBaselineSales: '50K'
141
139
  }, {
142
- retailer: "Large Selling Event P2 2023",
143
- eventDescription: "Food",
144
- totalCost: "$500K",
145
- incBaselineSales: "50K"
140
+ retailer: 'Large Selling Event P2 2023',
141
+ eventDescription: 'Food',
142
+ totalCost: '$500K',
143
+ incBaselineSales: '50K'
146
144
  }, {
147
- retailer: "Large Selling Event P2 2023",
148
- eventDescription: "Food",
149
- totalCost: "$500K",
150
- incBaselineSales: "50K"
145
+ retailer: 'Large Selling Event P2 2023',
146
+ eventDescription: 'Food',
147
+ totalCost: '$500K',
148
+ incBaselineSales: '50K'
151
149
  }]
152
150
  },
153
151
  maxColumnsNumber: 4,
154
152
  useColorLinearGradient: true,
155
153
  useSelectButtons: false,
156
154
  disableInfo: false,
157
- selectTextColor: "#229E38",
155
+ selectTextColor: '#229E38',
158
156
  onSelectRowClick: () => {}
159
157
  };
package/dist/stories/components/TabMenu.js ADDED
@@ -0,0 +1,49 @@
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 _TabMenu = require("./TabMenu.style");
10
+ const TabMenu = props => {
11
+ const {
12
+ tabs,
13
+ color,
14
+ onTabChange
15
+ } = props;
16
+ const [activeTab, setActiveTab] = (0, _react.useState)(1);
17
+ const handleTabChange = index => {
18
+ onTabChange(index);
19
+ setActiveTab(index);
20
+ };
21
+ return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, null, tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
22
+ key: index,
23
+ isActive: index === activeTab,
24
+ className: index === activeTab ? 'active' : '',
25
+ color: color,
26
+ onClick: () => handleTabChange(index)
27
+ }, tab.title)), /*#__PURE__*/_react.default.createElement(_TabMenu.PresentationSlider, {
28
+ activeTab: activeTab,
29
+ color: color,
30
+ width: "".concat(100 / tabs.length, "%"),
31
+ role: "presentation"
32
+ }))), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
33
+ id: "tabsBody"
34
+ }, tabs[activeTab].content));
35
+ };
36
+ TabMenu.defaultProps = {
37
+ color: '#229E38',
38
+ tabs: [
39
+ // { title: 'Tab 1', content: <ReportTable /> },
40
+ {
41
+ title: 'Tab 2',
42
+ content: 'Content for Tab 2'
43
+ }, {
44
+ title: 'Tab 3',
45
+ content: 'Content for Tab 3'
46
+ }],
47
+ onTabChange: () => {}
48
+ };
49
+ var _default = exports.default = TabMenu;
package/dist/stories/components/TabMenu.style.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.PresentationSlider = exports.Nav = exports.Body = 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;
11
+ const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins', sans-serif;\n"])));
12
+ const Nav = exports.Nav = _styledComponents.default.nav(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([" \n display: inline-block;\n"])));
13
+ const Tabs = exports.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
14
+ const Tab = exports.Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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 }\n"])), props => props.color);
15
+ const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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);
16
+ const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 24px 0;\n "])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.557",
3
+ "version": "1.0.558",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {