sag_components 1.0.999 → 1.0.1000

package/dist/stories/components/BarChart.js

@@ -37,25 +37,13 @@ const BarChart = props => {
     referenceLinePoint,
     referenceLineColor,
     referenceLineDashed,
-    showCurrentCampaignStyle,
-    isPercent
+    showCurrentCampaignStyle
   } = props;
   const controlsContainerRef = (0, _react.useRef)();
-  const areAllDatesEmpty = () => {
-    if (!barChartData || (barChartData === null || barChartData === void 0 ? void 0 : barChartData.length) === 0) return true;
-    return barChartData === null || barChartData === void 0 ? void 0 : barChartData.every(item => !item.date);
-  };
-  const displayFormattedValue = function (value) {
-    let showFullNumber = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (value === undefined || value === null) return '';
+  const displayFormattedValue = value => {
+    if (!value) return '';
     let formattedValue = '';
-    if (isPercent) {
-      formattedValue = ''.concat(value.toFixed(1), '%');
-    } else if (isDollar) {
-      formattedValue = ''.concat(showDollarSign ? '$' : '', !showFullNumber ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), !showFullNumber ? (0, _CommonFunctions.getFormattedUnits)(value) : '');
-    } else {
-      formattedValue = ''.concat(!showFullNumber ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), !showFullNumber ? (0, _CommonFunctions.getFormattedUnits)(value) : '');
-    }
+    formattedValue = !isDollar ? ''.concat('', value.toFixed(1)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
     return formattedValue;
   };
 
@@ -70,7 +58,7 @@ const BarChart = props => {
     if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
     let currentTooltipValue = 0;
     if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.value) currentTooltipValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.value;
-    return /*#__PURE__*/_react.default.createElement(_BarChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChart.TooltipTitle, null, `${label}`), /*#__PURE__*/_react.default.createElement(_BarChart.TooltipLabel, null, `${displayFormattedValue(currentTooltipValue, !!showCurrentCampaignStyle)}`));
+    return /*#__PURE__*/_react.default.createElement(_BarChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChart.TooltipTitle, null, `${label}`), /*#__PURE__*/_react.default.createElement(_BarChart.TooltipLabel, null, `${displayFormattedValue(currentTooltipValue)}`));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -84,11 +72,11 @@ const BarChart = props => {
         return /*#__PURE__*/_react.default.createElement("g", {
           transform: `translate(${x},${y})`
         }, showCurrentCampaignStyle && retailerData[0].isCurrent && /*#__PURE__*/_react.default.createElement("rect", {
-          x: -58 // Adjust this to position the background properly
+          x: -55 // Adjust this to position the background properly
           ,
-          y: 5 // Adjust this for vertical alignment with your text
+          y: 35 // Adjust this for vertical alignment with your text
           ,
-          width: 116 // Adjust width based on the text length
+          width: 110 // Adjust width based on the text length
           ,
           height: 22 // Adjust height based on font size
           ,
@@ -101,8 +89,8 @@ const BarChart = props => {
           fill: "#212121"
         }, /*#__PURE__*/_react.default.createElement(_BarChart.LabelBoldText, {
           textAnchor: "middle",
-          x: 0,
-          dy: showCurrentCampaignStyle ? 20 : 50,
+          x: "0",
+          dy: "50",
           fontSize: showCurrentCampaignStyle ? 12 : 16,
           fontWeight: showCurrentCampaignStyle ? 500 : 600
         }, payload.value), /*#__PURE__*/_react.default.createElement(_BarChart.LabelText, {
@@ -174,7 +162,7 @@ const BarChart = props => {
     dataKey: "title",
     tick: CustomizedTickBarChart,
     tickLine: false,
-    height: areAllDatesEmpty() ? 50 : 120,
+    height: 120,
     stroke: "#D0D0D0",
     domain: [0, 'auto'],
     interval: 0
@@ -236,6 +224,5 @@ BarChart.defaultProps = {
   referenceLineColor: '#212121',
   referenceLineDashed: '5',
   showCurrentCampaignStyle: false,
-  currentBarColor: '#90CE9C',
-  isPercent: false
+  currentBarColor: '#90CE9C'
 };

package/dist/stories/components/CollapseHeader.js

@@ -12,9 +12,6 @@ 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 _CollapseHeader = require("./CollapseHeader.style");
 const CollapseHeader = props => {
   var _data$eventDescriptio, _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
@@ -24,7 +21,10 @@ const CollapseHeader = props => {
     showPeriodIcon,
     viewCreativeRetailersData,
     data,
+    showViewCreativeButton,
     viewCreativeOnClick,
+    descriptionTitle,
+    datesTitle,
     width,
     height,
     textcolor,
@@ -140,7 +140,7 @@ const CollapseHeader = props => {
     id: "EventNameViewCreativeSubContainer"
   }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeButtonAndListBoxContainer, {
     id: "ViewCreativeButtonAndListBoxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+  }, showViewCreativeButton && /*#__PURE__*/_react.default.createElement(_Button.Button, {
     leftIcon: "Eye",
     onClick: viewCreativeOnClickHandler,
     text: buttonText,
@@ -193,7 +193,7 @@ const CollapseHeader = props => {
     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 ? "Event Description:  " : ""), data.eventDescription))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesAndPeriodsContainer, {
+  }, (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",
@@ -208,7 +208,7 @@ const CollapseHeader = props => {
     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"
-  }, "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(_CollapseHeader.PeriodValue, {
+  }, 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) : "")))));
 };
@@ -242,11 +242,14 @@ CollapseHeader.defaultProps = {
     supplier: "",
     brand: ""
   },
+  showViewCreativeButton: true,
   viewCreativeOnClick: () => {},
   width: "100%",
   height: "100%",
   textcolor: "#212121",
   showDraft: false,
   disabled: false,
-  buttonText: "View creative"
+  buttonText: "View creative",
+  descriptionTitle: "Event Description:  ",
+  datesTitle: "Event Dates: "
 };

package/dist/stories/components/DoublePanelDataRow.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DoublePanelDataRow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DoublePanelDataRow = require("./DoublePanelDataRow.style");
+var _ArrowUpIcon = require("./icons/ArrowUpIcon");
+var _ArrowDownIcon = require("./icons/ArrowDownIcon");
+var _CommonFunctions = require("./CommonFunctions");
+/* eslint-disable no-restricted-globals */
+
+const DoublePanelDataRow = props => {
+  const {
+    width,
+    height,
+    data,
+    backgroundColor,
+    className,
+    customDataFormat,
+    showPercentChange
+  } = props;
+  const getArrowSign = arrowSign => {
+    if (!arrowSign) {
+      return '-';
+    }
+    if (arrowSign === 'up') {
+      return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
+        color: "#5FCC70",
+        value: 34 // TODO: when ready, replace with actual value
+      }, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
+        width: 12,
+        height: 12
+      }), ' ', "(+34K)");
+    }
+    return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.PercentageChange, {
+      color: "#D23630",
+      value: 66 // TODO: when ready, replace with actual value
+    }, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
+      width: 12,
+      height: 12
+    }), ' ', "(-12K)");
+  };
+  return /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.LinnerContainer, {
+    className: className,
+    backgroundColor: backgroundColor,
+    width: width,
+    height: height,
+    customDataFormat: customDataFormat
+  }, data.map(item => /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBox, {
+    className: "data-box-item"
+  }, item.title && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.DataBoxTitle, {
+    className: "DataBoxTitle"
+  }, item.title), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItem, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, {
+    className: "DataBoxValue"
+  }, ''.concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.BigValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)), item.isPercent && /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemValueSign, null, "%")), showPercentChange && getArrowSign(item.value >= 0 ? 'up' : 'down')) : /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.CellItemNoValue, null, "N/A")), /*#__PURE__*/_react.default.createElement(_DoublePanelDataRow.ValueChange, null))));
+};
+exports.DoublePanelDataRow = DoublePanelDataRow;
+var _default = exports.default = DoublePanelDataRow;
+DoublePanelDataRow.defaultProps = {
+  className: '',
+  width: '100%',
+  height: 'auto',
+  data: [],
+  backgroundColor: '#FFFFFF',
+  customDataFormat: false,
+  showPercentChange: false
+};

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValueChange = exports.PercentageChange = exports.LinnerContainer = exports.DataBoxTitle = exports.DataBox = exports.CellItemValueSign = exports.CellItemNoValue = exports.CellItem = exports.BigValue = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  display: grid;
+  gap: 48px 0;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto auto;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: ${props => props.backgroundColor};
+  padding: 50px 20px 20px;
+  box-sizing: border-box;
+`;
+const DataBox = exports.DataBox = _styledComponents.default.div`
+  height: 100%;
+  padding: 0 40px;
+  border-left: 1px solid #d0d0d0;
+  &:nth-child(1),
+  &:nth-child(6) {
+    border-left: none;
+    padding-left: 0;
+  }
+  &:nth-child(5),
+  &:nth-child(10) {
+    padding-right: 0;
+  }
+`;
+const CellItem = exports.CellItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+`;
+const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
+  font-size: 18px;
+  display: block;
+  margin: 0 0 12px;
+`;
+const BigValue = exports.BigValue = _styledComponents.default.span`
+  font-size: 40px;
+  font-weight: 500;
+  margin-right: 5px;
+`;
+const CellItemValueSign = exports.CellItemValueSign = _styledComponents.default.span`
+  font-size: 16px;
+  font-weight: 400;
+`;
+const ValueChange = exports.ValueChange = _styledComponents.default.span`
+  font-size: 16px;
+  font-weight: 400;
+`;
+const CellItemNoValue = exports.CellItemNoValue = _styledComponents.default.span`
+  font-size: 40px;
+  font-weight: 500;
+`;
+const PercentageChange = exports.PercentageChange = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.color};
+`;

package/package.json

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

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -1,284 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ExamplePopupContent = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
-const FieldsDataRow1 = [{
-  name: "FundationSource",
-  label: "Fundation Source",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Source",
-  dropdownOptions: [{
-    value: 1,
-    label: "Source 1"
-  }, {
-    value: 2,
-    label: "Source 2"
-  }, {
-    value: 3,
-    label: "Source 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Category",
-  label: "Category",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Category",
-  dropdownOptions: [{
-    value: 1,
-    label: "Category 1"
-  }, {
-    value: 2,
-    label: "Category 2"
-  }, {
-    value: 3,
-    label: "Category 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Supplier",
-  label: "Supplier",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Supplier",
-  dropdownOptions: [{
-    value: 1,
-    label: "Supplier 1"
-  }, {
-    value: 2,
-    label: "Supplier 2"
-  }, {
-    value: 3,
-    label: "Supplier 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "ContactName",
-  label: "Contact Name",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Name",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const FieldsDataRow2 = [{
-  name: "BrandName",
-  label: "Brand Name",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Brand",
-  dropdownOptions: [{
-    value: 1,
-    label: "Brand 1"
-  }, {
-    value: 2,
-    label: "Brand 2"
-  }, {
-    value: 3,
-    label: "Brand 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "Budget",
-  label: "Budget",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Budget",
-  dropdownOptions: [{
-    value: 1,
-    label: "Budget 1"
-  }, {
-    value: 2,
-    label: "Budget 2"
-  }, {
-    value: 3,
-    label: "Budget 3"
-  }],
-  dropdownDefaultValue: {
-    value: 1,
-    label: "Budget 1"
-  }
-}, {
-  name: "CategoryManager",
-  label: "Category Manager",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Category Manager",
-  dropdownOptions: [{
-    value: 1,
-    label: "Category Manager 1"
-  }, {
-    value: 2,
-    label: "Category Manager 2"
-  }, {
-    value: 3,
-    label: "Category Manager 3"
-  }],
-  dropdownDefaultValue: {
-    value: 3,
-    label: "Category Manager 3"
-  }
-}, {
-  name: "ContactEmail",
-  label: "Contact Email",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Email",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const FieldsDataRow3 = [{
-  name: "Broker",
-  label: "Broker",
-  disabled: false,
-  required: false,
-  inputType: "dropdown",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Select Broker",
-  dropdownOptions: [{
-    value: 1,
-    label: "Broker 1"
-  }, {
-    value: 2,
-    label: "Broker 2"
-  }, {
-    value: 3,
-    label: "Broker 3"
-  }],
-  dropdownDefaultValue: null
-}, {
-  name: "SupplierOfferID",
-  label: "Supplier Offer ID",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Supplier Offer ID",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}, {
-  name: "VendorID",
-  label: "Vendor ID",
-  disabled: false,
-  required: false,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Vendor ID",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}, {
-  name: "ContactPhone",
-  label: "Contact Phone",
-  disabled: false,
-  required: true,
-  inputType: "textbox",
-  //aviliable values: textbox | dropdown | checkBox | datepicker
-  showInfo: true,
-  infoText: "This is one of the Popup content's fields",
-  placeHolder: "Enter Contact Phone",
-  dropdownOptions: null,
-  dropdownDefaultValue: null
-}];
-const RowsData1 = [{
-  fieldsArray: FieldsDataRow1
-}, {
-  fieldsArray: FieldsDataRow2
-}, {
-  fieldsArray: FieldsDataRow3
-}];
-var _default = exports.default = {
-  title: "Campaign Tool/PopupContent",
-  component: _PopupContent.default,
-  tags: ["autodocs"],
-  argTypes: {
-    FieldsData: {
-      name: "FieldsData",
-      control: {
-        type: "object"
-      },
-      description: " object: to fill kpi columns and buttons "
-    },
-    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 / % )"
-    },
-    onClick: {
-      action: "onClick",
-      description: "onClick event - returns an object of check box {true/false} "
-    },
-    onChange: {
-      action: "onChange",
-      description: "onChange event  "
-    },
-    borderColor: {
-      name: "borderColor",
-      description: "Sets the border color",
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
-      }
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
-const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
-ExamplePopupContent.args = {
-  rowsData: RowsData1,
-  borderColor: "#066768",
-  width: "100%",
-  height: "100%"
-};

package/dist/stories/components/BannerEventBoxTest.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _BannerEventBoxTest = require("./BannerEventBoxTest.style");
-var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
-const BannerEventBoxTest = props => {
-  const {
-    width,
-    height
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_BannerEventBoxTest.MainContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
-    banner: "Stop&Shop"
-  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
-    banner: "Hannaford",
-    data: [{
-      name: 'asdf',
-      items: ['coca', 'haim']
-    }, {
-      name: 'Brazxcvnds',
-      items: ['coca', 'bola', 'spring', 'cola']
-    }, {
-      name: 'xcvb Lines',
-      items: ['spring']
-    }]
-  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
-    banner: "Giant Food"
-  }));
-};
-BannerEventBoxTest.defaultProps = {
-  width: 'auto',
-  height: 'auto'
-};
-var _default = exports.default = BannerEventBoxTest;

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

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MainContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    gap: 20px;\n"])), props => props.width, props => props.height);