@mohamed-karawia/library 0.1.14 → 0.1.18

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: {
@@ -113,11 +121,30 @@ var Forms = function Forms(props) {
       }
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
-    title: "Music Album",
     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
+    },
+    customCardStyles: {
+      cardBackgroundColor: 'white'
+    }
   }))), /*#__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: {
@@ -118,6 +122,7 @@ var Events = function Events(props) {
     cardTitleFontSize: 15,
     onAddEvent: onAddEvent,
     cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
     headerStyles: {
       padding: 10,
       headerBackground: '#FE1744',
@@ -127,6 +132,7 @@ var Events = function Events(props) {
       }
     },
     customCardStyles: {
+      cardBackgroundColor: 'white',
       controlsStyles: {
         iconColor: '#FE1744'
       }

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',

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',

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

@@ -60,7 +60,7 @@ var Music = function Music(props) {
   var _useState3 = (0, _react.useState)([{
     index: 0,
     cover: _music4.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3',
     title: 'Plans We Made',
     description: 'Son Lux',
     time: '5:20'
@@ -74,7 +74,7 @@ var Music = function Music(props) {
   }, {
     index: 1,
     cover: _music5.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3',
     title: 'Night',
     description: 'Frank Ocean',
     time: '5:20'
@@ -88,14 +88,14 @@ var Music = function Music(props) {
   }, {
     index: 4,
     cover: _music3.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3',
     title: 'Enter Sandman',
     description: 'Metallica',
     time: '5:20'
   }, {
     index: 5,
     cover: _music2.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3',
     title: 'November Rain',
     description: "Guns N' Roses",
     time: '5:20'
@@ -191,6 +191,12 @@ var Music = function Music(props) {
       controlsStyles: {
         iconSize: 25
       }
+    },
+    customCardStyles: {
+      cardBackgroundColor: 'white',
+      controlsStyles: {
+        iconColor: 'black'
+      }
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "music player",
@@ -205,7 +211,8 @@ var Music = function Music(props) {
       prevSong: prevSong,
       currentSong: currentSong,
       borderRadius: '10',
-      primaryColor: 'black'
+      primaryColor: 'black',
+      backgroundColor: 'white'
     },
     headerStyles: {
       controlsStyles: {

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

@@ -115,6 +115,22 @@ var MusicAlbums = function MusicAlbums(props) {
     console.log(cardProps);
   };
 
+  var notes = [{
+    title: 'Study notes',
+    date: '15/11/2020'
+  }, {
+    title: 'Music notes',
+    date: '14/12/2020'
+  }, {
+    title: 'Workout notes',
+    date: '5/8/2021'
+  }, {
+    title: 'Gaming notes',
+    date: '14/4/2023'
+  }, {
+    title: 'Working notes',
+    date: '5/6/2021'
+  }];
   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: {
@@ -161,8 +177,34 @@ var MusicAlbums = function MusicAlbums(props) {
         iconSize: 25
       }
     },
+    customCardStyles: {
+      darkOnHover: true,
+      controlsStyles: {
+        showOnHover: true,
+        position: 'center',
+        dropdownFontColor: "white",
+        iconBorderRadius: 100,
+        iconSize: 40,
+        iconsGap: 10,
+        iconColor: 'white',
+        containerPadding: 20
+      }
+    },
     cardClicked: cardClicked
-  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "notes",
+    widgetProps: {
+      notes: notes,
+      headerStyles: {
+        padding: 10,
+        headerBackground: 'black',
+        titleColor: '#ffff',
+        controlsStyles: {
+          iconSize: 25
+        }
+      }
+    }
+  }))));
 };
 
 var _default = MusicAlbums;

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

@@ -156,7 +156,13 @@ var Album = function Album(props) {
     addPhoto: onAddPhoto,
     deletePhoto: onDeletePhoto,
     cardIconClicked: cardIconClicked,
-    columnsNumber: 2
+    columnsNumber: 2,
+    headerStyles: {
+      padding: 10,
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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

@@ -81,6 +81,26 @@ var Albums = function Albums(props) {
       albums = _useState2[0],
       setAlbums = _useState2[1];
 
+  var folders = [{
+    title: 'Folder one',
+    description: 'Discription for folder one'
+  }, {
+    title: 'Folder two',
+    description: 'Discription for folder two'
+  }, {
+    title: 'Folder three',
+    description: 'Discription for folder three'
+  }, {
+    title: 'Folder four',
+    description: 'Discription for folder four'
+  }, {
+    title: 'Folder five',
+    description: 'Discription for folder five'
+  }, {
+    title: 'Folder six',
+    description: 'Discription for folder six'
+  }];
+
   var cardIconClicked = function cardIconClicked(action, index) {
     switch (action) {
       case 'delete':
@@ -148,8 +168,24 @@ var Albums = function Albums(props) {
     onDeleteAlbum: onDeleteAlbum,
     onAddAlbum: onAddAlbum,
     columnsNumber: 2,
-    cardClicked: cardClicked
-  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+    cardClicked: cardClicked,
+    customCardStyles: {
+      cardBackgroundColor: 'white'
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "folders",
+    widgetProps: {
+      folders: folders,
+      columnsNumber: 3,
+      customCardStyles: {
+        cardPadding: 10,
+        iconColor: '#ff2d2d',
+        controlsStyles: {
+          iconColor: '#FE1744'
+        }
+      }
+    }
+  }))));
 };
 
 var _default = Albums;

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

@@ -29,7 +29,7 @@ var _ai = require("react-icons/ai");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "columnsNumber", "columnGap", "rowGap", "descColor"];
+var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "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); }
 
@@ -50,9 +50,6 @@ var ViewAlbum = function ViewAlbum(_ref) {
   var album = _ref.album,
       cardBackgroundColor = _ref.cardBackgroundColor,
       imgTitleColor = _ref.imgTitleColor,
-      columnsNumber = _ref.columnsNumber,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
       descColor = _ref.descColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var cardStyles = {
@@ -157,21 +154,10 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Photo Album",
+    galleryTitle: props.title || "Photo Album",
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: props.headerBackground,
-      titleColor: props.titleColor,
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
@@ -189,8 +175,8 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddPhoto.default, {
     saveHandler: onAddPhoto,
     cancelHandler: cancelHandler,
-    saveBtnText: 'Add',
-    cancelBtnText: 'Cancel'
+    saveBtnText: props.saveBtnText || 'Add',
+    cancelBtnText: props.saveBtnText || 'Cancel'
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showImgModal,
     closeModal: function closeModal() {

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

@@ -27,7 +27,7 @@ var _ai = require("react-icons/ai");
 
 var _templateObject;
 
-var _excluded = ["albums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "albumTitleColor", "countColor", "countFontSize", "columnsNumber", "columnGap", "rowGap"];
+var _excluded = ["albums"];
 
 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,34 +46,7 @@ var galleryControls = [{
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      cardBackgroundColor = _ref.cardBackgroundColor,
-      cardTitleColor = _ref.cardTitleColor,
-      cardTitleFontSize = _ref.cardTitleFontSize,
-      albumTitleColor = _ref.albumTitleColor,
-      countColor = _ref.countColor,
-      countFontSize = _ref.countFontSize,
-      columnsNumber = _ref.columnsNumber,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var cardStyles = {
-    darkOnHover: true,
-    cardBackgroundColor: cardBackgroundColor,
-    cardTitleColor: cardTitleColor,
-    cardTitleFontSize: cardTitleFontSize,
-    countColor: countColor,
-    countFontSize: countFontSize,
-    controlsStyles: {
-      showOnHover: true,
-      position: 'center',
-      dropdownFontColor: "white",
-      iconBorderRadius: 100,
-      iconSize: 40,
-      iconsGap: 10,
-      iconColor: 'white',
-      containerPadding: 20
-    }
-  };
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -105,26 +78,14 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Photo Albums",
+    galleryTitle: props.title || "Photo Albums",
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: props.headerBackground,
-      titleColor: props.titleColor,
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: cardStyles
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -139,15 +100,8 @@ 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 = {
-  columnsNumber: 3,
-  headerBackground: '#FE1744',
-  titleColor: 'white',
-  cardBackgroundColor: 'white',
-  columnGap: 10,
-  rowGap: 20
-};
+ViewAlbums.defaultProps = {};
 var _default = ViewAlbums;
 exports.default = _default;

package/dist/stories/Preview/Preview.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _util = require("../helpers/util");
+
+var _templateObject;
+
+var _excluded = ["type", "componentProps", "stylingProps"];
+
+var Preview = function Preview(_ref) {
+  var type = _ref.type,
+      componentProps = _ref.componentProps,
+      stylingProps = _ref.stylingProps,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var child = (0, _util.getComponentType)(type, componentProps, stylingProps);
+  return /*#__PURE__*/_react.default.createElement(Container, null, child);
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+var _default = Preview;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js

@@ -47,14 +47,19 @@ var CardStyle10 = function CardStyle10(_ref) {
     props.iconClicked(action, props.index);
   };
 
+  var cardClicked = function cardClicked() {
+    props.cardClicked();
+  };
+
   return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onClick: cardClicked,
     onMouseEnter: function onMouseEnter(e) {
       return setShowIcons(true);
     },
     onMouseLeave: function onMouseLeave(e) {
       return setShowIcons(false);
     }
-  }, props), /*#__PURE__*/_react.default.createElement(SvgWrapper, props, /*#__PURE__*/_react.default.createElement(_ai.AiFillFolderOpen, null)), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, description)), /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+  }, props), /*#__PURE__*/_react.default.createElement(SvgWrapper, props, /*#__PURE__*/_react.default.createElement(_ai.AiFillFolderOpen, props)), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, description)), /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
     controls: cardControls,
     show: showIcons,
     onIconClicked: iconCliked,
@@ -64,7 +69,6 @@ var CardStyle10 = function CardStyle10(_ref) {
     iconSize: 20,
     iconsGap: 10,
     maxIcons: 0,
-    iconColor: "#FE1744",
     dropdownFontSize: 10
   }, props.controlsStyles)));
 };
@@ -72,7 +76,7 @@ var CardStyle10 = function CardStyle10(_ref) {
 var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-direction: column;\n    row-gap: 10px;\n"])));
 var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    justify-content: space-between;\n\n"])));
 
-var SvgWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n    svg{\n        width: 70px;\n        height: 70px;\n        fill: ", "\n    }\n"])), function (props) {
+var SvgWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n    & svg{\n        width: 70px;\n        height: 70px;\n        fill: ", "\n    }\n"])), function (props) {
   return props.iconColor;
 });
 

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

@@ -21,7 +21,7 @@ var _Controls = _interopRequireDefault(require("../../Controls/Controls"));
 
 var _globalCardStyles = require("../globalCardStyles");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var _excluded = ["title", "description", "path"];
 
@@ -48,7 +48,7 @@ var CardStyle3 = function CardStyle3(_ref) {
     props.cardClicked(path);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_globalCardStyles.MainCard, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
     onClick: cardClicked,
     onMouseEnter: function onMouseEnter(e) {
       return setShowIcons(true);
@@ -66,6 +66,7 @@ var CardStyle3 = function CardStyle3(_ref) {
 var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    row-gap: ", "px;\n"])), function (props) {
   return props.rowGap;
 });
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n"])));
 CardStyle3.defaultProps = {};
 var _default = CardStyle3;
 exports.default = _default;

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

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _globalCardStyles = require("../globalCardStyles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 var _excluded = ["username", "answered", "img", "status"];
 
@@ -33,15 +33,29 @@ var CardStyle9 = function CardStyle9(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   console.log(props);
 
-  var onAccept = function onAccept() {
-    alert(props.index);
+  var onAction = function onAction(action) {
+    props.iconClicked(action);
   };
 
   return /*#__PURE__*/_react.default.createElement(Card, 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
-  }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, null, "Decline"), status === 'pending' && /*#__PURE__*/_react.default.createElement(Review, null, "In Review"))));
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Title, Object.assign({
+    onClick: function onClick() {
+      return props.cardClicked();
+    }
+  }, props), username), /*#__PURE__*/_react.default.createElement(Answered, null, "Questions Answered: ", answered), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
+    onClick: function onClick() {
+      return onAction('accept');
+    }
+  }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, {
+    onClick: function onClick() {
+      return onAction('decline');
+    }
+  }, "Decline"), status === 'pending' && /*#__PURE__*/_react.default.createElement(Review, {
+    onClick: function onClick() {
+      return onAction('review');
+    }
+  }, "In Review"))));
 };
 
 var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    gap: 20px;\n    padding: 10px;\n"])));
@@ -53,15 +67,16 @@ var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObj
 });
 
 var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n"])));
+var Title = (0, _styledComponents.default)(_globalCardStyles.Title)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n"])));
 
-var Answered = _styledComponents.default.h5(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    font-weight: 300;\n"])));
+var Answered = _styledComponents.default.h5(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-weight: 300;\n"])));
 
-var Buttons = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 10px;\n"])));
+var Buttons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 10px;\n"])));
 
-var Button = _styledComponents.default.button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 7px 20px;\n    border: none;\n    color: white;\n    cursor: pointer;\n"])));
+var Button = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 7px 20px;\n    border: none;\n    color: white;\n    cursor: pointer;\n"])));
 
-var Accept = (0, _styledComponents.default)(Button)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #69d869;\n"])));
-var Decline = (0, _styledComponents.default)(Button)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #e24848;\n"])));
-var Review = (0, _styledComponents.default)(Button)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #18b8e9;\n"])));
+var Accept = (0, _styledComponents.default)(Button)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #69d869;\n"])));
+var Decline = (0, _styledComponents.default)(Button)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #e24848;\n"])));
+var Review = (0, _styledComponents.default)(Button)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #18b8e9;\n"])));
 var _default = CardStyle9;
 exports.default = _default;

package/dist/stories/Reusable Components/Cards/globalCardStyles.js

@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var MainCard = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n* {\n        margin: 0;\n        padding: 0;\n    }\n    font-family: sans-serif;\n    display: flex;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", ";\n    align-items: center;\n    padding: ", " !important;\n    order: ", ";\n    &:hover {\n        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n        -webkit-filter: ", ";\n        transition: all .2s ease;\n        background-color: ", ";\n    }\n"])), function (props) {
-  return props.cardBackgroundColor || 'white';
+  return props.cardBackgroundColor || 'transparent';
 }, function (props) {
   return props.cardRadius;
 }, function (props) {