sag_components 1.0.86 → 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"
 });
@@ -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: "40px"
+            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/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.86",
+  "version": "1.0.87",
   "description": "",
   "main": "dist/index.js",
   "scripts": {