sag_components 1.0.476 → 1.0.478

package/dist/stories/components/AttachedFile.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AttachedFile = require("./AttachedFile.style");
+var _CloseIcon = _interopRequireDefault(require("./icons/CloseIcon"));
+var _AttachedIcon = _interopRequireDefault(require("./icons/AttachedIcon"));
+var _FileIcon = _interopRequireDefault(require("./icons/FileIcon"));
+const AttachedFile = props => {
+  const {
+    inputText
+  } = props;
+  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
+  const handleFileChange = event => {
+    const files = Array.from(event.target.files);
+    setSelectedFiles([...selectedFiles, ...files]);
+  };
+  const handleRemoveFile = fileToRemove => {
+    setSelectedFiles(selectedFiles.filter(file => file !== fileToRemove));
+  };
+  return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map((file, index) => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement(_FileIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, file.name), /*#__PURE__*/_react.default.createElement(_AttachedFile.RemoveButton, {
+    onClick: () => handleRemoveFile(file)
+  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null)))), /*#__PURE__*/_react.default.createElement(_AttachedFile.InputLabel, {
+    htmlFor: "fileInput"
+  }, /*#__PURE__*/_react.default.createElement("span", null, inputText), /*#__PURE__*/_react.default.createElement(_AttachedIcon.default, null)), /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    id: "fileInput",
+    onChange: handleFileChange,
+    multiple: true,
+    style: {
+      display: 'none'
+    }
+  }));
+};
+var _default = exports.default = AttachedFile;
+AttachedFile.defaultProps = {
+  inputText: 'Attach file'
+  // onSelect: () => {},
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UploadedFile = exports.RemoveButton = exports.InputLabel = exports.AttachedFileContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: 'Poppins';\n    font-size: 14px;\n    font-weight: 400;\n"])));
+const InputLabel = exports.InputLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    color: #229E38;\n    cursor: pointer;\n"])));
+const UploadedFile = exports.UploadedFile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    color: #A4A4A4;\n    max-width: 200px;\n    padding: 2px 8px;\n    margin-bottom: 10px;\n"])));
+const RemoveButton = exports.RemoveButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border: none;\n    background: none;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    margin-left: auto;\n    cursor: pointer;\n"])));

package/dist/stories/components/Dropdown.js

@@ -31,7 +31,7 @@ const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default,
  */
 const Dropdown = _ref => {
   let {
-    width = "100%",
+    width = '100%',
     size,
     text,
     shape,
@@ -42,16 +42,16 @@ const Dropdown = _ref => {
     options,
     onChange,
     onInputChange,
-    labelColor = "#1B30AA",
+    labelColor = '#1B30AA',
     required,
     inputRef,
     defaultValue,
-    allowedInput = "all",
+    allowedInput = 'all',
     reset = false,
     disableClearable = false,
     disabled = false,
-    dropdownListfontSize = "14px",
-    placeHolderFontSize = "14px"
+    dropdownListfontSize = '14px',
+    placeHolderFontSize = '14px'
   } = _ref;
   /**
    *  SAG Dropdown
@@ -70,7 +70,7 @@ const Dropdown = _ref => {
       MuiFormLabel: {
         styleOverrides: {
           asterisk: {
-            color: "#db3131"
+            color: '#db3131'
           }
         }
       }
@@ -79,51 +79,51 @@ const Dropdown = _ref => {
 
   // Single Text Style
   const getTextFieldStyleSingle = () => {
-    if (shape === "round") {
+    if (shape === 'round') {
       // round
       return {
-        "& .MuiOutlinedInput-root": {
-          borderRadius: "12px",
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
           legend: {
-            marginLeft: "10px"
+            marginLeft: '10px'
           }
         },
-        "& .MuiAutocomplete-inputRoot": {
-          paddingLeft: "10px !important",
-          borderRadius: "12px",
+        '& .MuiAutocomplete-inputRoot': {
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
           // 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
           '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
             // Default left padding is 6px
-            paddingLeft: "10px"
+            paddingLeft: '10px'
           },
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: "#E7E7E7"
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
           },
-          "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
           },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: disabled ? "#E7E7E7" : labelColor
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
           }
         },
-        "& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)": {
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
           // Default transform is "translate(14px, 20px) scale(1)""
           // This lines up the label with the initial cursor position in the input
           // after changing its padding-left.
-          transform: "translate(14px, 18px) scale(1);",
-          fontSize: "14px",
-          color: disabled ? "#E7E7E7" : currentInputValue && currentInputValue.length > 0 ? "#212121" : "#757575"
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
         },
-        "& .MuiInputLabel-outlined": {
-          paddingLeft: "10px",
-          color: disabled ? "#E7E7E7" : labelColor,
-          fontSize: "18px"
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
         },
-        "& .MuiInputLabel-shrink": {
-          marginLeft: "1px",
-          paddingLeft: "4px",
-          paddingRight: "6px",
-          background: "white"
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
         }
       };
     }
@@ -148,15 +148,15 @@ const Dropdown = _ref => {
     const ALPHA_REGEX = /^[a-zA-Z]+$/;
     const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
     switch (allowedInput) {
-      case "all":
+      case 'all':
         return true;
-      case "alpha":
+      case 'alpha':
         if (ALPHA_REGEX.test(inputChar)) return true;
         return false;
-      case "numeric":
+      case 'numeric':
         if (NUMERIC_REGEX.test(inputChar)) return true;
         return false;
-      case "alphaNumeric":
+      case 'alphaNumeric':
         if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
         return false;
       default:
@@ -204,7 +204,7 @@ const Dropdown = _ref => {
         ...params.InputProps,
         style: {
           fontSize: placeHolderFontSize,
-          fontFamily: "Poppins"
+          fontFamily: 'Poppins'
         },
         startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
           position: "start"
@@ -216,8 +216,8 @@ const Dropdown = _ref => {
     ListboxProps: {
       style: {
         fontSize: dropdownListfontSize,
-        //default: 14px
-        fontFamily: "Poppins"
+        // default: 14px
+        fontFamily: 'Poppins'
       }
     }
   }));

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

@@ -15,5 +15,5 @@ const ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledCompo
 });
 const Controls = exports.Controls = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  justify-content: space-between;  \n  background: #f2f2f2;\n  border-radius:  ", "; //12px\n  // max-width: 500px; //use this to limit max lenght of the control \n  padding: 6px;\n  overflow: hidden;\n  position: relative;\n  &.controls::before {\n    content: \"\";\n    color: #212121;\n    background: #FFFFFF;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    border-radius:  ", "; //12px\n    width: var(--highlight-width);\n    transform: translateX(var(--highlight-x-pos));\n    position: absolute;\n    top: 3px;\n    bottom: 3px;\n    left: 0; \n    z-index: 0;\n  }\n  &.controls.ready::before {\n    transition: transform 0.3s ease, width 0.3s ease;\n  }\n"])), props => props.controlradius.toString().concat('', 'px'), props => props.segmentradius.toString().concat('', 'px'));
 const ControlsInput = exports.ControlsInput = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  opacity: 0;\n  margin: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  cursor: pointer;\n  height: 100%;\n"])));
-const Segment = exports.Segment = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 100%; uncomment for each segment to have matching width */  \n  min-width: ", ";  //120px;\n  position: relative;\n  text-align: center;\n  z-index: 1;  \n"])), props => props.segmentwidth.toString().concat('', 'px'));
+const Segment = exports.Segment = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  /* width: 100%; uncomment for each segment to have matching width */  \n  width: 50%;\n  min-width: ", ";  //120px;\n  position: relative;\n  text-align: center;\n  z-index: 1;  \n"])), props => props.segmentwidth.toString().concat('', 'px'));
 const SegmentLabel = exports.SegmentLabel = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: block;\n  padding: 0 6px;\n  transition: color 0.5s ease;\n  &.active {\n    color: ", ";\n  }\n  &.inactive {\n    color: ", ";\n  }\n"])), props => props.selectedtextcolor, props => props.unselectedtextcolor);

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AttachedIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const AttachedIcon = _ref => {
+  let {
+    width = '14',
+    height = '15',
+    fill = '#229E38'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11.2539 2.74609C10.543 2.03516 9.36719 2.03516 8.65625 2.74609L3.43359 7.99609C2.23047 9.19922 2.23047 11.1406 3.43359 12.3164C4.60938 13.5195 6.55078 13.5195 7.75391 12.3164L11.9102 8.16016C12.1562 7.91406 12.5664 7.91406 12.8125 8.16016C13.0859 8.43359 13.0859 8.84375 12.8125 9.08984L8.68359 13.2461C6.96094 14.9688 4.19922 14.9688 2.50391 13.2461C0.78125 11.5508 0.78125 8.78906 2.50391 7.06641L7.75391 1.81641C8.95703 0.613281 10.9531 0.613281 12.1836 1.81641C13.3867 3.04688 13.3867 5.04297 12.1836 6.24609L7.15234 11.2773C6.27734 12.1523 4.85547 12.0703 4.08984 11.1133C3.43359 10.293 3.51562 9.11719 4.25391 8.37891L8.41016 4.22266C8.65625 3.97656 9.06641 3.97656 9.3125 4.22266C9.58594 4.49609 9.58594 4.90625 9.3125 5.15234L5.18359 9.30859C4.91016 9.58203 4.88281 9.99219 5.12891 10.293C5.40234 10.6211 5.89453 10.6758 6.22266 10.3477L11.2539 5.31641C11.9648 4.60547 11.9648 3.45703 11.2539 2.74609Z",
+    fill: fill
+  }));
+};
+exports.AttachedIcon = AttachedIcon;
+var _default = exports.default = AttachedIcon;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CloseIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const CloseIcon = _ref => {
+  let {
+    width = '16',
+    height = '15',
+    fill = '#B1B1B1'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 2.0625C5.94922 2.0625 4.08984 3.15625 3.05078 4.90625C2.03906 6.68359 2.03906 8.84375 3.05078 10.5938C4.08984 12.3711 5.94922 13.4375 8 13.4375C10.0234 13.4375 11.8828 12.3711 12.9219 10.5938C13.9336 8.84375 13.9336 6.68359 12.9219 4.90625C11.8828 3.15625 10.0234 2.0625 8 2.0625ZM8 14.75C5.48438 14.75 3.1875 13.4375 1.92969 11.25C0.671875 9.08984 0.671875 6.4375 1.92969 4.25C3.1875 2.08984 5.48438 0.75 8 0.75C10.4883 0.75 12.7852 2.08984 14.043 4.25C15.3008 6.4375 15.3008 9.08984 14.043 11.25C12.7852 13.4375 10.4883 14.75 8 14.75ZM5.78516 5.53516C6.03125 5.28906 6.44141 5.28906 6.6875 5.53516L7.97266 6.82031L9.25781 5.53516C9.53125 5.28906 9.94141 5.28906 10.1875 5.53516C10.4609 5.80859 10.4609 6.21875 10.1875 6.46484L8.90234 7.75L10.1875 9.03516C10.4609 9.30859 10.4609 9.71875 10.1875 9.96484C9.94141 10.2383 9.53125 10.2383 9.25781 9.96484L7.97266 8.67969L6.6875 9.96484C6.44141 10.2383 6.03125 10.2383 5.78516 9.96484C5.51172 9.71875 5.51172 9.30859 5.78516 9.03516L7.07031 7.75L5.78516 6.46484C5.51172 6.21875 5.51172 5.80859 5.78516 5.53516Z",
+    fill: fill
+  }));
+};
+exports.CloseIcon = CloseIcon;
+var _default = exports.default = CloseIcon;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FileIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const FileIcon = _ref => {
+  let {
+    width = '11',
+    height = '15',
+    fill = '#212121'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 11 15",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8.75 13.4375C8.96875 13.4375 9.1875 13.2461 9.1875 13V5.125H7C6.50781 5.125 6.125 4.74219 6.125 4.25V2.0625H1.75C1.50391 2.0625 1.3125 2.28125 1.3125 2.5V13C1.3125 13.2461 1.50391 13.4375 1.75 13.4375H8.75ZM0 2.5C0 1.54297 0.765625 0.75 1.75 0.75H6.26172C6.72656 0.75 7.16406 0.941406 7.49219 1.26953L9.98047 3.75781C10.3086 4.08594 10.5 4.52344 10.5 4.98828V13C10.5 13.9844 9.70703 14.75 8.75 14.75H1.75C0.765625 14.75 0 13.9844 0 13V2.5Z",
+    fill: fill
+  }));
+};
+exports.FileIcon = FileIcon;
+var _default = exports.default = FileIcon;

package/package.json

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