trepur_components 0.2.13 → 0.2.16

package/dist/components/Button/index.js

@@ -36,18 +36,22 @@ const Button = _ref => {
     buttonCenterIcon,
     buttonBgColor,
     buttonTextColor,
-    borderColor,
+    buttonBorderColor,
     hoverButtonBgColor,
     hoverButtonTextColor,
-    hoverBorderColor,
+    hoverButtonBorderColor,
     hoverCtaText,
     url,
     buttonType,
-    buttonDesign
+    buttonDesign,
+    border,
+    rounded
   } = _ref;
-  let padding = buttonType === 'social' ? 'px-4 py-3 ' : 'px-8 ';
+  let padding = buttonType === 'social' ? 'px-1 py-1 ' : 'px-8 ';
   let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
-  let standardClasses = ' rounded-lg text-black border-2 border-black border-gray-300 transition-background-color duration-500 transform ';
+  let borderClassList = border ? 'border-2 ' : '';
+  let roundedClassList = rounded ? 'rounded-full ' : '';
+  let standardClasses = ' rounded-lg text-black transition-background-color duration-500 transform ' + borderClassList + roundedClassList;
   let slideClasses = ' btn px-8 text-white border-2 bg-gray hover:bg-brand-primary hover:text-black ';
   let classList = padding;
   classList += externalPadding;
@@ -60,17 +64,21 @@ const Button = _ref => {
     classList += slideClasses;
   }
 
+  const iconClassList = buttonType === 'social' ? 'fa-brands' : '';
+
   let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: "pr-2",
+    classes: "pr-2",
     type: buttonLeftIcon
   });
 
   let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: "pl-2",
+    classes: "pl-2",
     type: buttonRightIcon
   });
 
   let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    size: "3",
+    classes: iconClassList,
     type: buttonCenterIcon
   }); //---------- Styling ---------------
 
@@ -78,7 +86,7 @@ const Button = _ref => {
   const [styles, setStyles] = (0, _react.useState)({
     'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
     color: buttonTextColor ? buttonTextColor : 'black',
-    'borderColor': borderColor ? borderColor : 'black'
+    'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
   });
   const [hovering, setHovering] = (0, _react.useState)(false);
 
@@ -88,14 +96,14 @@ const Button = _ref => {
       setStyles({
         'backgroundColor': hoverButtonBgColor ? hoverButtonBgColor : 'black',
         color: hoverButtonTextColor ? hoverButtonTextColor : 'white',
-        'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
+        'borderColor': hoverButtonBorderColor ? hoverButtonBorderColor : 'black'
       });
     } else {
       setHovering(false);
       setStyles({
         'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
         color: buttonTextColor ? buttonTextColor : 'black',
-        'borderColor': borderColor ? borderColor : 'black'
+        'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
       });
     }
   }; //-----------------------------------
@@ -139,6 +147,24 @@ const Button = _ref => {
       onMouseOut: () => setHoverState(false),
       className: classList
     }, buttonCenterIcon && iconCenter));
+  } else if (buttonType === 'loading') {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
+      id: id
+    }, {
+      href: url,
+      target: "_blank",
+      rel: "noreferrer"
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      style: styles,
+      onMouseOver: () => setHoverState(true),
+      onMouseOut: () => setHoverState(false),
+      className: 'flex ' + classList
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "spinner",
+      animation: "pulse"
+    })), /*#__PURE__*/_react.default.createElement("p", {
+      className: "pl-3"
+    }, "Loading")));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, id && {

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/Form/index.js

@@ -39,17 +39,20 @@ const Form = _ref => {
     id: id
   }, {
     className: classes
-  }), /*#__PURE__*/_react.default.createElement("h1", {
-    className: "text-center"
-  }, /*#__PURE__*/_react.default.createElement("b", null, title)), components && components.map(component => {
-    if (component.type === 'Input') {
+  }), components && components.map(component => {
+    if (component.type === 'Title') {
+      return /*#__PURE__*/_react.default.createElement("h1", {
+        className: component.classes
+      }, component.text);
+    } else if (component.type === 'Input') {
       return /*#__PURE__*/_react.default.createElement(_Input.default, {
-        classes: "py-4",
+        classes: component.classes,
         label: component.label,
         placeholder: component.placeholder
       });
     } else if (component.type === 'Button') {
       return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+        classes: component.classes,
         ctaText: component.ctaText,
         bgColor: buttonBgColor,
         textColor: buttonTextColor,

package/dist/components/Icon/index.js

@@ -1,11 +1,13 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.array.reverse.js");
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -21,16 +23,22 @@ const Icon = _ref => {
     classes,
     type,
     size,
-    onClick
+    onClick,
+    style,
+    animation,
+    reverse
   } = _ref;
   if (!type) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-  let classList = "fa fa-".concat(type, " fa-x ");
+  let classList = "fa fa-".concat(type, " ");
   classList += size ? "fa-".concat(size, "x ") : '';
+  classList += animation ? "fa-".concat(animation, " ") : '';
+  classList += reverse ? ' fa-spin-reverse ' : '';
   classList += classes ? classes : '';
   return /*#__PURE__*/_react.default.createElement("span", _extends({}, id && {
     id: id
   }, {
     className: classList,
+    style: style,
     role: "img",
     "aria-hidden": "true",
     "aria-label": type

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/InformationIcon/index.js

@@ -11,15 +11,19 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
 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 _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 Icon = _ref => {
+const InformationIcon = _ref => {
   let {
     id,
     classes,
@@ -33,28 +37,62 @@ const Icon = _ref => {
     bgColor,
     textColor,
     hoverTextColor,
-    hoverBgColor
+    hoverBgColor,
+    withAnimation
   } = _ref;
-  let imageClassList = "fa fa-".concat(type, " fa-x mx-auto ");
-  imageClassList += size && "fa-".concat(size, "x ");
-  imageClassList += imageClasses && imageClasses;
-  let borderClass = bordered && 'border ';
-  let roundedClass = rounded && 'rounded-2xl ';
+  const [isHovering, setIsHovering] = (0, _react.useState)(false);
+  let loaded = (0, _react.useRef)(false);
+  let imageClassList = 'mx-auto pt-2 ';
+  imageClassList += imageClasses ? imageClasses : '';
   let classList = 'hover:scale-110 transform transition duration-500 flex flex-col w-64 ';
+  classList += bordered ? 'border ' : '';
+  classList += rounded ? 'rounded-2xl ' : '';
   classList += classes ? classes : '';
-  classList += ' ' + borderClass + ' ' + roundedClass;
   const numberClass = number !== null && 'text-4xl';
   const numberClasses = 'text-center ' + numberClass;
   const textClass = number === null && 'text-2xl';
-  const textClasses = 'text-center px-2 ' + textClass; //---------- Styling ---------------
+  const textClasses = 'text-center px-2 ' + textClass;
+
+  const counterAnimation = (obj, start, end, duration) => {
+    let startTimestamp = null;
+
+    const step = timestamp => {
+      if (!startTimestamp) startTimestamp = timestamp;
+      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+      obj.innerHTML = Math.floor(progress * (end - start) + start);
+
+      if (progress < 1) {
+        window.requestAnimationFrame(step);
+      }
+    };
+
+    window.requestAnimationFrame(step);
+  };
+
+  (0, _react.useEffect)(() => {
+    const element = document.getElementById('number');
+    let observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.intersectionRatio >= 0.1 && loaded.current == false) {
+          loaded.current = true;
+          counterAnimation(document.getElementById('number'), 0, number, 3000);
+        } else {}
+      });
+    }, {
+      threshold: 1
+    });
+    withAnimation && observer.observe(element);
+  }, []); //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
     'background-color': bgColor ? bgColor : 'white',
     color: textColor ? textColor : 'black'
   });
 
-  const setHoverState = isHovering => {
-    if (isHovering) {
+  const setHoverState = () => {
+    setIsHovering(!isHovering);
+
+    if (isHovering === true) {
       setStyles({
         'background-color': hoverBgColor ? hoverBgColor : 'white',
         color: hoverTextColor ? hoverTextColor : 'black'
@@ -73,19 +111,19 @@ const Icon = _ref => {
   }, {
     style: styles,
     className: classList,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false)
-  }), type && /*#__PURE__*/_react.default.createElement("span", {
-    className: imageClassList,
-    role: "img",
-    "aria-hidden": "true",
-    "aria-label": type
+    onMouseOver: () => setHoverState(),
+    onMouseOut: () => setHoverState()
+  }), type && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: type,
+    size: 4,
+    classes: imageClassList
   }), number && /*#__PURE__*/_react.default.createElement("p", {
+    id: "number",
     className: numberClasses
   }, number), /*#__PURE__*/_react.default.createElement("p", {
     className: textClasses
   }, text));
 };
 
-var _default = Icon;
+var _default = InformationIcon;
 exports.default = _default;

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,53 @@ 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 += 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'
   });
+  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 +89,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/NewsCard/index.js

@@ -41,10 +41,10 @@ const NewsCard = _ref => {
     rounded,
     boldTitle
   } = _ref;
-  const roundedClasses = rounded && 'rounded-lg';
+  const roundedClasses = rounded ? 'rounded-lg ' : '';
   let classList = 'border flex p-2 ';
-  classList += classes ? classes : '';
   classList += roundedClasses;
+  classList += classes ? classes : '';
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {

package/dist/components/index.css

@@ -1,4 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css");

package/package.json

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