sag_components 1.0.684 → 1.0.686

package/dist/stories/components/BannerEventBox.js

@@ -1,20 +1,17 @@
 "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.BannerEventBox = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _BannerEventBox = require("./BannerEventBox.style");
 var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
 var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
 var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
 var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
 var _HannafordIcon_new = require("./icons/HannafordIcon_new");
-var _InfoIcon = _interopRequireDefault(require("./icons/InfoIcon"));
-var _TspanTooltip = _interopRequireDefault(require("./TspanTooltip"));
 const BannerEventBox = props => {
   const {
     width,
@@ -25,11 +22,6 @@ const BannerEventBox = props => {
     data,
     onInfoClick
   } = props;
-  const [tooltipPos, setTooltipPos] = (0, _react.useState)({
-    x: 0,
-    y: 0
-  });
-  const [showItemTooltip, setShowItemTooltip] = (0, _react.useState)(Array(data.length).fill(false));
   const formatedBanners = () => {
     switch (banner) {
       case 'Stop&Shop':
@@ -64,47 +56,16 @@ const BannerEventBox = props => {
   const onInfoClickHandler = event => {
     onInfoClick(event);
   };
-  const handleItemMouseEnter = (index, e) => {
-    const iconBounds = e.target.getBoundingClientRect();
-    setShowItemTooltip(prevState => {
-      const newState = [...prevState];
-      newState[index] = true;
-      return newState;
-    });
-    setTooltipPos({
-      x: iconBounds.left + iconBounds.width / 2,
-      y: iconBounds.top
-    });
-  };
-  const handleItemMouseLeave = () => {
-    setShowItemTooltip(Array(data.length).fill(false));
-  };
   return /*#__PURE__*/_react.default.createElement(_BannerEventBox.MainContainer, {
     height: height,
     width: width
   }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.TitleWrapper, null, formatedBanners(banner).icon, "|", /*#__PURE__*/_react.default.createElement(_BannerEventBox.CardTitle, null, formatedBanners(banner).name)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Description"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, description)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Dates:"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, dates.join(' - '))), /*#__PURE__*/_react.default.createElement(_BannerEventBox.MoreInfo, {
     onClick: () => onInfoClickHandler(banner)
   }, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => {
-    var _item$items, _item$items2;
+    var _item$items;
     return item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: item.name
-    }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, {
-      onMouseEnter: e => handleItemMouseEnter(index, e),
-      onMouseLeave: handleItemMouseLeave
-    }, item.name, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
-      width: "12",
-      height: "12"
-    }), showItemTooltip[index] && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
-      direction: "top",
-      content: /*#__PURE__*/_react.default.createElement("ul", null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(i => /*#__PURE__*/_react.default.createElement("li", {
-        key: i
-      }, i))),
-      top: tooltipPos.y,
-      left: tooltipPos.x,
-      style: {
-        pointerEvents: 'none'
-      }
-    })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, (_item$items2 = item.items) === null || _item$items2 === void 0 ? void 0 : _item$items2.length)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null));
+    }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, null, item.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null));
   })));
 };
 exports.BannerEventBox = BannerEventBox;

package/dist/stories/components/Button.js

@@ -31,26 +31,25 @@ const Button = props => {
     hoverBackgroundColor,
     hoverBorderColor,
     disabledTextColor,
-    // new
     disabledBackgroundColor,
-    // new
     disabledBorderColor,
-    // new
     leftIcon,
-    // new
     rightIcon,
-    // new
-    onClick
-    // radius, // removed
-    // fontFamily, // removed
-    // fontSize, // removed
-    // shape, // removed
+    onClick,
+    isSubmitButton
   } = props;
   const [clicked, setClicked] = (0, _react.useState)(false);
   const [hover, setHover] = (0, _react.useState)(false);
+  const handleSubmitButtonOnClick = () => {
+    setClicked(true);
+    onClick("SubmitButtonOnClick: ".concat(text));
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
   const handleButtonClick = () => {
     setClicked(true);
-    onClick(text);
+    onClick("ButtonOnClick: ".concat(text));
     setTimeout(() => {
       setClicked(false);
     }, 300);
@@ -152,7 +151,24 @@ const Button = props => {
     className: "ButtonContainer",
     width: width || null,
     height: height || (size === 'small' ? '33px' : '45px')
-  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
+  }, isSubmitButton ? /*#__PURE__*/_react.default.createElement(_Button.InputCommit, {
+    className: clicked ? 'InputCommit-clicked' : 'InputCommit',
+    value: text,
+    type: "submit",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px'),
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
+    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
+    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
+    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
+    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
+    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
+    disabled_text_color: disabledTextColor || '#B1B1B1',
+    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
+    disabled_border_color: disabledBorderColor || '#E3E4E5',
+    padding: size === 'small' ? '0 16px' : '0 20px',
+    onClick: !disabled ? handleSubmitButtonOnClick : null
+  }) : /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
     className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
     onMouseEnter: () => setHover(true),
     onMouseLeave: () => setHover(false),
@@ -195,5 +211,6 @@ Button.defaultProps = {
   disabledBorderColor: '',
   onClick: () => {},
   leftIcon: 'none',
-  rightIcon: 'none'
+  rightIcon: 'none',
+  isSubmitButton: false
 };

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

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Label = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
+exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  //position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
-const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";  \n  color: ", "; \n  border: ", "; \n  border-radius: 12px;\n  background-color: ", ";\n  box-sizing: border-box;\n  gap: 8px;  \n  padding: ", "; \n  &:hover {\n    background-color: ", ";\n    border-color: ", ";    \n    color: ", ";    \n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.ButtonItem-clicked {\n    background-color: ", ";\n    //padding: 0 10px;  \n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
+const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";  \n  color: ", "; \n  border: ", "; \n  border-radius: 12px;\n  background-color: ", ";\n  box-sizing: border-box;\n  gap: 8px;  \n  padding: ", "; \n  &:hover {\n    background-color: ", ";\n    border-color: ", ";    \n    color: ", ";    \n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.ButtonItem-clicked {\n    background-color: ", ";\n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
 const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: 'Poppins';\n  font-style: normal;\n  font-weight: 400;    \n  pointer-events: none;\n  font-size: 14px;\n  user-select: none;   \n"])));
-const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n"])));
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n"])));
+const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;  \n  border:  ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;  \n  width: ", ";\n  height: ", ";  \n  color: ", "; \n  border: ", "; \n  border-radius: 12px;\n  background-color: ", "; \n  cursor: pointer;\n  padding: ", "; \n  \n  &:hover {\n    background-color: ", ";\n    border-color: ", ";    \n    color: ", ";    \n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.InputCommit-clicked {\n    background-color: ", ";\n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);

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

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
-var _reactHookForm = require("react-hook-form");
-var _SagButton = _interopRequireDefault(require("../../components/SagButton"));
+var _SagButton = _interopRequireDefault(require("../SagButton"));
+var _Button = _interopRequireDefault(require("../Button"));
 var _Popup = require("./Popup.style");
 const Popup = props => {
   const {
@@ -28,7 +29,7 @@ const Popup = props => {
   } = props;
   const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
   const useFormMethods = (0, _reactHookForm.useForm)({
-    mode: "onChange"
+    mode: 'onChange'
   });
   const divRef = (0, _react.useRef)(null);
   const [divHeight, setDivHeight] = (0, _react.useState)(0);
@@ -70,7 +71,7 @@ const Popup = props => {
       id: "AccordionItemContainer",
       onClick: handleToggle,
       style: {
-        cursor: "pointer"
+        cursor: 'pointer'
       }
     }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
       id: "AccordionItemIconContainer"
@@ -79,7 +80,7 @@ const Popup = props => {
       subtitleTextColor: subtitleTextColor
     }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
       id: "AccordionContentContainer"
-    }, console.log("rowsData", title, children.props.children), 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, {
+    }, console.log('rowsData', title, children.props.children), 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%",
@@ -96,7 +97,7 @@ const Popup = props => {
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
       id: "AccordionContainer",
-      maxHeight: divHeight ? (divHeight - 190).toString().concat("", "px") : null
+      maxHeight: divHeight ? (divHeight - 190).toString().concat('', 'px') : null
     }, items.map((item, index) => {
       var _item$rowsData;
       return /*#__PURE__*/_react.default.createElement(AccordionItem, {
@@ -109,7 +110,7 @@ const Popup = props => {
   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))
+    onSubmit: useFormMethods.handleSubmit(submittedValues => console.log('submittedValues', submittedValues))
   }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
     id: "ModalOverlay",
     className: "modal-overlay",
@@ -135,11 +136,16 @@ const Popup = props => {
     value: "Save",
     type: "submit",
     style: {
-      backgroundColor: "#BCC6DA",
-      color: "white",
-      transition: "background-color 0.3s, color 0.3s"
+      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",
@@ -158,8 +164,8 @@ const Popup = props => {
 var _default = exports.default = Popup;
 Popup.defaultProps = {
   isPopupOpen: true,
-  width: "800px",
-  height: "600px",
+  width: '800px',
+  height: '600px',
   onSaveClick: () => {},
   onCancelClick: () => {},
   onOverlayClick: () => {}

package/package.json

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