sag_components 1.0.85 → 1.0.86-7.2

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

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PopupContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _FormSelect = require("./FormSelect");
+var _FormInput = require("./FormInput");
+var _Datepicker = require("../Datepicker");
+var _PopupContent = require("./PopupContent.style");
+/* PopupContent */
+const PopupContent = props => {
+  let {
+    width,
+    height,
+    children
+  } = props;
+  const methods = (0, _reactHookForm.useFormContext)();
+  const {
+    rowsData,
+    onClick,
+    onChange,
+    borderColor
+  } = props;
+  const [RowsDataState, setRowsDataState] = (0, _react.useState)(rowsData);
+  (0, _react.useEffect)(() => {
+    //console.log("RowsDataState", RowsDataState);
+  }, [RowsDataState]);
+  const displayRowFields = function (data, height) {
+    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "5px";
+    if (data && data.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_PopupContent.FieldsContainer, {
+        id: "FieldsContainer",
+        height: height,
+        paddingBottom: paddingBottom
+      }, children, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_PopupContent.FieldContainer, {
+        id: "FieldContainer"
+      }, item.inputType === "dropdown" ? /*#__PURE__*/_react.default.createElement(_FormSelect.FormSelect, {
+        id: "Select",
+        name: item.name,
+        control: methods.control,
+        errorMessage: "",
+        label: item.label,
+        required: item.required,
+        placeHolder: item.placeHolder
+        //onChange={item.onChange}
+        ,
+        options: item.dropdownOptions && item.dropdownOptions.length > 0 ? item.dropdownOptions : [],
+        height: "45px",
+        width: "100%"
+      }) : item.inputType === "textbox" ? /*#__PURE__*/_react.default.createElement(_FormInput.FormInput, {
+        id: "FormInput",
+        name: item.name,
+        control: methods.control,
+        borderRadius: "4px",
+        required: item.required,
+        label: item.label,
+        placeholder: item.placeHolder,
+        height: "45px",
+        width: "100%"
+        //onChange={item.onChange}
+        ,
+        borderColor: borderColor
+      }) : item.inputType === "datepicker" ? /*#__PURE__*/_react.default.createElement(_PopupContent.DatePickerContainer, {
+        id: "DatePickerContainer"
+      }, /*#__PURE__*/_react.default.createElement(_Datepicker.Datepicker, {
+        id: "Datepicker",
+        name: item.name,
+        required: item.required,
+        placeholder: item.placeHolder,
+        borderColor: borderColor,
+        format: "MM/DD/YYYY",
+        labelColor: borderColor,
+        onChange: () => {},
+        shape: "square",
+        text: item.label,
+        height: "45px",
+        width: "100%"
+      })) : "")));
+    }
+  };
+  const displayRows = () => {
+    if (RowsDataState && RowsDataState.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_PopupContent.AllFieldsContainer, {
+        id: "AllFieldsContainer"
+      }, RowsDataState.map((row, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayRowFields(row.fieldsArray, height = "160px", "20px"))));
+    }
+  };
+
+  //= ======================================== MAIN RETURN ====================================
+  return /*#__PURE__*/_react.default.createElement(_PopupContent.MainContainer, {
+    id: "MainContainer",
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_PopupContent.PanelContainer, {
+    id: "PanelContainer"
+  }, displayRows()));
+  //= ======================================== MAIN RETURN END====================================
+};
+exports.PopupContent = PopupContent;
+var _default = exports.default = PopupContent;
+PopupContent.defaultProps = {
+  RowsData: [],
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%",
+  onClick: () => {}
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelContainer = exports.MainContainer = exports.FieldsContainer = exports.FieldTitle = exports.FieldContainer = exports.DatePickerContainer = exports.AllFieldsContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), props => {
+  return props.width;
+}, props => {
+  return props.height;
+});
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 0 10px ;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
+const FieldTitle = exports.FieldTitle = _styledComponents.default.h4(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  white-space: wrap;\n  padding: 10px;\n  gap: 20px;\n  width: 100%;\n \n"])));
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n  width: 100%;\n  margin: 0;\n \n"])));
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));

package/dist/stories/components/CampaignTool/PopupFieldsRules.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPopupFieldsRules = void 0;
+var _Email = require("../../utils/regex/Email.regex");
+var _Phone = require("../../utils/regex/Phone.regex");
+var _LatinWithSpaces = require("../../utils/regex/LatinWithSpaces.regex");
+const getPopupFieldsRules = name => {
+  switch (name) {
+    case "AllowInStoreGroups":
+      return {
+        required: false
+      };
+    case "BlockInStoreGroups":
+      return {
+        required: false
+      };
+    case "BrandDescription":
+      return {
+        required: false
+      };
+    case "BrandName":
+      return {
+        required: false
+      };
+    case "Broker":
+      return {
+        required: false
+      };
+    case "Budget":
+      return {
+        required: false
+      };
+    case "Category":
+      return {
+        required: "Category is required"
+      };
+    case "CategoryLevel1":
+      return {
+        required: false
+      };
+    case "CategoryManager":
+      return {
+        required: false
+      };
+    case "ConditionMinBasketValue":
+      return {
+        required: false
+      };
+    case "ConditionMinQuantityPurchased":
+      return {
+        required: false
+      };
+    case "ConsiderStoreAvailability":
+      return {
+        required: false
+      };
+    case "ContactEmail":
+      return {
+        required: "Contact Email is required",
+        pattern: {
+          value: _Email.EmailRegex,
+          message: "invalid contact email address"
+        }
+      };
+    case "ContactName":
+      return {
+        required: "Contact Name is required",
+        maxLength: {
+          value: 17,
+          message: "Maximum 17 letters"
+        },
+        minLength: {
+          value: 2,
+          message: "Contact Name should include at least two letters"
+        },
+        pattern: {
+          value: _LatinWithSpaces.OnlyLatinWithSpacesRegex,
+          message: "Only english letters allowed"
+        }
+      };
+    case "ContactPhone":
+      return {
+        required: false,
+        pattern: {
+          value: _Phone.PhoneRegex,
+          message: "Please provide a valid phone number"
+        }
+      };
+    case "DescriptionLowCase":
+      return {
+        required: false
+      };
+    case "DiscountType":
+      return {
+        required: false
+      };
+    case "FundationSource":
+      return {
+        required: "Fundation Source is required"
+      };
+    case "Image":
+      return {
+        required: false
+      };
+    case "MaxIssuances":
+      return {
+        required: false
+      };
+    case "MaxTransactions":
+      return {
+        required: false
+      };
+    case "OfferInventory":
+      return {
+        required: false
+      };
+    case "PurchaseOrder":
+      return {
+        required: false
+      };
+    case "PurchaseOrderPDN":
+      return {
+        required: false
+      };
+    case "RedemptionID":
+      return {
+        required: false
+      };
+    case "RewardQuantity":
+      return {
+        required: false
+      };
+    case "SummaryPodHeader":
+      return {
+        required: false
+      };
+    case "Supplier":
+      return {
+        required: "Supplier is required"
+      };
+    case "SupplierOfferID":
+      return {
+        required: false
+      };
+    case "TargetAudienceType":
+      return {
+        required: false
+      };
+    case "TargetingNotes":
+      return {
+        required: false
+      };
+    case "TypeReward":
+      return {
+        required: false
+      };
+    case "VendorID":
+      return {
+        required: false
+      };
+    default:
+      return "";
+  }
+};
+exports.getPopupFieldsRules = getPopupFieldsRules;

package/dist/stories/components/CampaignTool/Table.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Table = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Table = require("./Table.style");
+const Table = props => {
+  const {
+    tableKey,
+    data,
+    width,
+    height,
+    onCheckAllInput,
+    onSortClick,
+    onRowClick,
+    onRowInputClick,
+    onPaginationClick,
+    actionsColumn,
+    sizingTable,
+    showPagination,
+    rangePagination
+  } = props;
+  const [sortBy, setSortBy] = (0, _react.useState)(null);
+  const [sortOrder, setSortOrder] = (0, _react.useState)('asc');
+  const [resizing, setResizing] = (0, _react.useState)(false);
+  const [resizeColumn, setResizeColumn] = (0, _react.useState)(null);
+  const checkedRef = (0, _react.useRef)([]);
+  const [checkEvent, setCheckEvent] = (0, _react.useState)({
+    isSelectAll: false,
+    selected: [],
+    unselected: []
+  });
+  const [activePage, setActivePage] = (0, _react.useState)(1);
+  const [arrow, setArrow] = (0, _react.useState)(null);
+  const handleSort = (event, columnName) => {
+    if (!event.target.classList.contains('dragger')) {
+      setSortBy(columnName);
+      setSortOrder(prevSortOrder => prevSortOrder === 'asc' ? 'desc' : 'asc');
+      setArrow(prevArrow => prevArrow === '⭣' ? '⭡' : '⭣');
+      onSortClick({
+        sortType: sortOrder,
+        column: columnName,
+        data: sortedData
+      });
+    }
+  };
+
+  // the Server do the sorting so this function used for displaying Action data
+  const sortedData = [...data].sort((a, b) => {
+    if (sortOrder === 'asc') {
+      return a[sortBy] > b[sortBy] ? 1 : -1;
+    }
+    return a[sortBy] < b[sortBy] ? 1 : -1;
+  });
+  const handleSelectAllChange = event => {
+    setCheckEvent({
+      isSelectAll: event.target.checked,
+      selected: [],
+      unselected: []
+    });
+    checkedRef.current.map(item => {
+      item.checked = event.target.checked;
+    });
+  };
+  const m_pos = (0, _react.useRef)(null);
+  const handleMouseDown = (e, columnName) => {
+    m_pos.current = e.clientX;
+    setResizing(true);
+    setResizeColumn(columnName);
+  };
+  const handleMouseMove = e => {
+    if (resizing) {
+      const th = document.querySelector("th[data-column=\"".concat(resizeColumn, "\"]"));
+      const dx = e.clientX - m_pos.current;
+      m_pos.current = e.clientX;
+      th.style.width = "".concat(parseInt(getComputedStyle(th, '').width) + dx, "px");
+    }
+  };
+  const handleMouseUp = () => {
+    setResizing(false);
+    setResizeColumn(null);
+  };
+  const onRowClickHandler = (event, row) => {
+    if (event.target.type !== 'checkbox') {
+      onRowClick(row);
+    }
+  };
+  const handleCheckboxChange = (event, row) => {
+    if (event.target.checked) {
+      const updatedUnSelected = checkEvent.unselected.filter(item => item.key !== row.key);
+      setCheckEvent({
+        ...checkEvent,
+        unselected: updatedUnSelected,
+        selected: [...checkEvent.selected, row]
+      });
+    } else {
+      const updatedSelected = checkEvent.selected.filter(item => item.key !== row.key);
+      setCheckEvent({
+        ...checkEvent,
+        unselected: [...checkEvent.unselected, row],
+        selected: updatedSelected
+      });
+    }
+  };
+  const onPaginationClickHandler = (event, page) => {
+    setActivePage(page);
+    onPaginationClick(event, page);
+  };
+  (0, _react.useEffect)(() => {
+    onCheckAllInput(checkEvent);
+  }, [checkEvent]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('mousemove', handleMouseMove, false);
+    document.addEventListener('mouseup', handleMouseUp, false);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove, false);
+      document.removeEventListener('mouseup', handleMouseUp, false);
+    };
+  }, [resizing]);
+  const pages = Array.from({
+    length: rangePagination
+  }, (_, index) => index + 1);
+  return /*#__PURE__*/_react.default.createElement(_Table.TableWrapper, {
+    key: tableKey
+  }, /*#__PURE__*/_react.default.createElement(_Table.TableTag, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Table.Thead, null, /*#__PURE__*/_react.default.createElement("tr", null, actionsColumn && /*#__PURE__*/_react.default.createElement("th", {
+    className: "actions-th"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    onChange: handleSelectAllChange
+  })), Object.keys(data[0]).map(column => /*#__PURE__*/_react.default.createElement("th", {
+    key: column,
+    "data-column": column,
+    onClick: event => handleSort(event, column)
+  }, /*#__PURE__*/_react.default.createElement("span", null, column), sortBy === column && /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: arrow
+    }
+  }), sizingTable && /*#__PURE__*/_react.default.createElement(_Table.Dragger, {
+    className: "dragger",
+    onMouseDown: e => handleMouseDown(e, column)
+  }))))), /*#__PURE__*/_react.default.createElement(_Table.Tbody, null, data.map(row => /*#__PURE__*/_react.default.createElement("tr", {
+    key: row.key,
+    onClick: event => onRowClickHandler(event, row)
+  }, actionsColumn && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("input", {
+    ref: el => checkedRef.current[row.key] = el,
+    type: "checkbox",
+    onChange: event => handleCheckboxChange(event, row)
+  })), Object.keys(row).map(column => /*#__PURE__*/_react.default.createElement("td", {
+    key: column
+  }, row[column])))))), showPagination && /*#__PURE__*/_react.default.createElement(_Table.Pagination, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "double-arrow",
+    onClick: event => onPaginationClickHandler(event, 1)
+  }, "\xAB")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "single-arrow",
+    onClick: event => onPaginationClickHandler(event, activePage - 1)
+  }, "\u2039")), pages.map(page => /*#__PURE__*/_react.default.createElement("li", {
+    key: page
+  }, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: page === activePage ? 'active' : '',
+    onClick: event => onPaginationClickHandler(event, page)
+  }, page))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "single-arrow",
+    onClick: event => onPaginationClickHandler(event, activePage + 1)
+  }, "\u203A")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "double-arrow",
+    onClick: event => onPaginationClickHandler(event, pages.length)
+  }, "\xBB"))));
+};
+exports.Table = Table;
+var _default = exports.default = Table;
+Table.defaultProps = {
+  tableKey: '1',
+  data: [{
+    key: '',
+    name: '',
+    age: 2
+  }],
+  width: '100%',
+  height: 'auto',
+  onCheckAllInput: () => {},
+  onSortClick: () => {},
+  onRowClick: () => {},
+  onRowInputClick: () => {},
+  onPaginationClick: () => {},
+  showPagination: true,
+  sizingTable: true,
+  actionsColumn: true,
+  rangePagination: 5
+};

package/dist/stories/components/CampaignTool/Table.style.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+/* eslint-disable import/prefer-default-export */
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  background-color: white;\n"])));
+const TableTag = exports.TableTag = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: ", ";\n  height: ", ";\n  margin-bottom: 15px;\n    th,\n    td {\n        position: relative;\n        font-weight: 400;\n        border: 1px solid #ddd;\n        padding: 8px;\n    }\n"])), props => props.width, props => props.height);
+const Thead = exports.Thead = _styledComponents.default.thead(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: #000000;\n    tr {\n        > th {\n            position: relative;\n            &.actions-th,\n            &:last-of-type {\n                > div {\n                    display: none;\n                }\n            }\n            \n            &.actions-th {\n                width: 22px;\n            }\n        }\n    }\n"])));
+const Tbody = exports.Tbody = _styledComponents.default.tbody(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    tr {\n        &:nth-child(even) {\n            background-color: #f2f2f2;\n        }\n        &:hover {\n            background-color: #ddd;\n        }\n    }\n"])));
+const Dragger = exports.Dragger = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: 5px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    cursor: col-resize;\n"])));
+const Pagination = exports.Pagination = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    gap: 5px;\n"])));
+const PaginationButton = exports.PaginationButton = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-block;\n    padding: 8px 12px;\n    background-color: #ffffff;\n    border: 1px solid #ccc;\n    text-decoration: none;\n    color: #333;\n    border-radius: 4px;\n    cursor: pointer;\n    &:hover, &:focus {\n      background-color: #e0e0e0;\n    }\n    &.active {\n        background-color: #aaa;\n    }\n"])));

package/dist/stories/components/Card/Card.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = require("./Card.style");
+const Card = props => {
+  const {
+    data,
+    cardTitle,
+    buttonText,
+    onCardButtonClick,
+    width,
+    height
+  } = props;
+  const onCardButtonClickHandle = e => {
+    onCardButtonClick(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Card.CardFrame, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardDetails, null, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, null, cardTitle), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum minima "), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "commodi optio molesti"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "optio molesti")), /*#__PURE__*/_react.default.createElement(_Card.SegmentsContainer, {
+    rows: data.lenght
+  }, data.map(segment =>
+  /*#__PURE__*/
+  // TODO: make icons
+  _react.default.createElement(_Card.Segment, null, segment.value, /*#__PURE__*/_react.default.createElement("br", null), segment.label))), /*#__PURE__*/_react.default.createElement(_Card.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Card.Button, {
+    onClick: e => onCardButtonClickHandle(e)
+  }, buttonText)));
+};
+var _default = exports.default = Card;
+Card.defaultProps = {
+  data: [{
+    key: '1',
+    icon: 'cart',
+    label: 'Products',
+    value: 335
+  }, {
+    key: '2',
+    icon: 'gift',
+    label: 'Brands',
+    value: 161
+  }, {
+    key: '3',
+    icon: 'label',
+    label: 'Offers',
+    value: 223
+  }, {
+    key: '4',
+    icon: 'truck',
+    label: 'Suppliers',
+    value: 246
+  }, {
+    key: '5',
+    icon: '',
+    label: 'Total budget',
+    value: 45
+  }, {
+    key: '6',
+    icon: '',
+    label: 'Self-funded budget',
+    value: 146
+  }],
+  cardTitle: 'March 2024',
+  buttonText: 'Campaign Details',
+  onCardButtonClick: () => {},
+  width: '100%',
+  height: 'auto'
+};

package/dist/stories/components/Card/Card.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("./Card"));
+const data = [{
+  key: '1',
+  icon: 'cart',
+  label: 'Products',
+  value: 335
+}, {
+  key: '2',
+  icon: 'gift',
+  label: 'Brands',
+  value: 161
+}, {
+  key: '3',
+  icon: 'label',
+  label: 'Offers',
+  value: 223
+}, {
+  key: '4',
+  icon: 'truck',
+  label: 'Suppliers',
+  value: 246
+}, {
+  key: '5',
+  icon: '',
+  label: 'Total budget',
+  value: 45
+}, {
+  key: '6',
+  icon: '',
+  label: 'Self-funded budget',
+  value: 146
+}];
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Card',
+  component: _Card.default,
+  tags: ['autodocs'],
+  argTypes: {
+    cardTitle: {
+      name: 'cardTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'Card title'
+    },
+    buttonText: {
+      name: 'buttonText',
+      control: {
+        type: 'text'
+      },
+      description: 'Button text'
+    },
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    },
+    onCardButtonClick: {
+      name: 'Button event',
+      action: 'onClick',
+      description: 'Click on a side big button'
+    }
+
+    // showPagination: {
+    //   name: 'Show Pagination',
+    //   control: { type: 'boolean' },
+    //   description: 'hide/show pagination',
+    //   defaultValue: true,
+    // },
+  }
+};
+const SingleCard = exports.SingleCard = {
+  args: {
+    data
+  }
+};