@mohamed-karawia/library 0.1.13 → 0.1.17

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/Common Inputs/EditorComponent/EditorComponent.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactEditorJs = _interopRequireDefault(require("react-editor-js"));
+var _reactEditorJs = require("react-editor-js");
 
 var _constants = require("./constants");
 
@@ -30,6 +30,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EditorComponent = function EditorComponent(props) {
   var _instanceRef = (0, _react.useRef)(null);
 
+  var ReactEditorJS = (0, _reactEditorJs.createReactEditorJS)();
+
   function handleSave() {
     return _handleSave.apply(this, arguments);
   }
@@ -58,7 +60,7 @@ var EditorComponent = function EditorComponent(props) {
     return _handleSave.apply(this, arguments);
   }
 
-  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(_reactEditorJs.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(ReactEditorJS, {
     instanceRef: function instanceRef(instance) {
       return _instanceRef.current = instance;
     },

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/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: transparent;\n"])));
 
 Folders.defaultProps = {};
 var _default = Folders;

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

@@ -90,15 +90,6 @@ var Notes = function Notes(_ref) {
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
-    customCardStyles: {
-      iconColor: iconColor,
-      cardTitleFontSize: cardTitleFontSize,
-      cardTitleColor: cardTitleColor,
-      cardPadding: cardPadding,
-      controlsStyles: {
-        iconColor: '#FE1744'
-      }
-    },
     listControls: listControls,
     cardControls: cardControls,
     iconClicked: onIconClicked,

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

@@ -90,14 +90,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     iconClicked: onIconClicked,
     listControls: listControls,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: {
-      cardBackgroundColor: cardBackgroundColor,
-      cardTitleColor: songTitleColor,
-      controlsStyles: {
-        iconColor: 'black'
-      }
-    }
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {

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: {
@@ -111,8 +109,7 @@ var ViewAlbums = function ViewAlbums(_ref) {
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: cardStyles
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -129,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/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)));
 };
 

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

@@ -82,6 +82,10 @@ var Library = function Library(props) {
     setFolders((0, _util.deleteFromArrayByIndex)(folders, 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: {
@@ -109,7 +113,8 @@ var Library = function Library(props) {
         controlsStyles: {
           showOnHover: true
         }
-      }
+      },
+      cardClicked: cardClicked
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
     title: "Music Album",
@@ -121,6 +126,7 @@ var Library = function Library(props) {
     columnsNumber: 3,
     onAddFolder: onAddFolder,
     cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
     headerStyles: {
       padding: 10,
       headerBackground: '#ff2d2d',
@@ -128,6 +134,10 @@ var Library = function Library(props) {
       controlsStyles: {
         iconSize: 25
       }
+    },
+    customCardStyles: {
+      cardPadding: 10,
+      iconColor: '#ff2d2d'
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };

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

@@ -79,6 +79,10 @@ var Notes = function Notes(props) {
     setNotes((0, _util.deleteFromArrayByIndex)(notes, 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: {
@@ -116,6 +120,7 @@ var Notes = function Notes(props) {
     onAddNote: onAddNote,
     cardIconClicked: cardIconClicked,
     notes: notes,
+    cardClicked: cardClicked,
     headerStyles: {
       padding: 10,
       headerBackground: '#FE1744',
@@ -123,6 +128,12 @@ var Notes = function Notes(props) {
       controlsStyles: {
         iconSize: 25
       }
+    },
+    customCardStyles: {
+      iconColor: '#FE1744',
+      controlsStyles: {
+        iconColor: '#FE1744'
+      }
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };

package/dist/stories/Pages/Music/MusicAlbum/Music.js

@@ -191,6 +191,11 @@ var Music = function Music(props) {
       controlsStyles: {
         iconSize: 25
       }
+    },
+    customCardStyles: {
+      controlsStyles: {
+        iconColor: 'blue'
+      }
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "music player",