trepur_components 0.3.0 → 0.3.3

package/dist/components/Nav/index.js

@@ -13,6 +13,8 @@ var _Column = _interopRequireDefault(require("../Column"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,107 +52,72 @@ const Nav = _ref => {
     borderBottom,
     borderBottomColor
   } = _ref;
-  //---------- Styling ---------------
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
-    color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
+  const [showSideNav, setShowSideNav] = (0, _react.useState)(false);
+  const [showDropdownNav, setShowDropdownNav] = (0, _react.useState)(false);
+  const navRowHeight = 'h-16';
+  const firstRowClassList = (0, _classnames.default)({
+    [firstRowClasses]: firstRowClasses
+  }, 'flex');
+  const secondRowClassList = (0, _classnames.default)({
+    [secondRowClasses]: secondRowClasses
+  }, 'flex');
+  const thirdRowClassList = (0, _classnames.default)({
+    [thirdRowClasses]: thirdRowClasses
+  }, 'flex');
+  const styles = (0, _classnames.default)({
+    [mobileNavButtonBgColor]: mobileNavButtonBgColor,
+    'bg-white': !mobileNavButtonBgColor,
+    [mobileNavButtonColor]: mobileNavButtonColor,
+    'text-black': !mobileNavButtonColor,
+    [hoverMobileNavButtonBgColor]: hoverMobileNavButtonBgColor,
+    'hover:bg-black': !hoverMobileNavButtonBgColor,
+    [hoverMobileNavButtonColor]: hoverMobileNavButtonColor,
+    'hover:text-white': !hoverMobileNavButtonColor
   });
-
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setStyles({
-        'backgroundColor': hoverMobileNavButtonBgColor ? hoverMobileNavButtonBgColor : 'black',
-        color: hoverMobileNavButtonColor ? hoverMobileNavButtonColor : 'white'
-      });
-    } else {
-      setStyles({
-        'backgroundColor': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
-        color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
-      });
-    }
-  };
-
-  const [sideNavWidth, setSideNavWidth] = (0, _react.useState)({
-    'width': '0px',
-    'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
+  const sideNavClasses = (0, _classnames.default)({
+    [mobileBgColor]: mobileBgColor,
+    'bg-white': !mobileBgColor,
+    'w-0': !showSideNav,
+    ["w-".concat(sideBarWidth)]: showSideNav
+  }, "z-50 shadow-inner shaddow-lg lg:hidden pt-20 \n        fixed top-0 left-0 z-1 overflow-hidden h-full\n        duration-700");
+  const dropdownNavClasses = (0, _classnames.default)({
+    [mobileBgColor]: mobileBgColor,
+    [bgColor]: !mobileBgColor && bgColor,
+    'bg-white': !mobileBgColor && !bgColor,
+    'h-0': !showDropdownNav,
+    ["h-".concat(dropdownNavHeight)]: showDropdownNav
+  }, 'z-50 lg:hidden duration-500 overflow-hidden');
+  const logoImageClassList = (0, _classnames.default)({
+    [mobileLogoBannerClasses]: mobileLogoBannerClasses
+  }, 'h-16 w-auto');
+  const mobileClassList = (0, _classnames.default)({
+    'fixed w-full z-50 top-0 mt-0': fixedTop,
+    'border-b': borderBottom,
+    [mobileClasses]: mobileClasses
+  }, 'flex items-center lg:hidden py-2');
+  const colors = (0, _classnames.default)({
+    [bgColor]: bgColor,
+    'bg-blue': !bgColor,
+    [borderBottomColor]: borderBottomColor,
+    'border-b-social-facebook': !borderBottomColor
   });
-
-  const openSideNav = () => {
-    setSideNavWidth({
-      'width': "".concat(sideBarWidth),
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor,
-      'paddingRight': '10px'
-    });
-  };
-
-  const closeSideNav = () => {
-    setSideNavWidth({
-      'width': '0px',
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-    });
-  };
-
-  const [navDropdownNavHeight, setDropdownNavHeight] = (0, _react.useState)({
-    'heigth': '0px',
-    'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-  });
-
-  const openDropdownNav = () => {
-    setDropdownNavHeight({
-      'height': "".concat(dropdownNavHeight, "px"),
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-    });
-  };
-
-  const closeDropdownNav = () => {
-    setDropdownNavHeight({
-      'height': '0px',
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-    });
-  };
-
-  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false);
-
-  const toggleDropdownNav = () => {
-    if (mobileMenuState) {
-      closeDropdownNav();
-    } else {
-      openDropdownNav();
-    }
-
-    setmobileMenuState(!mobileMenuState);
-  }; //-----------------------------------
-
-
-  let logoImageClassList = "h-16 w-auto ";
-  logoImageClassList += mobileLogoBannerClasses ? mobileLogoBannerClasses : '';
-  let mobileClassList = "flex items-center lg:hidden py-2";
-  mobileClassList += mobileClasses ? " ".concat(mobileClasses) : '';
-  mobileClassList += fixedTop ? ' fixed w-full z-50 top-0 mt-0' : '';
-  mobileClassList += borderBottom ? ' border-b' : '';
-  let desktopClassList = 'hidden lg:block items-center justify-between sm:items-stretch text-center';
-  desktopClassList += fixedTop ? ' fixed w-full z-50 top-0 mt-0' : '';
-  desktopClassList += borderBottom ? ' border-b border-rose-500' : '';
+  const desktopClassList = (0, _classnames.default)({
+    'fixed w-full z-50 top-0 mt-0': fixedTop,
+    'border-b': borderBottom
+  }, 'hidden lg:block items-center justify-between sm:items-stretch text-center');
   return /*#__PURE__*/_react.default.createElement("nav", {
     id: id,
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "sm-nav",
-    className: mobileClassList,
-    style: {
-      'backgroundColor': bgColor,
-      'borderColor': borderBottomColor
-    }
+    className: "".concat(mobileClassList, " ").concat(colors)
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-collapse-btn-wrapper",
     className: "absolute inset-y-0 left-2 flex items-center"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    style: styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    onClick: asSideBar ? () => openSideNav() : () => toggleDropdownNav(),
+    onClick: asSideBar ? () => setShowSideNav(true) : () => setShowDropdownNav(!showDropdownNav),
     type: "button",
-    className: "inline-flex items-center justify-center p-2 rounded-md focus:ring-2 focus:ring-inset focus:ring-white",
+    className: "inline-flex items-center justify-center \n                            p-2 rounded-md focus:ring-2 focus:ring-inset \n                            focus:ring-white ".concat(styles),
     "aria-controls": "mobile-menu",
     "aria-expanded": "false"
   }, /*#__PURE__*/_react.default.createElement("svg", {
@@ -178,59 +145,60 @@ const Nav = _ref => {
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: logoImageClassList,
     src: mobileLogo,
-    alt: " Logo "
+    alt: "Logo"
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: desktopClassList,
-    style: {
-      'backgroundColor': bgColor,
-      'borderColor': borderBottomColor
-    }
+    className: "".concat(desktopClassList, " ").concat(colors)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'flex ' + firstRowClasses
+    className: firstRowClassList
   }, firstRow && firstRow.map((rowItem, i) => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       key: "row_item_1.".concat(i),
-      classes: rowItem.columnClasses ? "".concat(rowItem.columnClasses, " h-16") : 'h-16',
-      sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth,
-      xl: rowItem.xlColumnWidth
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: rowItem.classes
-    }, rowItem.component));
+      columnProps: {
+        classes: "".concat(navRowHeight, " ").concat(rowItem.columnClasses),
+        sm: rowItem.smColumnWidth,
+        md: rowItem.columnWidth,
+        lg: rowItem.lgColumnWidth,
+        xl: rowItem.xlColumnWidth,
+        children: rowItem.component
+      }
+    });
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'flex ' + secondRowClasses
+    className: secondRowClassList
   }, secondRow && secondRow.map((rowItem, i) => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       key: "row_item_2.".concat(i),
-      classes: "h-16",
-      sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth,
-      xl: rowItem.xlColumnWidth
-    }, rowItem.component);
+      columnProps: {
+        classes: "".concat(navRowHeight, " ").concat(rowItem.columnClasses),
+        sm: rowItem.smColumnWidth,
+        md: rowItem.columnWidth,
+        lg: rowItem.lgColumnWidth,
+        xl: rowItem.xlColumnWidth,
+        children: rowItem.component
+      }
+    });
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'flex ' + thirdRowClasses
+    className: thirdRowClassList
   }, thirdRow && thirdRow.map((rowItem, i) => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       key: "row_item_3.".concat(i),
-      classes: "h-16",
-      sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth,
-      xl: rowItem.xlColumnWidth
-    }, rowItem.component);
+      columnProps: {
+        classes: "".concat(navRowHeight, " ").concat(rowItem.columnClasses),
+        sm: rowItem.smColumnWidth,
+        md: rowItem.columnWidth,
+        lg: rowItem.lgColumnWidth,
+        xl: rowItem.xlColumnWidth,
+        children: rowItem.component
+      }
+    });
   }))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
-    style: sideNavWidth,
-    className: "z-50 shadow-inner shaddow-lg lg:hidden pt-20 fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-700"
+    className: sideNavClasses
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    style: {
-      'color': mobileNavCloseColor
-    },
-    classes: "absolute top-7 left-7",
-    onClick: () => closeSideNav(),
-    type: "times",
-    size: "2"
+    iconProps: {
+      classes: 'absolute top-7 left-7',
+      onClick: () => setShowSideNav(false),
+      type: 'times',
+      size: 2
+    }
   }), mobileItems && mobileItems.map((item, i) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "mobile_item_".concat(i),
@@ -241,8 +209,7 @@ const Nav = _ref => {
 
   /* dropdown */
   _react.default.createElement("div", {
-    style: navDropdownNavHeight,
-    className: "z-50 lg:hidden duration-500 overflow-hidden h-0",
+    className: dropdownNavClasses,
     id: "mobile-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"

package/dist/components/NavItem/index.js

@@ -1,102 +1,113 @@
 "use strict";
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.navItemProps = exports.default = void 0;
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const navItemProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  linkClasses: _propTypes.default.string,
+  name: _propTypes.default.string,
+  url: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  borderColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  bgColor: _propTypes.default.string,
+  hoverBorderColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  bordered: _propTypes.default.bool,
+  rounded: _propTypes.default.bool,
+  underlineOnHover: _propTypes.default.bool,
+  isActive: _propTypes.default.bool,
+  activeBorderColor: _propTypes.default.string,
+  activeTextColor: _propTypes.default.string,
+  activeBgColor: _propTypes.default.string
+};
+exports.navItemProps = navItemProps;
+
 const NavItem = _ref => {
   let {
-    id,
-    classes,
-    linkClasses,
-    name,
-    url,
-    onClick,
-    borderColor,
-    textColor,
-    bgColor,
-    hoverBorderColor,
-    hoverTextColor,
-    hoverBgColor,
-    bordered,
-    rounded,
-    underlineOnHover,
-    isActive,
-    activeBorderColor,
-    activeTextColor,
-    activeBgColor
+    navItemProps
   } = _ref;
-  let classList = 'w-auto list-none ';
-  classList += classes ? classes : '';
-  let linkClassList = 'px-4 mx-2 mb-4 text-center whitespace-nowrap ';
-  linkClassList += isActive ? 'active ' : '';
-  linkClassList += bordered ? 'border ' : '';
-  linkClassList += rounded ? 'rounded-lg ' : '';
-  linkClassList += underlineOnHover ? 'hover:underline ' : '';
-  linkClassList += linkClasses ? linkClasses : ''; //---------- Styling ---------------
-
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'white',
-    color: textColor ? textColor : 'black',
-    'borderColor': borderColor ? borderColor : 'black'
+  if (navItemProps == undefined) return;
+  const classList = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.classes]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.classes
+  }, 'w-auto list-none');
+  const linkClassList = (0, _classnames.default)({
+    'active': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.isActive,
+    'border': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bordered,
+    'rounded-lg': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.rounded,
+    'hover:underline': navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.underlineOnHover,
+    [navItemProps.linkClasses]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.linkClasses
+  }, 'px-4 mx-2 mb-4 text-center whitespace-nowrap');
+  const styleClasses = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bgColor,
+    'bg-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.bgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.textColor,
+    'text-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.textColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.borderColor,
+    'border-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.borderColor)
   });
-  const [activeStyles, setActiveStyles] = (0, _react.useState)({
-    'backgroundColor': activeBgColor ? activeBgColor : 'white',
-    color: activeTextColor ? activeTextColor : 'black',
-    'borderColor': activeBorderColor ? activeBorderColor : 'black'
+  const activeStyleClasses = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBgColor,
+    'bg-blue': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeBgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeTextColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeTextColor,
+    'text-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeTextColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBorderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBorderColor,
+    'border-blue': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeBorderColor)
   });
-
-  const setHoverState = isHovering => {
-    isHovering ? isActive ? setActiveStyles({
-      'backgroundColor': activeBgColor ? activeBgColor : 'black',
-      color: activeTextColor ? activeTextColor : 'white',
-      'borderColor': activeBorderColor ? activeBorderColor : 'black'
-    }) : setStyles({
-      'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-      color: hoverTextColor ? hoverTextColor : 'white',
-      'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
-    }) : isActive ? setActiveStyles({
-      'backgroundColor': activeBgColor ? activeBgColor : 'white',
-      color: activeTextColor ? activeTextColor : 'black',
-      'borderColor': activeBorderColor ? activeBorderColor : 'black'
-    }) : setStyles({
-      'backgroundColor': bgColor ? bgColor : 'white',
-      color: textColor ? textColor : 'black',
-      'borderColor': borderColor ? borderColor : 'black'
-    });
-  }; //-----------------------------------
-
-
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  const hoverStyles = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBgColor,
+    'hover:bg-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverBgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverTextColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverTextColor,
+    'hover:text-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverTextColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBorderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBorderColor,
+    'hover:border-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverBorderColor)
+  });
+  const c = navItemProps !== null && navItemProps !== void 0 && navItemProps.isActive ? activeStyleClasses : styleClasses;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.id) && {
+    id: navItemProps.id
   }, {
     className: classList
   }), /*#__PURE__*/_react.default.createElement("a", {
-    href: url
+    href: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.url
   }, /*#__PURE__*/_react.default.createElement("li", {
-    style: isActive ? activeStyles : styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    key: name,
-    className: linkClassList,
-    onClick: onClick
-  }, name)));
+    className: "".concat(linkClassList, " ").concat(hoverStyles, " ").concat(c),
+    onClick: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.onClick
+  }, navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.name)));
 };
 
+NavItem.propTypes = {
+  navItemProps: _propTypes.default.shape(_objectSpread({}, navItemProps))
+};
 var _default = NavItem;
 exports.default = _default;

package/dist/components/NewsCard/index.js

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Image = _interopRequireDefault(require("../Image"));
 
-var _Column = _interopRequireDefault(require("../Column"));
-
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,53 +27,37 @@ const NewsCard = _ref => {
     classes,
     title,
     content,
-    image,
-    ctaText,
-    buttonType,
-    url,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    hoverButtonBgColor,
-    hoverButtonTextColor,
-    hoverButtonBorderColor,
-    buttonDesign,
+    imageProps,
+    buttonProps,
     rounded,
     boldTitle
   } = _ref;
-  const roundedClasses = rounded ? 'rounded-lg ' : '';
-  let classList = 'border flex p-2 ';
-  classList += roundedClasses;
-  classList += classes ? classes : '';
+  const roundedClasses = (0, _classnames.default)({
+    'rounded-lg': rounded
+  });
+  const titleBold = (0, _classnames.default)({
+    'font-bold': boldTitle
+  });
+  const classList = (0, _classnames.default)({
+    'rounded-lg': rounded,
+    [classes]: classes
+  }, 'border flex p-2');
+  imageProps.classes = roundedClasses;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
     className: classList
-  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 4,
-    md: 2
-  }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-    classes: roundedClasses,
-    image: image
-  })), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 1
-  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 6,
-    className: "expandable w-auto text-center "
-  }, boldTitle ? /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement("p", null, title)) : /*#__PURE__*/_react.default.createElement("p", null, title), /*#__PURE__*/_react.default.createElement("p", null, content), ctaText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    className: "w-full",
-    ctaText: ctaText,
-    buttonType: buttonType,
-    url: url,
-    bgColor: buttonBgColor,
-    textColor: buttonTextColor,
-    borderColor: buttonBorderColor,
-    hoverBgColor: hoverButtonBgColor,
-    hoverTextColor: hoverButtonTextColor,
-    hoverBorderColor: hoverButtonBorderColor
-  }, buttonDesign && {
-    buttonDesign: buttonDesign
-  })))));
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    imageProps: imageProps
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex flex-col justify-between expandable w-auto text-center"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: titleBold
+  }, title), /*#__PURE__*/_react.default.createElement("p", null, content), buttonProps && /*#__PURE__*/_react.default.createElement("div", {
+    className: "px-8"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonProps: buttonProps
+  }))));
 };
 
 var _default = NewsCard;