trepur_components 0.2.11 → 0.2.14

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

@@ -55,12 +55,6 @@ const Column = _ref => {
 
   let classList = classes ? classes : '';
 
-  if (xs) {
-    let xsClass;
-    xsClass = 'xs:' + calculateWidth(xs);
-    classList += ' ' + xsClass + ' ';
-  }
-
   if (sm) {
     let smClass;
     smClass = calculateWidth(sm);

package/dist/components/Image/index.js

@@ -20,9 +20,7 @@ const Image = _ref => {
     id,
     classes,
     image,
-    altText,
-    height,
-    width
+    altText
   } = _ref;
   const classList = classes ? classes : '';
   return /*#__PURE__*/_react.default.createElement("img", _extends({}, id && {

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,22 +183,24 @@ 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,
-    className: "shadow-inner shaddow-lg lg:hidden pt-20 fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-700"
+    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"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     style: {
       'color': mobileNavCloseColor
@@ -217,7 +219,7 @@ const Nav = _ref => {
   /* dropdown */
   _react.default.createElement("div", {
     style: navDropdownNavHeight,
-    className: "lg:hidden duration-500 overflow-hidden h-0",
+    className: "z-50 lg:hidden duration-500 overflow-hidden h-0",
     id: "mobile-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"

package/dist/components/NavItem/index.js

@@ -78,7 +78,7 @@ const NavItem = _ref => {
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
     key: name,
-    className: 'px-4 mx-2 mb-4 text-center ' + linkClassList + borderClass + round + underline,
+    className: 'px-4 mx-2 mb-4 text-center whitespace-nowrap ' + linkClassList + borderClass + round + underline,
     onClick: onClick
   }, name)));
 };

package/dist/components/Row/index.js

@@ -22,8 +22,9 @@ const Row = _ref => {
     children,
     bordered
   } = _ref;
-  let classList = 'flex flex-wrap ' + classes;
-  classList += bordered ? ' border' : '';
+  let classList = 'flex flex-wrap ';
+  classList += bordered ? ' border ' : '';
+  classList += classes ? classes : '';
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {

package/dist/components/StarRating/index.js

@@ -25,18 +25,21 @@ const StarRating = _ref => {
   let {
     id,
     classes,
-    stars = 5,
+    stars,
     size,
     iconClasses
   } = _ref;
-  let classList = 'flex ' + classes;
+  let classList = 'flex ';
+  classList += classes ? classes : '';
+  let iconClassList = iconClasses ? iconClasses : '';
 
   const getStars = () => {
     const starsArr = [];
 
     for (var i = 0; i < stars; i++) {
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        className: "".concat(iconClasses, " checked"),
+        id: "checked-".concat(i),
+        classes: "".concat(iconClassList, " checked"),
         type: "star"
       }, size && {
         size: size
@@ -51,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(iconClasses, " unchecked"),
+        classes: "".concat(iconClassList, " unchecked"),
         type: "star"
       }, size && {
         size: size

package/dist/components/Timeline/index.css

@@ -43,6 +43,50 @@
   z-index: -1;
 }
 
+/* V - collapse*/
+#circle.vertical.collapse:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#circle.vertical.collapse:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#first-circle.vertical.collapse:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#last-circle.vertical.collapse:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
 /* Horizontal */
 #circle.horizontal:before {
   position: absolute;

package/dist/components/Timeline/index.js

@@ -11,8 +11,6 @@ require("core-js/modules/es.array.reverse.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CardWithTopImage = _interopRequireDefault(require("../CardWithTopImage"));
-
 var _Column = _interopRequireDefault(require("../Column"));
 
 var _Image = _interopRequireDefault(require("../Image"));
@@ -31,6 +29,7 @@ const Timeline = _ref => {
   let {
     id,
     classes,
+    imageClasses,
     isHorizontal,
     items,
     reverse,
@@ -38,18 +37,20 @@ const Timeline = _ref => {
     useImages,
     horizontalComponentClasses
   } = _ref;
+  const isSm = window.innerWidth < 768;
   let classList = 'w-full list-none overflow-x-auto pb-4 ';
-  classList += classes && classes;
+  classList += classes ? classes : '';
   let ulClasses = 'timeline status-flow relative list-none pl-0 flex ';
-  let liClasses = 'my-0 status-flow-item relative flex flex-auto flex-row leading-tight ';
+  let liClasses = 'status-flow-item relative flex flex-auto flex-row leading-tight ';
   liClasses += textCenter ? 'text-center ' : '';
   ulClasses += !reverse ? isHorizontal ? 'flex-row none-reverse justify-between' : 'flex-col none-reverse' : isHorizontal ? 'flex-row reverse justify-between' : 'flex-col reverse';
   liClasses += !reverse ? isHorizontal ? 'items-center flex-col justify-between' : 'flex-row none-reverse' : isHorizontal ? 'items-center flex-col-reverse' : ' flex-row-reverse';
   let padding;
   padding = !reverse ? isHorizontal ? 'pb-2' : 'pl-4' : isHorizontal ? 'pt-2' : 'pr-4';
-  let imageCircle = 'my-16 text-center mx-auto rounded-full border bg-black ';
+  let imageClassList = 'my-16 text-center mx-auto rounded-full border bg-black ';
+  imageClassList += imageClasses ? imageClasses : '';
   let circle = 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black ';
-  circle += isHorizontal ? 'horizontal' : 'vertical';
+  circle += isHorizontal ? isSm ? 'horizontal collapse' : 'horizontal' : isSm ? 'vertical collapse' : 'vertical';
   return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({
     sm: 12
   }, id && {
@@ -61,7 +62,7 @@ const Timeline = _ref => {
   }, items && items.map((item, i) => {
     let before;
     if (i % 2 === 0) before = true;else before = false;
-    let a = isHorizontal ? '' : i === 0 ? '' : ' ';
+    let a = isHorizontal && isHorizontal ? '' : i === 0 ? '' : ' ';
     let circlePos;
 
     if (items.length - 1 > 0) {
@@ -71,48 +72,47 @@ const Timeline = _ref => {
     if (isHorizontal) {
       return /*#__PURE__*/_react.default.createElement(_Column.default, {
         id: "timeline-item",
-        className: liClasses + ' py-4 ' + a
+        classes: liClasses + ' py-4 mb-8 ' + a
       }, /*#__PURE__*/_react.default.createElement(_Row.default, {
-        className: horizontalComponentClasses
+        classes: horizontalComponentClasses
       }, before && item.component), /*#__PURE__*/_react.default.createElement(_Row.default, null, useImages ? /*#__PURE__*/_react.default.createElement("div", {
         id: circlePos,
         className: isHorizontal ? 'horizontal py-0 my-0' : 'vertical'
       }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-        classes: imageCircle,
-        image: item.logo,
-        width: 20,
-        height: 20
+        classes: imageClassList,
+        image: item.logo
       })) : /*#__PURE__*/_react.default.createElement("p", {
         id: circlePos,
         className: circle
       })), /*#__PURE__*/_react.default.createElement(_Row.default, {
-        className: horizontalComponentClasses
+        classes: horizontalComponentClasses
       }, !before && item.component));
     } else {
       return /*#__PURE__*/_react.default.createElement(_Row.default, {
         id: "timeline-item",
-        className: liClasses + ' py-4 ' + a
-      }, /*#__PURE__*/_react.default.createElement(_Column.default, {
-        sm: 5,
-        className: "text-center my-auto"
+        classes: liClasses + ' py-4 ' + a
+      }, !isSm && /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: "5",
+        classes: "text-center my-auto"
       }, before && item.component), /*#__PURE__*/_react.default.createElement(_Column.default, {
         id: "circle-wrapper",
         sm: 2,
-        className: "my-auto"
+        classes: "my-auto"
       }, useImages ? /*#__PURE__*/_react.default.createElement("div", {
         id: circlePos,
-        className: isHorizontal ? 'horizontal' : 'vertical'
+        className: isSm ? 'vertical collapse' : 'vertical'
       }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-        classes: imageCircle,
-        image: item.logo,
-        width: 20,
-        height: 20
+        classes: imageClassList,
+        image: item.logo
       })) : /*#__PURE__*/_react.default.createElement("p", {
         id: circlePos,
         className: circle
-      })), /*#__PURE__*/_react.default.createElement(_Column.default, {
-        sm: 5,
-        className: "text-center my-auto"
+      })), isSm && /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: "10",
+        classes: "text-center my-auto"
+      }, item.component), !isSm && /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: "5",
+        classes: "text-center my-auto"
       }, !before && item.component));
     }
   })));

package/package.json

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