sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/TitleDescription.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TitleDescription = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _EyeIcon = require("./icons/EyeIcon");
+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 _ComboBoxArrowDownIcon = require("./icons/ComboBoxArrowDownIcon");
+var _ComboBoxArrowUpIcon = require("./icons/ComboBoxArrowUpIcon");
+var _ListBox = require("./ListBox");
+var _TitleDescription = require("./TitleDescription.style");
+const TitleDescription = props => {
+  var _data$eventDescriptio, _data$eventDatesValue, _data$eventDatesValue2, _data$objectivesDescr;
+  const {
+    className,
+    showRetailerIcon,
+    showPeriodIcon,
+    viewCreativeRetailersData,
+    data,
+    viewCreativeOnClick,
+    width,
+    height,
+    textcolor,
+    showDraft,
+    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(_TitleDescription.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, {
+          width: "90",
+          height: "20"
+        }), "\xA0");
+      case 'Hannaford':
+        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_HannafordIcon.HannafordIcon, {
+          width: "90",
+          height: "20"
+        }), "\xA0");
+      case 'Giant Food':
+        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
+          width: "60",
+          height: "20"
+        }), "\xA0");
+      case 'The Giant Company':
+        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, {
+          width: "60",
+          height: "20"
+        }), "\xA0");
+      case 'Stop&Shop':
+        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
+          width: "90",
+          height: "20"
+        }), "\xA0");
+      default:
+        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_TitleDescription.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(_TitleDescription.MainContainer, {
+    id: "TitleDescription",
+    className: className,
+    height: height,
+    width: width,
+    textcolor: textcolor
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.PanelContainer, {
+    id: "PanelContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameAndViewCreativeContainer, {
+    id: "EventNameAndViewCreativeContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameViewCreativeSubContainer, {
+    id: "EventNameViewCreativeSubContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventName, {
+    id: "EventName"
+  }, data.eventName), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeButtonAndListBoxContainer, {
+    id: "ViewCreativeButtonAndListBoxContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeContainer, {
+    id: "ViewCreativeContainer",
+    ref: viewCreativeContainerRef,
+    onClick: viewCreativeOnClickHandler,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+    width: "12",
+    height: "12"
+  }), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeTextField, {
+    id: "ViewCreativeTextField"
+  }, "View creative"), retailersDataState && (retailersDataState === null || retailersDataState === void 0 ? void 0 : retailersDataState.length) > 0 && (viewCreativeListBoxOpenedState ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), viewCreativeListBoxOpenedState && /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeListBoxContainer, {
+    id: "ViewCreativeListBoxContainer",
+    left: getViewCreativeContainerLeft(),
+    top: getViewCreativeContainerTop(),
+    width: "100%",
+    height: "100%",
+    onMouseLeave: () => {
+      setViewCreativeListBoxOpenedState(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListBox.ListBox, {
+    id: "ListBox",
+    data: retailersDataState,
+    buttonsBackgroundColorChecked: "#B1B1B1",
+    buttonsBackgroundColorUnchecked: "#FFF",
+    buttonsBorderColor: "##B1B1B1",
+    buttonsIconColor: "#212121",
+    buttonsTextColorChecked: "#212121",
+    buttonsTextColorUnchecked: "#212121",
+    height: "100%",
+    width: "100%",
+    onClick: props => {
+      listBoxViewCreativeOnClickHandler(props);
+    }
+  })))), showDraft && /*#__PURE__*/_react.default.createElement(_TitleDescription.DraftTag, null, "DRAFT")), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
+    id: "FilterValuesContainer"
+  }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.Retailer, {
+    id: "Retailer"
+  }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.eventType), data.externalEventDescription && data.externalEventDescription !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.externalEventID)), data.storeType && data.storeType !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.storeType)), data.category && data.category !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.category)), data.supplier && data.supplier !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.supplier)), data.brand && data.brand !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
+    className: "FilterValue"
+  }, data.brand))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
+    id: "ObjectiesContainer",
+    showPeriodIcon: showPeriodIcon
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesDescription, {
+    id: "ObjectivesDescription"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.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 ? 'Event Description:  ' : ''), data.eventDescription)), showPeriodIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.PeriodsContainer, {
+    id: "PeriodsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.SubLineContainer, {
+    id: "SubLineContainer"
+  }), /*#__PURE__*/_react.default.createElement(_TitleDescription.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(_TitleDescription.PeriodLabel, {
+    id: "PeriodLabel"
+  }, "Event Dates: ") : '', (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(_TitleDescription.PeriodValue, {
+    id: "PeriodValue"
+  }, data.eventDatesValue) : ''))), /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesAndPeriodsContainer, {
+    id: "ObjectiesAndPeriodsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
+    id: "ObjectiesContainer",
+    showPeriodIcon: showPeriodIcon
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesDescription, {
+    id: "ObjectivesDescription"
+  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.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)))));
+};
+exports.TitleDescription = TitleDescription;
+var _default = exports.default = TitleDescription;
+TitleDescription.defaultProps = {
+  className: '',
+  showRetailerIcon: true,
+  showPeriodIcon: true,
+  viewCreativeRetailersData: [{
+    label: 'Food Lion'
+  }, {
+    label: 'Stop&Shop'
+  }, {
+    label: 'Giant Food'
+  }, {
+    label: 'The Giant Company'
+  }, {
+    label: 'Hannaford'
+  }],
+  data: {
+    eventName: 'Large Selling Event P2 2023',
+    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: ''
+  },
+  viewCreativeOnClick: () => {},
+  width: '100%',
+  height: '100%',
+  textcolor: '#212121',
+  showDraft: true,
+  disabled: false
+};

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

@@ -0,0 +1,222 @@
+"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.EventName = 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;
+  font-weight: 400;
+  white-space: pre-wrap;
+  width: 100%;
+  @media (max-width: 1536px) {
+    padding: 13px 16px;
+  }
+  @media (max-width: 1366px) {
+    padding: 12px 16px;
+  }
+`;
+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 EventName = exports.EventName = _styledComponents.default.h4`
+  line-height: 19px;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  border: 1px solid #ccc;
+  margin-left: 10px;
+  padding: 2px 10px;
+  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`
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  width: ${props => !props.showPeriodIcon ? '100%' : '70%'};
+`;
+const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div`
+  display: flex;
+  width: 100%;
+  margin: 0.5rem 0 0 0;
+`;
+const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong`
+  font-weight: 500;
+`;
+const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p`
+  line-height: 19px;
+  font-size: 14px;
+  font-weight: 400;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+  margin: 0;
+`;
+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;
+  white-space: pre-wrap;
+  margin-left: auto;
+  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/Tooltip.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 _Tooltip = require("./Tooltip.style");
+const Tooltip = props => {
+  const {
+    children,
+    content,
+    direction,
+    delay,
+    topFactor
+  } = props;
+  let timeout;
+  const [active, setActive] = (0, _react.useState)(false);
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, delay || 400);
+  };
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipWrapper, {
+    onMouseEnter: showTip,
+    onMouseLeave: hideTip
+  }, children, active && /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
+    className: `controls ${direction || 'top'}`,
+    topFactor: topFactor
+  }, content)));
+};
+var _default = exports.default = Tooltip;
+Tooltip.defaultProps = {
+  children: null,
+  content: 'Tooltip content',
+  direction: 'top',
+  delay: '400',
+  topFactor: -1.8
+};

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = exports.TooltipTip = exports.TooltipContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+/* Custom properties */
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
+  --tooltip-text-color: black;
+  --tooltip-background-color: white;
+  --tooltip-margin: 40px;
+  --tooltip-arrow-size: 10px;
+`;
+
+/* Wrapping */
+const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div`
+  display: inline-block;
+  position: relative;
+`;
+
+/* Absolute positioning */
+const TooltipTip = exports.TooltipTip = _styledComponents.default.div`
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  border-radius: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 6px;
+  color: var(--tooltip-text-color);
+  background: var(--tooltip-background-color);
+  font-size: 12px;
+  font-family: sans-serif;
+  line-height: 1;
+  z-index: 100;
+  white-space: nowrap;
+ 
+  /* CSS border triangles */
+  &.controls::before {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: var(--tooltip-arrow-size);
+    margin-left: calc(var(--tooltip-arrow-size) * -1);
+  }
+
+  /* Absolute positioning */
+  &.controls.top {
+    top: calc(var(--tooltip-margin) * ${props => props.topFactor || -1.8} ); 
+  }
+
+  /* CSS border triangles */
+  &.controls.top::before {
+    top: 100%;
+    border-top-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.right {
+    left: calc(70% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* CSS border triangles */
+  &.controls.right::before {
+    left: calc(var(--tooltip-arrow-size) * -1);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-right-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.bottom {
+    bottom: calc(var(--tooltip-margin) * -1);
+  }
+  /* CSS border triangles */
+  &.controls.bottom::before {
+    bottom: 100%;
+    border-bottom-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.left {
+    left: auto;
+    right: calc(70% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+  /* CSS border triangles */
+  &.controls.left::before {
+    left: auto;
+    right: calc(var(--tooltip-arrow-size) * -2);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-left-color: var(--tooltip-background-color);
+  }
+`;

package/dist/stories/components/TopToggleList.js

@@ -0,0 +1,46 @@
+"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 _TopToggleList = require("./TopToggleList.style");
+const TopToggleList = props => {
+  const {
+    title,
+    list,
+    width,
+    height
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_TopToggleList.TopToggleListMainContainer, {
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_TopToggleList.Title, null, title), /*#__PURE__*/_react.default.createElement(_TopToggleList.ListContainer, {
+    height: height
+  }, list.map(item => /*#__PURE__*/_react.default.createElement(_TopToggleList.ListItem, {
+    key: item.value
+  }, /*#__PURE__*/_react.default.createElement(_TopToggleList.Item, null, item.label)))));
+};
+var _default = exports.default = TopToggleList;
+TopToggleList.defaultProps = {
+  width: '100%',
+  height: '100%',
+  title: 'Products Variety',
+  list: [{
+    value: '1',
+    label: 'Product 1'
+  }, {
+    value: '2',
+    label: 'Product 2'
+  }, {
+    value: '3',
+    label: 'Product 3'
+  }, {
+    value: '4',
+    label: 'Product 4'
+  }, {
+    value: '5',
+    label: 'Product 5'
+  }]
+};