sag_components 1.0.950 → 1.0.951

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

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LargeSellingEvent = exports.CrossRetailersEvent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TitleDescription = require("./TitleDescription");
+const viewCreativeRetailersData1 = [{
+  label: 'Food Lion'
+}, {
+  label: 'Stop&Shop'
+}, {
+  label: 'Giant Food'
+}, {
+  label: 'The Giant Company'
+}, {
+  label: 'Hannaford'
+}];
+const data = {
+  eventName: 'Large Selling Event P2 2023',
+  eventType: 'Large Selling Event',
+  retailer: 'The Giant Company',
+  // Food Lion   Stop&Shop    GiantFood    The Giant Company   Hannaford
+  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: ''
+};
+var _default = exports.default = {
+  title: 'SAG BI/TitleDescription',
+  component: _TitleDescription.TitleDescription,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      name: 'data',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill title description '
+    },
+    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 / % )'
+    },
+    textcolor: {
+      name: 'textcolor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    showRetailerIcon: {
+      name: 'showRetailerIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Retailer Icon'
+    },
+    showDraft: {
+      name: 'showDraft',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Draft symbol'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    viewCreativeOnClick: {
+      action: 'viewCreativeOnClick',
+      description: 'viewCreativeOnClick event - returns an object of viewCreativeOnClick   '
+    }
+  }
+};
+const LargeSellingEvent = exports.LargeSellingEvent = {
+  args: {
+    showRetailerIcon: true,
+    showPeriodIcon: true,
+    viewCreativeRetailersData: null,
+    data,
+    width: '100%',
+    height: '100%',
+    showDraft: true
+  }
+};
+const CrossRetailersEvent = exports.CrossRetailersEvent = {
+  args: {
+    showRetailerIcon: false,
+    showPeriodIcon: false,
+    viewCreativeRetailersData: viewCreativeRetailersData1,
+    data,
+    width: '100%',
+    height: '100%'
+  }
+};

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

@@ -0,0 +1,36 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 1rem;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), props => props.textcolor ? props.textcolor : '#000', props => props.width, props => props.height);
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: white;\n  padding: 20px;\n  font-weight: 400;\n  white-space: pre-wrap;\n  width: 100%;\n  @media (max-width: 1536px) {\n    padding: 13px 16px;\n  }\n  @media (max-width: 1366px) {\n    padding: 12px 16px;\n  }\n"])));
+const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  align-content: center;\n  align-items: center;\n  gap: 20px;\n"])));
+const DraftTag = exports.DraftTag = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #E41111;\n  border: 2px solid #E41111;\n  font-size: 20px;\n  padding: 6px 18px;\n"])));
+const EventName = exports.EventName = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 16px;\n  font-weight: 500;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 16px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 14px;\n  }\n"])));
+const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  border: 1px solid #ccc;\n  margin-left: 10px;\n  padding: 2px 10px;\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
+const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  margin: 3px 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: visible;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  left: ", ";\n  top:  ", ";\n  z-index:1000;\n"])), props => props.left, props => props.top);
+const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 0.5rem 0 0 0;\n"])));
+const FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  margin: 0;\n  font-size: 14px;\n  font-weight: 400;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
+const Retailer = exports.Retailer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
+const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: ", ";\n"])), props => !props.showPeriodIcon ? '100%' : '70%');
+const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  margin: 0.5rem 0 0 0;\n"])));
+const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n  margin: 0;\n"])));
+const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.disabled ? '#B1B1B1' : '#1b30aa', props => !props.disabled ? 'pointer' : 'default');
+const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 1.5rem;\n"])));
+const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)([""])));
+const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  white-space: pre-wrap;\n  margin-left: auto;\n  font-size: 14px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }  \n"])));
+const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
+const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 500;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }  \n"])));
+const PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  margin: 0 0 0 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));

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

@@ -5,218 +5,32 @@ 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 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;
-  }
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 1rem;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), props => props.textcolor ? props.textcolor : '#000', props => props.width, props => props.height);
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: white;\n  padding: 20px;\n  font-weight: 400;\n  white-space: pre-wrap;\n  width: 100%;\n  @media (max-width: 1536px) {\n    padding: 13px 16px;\n  }\n  @media (max-width: 1366px) {\n    padding: 12px 16px;\n  }\n"])));
+const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  align-content: center;\n  align-items: center;\n  gap: 20px;\n"])));
+const DraftTag = exports.DraftTag = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #E41111;\n  border: 2px solid #E41111;\n  font-size: 20px;\n  padding: 6px 18px;\n"])));
+const EventName = exports.EventName = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 16px;\n  font-weight: 500;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 16px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 14px;\n  }\n"])));
+const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  border: 1px solid #ccc;\n  margin-left: 10px;\n  padding: 2px 10px;\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
+const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  margin: 3px 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: visible;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  left: ", ";\n  top:  ", ";\n  z-index:1000;\n"])), props => props.left, props => props.top);
+const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 0.5rem 0 0 0;\n"])));
+const FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  margin: 0;\n  font-size: 14px;\n  font-weight: 400;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
+const Retailer = exports.Retailer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
+const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: ", ";\n"])), props => !props.showPeriodIcon ? '100%' : '70%');
+const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  margin: 0.5rem 0 0 0;\n"])));
+const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n  margin: 0;\n"])));
+const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.disabled ? '#B1B1B1' : '#1b30aa', props => !props.disabled ? 'pointer' : 'default');
+const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 1.5rem;\n"])));
+const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)([""])));
+const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  white-space: pre-wrap;\n  margin-left: auto;\n  font-size: 14px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }  \n"])));
+const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
+const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 500;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }  \n"])));
+const PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  margin: 0 0 0 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));

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

@@ -0,0 +1,31 @@
+"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 => {
+  let timeout;
+  const [active, setActive] = (0, _react.useState)(false);
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, props.delay || 400);
+  };
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipWrapper
+  // When to show the tooltip
+  , {
+    onMouseEnter: showTip,
+    onMouseLeave: hideTip
+  }, props.children, active && /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
+    className: "controls ".concat(props.direction || 'top')
+  }, props.content)));
+};
+var _default = exports.default = Tooltip;

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

@@ -0,0 +1,18 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+/* Custom properties */
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --tooltip-text-color: black;\n  --tooltip-background-color: white;\n  --tooltip-margin: 40px;\n  --tooltip-arrow-size: 10px;\n"])));
+
+/* Wrapping */
+const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n"])));
+
+/* Absolute positioning */
+const TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 4px 6px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 12px;\n  font-family: sans-serif;\n  line-height: 1;\n  z-index: 100;\n  white-space: nowrap;\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1.8 );\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n"])));

package/dist/stories/components/Tooltip.js

@@ -25,7 +25,7 @@ const Tooltip = props => {
     onMouseEnter: showTip,
     onMouseLeave: hideTip
   }, props.children, active && /*#__PURE__*/_react.default.createElement(_Tooltip.TooltipTip, {
-    className: `controls ${props.direction || 'top'}`
+    className: "controls ".concat(props.direction || 'top')
   }, props.content)));
 };
 var _default = exports.default = Tooltip;

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

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

package/dist/stories/components/TopToggleList/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'
+  }]
+};