sag_components 2.0.0-beta26 → 2.0.0-beta28

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

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.ViewCreativeButtonAndListBoxContainer = exports.SubLineContainer = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.DraftTag = exports.DownloadButtonContainer = exports.BottonsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const MainContainer = exports.MainContainer = _styledComponents.default.div`
+  display: flex;
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-size: 1rem;
+  color: ${props => props.textcolor ? props.textcolor : '#000'};
+  width: ${props => props.width};
+  height: ${props => props.height};
+  border-radius: 12px;
+`;
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div`
+  display: flex;
+  align-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: 12px;
+  background: white;
+  padding: 20px 0 0;
+  font-weight: 400;
+  white-space: pre-wrap;
+  width: 100%;
+  @media (max-width: 1536px) {
+    padding: 12px 0 0;
+  }
+`;
+const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div`
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div`
+  display: flex;
+  position: relative;
+  align-content: center;
+  align-items: center;
+  gap: 20px;
+`;
+const DraftTag = exports.DraftTag = _styledComponents.default.div`
+  color: #E41111;
+  border: 2px solid #E41111;
+  font-size: 20px;
+  padding: 6px 18px;
+`;
+const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 10px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  color: ${props => props.disabled ? '#B1B1B1' : '#212121'};
+  &:hover {
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+`;
+const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4`
+  display: flex;  
+  line-height: 19px;
+  font-size: 14px;
+  font-weight: 400;
+  margin: 3px 10px;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
+const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div`
+  position: relative;
+  overflow: visible;
+  font-size: 18px;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
+const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div`
+  display: flex;
+  position: absolute;
+  left: ${props => props.left};
+  top:  ${props => props.top};
+  z-index:1000;
+`;
+const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div`
+  display: flex;
+  align-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 0.5rem 0 0 0;
+`;
+const FilterValue = exports.FilterValue = _styledComponents.default.p`
+  color: #212121;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
+const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p`
+  color: #ccc;
+  margin: 0;
+`;
+const Retailer = exports.Retailer = _styledComponents.default.div`
+  color: #1b30aa;
+  margin: 0;
+  margin-inline-end: 5px;
+`;
+const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+`;
+const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div`
+  max-width: 70%;
+`;
+const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div`
+  display: flex;
+  gap: 40px;
+  width: 100%;
+  margin-top: 8px;
+`;
+const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong`
+  font-weight: 500;
+`;
+const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p`
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
+const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a`
+  color: ${props => props.disabled ? '#B1B1B1' : '#1b30aa'};
+  &:hover {
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+`;
+const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div`
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 1.5rem;
+`;
+const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div``;
+const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: flex-start;
+  font-size: 14px;
+  @media (max-width: 1536px) {
+    font-size: 12px;
+  }  
+`;
+const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div`
+  display: flex;
+  width: 100%;
+`;
+const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong`
+  font-size: 14px;
+  font-weight: 500;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }  
+`;
+const PeriodValue = exports.PeriodValue = _styledComponents.default.p`
+  line-height: 19px;
+  font-size: 14px;
+  font-weight: 400;
+  margin: 0 0 0 10px;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;

package/dist/stories/components/CollapseMenuItem.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MenuItemClosedIcon = require("./icons/MenuItemClosedIcon");
+var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
+var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
+var _CollapseMenuItem = require("./CollapseMenuItem.style");
+const CollapseMenuItem = props => {
+  const {
+    title,
+    subTitle,
+    children,
+    showBorder,
+    buttonAlignment,
+    className
+  } = props;
+  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
+  const handleToggle = () => {
+    setIsItemOpen(!IsItemOpen);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemMainContainer, {
+    className: className,
+    showBorder: showBorder
+  }, /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContainer, {
+    onClick: handleToggle,
+    style: {
+      cursor: 'pointer'
+    }
+  }, buttonAlignment === 'left' && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.LeftIconContainer, {
+    className: "LeftIconContainer"
+  }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    color: "#212121"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, {
+    color: "#212121"
+  })), /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemTitle, {
+    id: "CollapseMenuItemTitle"
+  }, title), /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemSubTitle, {
+    id: "CollapseMenuItemSubTitle"
+  }, subTitle !== undefined && subTitle !== null && subTitle !== '' ? '|' : ''), /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemSubTitle, {
+    id: "CollapseMenuItemSubTitle"
+  }, subTitle), buttonAlignment === 'right' && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.RightIconContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
+    color: "#212121"
+  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+    color: "#212121"
+  }))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContentContainer, {
+    id: "CollapseMenuItemContentContainer"
+  }, children || ''));
+};
+var _default = exports.default = CollapseMenuItem;
+CollapseMenuItem.defaultProps = {
+  className: '',
+  title: '',
+  subTitle: '',
+  showBorder: false,
+  buttonAlignment: 'left'
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightIconContainer = exports.LeftIconContainer = exports.CollapseMenuItemTitle = exports.CollapseMenuItemSubTitle = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div`
+  margin: 0;
+  background: #ffffff;
+  box-shadow: ${props => props.showBorder ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null};
+  border-radius: 12px;  
+`;
+const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px;
+`;
+const CollapseMenuItemTitle = exports.CollapseMenuItemTitle = _styledComponents.default.h3`
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 25px;
+  margin: 0 5px 0 10px;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const CollapseMenuItemSubTitle = exports.CollapseMenuItemSubTitle = _styledComponents.default.h3`
+  color: #757171;
+  font-weight: 500;
+  font-size: 18px;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+  line-height: 25px;
+  margin: 0 5px;
+
+`;
+const LeftIconContainer = exports.LeftIconContainer = _styledComponents.default.h3`
+  margin: 0 0 0 10px;
+`;
+const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div`
+  font-weight: 500;
+  font-size: 14px;
+  margin: 0;
+`;
+const RightIconContainer = exports.RightIconContainer = _styledComponents.default.div`
+  width: 20px;
+  height: 20px;
+  margin-left: auto;
+`;

package/dist/stories/components/CommonFunctions.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = exports.formattedValue = void 0;
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-shadow */
+const getCurrencySign = (currencyTypeToConvert, value) => {
+  if (value === undefined || value === null) {
+    return '';
+  }
+  if (isNaN(parseFloat(value))) {
+    return '';
+  }
+  if (!currencyTypeToConvert) return '';
+  let currencySign = '';
+  const currencyFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currencyTypeToConvert
+  });
+  currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
+  return currencySign;
+};
+exports.getCurrencySign = getCurrencySign;
+const getFormattedUnits = num => {
+  if (num === undefined || num === null) {
+    return '';
+  }
+  if (isNaN(parseFloat(num))) {
+    return '';
+  }
+  if (Math.abs(num) >= 1000000000) {
+    return 'B';
+  }
+  if (Math.abs(num) >= 1000000) {
+    return 'M';
+  }
+  if (Math.abs(num) >= 1000) {
+    return 'K';
+  }
+  return '';
+};
+exports.getFormattedUnits = getFormattedUnits;
+const getFormattedValue = num => {
+  const value = num !== null && num !== void 0 ? num : 0;
+  if (isNaN(parseFloat(value))) {
+    return null;
+  }
+  const formatNumber = value => {
+    const numValue = Number(value);
+    return numValue.toFixed(1);
+  };
+  if (Math.abs(num) >= 1000000000) {
+    return formatNumber(num / 1000000000);
+  }
+  if (Math.abs(num) >= 1000000) {
+    return formatNumber(num / 1000000);
+  }
+  if (Math.abs(num) >= 1000) {
+    return formatNumber(num / 1000);
+  }
+  if (Number.isInteger(num)) {
+    return num;
+  } else {
+    return formatNumber(num);
+  }
+};
+exports.getFormattedValue = getFormattedValue;
+const formattedValue = num => {
+  if (num >= 1000 && num < 10000) {
+    return Math.round(num / 1000);
+  }
+  if (num >= 10000 && num < 100000) {
+    return (num / 1000).toFixed(1);
+  }
+  if (num >= 100000) {
+    return (num / 1000).toFixed(0);
+  }
+  return num.toString();
+};
+exports.formattedValue = formattedValue;
+const getNumberWithCommas = x => {
+  let param = x.toString();
+  const pattern = /(-?\d+)(\d{3})/;
+  while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
+  return param;
+};
+exports.getNumberWithCommas = getNumberWithCommas;
+const isNumericValue = num => {
+  if (num === undefined || num === null) {
+    return false;
+  }
+  if (isNaN(parseFloat(num))) {
+    return false;
+  }
+  return true;
+};
+exports.isNumericValue = isNumericValue;

package/dist/stories/components/Datepicker.js

@@ -0,0 +1,148 @@
+"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.Datepicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _DatePicker = require("@mui/x-date-pickers/DatePicker");
+var _demo = require("@mui/x-date-pickers/internals/demo");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _Datepicker = require("./Datepicker.style");
+var _CalendarIcon = require("./icons/CalendarIcon");
+/**
+ *  SAG Datepicker
+ */
+const Datepicker = _ref => {
+  let {
+    width = '100%',
+    text,
+    format = 'MMM DD, YYYY',
+    shape,
+    onChange,
+    value,
+    disableClearable,
+    disabled = false,
+    labelColor = '#1B30AA'
+  } = _ref;
+  /**
+   *  SAG Datepicker
+   */
+
+  const [valueState, setvalueState] = _react.default.useState(null);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      setvalueState((0, _dayjs.default)(value));
+    } else {
+      setvalueState(null);
+    }
+  }, [value]);
+  (0, _react.useEffect)(() => {}, [valueState]);
+  const getTextFieldStyle = () => {
+    if (shape === 'round') {
+      // round
+      return {
+        '& .MuiInputLabel-inputRoot': {
+          fontFamily: 'Poppins',
+          fontSize: '14px',
+          fontWidth: 400,
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
+          width
+          // color: labelColor,
+        },
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          fontFamily: 'Poppins',
+          fontSize: '14px',
+          fontWidth: 400,
+          width,
+          // color: labelColor,
+          legend: {
+            marginLeft: '10px'
+          },
+          // 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"] .MuiInputLabel-input:first-of-type': {
+            // Default left padding is 6px
+            paddingLeft: '10px'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+            // color: labelColor,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
+            // color: labelColor,
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+            // color: 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' : valueState ? labelColor : '#757575'
+        },
+        '& .MuiInputLabel-outlined': {
+          fontFamily: 'Poppins',
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
+          fontWidth: 400,
+          fontSize: '18px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: 0,
+          background: 'white'
+          // color: labelColor,
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_Datepicker.DatepickerContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
+    dateAdapter: _AdapterDayjs.AdapterDayjs,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
+    components: ['DatePicker'],
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+    value: valueState,
+    clearable: true,
+    disabled: disabled,
+    onChange: newValue => {
+      setvalueState(newValue);
+      onChange({
+        newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
+      });
+    },
+    sx: getTextFieldStyle(),
+    label: text,
+    slots: {
+      openPickerIcon: _CalendarIcon.CalendarIcon
+    },
+    slotProps: {
+      textField: {
+        fullWidth: true
+      },
+      actionBar: {
+        actions: ['clear']
+      }
+    },
+    format: format
+  }))));
+};
+exports.Datepicker = Datepicker;
+var _default = exports.default = Datepicker;

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

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

package/dist/stories/components/DialogOverlay.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CloseXIcon = require("./icons/CloseXIcon");
+var _DialogOverlay = require("./DialogOverlay.style");
+const DialogOverlay = props => {
+  const {
+    title,
+    children,
+    onDialogClose,
+    className
+  } = props;
+  (0, _react.useEffect)(() => {
+    const modal = document.querySelector('dialog');
+    modal.showModal();
+  }, []);
+  const closeModal = () => {
+    const modal = document.querySelector('dialog');
+    modal.close();
+    onDialogClose();
+  };
+  return /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalWrapper, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_DialogOverlay.Modal, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalTitle, null, title), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalClose, {
+    type: "button",
+    onClick: closeModal
+  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
+    fill: "white"
+  }))), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalBody, {
+    id: "modalBody"
+  }, children)));
+};
+var _default = exports.default = DialogOverlay;
+DialogOverlay.defaultProps = {
+  title: 'Title',
+  children: null,
+  onDialogClose: () => {},
+  className: ''
+};