sag_components 1.0.1068 → 2.0.0-beta

package/dist/components/AttachedFile/AttachedFile.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _AttachedFile = require("./AttachedFile.style");
+var _CloseIcon = _interopRequireDefault(require("../../icons/CloseIcon"));
+var _AttachedIcon = _interopRequireDefault(require("../../icons/AttachedIcon"));
+var _FileIcon = _interopRequireDefault(require("../../icons/FileIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const AttachedFile = props => {
+  const {
+    inputText,
+    inputColor,
+    acceptedFiles,
+    onSelectFile,
+    onRemoveFile
+  } = props;
+  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
+  const handleFileChange = event => {
+    const files = Array.from(event.target.files);
+    setSelectedFiles(prevFiles => [...prevFiles, ...files]);
+    onSelectFile([...selectedFiles, ...files]);
+  };
+  const handleRemoveFile = fileToRemove => {
+    setSelectedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
+    const fileInput = document.getElementById('fileInput');
+    fileInput.value = ''; // Reset input value
+    onRemoveFile(fileToRemove);
+  };
+  return <_AttachedFile.AttachedFileContainer>
+      {selectedFiles.map(file => <_AttachedFile.UploadedFile key={`${file.name}_${file.lastModified}`}>
+          <_FileIcon.default />
+          <span>{file.name}</span>
+          <_AttachedFile.RemoveButton onClick={() => handleRemoveFile(file)}>
+            <_CloseIcon.default />
+          </_AttachedFile.RemoveButton>
+        </_AttachedFile.UploadedFile>)}
+
+      <_AttachedFile.InputLabel htmlFor="fileInput" inputColor={inputColor}>
+        <span>{inputText}</span>
+        <_AttachedIcon.default fill={inputColor} />
+      </_AttachedFile.InputLabel>
+
+      <input type="file" id="fileInput" accept={acceptedFiles} onChange={e => handleFileChange(e)} style={{
+      display: 'none'
+    }} />
+    </_AttachedFile.AttachedFileContainer>;
+};
+var _default = exports.default = AttachedFile;
+AttachedFile.propTypes = {
+  inputText: _propTypes.default.string,
+  inputColor: _propTypes.default.string,
+  acceptedFiles: _propTypes.default.string,
+  onSelectFile: _propTypes.default.func,
+  onRemoveFile: _propTypes.default.func
+};
+AttachedFile.defaultProps = {
+  inputText: 'Attach file',
+  acceptedFiles: 'image/png, image/gif, image/jpeg',
+  inputColor: '#229E38',
+  onSelectFile: () => {},
+  onRemoveFile: () => {}
+};

package/dist/components/AttachedFile/AttachedFile.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AttachedFile = _interopRequireDefault(require("./AttachedFile"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react/jsx-filename-extension */
+var _default = exports.default = {
+  title: 'SAG/AttachedFile',
+  component: _AttachedFile.default,
+  argTypes: {
+    inputText: {
+      name: 'inputText',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the button',
+      defaultValue: 'Attach file'
+    },
+    inputColor: {
+      name: 'inputColor',
+      control: {
+        type: 'color'
+      }
+    }
+  }
+};
+const Template = args => <_AttachedFile.default {...args} />;
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  inputText: 'Attach file',
+  inputColor: '#229E38',
+  acceptedFiles: 'image/png, image/gif, image/jpeg'
+};

package/dist/{stories/components → components/AttachedFile}/AttachedFile.style.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UploadedFile = exports.RemoveButton = exports.InputLabel = exports.AttachedFileContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div`
     font-family: 'Poppins';
     font-size: 14px;

package/dist/components/AutocompleteField/AutocompleteField.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _AutocompleteField = require("./AutocompleteField.style");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const AutocompleteField = props => {
+  const {
+    choices,
+    onSelect
+  } = props;
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const [isFocused, setFocused] = (0, _react.useState)(false);
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+  };
+  const handleOptionClick = option => {
+    onSelect(option);
+    setInputValue('');
+  };
+  return <_AutocompleteField.AutocompleteContainer>
+      <_AutocompleteField.AutocompleteInput type="text" value={inputValue} onChange={handleInputChange} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} placeholder=" " />
+      <_AutocompleteField.AutocompleteLabel>Choose an option</_AutocompleteField.AutocompleteLabel>
+      {(isFocused || inputValue) && <_AutocompleteField.AutocompleteOptions>
+          {choices.filter(option => option.toLowerCase().includes(inputValue.toLowerCase())).map((option, index) => <_AutocompleteField.AutocompleteOption key={index} onClick={() => handleOptionClick(option)}>
+                {option}
+              </_AutocompleteField.AutocompleteOption>)}
+        </_AutocompleteField.AutocompleteOptions>}
+    </_AutocompleteField.AutocompleteContainer>;
+};
+var _default = exports.default = AutocompleteField;
+AutocompleteField.propTypes = {
+  choices: _propTypes.default.arrayOf(_propTypes.default.string),
+  onSelect: _propTypes.default.func
+};
+AutocompleteField.defaultProps = {
+  choices: ['Apple', 'Banana', 'Orange'],
+  onSelect: () => {}
+};

package/dist/components/AutocompleteField/AutocompleteField.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AutocompleteField = _interopRequireDefault(require("./AutocompleteField"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react/jsx-filename-extension */
+var _default = exports.default = {
+  title: "SAG/AutocompleteField",
+  component: _AutocompleteField.default,
+  argTypes: {
+    choices: {
+      control: "array",
+      description: "Array of input options"
+    }
+  }
+};
+const Template = args => <_AutocompleteField.default {...args} />;
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  choices: ["Apple", "Banana", "Orange", "Grapes", "Watermelon"]
+};

package/dist/{stories/components → components/AutocompleteField}/AutocompleteField.style.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AutocompleteOptions = exports.AutocompleteOption = exports.AutocompleteLabel = exports.AutocompleteInput = exports.AutocompleteContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AutocompleteContainer = exports.AutocompleteContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
   position: relative;

package/dist/components/BannerEventBox/BannerEventBox.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BannerEventBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BannerEventBox = require("./BannerEventBox.style");
+var _FoodLionNewIcon = require("../../icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("../../icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("../../icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("../../icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("../../icons/HannafordIcon_new");
+var _Button = require("../Button/Button");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BannerEventBox = props => {
+  const {
+    width,
+    height,
+    banner,
+    description,
+    dates,
+    data,
+    onInfoClick,
+    buttonText,
+    disabled
+  } = props;
+  const formatedBanners = () => {
+    switch (banner) {
+      case "Stop&Shop":
+        return {
+          icon: <_StopAndShopNewIcon.StopAndShopNewIcon />,
+          name: "Stop&Shop"
+        };
+      case "Food Lion":
+        return {
+          icon: <_FoodLionNewIcon.FoodLionNewIcon />,
+          name: "Food Lion"
+        };
+      case "Giant Food":
+        return {
+          icon: <_GiantFoodIcon_new.GiantFoodNewIcon />,
+          name: "Giant Food"
+        };
+      case "The Giant Company":
+        return {
+          icon: <_TheGiantCompanyNewIcon.TheGiantCompanyIcon />,
+          name: "The Giant Company"
+        };
+      case "Hannaford":
+        return {
+          icon: <_HannafordIcon_new.HannafordNewIcon />,
+          name: "Hannaford"
+        };
+      default:
+        return null;
+    }
+  };
+  const onInfoClickHandler = event => {
+    onInfoClick(event);
+  };
+  return <_BannerEventBox.MainContainer height={height} width={width}>
+      <_BannerEventBox.TitleWrapper>
+        {formatedBanners(banner).icon}|
+        <_BannerEventBox.CardTitle>{formatedBanners(banner).name}</_BannerEventBox.CardTitle>
+      </_BannerEventBox.TitleWrapper>
+      <_BannerEventBox.Block>
+        <_BannerEventBox.Headline>Event Description</_BannerEventBox.Headline>
+        <_BannerEventBox.Text>{description}</_BannerEventBox.Text>
+      </_BannerEventBox.Block>
+      <_BannerEventBox.Block>
+        <_BannerEventBox.Headline>Event Dates:</_BannerEventBox.Headline>
+        <_BannerEventBox.Text>{dates.join(" - ")}</_BannerEventBox.Text>
+      </_BannerEventBox.Block>
+      <_BannerEventBox.ButtonWrap>
+        <_Button.Button leftIcon="Eye" onClick={() => onInfoClickHandler(banner)} text={buttonText} type="secondary" disabled={disabled} />
+      </_BannerEventBox.ButtonWrap>
+
+      <_BannerEventBox.DetailsWrapper>
+        {data?.map((item, index) => item && <_react.default.Fragment key={item.name}>
+                <_BannerEventBox.KeyBlock>
+                  <_BannerEventBox.Key>{item.name}</_BannerEventBox.Key>
+                  <br />
+                  <_BannerEventBox.Count>{item.items}</_BannerEventBox.Count>
+                </_BannerEventBox.KeyBlock>
+                {index !== data.length - 1 && <_BannerEventBox.Seperator />}
+              </_react.default.Fragment>)}
+      </_BannerEventBox.DetailsWrapper>
+    </_BannerEventBox.MainContainer>;
+};
+exports.BannerEventBox = BannerEventBox;
+var _default = exports.default = BannerEventBox;
+BannerEventBox.propTypes = {
+  width: _propTypes.default.string,
+  height: _propTypes.default.string,
+  banner: _propTypes.default.string,
+  buttonText: _propTypes.default.string,
+  description: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  dates: _propTypes.default.arrayOf(_propTypes.default.string),
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  onInfoClick: _propTypes.default.func
+};
+BannerEventBox.defaultProps = {
+  width: "auto",
+  height: "auto",
+  banner: "Food Lion",
+  description: "Dreft Portable Pretreater Pen",
+  dates: ["2021-06-01", "2021-06-30"],
+  buttonText: "View Creative",
+  data: [{
+    name: "Supplier",
+    items: 7
+  }, {
+    name: "Brands",
+    items: 8
+  }, {
+    name: "Product Lines",
+    items: 9
+  }],
+  onInfoClick: () => {},
+  disabled: false,
+  buttonText: "View creative"
+};

package/dist/components/BannerEventBox/BannerEventBox.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'SAG BI/BannerEventBox',
+  component: _BannerEventBox.default,
+  argTypes: {
+    width: {
+      control: 'text'
+    },
+    height: {
+      control: 'text'
+    },
+    banner: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    dates: {
+      control: 'text'
+    },
+    data: {
+      control: {
+        type: 'array'
+      },
+      description: 'array [] of objects { name: string, items: string[] }'
+    },
+    viewBannerTooltip: {
+      control: 'text'
+    }
+  }
+}; // eslint-disable-next-line react/jsx-filename-extension
+const Template = args => <_BannerEventBox.default {...args} />;
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  width: 'auto',
+  height: 'auto',
+  banner: 'Food Lion',
+  description: 'NIC Cycles 24 description here can be up to 3 rows of text and when getting to 3 rows there will be an ellipsis and a tooltip',
+  dates: ['01/01/2024', '14/01/2024'],
+  data: [{
+    name: 'Supplier',
+    items: 7
+  }, {
+    name: 'Brands',
+    items: 8
+  }, {
+    name: 'Product Lines',
+    items: 9
+  }],
+  viewBannerTooltip: 'View Banner'
+};

package/dist/{stories/components → components/BannerEventBox}/BannerEventBox.style.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapper = exports.Text = exports.Seperator = exports.MoreInfo = exports.MainContainer = exports.KeyBlock = exports.Key = exports.Headline = exports.DetailsWrapper = exports.Count = exports.CardTitle = exports.ButtonWrap = exports.Block = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MainContainer = exports.MainContainer = _styledComponents.default.div`
     width: ${props => props.width};
     height: ${props => props.height};

package/dist/components/BannerEventBoxList/BannerEventBoxList.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BannerEventBoxList = require("./BannerEventBoxList.style");
+var _FoodLionNewIcon = require("../../icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("../../icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("../../icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("../../icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("../../icons/HannafordIcon_new");
+var _BannerEventBox = _interopRequireDefault(require("../BannerEventBox/BannerEventBox"));
+var _LinkButton = _interopRequireDefault(require("../LinkButton/LinkButton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const BannerEventBoxList = props => {
+  const {
+    className,
+    eventName,
+    eventType,
+    count,
+    width,
+    height,
+    data,
+    retailer,
+    retailerFile,
+    showLoader,
+    showEventDetails,
+    toggleColor,
+    cardsContent,
+    children,
+    linkText,
+    disableToggle,
+    bannerWidth,
+    loaderColor,
+    showDraft
+  } = props;
+  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
+  const handleToggle = () => {
+    if (disableToggle) return;
+    setIsItemOpen(!IsItemOpen);
+  };
+  const bannersIcon = () => {
+    switch (retailer) {
+      case 'StopAndShop':
+        return <_StopAndShopNewIcon.StopAndShopNewIcon />;
+      case 'FoodLion':
+        return <_FoodLionNewIcon.FoodLionNewIcon />;
+      case 'GiantFood':
+        return <_GiantFoodIcon_new.GiantFoodNewIcon />;
+      case 'TheGiantCompany':
+        return <_TheGiantCompanyNewIcon.TheGiantCompanyIcon />;
+      case 'Hannaford':
+        return <_HannafordIcon_new.HannafordNewIcon />;
+      default:
+        return null;
+    }
+  };
+  return <_BannerEventBoxList.CollapseMenuItemMainContainer className={className}>
+      <_BannerEventBoxList.CollapseMenuItemContainer onClick={() => handleToggle()}>
+        {showLoader ? <_BannerEventBoxList.LoaderWrapper id="LoaderWrapper">
+            <span>Processing Data</span>
+            <_BannerEventBoxList.Loader loaderColor={loaderColor} />
+          </_BannerEventBoxList.LoaderWrapper> : <_BannerEventBoxList.MainDetails>
+
+            {!cardsContent && <_BannerEventBoxList.BannerIcon>
+                {bannersIcon()}
+              </_BannerEventBoxList.BannerIcon>}
+
+            {showEventDetails ? <_BannerEventBoxList.SubDetails>
+                {eventName}
+                {' '}
+                {eventName !== '' && eventType !== '' && <_BannerEventBoxList.ProductName>|</_BannerEventBoxList.ProductName>}
+                {' '}
+                {eventType}
+                {count && <_BannerEventBoxList.ProductName>
+                    {': '}
+                    {count}
+                    {' '}
+                    {count > 1 ? 'Products' : 'Product'}
+                  </_BannerEventBoxList.ProductName>}
+              </_BannerEventBoxList.SubDetails> : ' '}
+          </_BannerEventBoxList.MainDetails>}
+
+        <_BannerEventBoxList.ToggleContainer>
+          {IsItemOpen ? <_LinkButton.default disabled={disableToggle} text={linkText} leftIcon="info" rightIcon="arrowdown" textColor={toggleColor} color={toggleColor} /> : <_LinkButton.default disabled={disableToggle} text={linkText} leftIcon="info" rightIcon="arrowright" textColor={toggleColor} color={toggleColor} />}
+        </_BannerEventBoxList.ToggleContainer>
+      </_BannerEventBoxList.CollapseMenuItemContainer>
+
+      {IsItemOpen && <_BannerEventBoxList.CollapseMenuItemContentContainer id="CollapseMenuItemContentContainer">
+          {cardsContent ? <_BannerEventBoxList.MainContainer width={width} height={height}>
+              {data.map(item => <_BannerEventBox.default key={item?.banner} height="auto" width={bannerWidth} banner={item?.banner} description={item?.description} dates={item?.dates} data={item?.data} onInfoClick={() => retailerFile(item?.banner)} disabled={item?.disabled} buttonText={item.buttonText} />)}
+              {showDraft && <_BannerEventBoxList.DraftTag>DRAFT</_BannerEventBoxList.DraftTag>}
+            </_BannerEventBoxList.MainContainer> : children}
+        </_BannerEventBoxList.CollapseMenuItemContentContainer>}
+    </_BannerEventBoxList.CollapseMenuItemMainContainer>;
+};
+BannerEventBoxList.propTypes = {
+  className: _propTypes.default.string,
+  width: _propTypes.default.string,
+  height: _propTypes.default.string,
+  eventType: _propTypes.default.string,
+  eventName: _propTypes.default.string,
+  count: _propTypes.default.number,
+  toggleColor: _propTypes.default.string,
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  retailer: _propTypes.default.string,
+  retailerFile: _propTypes.default.func,
+  showLoader: _propTypes.default.bool,
+  showEventDetails: _propTypes.default.bool,
+  cardsContent: _propTypes.default.bool,
+  linkText: _propTypes.default.string,
+  disableToggle: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  bannerWidth: _propTypes.default.string,
+  loaderColor: _propTypes.default.string,
+  showDraft: _propTypes.default.bool
+};
+BannerEventBoxList.defaultProps = {
+  className: '',
+  width: 'auto',
+  height: 'auto',
+  eventType: 'Event Type',
+  eventName: 'Event Name',
+  count: null,
+  toggleColor: '#212121',
+  data: [{
+    banner: 'Stop&Shop',
+    description: `description description description description description description description description description description 
+        description description description description description description description description description `,
+    dates: ['01/01/2024', '14/01/2024'],
+    data: [{
+      name: 'Product Line',
+      items: ['cola', 'spring']
+    }, {
+      name: 'Supplier',
+      items: ['coca', 'cola', 'spring']
+    }, {
+      name: 'Brands',
+      items: ['coca', 'mentos', 'spring', 'cola']
+    }]
+  }, {
+    banner: 'Hannaford',
+    description: 'description',
+    dates: ['01/01/2024', '14/01/2024'],
+    data: [{
+      name: 'Supplier',
+      items: ['coca', 'cola', 'spring']
+    }]
+  }, {
+    banner: 'Giant Food',
+    description: 'description',
+    dates: ['01/01/2024', '14/01/2024'],
+    data: [{
+      name: 'Brands',
+      items: ['coca', 'mentos', 'spring', 'cola']
+    }]
+  }],
+  retailer: 'StopAndShop',
+  retailerFile: () => {},
+  cardsContent: true,
+  linkText: 'Event Info',
+  showLoader: false,
+  showEventDetails: true,
+  disableToggle: true,
+  children: null,
+  bannerWidth: 'auto',
+  loaderColor: '#212121',
+  showDraft: false
+};
+var _default = exports.default = BannerEventBoxList;

package/dist/components/BannerEventBoxList/BannerEventBoxList.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BannerEventBoxList = _interopRequireDefault(require("./BannerEventBoxList"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'SAG BI/BannerEventBoxList',
+  component: _BannerEventBoxList.default,
+  argTypes: {
+    width: {
+      control: 'text'
+    },
+    height: {
+      control: 'text'
+    },
+    toggleColor: {
+      control: 'color'
+    },
+    showDraft: {
+      name: 'showDraft',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Draft symbol'
+    }
+  }
+}; // eslint-disable-next-line react/jsx-filename-extension
+const Template = args => <_BannerEventBoxList.default {...args} />;
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  width: 'auto',
+  height: 'auto',
+  toggleColor: '#229E38',
+  showDraft: true
+};

package/dist/{stories/components → components/BannerEventBoxList}/BannerEventBoxList.style.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.LoaderWrapper = exports.Loader = exports.DraftTag = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = exports.BannerIcon = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
   background: white;