@mohamed-karawia/library 0.1.0

package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js

@@ -0,0 +1,93 @@
+"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 _Controls = _interopRequireDefault(require("../../Controls/Controls"));
+
+var _globalCardStyles = require("../globalCardStyles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+var _excluded = ["title", "description", "img", "date"];
+
+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 CardStyle6 = function CardStyle6(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      img = _ref.img,
+      date = _ref.date,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showIcons = _useState2[0],
+      setShowIcons = _useState2[1];
+
+  var iconCliked = function iconCliked(action) {
+    props.iconClicked(action, props.index);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onMouseEnter: function onMouseEnter(e) {
+      return setShowIcons(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowIcons(false);
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(ImgWrapper, Object.assign({
+    onClick: function onClick() {
+      return props.cardClicked();
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
+    src: img
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(CardTitle, props, title), /*#__PURE__*/_react.default.createElement(Count, props, props.count), /*#__PURE__*/_react.default.createElement(Date, null, date)), /*#__PURE__*/_react.default.createElement(Desc, props, description)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: showIcons,
+    onIconClicked: iconCliked
+  }, props.controlsStyles)));
+};
+
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-direction: column;\n    cursor: pointer;\n    height: 100%;\n"])));
+
+var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 80%;\n    border-radius: ", ";\n"])), function (props) {
+  return props.cardRadius + 'px ' + props.cardRadius + 'px ' + '0 0';
+});
+
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    width: 100%;\n    flex-grow: 1;\n"])));
+
+var Header = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 5px 20px;\n"])));
+
+var CardTitle = (0, _styledComponents.default)(_globalCardStyles.Title)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    flex-grow: 1;\n"])));
+
+var Count = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+  return props.countColor;
+}, function (props) {
+  return props.countFontSize;
+});
+
+var Date = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    color: #5f5f5f;\n    font-size: 12px;\n"])));
+
+var Desc = (0, _styledComponents.default)(_globalCardStyles.Description)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 2px 20px;\n    color: ", ";\n"])), function (props) {
+  return props.descColor || '#5f5f5f';
+});
+CardStyle6.defaultProps = {};
+var _default = CardStyle6;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = exports.default = void 0;
+
+var _CardStyle = _interopRequireDefault(require("./CardStyle6"));
+
+var _album = _interopRequireDefault(require("../../../assets/images/album1.jpg"));
+
+var _default = {
+  title: 'Reusable Components/cards/Card style 6',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/React.createElement(_CardStyle.default, Object.assign({
+    img: _album.default,
+    title: "Test"
+  }, args));
+};
+
+exports.Card = Card;

package/dist/stories/Reusable Components/Cards/Card-style-7/CardStyle7.js

@@ -0,0 +1,88 @@
+"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 _Controls = _interopRequireDefault(require("../../Controls/Controls"));
+
+var _bs = require("react-icons/bs");
+
+var _globalCardStyles = require("../globalCardStyles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+var _excluded = ["title", "description", "cover", "time"];
+
+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 CardStyle7 = function CardStyle7(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      cover = _ref.cover,
+      time = _ref.time,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showPlay = _useState2[0],
+      setShowPlay = _useState2[1];
+
+  var iconClicked = function iconClicked(action) {
+    props.iconClicked(action, props.index);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onMouseEnter: function onMouseEnter(e) {
+      return setShowPlay(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowPlay(false);
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(ImgContainer, Object.assign({
+    onClick: function onClick() {
+      return props.cardClicked();
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
+    src: cover
+  }), showPlay && /*#__PURE__*/_react.default.createElement(Play, null, /*#__PURE__*/_react.default.createElement(_bs.BsPlayFill, null))), /*#__PURE__*/_react.default.createElement(Content, Object.assign({
+    onClick: function onClick() {
+      return props.cardClicked();
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(Desc, props, description)), /*#__PURE__*/_react.default.createElement(TimeWrapper, null, /*#__PURE__*/_react.default.createElement(Time, null, time)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: true,
+    onIconClicked: iconClicked
+  }, props.controlsStyles)));
+};
+
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    column-gap: 30px;\n    padding-right: 15px;\n"])));
+var ImgContainer = (0, _styledComponents.default)(_globalCardStyles.ImgWrapper)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n    position: relative;\n"])));
+
+var Play = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: #000000ce;\n    width: 100%;\n    height: 100%;\n    color: white;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg{\n        width: 35px;\n        height: 35px;\n    }\n"])));
+
+var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    /* cursor: pointer;\n    justify-content: space-between;\n    border: 1px solid black;\n    background-color: red; */\n"])));
+var Desc = (0, _styledComponents.default)(_globalCardStyles.Description)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    color: #666666;\n"])));
+
+var TimeWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+var Time = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    color: #747474;\n"])));
+
+CardStyle7.defaultProps = {};
+var _default = CardStyle7;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CardStyle = _interopRequireDefault(require("./CardStyle7"));
+
+var _fakeData = require("../../fakeData");
+
+var _music = _interopRequireDefault(require("../../../assets/images/music4.jpg"));
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 7',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+    img: _music.default,
+    title: "Card Style 7",
+    description: "Card style 7 description test",
+    time: "5:10",
+    cardControls: _fakeData.cardControls,
+    controlsStyles: {
+      iconColor: 'black'
+    }
+  }, args));
+};
+
+exports.Card = Card;

package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js

@@ -0,0 +1,86 @@
+"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 _Controls = _interopRequireDefault(require("../../Controls/Controls"));
+
+var _globalCardStyles = require("../globalCardStyles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["username", "date", "text", "img", "media"];
+
+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 CardStyle8 = function CardStyle8(_ref) {
+  var username = _ref.username,
+      date = _ref.date,
+      text = _ref.text,
+      img = _ref.img,
+      media = _ref.media,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showIcons = _useState2[0],
+      setShowIcons = _useState2[1];
+
+  var iconCliked = function iconCliked(action) {
+    console.log(action);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onMouseEnter: function onMouseEnter(e) {
+      return setShowIcons(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowIcons(false);
+    }
+  }, 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(Header, null, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, username), /*#__PURE__*/_react.default.createElement(Date, null, date)), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, text), media && /*#__PURE__*/_react.default.createElement(Media, null, media)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: showIcons,
+    onIconClicked: iconCliked
+  }, props.controlsStyles)));
+};
+
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    column-gap: 30px;\n    align-items: flex-start;\n"])));
+
+var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: ", "px;\n    min-height: ", "px;\n    width: 60px;\n    height: 60px;\n    border-radius: 100%;\n"])), function (props) {
+  return props.imgSize || 60;
+}, function (props) {
+  return props.imgSize || 60;
+});
+
+var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 100%;\n    justify-content: space-between;\n    gap: 10px;\n"])));
+
+var Header = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    gap: 20px;\n"])));
+
+var Date = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 14px;\n    color: gray;\n"])));
+
+var Media = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: 300px;\n\n    *{\n        width: 100%;\n    }\n"])));
+
+CardStyle8.defaultProps = {
+  cardTitleFontSize: 15,
+  cardPadding: 5
+};
+var _default = CardStyle8;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _CardStyle = _interopRequireDefault(require("./CardStyle8"));
+
+var _fakeData = require("../../fakeData");
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 8',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  var _ref;
+
+  return /*#__PURE__*/React.createElement(_CardStyle.default, Object.assign({
+    img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+    username: "Card Style 8",
+    date: "15/12/2021",
+    text: "Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test ",
+    cardControls: _fakeData.controls,
+    media: /*#__PURE__*/React.createElement("img", {
+      src: "https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"
+    }),
+    controlsStyles: (_ref = {
+      iconColor: 'black',
+      showOnHover: true,
+      position: 'absolute',
+      iconBackground: '#414141',
+      iconSize: 18
+    }, (0, _defineProperty2.default)(_ref, "iconColor", 'white'), (0, _defineProperty2.default)(_ref, "dropdownBackground", '#414141'), (0, _defineProperty2.default)(_ref, "dropdownFontColor", 'white'), _ref)
+  }, args));
+};
+
+exports.Card = Card;

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

@@ -0,0 +1,67 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _globalCardStyles = require("../globalCardStyles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+var _excluded = ["username", "answered", "img", "status"];
+
+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 CardStyle9 = function CardStyle9(_ref) {
+  var username = _ref.username,
+      answered = _ref.answered,
+      img = _ref.img,
+      status = _ref.status,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  console.log(props);
+
+  var onAccept = function onAccept() {
+    alert(props.index);
+  };
+
+  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"))));
+};
+
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    gap: 20px;\n    padding: 10px;\n"])));
+
+var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: ", "px;\n    min-height: ", "px;\n    width: 60px;\n    height: 60px;\n    border-radius: 100%;\n"])), function (props) {
+  return props.imgSize || 60;
+}, function (props) {
+  return props.imgSize || 60;
+});
+
+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 Answered = _styledComponents.default.h5(_templateObject4 || (_templateObject4 = (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 Button = _styledComponents.default.button(_templateObject6 || (_templateObject6 = (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 _default = CardStyle9;
+exports.default = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = exports.default = void 0;
+
+var _CardStyle = _interopRequireDefault(require("./CardStyle9"));
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 9',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/React.createElement(_CardStyle.default, Object.assign({
+    img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+    username: "User Name",
+    answered: '3/4',
+    status: "pending"
+  }, args));
+};
+
+exports.Card = Card;

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

@@ -0,0 +1,102 @@
+"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 _Controls = _interopRequireDefault(require("../Controls/Controls"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["title", "description"];
+
+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 Card = function Card(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showIcons = _useState2[0],
+      setShowIcons = _useState2[1];
+
+  console.log(props);
+  return /*#__PURE__*/_react.default.createElement(MainCard, Object.assign({
+    onMouseEnter: function onMouseEnter(e) {
+      return setShowIcons(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowIcons(false);
+    }
+  }, props), props.img && /*#__PURE__*/_react.default.createElement(ImgWrapper, props, /*#__PURE__*/_react.default.createElement(Img, {
+    src: props.img
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Title, props, title), /*#__PURE__*/_react.default.createElement(Discription, props, description)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: showIcons
+  }, props.controlsStyles)));
+};
+
+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    flex-direction: ", ";\n    align-items: center;\n    column-gap: 30px;\n    padding: ", " !important;\n    /* position: relative; */\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    \n"])), function (props) {
+  return props.cardBackgroundColor || 'white';
+}, function (props) {
+  return props.cardRadius;
+}, function (props) {
+  return props.cardBorderSize + 'px solid ' + props.cardBorderColor;
+}, function (props) {
+  return props.cardDirection;
+}, function (props) {
+  return props.cardPadding + 'px' || 0;
+}, function (props) {
+  return props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)';
+}, function (props) {
+  return props.onHoverBackgroundColor;
+});
+
+var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", ";\n"])), function (props) {
+  return props.imgSize || 100;
+}, function (props) {
+  return props.imgSize || 100;
+}, function (props) {
+  return props.cardImageRadius + 'px' || '100%';
+});
+
+var Img = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 100%;\n    object-position: center;\n    object-fit: cover;\n    border-radius: inherit;\n"])));
+
+var Content = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    align-items: ", ";\n    justify-content: space-space-between;\n\n"])), function (props) {
+  return props.cardDirection === 'column' ? 'center' : 'flex-start';
+});
+
+var Title = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n    font-weight: ", ";\n"])), function (props) {
+  return props.cardTitleColor || 'black';
+}, function (props) {
+  return props.cardTitleFontSize;
+}, function (props) {
+  return props.cardTitleFontWeight || 300;
+});
+
+var Discription = _styledComponents.default.h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n    text-align: center;\n    font-weight: 500;\n"])), function (props) {
+  return props.cardDescriptionColor || 'black';
+}, function (props) {
+  return props.cardDescriptionFontSize;
+});
+
+Card.defaultProps = {};
+var _default = Card;
+exports.default = _default;