sag_components 1.0.85 → 1.0.87

package/dist/stories/components/Dropdown.js

@@ -15,14 +15,16 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _Icon = _interopRequireDefault(require("@mui/material/Icon"));
+var _styles = require("@mui/material/styles");
 var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search.js"));
-var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown.js"));
+var _ArrowDropDownIcon = _interopRequireDefault(require("./icons/ArrowDropDownIcon.jsx"));
 //import PropTypes from "prop-types";
 
 // import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // import { faChevronDown, faAsterisk } from "@fortawesome/free-solid-svg-icons";
+//import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown.js";
 var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
   fontSize: "small"
 });
@@ -37,7 +39,7 @@ var checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
  */
 var Dropdown = function Dropdown(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "300px" : _ref$width,
+    width = _ref$width === void 0 ? "100%" : _ref$width,
     size = _ref.size,
     text = _ref.text,
     shape = _ref.shape,
@@ -50,7 +52,8 @@ var Dropdown = function Dropdown(_ref) {
     onChange = _ref.onChange,
     onInputChange = _ref.onInputChange,
     _ref$labelColor = _ref.labelColor,
-    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor;
+    labelColor = _ref$labelColor === void 0 ? "#1B30AA" : _ref$labelColor,
+    required = _ref.required;
   /**
    *  SAG Dropdown
    */
@@ -70,6 +73,17 @@ var Dropdown = function Dropdown(_ref) {
       return clearTimeout(delayDebounceFn);
     };
   }, [currentInputValue]);
+  var theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: "#db3131"
+          }
+        }
+      }
+    }
+  });
 
   //defines shape: squire or round
   var getTextFieldStyle = function getTextFieldStyle() {
@@ -79,19 +93,19 @@ var Dropdown = function Dropdown(_ref) {
         "& .MuiOutlinedInput-root": {
           borderRadius: "12px",
           legend: {
-            marginLeft: "60px"
+            marginLeft: "6px"
           }
         },
         "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "20px !important",
+          paddingLeft: "10px !important",
           borderRadius: "12px"
         },
         "& .MuiInputLabel-outlined": {
-          paddingLeft: "20px"
+          paddingLeft: "10px"
         },
         "& .MuiInputLabel-shrink": {
-          marginLeft: "20px",
-          paddingLeft: "10px",
+          marginLeft: "1px",
+          paddingLeft: "4px",
           paddingRight: 0,
           background: "white"
         }
@@ -118,7 +132,9 @@ var Dropdown = function Dropdown(_ref) {
     });
   };
   var getAutocompleteSingle = function getAutocompleteSingle() {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
       onChange: function onChange(event, newValue) {
         onChangeHandler(event, newValue);
       },
@@ -131,10 +147,14 @@ var Dropdown = function Dropdown(_ref) {
       sx: {
         width: width
       },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.default, {
+        width: "0.6em",
+        height: "0.6em"
+      }) : null,
       forcePopupIcon: "auto",
       renderInput: function renderInput(params) {
         return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+          required: required,
           label: text,
           size: size,
           sx: getTextFieldStyle(),
@@ -153,7 +173,7 @@ var Dropdown = function Dropdown(_ref) {
           InputLabelProps: {
             style: {
               color: labelColor,
-              fontSize: "16px",
+              fontSize: "14px",
               fontFamily: "Lato"
             }
           }
@@ -165,10 +185,12 @@ var Dropdown = function Dropdown(_ref) {
           fontFamily: "Lato"
         }
       }
-    });
+    }));
   };
   var getAutocompleteMulti = function getAutocompleteMulti() {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
       style: {
         width: width
       },
@@ -188,7 +210,10 @@ var Dropdown = function Dropdown(_ref) {
       getOptionLabel: function getOptionLabel(option) {
         return option.label;
       },
-      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null) : null,
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.default, {
+        width: "0.6em",
+        height: "0.6em"
+      }) : null,
       renderOption: function renderOption(props, option, _ref2) {
         var selected = _ref2.selected;
         return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
@@ -208,9 +233,10 @@ var Dropdown = function Dropdown(_ref) {
           size: size,
           sx: getTextFieldStyle(),
           placeholder: placeHolder,
+          required: required,
           InputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params.InputProps), {}, {
             style: {
-              fontSize: "16px",
+              fontSize: "14px",
               fontFamily: "Lato"
             },
             startAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
@@ -231,6 +257,7 @@ var Dropdown = function Dropdown(_ref) {
           size: size,
           sx: getTextFieldStyle(),
           placeholder: placeHolder,
+          required: required,
           InputLabelProps: {
             style: {
               color: labelColor,
@@ -246,7 +273,7 @@ var Dropdown = function Dropdown(_ref) {
           fontFamily: "Lato"
         }
       }
-    });
+    }));
   };
   return /*#__PURE__*/_react.default.createElement(_DropdownStyle.DropdownContainer, {
     width: width

package/dist/stories/components/FilterContainer.style.js

@@ -8,7 +8,7 @@ exports.FilterFooterContent = exports.FilterDivContent = exports.FilterDivContai
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
-var FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n"])));
+var FilterDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height:100%;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n    border-radius: 12px;\n    display: grid;\n    background: \"#FFFFFF\";\n"])));
 exports.FilterDivContainer = FilterDivContainer;
 var FilterDivContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    padding-top: 40px;\n    height: 90%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    > div{\n        margin: 25px;\n    }\n"])));
 exports.FilterDivContent = FilterDivContent;

package/dist/stories/components/icons/ArrowDropDownIcon.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowDropDownIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ArrowDropDownIcon = function ArrowDropDownIcon(_ref) {
+  var clicked = _ref.clicked,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "8" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "9" : _ref$height;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 12 7",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M5.60156 6.39844L1.10156 1.89844C0.867188 1.6875 0.867188 1.33594 1.10156 1.10156C1.3125 0.890625 1.66406 0.890625 1.89844 1.10156L6 5.22656L10.1016 1.125C10.3125 0.890625 10.6641 0.890625 10.8984 1.125C11.1094 1.33594 11.1094 1.6875 10.8984 1.89844L6.375 6.39844C6.16406 6.63281 5.8125 6.63281 5.60156 6.39844Z",
+    fill: "#212121"
+  }));
+};
+exports.ArrowDropDownIcon = ArrowDropDownIcon;
+var _default = ArrowDropDownIcon;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "",
   "main": "dist/index.js",
   "scripts": {