trepur_components 0.2.12 → 0.2.15

package/dist/components/Carousel/index.css

@@ -1,7 +1,34 @@
-.slick-next {
-  border: 2px solid black;
+.slick-prev {
+  left: -55px;
+}
+.slick-prev:before {
+  height: 50px;
+  color: #31a3dd;
+  font-family: "slick";
+  font-size: 50px;
+  line-height: 1;
+  opacity: 1;
+  z-index: 5;
 }
 
-.slick-prev {
-  border: 2px solid black;
+.slick-next:before {
+  height: 50px;
+  color: #31a3dd;
+  font-family: "slick";
+  font-size: 50px;
+  line-height: 1;
+  opacity: 1;
+  z-index: 5;
+}
+
+.slick-dots li.slick-active button:before {
+  color: #31a3dd;
+  font-size: 12px;
+  opacity: 1;
+}
+
+.slick-dots li button:before {
+  color: pink;
+  font-size: 12px;
+  opacity: 1;
 }

package/dist/components/ImageLink/index.js

@@ -25,15 +25,18 @@ const ImageLink = _ref => {
     altText,
     title,
     ctaText,
-    ctaLink,
-    rounded
+    link,
+    rounded,
+    openInNewTab
   } = _ref;
   const classList = 'cursor-pointer lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 hover:opacity-50 overflow-hidden text-center ' + classes;
   let roundedClass = rounded ? 'rounded-full' : '';
   return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
     id: id
   }, {
-    href: ctaLink
+    href: link
+  }, openInNewTab && {
+    target: 'blank'
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: roundedClass + ' ' + classList + ' relative overflow-hidden'
   }, /*#__PURE__*/_react.default.createElement("img", {

package/dist/components/Nav/index.js

@@ -171,10 +171,10 @@ const Nav = _ref => {
   }, firstRow && firstRow.map(rowItem => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       classes: 'h-16 ' + rowItem.columnClasses,
-      xs: rowItem.xsColumnWidth,
       sm: rowItem.smColumnWidth,
       md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth
+      lg: rowItem.lgColumnWidth,
+      xl: rowItem.xlColumnWidth
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: rowItem.classes
     }, rowItem.component));
@@ -183,18 +183,20 @@ const Nav = _ref => {
   }, secondRow && secondRow.map(rowItem => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       classes: "h-16 ",
-      xs: rowItem.xsColumnWidth,
       sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth
+      md: rowItem.columnWidth,
+      lg: rowItem.lgColumnWidth,
+      xl: rowItem.xlColumnWidth
     }, rowItem.component);
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'flex ' + thirdRowClasses
   }, thirdRow && thirdRow.map(rowItem => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       classes: "h-16",
-      xs: rowItem.xsColumnWidth,
       sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth
+      md: rowItem.columnWidth,
+      lg: rowItem.lgColumnWidth,
+      xl: rowItem.xlColumnWidth
     }, rowItem.component);
   })))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
     style: sideNavWidth,

package/dist/components/NavItem/index.js

@@ -35,38 +35,52 @@ const NavItem = _ref => {
     hoverBgColor,
     bordered,
     rounded,
-    underlineOnHover
+    underlineOnHover,
+    isActive,
+    activeBorderColor,
+    activeTextColor,
+    activeBgColor
   } = _ref;
   let classList = 'w-auto list-none ';
   classList += classes ? classes : '';
-  let linkClassList = linkClasses && linkClasses;
-  const underline = underlineOnHover && ' hover:underline'; //---------- Styling ---------------
+  let linkClassList = 'px-4 mx-2 mb-4 text-center whitespace-nowrap ';
+  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'
   });
+  const [activeStyles, setActiveStyles] = (0, _react.useState)({
+    'backgroundColor': activeBgColor ? activeBgColor : 'white',
+    color: activeTextColor ? activeTextColor : 'black',
+    'borderColor': activeBorderColor ? activeBorderColor : 'black'
+  });
 
   const setHoverState = isHovering => {
-    if (isHovering) {
-      setStyles({
-        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-        color: hoverTextColor ? hoverTextColor : 'white',
-        'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
-      });
-    } else {
-      setStyles({
-        'backgroundColor': bgColor ? bgColor : 'white',
-        color: textColor ? textColor : 'black',
-        'borderColor': borderColor ? borderColor : 'black'
-      });
-    }
+    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'
+    });
   }; //-----------------------------------
 
 
-  let borderClass = bordered ? ' border ' : '';
-  let round = rounded ? ' rounded-lg ' : '';
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
@@ -74,11 +88,11 @@ const NavItem = _ref => {
   }), /*#__PURE__*/_react.default.createElement("a", {
     href: url
   }, /*#__PURE__*/_react.default.createElement("li", {
-    style: styles,
+    style: isActive ? activeStyles : styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
     key: name,
-    className: 'px-4 mx-2 mb-4 text-center ' + linkClassList + borderClass + round + underline,
+    className: linkClassList,
     onClick: onClick
   }, name)));
 };

package/dist/components/StarRating/index.js

@@ -25,12 +25,12 @@ const StarRating = _ref => {
   let {
     id,
     classes,
-    stars = 5,
+    stars,
     size,
     iconClasses
   } = _ref;
   let classList = 'flex ';
-  classList += classes ? classes : classes;
+  classList += classes ? classes : '';
   let iconClassList = iconClasses ? iconClasses : '';
 
   const getStars = () => {
@@ -38,7 +38,8 @@ const StarRating = _ref => {
 
     for (var i = 0; i < stars; i++) {
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        className: "".concat(iconClassList, " checked"),
+        id: "checked-".concat(i),
+        classes: "".concat(iconClassList, " checked"),
         type: "star"
       }, size && {
         size: size
@@ -53,7 +54,7 @@ const StarRating = _ref => {
 
     for (var i = 0; i < 5 - stars; i++) {
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        className: "".concat(iconClassList, " unchecked"),
+        classes: "".concat(iconClassList, " unchecked"),
         type: "star"
       }, size && {
         size: size

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.2.12",
+  "version": "0.2.15",
   "private": false,
   "keywords": [
     "react",