sag_components 2.0.0-beta → 2.0.0-beta2

package/dist/components/CollapseHeader/CollapseHeader.stories.js

@@ -1,123 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LargeSellingEvent = exports.CrossRetailersEvent = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CollapseHeader = require("./CollapseHeader");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const viewCreativeRetailersData1 = [{
-  label: 'Food Lion'
-}, {
-  label: 'Stop&Shop'
-}, {
-  label: 'Giant Food'
-}, {
-  label: 'The Giant Company'
-}, {
-  label: 'Hannaford'
-}];
-const data = {
-  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: ''
-};
-var _default = exports.default = {
-  title: 'SAG BI/CollapseHeader',
-  component: _CollapseHeader.CollapseHeader,
-  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'
-    },
-    showViewCreativeButton: {
-      name: 'showViewCreativeButton',
-      control: {
-        type: 'boolean'
-      },
-      description: 'Show/Hide button'
-    },
-    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 Template = args => <_CollapseHeader.CollapseHeader {...args} />;
-const LargeSellingEvent = exports.LargeSellingEvent = Template.bind({});
-LargeSellingEvent.args = {
-  showRetailerIcon: true,
-  showPeriodIcon: true,
-  viewCreativeRetailersData: null,
-  data,
-  width: '100%',
-  height: '100%',
-  showDraft: true,
-  showViewCreativeButton: true
-};
-const CrossRetailersEvent = exports.CrossRetailersEvent = Template.bind({});
-CrossRetailersEvent.args = {
-  showRetailerIcon: false,
-  showPeriodIcon: false,
-  viewCreativeRetailersData: viewCreativeRetailersData1,
-  data,
-  width: '100%',
-  height: '100%',
-  showViewCreativeButton: false
-};

package/dist/components/CollapseHeader/CollapseHeader.style.js

@@ -1,200 +0,0 @@
-"use strict";
-
-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.DraftTag = exports.DownloadButtonContainer = exports.BottonsContainer = 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`
-  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 0 0;
-  font-weight: 400;
-  white-space: pre-wrap;
-  width: 100%;
-  @media (max-width: 1536px) {
-    padding: 12px 0 0;
-  }
-`;
-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 ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 10px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  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`
-  max-width: 70%;
-`;
-const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div`
-  display: flex;
-  gap: 40px;
-  width: 100%;
-  margin-top: 8px;
-`;
-const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong`
-  font-weight: 500;
-`;
-const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p`
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-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;
-  font-size: 14px;
-  @media (max-width: 1536px) {
-    font-size: 12px;
-  }  
-`;
-const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div`
-  display: flex;
-  width: 100%;
-`;
-const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong`
-  font-size: 14px;
-  font-weight: 500;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }  
-`;
-const PeriodValue = exports.PeriodValue = _styledComponents.default.p`
-  line-height: 19px;
-  font-size: 14px;
-  font-weight: 400;
-  margin: 0 0 0 10px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;

package/dist/components/CollapseMenuItem/CollapseMenuItem.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItemClosedIcon = require("../../icons/MenuItemClosedIcon");
-var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
-var _MenuItemUpIcon = require("../../icons/MenuItemUpIcon");
-var _CollapseMenuItem = require("./CollapseMenuItem.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 CollapseMenuItem = props => {
-  const {
-    title,
-    subTitle,
-    children,
-    showBorder,
-    buttonAlignment,
-    className
-  } = props;
-  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
-  const handleToggle = () => {
-    setIsItemOpen(!IsItemOpen);
-  };
-  return <_CollapseMenuItem.CollapseMenuItemMainContainer className={className} showBorder={showBorder}>
-      <_CollapseMenuItem.CollapseMenuItemContainer onClick={handleToggle} style={{
-      cursor: 'pointer'
-    }}>
-        {buttonAlignment === 'left' && <_CollapseMenuItem.LeftIconContainer className="LeftIconContainer">
-          {IsItemOpen ? <_MenuItemOpenIcon.MenuItemOpenIcon color="#212121" /> : <_MenuItemClosedIcon.MenuItemClosedIcon color="#212121" />}
-        </_CollapseMenuItem.LeftIconContainer>}
-
-        <_CollapseMenuItem.CollapseMenuItemTitle id="CollapseMenuItemTitle">
-          {title}
-        </_CollapseMenuItem.CollapseMenuItemTitle>
-        <_CollapseMenuItem.CollapseMenuItemSubTitle id="CollapseMenuItemSubTitle">
-          {subTitle !== undefined && subTitle !== null && subTitle !== '' ? '|' : ''}
-        </_CollapseMenuItem.CollapseMenuItemSubTitle>
-        <_CollapseMenuItem.CollapseMenuItemSubTitle id="CollapseMenuItemSubTitle">
-          {subTitle}
-        </_CollapseMenuItem.CollapseMenuItemSubTitle>
-
-        {buttonAlignment === 'right' && <_CollapseMenuItem.RightIconContainer>
-          {IsItemOpen ? <_MenuItemUpIcon.MenuItemUpIcon color="#212121" /> : <_MenuItemOpenIcon.MenuItemOpenIcon color="#212121" />}
-        </_CollapseMenuItem.RightIconContainer>}
-
-      </_CollapseMenuItem.CollapseMenuItemContainer>
-
-      {IsItemOpen && <_CollapseMenuItem.CollapseMenuItemContentContainer id="CollapseMenuItemContentContainer">
-          {children || ''}
-        </_CollapseMenuItem.CollapseMenuItemContentContainer>}
-    </_CollapseMenuItem.CollapseMenuItemMainContainer>;
-};
-var _default = exports.default = CollapseMenuItem;
-CollapseMenuItem.propTypes = {
-  className: _propTypes.default.string,
-  title: _propTypes.default.string,
-  subTitle: _propTypes.default.string,
-  showBorder: _propTypes.default.bool,
-  buttonAlignment: _propTypes.default.string
-};
-CollapseMenuItem.defaultProps = {
-  className: '',
-  title: '',
-  subTitle: '',
-  showBorder: false,
-  buttonAlignment: 'left'
-};

package/dist/components/CollapseMenuItem/CollapseMenuItem.stories.js

@@ -1,121 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProductLines = exports.EventsList = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CollapseMenuItem = _interopRequireDefault(require("./CollapseMenuItem"));
-var _EventList = _interopRequireDefault(require("../EventList/EventList"));
-var _ReportTable = _interopRequireDefault(require("../ReportTable/ReportTable"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'SAG BI/CollapseMenuItem',
-  component: _CollapseMenuItem.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title text ',
-      defaultValue: ''
-    },
-    subTitle: {
-      name: 'subTitle',
-      control: {
-        type: 'text'
-      },
-      description: 'subTitle text ',
-      defaultValue: ''
-    },
-    showBorder: {
-      name: 'showBorder',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show Border  of component'
-    },
-    buttonAlignment: {
-      control: {
-        type: 'radio'
-      },
-      options: ['left', 'right'],
-      description: 'button Alignment'
-    }
-  }
-};
-const displayEventList = () =>
-// eslint-disable-next-line react/jsx-filename-extension
-<_EventList.default eventsData={[{
-  eventName: 'Large Selling Event #10 POD3 Weeks 37 and 38 and #10 POD3 Weeks 39 and 40',
-  period: '12/06/2023 - 09/07/2023'
-}, {
-  eventName: 'Small Selling Event #12 POD4 Weeks 37 and 38 and #10 POD3 Weeks 39 and 40',
-  period: '18/07/2023 - 09/07/2023'
-}, {
-  eventName: 'NIC 11_23 Cycle 11',
-  period: '10/08/2023 - 09/08/2023'
-}, {
-  eventName: 'Large Selling Event #10 POD3 Weeks 37 and 38 ',
-  period: '10/09/2023 - 29/09/2023'
-}, {
-  eventName: 'Large Selling Event #37 and 38 ',
-  period: '13/09/2023 - 29/09/2023'
-}, {
-  eventName: 'Large Selling Event 38 ',
-  period: '16/09/2023 - 29/09/2023'
-}]} itemHeight="100px" itemWidth="500px" onClick={() => {}} />;
-const displayReportTable = () => <_ReportTable.default disableInfo onSelectRowClick={() => {}} tableData={{
-  columnsHeadings: [{
-    key: 'eventName',
-    label: 'Event Name'
-  }, {
-    key: 'retailer',
-    label: 'Retailer'
-  }, {
-    key: 'totalCost',
-    label: 'Total Cost'
-  }, {
-    key: 'incBaselineSales',
-    label: 'Inc. Baseline Sales'
-  }],
-  rowsValues: [{
-    eventDescription: 'Food',
-    incBaselineSales: '20K',
-    retailer: 'Large Selling Event P2 2023',
-    totalCost: '$200K'
-  }, {
-    eventDescription: 'Food',
-    incBaselineSales: '50K',
-    retailer: 'Large Selling Event P2 2023',
-    totalCost: '$500K'
-  }, {
-    eventDescription: 'Food',
-    incBaselineSales: '70K',
-    retailer: 'Large Selling Event P2 2023',
-    totalCost: '$700K'
-  }, {
-    eventDescription: 'Food',
-    incBaselineSales: '60K',
-    retailer: 'Large Selling Event P2 2023',
-    totalCost: '$600K'
-  }]
-}} title="Existing Repeaters (post event)" useColorLinearGradient={false} useSelectButtons />;
-const TemplateEventsList = args => <_CollapseMenuItem.default {...args}>{displayEventList()}</_CollapseMenuItem.default>;
-const EventsList = exports.EventsList = TemplateEventsList.bind({});
-EventsList.args = {
-  title: 'Events',
-  subTitle: '19 Events',
-  showBorder: false,
-  buttonAlignment: 'left'
-};
-const TemplateProductLines = args => <_CollapseMenuItem.default {...args}>{displayReportTable()}</_CollapseMenuItem.default>;
-const ProductLines = exports.ProductLines = TemplateProductLines.bind({});
-ProductLines.args = {
-  title: 'Product Lines',
-  subTitle: '20',
-  showBorder: true,
-  buttonAlignment: 'right'
-};

package/dist/components/CollapseMenuItem/CollapseMenuItem.style.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RightIconContainer = exports.LeftIconContainer = exports.CollapseMenuItemTitle = exports.CollapseMenuItemSubTitle = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div`
-  margin: 0;
-  background: #ffffff;
-  box-shadow: ${props => props.showBorder ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null};
-  border-radius: 12px;  
-`;
-const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-size: 18px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 15px;
-`;
-const CollapseMenuItemTitle = exports.CollapseMenuItemTitle = _styledComponents.default.h3`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 25px;
-  margin: 0 5px 0 10px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const CollapseMenuItemSubTitle = exports.CollapseMenuItemSubTitle = _styledComponents.default.h3`
-  color: #757171;
-  font-weight: 500;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-  line-height: 25px;
-  margin: 0 5px;
-
-`;
-const LeftIconContainer = exports.LeftIconContainer = _styledComponents.default.h3`
-  margin: 0 0 0 10px;
-`;
-const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 14px;
-  margin: 0;
-`;
-const RightIconContainer = exports.RightIconContainer = _styledComponents.default.div`
-  width: 20px;
-  height: 20px;
-  margin-left: auto;
-`;