@mohamed-karawia/library 0.1.15 → 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

@@ -22,22 +22,7 @@ var ViewForms = function ViewForms(_ref) {
     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));
 };
 

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

@@ -83,7 +83,6 @@ 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,
@@ -114,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/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

@@ -87,6 +87,10 @@ var Forms = function Forms(props) {
     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: {
@@ -122,7 +126,23 @@ var Forms = function Forms(props) {
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_ViewForms.default, {
     data: forms,
-    cardClicked: cardClicked
+    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/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: {
@@ -121,6 +125,7 @@ var Library = function Library(props) {
     columnsNumber: 3,
     onAddFolder: onAddFolder,
     cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
     headerStyles: {
       padding: 10,
       headerBackground: '#ff2d2d',

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

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':
@@ -149,7 +169,20 @@ var Albums = function Albums(props) {
     onAddAlbum: onAddAlbum,
     columnsNumber: 2,
     cardClicked: cardClicked
-  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+  }))), /*#__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

@@ -161,14 +161,6 @@ var ViewAlbum = function ViewAlbum(_ref) {
     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,

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", "columnsNumber", "columnGap", "rowGap"];
 
 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,10 @@ 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),
@@ -109,22 +85,13 @@ var ViewAlbums = function ViewAlbums(_ref) {
     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,7 +106,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 = {
   columnsNumber: 3,