sag_components 1.0.83 → 1.0.84

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 (8) hide show
  1. package/dist/index.js +0 -4
  2. package/dist/stories/components/Dropdown.js +71 -51
  3. package/dist/stories/components/Dropdown.style.js +2 -1
  4. package/dist/stories/components/TotalBenchmarkAreachart.style.js +1 -1
  5. package/dist/stories/components/TotalBenchmarkArrows.style.js +3 -3
  6. package/dist/stories/components/TotalBenchmarkBarchart.style.js +3 -3
  7. package/dist/stories/components/TotalDoughnutChart.style.js +1 -1
  8. package/package.json +5 -3
package/dist/index.js CHANGED
@@ -5,10 +5,6 @@ var _react = _interopRequireDefault(require("react"));
5
5
  var _client = _interopRequireDefault(require("react-dom/client"));
6
6
  require("./index.css");
7
7
  var _App = _interopRequireDefault(require("./App"));
8
- // import '@fontsource/roboto/300.css';
9
- // import '@fontsource/roboto/400.css';
10
- // import '@fontsource/roboto/500.css';
11
- // import '@fontsource/roboto/700.css';
12
8
  var root = _client.default.createRoot(document.getElementById('root'));
13
9
  root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
14
10
 
package/dist/stories/components/Dropdown.js CHANGED
@@ -30,11 +30,14 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
30
30
  fontSize: "small"
31
31
  });
32
32
 
33
+ // import './fonts/Lato-Regular.ttf';
34
+
33
35
  /**
34
36
  * SAG Dropdown
35
37
  */
36
38
  var Dropdown = function Dropdown(_ref) {
37
- var width = _ref.width,
39
+ var _ref$width = _ref.width,
40
+ width = _ref$width === void 0 ? "300px" : _ref$width,
38
41
  size = _ref.size,
39
42
  text = _ref.text,
40
43
  shape = _ref.shape,
@@ -45,7 +48,9 @@ var Dropdown = function Dropdown(_ref) {
45
48
  showSearchIcon = _ref.showSearchIcon,
46
49
  options = _ref.options,
47
50
  onChange = _ref.onChange,
48
- onInputChange = _ref.onInputChange;
51
+ onInputChange = _ref.onInputChange,
52
+ _ref$labelColor = _ref.labelColor,
53
+ labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
49
54
  /**
50
55
  * SAG Dropdown
51
56
  */
@@ -72,14 +77,14 @@ var Dropdown = function Dropdown(_ref) {
72
77
  // round
73
78
  return {
74
79
  "& .MuiOutlinedInput-root": {
75
- borderRadius: "50px",
80
+ borderRadius: "12px",
76
81
  legend: {
77
- marginLeft: "30px"
82
+ marginLeft: "60px"
78
83
  }
79
84
  },
80
85
  "& .MuiAutocomplete-inputRoot": {
81
86
  paddingLeft: "20px !important",
82
- borderRadius: "50px"
87
+ borderRadius: "12px"
83
88
  },
84
89
  "& .MuiInputLabel-outlined": {
85
90
  paddingLeft: "20px"
@@ -103,8 +108,14 @@ var Dropdown = function Dropdown(_ref) {
103
108
  });
104
109
  };
105
110
  var onChangeHandler = function onChangeHandler(event, newValue) {
106
- setCurrentOption(newValue);
107
- onChange(event, newValue);
111
+ setCurrentOption({
112
+ syntheticBaseEvent: event,
113
+ newValue: newValue
114
+ });
115
+ onChange({
116
+ syntheticBaseEvent: event,
117
+ newValue: newValue
118
+ });
108
119
  };
109
120
  var getAutocompleteSingle = function getAutocompleteSingle() {
110
121
  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
@@ -129,18 +140,38 @@ var Dropdown = function Dropdown(_ref) {
129
140
  sx: getTextFieldStyle(),
130
141
  placeholder: placeHolder,
131
142
  InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
143
+ style: {
144
+ fontSize: "14px",
145
+ fontFamily: "Lato"
146
+ },
132
147
  startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
133
148
  position: "start"
134
149
  }, /*#__PURE__*/_react.default.createElement(_Search.default, {
135
150
  fontSize: "medium"
136
151
  })) : null
137
- })
152
+ }),
153
+ InputLabelProps: {
154
+ style: {
155
+ color: labelColor,
156
+ fontSize: "16px",
157
+ fontFamily: "Lato"
158
+ }
159
+ }
138
160
  }));
161
+ },
162
+ ListboxProps: {
163
+ style: {
164
+ fontSize: "14px",
165
+ fontFamily: "Lato"
166
+ }
139
167
  }
140
168
  });
141
169
  };
142
170
  var getAutocompleteMulti = function getAutocompleteMulti() {
143
171
  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
172
+ style: {
173
+ width: width
174
+ },
144
175
  onChange: function onChange(event, newValue) {
145
176
  onChangeHandler(event, newValue);
146
177
  },
@@ -148,8 +179,9 @@ var Dropdown = function Dropdown(_ref) {
148
179
  onInputChangeHandler(event, newInputValue);
149
180
  },
150
181
  multiple: true,
151
- limitTags: limitTagsOnMultiSelect,
152
- size: size,
182
+ limitTags: limitTagsOnMultiSelect
183
+ //size={size}
184
+ ,
153
185
  id: "checkboxes-tags",
154
186
  options: options,
155
187
  disableCloseOnSelect: true,
@@ -163,14 +195,13 @@ var Dropdown = function Dropdown(_ref) {
163
195
  icon: icon,
164
196
  checkedIcon: checkedIcon,
165
197
  style: {
166
- marginRight: 8
198
+ marginRight: 8,
199
+ fontSize: "14px",
200
+ fontFamily: "Lato"
167
201
  },
168
202
  checked: selected
169
203
  }), option.label);
170
204
  },
171
- style: {
172
- width: width
173
- },
174
205
  renderInput: function renderInput(params) {
175
206
  return showSearchIcon && (!currentOption || currentOption && currentOption.length === 0) ? /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
176
207
  label: text,
@@ -178,18 +209,42 @@ var Dropdown = function Dropdown(_ref) {
178
209
  sx: getTextFieldStyle(),
179
210
  placeholder: placeHolder,
180
211
  InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
212
+ style: {
213
+ fontSize: "16px",
214
+ fontFamily: "Lato"
215
+ },
181
216
  startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
182
217
  position: "start"
183
218
  }, /*#__PURE__*/_react.default.createElement(_Search.default, {
184
219
  fontSize: "medium"
185
220
  }))
186
- })
221
+ }),
222
+ InputLabelProps: {
223
+ style: {
224
+ color: labelColor,
225
+ fontSize: "16px",
226
+ fontFamily: "Lato"
227
+ }
228
+ }
187
229
  })) : /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
188
230
  label: text,
189
231
  size: size,
190
232
  sx: getTextFieldStyle(),
191
- placeholder: placeHolder
233
+ placeholder: placeHolder,
234
+ InputLabelProps: {
235
+ style: {
236
+ color: labelColor,
237
+ fontSize: "16px",
238
+ fontFamily: "Lato"
239
+ }
240
+ }
192
241
  }));
242
+ },
243
+ ListboxProps: {
244
+ style: {
245
+ fontSize: "14px",
246
+ fontFamily: "Lato"
247
+ }
193
248
  }
194
249
  });
195
250
  };
@@ -197,41 +252,6 @@ var Dropdown = function Dropdown(_ref) {
197
252
  width: width
198
253
  }, multiSelect ? getAutocompleteMulti() : getAutocompleteSingle());
199
254
  };
200
-
201
- // Dropdown.propTypes = {
202
- // /**
203
- // * dropdown width
204
- // */
205
- // width: PropTypes.string,
206
-
207
- // /**
208
- // * dropdown size: small/large
209
- // */
210
- // size: PropTypes.string,
211
-
212
- // /**
213
- // * dropdown initial input text
214
- // */
215
- // text: PropTypes.string,
216
-
217
- // /**
218
- // * arrayOf <T> - options array to load into dropdown
219
- // */
220
- // options: PropTypes.arrayOf,
221
-
222
- // /**
223
- // * shape: round/square
224
- // */
225
- // shape: PropTypes.string,
226
- // };
227
-
228
- // Dropdown.defaultProps = {
229
- // width: 300,
230
- // size: "small",
231
- // text: "Select retailer...",
232
- // options: [],
233
- // shape: "round",
234
- // };
235
255
  exports.Dropdown = Dropdown;
236
256
  var _default = Dropdown;
237
257
  exports.default = _default;
package/dist/stories/components/Dropdown.style.js CHANGED
@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.DropdownContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ require("../../stories/components/font.css");
10
11
  var _templateObject;
11
- var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n"])), function (props) {
12
+ var DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", "; \n text-align: left; \n position: relative; \n align-items: center;\n justify-content: center;\n font-family: Lato; \n font-size: \"14px\";\n"])), function (props) {
12
13
  return props.width;
13
14
  });
14
15
  exports.DropdownContainer = DropdownContainer;
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
22
22
  exports.Controls = Controls;
23
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n"])));
23
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n margin-top: 15%;\n"])));
24
24
  exports.Title = Title;
25
25
  var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
26
26
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
package/dist/stories/components/TotalBenchmarkArrows.style.js CHANGED
@@ -20,9 +20,9 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
22
22
  exports.Controls = Controls;
23
- var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n"])));
23
+ var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n margin-top: 15%;\n"])));
24
24
  exports.Title = Title;
25
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n width: 14em;\n height: 30%;\n"])));
25
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
26
26
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
27
27
  var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1em;\n font-weight: 500;\n font-size: 2.2em;\n"])));
28
28
  exports.FormattedValue = FormattedValue;
@@ -34,7 +34,7 @@ var DetailsTitle = _styledComponents.default.div(_templateObject8 || (_templateO
34
34
  exports.DetailsTitle = DetailsTitle;
35
35
  var DetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n text-align: center;\n align-items: baseline;\n height: 25%;\n"])));
36
36
  exports.DetailsRowContainer = DetailsRowContainer;
37
- var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 0.8em;\n align-items: flex-end;\n"])));
37
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 0.8em;\n align-items: flex-end;\n height: 25%;\n"])));
38
38
  exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
39
39
  var DetailsRowFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 0.3em;\n font-weight: 600;\n font-size: 0.88em;\n"])));
40
40
  exports.DetailsRowFormattedValue = DetailsRowFormattedValue;
package/dist/stories/components/TotalBenchmarkBarchart.style.js CHANGED
@@ -20,11 +20,11 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width: 90%;\n height: 90%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n"])));
22
22
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 14em;\n height: 10%;\n"])));
23
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 14em;\n height: 7%;\n margin-top: 10%;\n"])));
24
24
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n"])));
25
+ var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n font-weight: 600;\n font-size: 1em;\n \n"])));
26
26
  exports.Title = Title;
27
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n width: 14em;\n height: 20%;\n"])));
27
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n width: 14em;\n height: 15%;\n \n"])));
28
28
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
29
29
  var CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.8em;\n font-weight: 500;\n font-size: 1em;\n"])));
30
30
  exports.CurrencySign = CurrencySign;
package/dist/stories/components/TotalDoughnutChart.style.js CHANGED
@@ -20,7 +20,7 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
20
20
  exports.ControlsContainer = ControlsContainer;
21
21
  var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n width:100%;\n height:100%;\n background: #ffffff;\n justify-content: center;\n align-items: center;\n flex-direction: column; \n"])));
22
22
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 90%;\n margin-top: 35px;\n"])));
23
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 90%;\n margin-top: 10%;\n"])));
24
24
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
25
  var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%; \n height: 100%; \n font-weight: 600;\n font-size: 1em;\n"])));
26
26
  exports.Title = Title;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.83",
3
+ "version": "1.0.84",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -36,7 +36,8 @@
36
36
  "sass-loader": "^10.4.1",
37
37
  "storybook": "^7.0.6",
38
38
  "style-loader": "^2.0.0",
39
- "styled-components": "^5.3.10"
39
+ "styled-components": "^5.3.10",
40
+ "typings-for-css-modules-loader": "^1.7.0"
40
41
  },
41
42
  "dependencies": {
42
43
  "@dnd-kit/core": "^6.0.8",
@@ -52,7 +53,8 @@
52
53
  "classnames": "^2.3.2",
53
54
  "hoopy": "^0.1.4",
54
55
  "react-scripts": "5.0.1",
55
- "recharts": "^2.6.2"
56
+ "recharts": "^2.6.2",
57
+ "typeface-roboto": "^1.1.13"
56
58
  },
57
59
  "browserslist": {
58
60
  "production": [