@mohamed-karawia/react-storybook 0.1.1

package/dist/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.js

@@ -0,0 +1,35 @@
+"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("./CardStyle1"));
+
+var _fakeData = require("../../fakeData");
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 1',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+    img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+    title: "Card Style 1",
+    description: "Card style 1 description test",
+    cardControls: _fakeData.cardControls,
+    controlsStyles: {
+      iconColor: 'black',
+      showOnHover: true
+    }
+  }, args));
+};
+
+exports.Card = Card;

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

@@ -0,0 +1,81 @@
+"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 _ai = require("react-icons/ai");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["title", "description", "img", "cardControls"];
+
+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 CardStyle10 = function CardStyle10(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      img = _ref.img,
+      cardControls = _ref.cardControls,
+      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(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({
+    controls: cardControls,
+    show: showIcons,
+    onIconClicked: iconCliked,
+    showOnHover: true,
+    position: "absolute",
+    iconBorderRadius: 100,
+    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 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;
+});
+
+CardStyle10.defaultProps = {};
+var _default = CardStyle10;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.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 _CardStyle = _interopRequireDefault(require("./CardStyle10"));
+
+var _ai = require("react-icons/ai");
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 10',
+  component: _CardStyle.default
+};
+exports.default = _default;
+var cardControls = [{
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineHeart, null),
+  action: 'like',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineAudioMuted, null),
+  action: 'mute',
+  name: 'Add member'
+}];
+
+var Card = function Card(args) {
+  return /*#__PURE__*/React.createElement(_CardStyle.default, Object.assign({
+    title: "Folder",
+    description: "Folder description test",
+    cardControls: cardControls
+  }, args));
+};
+
+exports.Card = Card;

package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.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 _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 _bi = require("react-icons/bi");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["title", "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 CardStyle11 = function CardStyle11(_ref) {
+  var title = _ref.title,
+      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 iconClicked = function iconClicked(action) {
+    props.iconClicked(action, props.index);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Card, props, /*#__PURE__*/_react.default.createElement(SvgWrapper, props, /*#__PURE__*/_react.default.createElement(_bi.BiNotepad, null)), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(Date, props, date)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: showIcons,
+    onIconClicked: iconClicked
+  }, props.controlsStyles)));
+};
+
+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 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) {
+  return props.iconColor;
+});
+
+CardStyle11.defaultProps = {};
+var _default = CardStyle11;
+exports.default = _default;

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

@@ -0,0 +1,40 @@
+"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("./CardStyle11"));
+
+var _ai = require("react-icons/ai");
+
+var _default = {
+  title: 'Reusable components/Cards/Card Style 11',
+  component: _CardStyle.default
+};
+exports.default = _default;
+var cardControls = [{
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineHeart, null),
+  action: 'like',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineAudioMuted, null),
+  action: 'mute',
+  name: 'Add member'
+}];
+
+var Card = function Card(args) {
+  return /*#__PURE__*/React.createElement(_CardStyle.default, Object.assign({
+    title: "Study Notes",
+    date: "15/11/2021",
+    cardControls: cardControls,
+    controlsStyles: {
+      iconColor: 'black'
+    }
+  }, args));
+};
+
+exports.Card = Card;

package/dist/stories/Reusable Components/Cards/Card-style-2/CardStyle2.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 _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;
+
+var _excluded = ["title", "description", "img"];
+
+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 CardStyle2 = function CardStyle2(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      img = _ref.img,
+      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(_globalCardStyles.ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
+    src: img
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, 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    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"])));
+CardStyle2.defaultProps = {};
+var _default = CardStyle2;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-2/CardStyle2.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("./CardStyle2"));
+
+var _fakeData = require("../../fakeData");
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 2',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+    img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+    title: "Card Style 2",
+    description: "Card style 2 description test",
+    cardControls: _fakeData.cardControls,
+    darkOnHover: true,
+    controlsStyles: {
+      iconColor: 'black',
+      position: 'center',
+      showOnHover: true
+    }
+  }, args));
+};
+
+exports.Card = Card;

package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js

@@ -0,0 +1,65 @@
+"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;
+
+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 CardStyle3 = function CardStyle3(_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];
+
+  var iconCliked = function iconCliked(action) {
+    console.log(action);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_globalCardStyles.MainCard, Object.assign({
+    onMouseEnter: function onMouseEnter(e) {
+      return setShowIcons(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowIcons(false);
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, description)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: showIcons,
+    onIconClicked: iconCliked
+  }, props.controlsStyles)));
+};
+
+var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    row-gap: ", "px;\n"])), function (props) {
+  return props.rowGap;
+});
+CardStyle3.defaultProps = {};
+var _default = CardStyle3;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.js

@@ -0,0 +1,34 @@
+"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("./CardStyle3"));
+
+var _fakeData = require("../../fakeData");
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 3',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+    img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+    title: "Card Style 3",
+    description: "Card style 3 description test",
+    cardControls: _fakeData.cardControls,
+    controlsStyles: {
+      iconColor: 'black'
+    }
+  }, args));
+};
+
+exports.Card = Card;

package/dist/stories/Reusable Components/Cards/Card-style-4/CardStyle4.js

@@ -0,0 +1,66 @@
+"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;
+
+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 CardStyle4 = function CardStyle4(_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];
+
+  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(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, 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    justify-content: center;\n"])));
+var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    row-gap: ", "px;\n"])), function (props) {
+  return props.rowGap;
+});
+CardStyle4.defaultProps = {};
+var _default = CardStyle4;
+exports.default = _default;

package/dist/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.js

@@ -0,0 +1,39 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _CardStyle = _interopRequireDefault(require("./CardStyle4"));
+
+var _fakeData = require("../../fakeData");
+
+var _default = {
+  title: 'Reusable Components/Cards/Card style 4',
+  component: _CardStyle.default
+};
+exports.default = _default;
+
+var Card = function Card(args) {
+  return /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+    img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+    title: "Card Style 4",
+    description: "Card style 4 description test",
+    cardControls: _fakeData.cardControls,
+    darkOnHover: true,
+    controlsStyles: (0, _defineProperty2.default)({
+      iconColor: 'black',
+      position: 'center',
+      showOnHover: true
+    }, "iconColor", 'red')
+  }, args));
+};
+
+exports.Card = Card;