@mohamed-karawia/library 0.1.15 → 0.1.19

package/dist/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Preview = _interopRequireDefault(require("../../Preview/Preview"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _globalStyles = require("../globalStyles");
+
+var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+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 VideoAlbumPreview = function VideoAlbumPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      videoAlbumStyles = _useState2[0],
+      setVideoAlbumStyles = _useState2[1];
+
+  var initialValues = {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: '',
+      controlsStyles: {
+        iconSize: '',
+        iconColor: ''
+      }
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      cardDescriptionFontSize: '',
+      cardDescriptionColor: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: 'purple'
+    }
+  };
+  var sections = [{
+    title: "Header Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Header Background",
+      name: "headerStyles.headerBackground"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Padding",
+      name: "headerStyles.padding"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "headerStyles.titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "headerStyles.titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "headerStyles.titleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Controls Size",
+      name: "headerStyles.controlsStyles.iconSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Controls Color",
+      name: "headerStyles.controlsStyles.iconColor"
+    })]
+  }, {
+    title: "Card Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Card Background",
+      name: "customCardStyles.cardBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Hover Color",
+      name: "customCardStyles.onHoverBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Radius",
+      name: "customCardStyles.cardRadius"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "customCardStyles.cardTitleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "customCardStyles.cardTitleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "customCardStyles.cardTitleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Image Radius",
+      name: "customCardStyles.cardImageRadius"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Artist Font Size",
+      name: "customCardStyles.cardDescriptionFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Artist Font Color",
+      name: "customCardStyles.cardDescriptionColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Padding",
+      name: "customCardStyles.cardPadding"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Image Size",
+      name: "customCardStyles.imgSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Border Size",
+      name: "customCardStyles.cardBorderSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Border Color",
+      name: "customCardStyles.cardBorderColor"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setVideoAlbumStyles(values);
+      localStorage.setItem('formStyles', JSON.stringify(values));
+    }
+  };
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    console.log('Canceled');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
+    formTitle: "Video Albums Styles",
+    initialValues: initialValues,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionHeaderStyles: {
+      padding: 6,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    bodyPadding: 10,
+    saveBtnText: "Save",
+    cancelBtnText: "Cancel",
+    saveBtnHandle: submitHandler,
+    cancelHandler: cancelHandler,
+    handleChange: handleChange,
+    bodyRowGap: 20,
+    bodyColumnGap: 10
+  })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
+    type: 'Video-Album',
+    componentProps: props.componentProps,
+    stylingProps: videoAlbumStyles
+  })));
+};
+
+VideoAlbumPreview.defaultProps = {};
+var _default = VideoAlbumPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Preview = _interopRequireDefault(require("../../Preview/Preview"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _globalStyles = require("../globalStyles");
+
+var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+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 VideoAlbumsPreview = function VideoAlbumsPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      videoAlbumsStyles = _useState2[0],
+      setVideoAlbumsStyles = _useState2[1];
+
+  var initialValues = {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: '',
+      controlsStyles: {
+        iconSize: '',
+        iconColor: ''
+      }
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      cardPadding: 0,
+      cardBorderSize: 0,
+      cardBorderColor: 'purple'
+    }
+  };
+  var sections = [{
+    title: "Header Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Header Background",
+      name: "headerStyles.headerBackground"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Padding",
+      name: "headerStyles.padding"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "headerStyles.titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "headerStyles.titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "headerStyles.titleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Controls Size",
+      name: "headerStyles.controlsStyles.iconSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Controls Color",
+      name: "headerStyles.controlsStyles.iconColor"
+    })]
+  }, {
+    title: "Card Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Card Background",
+      name: "customCardStyles.cardBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Hover Color",
+      name: "customCardStyles.onHoverBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Radius",
+      name: "customCardStyles.cardRadius"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "customCardStyles.cardTitleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "customCardStyles.cardTitleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "customCardStyles.cardTitleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Image Radius",
+      name: "customCardStyles.cardImageRadius"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Padding",
+      name: "customCardStyles.cardPadding"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Border Size",
+      name: "customCardStyles.cardBorderSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Border Color",
+      name: "customCardStyles.cardBorderColor"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setVideoAlbumsStyles(values);
+      localStorage.setItem('formStyles', JSON.stringify(values));
+    }
+  };
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    console.log('Canceled');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
+    formTitle: "Video Albums Styles",
+    initialValues: initialValues,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionHeaderStyles: {
+      padding: 6,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    bodyPadding: 10,
+    saveBtnText: "Save",
+    cancelBtnText: "Cancel",
+    saveBtnHandle: submitHandler,
+    cancelHandler: cancelHandler,
+    handleChange: handleChange,
+    bodyRowGap: 20,
+    bodyColumnGap: 10
+  })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
+    type: 'Video-Albums',
+    componentProps: props.componentProps,
+    stylingProps: videoAlbumsStyles
+  })));
+};
+
+VideoAlbumsPreview.defaultProps = {};
+var _default = VideoAlbumsPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/VideoPreview/VideoPreview.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Preview = _interopRequireDefault(require("../../Preview/Preview"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _globalStyles = require("../globalStyles");
+
+var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+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 VideoPreview = function VideoPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      videoStyles = _useState2[0],
+      setVideoStyles = _useState2[1];
+
+  var initialValues = {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: ''
+    },
+    iconsColor: '',
+    backgroundColor: '',
+    detailsPadding: '',
+    titleFontSize: '',
+    titleColor: '',
+    discFontSize: '',
+    discColor: '',
+    dateFontSize: '',
+    dateColor: '',
+    commentBackgroundColor: '',
+    commentTitleColor: '',
+    commentTitleFontSize: ''
+  };
+  var sections = [{
+    title: "Header Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Header Background",
+      name: "headerStyles.headerBackground"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Padding",
+      name: "headerStyles.padding"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "headerStyles.titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "headerStyles.titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "headerStyles.titleFontWeight"
+    })]
+  }, {
+    title: "Player Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Icons Color",
+      name: "iconsColor"
+    })]
+  }, {
+    title: "Space Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Background Color",
+      name: "backgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Details Padding",
+      name: "detailsPadding"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Discription Font Size",
+      name: "discFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Discription Color",
+      name: "discColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Date Font Size",
+      name: "dateFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Date Color",
+      name: "dateColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Comment Background Color",
+      name: "commentBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Comment Title Color",
+      name: "commentTitleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Comment title Font Size",
+      name: "commentTitleFontSize"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setVideoStyles(values);
+      localStorage.setItem('formStyles', JSON.stringify(values));
+    }
+  };
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    console.log('Canceled');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
+    formTitle: "Video Styles",
+    initialValues: initialValues,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionHeaderStyles: {
+      padding: 6,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    bodyPadding: 10,
+    saveBtnText: "Save",
+    cancelBtnText: "Cancel",
+    saveBtnHandle: submitHandler,
+    cancelHandler: cancelHandler,
+    handleChange: handleChange,
+    bodyRowGap: 20,
+    bodyColumnGap: 10
+  })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
+    type: 'Video-Space',
+    componentProps: props.componentProps,
+    stylingProps: videoStyles
+  })));
+};
+
+VideoPreview.defaultProps = {};
+var _default = VideoPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/globalStyles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Right = exports.Left = exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    display: flex;\n    background-color: 'transparent';\n    align-items: flex-start;\n"])));
+
+exports.Container = Container;
+
+var Left = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1;\n"])));
+
+exports.Left = Left;
+
+var Right = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 2;\n    position: sticky;\n    top: 0;\n    bottom: 0;\n"])));
+
+exports.Right = Right;

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

@@ -23,7 +23,7 @@ var _globalCardStyles = require("../globalCardStyles");
 
 var _ai = require("react-icons/ai");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var _excluded = ["title", "description", "img", "cardControls"];
 
@@ -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(CardDescription, props, description)), /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
     controls: cardControls,
     show: showIcons,
     onIconClicked: iconCliked,
@@ -64,18 +69,18 @@ var CardStyle10 = function CardStyle10(_ref) {
     iconSize: 20,
     iconsGap: 10,
     maxIcons: 0,
-    iconColor: "#FE1744",
     dropdownFontSize: 10
   }, props.controlsStyles)));
 };
 
 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 Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\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;
 });
 
+var CardDescription = (0, _styledComponents.default)(_globalCardStyles.Description)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    text-align: center;\n"])));
 CardStyle10.defaultProps = {};
 var _default = CardStyle10;
 exports.default = _default;

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

@@ -49,9 +49,11 @@ var CardStyle11 = function CardStyle11(_ref) {
     props.cardClicked();
   };
 
-  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Card, props, /*#__PURE__*/_react.default.createElement(SvgWrapper, 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({
+  }, props), /*#__PURE__*/_react.default.createElement(_bi.BiNotepad, null)), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, Object.assign({
+    onClick: cardClicked
+  }, 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
@@ -60,11 +62,13 @@ var CardStyle11 = function CardStyle11(_ref) {
 
 var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    gap: 10px;\n"])));
 
-var Date = _styledComponents.default.h5(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: gray;\n    font-weight: 300;\n"])));
+var Date = _styledComponents.default.h5(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-weight: 300;\n"])), function (props) {
+  return props.dateColor || 'gray';
+});
 
 var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n"])));
 
-var SvgWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n    svg{\n        width: 50px;\n        height: 50px;\n        fill: ", "\n    }\n"])), function (props) {
+var SvgWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n    svg{\n        width: 50px;\n        height: 50px;\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;