sag_components 1.0.1021 → 1.0.1022

package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PerformanceAnalyticsTotals = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CommonFunctions = require("../../utils/CommonFunctions");
-var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals.style");
-/* PerformanceAnalyticsTotals */
-const PerformanceAnalyticsTotals = props => {
-  const {
-    textcolor,
-    width,
-    height,
-    totalsData
-  } = props;
-  const getGrowthPercent = (growthPercent, showGrowthPercentSign) => {
-    if (!growthPercent) {
-      return '';
-    }
-    const growthPercentSign = showGrowthPercentSign && growthPercent > 0 ? '+' : '';
-    return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.GrowthPercent, {
-      id: "GrowthPercent"
-    }, "(", growthPercentSign, growthPercent, "%)");
-  };
-  const getTotalsData = () => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TotalsDataContainer, {
-    id: "TotalsDataContainer"
-  }, totalsData === null || totalsData === void 0 ? void 0 : totalsData.map((item, i) => /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.TitleAndValueContainer, {
-    id: "TitleAndValueContainer",
-    key: `${item.title + i}`
-  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Title, {
-    id: "Title",
-    width: width
-  }, item.title), /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySignAndFormattedValueContainer, {
-    id: "CurrencySignAndFormattedValueContainer"
-  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.FormattedValue, {
-    id: "FormattedValue",
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.CurrencySign, {
-    id: "CurrencySign"
-  }, item.currency ? (0, _CommonFunctions.getCurrencySign)(item.currencyType, item.value) : ''), item.dotCut ? (0, _CommonFunctions.getFormattedValue)(item.value) : (0, _CommonFunctions.getNumberWithCommas)(item.value), item.dotCut ? (0, _CommonFunctions.getFormattedUnits)(item.value) : '', item.growthPercent ? getGrowthPercent(item.growthPercent, item.showGrowthPercentSign) : '')))));
-  return /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.ControlsContainer, {
-    id: "ControlsContainer",
-    height: height,
-    width: width,
-    textcolor: textcolor
-  }, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsTotals.Controls, {
-    id: "Controls",
-    height: height,
-    width: width
-  }, getTotalsData()) : '');
-};
-exports.PerformanceAnalyticsTotals = PerformanceAnalyticsTotals;
-var _default = exports.default = PerformanceAnalyticsTotals;
-PerformanceAnalyticsTotals.defaultProps = {
-  textcolor: '#212121',
-  width: '',
-  height: '',
-  totalsData: [{
-    title: '',
-    value: '',
-    dotCut: true,
-    currency: true,
-    currencyType: true,
-    growthPercent: true,
-    showGrowthPercentSign: true
-  }]
-};

package/dist/stories/components/PerformanceAnalyticsTotals/PerformanceAnalyticsTotals.stories.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TotalCostSales = exports.NewExistingShoppers = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PerformanceAnalyticsTotals = require("./PerformanceAnalyticsTotals");
-const totalsDataCostSales = [{
-  title: 'Total Cost',
-  value: 360000,
-  dotCut: true,
-  currency: true,
-  currencyType: 'USD',
-  growthPercent: 15.2,
-  showGrowthPercentSign: true
-}, {
-  title: 'Incremental Sales',
-  value: 960000,
-  dotCut: true,
-  currency: true,
-  currencyType: 'USD',
-  growthPercent: 13.5,
-  showGrowthPercentSign: true
-}, {
-  title: 'Incremental Sales ROI',
-  value: 2.7,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: null,
-  showGrowthPercentSign: true
-}];
-const totalsDataShoppers = [{
-  title: 'Total Shoppers',
-  value: 3500000,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: null,
-  showGrowthPercentSign: false
-}, {
-  title: 'New Shoppers',
-  value: 500500,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: 14.3,
-  showGrowthPercentSign: false
-}, {
-  title: 'Existing Shoppers',
-  value: 2900000,
-  dotCut: true,
-  currency: false,
-  currencyType: null,
-  growthPercent: 85.7,
-  showGrowthPercentSign: false
-}];
-var _default = exports.default = {
-  title: 'SAG BI/PerformanceAnalyticsTotals',
-  component: _PerformanceAnalyticsTotals.PerformanceAnalyticsTotals,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figspec',
-      accessToken: 'figd_vSza21Sk6g-JWb5K_GAQhRJhmuRhS6k1Ju1KNGpC'
-    }
-  },
-  argTypes: {
-    totalsData: {
-      name: 'totalsData',
-      description: 'array [] of objects representing totals data to display in component '
-    },
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / %)'
-    }
-  }
-};
-const TotalCostSales = exports.TotalCostSales = {
-  args: {
-    totalsData: totalsDataCostSales
-  }
-};
-const NewExistingShoppers = exports.NewExistingShoppers = {
-  args: {
-    totalsData: totalsDataShoppers
-  }
-};

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

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TotalsDataContainer = exports.TitleAndValueContainer = exports.Title = exports.LegendFormatedValueContainer = exports.GrowthPercent = exports.FormattedValue = exports.CurrencySignAndFormattedValueContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-size: ${props => props.rootFont};
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  border-radius: 12px;
-  align-self: center;
-
-  > * {
-    box-sizing: border-box;
-  }
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  display: flex;
-  gap: 20px;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: white;
-`;
-const TotalsDataContainer = exports.TotalsDataContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-`;
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px;
-`;
-const Title = exports.Title = _styledComponents.default.h4`
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 27px;
-  margin: 0;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-`;
-const CurrencySign = exports.CurrencySign = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
-const GrowthPercent = exports.GrowthPercent = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
-const FormattedValue = exports.FormattedValue = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 40px;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
-`;
-const LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div`
-  font-size: 0.875rem;
-`;

package/dist/stories/components/Popup/Popup.js

@@ -1,172 +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 _reactHookForm = require("react-hook-form");
-var _MenuItemClosedIcon = require("../../icons/MenuItemClosedIcon");
-var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
-var _PopupContent = _interopRequireDefault(require("../PopupContent/PopupContent"));
-var _SagButton = _interopRequireDefault(require("../SagButton/SagButton"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _Popup = require("./Popup.style");
-const Popup = props => {
-  const {
-    title,
-    popupItemsData,
-    isPopupOpen,
-    width,
-    height,
-    borderColor,
-    subtitleTextColor,
-    onOverlayClick,
-    children,
-    onChange
-  } = props;
-  const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
-  const useFormMethods = (0, _reactHookForm.useForm)({
-    mode: 'onChange'
-  });
-  const divRef = (0, _react.useRef)(null);
-  const [divHeight, setDivHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (divRef.current) {
-      const {
-        top,
-        bottom
-      } = divRef.current.getBoundingClientRect();
-      const height = bottom - top;
-      setDivHeight(height);
-    }
-  }, [height]);
-  (0, _react.useEffect)(() => {
-    setIsPopupOpen(isPopupOpen);
-  }, [isPopupOpen]);
-  const openPopup = () => {
-    setIsPopupOpen(true);
-  };
-  const closePopup = e => {
-    setIsPopupOpen(false);
-    onOverlayClick(e);
-  };
-  const AccordionItem = _ref => {
-    var _children$props, _children$props2;
-    let {
-      title,
-      rowsData,
-      children
-    } = _ref;
-    const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
-    const handleToggle = () => {
-      setIsItemOpen(!IsItemOpen);
-    };
-    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, {
-      id: "AccordionItemMainContainer",
-      borderColor: borderColor
-    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
-      id: "AccordionItemContainer",
-      onClick: handleToggle,
-      style: {
-        cursor: 'pointer'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
-      id: "AccordionItemIconContainer"
-    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, null) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, null)), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
-      id: "AccordionItemTitle",
-      subtitleTextColor: subtitleTextColor
-    }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
-      id: "AccordionContentContainer"
-    }, title === 'Campaigns' ? children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[0] : title === 'Products' ? children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.children[1] : '', /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
-      id: "PopupContent",
-      width: "100%",
-      height: "100%",
-      rowsData: rowsData,
-      borderColor: borderColor,
-      onClick: () => {},
-      onChange: onChange
-    })));
-  };
-  const Accordion = _ref2 => {
-    let {
-      items,
-      children
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
-      id: "AccordionContainer",
-      maxHeight: divHeight ? (divHeight - 190).toString().concat('', 'px') : null
-    }, items.map((item, index) => {
-      var _item$rowsData;
-      return /*#__PURE__*/_react.default.createElement(AccordionItem, {
-        key: index,
-        title: item.title,
-        rowsData: ((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.length) > 0 ? item.rowsData : []
-      }, children);
-    }));
-  };
-  return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
-    id: "MainContainer"
-  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, useFormMethods, /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: useFormMethods.handleSubmit(submittedValues => console.log('submittedValues', submittedValues))
-  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
-    id: "ModalOverlay",
-    className: "modal-overlay",
-    onClick: e => closePopup(e)
-  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
-    id: "ModalContent",
-    ref: divRef,
-    className: "modal-content",
-    height: height,
-    width: width,
-    onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, {
-    id: "TitleContainer"
-  }, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
-    id: "Close",
-    className: "close",
-    onClick: e => closePopup(e)
-  }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
-    items: popupItemsData
-  }, children), /*#__PURE__*/_react.default.createElement(_Popup.ButtonsContainer, {
-    id: "ButtonsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_Popup.InputCommit, {
-    value: "Save",
-    type: "submit",
-    style: {
-      backgroundColor: '#BCC6DA',
-      color: 'white',
-      transition: 'background-color 0.3s, color 0.3s'
-    },
-    borderColor: borderColor
-  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    text: "Save",
-    type: "primary",
-    size: "medium",
-    isSubmitButton: true
-  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
-    textColor: "#212121",
-    backgroundColor: "#ffffff",
-    borderColor: borderColor,
-    onClickColor: "#B1B1B1",
-    radius: "8px",
-    text: "Cancel",
-    height: "40px",
-    width: "100px",
-    fontSize: "14px",
-    fontWeight: "500",
-    disabled: false,
-    onClick: e => closePopup(e)
-  })))))));
-};
-var _default = exports.default = Popup;
-Popup.defaultProps = {
-  isPopupOpen: true,
-  width: '800px',
-  height: '600px',
-  onSaveClick: () => {},
-  onCancelClick: () => {},
-  onOverlayClick: () => {}
-};