sag_components 2.0.0-beta40 → 2.0.0-beta41

package/dist/stories/components/CodeEditor.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-require("ace-builds/src-noconflict/mode-mysql");
-require("ace-builds/src-noconflict/theme-monokai");
-require("ace-builds/src-noconflict/ext-language_tools");
-require("ace-builds/src-noconflict/snippets/mysql");
-// CodeEditor.js
-
-const CodeEditor = _ref => {
-  let {
-    value,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactAce.default, {
-    style: {
-      height: '300px',
-      width: '100%'
-    },
-    mode: "mysql",
-    theme: "monokai",
-    value: value,
-    onChange: onChange,
-    name: "code-editor",
-    editorProps: {
-      $blockScrolling: true
-    },
-    setOptions: {
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
-      enableSnippets: true,
-      showLineNumbers: true,
-      tabSize: 1
-    }
-  });
-};
-var _default = exports.default = CodeEditor;

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

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AceEditorContent = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactAce = _interopRequireDefault(require("react-ace"));
-const AceEditorContent = exports.AceEditorContent = (0, _styledComponents.default)(_reactAce.default)`
-    width: 100%;
-    height: 400px;
-`;

package/dist/stories/components/CollapseData.js

@@ -1,66 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CollapseData = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CollapseData = require("./CollapseData.style");
-var _NoDataFoundMessage = require("./NoDataFoundMessage");
-var _ShoppingCartIcon = require("./icons/ShoppingCartIcon");
-var _ClockIcon = require("./icons/ClockIcon");
-var _ArrowUpIcon = require("./icons/ArrowUpIcon");
-var _ArrowDownIcon = require("./icons/ArrowDownIcon");
-const CollapseData = props => {
-  const {
-    title,
-    tableData,
-    noDataText,
-    width,
-    height
-  } = props;
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(null);
-  const handleClick = index => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-  return /*#__PURE__*/_react.default.createElement(_CollapseData.AccordionWrapper, {
-    width: width,
-    height: height
-  }, tableData.length === 0 ? /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
-    noDataText: noDataText
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseData.ComponentHeader, null, title), tableData.map(section => /*#__PURE__*/_react.default.createElement("div", {
-    key: section.key,
-    className: "accordion-section",
-    id: section.key
-  }, /*#__PURE__*/_react.default.createElement(_CollapseData.TitleAccordion, {
-    isopen: activeIndex === section.key,
-    onClick: () => handleClick(section.key)
-  }, /*#__PURE__*/_react.default.createElement(_CollapseData.IconAndTitle, null, section.icon === 'Basket' ? /*#__PURE__*/_react.default.createElement(_ShoppingCartIcon.ShoppingCartIcon, null) : /*#__PURE__*/_react.default.createElement(_ClockIcon.ClockIcon, null), /*#__PURE__*/_react.default.createElement("u", null, section.title)), /*#__PURE__*/_react.default.createElement(_CollapseData.ArrowAndNumber, null, /*#__PURE__*/_react.default.createElement(_CollapseData.IconDiv, null, section.value >= 0 ? /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
-    width: "11px",
-    height: "12px"
-  }) : /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
-    width: "11px",
-    height: "12px"
-  })), /*#__PURE__*/_react.default.createElement(_CollapseData.TitleDiv, null, `${parseFloat(section.value.toFixed(1))}${section.valueType}`))), activeIndex === section.key && /*#__PURE__*/_react.default.createElement(_CollapseData.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_CollapseData.Table, null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map((headline, i) => /*#__PURE__*/_react.default.createElement(_CollapseData.Th, {
-    key: `${i + headline}`
-  }, headline.title)))), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, section.table.map((data, i) => {
-    if (data.value !== null) {
-      return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
-        key: `${i + data}`
-      }, `${data.value >= 0 ? '+' : ''}${data.value.toFixed(1)}${section.valueType}`);
-    }
-    return /*#__PURE__*/_react.default.createElement(_CollapseData.Td, {
-      key: `${i + data}`
-    }, "No Data");
-  })))))))));
-};
-exports.CollapseData = CollapseData;
-var _default = exports.default = CollapseData;
-CollapseData.defaultProps = {
-  title: '',
-  noDataText: '',
-  width: '455px',
-  height: '379px',
-  tableData: []
-};

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

@@ -1,127 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TitleDiv = exports.TitleAccordion = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.IconDiv = exports.IconAndTitle = exports.ComponentHeader = exports.ArrowAndNumber = exports.AccordionWrapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const AccordionWrapper = exports.AccordionWrapper = _styledComponents.default.div`
-  width: ${props => props.width};
-  height: ${props => props.height};
-  padding: 0 20px;
-  background-color: white;
-`;
-const TitleAccordion = exports.TitleAccordion = _styledComponents.default.div`
-  width: 100%;
-  display: inline-block;
-  align-items: center;
-  background-color: ${props => props.isopen ? '#D0D0D0' : '#FFFFFF'};
-  margin-bottom: 16px;
-`;
-const IconAndTitle = exports.IconAndTitle = _styledComponents.default.div`
-  width: auto;
-  font-family: "poppins";
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  display: flex;
-  float: left;
-  align-items: center;
-  @media (max-width: 1536px) {
-    font-size: 12px;
-  }
-  & > svg {
-    margin-right: 15px;
-  }
-`;
-const ArrowAndNumber = exports.ArrowAndNumber = _styledComponents.default.div`
-  float: right;
-  font-family: "poppins";
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 23%;
-  margin-right: 20px;
-`;
-const IconDiv = exports.IconDiv = _styledComponents.default.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 25%;
-`;
-const TitleDiv = exports.TitleDiv = _styledComponents.default.div`
-  width: 70%;
-  text-align: left;
-  padding-left: 3px;
-  @media (max-width: 1536px) {
-    font-size: 11px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 10px;
-  }
-`;
-const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
-  overflow-x: auto;
-  margin-bottom: 22px;
-  &::-webkit-scrollbar {
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #E8E8E8;
-    border-radius: 5px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #D0D0D0;
-    border-radius: 5px;
-  }
-`;
-const Table = exports.Table = _styledComponents.default.table`
-  width: 100%;
-  border-collapse: collapse;
-  overflow: auto;
-  table-layout: fixed;
-`;
-const Th = exports.Th = _styledComponents.default.th`
-  background-color: white;
-  font-family: "poppins";
-  font-weight: 600;
-  font-size: 12px;
-  border: 1px solid #ccc;
-  padding: 10px;
-  text-align: center;
-  line-height: 18px;
-  border-top: none;
-  border-left: none;
-  &:last-of-type {
-    border-right: none;
-  }
-`;
-const Td = exports.Td = _styledComponents.default.td`
-  border: 1px solid #ccc;
-  padding: 10px;
-  text-align: center;
-  line-height: 21px;
-  font-size: 14px;
-  font-family: "poppins";
-  font-weight: 400;
-  border-bottom: none;
-  border-left: none;
-  &:last-of-type {
-    border-right: none;
-  }
-`;
-const ComponentHeader = exports.ComponentHeader = _styledComponents.default.h3`
-  font-family: "poppins";
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 27px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;

package/dist/stories/components/CollapseHeader.js

@@ -1,255 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CollapseHeader = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Button = require("./Button");
-var _FoodLionIcon = require("./icons/FoodLionIcon");
-var _GiantFoodIcon = require("./icons/GiantFoodIcon");
-var _HannafordIcon = require("./icons/HannafordIcon");
-var _StopAndShopIcon = require("./icons/StopAndShopIcon");
-var _TheGiantCompanyIcon = require("./icons/TheGiantCompanyIcon");
-var _CollapseHeader = require("./CollapseHeader.style");
-const CollapseHeader = props => {
-  var _data$eventDescriptio, _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
-  const {
-    className,
-    showRetailerIcon,
-    showPeriodIcon,
-    viewCreativeRetailersData,
-    data,
-    showViewCreativeButton,
-    viewCreativeOnClick,
-    descriptionTitle,
-    datesTitle,
-    width,
-    height,
-    textcolor,
-    showDraft,
-    buttonText,
-    disabled
-  } = props;
-  const [retailersDataState, setRetailersDataState] = (0, _react.useState)(null);
-  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = (0, _react.useState)(false);
-  const viewCreativeContainerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    let newData = [];
-    if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
-      newData = viewCreativeRetailersData === null || viewCreativeRetailersData === void 0 ? void 0 : viewCreativeRetailersData.map(item => ({
-        ...item,
-        checked: false,
-        disabled: false
-      }));
-      setRetailersDataState(newData);
-    } else {
-      setRetailersDataState(null);
-    }
-  }, [viewCreativeRetailersData]);
-  const getRetailerIcon = retailerName => {
-    switch (retailerName) {
-      case "Food Lion":
-        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, {
-          width: "90",
-          height: "20"
-        }), "\xA0");
-      case "Hannaford":
-        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_HannafordIcon.HannafordIcon, {
-          width: "90",
-          height: "20"
-        }), "\xA0");
-      case "Giant Food":
-        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
-          width: "60",
-          height: "20"
-        }), "\xA0");
-      case "The Giant Company":
-        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, {
-          width: "60",
-          height: "20"
-        }), "\xA0");
-      case "Stop&Shop":
-        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
-          width: "90",
-          height: "20"
-        }), "\xA0");
-      default:
-        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-          className: "FieldsDelimiter"
-        }, " | "));
-    }
-  };
-  const viewCreativeOnClickHandler = () => {
-    if (retailersDataState && retailersDataState.length > 0) {
-      setViewCreativeListBoxOpenedState(!viewCreativeListBoxOpenedState);
-    } else {
-      viewCreativeOnClick({
-        name: viewCreativeOnClick
-      });
-    }
-  };
-  const listBoxViewCreativeOnClickHandler = props => {
-    var _props$selectedData, _props$selectedData2;
-    const selectedRetailer = ((_props$selectedData = props.selectedData) === null || _props$selectedData === void 0 ? void 0 : _props$selectedData.length) > 0 ? props.selectedData[0].label : null;
-    if (selectedRetailer) {
-      viewCreativeOnClick({
-        selectedRetailer
-      });
-    }
-    if (((_props$selectedData2 = props.selectedData) === null || _props$selectedData2 === void 0 ? void 0 : _props$selectedData2.length) > 0) {
-      setViewCreativeListBoxOpenedState(false);
-    }
-  };
-  const getViewCreativeContainerLeft = () => {
-    const {
-      offsetLeft
-    } = viewCreativeContainerRef.current;
-    return offsetLeft.toString().concat("", "px");
-  };
-  const getViewCreativeContainerTop = () => {
-    const {
-      offsetTop
-    } = viewCreativeContainerRef.current;
-    return (offsetTop + 33).toString().concat("", "px");
-  };
-  return /*#__PURE__*/_react.default.createElement(_CollapseHeader.MainContainer, {
-    id: "CollapseHeader",
-    className: className,
-    height: height,
-    width: width,
-    textcolor: textcolor
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.PanelContainer, {
-    id: "PanelContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.EventNameAndViewCreativeContainer, {
-    id: "EventNameAndViewCreativeContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.EventNameViewCreativeSubContainer, {
-    id: "EventNameViewCreativeSubContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeButtonAndListBoxContainer, {
-    id: "ViewCreativeButtonAndListBoxContainer"
-  }, showViewCreativeButton && /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    leftIcon: "Eye",
-    onClick: viewCreativeOnClickHandler,
-    text: buttonText,
-    type: "secondary",
-    disabled: disabled,
-    size: "small"
-  }), viewCreativeListBoxOpenedState && /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeListBoxContainer, {
-    id: "ViewCreativeListBoxContainer",
-    top: getViewCreativeContainerTop(),
-    left: getViewCreativeContainerLeft(),
-    width: "100%",
-    height: "100%",
-    onMouseLeave: () => {
-      setViewCreativeListBoxOpenedState(false);
-    }
-  }))), showDraft && /*#__PURE__*/_react.default.createElement(_CollapseHeader.DraftTag, null, "DRAFT")), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValuesContainer, {
-    id: "FilterValuesContainer"
-  }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_CollapseHeader.Retailer, {
-    id: "Retailer"
-  }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.eventType), data.externalEventDescription && data.externalEventDescription !== "" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " ", "|", " "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== "" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.externalEventID)), data.storeType && data.storeType !== "" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.storeType)), data.category && data.category !== "" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.category)), data.supplier && data.supplier !== "" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.supplier)), data.brand && data.brand !== "" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
-    className: "FilterValue"
-  }, data.brand))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesContainer, {
-    id: "ObjectiesContainer",
-    showPeriodIcon: showPeriodIcon
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesDescription, {
-    id: "ObjectivesDescription"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesTitle, {
-    id: "ObjectivesTitle"
-  }, (data === null || data === void 0 ? void 0 : (_data$eventDescriptio = data.eventDescription) === null || _data$eventDescriptio === void 0 ? void 0 : _data$eventDescriptio.length) > 0 ? descriptionTitle : ""), data.eventDescription))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesAndPeriodsContainer, {
-    id: "ObjectiesAndPeriodsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesContainer, {
-    id: "ObjectiesContainer",
-    showPeriodIcon: showPeriodIcon
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesDescription, {
-    id: "ObjectivesDescription"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesTitle, {
-    id: "ObjectivesTitle"
-  }, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? "Objectives:  " : ""), data.objectivesDescription)), showPeriodIcon && /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodsContainer, {
-    id: "PeriodsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.SubLineContainer, {
-    id: "SubLineContainer"
-  }, (data === null || data === void 0 ? void 0 : (_data$eventDatesValue = data.eventDatesValue) === null || _data$eventDatesValue === void 0 ? void 0 : _data$eventDatesValue.length) > 0 ? /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodLabel, {
-    id: "PeriodLabel"
-  }, datesTitle, " ") : "", (data === null || data === void 0 ? void 0 : (_data$eventDatesValue2 = data.eventDatesValue) === null || _data$eventDatesValue2 === void 0 ? void 0 : _data$eventDatesValue2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodValue, {
-    id: "PeriodValue"
-  }, data.eventDatesValue) : "")))));
-};
-exports.CollapseHeader = CollapseHeader;
-var _default = exports.default = CollapseHeader;
-CollapseHeader.defaultProps = {
-  className: "",
-  showRetailerIcon: true,
-  showPeriodIcon: true,
-  viewCreativeRetailersData: [{
-    label: "Food Lion"
-  }, {
-    label: "Stop&Shop"
-  }, {
-    label: "Giant Food"
-  }, {
-    label: "The Giant Company"
-  }, {
-    label: "Hannaford"
-  }],
-  data: {
-    eventType: "Large Selling Event",
-    retailer: "The Giant Company",
-    eventDescription: "Large Selling Event Description",
-    objectivesDescription: "Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ",
-    eventDatesValue: "Feb 1, 2023 - Feb 28, 2023",
-    externalEventDescription: "Large Selling Event P2 Description",
-    externalEventID: "LSE2_23",
-    storeType: "Total",
-    category: "",
-    supplier: "",
-    brand: ""
-  },
-  showViewCreativeButton: true,
-  viewCreativeOnClick: () => {},
-  width: "100%",
-  height: "100%",
-  textcolor: "#212121",
-  showDraft: false,
-  disabled: false,
-  buttonText: "View creative",
-  descriptionTitle: "Event Description:  ",
-  datesTitle: "Event Dates: "
-};