sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/TextField/TextField.js

@@ -1,183 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TextField = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
-var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
-var _styles = require("@mui/material/styles");
-var _TextField2 = require("./TextField.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; }
-/**
- *  SAG TextField
- */
-const TextField = exports.TextField = _react.default.forwardRef(({
-  width = '100%',
-  height = '49px',
-  label,
-  focusColor,
-  shape,
-  size,
-  placeHolder = 'Enter your email address',
-  passwordField = false,
-  defaultValue,
-  resetDefaultValue,
-  required,
-  inputRef,
-  allowedInput = 'all',
-  onChange,
-  multiline = false
-}, ref) => {
-  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
-  const [showPassword, setShowPassword] = _react.default.useState(false);
-  const handleClickShowPassword = () => setShowPassword(show => !show);
-  const onChangeHandler = event => {
-    onChange(event);
-    setCurrentInputValue({
-      event,
-      value: event.target.value
-    });
-  };
-  const theme = (0, _styles.createTheme)({
-    components: {
-      MuiFormLabel: {
-        styleOverrides: {
-          asterisk: {
-            color: '#db3131'
-          }
-        }
-      }
-    }
-  });
-  const handleMouseDownPassword = event => {
-    event.preventDefault();
-  };
-
-  // defines shape: squire or round
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      return {
-        '& .MuiOutlinedInput-root': {
-          width: {
-            width
-          },
-          height: {
-            height
-          },
-          paddingTop: multiline ? '12px' : '0',
-          marginTop: 0,
-          borderColor: 'green',
-          borderRadius: '12px',
-          legend: {
-            marginLeft: '6px'
-          },
-          alignItems: multiline ? 'flex-start' : 'center',
-          '&.Mui-focused fieldset': {
-            borderColor: focusColor
-          }
-        },
-        '& label.Mui-focused': {
-          color: focusColor
-        },
-        '& .MuiAutocomplete-inputRoot': {
-          paddingLeft: '10px !important',
-          borderRadius: '12px'
-        },
-        '& .MuiInputLabel-outlined': {
-          paddingLeft: '10px',
-          // color: focusColor,
-          paddingTop: '4px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white',
-          paddingTop: 0
-        },
-        '& .MuiInputLabel-root': {
-          fontFamily: 'Poppins'
-        },
-        '& .MuiInputBase-inputSizeSmall': {
-          fontFamily: 'Poppins'
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  const isInputAllowed = inputChar => {
-    const NUMERIC_REGEX = /^[0-9-]+$/;
-    const ALPHA_REGEX = /^[a-zA-Z]+$/;
-    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
-    switch (allowedInput) {
-      case 'all':
-        return true;
-      case 'alpha':
-        if (ALPHA_REGEX.test(inputChar)) return true;
-        return false;
-      case 'numeric':
-        if (NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      case 'alphaNumeric':
-        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
-        return false;
-      default:
-        return true;
-    }
-  };
-  return <_TextField2.TextFieldContainer id="TextFieldContainer" width={width}>
-        <_styles.ThemeProvider theme={theme}>
-          {/* <Box sx={{ display: 'flex', flexWrap: 'wrap' }}> */}
-          <_Box.default>
-            {!passwordField && <_TextField.default key={resetDefaultValue} label={label} multiline={multiline} defaultValue={defaultValue} placeholder={placeHolder} id="outlined-start-adornment" sx={getTextFieldStyle()} size={size} required={required} inputRef={inputRef ?? null} ref={ref ?? null} onKeyDown={event => {
-          if (!isInputAllowed(event.key)) {
-            event.preventDefault();
-          }
-        }} onChange={event => {
-          onChangeHandler(event);
-        }} InputProps={{
-          textalign: 'flex-start',
-          alignitems: 'flex-start',
-          aligncontent: 'flex-start',
-          disableunderline: true.toString(),
-          style: {
-            textalign: 'start',
-            '&::placeholder': {
-              color: '#B1B1B1'
-            }
-          }
-        }} />}
-
-            {passwordField && <_FormControl.default sx={getTextFieldStyle()} variant="outlined">
-              <_InputLabel.default htmlFor="outlined-adornment-password">
-                {label}
-              </_InputLabel.default>
-              <_OutlinedInput.default id="outlined-adornment-password" type={showPassword ? 'text' : 'password'} size={size} endAdornment={<_InputAdornment.default position="end">
-                    <_IconButton.default aria-label="toggle password visibility" onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} edge="end">
-                      {showPassword ? <_Visibility.default /> : <_VisibilityOff.default />}
-                    </_IconButton.default>
-                  </_InputAdornment.default>} defaultValue={defaultValue} label={label} multiline={multiline} inputRef={inputRef ?? null} ref={ref ?? null} onKeyDown={event => {
-            if (!isInputAllowed(event.key)) {
-              event.preventDefault();
-            }
-          }} onChange={event => {
-            onChangeHandler(event);
-          }} />
-            </_FormControl.default>}
-          </_Box.default>
-        </_styles.ThemeProvider>
-      </_TextField2.TextFieldContainer>;
-});
-var _default = exports.default = TextField;

package/dist/components/TextField/TextField.stories.js

@@ -1,160 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RegularField = exports.Password = exports.DefaultValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TextField = require("./TextField");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG/TextField',
-  component: _TextField.TextField,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the input field'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the input field'
-    },
-    label: {
-      name: 'label',
-      control: {
-        type: 'text'
-      },
-      description: 'notify the user how to type a text',
-      defaultValue: 'Type...'
-    },
-    focusColor: {
-      name: 'focusColor',
-      control: {
-        type: 'color'
-      },
-      defaultValue: 'blue'
-    },
-    placeHolder: {
-      name: 'placeHolder',
-      control: {
-        type: 'text'
-      },
-      description: 'place holder of the input field'
-    },
-    shape: {
-      control: {
-        type: 'radio'
-      },
-      options: ['round', 'square'],
-      description: 'shape: round/square'
-    },
-    size: {
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'large'],
-      description: 'size: small/large'
-    },
-    passwordField: {
-      name: 'passwordField',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is for input password '
-    },
-    required: {
-      name: 'required',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is required'
-    },
-    defaultValue: {
-      name: 'defaultValue',
-      control: {
-        type: 'text'
-      },
-      description: 'sets default value',
-      defaultValue: 'Type...'
-    },
-    resetDefaultValue: {
-      name: 'resetDefaultValue',
-      control: {
-        type: 'boolean'
-      },
-      description: 'change this to reset default value'
-    },
-    allowedInput: {
-      name: 'allowedInput',
-      control: {
-        type: 'radio'
-      },
-      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
-      description: 'allowed input characters: numbers, alphabet ot both'
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'returns an option (object) selected by the user'
-    },
-    onInputChange: {
-      action: 'onInputChange',
-      description: 'returns a value (string) displayed in the textbox'
-    },
-    multiline: {
-      name: 'multiline',
-      control: {
-        type: 'boolean'
-      },
-      description: 'enable multiline'
-    }
-  }
-};
-const Template = args => <_TextField.TextField {...args} />;
-const RegularField = exports.RegularField = Template.bind({});
-RegularField.args = {
-  width: '100%',
-  height: '100%',
-  defaultValue: undefined,
-  label: 'Email',
-  placeHolder: 'Enter your email address',
-  shape: 'round',
-  size: 'small',
-  passwordField: false,
-  required: false,
-  allowedInput: 'all',
-  multiline: true
-};
-const DefaultValue = exports.DefaultValue = Template.bind({});
-DefaultValue.args = {
-  width: '100%',
-  height: '100%',
-  defaultValue: '',
-  label: 'Email',
-  placeHolder: 'Enter your email address',
-  shape: 'round',
-  size: 'small',
-  passwordField: false,
-  required: false,
-  allowedInput: 'all'
-};
-const Password = exports.Password = Template.bind({});
-Password.args = {
-  width: '100%',
-  height: '100%',
-  defaultValue: '9999',
-  label: 'Password',
-  placeHolder: undefined,
-  shape: 'round',
-  size: 'small',
-  passwordField: true,
-  required: false,
-  allowedInput: 'alphaNumeric'
-};

package/dist/components/TextField/TextField.style.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextFieldContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div`
-font-family: "Poppins";
-  display: flex;
-  width: ${props => props.width};  
-  text-align: left;  
-  position: relative; 
-  align-items: flex-start;
-  justify-content: flex-start;
-  font-size: 14px;
-`;

package/dist/components/TitleDescription/TitleDescription.js

@@ -1,305 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TitleDescription = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _EyeIcon = require("../../icons/EyeIcon");
-var _FoodLionIcon = require("../../icons/FoodLionIcon");
-var _GiantFoodIcon = require("../../icons/GiantFoodIcon");
-var _HannafordIcon = require("../../icons/HannafordIcon");
-var _StopAndShopIcon = require("../../icons/StopAndShopIcon");
-var _TheGiantCompanyIcon = require("../../icons/TheGiantCompanyIcon");
-var _ComboBoxArrowDownIcon = require("../../icons/ComboBoxArrowDownIcon");
-var _ComboBoxArrowUpIcon = require("../../icons/ComboBoxArrowUpIcon");
-var _ListBox = require("../ListBox/ListBox");
-var _TitleDescription = require("./TitleDescription.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 TitleDescription = props => {
-  const {
-    className,
-    showRetailerIcon,
-    showPeriodIcon,
-    viewCreativeRetailersData,
-    data,
-    viewCreativeOnClick,
-    width,
-    height,
-    textcolor,
-    showDraft,
-    disabled
-  } = props;
-  const [retailersDataState, setRetailersDataState] = (0, _react.useState)(null);
-  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = (0, _react.useState)(false);
-  const viewCreativeContainerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    let newData = [];
-    if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
-      newData = viewCreativeRetailersData?.map(item => ({
-        ...item,
-        checked: false,
-        disabled: false
-      }));
-      setRetailersDataState(newData);
-    } else {
-      setRetailersDataState(null);
-    }
-  }, [viewCreativeRetailersData]);
-  const getRetailerIcon = retailerName => {
-    switch (retailerName) {
-      case 'Food Lion':
-        return <_TitleDescription.RetailerIconContainer id="RetailerIconContainer">
-            <_FoodLionIcon.FoodLionIcon width="90" height="20" />
-            &nbsp;
-          </_TitleDescription.RetailerIconContainer>;
-      case 'Hannaford':
-        return <_TitleDescription.RetailerIconContainer id="RetailerIconContainer">
-            <_HannafordIcon.HannafordIcon width="90" height="20" />
-            &nbsp;
-          </_TitleDescription.RetailerIconContainer>;
-      case 'Giant Food':
-        return <_TitleDescription.RetailerIconContainer id="RetailerIconContainer">
-            <_GiantFoodIcon.GiantFoodIcon width="60" height="20" />
-            &nbsp;
-          </_TitleDescription.RetailerIconContainer>;
-      case 'The Giant Company':
-        return <_TitleDescription.RetailerIconContainer id="RetailerIconContainer">
-            <_TheGiantCompanyIcon.TheGiantCompanyIcon width="60" height="20" />
-            &nbsp;
-          </_TitleDescription.RetailerIconContainer>;
-      case 'Stop&Shop':
-        return <_TitleDescription.RetailerIconContainer id="RetailerIconContainer">
-            <_StopAndShopIcon.StopAndShopIcon width="90" height="20" />
-            &nbsp;
-          </_TitleDescription.RetailerIconContainer>;
-      default:
-        return <_TitleDescription.RetailerIconContainer id="RetailerIconContainer">
-            {retailerName}
-            {retailerName && <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>}
-          </_TitleDescription.RetailerIconContainer>;
-    }
-  };
-  const viewCreativeOnClickHandler = () => {
-    if (retailersDataState && retailersDataState.length > 0) {
-      setViewCreativeListBoxOpenedState(!viewCreativeListBoxOpenedState);
-    } else {
-      viewCreativeOnClick({
-        name: viewCreativeOnClick
-      });
-    }
-  };
-  const listBoxViewCreativeOnClickHandler = props => {
-    const selectedRetailer = props.selectedData?.length > 0 ? props.selectedData[0].label : null;
-    if (selectedRetailer) {
-      viewCreativeOnClick({
-        selectedRetailer
-      });
-    }
-    if (props.selectedData?.length > 0) {
-      setViewCreativeListBoxOpenedState(false);
-    }
-  };
-  const getViewCreativeContainerLeft = () => {
-    const {
-      offsetLeft
-    } = viewCreativeContainerRef.current;
-    return offsetLeft.toString().concat('', 'px');
-  };
-  const getViewCreativeContainerTop = () => {
-    const {
-      offsetTop
-    } = viewCreativeContainerRef.current;
-    return (offsetTop + 33).toString().concat('', 'px');
-  };
-  return <_TitleDescription.MainContainer id="TitleDescription" className={className} height={height} width={width} textcolor={textcolor}>
-      <_TitleDescription.PanelContainer id="PanelContainer">
-        <_TitleDescription.EventNameAndViewCreativeContainer id="EventNameAndViewCreativeContainer">
-          <_TitleDescription.EventNameViewCreativeSubContainer id="EventNameViewCreativeSubContainer">
-            <_TitleDescription.EventName id="EventName">{data.eventName}</_TitleDescription.EventName>
-
-            <_TitleDescription.ViewCreativeButtonAndListBoxContainer id="ViewCreativeButtonAndListBoxContainer">
-              <_TitleDescription.ViewCreativeContainer id="ViewCreativeContainer" ref={viewCreativeContainerRef} onClick={viewCreativeOnClickHandler} disabled={disabled}>
-                <_EyeIcon.EyeIcon width="12" height="12" />
-                <_TitleDescription.ViewCreativeTextField id="ViewCreativeTextField">
-                  View creative
-                </_TitleDescription.ViewCreativeTextField>
-
-                {retailersDataState && retailersDataState?.length > 0 && (viewCreativeListBoxOpenedState ? <_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon /> : <_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon />)}
-              </_TitleDescription.ViewCreativeContainer>
-
-              {viewCreativeListBoxOpenedState && <_TitleDescription.ViewCreativeListBoxContainer id="ViewCreativeListBoxContainer" left={getViewCreativeContainerLeft()} top={getViewCreativeContainerTop()} width="100%" height="100%" onMouseLeave={() => {
-              setViewCreativeListBoxOpenedState(false);
-            }}>
-                  <_ListBox.ListBox id="ListBox" data={retailersDataState} buttonsBackgroundColorChecked="#B1B1B1" buttonsBackgroundColorUnchecked="#FFF" buttonsBorderColor="##B1B1B1" buttonsIconColor="#212121" buttonsTextColorChecked="#212121" buttonsTextColorUnchecked="#212121" height="100%" width="100%" onClick={props => {
-                listBoxViewCreativeOnClickHandler(props);
-              }} />
-                </_TitleDescription.ViewCreativeListBoxContainer>}
-            </_TitleDescription.ViewCreativeButtonAndListBoxContainer>
-          </_TitleDescription.EventNameViewCreativeSubContainer>
-
-          {showDraft && <_TitleDescription.DraftTag>DRAFT</_TitleDescription.DraftTag>}
-        </_TitleDescription.EventNameAndViewCreativeContainer>
-
-        <_TitleDescription.FilterValuesContainer id="FilterValuesContainer">
-          {showRetailerIcon && <_TitleDescription.Retailer id="Retailer">{getRetailerIcon(data.retailer)}</_TitleDescription.Retailer>}
-
-          <_TitleDescription.FilterValue className="FilterValue">{data.eventType}</_TitleDescription.FilterValue>
-
-          {data.externalEventDescription && data.externalEventDescription !== '' && <>
-              <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>
-              <_TitleDescription.FilterValue className="FilterValue">
-                {data.externalEventDescription}
-              </_TitleDescription.FilterValue>
-            </>}
-
-          {data.externalEventID && data.externalEventID !== '' && <>
-              <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>
-              <_TitleDescription.FilterValue className="FilterValue">{data.externalEventID}</_TitleDescription.FilterValue>
-            </>}
-
-          {data.storeType && data.storeType !== '' && <>
-              <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>
-              <_TitleDescription.FilterValue className="FilterValue">{data.storeType}</_TitleDescription.FilterValue>
-            </>}
-
-          {data.category && data.category !== '' && <>
-              <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>
-              <_TitleDescription.FilterValue className="FilterValue">{data.category}</_TitleDescription.FilterValue>
-            </>}
-
-          {data.supplier && data.supplier !== '' && <>
-              <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>
-              <_TitleDescription.FilterValue className="FilterValue">{data.supplier}</_TitleDescription.FilterValue>
-            </>}
-
-          {data.brand && data.brand !== '' && <>
-              <_TitleDescription.FieldsDelimiter className="FieldsDelimiter"> | </_TitleDescription.FieldsDelimiter>
-              <_TitleDescription.FilterValue className="FilterValue">{data.brand}</_TitleDescription.FilterValue>
-            </>}
-        </_TitleDescription.FilterValuesContainer>
-
-        <_TitleDescription.FilterValuesContainer>
-          <_TitleDescription.ObjectiesContainer id="ObjectiesContainer" showPeriodIcon={showPeriodIcon}>
-            <_TitleDescription.ObjectivesDescription id="ObjectivesDescription">
-              <_TitleDescription.ObjectivesTitle id="ObjectivesTitle">
-                {data?.eventDescription?.length > 0 ? 'Event Description:  ' : ''}
-              </_TitleDescription.ObjectivesTitle>
-              {data.eventDescription}
-            </_TitleDescription.ObjectivesDescription>
-          </_TitleDescription.ObjectiesContainer>
-
-          {showPeriodIcon && <_TitleDescription.PeriodsContainer id="PeriodsContainer">
-              <_TitleDescription.SubLineContainer id="SubLineContainer" />
-              <_TitleDescription.SubLineContainer id="SubLineContainer">
-                {data?.eventDatesValue?.length > 0 ? <_TitleDescription.PeriodLabel id="PeriodLabel">Event Dates: </_TitleDescription.PeriodLabel> : ''}
-                {data?.eventDatesValue?.length > 0 ? <_TitleDescription.PeriodValue id="PeriodValue">
-                    {data.eventDatesValue}
-                  </_TitleDescription.PeriodValue> : ''}
-              </_TitleDescription.SubLineContainer>
-            </_TitleDescription.PeriodsContainer>}
-        </_TitleDescription.FilterValuesContainer>
-
-        <_TitleDescription.ObjectiesAndPeriodsContainer id="ObjectiesAndPeriodsContainer">
-          <_TitleDescription.ObjectiesContainer id="ObjectiesContainer" showPeriodIcon={showPeriodIcon}>
-            <_TitleDescription.ObjectivesDescription id="ObjectivesDescription">
-              <_TitleDescription.ObjectivesTitle id="ObjectivesTitle">
-                {data?.objectivesDescription?.length > 0 ? 'Objectives:  ' : ''}
-              </_TitleDescription.ObjectivesTitle>
-
-              {data.objectivesDescription}
-            </_TitleDescription.ObjectivesDescription>
-          </_TitleDescription.ObjectiesContainer>
-
-          {/* {showPeriodIcon && (
-            <PeriodsContainer id="PeriodsContainer">
-              <SubLineContainer id="SubLineContainer" />
-              <SubLineContainer id="SubLineContainer">
-                {data?.eventDatesValue?.length > 0 ? (
-                  <PeriodLabel id="PeriodLabel">Event Dates: </PeriodLabel>
-                ) : (
-                  ''
-                )}
-                {data?.eventDatesValue?.length > 0 ? (
-                  <PeriodValue id="PeriodValue">
-                    {data.eventDatesValue}
-                  </PeriodValue>
-                ) : (
-                  ''
-                )}
-              </SubLineContainer>
-            </PeriodsContainer>
-           )} */}
-        </_TitleDescription.ObjectiesAndPeriodsContainer>
-      </_TitleDescription.PanelContainer>
-    </_TitleDescription.MainContainer>;
-};
-exports.TitleDescription = TitleDescription;
-var _default = exports.default = TitleDescription;
-TitleDescription.propTypes = {
-  className: _propTypes.default.string,
-  showRetailerIcon: _propTypes.default.bool,
-  showPeriodIcon: _propTypes.default.bool,
-  viewCreativeRetailersData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string
-  })),
-  data: _propTypes.default.shape({
-    eventName: _propTypes.default.string,
-    eventType: _propTypes.default.string,
-    retailer: _propTypes.default.string,
-    eventDescription: 'Large Selling Event Description',
-    objectivesDescription: _propTypes.default.string,
-    eventDatesValue: _propTypes.default.string,
-    externalEventDescription: _propTypes.default.string,
-    externalEventID: _propTypes.default.string,
-    storeType: _propTypes.default.string,
-    category: _propTypes.default.string,
-    supplier: _propTypes.default.string,
-    brand: _propTypes.default.string
-  }),
-  viewCreativeOnClick: _propTypes.default.func,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string,
-  textcolor: _propTypes.default.string,
-  showDraft: _propTypes.default.bool,
-  disabled: _propTypes.default.bool
-};
-TitleDescription.defaultProps = {
-  className: '',
-  showRetailerIcon: true,
-  showPeriodIcon: true,
-  viewCreativeRetailersData: [{
-    label: 'Food Lion'
-  }, {
-    label: 'Stop&Shop'
-  }, {
-    label: 'Giant Food'
-  }, {
-    label: 'The Giant Company'
-  }, {
-    label: 'Hannaford'
-  }],
-  data: {
-    eventName: 'Large Selling Event P2 2023',
-    eventType: 'Large Selling Event',
-    retailer: 'The Giant Company',
-    eventDescription: 'Large Selling Event Description',
-    objectivesDescription: 'Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ',
-    eventDatesValue: 'Feb 1, 2023 - Feb 28, 2023',
-    externalEventDescription: 'Large Selling Event P2 Description',
-    externalEventID: 'LSE2_23',
-    storeType: 'Total',
-    category: '',
-    supplier: '',
-    brand: ''
-  },
-  viewCreativeOnClick: () => {},
-  width: '100%',
-  height: '100%',
-  textcolor: '#212121',
-  showDraft: true,
-  disabled: false
-};