@mohamed-karawia/library 0.1.15 → 0.1.16

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-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,19 +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, Object.assign({
+  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(Title, 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
-  }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, null, "Decline"), status === 'pending' && /*#__PURE__*/_react.default.createElement(Review, null, "In Review"))));
+  }, 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"])));
@@ -57,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) {

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

@@ -23,7 +23,7 @@ var _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/Reusable
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls"];
+var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls", "headerStyles", "sectionHeaderStyles"];
 
 var ReusableList = function ReusableList(_ref) {
   var data = _ref.data,
@@ -32,6 +32,8 @@ var ReusableList = function ReusableList(_ref) {
       type = _ref.type,
       _ref$cardControls = _ref.cardControls,
       cardControls = _ref$cardControls === void 0 ? null : _ref$cardControls,
+      headerStyles = _ref.headerStyles,
+      sectionHeaderStyles = _ref.sectionHeaderStyles,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var child;
 
@@ -59,9 +61,9 @@ var ReusableList = function ReusableList(_ref) {
     child = data.map(function (section) {
       return /*#__PURE__*/_react.default.createElement(Section, {
         priority: section.priority
-      }, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+      }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
         title: section.title
-      }, props.sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
+      }, sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
     });
   }
 
@@ -69,7 +71,7 @@ var ReusableList = function ReusableList(_ref) {
     title: props.listTitle,
     controls: props.listControls,
     iconClicked: iconCliked
-  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
+  }, headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
 };
 
 var List = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n    width: ", ";\n    padding: 0;\n    > * {\n        padding: 0;\n        margin: 0;\n    }\n"])), function (props) {

package/dist/stories/Sections/Sections.js

@@ -0,0 +1,61 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableList = _interopRequireDefault(require("../Reusable Components/ReusableList/ReusableList"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["sections"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Sections = function Sections(_ref) {
+  var sections = _ref.sections,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(sections[0].data[0].component),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
+
+  var cardClicked = function cardClicked(index, cardProps) {
+    setCenter(cardProps.component);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Left, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    type: "sectioned",
+    data: sections,
+    cardStyle: "card-style-3",
+    cardClicked: cardClicked
+  }, props))), /*#__PURE__*/_react.default.createElement(Center, null, center));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    background-color: #414141;\n    display: flex;\n"])), function (props) {
+  return props.backgroundColor;
+});
+
+var Left = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1;\n"])));
+
+var Center = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 3;\n"])));
+
+Sections.defaultProps = {};
+var _default = Sections;
+exports.default = _default;

package/dist/stories/helpers/util.js

@@ -39,6 +39,10 @@ var _LogoWidget = _interopRequireDefault(require("../Widgets/LogoWidget/LogoWidg
 
 var _VideoPlayer = _interopRequireDefault(require("../VideoAlbum/VideoPlayer/VideoPlayer"));
 
+var _Notes = _interopRequireDefault(require("../Library/Notes/Notes"));
+
+var _Folders = _interopRequireDefault(require("../Library/Folders/Folders"));
+
 // Cards
 // Widgets
 var stringSearch = function stringSearch(str, word) {
@@ -73,7 +77,7 @@ var addObjectToArray = function addObjectToArray(arr, obj) {
 
 exports.addObjectToArray = addObjectToArray;
 
-var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked) {
+var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked, onAction) {
   var cardTypes = {
     'card-style-1': /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
       key: index
@@ -89,8 +93,8 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
       key: index
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
-      cardClicked: function cardClicked(path) {
-        return clicked(path);
+      cardClicked: function cardClicked() {
+        return clicked(index, cardProps);
       }
     })),
     'card-style-4': /*#__PURE__*/_react.default.createElement(_CardStyle4.default, Object.assign({
@@ -147,7 +151,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -179,7 +183,9 @@ var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
     }, props)),
     'music player': /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, props),
     'logo': /*#__PURE__*/_react.default.createElement(_LogoWidget.default, props),
-    'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props)
+    'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props),
+    'notes': /*#__PURE__*/_react.default.createElement(_Notes.default, props),
+    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, props)
   };
   return widgetTypes[widgetType];
 };

package/package.json

@@ -10,7 +10,7 @@
       ]
     ]
   },
-  "version": "0.1.15",
+  "version": "0.1.16",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",

package/src/stories/Chat/Chat.jsx

@@ -10,38 +10,19 @@ import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
 const Chat = ({
     data,
     title,
-    titleColor,
-    headerBackground,
-    headerPadding,
     cardBackgroundColor,
-    cardTitleColor,
     textColor,
     users,
     ...props }) => {
 
     return (
-        <Container
-            cardBackgroundColor={cardBackgroundColor}>
-            <ReusableHeader
-                title={title}
-                titleColor={titleColor}
-                controls={controls}
-                controlsStyles={{
-                    iconColor: 'white',
-                    maxIcons: 4,
-                    dropdownBackground: 'white'
-                }}
-                headerBackground={headerBackground}
-                padding={headerPadding} />
+        <Container>
             <List
+                listTitle={title}
                 type="flat"
                 data={data}
                 cardStyle="card-style-8"
-                customCardStyles={{
-                    cardBackgroundColor,
-                    cardTitleColor,
-                    cardDescriptionColor: textColor
-                }}
+                {...props}
             />
             <RichTextInput
                 users={users}
@@ -63,9 +44,6 @@ Chat.defaultProps = {
 Chat.propTypes = {
     data: PropTypes.array.isRequired,
     title: PropTypes.string,
-    titleColor: PropTypes.string,
-    headerBackground: PropTypes.string,
-    headerPadding: PropTypes.number,
     cardBackgroundColor: PropTypes.string,
     cardTitleColor: PropTypes.string,
     textColor: PropTypes.string

package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx

@@ -49,6 +49,7 @@ const AddQuestion = (props) => {
 }
 
 const Container = styled.div`
+    width: 100%;
      padding: 10px;
      background-color: 'white';
      display: flex;

package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx

@@ -34,19 +34,10 @@ const DetailedForm = ({
                 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
                 }}
+                {...props}
             />
             <Buttons>
                 <Accept onClick={onAccept}>Accept</Accept>

package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx

@@ -12,21 +12,6 @@ const ViewForms = ({
             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'
-                },
-            }}
             {...props}
         />
     )

package/src/stories/Library/Folders/Folders.jsx

@@ -50,8 +50,6 @@ const Folders = ({
         setShowModal(false)
     }
 
-    console.log(props)
-
     return (
         <Container>
             <Gallery
@@ -87,7 +85,7 @@ const Folders = ({
 }
 
 const Container = styled.div`
-
+    background-color: black;
 `
 
 Folders.defaultProps = {};

package/src/stories/Library/ViewNote/ViewNote.jsx

@@ -2,19 +2,8 @@ import React from 'react';
 
 import Editor from '../../Common Inputs/EditorComponent/EditorComponent';
 
-const ViewNote = () => {
+const ViewNote = ({data, ...props}) => {
 
-    const data = {
-        blocks: [
-            {
-                type: "header",
-                data: {
-                  text: "New Note",
-                  level: 1
-                }
-              }
-        ]
-    }
 
     return (
         <Editor data={data}/>

package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx

@@ -59,13 +59,6 @@ const ViewAlbum = ({
                 listControls={listControls}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={{
-                    cardBackgroundColor: cardBackgroundColor,
-                    cardTitleColor: songTitleColor,
-                    controlsStyles: {
-                        iconColor: 'black'
-                    }
-                }}
                 {...props}
             />
             <Modal

package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx

@@ -21,14 +21,12 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
-    cardBackgroundColor,
     albumTitleColor,
     descColor,
     ...props
 }) => {
     const cardStyles = {
         darkOnHover: true,
-        cardBackgroundColor: cardBackgroundColor,
         cardTitleColor: albumTitleColor,
         descColor,
         controlsStyles: {
@@ -87,7 +85,6 @@ const ViewAlbums = ({
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={cardStyles}
                 {...props}
             />
             <Modal
@@ -106,7 +103,7 @@ const ViewAlbums = ({
     )
 }
 const Container = styled.div`
-
+    width: 100%;
 `
 
 ViewAlbums.defaultProps = {