sag_components 2.0.0-beta40 → 2.0.0-beta41

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

@@ -1,70 +0,0 @@
-"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

@@ -1,70 +0,0 @@
-"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

@@ -1,66 +0,0 @@
-"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

@@ -1,97 +0,0 @@
-"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

@@ -1,51 +0,0 @@
-"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

@@ -1,231 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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;
-`;