@mohamed-karawia/library 0.1.12 → 0.1.16

package/dist/stories/Chat/Chat.js

@@ -25,42 +25,21 @@ var _RichTextInput = _interopRequireDefault(require("../Common Inputs/RichTextIn
 
 var _templateObject;
 
-var _excluded = ["data", "title", "titleColor", "headerBackground", "headerPadding", "cardBackgroundColor", "cardTitleColor", "textColor", "users"];
+var _excluded = ["data", "title", "cardBackgroundColor", "textColor", "users"];
 
 var Chat = function Chat(_ref) {
   var data = _ref.data,
       title = _ref.title,
-      titleColor = _ref.titleColor,
-      headerBackground = _ref.headerBackground,
-      headerPadding = _ref.headerPadding,
       cardBackgroundColor = _ref.cardBackgroundColor,
-      cardTitleColor = _ref.cardTitleColor,
       textColor = _ref.textColor,
       users = _ref.users,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(Container, {
-    cardBackgroundColor: cardBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
-    title: title,
-    titleColor: titleColor,
-    controls: _fakeData.controls,
-    controlsStyles: {
-      iconColor: 'white',
-      maxIcons: 4,
-      dropdownBackground: 'white'
-    },
-    headerBackground: headerBackground,
-    padding: headerPadding
-  }), /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: title,
     type: "flat",
     data: data,
-    cardStyle: "card-style-8",
-    customCardStyles: {
-      cardBackgroundColor: cardBackgroundColor,
-      cardTitleColor: cardTitleColor,
-      cardDescriptionColor: textColor
-    }
-  }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
+    cardStyle: "card-style-8"
+  }, props)), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
     users: users
   }));
 };

package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js

@@ -77,7 +77,7 @@ var AddQuestion = function AddQuestion(props) {
   }));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n     padding: 10px;\n     background-color: 'white';\n     display: flex;\n     flex-direction: column;\n     \n     &(:first-child){\n         align-self: center;\n     }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n     padding: 10px;\n     background-color: 'white';\n     display: flex;\n     flex-direction: column;\n     \n     &(:first-child){\n         align-self: center;\n     }\n"])));
 
 var _default = AddQuestion;
 exports.default = _default;

package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js

@@ -41,25 +41,15 @@ var DetailedForm = function DetailedForm(_ref) {
     title: userName,
     img: userImg,
     cardImageRadius: "100"
-  })), /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  })), /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "Form",
     data: questions,
     type: "flat",
     cardStyle: "card-style-3",
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        dropdownBackground: 'black',
-        dropdownFontColor: 'white',
-        dropdownItemHoverColor: '#FE1744'
-      }
-    },
     customCardStyles: {
       cardPadding: 10
     }
-  }), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
+  }, props)), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
     onClick: onAccept
   }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, {
     onClick: onDecline

package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js

@@ -18,27 +18,12 @@ var _excluded = ["data"];
 var ViewForms = function ViewForms(_ref) {
   var data = _ref.data,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
-    listTitle: "Submitted Form",
+  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: "Submitted Forms",
     data: data,
     cardStyle: "card-style-9",
-    type: "sectioned",
-    sectionHeaderStyles: {
-      cardTitleColor: 'white',
-      cardBackgroundColor: 'black',
-      cardPadding: 10
-    },
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        dropdownBackground: 'black',
-        dropdownFontColor: 'white',
-        dropdownItemHoverColor: '#FE1744'
-      }
-    }
-  });
+    type: "sectioned"
+  }, props));
 };
 
 ViewForms.defaultProps = {};

package/dist/stories/Events/Event/Event.js

@@ -27,18 +27,14 @@ var Event = function Event(_ref) {
       titleSize = _ref.titleSize,
       dateColor = _ref.dateColor,
       dateSize = _ref.dateSize,
-      headerBackground = _ref.headerBackground,
-      headerTitleColor = _ref.headerTitleColor,
       discColor = _ref.discColor,
-      discSize = _ref.discSize;
+      discSize = _ref.discSize,
+      headerStyles = _ref.headerStyles;
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
-    title: "Event",
-    padding: 10,
-    headerBackground: headerBackground,
-    titleColor: headerTitleColor
-  }), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title
+  }, headerStyles)), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
     src: cover
   })), /*#__PURE__*/_react.default.createElement(Details, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(Title, {
     size: titleSize,

package/dist/stories/Events/EventsList/EventsList.js

@@ -85,34 +85,17 @@ var EventsList = function EventsList(_ref) {
     props.onAddEvent(event);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Events",
     data: events,
     type: "flat",
     cardStyle: "card-style-11",
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
-    customCardStyles: {
-      iconColor: iconColor,
-      cardTitleFontSize: cardTitleFontSize,
-      cardTitleColor: cardTitleColor,
-      cardPadding: cardPadding,
-      controlsStyles: {
-        iconColor: '#FE1744'
-      }
-    },
     listControls: listControls,
     cardControls: cardControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
     cardIconClicked: cardIconClicked
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

package/dist/stories/Library/Folders/Folders.js

@@ -27,7 +27,7 @@ var _CreateFolder = _interopRequireDefault(require("../CreateFolder/CreateFolder
 
 var _templateObject;
 
-var _excluded = ["folders", "folderTitle", "columnsNumber", "columnGap", "rowGap", "cardClicked", "iconColor", "headerStyles"];
+var _excluded = ["folders", "folderTitle", "columnsNumber", "columnGap", "rowGap", "cardClicked", "iconColor"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -52,7 +52,6 @@ var Folders = function Folders(_ref) {
       rowGap = _ref.rowGap,
       cardClicked = _ref.cardClicked,
       iconColor = _ref.iconColor,
-      headerStyles = _ref.headerStyles,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -89,7 +88,6 @@ var Folders = function Folders(_ref) {
     data: folders,
     type: "flat",
     cardStyle: "card-style-10",
-    headerStyles: headerStyles,
     columnsNumber: columnsNumber,
     galleryColumnGap: columnGap,
     galleryRowGap: rowGap,
@@ -98,11 +96,7 @@ var Folders = function Folders(_ref) {
     cardClicked: cardClicked,
     cardIconClicked: cardIconClicked,
     cardControls: cardControls,
-    rowsHeight: 140,
-    customCardStyles: {
-      cardPadding: 10,
-      iconColor: iconColor
-    }
+    rowsHeight: 140
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -119,7 +113,7 @@ var Folders = function Folders(_ref) {
   })));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: black;\n"])));
 
 Folders.defaultProps = {};
 var _default = Folders;

package/dist/stories/Library/Notes/Notes.js

@@ -85,34 +85,17 @@ var Notes = function Notes(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Notes",
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
-    customCardStyles: {
-      iconColor: iconColor,
-      cardTitleFontSize: cardTitleFontSize,
-      cardTitleColor: cardTitleColor,
-      cardPadding: cardPadding,
-      controlsStyles: {
-        iconColor: '#FE1744'
-      }
-    },
     listControls: listControls,
     cardControls: cardControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
     cardIconClicked: cardIconClicked
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

package/dist/stories/Library/ViewNote/ViewNote.js

@@ -7,20 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _EditorComponent = _interopRequireDefault(require("../../Common Inputs/EditorComponent/EditorComponent"));
 
-var ViewNote = function ViewNote() {
-  var data = {
-    blocks: [{
-      type: "header",
-      data: {
-        text: "New Note",
-        level: 1
-      }
-    }]
-  };
+var _excluded = ["data"];
+
+var ViewNote = function ViewNote(_ref) {
+  var data = _ref.data,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_EditorComponent.default, {
     data: data
   });

package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js

@@ -79,17 +79,9 @@ var ViewAlbum = function ViewAlbum(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Album",
     data: album,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     cardStyle: "card-style-7",
     type: "flat",
     cardClicked: function cardClicked(index) {
@@ -98,15 +90,8 @@ var ViewAlbum = function ViewAlbum(_ref) {
     iconClicked: onIconClicked,
     listControls: listControls,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: {
-      cardBackgroundColor: cardBackgroundColor,
-      cardTitleColor: songTitleColor,
-      controlsStyles: {
-        iconColor: 'black'
-      }
-    }
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    cardIconClicked: cardIconClicked
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js

@@ -27,7 +27,7 @@ var _ai = require("react-icons/ai");
 
 var _templateObject;
 
-var _excluded = ["albums", "cardBackgroundColor", "albumTitleColor", "descColor"];
+var _excluded = ["albums", "albumTitleColor", "descColor"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -46,13 +46,11 @@ var galleryControls = [{
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      cardBackgroundColor = _ref.cardBackgroundColor,
       albumTitleColor = _ref.albumTitleColor,
       descColor = _ref.descColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var cardStyles = {
     darkOnHover: true,
-    cardBackgroundColor: cardBackgroundColor,
     cardTitleColor: albumTitleColor,
     descColor: descColor,
     controlsStyles: {
@@ -101,29 +99,17 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Music Albums",
+    galleryTitle: props.title,
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     columnsNumber: 3,
     galleryColumnGap: 10,
     galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardClicked: function cardClicked() {
-      return null;
-    },
-    cardIconClicked: cardIconClicked,
-    customCardStyles: cardStyles
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -140,7 +126,7 @@ var ViewAlbums = function ViewAlbums(_ref) {
   })));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
 ViewAlbums.defaultProps = {
   cardBackgroundColor: 'white'

package/dist/stories/Navbar/Navbar.js

@@ -25,21 +25,13 @@ var _CustomAutoComplete = _interopRequireDefault(require("../Common Inputs/Custo
 
 var _BaseMaterial = _interopRequireDefault(require("../Containers/BaseMaterial"));
 
-var _homeSvgrepoCom = _interopRequireDefault(require("../assets/home-svgrepo-com.svg"));
+var _ai = require("react-icons/ai");
 
-var _compassSvgrepoCom = _interopRequireDefault(require("../assets/compass-svgrepo-com.svg"));
+var _md = require("react-icons/md");
 
-var _addSvgrepoCom = _interopRequireDefault(require("../assets/add-svgrepo-com.svg"));
+var _bi = require("react-icons/bi");
 
-var _basketSvgrepoCom = _interopRequireDefault(require("../assets/basket-svgrepo-com.svg"));
-
-var _bellSvgrepoCom = _interopRequireDefault(require("../assets/bell-svgrepo-com.svg"));
-
-var _medalSvgrepoCom = _interopRequireDefault(require("../assets/medal-svgrepo-com.svg"));
-
-var _settingsSvgrepoCom = _interopRequireDefault(require("../assets/settings-svgrepo-com.svg"));
-
-var _searchSvgrepoCom = _interopRequireDefault(require("../assets/search-svgrepo-com.svg"));
+var _io = require("react-icons/io5");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
@@ -132,18 +124,12 @@ var Navbar = function Navbar(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, null, /*#__PURE__*/_react.default.createElement(NavBar, {
     color: navbarColor
-  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillHome, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _homeSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_md.MdAddBox, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _addSvgrepoCom.default,
-    size: iconSize
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '200px'
@@ -153,27 +139,17 @@ var Navbar = function Navbar(_ref) {
     styles: {
       color: 'blue'
     }
-  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillCompass, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _compassSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_bi.BiMedal, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _medalSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_io.IoBasketSharp, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _basketSvgrepoCom.default,
-    size: iconSize
-  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _searchSvgrepoCom.default,
-    size: iconSize
+  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineSearch, {
+    color: iconBackgroundColor
   }), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: initialValues,
     onSubmit: function onSubmit(values) {
@@ -223,18 +199,12 @@ var Navbar = function Navbar(_ref) {
       }
     },
     menuIsOpen: menuOpen
-  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillSetting, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _settingsSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillBell, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _bellSvgrepoCom.default,
-    size: iconSize
   }))))));
 };
 
@@ -257,7 +227,7 @@ var UniverseContainer = (0, _styledComponents.default)('div')({
   'justify-content': 'flex-start'
 });
 
-var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n  background-color: ", ";\n"])), function (props) {
+var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  \n  \n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n\n  & svg {\n    width: ", ";\n  };\n  height: ", ";\n  fill: ", ";\n"])), function (props) {
   return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';
 }, function (props) {
   return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';

package/dist/stories/Pages/Chat/Chat.js

@@ -81,7 +81,19 @@ var Chat = function Chat(_ref) {
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_Chat.default, {
     data: data,
-    users: users
+    users: users,
+    title: 'Chat',
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#00ADC4',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      cardTitleColor: '#00ADC4'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js

@@ -88,7 +88,17 @@ var DetailedForm = function DetailedForm(props) {
   }, /*#__PURE__*/_react.default.createElement(_DetailedForm.default, {
     userName: "User Name",
     userImg: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
-    questions: questions
+    questions: questions,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        dropdownBackground: 'black',
+        dropdownFontColor: 'white',
+        dropdownItemHoverColor: '#FE1744'
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Enrollment/Forms/Forms.js

@@ -83,6 +83,14 @@ var Forms = function Forms(props) {
       forms = _useState2[0],
       setForms = _useState2[1];
 
+  var cardClicked = function cardClicked(index, cardProps) {
+    console.log(cardProps);
+  };
+
+  var onAction = function onAction(action, index) {
+    console.log(action);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -117,7 +125,24 @@ var Forms = function Forms(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_ViewForms.default, {
-    data: forms
+    data: forms,
+    cardClicked: cardClicked,
+    cardIconClicked: onAction,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        dropdownBackground: 'black',
+        dropdownFontColor: 'white',
+        dropdownItemHoverColor: '#FE1744'
+      }
+    },
+    sectionHeaderStyles: {
+      cardTitleColor: 'white',
+      cardBackgroundColor: 'black',
+      cardPadding: 10
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Events/Event/Event.js

@@ -77,11 +77,17 @@ var Event = function Event(props) {
     date: "15/11/1976 : 16/11/1976",
     disc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro.",
     backgroundColor: "black",
-    headerBackground: "black",
-    headerTitleColor: "white",
     titleColor: "white",
     discColor: "white",
-    dateColor: "white"
+    dateColor: "white",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Events/Events/Events.js

@@ -79,6 +79,10 @@ var Events = function Events(props) {
     setEvents((0, _util.deleteFromArrayByIndex)(events, index));
   };
 
+  var cardClicked = function cardClicked(index, cardProps) {
+    console.log(cardProps);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -117,7 +121,21 @@ var Events = function Events(props) {
     iconColor: "#FE1744",
     cardTitleFontSize: 15,
     onAddEvent: onAddEvent,
-    cardIconClicked: cardIconClicked
+    cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      controlsStyles: {
+        iconColor: '#FE1744'
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };