contentoh-components-library 0.1.1 → 8.0.0

package/dist/components/molecules/PayMethod/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PayMethod = void 0;
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _Card = require("../../atoms/Card");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _masterCardIcon = _interopRequireDefault(require("../../../assets/images/card/masterCardIcon.svg"));
+
+var PayMethod = function PayMethod(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    key: "pay"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "master"
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    headerType: "input-name-header",
+    text: "Agrega tarjeta de credito"
+  }), /*#__PURE__*/React.createElement(_Card.Card, {
+    cardIcon: _masterCardIcon.default,
+    altText: "master-card-icon"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-number"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Número de tarjeta de credito",
+    inputPlaceHolder: "1234 5678 1234 5678"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-data"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Nombre del titular",
+    inputPlaceHolder: "Bart Simpson"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Expira",
+    inputPlaceHolder: "22/27"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "CVV",
+    inputPlaceHolder: "***"
+  })));
+};
+
+exports.PayMethod = PayMethod;

package/dist/components/molecules/PayMethod/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 2px solid ", ";\n  border-radius: 7px;\n  padding: 15px 25px;\n\n  .card-number{ \n    & + * {\n        margin-top: 5px;\n      }\n  }\n  .master {\n    display: flex;\n    justify-content: space-between;\n  }\n  .card-data {\n    display: flex;\n    justify-content: space-between;\n    .input-container {\n      flex: 1;\n      &:first-child {\n        flex: 3;\n      }\n      & + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/molecules/PlanSelection/PlanSelection.stories.js

@@ -7,9 +7,6 @@ exports.default = exports.PlanSelectionDefault = void 0;
 
 var _index = require("./index");
 
-// import { number } from "prop-types";
-// import { GeneralTextBox } from "../../atoms/GeneralTextBox";
-// import { GeneralTextBoxDefault } from "../../atoms/GeneralTextBox/GeneralTextBox.stories";
 var _default = {
   title: "Components/molecules/PlanSelection",
   component: _index.PlanSelection

package/dist/components/molecules/PlanSelection/index.js

@@ -22,7 +22,7 @@ var PlanSelection = function PlanSelection(_ref) {
     setbuttonActive(true);
   };
 
-  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection.map(function (plan, index) {
+  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
     return /*#__PURE__*/React.createElement(_index.GeneralTextBox, {
       className: "button-plan",
       onClick: function onClick(e) {

package/dist/components/molecules/PlanSelection/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  row-gap: 30px;\n  column-gap: 30px;\n  grid-template-columns: repeat(3, 1fr);\n  button:nth-child(4) {\n    grid-column-start: 1;\n    grid-column-end: 4;\n  }\n  & + * {\n    margin-top: 90px;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  row-gap: 15px;\n  column-gap: 15px;\n  grid-template-columns: repeat(3, 1fr);\n  button:nth-child(4) {\n    grid-column-start: 1;\n    grid-column-end: 4;\n  }\n  & + * {\n    margin-top: 90px;\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/ProductNameHeader/index.js

@@ -19,7 +19,6 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
   var productName = _ref.productName,
       statusType = _ref.statusType,
       percent = _ref.percent,
-      backgroundColor = _ref.backgroundColor,
       priority = _ref.priority,
       date = _ref.date;
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
@@ -29,7 +28,7 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
     statusType: statusType
   }), /*#__PURE__*/React.createElement(_index3.ProgressBar, {
     percent: percent,
-    backgroundColor: backgroundColor
+    progressBarType: statusType
   }), /*#__PURE__*/React.createElement(_index4.PriorityFlag, {
     priority: priority
   }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {

package/dist/components/molecules/ProductNotification/ProductNotification.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNotificationDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ProductNotification",
+  component: _index.ProductNotification
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ProductNotification, args);
+};
+
+var ProductNotificationDefault = Template.bind({});
+exports.ProductNotificationDefault = ProductNotificationDefault;
+ProductNotificationDefault.args = {
+  notification: false
+};

package/dist/components/molecules/ProductNotification/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNotification = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/Avatar/index");
+
+var _react = require("react");
+
+var _MenuNotification = require("../../atoms/MenuNotification");
+
+var _productNotification = _interopRequireDefault(require("../../../assets/images/productNotification/productNotification.svg"));
+
+var ProductNotification = function ProductNotification(_ref) {
+  var notification = _ref.notification;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest("#menu-notification") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  var content = [{
+    notificationType: "productComment",
+    label: "Asignaron el producto 23441244"
+  }, {
+    notificationType: "productAssignation",
+    label: "Ajustaron el nombre del producto"
+  }, {
+    notificationType: "productAssignation",
+    label: "Agregaron comentario en producto 123"
+  }];
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setShowMenu(!showMenu);
+
+      if (showMenu) {
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: notification && "new-notification"
+  }, /*#__PURE__*/React.createElement(_index.Avatar, {
+    image: _productNotification.default,
+    imageType: "big-image",
+    altText: "Notification Picture"
+  }), showMenu && /*#__PURE__*/React.createElement(_MenuNotification.MenuNotification, {
+    content: content
+  }));
+};
+
+exports.ProductNotification = ProductNotification;

package/dist/components/molecules/ProductNotification/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 3px;\n  width: 50px;\n  height: 50px;\n  border: none;\n  position: relative;\n  &.new-notification::before {\n    content: \"\";\n    width: 10px;\n    height: 10px;\n    display: block;\n    border-radius: 100%;\n    background-color: #ff0094;\n    position: absolute;\n    left: 56%;\n    top: 11px;\n    z-index: 1;\n    animation: pulse 0.4s alternate infinite;\n    @keyframes pulse {\n      from {\n        transform: scale(1);\n      }\n      to {\n        transform: scale(1.1);\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/molecules/ProfileHeader/ProfileHeader.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileHeaderDefault = void 0;
+
+var _index = require("./index");
+
+var _profilePicture = _interopRequireDefault(require("../../../assets/images/profileHeader/profilePicture.svg"));
+
+var _default = {
+  title: "Components/molecules/ProfileHeader",
+  component: _index.ProfileHeader
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ProfileHeader, args);
+};
+
+var ProfileHeaderDefault = Template.bind({});
+exports.ProfileHeaderDefault = ProfileHeaderDefault;
+ProfileHeaderDefault.args = {
+  customerProfileImg: _profilePicture.default,
+  customerName: "Name default",
+  customer: "Customer default"
+};

package/dist/components/molecules/ProfileHeader/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfileHeader = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _index2 = require("../../atoms/Avatar/index");
+
+var _react = require("react");
+
+var _MenuProfile = require("../../atoms/MenuProfile");
+
+var ProfileHeader = function ProfileHeader(_ref) {
+  var customerProfileImg = _ref.customerProfileImg,
+      customerName = _ref.customerName,
+      customer = _ref.customer;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest("#menu-profile") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  var MenuInfo = {
+    user: "Administrador"
+  };
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setShowMenu(!showMenu);
+
+      if (showMenu) {
+        document.removeEventListener("click", closeMenu, false);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(_index2.Avatar, {
+    image: customerProfileImg,
+    imageType: "profile-image",
+    altText: "Profile Picture"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "user-info"
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "retailer-name-header",
+    text: customerName,
+    color: _variables.GlobalColors.original_magenta
+  }), customer && /*#__PURE__*/React.createElement("p", null, customer)), showMenu && /*#__PURE__*/React.createElement(_MenuProfile.MenuProfile, {
+    user: MenuInfo.user
+  }));
+};
+
+exports.ProfileHeader = ProfileHeader;

package/dist/components/molecules/ProfileHeader/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: 25px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px 20px 6px 5px;\n  width: 195px;\n  height: 50px;\n  border: none;\n  position: relative;\n  .profile-image {\n    & + * {\n      margin-left: 12px;\n    }\n  }\n  .user-info {\n    text-align: right;\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-style: normal;\n      font-weight: normal;\n      font-size: 12px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/molecules/RetailerSelector/RetailerSelector.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerSelectorDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/RetailerSelector",
+  component: _index.RetailerSelector
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RetailerSelector, args);
+};
+
+var RetailerSelectorDefault = Template.bind({});
+exports.RetailerSelectorDefault = RetailerSelectorDefault;
+RetailerSelectorDefault.args = {
+  retailers: [{
+    id: 2,
+    name: "Walmart Mercancías Generales",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 3,
+    name: "Sam´s Club",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 14,
+    name: "Maskota y Petsy",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }]
+};

package/dist/components/molecules/RetailerSelector/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerSelector = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _react = require("react");
+
+var _AsignationOption = require("../../atoms/AsignationOption");
+
+var RetailerSelector = function RetailerSelector(_ref) {
+  var retailers = _ref.retailers,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      retailersPanel = _useState2[0],
+      setRetailersPanel = _useState2[1];
+
+  var closeRetailersPanel = function closeRetailersPanel(e) {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    id: "retailers-assignation"
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.image,
+    altText: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
+    imageType: "medium-image",
+    onClick: function onClick() {
+      retailers.length > 1 && setRetailersPanel(!retailersPanel);
+      if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
+    }
+  }), retailersPanel && /*#__PURE__*/React.createElement("div", {
+    className: "retailers-panel"
+  }, retailers.map(function (retailer, index) {
+    return /*#__PURE__*/React.createElement(_AsignationOption.AsignationOption, {
+      key: "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name),
+      profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
+      imageType: "medium-image",
+      asignationType: null,
+      name: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+      team: retailer === null || retailer === void 0 ? void 0 : retailer.team,
+      onClick: function onClick() {
+        setActiveRetailer(retailer);
+        document.removeEventListener("click", closeRetailersPanel, false);
+        setRetailersPanel(false);
+      }
+    });
+  })));
+};
+
+exports.RetailerSelector = RetailerSelector;

package/dist/components/molecules/RetailerSelector/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+
+exports.Container = Container;

package/dist/components/molecules/SidebarNotification/SidebarNotification.stories.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SidebarNotificationDefault = void 0;
+
+var _index = require("./index");
+
+var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
+
+var _default = {
+  title: "Components/molecules/SidebarNotification",
+  component: _index.SidebarNotification,
+  argTypes: {
+    showSidebar: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+var showSidebar = false;
+
+var setShowSidebar = function setShowSidebar(value) {
+  showSidebar = value;
+};
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.SidebarNotification, args);
+};
+
+var SidebarNotificationDefault = Template.bind({});
+exports.SidebarNotificationDefault = SidebarNotificationDefault;
+SidebarNotificationDefault.args = {
+  array: [{
+    dates: "2/18/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/17/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/16/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/14/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/17/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }],
+  setShowSidebar: setShowSidebar,
+  showSidebar: showSidebar
+};