sag_components 1.0.267 → 1.0.269

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 (11) hide show
  1. package/.history/package_20231025165122.json +82 -0
  2. package/.history/package_20231026135514.json +82 -0
  3. package/dist/stories/components/CollapseData.style.js +1 -1
  4. package/dist/stories/components/Dropdown.js +73 -77
  5. package/dist/stories/components/OneColumnContainer.js +0 -1
  6. package/dist/stories/components/OneColumnContainer.style.js +4 -4
  7. package/dist/stories/components/PerformanceAnalytics.js +8 -5
  8. package/dist/stories/components/TitleDescription.js +50 -52
  9. package/dist/stories/components/TitleDescription.style.js +6 -6
  10. package/dist/stories/components/TotalBenchmarkAreachart.js +46 -46
  11. package/package.json +1 -1
package/.history/package_20231025165122.json ADDED
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "sag_components",
3
+ "version": "1.0.268",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "scripts": {
7
+ "start": "react-scripts start",
8
+ "lint": "eslint .",
9
+ "build": "cross-env BABEL_ENV=production babel src -d dist ",
10
+ "storybook": "storybook dev -p 6006",
11
+ "build-storybook": "storybook build"
12
+ },
13
+ "keywords": [],
14
+ "author": "SAG",
15
+ "license": "ISC",
16
+ "devDependencies": {
17
+ "@babel/cli": "^7.23.0",
18
+ "@babel/preset-env": "^7.23.2",
19
+ "@babel/preset-react": "^7.22.15",
20
+ "@babel/preset-typescript": "^7.23.2",
21
+ "@storybook/addon-a11y": "^7.4.6",
22
+ "@storybook/addon-essentials": "^7.4.6",
23
+ "@storybook/addon-interactions": "^7.4.6",
24
+ "@storybook/addon-links": "^7.4.6",
25
+ "@storybook/addon-storysource": "^7.4.6",
26
+ "@storybook/blocks": "^7.4.6",
27
+ "@storybook/preset-scss": "^1.0.3",
28
+ "@storybook/react": "^7.4.6",
29
+ "@storybook/react-webpack5": "^7.4.6",
30
+ "@storybook/testing-library": "^0.2.2",
31
+ "cross-env": "^7.0.3",
32
+ "css-loader": "^5.2.7",
33
+ "eslint": "^8.50.0",
34
+ "eslint-config-airbnb": "^19.0.4",
35
+ "eslint-plugin-import": "^2.28.1",
36
+ "eslint-plugin-jsx-a11y": "^6.7.1",
37
+ "eslint-plugin-react": "^7.33.2",
38
+ "eslint-plugin-react-hooks": "^4.6.0",
39
+ "react-dom": "^18.2.0",
40
+ "sass": "^1.68.0",
41
+ "sass-loader": "^13.3.2",
42
+ "style-loader": "^3.3.3"
43
+ },
44
+ "dependencies": {
45
+ "@dnd-kit/core": "^6.0.8",
46
+ "@emotion/react": "^11.11.1",
47
+ "@emotion/styled": "^11.11.0",
48
+ "@fontsource/roboto": "^5.0.8",
49
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
50
+ "@fortawesome/free-solid-svg-icons": "^6.4.2",
51
+ "@fortawesome/react-fontawesome": "^0.2.0",
52
+ "@mui/icons-material": "^5.14.13",
53
+ "@mui/material": "^5.14.13",
54
+ "@mui/styled-engine-sc": "^5.14.12",
55
+ "@mui/x-date-pickers": "^6.16.2",
56
+ "@storybook/addon-designs": "^7.0.5",
57
+ "babel-plugin-react-css-modules": "^5.2.6",
58
+ "classnames": "^2.3.2",
59
+ "dayjs": "^1.11.10",
60
+ "hoopy": "^0.1.4",
61
+ "prop-types": "^15.8.1",
62
+ "react": "^18.2.0",
63
+ "react-css-modules": "^4.7.11",
64
+ "react-loading-skeleton": "^3.3.1",
65
+ "react-scripts": "5.0.1",
66
+ "recharts": "^2.6.2",
67
+ "storybook": "^7.4.6",
68
+ "styled-components": "^5.3.11"
69
+ },
70
+ "browserslist": {
71
+ "production": [
72
+ ">0.2%",
73
+ "not dead",
74
+ "not op_mini all"
75
+ ],
76
+ "development": [
77
+ "last 1 chrome version",
78
+ "last 1 firefox version",
79
+ "last 1 safari version"
80
+ ]
81
+ }
82
+ }
package/.history/package_20231026135514.json ADDED
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "sag_components",
3
+ "version": "1.0.269",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "scripts": {
7
+ "start": "react-scripts start",
8
+ "lint": "eslint .",
9
+ "build": "cross-env BABEL_ENV=production babel src -d dist ",
10
+ "storybook": "storybook dev -p 6006",
11
+ "build-storybook": "storybook build"
12
+ },
13
+ "keywords": [],
14
+ "author": "SAG",
15
+ "license": "ISC",
16
+ "devDependencies": {
17
+ "@babel/cli": "^7.23.0",
18
+ "@babel/preset-env": "^7.23.2",
19
+ "@babel/preset-react": "^7.22.15",
20
+ "@babel/preset-typescript": "^7.23.2",
21
+ "@storybook/addon-a11y": "^7.4.6",
22
+ "@storybook/addon-essentials": "^7.4.6",
23
+ "@storybook/addon-interactions": "^7.4.6",
24
+ "@storybook/addon-links": "^7.4.6",
25
+ "@storybook/addon-storysource": "^7.4.6",
26
+ "@storybook/blocks": "^7.4.6",
27
+ "@storybook/preset-scss": "^1.0.3",
28
+ "@storybook/react": "^7.4.6",
29
+ "@storybook/react-webpack5": "^7.4.6",
30
+ "@storybook/testing-library": "^0.2.2",
31
+ "cross-env": "^7.0.3",
32
+ "css-loader": "^5.2.7",
33
+ "eslint": "^8.50.0",
34
+ "eslint-config-airbnb": "^19.0.4",
35
+ "eslint-plugin-import": "^2.28.1",
36
+ "eslint-plugin-jsx-a11y": "^6.7.1",
37
+ "eslint-plugin-react": "^7.33.2",
38
+ "eslint-plugin-react-hooks": "^4.6.0",
39
+ "react-dom": "^18.2.0",
40
+ "sass": "^1.68.0",
41
+ "sass-loader": "^13.3.2",
42
+ "style-loader": "^3.3.3"
43
+ },
44
+ "dependencies": {
45
+ "@dnd-kit/core": "^6.0.8",
46
+ "@emotion/react": "^11.11.1",
47
+ "@emotion/styled": "^11.11.0",
48
+ "@fontsource/roboto": "^5.0.8",
49
+ "@fortawesome/fontawesome-svg-core": "^6.4.2",
50
+ "@fortawesome/free-solid-svg-icons": "^6.4.2",
51
+ "@fortawesome/react-fontawesome": "^0.2.0",
52
+ "@mui/icons-material": "^5.14.13",
53
+ "@mui/material": "^5.14.13",
54
+ "@mui/styled-engine-sc": "^5.14.12",
55
+ "@mui/x-date-pickers": "^6.16.2",
56
+ "@storybook/addon-designs": "^7.0.5",
57
+ "babel-plugin-react-css-modules": "^5.2.6",
58
+ "classnames": "^2.3.2",
59
+ "dayjs": "^1.11.10",
60
+ "hoopy": "^0.1.4",
61
+ "prop-types": "^15.8.1",
62
+ "react": "^18.2.0",
63
+ "react-css-modules": "^4.7.11",
64
+ "react-loading-skeleton": "^3.3.1",
65
+ "react-scripts": "5.0.1",
66
+ "recharts": "^2.6.2",
67
+ "storybook": "^7.4.6",
68
+ "styled-components": "^5.3.11"
69
+ },
70
+ "browserslist": {
71
+ "production": [
72
+ ">0.2%",
73
+ "not dead",
74
+ "not op_mini all"
75
+ ],
76
+ "development": [
77
+ "last 1 chrome version",
78
+ "last 1 firefox version",
79
+ "last 1 safari version"
80
+ ]
81
+ }
82
+ }
package/dist/stories/components/CollapseData.style.js CHANGED
@@ -19,7 +19,7 @@ var TitleAccordion = exports.TitleAccordion = _styledComponents.default.div(_tem
19
19
  var IconAndTitle = exports.IconAndTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: auto;\n font-family: \"poppins\";\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n display: flex;\n float: left;\n align-items: center;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n & > svg {\n margin-right: 15px;\n }\n"])));
20
20
  var ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n float: right;\n font-family: \"poppins\";\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 23%;\n margin-right: 20px;\n"])));
21
21
  var IconDiv = exports.IconDiv = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-end;\n width: 25%;\n"])));
22
- var TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 70%;\n text-align: left;\n padding-left: 3px;\n"])));
22
+ var TitleDiv = exports.TitleDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 70%;\n text-align: left;\n padding-left: 3px;\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
23
23
  var TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n overflow-x: auto;\n margin-bottom: 22px;\n"])));
24
24
  var Table = exports.Table = _styledComponents.default.table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n"])));
25
25
  var Th = exports.Th = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n background-color: white;\n font-family: \"poppins\";\n font-weight: 600;\n font-size: 12px;\n border: 1px solid #ccc;\n padding: 10px;\n text-align: center;\n line-height: 18px;\n border-top: none;\n border-left: none;\n &:last-of-type {\n border-right: none;\n }\n"])));
package/dist/stories/components/Dropdown.js CHANGED
@@ -9,23 +9,19 @@ exports.default = exports.Dropdown = void 0;
9
9
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
- var _DropdownStyle = require("./Dropdown.style.js");
13
12
  var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
14
13
  var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
15
14
  var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
16
15
  var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
17
- var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
18
16
  var _styles = require("@mui/material/styles");
19
17
  var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
20
18
  var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
21
- var _Search = _interopRequireDefault(require("@mui/icons-material/Search.js"));
19
+ var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
22
20
  var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
23
- var _colors = require("@mui/material/colors");
24
- //import PropTypes from "prop-types";
25
-
21
+ var _Dropdown = require("./Dropdown.style");
22
+ // import PropTypes from "prop-types";
26
23
  // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
27
24
  // import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
28
- //import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown.js";
29
25
  var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
30
26
  fontSize: "small"
31
27
  });
@@ -40,7 +36,7 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
40
36
  */
41
37
  var Dropdown = exports.Dropdown = function Dropdown(_ref) {
42
38
  var _ref$width = _ref.width,
43
- width = _ref$width === void 0 ? "100%" : _ref$width,
39
+ width = _ref$width === void 0 ? '100%' : _ref$width,
44
40
  size = _ref.size,
45
41
  text = _ref.text,
46
42
  shape = _ref.shape,
@@ -53,12 +49,12 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
53
49
  onChange = _ref.onChange,
54
50
  onInputChange = _ref.onInputChange,
55
51
  _ref$labelColor = _ref.labelColor,
56
- labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
52
+ labelColor = _ref$labelColor === void 0 ? '#1B30AA' : _ref$labelColor,
57
53
  required = _ref.required,
58
54
  inputRef = _ref.inputRef,
59
55
  defaultValue = _ref.defaultValue,
60
56
  _ref$allowedInput = _ref.allowedInput,
61
- allowedInput = _ref$allowedInput === void 0 ? "all" : _ref$allowedInput,
57
+ allowedInput = _ref$allowedInput === void 0 ? 'all' : _ref$allowedInput,
62
58
  _ref$reset = _ref.reset,
63
59
  reset = _ref$reset === void 0 ? false : _ref$reset,
64
60
  _ref$disableClearable = _ref.disableClearable,
@@ -77,7 +73,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
77
73
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
78
74
  currentOption = _useState4[0],
79
75
  setCurrentOption = _useState4[1];
80
- //const [defaultValueSetFlag, setDefaultValueSetFlag] = useState(false);
76
+ // const [defaultValueSetFlag, setDefaultValueSetFlag] = useState(false);
81
77
 
82
78
  // useEffect(() => {
83
79
  // reset ? setDefaultValueSetFlag(false) : null;
@@ -96,80 +92,78 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
96
92
  MuiFormLabel: {
97
93
  styleOverrides: {
98
94
  asterisk: {
99
- color: "#db3131"
95
+ color: '#db3131'
100
96
  }
101
97
  }
102
98
  }
103
99
  }
104
100
  });
105
101
 
106
- //defines shape: squire or round
102
+ // defines shape: squire or round
107
103
  var getTextFieldStyle = function getTextFieldStyle() {
108
- if (shape === "round") {
104
+ if (shape === 'round') {
109
105
  // round
110
106
  return {
111
- "& .MuiOutlinedInput-root": {
112
- borderRadius: "12px",
107
+ '& .MuiOutlinedInput-root': {
108
+ borderRadius: '12px',
113
109
  legend: {
114
- marginLeft: "10px"
110
+ marginLeft: '10px'
115
111
  }
116
112
  },
117
- "& .MuiAutocomplete-inputRoot": {
118
- paddingLeft: "10px !important",
119
- borderRadius: "12px",
113
+ '& .MuiAutocomplete-inputRoot': {
114
+ paddingLeft: '10px !important',
115
+ borderRadius: '12px',
120
116
  // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
121
117
  '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
122
118
  // Default left padding is 6px
123
- paddingLeft: "10px"
119
+ paddingLeft: '10px'
124
120
  },
125
- "& .MuiOutlinedInput-notchedOutline": {
126
- borderColor: "#E7E7E7"
121
+ '& .MuiOutlinedInput-notchedOutline': {
122
+ borderColor: '#E7E7E7'
127
123
  },
128
- "&:hover .MuiOutlinedInput-notchedOutline": {
129
- borderColor: disabled ? "#E7E7E7" : labelColor
124
+ '&:hover .MuiOutlinedInput-notchedOutline': {
125
+ borderColor: disabled ? '#E7E7E7' : labelColor
130
126
  },
131
- "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
132
- borderColor: disabled ? "#E7E7E7" : labelColor
127
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
128
+ borderColor: disabled ? '#E7E7E7' : labelColor
133
129
  }
134
130
  },
135
- "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
131
+ '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
136
132
  // Default transform is "translate(14px, 20px) scale(1)""
137
133
  // This lines up the label with the initial cursor position in the input
138
134
  // after changing its padding-left.
139
- transform: "translate(14px, 18px) scale(1);",
140
- fontSize: "14px",
141
- color: disabled ? "#E7E7E7" : currentInputValue && currentInputValue.length > 0 ? "#212121" : "#757575"
135
+ transform: 'translate(14px, 18px) scale(1);',
136
+ fontSize: '14px',
137
+ color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
142
138
  },
143
- "& .MuiInputLabel-outlined": {
144
- paddingLeft: "10px",
145
- color: disabled ? "#E7E7E7" : labelColor,
146
- fontSize: "18px"
139
+ '& .MuiInputLabel-outlined': {
140
+ paddingLeft: '10px',
141
+ color: disabled ? '#E7E7E7' : labelColor,
142
+ fontSize: '18px'
147
143
  },
148
- "& .MuiInputLabel-shrink": {
149
- marginLeft: "1px",
150
- paddingLeft: "4px",
151
- paddingRight: "6px",
152
- background: "white"
144
+ '& .MuiInputLabel-shrink': {
145
+ marginLeft: '1px',
146
+ paddingLeft: '4px',
147
+ paddingRight: '6px',
148
+ background: 'white'
153
149
  }
154
150
  };
155
- } else {
156
- //square
157
- return null;
158
151
  }
152
+ // square
153
+ return null;
159
154
  };
160
155
  var onInputChangeHandler = function onInputChangeHandler(event, newInputValue) {
161
156
  setCurrentInputValue({
162
157
  syntheticBaseEvent: event,
163
158
  inputValue: newInputValue
164
159
  });
165
- console.log("newInputValue", newInputValue);
166
160
  };
167
161
  var onChangeHandler = function onChangeHandler(event, newValue) {
168
162
  setCurrentOption({
169
163
  syntheticBaseEvent: event,
170
164
  newValue: newValue
171
165
  });
172
- //setDefaultValueSetFlag(true);
166
+ // setDefaultValueSetFlag(true);
173
167
  onChange({
174
168
  syntheticBaseEvent: event,
175
169
  newValue: newValue
@@ -179,9 +173,8 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
179
173
  if (!label) return null;
180
174
  if (!options) return null;
181
175
  var foundOption = options.find(function (item) {
182
- return item.label == label;
176
+ return item.label === label;
183
177
  });
184
- console.log(foundOption);
185
178
  if (!foundOption) return null;
186
179
  return foundOption;
187
180
  };
@@ -190,14 +183,17 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
190
183
  var ALPHA_REGEX = /^[a-zA-Z]+$/;
191
184
  var ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
192
185
  switch (allowedInput) {
193
- case "all":
186
+ case 'all':
194
187
  return true;
195
- case "alpha":
196
- if (ALPHA_REGEX.test(inputChar)) return true;else return false;
197
- case "numeric":
198
- if (NUMERIC_REGEX.test(inputChar)) return true;else return false;
199
- case "alphaNumeric":
200
- if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;else return false;
188
+ case 'alpha':
189
+ if (ALPHA_REGEX.test(inputChar)) return true;
190
+ return false;
191
+ case 'numeric':
192
+ if (NUMERIC_REGEX.test(inputChar)) return true;
193
+ return false;
194
+ case 'alphaNumeric':
195
+ if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
196
+ return false;
201
197
  default:
202
198
  return true;
203
199
  }
@@ -236,14 +232,14 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
236
232
  },
237
233
  required: required,
238
234
  label: text,
239
- inputRef: inputRef ? inputRef : null,
235
+ inputRef: inputRef || null,
240
236
  size: size,
241
237
  sx: getTextFieldStyle(),
242
238
  placeholder: placeHolder,
243
239
  InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
244
240
  style: {
245
- fontSize: "14px",
246
- fontFamily: "Poppins"
241
+ fontSize: '14px',
242
+ fontFamily: 'Poppins'
247
243
  },
248
244
  startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
249
245
  position: "start"
@@ -253,17 +249,17 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
253
249
  }),
254
250
  InputLabelProps: {
255
251
  style: {
256
- //color: labelColor,
257
- //fontSize: "14px",
258
- fontFamily: "Poppins"
252
+ // color: labelColor,
253
+ // fontSize: "14px",
254
+ fontFamily: 'Poppins'
259
255
  }
260
256
  }
261
257
  }));
262
258
  },
263
259
  ListboxProps: {
264
260
  style: {
265
- fontSize: "14px",
266
- fontFamily: "Poppins"
261
+ fontSize: '14px',
262
+ fontFamily: 'Poppins'
267
263
  }
268
264
  }
269
265
  }));
@@ -304,8 +300,8 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
304
300
  checkedIcon: checkedIcon,
305
301
  style: {
306
302
  marginRight: 8,
307
- fontSize: "14px",
308
- fontFamily: "Poppins"
303
+ fontSize: '14px',
304
+ fontFamily: 'Poppins'
309
305
  },
310
306
  checked: selected
311
307
  }), option.label);
@@ -321,12 +317,12 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
321
317
  event.preventDefault();
322
318
  }
323
319
  },
324
- inputRef: inputRef ? inputRef : null,
320
+ inputRef: inputRef || null,
325
321
  required: required,
326
322
  InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
327
323
  style: {
328
- fontSize: "14px",
329
- fontFamily: "Poppins"
324
+ fontSize: '14px',
325
+ fontFamily: 'Poppins'
330
326
  },
331
327
  startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
332
328
  position: "start"
@@ -336,9 +332,9 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
336
332
  }),
337
333
  InputLabelProps: {
338
334
  style: {
339
- //color: labelColor,
340
- fontSize: "16px",
341
- fontFamily: "Poppins"
335
+ // color: labelColor,
336
+ fontSize: '16px',
337
+ fontFamily: 'Poppins'
342
338
  }
343
339
  }
344
340
  })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
@@ -351,26 +347,26 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
351
347
  event.preventDefault();
352
348
  }
353
349
  },
354
- inputRef: inputRef ? inputRef : null,
350
+ inputRef: inputRef || null,
355
351
  required: required,
356
352
  InputLabelProps: {
357
353
  style: {
358
- //color: labelColor,
359
- fontSize: "16px",
360
- fontFamily: "Poppins"
354
+ // color: labelColor,
355
+ fontSize: '16px',
356
+ fontFamily: 'Poppins'
361
357
  }
362
358
  }
363
359
  }));
364
360
  },
365
361
  ListboxProps: {
366
362
  style: {
367
- fontSize: "14px",
368
- fontFamily: "Poppins"
363
+ fontSize: '14px',
364
+ fontFamily: 'Poppins'
369
365
  }
370
366
  }
371
367
  }));
372
368
  };
373
- return /*#__PURE__*/_react.default.createElement(_DropdownStyle.DropdownContainer, {
369
+ return /*#__PURE__*/_react.default.createElement(_Dropdown.DropdownContainer, {
374
370
  width: width
375
371
  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
376
372
  };
package/dist/stories/components/OneColumnContainer.js CHANGED
@@ -9,7 +9,6 @@ exports.default = exports.OneColumnContainer = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
- var _core = require("@dnd-kit/core");
13
12
  var _classnames = _interopRequireDefault(require("classnames"));
14
13
  var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
15
14
  var _InfoIcon = require("./icons/InfoIcon");
package/dist/stories/components/OneColumnContainer.style.js CHANGED
@@ -18,11 +18,11 @@ var InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.di
18
18
  }, function (props) {
19
19
  return props.height;
20
20
  });
21
- var InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n color: black;\n margin: 0px 0px 10px 0px;\n font-size: 18px;\n line-height: 32px;\n /* overflow: scroll; */\n overflow: hidden;\n"])));
22
- var InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n\n /* overflow: scroll; */\n overflow: hidden;\n"])));
23
- var IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n float: right;\n padding: 10px;\n"])));
21
+ var InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n color: black;\n margin: 0px 0px 10px 0px;\n font-size: 18px;\n line-height: 32px;\n overflow: hidden;\n"])));
22
+ var InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n overflow: hidden;\n"])));
23
+ var IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n top: 10px;\n right: 10px;\n position: absolute;\n"])));
24
24
  var LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n width: 76%;\n height: 65%;\n"])));
25
- var mainDiv = exports.mainDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n align-items: \"flex-start\";\n justify-content: \"center\";\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n"])), function (props) {
25
+ var mainDiv = exports.mainDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: \"flex-start\";\n justify-content: \"center\";\n background-color: white;\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n"])), function (props) {
26
26
  return props.width;
27
27
  }, function (props) {
28
28
  return props.height;
package/dist/stories/components/PerformanceAnalytics.js CHANGED
@@ -18,7 +18,7 @@ var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
18
18
  var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
19
19
  var _CommonFunctions = require("./CommonFunctions");
20
20
  var _PerformanceAnalytics = require("./PerformanceAnalytics.style");
21
- var _excluded = ["totalsData", "data", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textColor", "width", "height", "noDataText"];
21
+ var _excluded = ["totalsData", "data", "currencyType", "colorGraphROI", "colorBarchart1", "colorBarchart2", "textColor", "width", "height", "lineChartHeight", "noDataText"];
22
22
  var INDIVIDUAL_PERFORMANCE_STR = 'Individual Performance';
23
23
  var PERCENT_INCREMENTAL_GROWTH_STR = '% Incremental Growth';
24
24
  var PERCENT_CONTRIBUTION_OF_TOTAL_STR = '% Contribution of Total';
@@ -69,6 +69,8 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
69
69
  textColor = _ref$textColor === void 0 ? '#212121' : _ref$textColor,
70
70
  width = _ref.width,
71
71
  height = _ref.height,
72
+ _ref$lineChartHeight = _ref.lineChartHeight,
73
+ lineChartHeight = _ref$lineChartHeight === void 0 ? 150 : _ref$lineChartHeight,
72
74
  noDataText = _ref.noDataText,
73
75
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
74
76
  var _useState = (0, _react.useState)(INDIVIDUAL_PERFORMANCE_STR),
@@ -161,7 +163,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
161
163
  var displayLineChartROI = function displayLineChartROI() {
162
164
  return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
163
165
  id: "ResponsiveContainer",
164
- height: 150
166
+ height: lineChartHeight
165
167
  }, segmentedButtonsFilter !== PERCENT_CONTRIBUTION_OF_TOTAL_STR ? /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
166
168
  data: data,
167
169
  margin: {
@@ -270,14 +272,15 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
270
272
  }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
271
273
  dataKey: "retailer",
272
274
  tick: CustomizedTickBarChart,
275
+ tickLine: false,
273
276
  height: 120,
274
- stroke: isNegativeValueFound() === true ? '#FFF' : '#000'
277
+ stroke: isNegativeValueFound() === true ? '#D0D0D0' : '#000'
275
278
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
276
279
  content: CustomTooltipBarChart
277
280
  }), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
278
281
  y: 0,
279
- stroke: "#000"
280
- }), segmentedButtonsFilter != PERCENT_INCREMENTAL_GROWTH_STR ? /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
282
+ stroke: "#D0D0D0"
283
+ }), segmentedButtonsFilter !== PERCENT_INCREMENTAL_GROWTH_STR ? /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
281
284
  dataKey: getDataKeyNameBar1(),
282
285
  fill: colorBarchart1,
283
286
  minPointSize: 5,
package/dist/stories/components/TitleDescription.js CHANGED
@@ -1,23 +1,21 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.TitleDescription = void 0;
9
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _IconButton = require("./IconButton");
9
+ var _react = _interopRequireDefault(require("react"));
12
10
  var _EyeIcon = require("./icons/EyeIcon");
13
11
  var _FoodLionIcon = require("./icons/FoodLionIcon");
14
12
  var _GiantFoodIcon = require("./icons/GiantFoodIcon");
15
13
  var _HannafordIcon = require("./icons/HannafordIcon");
16
14
  var _StopAndShopIcon = require("./icons/StopAndShopIcon");
17
15
  var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
18
- var _TitleDescriptionStyle = require("./TitleDescription.style.js");
16
+ var _TitleDescription = require("./TitleDescription.style");
19
17
  var _excluded = ["showRetailerIcon", "data", "viewCreativeOnClick", "width", "height", "textColor", "disabled"];
20
- /*TitleDescription*/
18
+ /* TitleDescription */
21
19
  var TitleDescription = exports.TitleDescription = function TitleDescription(_ref) {
22
20
  var _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
23
21
  var _ref$showRetailerIcon = _ref.showRetailerIcon,
@@ -25,119 +23,119 @@ var TitleDescription = exports.TitleDescription = function TitleDescription(_ref
25
23
  data = _ref.data,
26
24
  viewCreativeOnClick = _ref.viewCreativeOnClick,
27
25
  _ref$width = _ref.width,
28
- width = _ref$width === void 0 ? "100%" : _ref$width,
26
+ width = _ref$width === void 0 ? '100%' : _ref$width,
29
27
  _ref$height = _ref.height,
30
- height = _ref$height === void 0 ? "100%" : _ref$height,
28
+ height = _ref$height === void 0 ? '100%' : _ref$height,
31
29
  _ref$textColor = _ref.textColor,
32
- textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
30
+ textColor = _ref$textColor === void 0 ? '#212121' : _ref$textColor,
33
31
  _ref$disabled = _ref.disabled,
34
32
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
35
33
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
36
34
  var getRetailerIcon = function getRetailerIcon(retailerName) {
37
35
  switch (retailerName) {
38
- case "Food Lion":
39
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RetailerIconContainer, {
36
+ case 'Food Lion':
37
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
40
38
  id: "RetailerIconContainer"
41
39
  }, /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, {
42
40
  width: "90",
43
41
  height: "20"
44
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.Space, null, " "));
45
- case "Hannaford":
46
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RetailerIconContainer, {
42
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.Space, null, " "));
43
+ case 'Hannaford':
44
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
47
45
  id: "RetailerIconContainer"
48
46
  }, /*#__PURE__*/_react.default.createElement(_HannafordIcon.HannafordIcon, {
49
47
  width: "90",
50
48
  height: "20"
51
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.Space, null, " "));
52
- case "Giant Food":
53
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RetailerIconContainer, {
49
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.Space, null, " "));
50
+ case 'Giant Food':
51
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
54
52
  id: "RetailerIconContainer"
55
53
  }, /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
56
54
  width: "60",
57
55
  height: "20"
58
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.Space, null, " "));
59
- case "The Giant Company":
60
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RetailerIconContainer, {
56
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.Space, null, " "));
57
+ case 'The Giant Company':
58
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
61
59
  id: "RetailerIconContainer"
62
60
  }, /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, {
63
61
  width: "60",
64
62
  height: "20"
65
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.Space, null, " "));
66
- case "Stop&Shop":
67
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RetailerIconContainer, {
63
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.Space, null, " "));
64
+ case 'Stop&Shop':
65
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
68
66
  id: "RetailerIconContainer"
69
67
  }, /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
70
68
  width: "90",
71
69
  height: "20"
72
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.Space, null, " "));
70
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.Space, null, " "));
73
71
  default:
74
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.RetailerIconContainer, {
72
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
75
73
  id: "RetailerIconContainer"
76
- }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
74
+ }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
77
75
  id: "FieldsDelimiter"
78
76
  }, " | "));
79
77
  }
80
78
  };
81
- return /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.MainContainer, {
79
+ return /*#__PURE__*/_react.default.createElement(_TitleDescription.MainContainer, {
82
80
  id: "MainContainer",
83
81
  height: height,
84
82
  width: width,
85
83
  textColor: textColor
86
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PanelContainer, {
84
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.PanelContainer, {
87
85
  id: "PanelContainer"
88
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.EventNameAndViewCreativeContainer, {
86
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameAndViewCreativeContainer, {
89
87
  id: "EventNameAndViewCreativeContainer"
90
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.EventNameViewCreativeSubContainer, null, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.EventName, {
88
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameViewCreativeSubContainer, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventName, {
91
89
  id: "EventName"
92
- }, data.eventName, " "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ViewCreativeContainer, {
90
+ }, data.eventName, ' '), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeContainer, {
93
91
  onClick: viewCreativeOnClick,
94
92
  id: "ViewCreativeContainer",
95
93
  disabled: disabled
96
94
  }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
97
95
  width: "12",
98
96
  height: "12"
99
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ViewCreativeTextField, {
97
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeTextField, {
100
98
  id: "ViewCreativeTextField"
101
- }, "View creative")))), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FilterValuesContainer, {
99
+ }, "View creative")))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
102
100
  id: "FilterValuesContainer"
103
- }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.Retailer, {
101
+ }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.Retailer, {
104
102
  id: "Retailer"
105
- }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FilterValue, {
103
+ }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
106
104
  id: "FilterValue"
107
- }, data.eventType), data.storeType && /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
105
+ }, data.eventType), data.storeType && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
108
106
  id: "FieldsDelimiter"
109
- }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FilterValue, {
107
+ }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
110
108
  id: "FilterValue"
111
- }, data.storeType), data.category && /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
109
+ }, data.storeType), data.category && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
112
110
  id: "FieldsDelimiter"
113
- }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FilterValue, {
111
+ }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
114
112
  id: "FilterValue"
115
- }, data.category), data.supplier && /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
113
+ }, data.category), data.supplier && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
116
114
  id: "FieldsDelimiter"
117
- }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FilterValue, {
115
+ }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
118
116
  id: "FilterValue"
119
- }, data.supplier), data.brand && /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FieldsDelimiter, {
117
+ }, data.supplier), data.brand && /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
120
118
  id: "FieldsDelimiter"
121
- }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.FilterValue, {
119
+ }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
122
120
  id: "FilterValue"
123
- }, data.brand)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectiesAndPeriodsContainer, {
121
+ }, data.brand)), /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesAndPeriodsContainer, {
124
122
  id: "ObjectiesAndPeriodsContainer"
125
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectiesContainer, {
123
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
126
124
  id: "ObjectiesContainer"
127
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesDescription, {
125
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesDescription, {
128
126
  id: "ObjectivesDescription"
129
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.ObjectivesTitle, {
127
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesTitle, {
130
128
  id: "ObjectivesTitle"
131
- }, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? "Objectives: " : ""), data.objectivesDescription)), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodsContainer, {
129
+ }, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? 'Objectives: ' : ''), data.objectivesDescription)), /*#__PURE__*/_react.default.createElement(_TitleDescription.PeriodsContainer, {
132
130
  id: "PeriodsContainer"
133
- }, /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
131
+ }, /*#__PURE__*/_react.default.createElement(_TitleDescription.SubLineContainer, {
134
132
  id: "SubLineContainer"
135
- }), /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.SubLineContainer, {
133
+ }), /*#__PURE__*/_react.default.createElement(_TitleDescription.SubLineContainer, {
136
134
  id: "SubLineContainer"
137
- }, (data === null || data === void 0 ? void 0 : (_data$eventDatesValue = data.eventDatesValue) === null || _data$eventDatesValue === void 0 ? void 0 : _data$eventDatesValue.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodLabel, {
135
+ }, (data === null || data === void 0 ? void 0 : (_data$eventDatesValue = data.eventDatesValue) === null || _data$eventDatesValue === void 0 ? void 0 : _data$eventDatesValue.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TitleDescription.PeriodLabel, {
138
136
  id: "PeriodLabel"
139
- }, "Event Dates: ") : "", (data === null || data === void 0 ? void 0 : (_data$eventDatesValue2 = data.eventDatesValue) === null || _data$eventDatesValue2 === void 0 ? void 0 : _data$eventDatesValue2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TitleDescriptionStyle.PeriodValue, {
137
+ }, "Event Dates: ") : '', (data === null || data === void 0 ? void 0 : (_data$eventDatesValue2 = data.eventDatesValue) === null || _data$eventDatesValue2 === void 0 ? void 0 : _data$eventDatesValue2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TitleDescription.PeriodValue, {
140
138
  id: "PeriodValue"
141
- }, data.eventDatesValue) : "")))));
139
+ }, data.eventDatesValue) : '')))));
142
140
  };
143
141
  var _default = exports.default = TitleDescription;
package/dist/stories/components/TitleDescription.style.js CHANGED
@@ -8,8 +8,8 @@ exports.ViewCreativeTextField = exports.ViewCreativeContainer = exports.SubLineC
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, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
11
- var MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 1rem;\n\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), function (props) {
12
- return props.textColor ? props.textColor : "#000";
11
+ var MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 1rem;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), function (props) {
12
+ return props.textColor ? props.textColor : '#000';
13
13
  }, function (props) {
14
14
  return props.width;
15
15
  }, function (props) {
@@ -20,9 +20,9 @@ var EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContaine
20
20
  var EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n"])));
21
21
  var EventName = exports.EventName = _styledComponents.default.h4(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n margin: 0;\n"])));
22
22
  var ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n margin-left: 10px;\n padding: 3px 10px;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
23
- return props.disabled ? "#B1B1B1" : "#212121";
23
+ return props.disabled ? '#B1B1B1' : '#212121';
24
24
  }, function (props) {
25
- return !props.disabled ? "pointer" : "default";
25
+ return !props.disabled ? 'pointer' : 'default';
26
26
  });
27
27
  var ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0 5px;\n font-weight: 400;\n"])));
28
28
  var FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n width: 100%;\n margin: 0.5rem;\n"])));
@@ -36,9 +36,9 @@ var ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _style
36
36
  var ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n"])));
37
37
  var ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n"])));
38
38
  var ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
39
- return props.disabled ? "#B1B1B1" : "#1b30aa";
39
+ return props.disabled ? '#B1B1B1' : '#1b30aa';
40
40
  }, function (props) {
41
- return !props.disabled ? "pointer" : "default";
41
+ return !props.disabled ? 'pointer' : 'default';
42
42
  });
43
43
  var BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n min-height: 1.5rem;\n"])));
44
44
  var DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)([""])));
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -6,62 +6,59 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = exports.TotalBenchmarkAreachart = void 0;
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
10
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
12
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var _recharts = require("recharts");
13
13
  var _ArrowUpIcon = require("./icons/ArrowUpIcon");
14
14
  var _ArrowDownIcon = require("./icons/ArrowDownIcon");
15
15
  var _NoDataFoundMessage = require("./NoDataFoundMessage");
16
- var _recharts = require("recharts");
17
16
  var _Benchmark = require("./Benchmark");
18
- var _TotalBenchmarkAreachartStyle = require("./TotalBenchmarkAreachart.style.js");
19
17
  var _TotalBenchmarkAreachart = require("./TotalBenchmarkAreachart.style");
20
18
  var _CommonFunctions = require("./CommonFunctions");
21
19
  var _excluded = ["title", "value", "arrowSign", "benchmarkTotalValue", "benchmarkValue", "areaChartData", "width", "height", "textColor", "areaChart1Color", "areaChart2Color", "xselectedColor", "fillChart1Color", "fillChart2Color", "startOffset", "endOffset", "opacity", "value1Title", "value2Title", "noDataText"];
22
- /*TotalBenchmarkAreachart*/
20
+ /* TotalBenchmarkAreachart */
23
21
  var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
24
- var _ref4;
25
22
  var title = _ref.title,
26
23
  value = _ref.value,
27
24
  _ref$arrowSign = _ref.arrowSign,
28
- arrowSign = _ref$arrowSign === void 0 ? "up" : _ref$arrowSign,
25
+ arrowSign = _ref$arrowSign === void 0 ? 'up' : _ref$arrowSign,
29
26
  benchmarkTotalValue = _ref.benchmarkTotalValue,
30
27
  benchmarkValue = _ref.benchmarkValue,
31
28
  areaChartData = _ref.areaChartData,
32
29
  _ref$width = _ref.width,
33
- width = _ref$width === void 0 ? "250px" : _ref$width,
30
+ width = _ref$width === void 0 ? '250px' : _ref$width,
34
31
  _ref$height = _ref.height,
35
- height = _ref$height === void 0 ? "280px" : _ref$height,
32
+ height = _ref$height === void 0 ? '280px' : _ref$height,
36
33
  _ref$textColor = _ref.textColor,
37
- textColor = _ref$textColor === void 0 ? "#212121" : _ref$textColor,
34
+ textColor = _ref$textColor === void 0 ? '#212121' : _ref$textColor,
38
35
  _ref$areaChart1Color = _ref.areaChart1Color,
39
- areaChart1Color = _ref$areaChart1Color === void 0 ? "#BD9EFF" : _ref$areaChart1Color,
36
+ areaChart1Color = _ref$areaChart1Color === void 0 ? '#BD9EFF' : _ref$areaChart1Color,
40
37
  _ref$areaChart2Color = _ref.areaChart2Color,
41
- areaChart2Color = _ref$areaChart2Color === void 0 ? "#96B4FF" : _ref$areaChart2Color,
38
+ areaChart2Color = _ref$areaChart2Color === void 0 ? '#96B4FF' : _ref$areaChart2Color,
42
39
  _ref$xselectedColor = _ref.xselectedColor,
43
- xselectedColor = _ref$xselectedColor === void 0 ? "#42977A" : _ref$xselectedColor,
40
+ xselectedColor = _ref$xselectedColor === void 0 ? '#42977A' : _ref$xselectedColor,
44
41
  _ref$fillChart1Color = _ref.fillChart1Color,
45
- fillChart1Color = _ref$fillChart1Color === void 0 ? "rgba(34, 158, 56, 0.20)" : _ref$fillChart1Color,
42
+ fillChart1Color = _ref$fillChart1Color === void 0 ? 'rgba(34, 158, 56, 0.20)' : _ref$fillChart1Color,
46
43
  _ref$fillChart2Color = _ref.fillChart2Color,
47
- fillChart2Color = _ref$fillChart2Color === void 0 ? "rgba(255, 84, 84, 0.2)" : _ref$fillChart2Color,
44
+ fillChart2Color = _ref$fillChart2Color === void 0 ? 'rgba(255, 84, 84, 0.2)' : _ref$fillChart2Color,
48
45
  _ref$startOffset = _ref.startOffset,
49
- startOffset = _ref$startOffset === void 0 ? "17.04%" : _ref$startOffset,
46
+ startOffset = _ref$startOffset === void 0 ? '17.04%' : _ref$startOffset,
50
47
  _ref$endOffset = _ref.endOffset,
51
- endOffset = _ref$endOffset === void 0 ? "17.04%" : _ref$endOffset,
48
+ endOffset = _ref$endOffset === void 0 ? '17.04%' : _ref$endOffset,
52
49
  _ref$opacity = _ref.opacity,
53
- opacity = _ref$opacity === void 0 ? "191" : _ref$opacity,
50
+ opacity = _ref$opacity === void 0 ? '191' : _ref$opacity,
54
51
  _ref$value1Title = _ref.value1Title,
55
- value1Title = _ref$value1Title === void 0 ? "Actual Sales" : _ref$value1Title,
52
+ value1Title = _ref$value1Title === void 0 ? 'Actual Sales' : _ref$value1Title,
56
53
  _ref$value2Title = _ref.value2Title,
57
- value2Title = _ref$value2Title === void 0 ? "Baseline Sales" : _ref$value2Title,
54
+ value2Title = _ref$value2Title === void 0 ? 'Baseline Sales' : _ref$value2Title,
58
55
  _ref$noDataText = _ref.noDataText,
59
- noDataText = _ref$noDataText === void 0 ? "" : _ref$noDataText,
56
+ noDataText = _ref$noDataText === void 0 ? '' : _ref$noDataText,
60
57
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
61
58
  var DEFAULT_ROOT_FONT = 16;
62
59
  var DEFAULT_COMPONENT_WIDTH = 250;
63
60
  var DEFAULT_COMPONENT_HEIGHT = 280;
64
- var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat("", "px")),
61
+ var _useState = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px')),
65
62
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
66
63
  rootFont = _useState2[0],
67
64
  setRootFont = _useState2[1];
@@ -70,7 +67,7 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
70
67
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
71
68
  heightFactor = _useState4[0],
72
69
  setHeightFactor = _useState4[1];
73
- var _useState5 = (0, _react.useState)(""),
70
+ var _useState5 = (0, _react.useState)(''),
74
71
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
75
72
  activeLabel = _useState6[0],
76
73
  setActiveLabel = _useState6[1];
@@ -85,19 +82,19 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
85
82
  setHeightFactor(factor);
86
83
  }, [height]);
87
84
  var getRootFont = function getRootFont(width) {
88
- var relation = width.toString().replace("px", "").replace("%", "") / DEFAULT_COMPONENT_WIDTH;
89
- var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat("", "px");
85
+ var relation = width.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
86
+ var fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
90
87
  return fontRoot;
91
88
  };
92
89
  var getSizeFactor = function getSizeFactor() {
93
- return rootFont.toString().replace("px", "") / DEFAULT_ROOT_FONT;
90
+ return rootFont.toString().replace('px', '') / DEFAULT_ROOT_FONT;
94
91
  };
95
92
  var getArrowSign = function getArrowSign(arrowSign) {
96
93
  if (!arrowSign) {
97
- return "";
94
+ return '';
98
95
  }
99
- if (arrowSign == "up") {
100
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrowContainer, {
96
+ if (arrowSign === 'up') {
97
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
101
98
  id: "DetailsRowArrowContainer",
102
99
  value: value,
103
100
  height: 25 * getSizeFactor()
@@ -105,16 +102,15 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
105
102
  width: 25 * getSizeFactor(),
106
103
  height: 25 * getSizeFactor()
107
104
  }));
108
- } else {
109
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrowContainer, {
110
- id: "DetailsRowArrowContainer",
111
- value: value,
112
- height: 25 * getSizeFactor()
113
- }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
114
- width: 25 * getSizeFactor(),
115
- height: 25 * getSizeFactor()
116
- }));
117
105
  }
106
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.DetailsRowArrowContainer, {
107
+ id: "DetailsRowArrowContainer",
108
+ value: value,
109
+ height: 25 * getSizeFactor()
110
+ }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
111
+ width: 25 * getSizeFactor(),
112
+ height: 25 * getSizeFactor()
113
+ }));
118
114
  };
119
115
  var CustomTick = function CustomTick(_ref2) {
120
116
  var x = _ref2.x,
@@ -150,24 +146,24 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
150
146
  }
151
147
  return null;
152
148
  };
153
- return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ControlsContainer, {
149
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ControlsContainer, {
154
150
  id: "ControlsContainer",
155
151
  height: height,
156
152
  width: width,
157
153
  textColor: textColor,
158
154
  ref: controlsContainerRef,
159
155
  rootFont: rootFont
160
- }, areaChartData && (areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
156
+ }, areaChartData && (areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.Controls, {
161
157
  id: "Controls"
162
- }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.TitleAndValueContainer, {
158
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TitleAndValueContainer, {
163
159
  id: "TitleAndValueContainer"
164
- }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Title, {
160
+ }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.Title, {
165
161
  id: "Title"
166
- }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ValueAndBenchmarkContainer, {
162
+ }, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ValueAndBenchmarkContainer, {
167
163
  id: "ValueAndBenchmarkContainer"
168
- }, value != undefined && value != null ? getArrowSign(arrowSign) : "", /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValue, {
164
+ }, value !== undefined && value != null ? getArrowSign(arrowSign) : '', /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValue, {
169
165
  id: "FormattedValue"
170
- }, value != undefined && value != null ? "".concat(value, " %") : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValueNoDataMessage, null, value === undefined || value === null ? "No Data" : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.BenchmarkContainer, {
166
+ }, value !== undefined && value != null ? "".concat(value, " %") : ''), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.FormattedValueNoDataMessage, null, value === undefined || value === null ? 'No Data' : ''), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.BenchmarkContainer, {
171
167
  id: "BenchmarkContainer"
172
168
  }, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
173
169
  id: "Benchmark",
@@ -181,7 +177,7 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
181
177
  linearGradientUnderAvarageColor: "#FDB1B1",
182
178
  underAvarageColor: "#FD5959",
183
179
  backgroundColor: "#F2F2F2"
184
- })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
180
+ })) : '')), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.AreaChartContainer, {
185
181
  ref: anotherRef,
186
182
  id: "AreaChartContainer"
187
183
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
@@ -234,7 +230,11 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
234
230
  return /*#__PURE__*/_react.default.createElement(CustomTick, item);
235
231
  },
236
232
  tickLine: false,
237
- style: (_ref4 = {}, (0, _defineProperty2.default)(_ref4, "fontWeight", "700"), (0, _defineProperty2.default)(_ref4, "stroke", "#D0D0D0"), (0, _defineProperty2.default)(_ref4, "strokeWidth", "1px"), _ref4)
233
+ style: {
234
+ fontWeight: '700',
235
+ stroke: '#D0D0D0',
236
+ strokeWidth: '1px'
237
+ }
238
238
  }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
239
239
  strokeDasharray: "3 3"
240
240
  }), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.267",
3
+ "version": "1.0.269",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {