sag_components 1.0.1021 → 1.0.1022

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

@@ -1,161 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-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"));
-var _default = exports.default = {
-  title: 'SAG BI/Collapse Menu Item',
-  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 = () => (
-//   <EventList
-//     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
-//     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 {...args}>{displayEventList()}</CollapseMenuItem>
-// );
-const EventsList = exports.EventsList = {
-  args: {
-    title: 'Events',
-    subTitle: '19 Events',
-    showBorder: false,
-    buttonAlignment: 'left'
-  }
-};
-
-// const TemplateProductLines = (args) => (
-//   <CollapseMenuItem {...args}>{displayReportTable()}</CollapseMenuItem>
-// );
-
-const ProductLines = exports.ProductLines = {
-  args: {
-    title: 'Product Lines',
-    subTitle: '20',
-    showBorder: true,
-    buttonAlignment: 'right'
-  }
-};

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

@@ -1,61 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-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"));
-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;
-`;

package/dist/stories/components/Datepicker/Datepicker.js

@@ -1,148 +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 = exports.Datepicker = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
-var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
-var _DatePicker = require("@mui/x-date-pickers/DatePicker");
-var _demo = require("@mui/x-date-pickers/internals/demo");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _Datepicker = require("./Datepicker.style");
-var _CalendarIcon = require("../../icons/CalendarIcon");
-/**
- *  SAG Datepicker
- */
-const Datepicker = _ref => {
-  let {
-    width = '100%',
-    text,
-    format = 'MMM DD, YYYY',
-    shape,
-    onChange,
-    value,
-    disableClearable,
-    disabled = false,
-    labelColor = '#1B30AA'
-  } = _ref;
-  /**
-   *  SAG Datepicker
-   */
-
-  const [valueState, setvalueState] = _react.default.useState(null);
-  (0, _react.useEffect)(() => {
-    if (value) {
-      setvalueState((0, _dayjs.default)(value));
-    } else {
-      setvalueState(null);
-    }
-  }, [value]);
-  (0, _react.useEffect)(() => {}, [valueState]);
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      // round
-      return {
-        '& .MuiInputLabel-inputRoot': {
-          fontFamily: 'Poppins',
-          fontSize: '14px',
-          fontWidth: 400,
-          paddingLeft: '10px !important',
-          borderRadius: '12px',
-          width
-          // color: labelColor,
-        },
-        '& .MuiOutlinedInput-root': {
-          borderRadius: '12px',
-          fontFamily: 'Poppins',
-          fontSize: '14px',
-          fontWidth: 400,
-          width,
-          // color: labelColor,
-          legend: {
-            marginLeft: '10px'
-          },
-          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
-          '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: '10px'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#E7E7E7'
-            // color: labelColor,
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
-            // color: labelColor,
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: disabled ? '#E7E7E7' : labelColor
-            // color: labelColor,
-          }
-        },
-        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
-          // Default transform is "translate(14px, 20px) scale(1)""
-          // This lines up the label with the initial cursor position in the input
-          // after changing its padding-left.
-          transform: 'translate(14px, 18px) scale(1);',
-          fontSize: '14px',
-          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575'
-        },
-        '& .MuiInputLabel-outlined': {
-          fontFamily: 'Poppins',
-          paddingLeft: '10px',
-          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
-          fontWidth: 400,
-          fontSize: '18px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white'
-          // color: labelColor,
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  return /*#__PURE__*/_react.default.createElement(_Datepicker.DatepickerContainer, {
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
-    dateAdapter: _AdapterDayjs.AdapterDayjs,
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
-    components: ['DatePicker'],
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
-    value: valueState,
-    clearable: true,
-    disabled: disabled,
-    onChange: newValue => {
-      setvalueState(newValue);
-      onChange({
-        newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
-      });
-    },
-    sx: getTextFieldStyle(),
-    label: text,
-    slots: {
-      openPickerIcon: _CalendarIcon.CalendarIcon
-    },
-    slotProps: {
-      textField: {
-        fullWidth: true
-      },
-      actionBar: {
-        actions: ['clear']
-      }
-    },
-    format: format
-  }))));
-};
-exports.Datepicker = Datepicker;
-var _default = exports.default = Datepicker;

package/dist/stories/components/Datepicker/Datepicker.stories.js

@@ -1,86 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SmallSquare = exports.RegularFormat = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Datepicker = require("./Datepicker");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG Core/Datepicker',
-  component: _Datepicker.Datepicker,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      control: {
-        type: 'text'
-      },
-      description: 'width of the input field',
-      defaultValue: '300px'
-    },
-    text: {
-      name: 'text',
-      control: {
-        type: 'text'
-      },
-      description: 'text inside of the input field',
-      defaultValue: 'Search...'
-    },
-    shape: {
-      control: {
-        type: 'radio'
-      },
-      options: ['round', 'square'],
-      description: 'shape: round/square'
-    },
-    format: {
-      name: 'format',
-      control: {
-        type: 'text'
-      },
-      description: 'valid date format '
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'returns an option (object) selected by the user'
-    },
-    value: {
-      name: 'value',
-      control: {
-        type: 'text'
-      },
-      description: 'set value (correct date format)'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disable component'
-    }
-  }
-};
-const SmallSquare = exports.SmallSquare = {
-  args: {
-    width: '300px',
-    text: 'From',
-    shape: 'round',
-    format: 'MMM DD, YYYY',
-    value: '2023-08-16',
-    disabled: false,
-    labelColor: '#066768'
-  }
-};
-const RegularFormat = exports.RegularFormat = {
-  args: {
-    width: '100%',
-    text: 'From',
-    shape: 'round',
-    format: 'YYYY-MM-DD',
-    value: '2023-08-16',
-    disabled: false,
-    labelColor: '#066768'
-  }
-};

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

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatepickerContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-// import './font.css';
-
-const DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div`
-  width: ${props => props.width};
-  text-align: left;
-  position: relative; 
-  align-items: center;
-  justify-content: center;
-  font-family: Poppins;  
-  font-size: "14px";
-`;

package/dist/stories/components/DownloadProgress/DownloadProgress.js

@@ -1,97 +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 _ErrorIcon = require("../../icons/ErrorIcon");
-var _SucceededIcon = require("../../icons/SucceededIcon");
-var _ProgressBar = _interopRequireDefault(require("../ProgressBar/ProgressBar"));
-var _DownloadProgress = require("./DownloadProgress.style");
-const DownloadProgress = props => {
-  const {
-    title,
-    succeededMessage,
-    failedMessage,
-    downloadStatus,
-    showShadow,
-    progressPercent,
-    refreshInterval,
-    progressBarColor,
-    onTryAgainClick,
-    className
-  } = props;
-  const [DownloadStatus, setDownloadStatus] = (0, _react.useState)(downloadStatus);
-  (0, _react.useEffect)(() => {
-    setDownloadStatus(downloadStatus);
-  }, [downloadStatus]);
-  const displayProgressContent = () => {
-    let content = '';
-    switch (DownloadStatus) {
-      case 'inProgress':
-        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
-          className: "DownloadProgressContentContainer"
-        }, /*#__PURE__*/_react.default.createElement(_ProgressBar.default, {
-          className: "ProgressBar",
-          color: progressBarColor,
-          progressPercent: progressPercent,
-          refreshInterval: refreshInterval,
-          width: "100%"
-        }));
-        break;
-      case 'succeeded':
-        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
-          className: "DownloadProgressContentContainer"
-        }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
-          className: "DownloadProgressStatusMessage_succeeded"
-        }, succeededMessage), /*#__PURE__*/_react.default.createElement(_SucceededIcon.SucceededIcon, {
-          color: "#92CF17",
-          width: "12px",
-          height: "12px"
-        }));
-        break;
-      case 'failed':
-        content = /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressContentContainer, {
-          className: "DownloadProgressContentContainer"
-        }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
-          className: "DownloadProgressStatusMessage_failed"
-        }, failedMessage), /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressStatusMessage, {
-          className: "DownloadProgressStatusMessage_TryAgain",
-          onClick: () => onTryAgainClick({
-            eventName: 'onTryAgainClick'
-          })
-        }, "Try again"), /*#__PURE__*/_react.default.createElement(_ErrorIcon.ErrorIcon, {
-          color: "#FF3949",
-          width: "12px",
-          height: "12px"
-        }));
-        break;
-      default:
-        content = '';
-        break;
-    }
-    return content;
-  };
-  return /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressMainContainer, {
-    className: className,
-    showShadow: showShadow
-  }, /*#__PURE__*/_react.default.createElement(_DownloadProgress.DownloadProgressTitle, {
-    className: "DownloadProgressTitle"
-  }, title), displayProgressContent());
-};
-var _default = exports.default = DownloadProgress;
-DownloadProgress.defaultProps = {
-  title: 'CPG presentation shopper marketing, supplier name ',
-  succeededMessage: 'File Downloaded',
-  failedMessage: 'Something went wrong',
-  downloadStatus: 'inProgress',
-  showShadow: true,
-  progressPercent: 0,
-  refreshInterval: 100,
-  progressBarColor: '#92CF17',
-  onTryAgainClick: () => {},
-  className: 'DownloadProgressMainContainer'
-};

package/dist/stories/components/DownloadProgress/DownloadProgress.stories.js

@@ -1,111 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Succeeded = exports.InProgress = exports.Failed = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _DownloadProgress = _interopRequireDefault(require("./DownloadProgress"));
-var _default = exports.default = {
-  title: 'SAG BI/DownloadProgress',
-  component: _DownloadProgress.default,
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      name: 'title',
-      control: {
-        type: 'text'
-      },
-      description: 'title text ',
-      defaultValue: ''
-    },
-    succeededMessage: {
-      name: 'succeededMessage',
-      control: {
-        type: 'text'
-      },
-      description: 'succeededMessage text ',
-      defaultValue: ''
-    },
-    downloadStatus: {
-      name: 'downloadStatus',
-      control: {
-        type: 'radio'
-      },
-      options: ['inProgress', 'succeeded', 'failed'],
-      description: 'succeededMessage text '
-    },
-    showShadow: {
-      name: 'showShadow',
-      control: {
-        type: 'boolean'
-      },
-      description: 'show Shadow  '
-    },
-    progressPercent: {
-      name: 'progressPercent',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100
-      },
-      description: 'progressPercent - set this value to increase or decrease progress current value - in percent 0% - 100%. Allows control of the progressBar'
-    },
-    refreshInterval: {
-      name: 'refreshInterval',
-      control: {
-        type: 'number'
-      },
-      description: 'refreshInterval - in miliseconds - speed of progress bar'
-    },
-    onTryAgainClick: {
-      action: 'onTryAgainClick',
-      description: 'returns an event onTryAgainClick object when user clicks on a button'
-    },
-    className: {
-      name: 'className',
-      control: {
-        type: 'text'
-      },
-      description: 'title text ',
-      defaultValue: ''
-    }
-  }
-};
-const InProgress = exports.InProgress = {
-  args: {
-    title: 'CPG presentation shopper marketing , supplier name ',
-    succeededMessage: 'File Downloaded',
-    failedMessage: 'Something went wrong',
-    downloadStatus: 'inProgress',
-    showShadow: true,
-    progressPercent: 0,
-    refreshInterval: 100,
-    progressBarColor: '#92CF17'
-  }
-};
-const Succeeded = exports.Succeeded = {
-  args: {
-    title: 'CPG report shopper marketing, supplier name',
-    succeededMessage: 'File Downloaded',
-    failedMessage: 'Something went wrong',
-    downloadStatus: 'succeeded',
-    showShadow: false,
-    progressPercent: 0,
-    refreshInterval: 100,
-    progressBarColor: '#92CF17'
-  }
-};
-const Failed = exports.Failed = {
-  args: {
-    title: 'CPG presentation shopper marketing , supplier name ',
-    succeededMessage: 'File Downloaded',
-    failedMessage: 'Something went wrong',
-    downloadStatus: 'failed',
-    showShadow: false,
-    progressPercent: 0,
-    refreshInterval: 100,
-    progressBarColor: '#92CF17'
-  }
-};