sag_components 2.0.0-beta27 → 2.0.0-beta28

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalWrapper = exports.ModalTitle = exports.ModalHeader = exports.ModalClose = exports.ModalBody = exports.Modal = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const scrollableStyles = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E3E4E5;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
+const ModalWrapper = exports.ModalWrapper = _styledComponents.default.dialog`
+  width: 100vw;
+  height: 100vh;
+  padding: 20px;
+  border: none;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+  &[open] {
+    background-color: rgba(24, 24, 24, 0.80);
+    position: fixed;
+    inset: 0;
+    align-content: center;
+  }
+`;
+const Modal = exports.Modal = _styledComponents.default.div`
+    width: 79%;
+    max-width: 1500px;
+    margin: 0 auto;
+    ${scrollableStyles}
+`;
+const ModalHeader = exports.ModalHeader = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 32px;
+`;
+const ModalBody = exports.ModalBody = _styledComponents.default.div`
+    ${scrollableStyles}
+    max-height: 80vh;
+`;
+const ModalTitle = exports.ModalTitle = _styledComponents.default.h5`
+    font-family: 'Poppins', sans-serif;
+    font-size: 32px;
+    font-weight: 500;
+    color: white;
+    margin: 0;
+`;
+const ModalClose = exports.ModalClose = _styledComponents.default.button`
+    outline: none;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+`;

package/dist/stories/components/DoublePanelDataRow.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DoublePanelDataRow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DoublePanelDataRow = require("./DoublePanelDataRow.style");
+var _ArrowUpIcon = require("./icons/ArrowUpIcon");
+var _ArrowDownIcon = require("./icons/ArrowDownIcon");
+var _CommonFunctions = require("./CommonFunctions");
+/* eslint-disable no-restricted-globals */
+
+const DoublePanelDataRow = props => {
+  const {
+    width,
+    height,
+    data,
+    backgroundColor,
+    className,
+    customDataFormat,
+    showPercentChange
+  } = props;
+  const getArrowSign = arrowSign => {
+    if (!arrowSign) {
+      return '-';
+    }
+    if (arrowSign === 'up') {
+      return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
+        color: "#5FCC70",
+        value: 34 // TODO: when ready, replace with actual value
+      }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
+        width: 12,
+        height: 12
+      }), ' ', "(+34K)");
+    }
+    return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
+      color: "#D23630",
+      value: 66 // TODO: when ready, replace with actual value
+    }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
+      width: 12,
+      height: 12
+    }), ' ', "(-12K)");
+  };
+  return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.LinnerContainer, {
+    className: className,
+    backgroundColor: backgroundColor,
+    width: width,
+    height: height,
+    customDataFormat: customDataFormat
+  }, data.map(item => /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBox, {
+    className: "data-box-item"
+  }, item.title && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBoxTitle, {
+    className: "DataBoxTitle"
+  }, item.title), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItem, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, {
+    className: "DataBoxValue"
+  }, ''.concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemNoValue, null, "N/A")), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.ValueChange, null))));
+};
+exports.DoublePanelDataRow = DoublePanelDataRow;
+var _default = exports.default = DoublePanelDataRow;
+DoublePanelDataRow.defaultProps = {
+  className: '',
+  width: '100%',
+  height: 'auto',
+  data: [],
+  backgroundColor: '#FFFFFF',
+  customDataFormat: false,
+  showPercentChange: false
+};

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValueChange = exports.PercentageChange = exports.LinnerContainer = exports.DataBoxTitle = exports.DataBox = exports.CellItemValueSign = exports.CellItemNoValue = exports.CellItem = exports.BigValue = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  display: grid;
+  gap: 48px 0;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto auto;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: ${props => props.backgroundColor};
+  padding: 50px 20px 20px;
+  box-sizing: border-box;
+`;
+const DataBox = exports.DataBox = _styledComponents.default.div`
+  height: 100%;
+  padding: 0 40px;
+  border-left: 1px solid #d0d0d0;
+  &:nth-child(1),
+  &:nth-child(6) {
+    border-left: none;
+    padding-left: 0;
+  }
+  &:nth-child(5),
+  &:nth-child(10) {
+    padding-right: 0;
+  }
+`;
+const CellItem = exports.CellItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+`;
+const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
+  font-size: 18px;
+  display: block;
+  margin: 0 0 12px;
+`;
+const BigValue = exports.BigValue = _styledComponents.default.span`
+  font-size: 40px;
+  font-weight: 500;
+  margin-right: 5px;
+`;
+const CellItemValueSign = exports.CellItemValueSign = _styledComponents.default.span`
+  font-size: 16px;
+  font-weight: 400;
+`;
+const ValueChange = exports.ValueChange = _styledComponents.default.span`
+  font-size: 16px;
+  font-weight: 400;
+`;
+const CellItemNoValue = exports.CellItemNoValue = _styledComponents.default.span`
+  font-size: 40px;
+  font-weight: 500;
+`;
+const PercentageChange = exports.PercentageChange = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.color};
+`;

package/dist/stories/components/DownloadProgress.js

@@ -0,0 +1,97 @@
+"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 _ErrorIcon = require("./icons/ErrorIcon");
+var _SucceededIcon = require("./icons/SucceededIcon");
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+var _DownloadProgress = require("./DownloadProgress.style");
+const DownloadProgress = props => {
+  const {
+    title,
+    succeededMessage,
+    failedMessage,
+    downloadStatus,
+    showShadow,
+    progressPercent,
+    refreshInterval,
+    progressBarColor,
+    onTryAgainClick,
+    className
+  } = props;
+  const [DownloadStatus, setDownloadStatus] = (0, _react.useState)(downloadStatus);
+  (0, _react.useEffect)(() => {
+    setDownloadStatus(downloadStatus);
+  }, [downloadStatus]);
+  const displayProgressContent = () => {
+    let content = '';
+    switch (DownloadStatus) {
+      case 'inProgress':
+        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
+          className: "ProgressBar",
+          color: progressBarColor,
+          progressPercent: progressPercent,
+          refreshInterval: refreshInterval,
+          width: "100%"
+        }));
+        break;
+      case 'succeeded':
+        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_succeeded"
+        }, succeededMessage), /*#__PURE__*/_react.default.createElement(_SucceededIcon.SucceededIcon, {
+          color: "#92CF17",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      case 'failed':
+        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
+          className: "DownloadProgressContentContainer"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_failed"
+        }, failedMessage), /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
+          className: "DownloadProgressStatusMessage_TryAgain",
+          onClick: () => onTryAgainClick({
+            eventName: 'onTryAgainClick'
+          })
+        }, "Try again"), /*#__PURE__*/_react.default.createElement(_ErrorIcon.ErrorIcon, {
+          color: "#FF3949",
+          width: "12px",
+          height: "12px"
+        }));
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return content;
+  };
+  return /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressMainContainer, {
+    className: className,
+    showShadow: showShadow
+  }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressTitle, {
+    className: "DownloadProgressTitle"
+  }, title), displayProgressContent());
+};
+var _default = exports.default = DownloadProgress;
+DownloadProgress.defaultProps = {
+  title: 'CPG presentation shopper marketing, supplier name ',
+  succeededMessage: 'File Downloaded',
+  failedMessage: 'Something went wrong',
+  downloadStatus: 'inProgress',
+  showShadow: true,
+  progressPercent: 0,
+  refreshInterval: 100,
+  progressBarColor: '#92CF17',
+  onTryAgainClick: () => {},
+  className: 'DownloadProgressMainContainer'
+};

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DownloadProgressTitle = exports.DownloadProgressStatusMessage = exports.DownloadProgressMainContainer = exports.DownloadProgressContentContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const DownloadProgressMainContainer = exports.DownloadProgressMainContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 400;
+  color: #212121;
+  line-height: 14px;
+  position: relative;
+  margin: 0;
+  padding: 10px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
+`;
+const DownloadProgressContentContainer = exports.DownloadProgressContentContainer = _styledComponents.default.div` 
+  display: flex;
+  align-items: center;
+  margin: 0 10px;
+  gap: 10px;
+`;
+const DownloadProgressTitle = exports.DownloadProgressTitle = _styledComponents.default.h3`  
+  font-weight: 400;
+  margin: 10px;  
+`;
+const DownloadProgressStatusMessage = exports.DownloadProgressStatusMessage = _styledComponents.default.h3`   
+  margin: 3px 0;
+  &.DownloadProgressStatusMessage_succeeded{
+    font-weight: 500;  
+  }
+  &.DownloadProgressStatusMessage_failed{
+    color: #7F7D7D;
+    font-weight: 400;  
+  }
+  &.DownloadProgressStatusMessage_TryAgain{
+    color: #1B30AA;
+    font-weight: 400;
+    text-decoration: underline;  
+    &:hover {
+    background-Color: #f1f1f1;
+    cursor: pointer;
+  } 
+  }
+`;

package/dist/stories/components/Dropdown.js

@@ -0,0 +1,231 @@
+"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 = exports.Dropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+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"));
+var _ArrowDropDownIcon = require("./icons/ArrowDropDownIcon");
+var _Dropdown = require("./Dropdown.style");
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+  fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+  fontSize: "small"
+});
+
+// import './fonts/Poppins-Regular.ttf';
+
+/**
+ *  SAG Dropdown
+ */
+const Dropdown = _ref => {
+  let {
+    width = '100%',
+    size,
+    text,
+    shape,
+    placeHolder,
+    multiSelect,
+    showPopupIcon,
+    showSearchIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = '#1B30AA',
+    required,
+    inputRef,
+    defaultValue,
+    allowedInput = 'all',
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = '14px',
+    placeHolderFontSize = '14px'
+  } = _ref;
+  /**
+   *  SAG Dropdown
+   */
+
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
+      onInputChange(currentInputValue);
+    }, 1000);
+    return () => clearTimeout(delayDebounceFn);
+  }, [currentInputValue]);
+  const theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: '#db3131'
+          }
+        }
+      }
+    }
+  });
+
+  // Single Text Style
+  const getTextFieldStyleSingle = () => {
+    if (shape === 'round') {
+      // round
+      return {
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          legend: {
+            marginLeft: '10px'
+          }
+        },
+        '& .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'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+          }
+        },
+        '& .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'
+        },
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  const onInputChangeHandler = (event, newInputValue) => {
+    setCurrentInputValue({
+      syntheticBaseEvent: event,
+      inputValue: newInputValue
+    });
+  };
+  const onChangeHandler = (event, newValue) => {
+    setSelectedOptionsState(newValue);
+    onChange({
+      syntheticBaseEvent: event,
+      newValue
+    });
+  };
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+    switch (allowedInput) {
+      case 'all':
+        return true;
+      case 'alpha':
+        if (ALPHA_REGEX.test(inputChar)) return true;
+        return false;
+      case 'numeric':
+        if (NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      case 'alphaNumeric':
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      default:
+        return true;
+    }
+  };
+
+  // --------------------------------------- DROPDOWN SINGLE --------------------------------
+  const getAutocompleteSingle = () => {
+    return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+      key: reset,
+      onChange: (event, newValue) => {
+        onChangeHandler(event, newValue);
+      },
+      onInputChange: (event, newInputValue) => {
+        onInputChangeHandler(event, newInputValue);
+      },
+      disabled: disabled,
+      disablePortal: true,
+      disableClearable: disableClearable,
+      defaultValue: defaultValue,
+      id: "combo-box",
+      options: options,
+      popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+        width: "0.5em",
+        height: "0.5em"
+      }) : null,
+      forcePopupIcon: "auto",
+      renderInput: params => /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, params, {
+        onKeyDown: event => {
+          if (!isInputAllowed(event.key)) {
+            event.preventDefault();
+          }
+        },
+        required: required,
+        label: text,
+        inputRef: inputRef || null,
+        size: size,
+        sx: getTextFieldStyleSingle(),
+        placeholder: placeHolder,
+        InputProps: {
+          ...params.InputProps,
+          style: {
+            fontSize: placeHolderFontSize,
+            fontFamily: 'Poppins'
+          },
+          startAdornment: showSearchIcon ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+            position: "start"
+          }, /*#__PURE__*/_react.default.createElement(_Search.default, {
+            fontSize: "medium"
+          })) : null
+        }
+      })),
+      ListboxProps: {
+        style: {
+          fontSize: dropdownListfontSize,
+          // default: 14px
+          fontFamily: 'Poppins'
+        }
+      }
+    }));
+  };
+
+  // --------------------------------- MAIN -------------------------------------
+  return /*#__PURE__*/_react.default.createElement(_Dropdown.DropdownContainer, {
+    width: width
+  }, getAutocompleteSingle());
+};
+exports.Dropdown = Dropdown;
+var _default = exports.default = Dropdown;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div`
+  width: ${props => props.width};  
+  text-align: left;  
+  position: relative; 
+  align-items: center;
+  justify-content: center;
+  font-family: Poppins;
+  font-size: 14px;
+`;