@mohamed-karawia/library 0.1.11 → 0.1.15

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

@@ -18,8 +18,8 @@ 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",
@@ -38,7 +38,7 @@ var ViewForms = function ViewForms(_ref) {
         dropdownItemHoverColor: '#FE1744'
       }
     }
-  });
+  }, 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),
@@ -84,12 +83,12 @@ var Folders = function Folders(_ref) {
     setShowModal(false);
   };
 
+  console.log(props);
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
     galleryTitle: "Your Folders",
     data: folders,
     type: "flat",
     cardStyle: "card-style-10",
-    headerStyles: headerStyles,
     columnsNumber: columnsNumber,
     galleryColumnGap: columnGap,
     galleryRowGap: rowGap,
@@ -98,11 +97,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() {

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/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) {
@@ -106,7 +98,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
         iconColor: 'black'
       }
     }
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

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

@@ -101,27 +101,16 @@ 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
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {

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

@@ -71,6 +71,9 @@ var Chat = function Chat(_ref) {
           showOnHover: true
         }
       }
+    },
+    cardClicked: function cardClicked(path) {
+      return alert(path);
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
     title: "Music Album",

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

@@ -83,6 +83,10 @@ var Forms = function Forms(props) {
       forms = _useState2[0],
       setForms = _useState2[1];
 
+  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,8 @@ 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
   }))), /*#__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)));
 };
 

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

@@ -128,6 +128,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: {
@@ -115,7 +119,22 @@ var Notes = function Notes(props) {
   }, /*#__PURE__*/_react.default.createElement(_Notes.default, {
     onAddNote: onAddNote,
     cardIconClicked: cardIconClicked,
-    notes: notes
+    notes: notes,
+    cardClicked: cardClicked,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      iconColor: '#FE1744',
+      controlsStyles: {
+        iconColor: '#FE1744'
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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

@@ -183,7 +183,15 @@ var Music = function Music(props) {
     album: album,
     onAddSong: onAddSong,
     cardIconClicked: cardIconClicked,
-    cardClicked: onPlaySong
+    cardClicked: onPlaySong,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "music player",
     controlsStyles: {

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

@@ -111,6 +111,10 @@ var MusicAlbums = function MusicAlbums(props) {
     setAlbums((0, _util.deleteFromArrayByIndex)(albums, 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: {
@@ -145,9 +149,19 @@ var MusicAlbums = function MusicAlbums(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, {
+    title: "Music Albums",
     albums: albums,
     cardIconClicked: cardIconClicked,
-    onAddAlbum: onAddAlbum
+    onAddAlbum: onAddAlbum,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Photos/Albums/Albums.js

@@ -105,6 +105,10 @@ var Albums = function Albums(props) {
     setAlbums((0, _util.addObjectToArray)(albums, newAlbum));
   };
 
+  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: {
@@ -143,7 +147,8 @@ var Albums = function Albums(props) {
     cardIconClicked: cardIconClicked,
     onDeleteAlbum: onDeleteAlbum,
     onAddAlbum: onAddAlbum,
-    columnsNumber: 2
+    columnsNumber: 2,
+    cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.js

@@ -104,7 +104,8 @@ var DetailedVideo = function DetailedVideo(props) {
     date: "10/11/2022",
     comments: comments,
     discColor: "gray",
-    dateColor: "gray"
+    dateColor: "gray",
+    videoSrc: 'https://www.youtube.com/watch?v=vETUpJ88cfA'
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Video/VideoAlbum/Video.js

@@ -153,6 +153,10 @@ var Video = function Video(props) {
     setAlbum((0, _util.deleteFromArrayByIndex)(album, 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: {
@@ -190,7 +194,16 @@ var Video = function Video(props) {
     album: album,
     onAddVideo: onAddVideo,
     onDeleteSong: deleteVideoFromAlbum,
-    cardIconClicked: cardIconClicked
+    cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "video player",
     controlsStyles: {

package/dist/stories/Pages/ViewWorld/constatnts.js

@@ -7,16 +7,20 @@ exports.MOVIES_SONGS = exports.MOVIES_DATA = exports.GAMING_SONGS = exports.GAMI
 var SPACES = [{
   title: 'Main List',
   data: [{
-    title: 'Cargo Sprint'
+    title: 'Cargo Sprint',
+    path: 'cago'
   }, {
-    title: 'Movies'
+    title: 'Movies',
+    path: 'movies'
   }]
 }, {
-  title: 'Entertainment List',
+  title: 'Entertainment',
   data: [{
-    title: 'Gaming'
+    title: 'Gaming',
+    path: 'games'
   }, {
-    title: 'Music'
+    title: 'Music',
+    path: 'music'
   }]
 }];
 exports.SPACES = SPACES;

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

@@ -122,9 +122,6 @@ var ViewAlbums = function ViewAlbums(_ref) {
     galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardControls: cardControls,
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles

package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js

@@ -45,7 +45,13 @@ var CardStyle11 = function CardStyle11(_ref) {
     props.iconClicked(action, props.index);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Card, props, /*#__PURE__*/_react.default.createElement(SvgWrapper, props, /*#__PURE__*/_react.default.createElement(_bi.BiNotepad, null)), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(Date, props, date)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+  var cardClicked = function cardClicked() {
+    props.cardClicked();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onClick: cardClicked
+  }, props), /*#__PURE__*/_react.default.createElement(SvgWrapper, props, /*#__PURE__*/_react.default.createElement(_bi.BiNotepad, null)), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(Date, props, date)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
     controls: props.cardControls,
     show: showIcons,
     onIconClicked: iconClicked

package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js

@@ -23,7 +23,7 @@ var _globalCardStyles = require("../globalCardStyles");
 
 var _templateObject;
 
-var _excluded = ["title", "description"];
+var _excluded = ["title", "description", "path"];
 
 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); }
 
@@ -32,6 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardStyle3 = function CardStyle3(_ref) {
   var title = _ref.title,
       description = _ref.description,
+      path = _ref.path,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -43,7 +44,12 @@ var CardStyle3 = function CardStyle3(_ref) {
     console.log(action);
   };
 
+  var cardClicked = function cardClicked() {
+    props.cardClicked(path);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_globalCardStyles.MainCard, Object.assign({
+    onClick: cardClicked,
     onMouseEnter: function onMouseEnter(e) {
       return setShowIcons(true);
     },

package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js

@@ -37,7 +37,11 @@ var CardStyle9 = function CardStyle9(_ref) {
     alert(props.index);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Card, props, /*#__PURE__*/_react.default.createElement(ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onClick: function onClick() {
+      return props.cardClicked();
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
     src: img
   })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, username), /*#__PURE__*/_react.default.createElement(Answered, null, "Questions Answered: ", answered), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
     onClick: onAccept

package/dist/stories/Reusable Components/Gallery/Gallery.js

@@ -39,8 +39,8 @@ var Gallery = function Gallery(_ref) {
     props.iconClicked(action);
   };
 
-  var clicked = function clicked(index) {
-    props.cardClicked(index);
+  var clicked = function clicked(index, cardProps) {
+    props.cardClicked(index, cardProps);
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {

package/dist/stories/Reusable Components/ReusableList/ReusableList.js

@@ -39,8 +39,8 @@ var ReusableList = function ReusableList(_ref) {
     props.iconClicked(action);
   };
 
-  var clicked = function clicked(index) {
-    props.cardClicked(index);
+  var clicked = function clicked(index, cardProps) {
+    props.cardClicked(index, cardProps);
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {

package/dist/stories/Reusable Components/WidgetContainer/WidgetContainer.js

@@ -29,7 +29,12 @@ var WidgetContainer = function WidgetContainer(_ref) {
       widgetControls = _ref.widgetControls,
       widgetProps = _ref.widgetProps,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var child = (0, _util.getWidgetType)(widgetType, widgetProps);
+
+  var cardClicked = function cardClicked(path) {
+    props.cardClicked(path);
+  };
+
+  var child = (0, _util.getWidgetType)(widgetType, widgetProps, cardClicked);
 
   var iconCliked = function iconCliked(action) {
     console.log(action);
@@ -42,7 +47,7 @@ var WidgetContainer = function WidgetContainer(_ref) {
   }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(Body, null, child));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 
 var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    padding: 0;\n"])));
 

package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js

@@ -23,10 +23,11 @@ var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTex
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var _excluded = ["title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
+var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
 
 var VideoSpace = function VideoSpace(_ref) {
-  var title = _ref.title,
+  var videoSrc = _ref.videoSrc,
+      title = _ref.title,
       discription = _ref.discription,
       date = _ref.date,
       users = _ref.users,
@@ -47,7 +48,8 @@ var VideoSpace = function VideoSpace(_ref) {
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
-    iconsColor: iconsColor
+    iconsColor: iconsColor,
+    src: videoSrc
   }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
     detailsPadding: detailsPadding
   }, /*#__PURE__*/_react.default.createElement(Top, null, /*#__PURE__*/_react.default.createElement(Title, {