trepur_components 0.2.33 → 0.2.36

package/dist/components/Accordion/index.js

@@ -27,8 +27,9 @@ const Accordion = _ref => {
     id: id
   }, {
     className: classes
-  }), items && items.map(item => {
+  }), items && items.map((item, i) => {
     return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
+      key: item.id + '_' + i,
       id: item.id,
       title: item.title,
       subtitle: item.subtitle,

package/dist/components/Breadcrumbs/index.js

@@ -25,7 +25,8 @@ const Breadcrumbs = _ref => {
     className: classList
   }, links && links.map((link, i) => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "flex"
+      className: "flex",
+      key: i
     }, /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"
     }, i + 1 >= linksLength ? /*#__PURE__*/_react.default.createElement("p", {

package/dist/components/BreadcrumbsBordered/index.js

@@ -46,6 +46,7 @@ const Breadcrumbs = _ref => {
     }
 
     return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
+      key: i,
       classes: margin,
       name: link.name,
       link: link.link,

package/dist/components/BreadcrumbsItem/index.js

@@ -43,16 +43,16 @@ const BreadcrumbsItem = _ref => {
   divClassList += divClasses; //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
-    'background-color': bgColor ? bgColor : 'gray',
+    'backgroundColor': bgColor ? bgColor : 'gray',
     'color': textColor ? textColor : 'black',
     'borderColor': borderColor ? borderColor : 'white'
   });
   const [hoverStyles, setHoverStyles] = (0, _react.useState)({
-    'background-color': 'transparent',
+    'backgroundColor': 'transparent',
     'border-left-color': bgColor ? bgColor : 'gray'
   });
   const [hoverStylesBackArrows, setHoverStylesBackArrows] = (0, _react.useState)({
-    'background-color': 'transparent',
+    'backgroundColor': 'transparent',
     'color': bgColor ? bgColor : 'gray',
     'border-left-color': 'transparent'
   });
@@ -60,31 +60,31 @@ const BreadcrumbsItem = _ref => {
   const setHoverState = isHovering => {
     if (isHovering) {
       setStyles({
-        'background-color': hoverBgColor ? hoverBgColor : 'black',
+        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
         'color': hoverTextColor ? hoverTextColor : 'white',
         'borderColor': hoverBorderColor ? hoverBorderColor : 'white'
       });
       setHoverStyles({
-        'background-color': 'transparent',
+        'backgroundColor': 'transparent',
         'border-left-color': hoverBgColor ? hoverBgColor : 'black'
       });
       setHoverStylesBackArrows({
-        'background-color': 'transparent',
+        'backgroundColor': 'transparent',
         'color': hoverBgColor ? hoverBgColor : 'black',
         'border-left-color': 'transparent'
       });
     } else {
       setStyles({
-        'background-color': bgColor ? bgColor : 'grey',
+        'backgroundColor': bgColor ? bgColor : 'grey',
         'color': textColor ? textColor : 'black',
         'border-color': borderColor ? borderColor : 'white'
       });
       setHoverStyles({
-        'background-color': 'transparent',
+        'backgroundColor': 'transparent',
         'border-left-color': bgColor ? bgColor : 'gray'
       });
       setHoverStylesBackArrows({
-        'background-color': 'transparent',
+        'backgroundColor': 'transparent',
         'color': bgColor ? bgColor : 'gray',
         'border-left-color': 'transparent'
       });

package/dist/components/Button/index.js

@@ -53,7 +53,7 @@ const Button = _ref => {
   let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
   let borderClassList = buttonBordered ? 'border-2 ' : '';
   let roundedClassList = buttonRounded ? 'rounded-full ' : '';
-  let standardClasses = ' rounded-lg text-black transition-background-color duration-500 transform ' + borderClassList + roundedClassList;
+  let standardClasses = ' rounded-lg text-black transition-backgroundColor 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;

package/dist/components/Card/index.js

@@ -11,7 +11,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _index = _interopRequireDefault(require("../Button/index"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 require("../index.css");
 
@@ -79,7 +79,7 @@ const Card = _ref => {
     buttonRounded,
     buttonIconBrand,
     buttonDisabled,
-    onHover = false
+    onHover
   } = _ref;
   const [showHoverButtons, setShowHoverButtons] = (0, _react.useState)(false);
   let orderClass = cardImageBelowTitle ? ' order-first ' : '';
@@ -153,7 +153,7 @@ const Card = _ref => {
     className: cardExtraTextClass && cardExtraTextClass
   }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "flex pt-2"
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     buttonType: "icon",
     buttonUrl: "/",
     buttonCenterIcon: "heart",
@@ -166,7 +166,7 @@ const Card = _ref => {
     buttonBordered: true,
     iconSize: 1,
     iconHollow: true
-  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     buttonClasses: "ml-2 w-full",
     buttonText: "Add to basket",
     buttonBordered: true,
@@ -177,7 +177,7 @@ const Card = _ref => {
     buttonTextColor: "white"
   })))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
-  }, /*#__PURE__*/_react.default.createElement(_index.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     buttonId: buttonId,
     buttonClasses: buttonClasses + ' w-full',
     buttonText: buttonText,

package/dist/components/Collapsible/index.js

@@ -26,6 +26,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Collapsible = _ref => {
   let {
     id,
+    key,
     classes,
     title,
     subtitle,
@@ -46,11 +47,11 @@ const Collapsible = _ref => {
   } = _ref;
   const [expanded, setExpanded] = (0, _react.useState)(false);
   const [styles, setStyles] = (0, _react.useState)({
-    'background-color': bgColor ? bgColor : 'grey',
+    'backgroundColor': bgColor ? bgColor : 'grey',
     color: textColor ? textColor : 'white'
   });
   const [contentStyles, setContentStyles] = (0, _react.useState)({
-    'background-color': contentBgColor ? contentBgColor : 'white',
+    'backgroundColor': contentBgColor ? contentBgColor : 'white',
     color: contentTextColor ? contentTextColor : 'black'
   });
 
@@ -61,12 +62,12 @@ const Collapsible = _ref => {
   const setHoverState = isHovering => {
     if (isHovering) {
       setStyles({
-        'background-color': hoverBgColor ? hoverBgColor : 'black',
+        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
         color: hoverTextColor ? hoverTextColor : 'white'
       });
     } else {
       setStyles({
-        'background-color': bgColor ? bgColor : 'grey',
+        'backgroundColor': bgColor ? bgColor : 'grey',
         color: textColor ? textColor : 'white'
       });
     }
@@ -83,7 +84,8 @@ const Collapsible = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
-    className: classes
+    className: classes,
+    key: key
   }), /*#__PURE__*/_react.default.createElement("div", {
     style: styles,
     onMouseOver: () => setHoverState(true),

package/dist/components/Form/index.js

@@ -49,6 +49,7 @@ const Form = _ref => {
   }), components && components.map(component => {
     if (component.type === 'Input') {
       return /*#__PURE__*/_react.default.createElement(_Input.default, {
+        key: i,
         classes: component.classes,
         label: component.label,
         placeholder: component.placeholder,
@@ -57,6 +58,7 @@ const Form = _ref => {
       });
     } else if (component.type === 'Button') {
       return /*#__PURE__*/_react.default.createElement(_Button.default, {
+        key: i,
         type: component.htmlType,
         onClick: onClick,
         classes: component.classes,

package/dist/components/InformationIcon/index.js

@@ -84,19 +84,19 @@ const InformationIcon = _ref => {
   }, []); //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
-    'background-color': bgColor ? bgColor : 'white',
+    'backgroundColor': bgColor ? bgColor : 'white',
     color: textColor ? textColor : 'black'
   });
 
   const setHoverState = isHovering => {
     if (isHovering) {
       setStyles({
-        'background-color': hoverBgColor ? hoverBgColor : 'white',
+        'backgroundColor': hoverBgColor ? hoverBgColor : 'white',
         color: hoverTextColor ? hoverTextColor : 'black'
       });
     } else {
       setStyles({
-        'background-color': bgColor ? bgColor : 'white',
+        'backgroundColor': bgColor ? bgColor : 'white',
         color: textColor ? textColor : 'black'
       });
     }

package/dist/components/Nav/index.js

@@ -53,19 +53,19 @@ const Nav = _ref => {
   } = _ref;
   //---------- Styling ---------------
   const [styles, setStyles] = (0, _react.useState)({
-    'background-color': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
+    'backgroundColor': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
     color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
   });
 
   const setHoverState = isHovering => {
     if (isHovering) {
       setStyles({
-        'background-color': hoverMobileNavButtonBgColor ? hoverMobileNavButtonBgColor : 'black',
+        'backgroundColor': hoverMobileNavButtonBgColor ? hoverMobileNavButtonBgColor : 'black',
         color: hoverMobileNavButtonColor ? hoverMobileNavButtonColor : 'white'
       });
     } else {
       setStyles({
-        'background-color': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
+        'backgroundColor': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
         color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
       });
     }
@@ -73,13 +73,13 @@ const Nav = _ref => {
 
   const [sideNavWidth, setSideNavWidth] = (0, _react.useState)({
     'width': '0px',
-    'background-color': mobileBgColor ? mobileBgColor : bgColor
+    'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
   });
 
   const openSideNav = () => {
     setSideNavWidth({
       'width': "".concat(sideBarWidth, "px"),
-      'background-color': mobileBgColor ? mobileBgColor : bgColor,
+      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor,
       'padding-right': '10px'
     });
   };
@@ -87,26 +87,26 @@ const Nav = _ref => {
   const closeSideNav = () => {
     setSideNavWidth({
       'width': '0px',
-      'background-color': mobileBgColor ? mobileBgColor : bgColor
+      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
     });
   };
 
   const [navDropdownNavHeight, setDropdownNavHeight] = (0, _react.useState)({
     'heigth': '0px',
-    'background-color': mobileBgColor ? mobileBgColor : bgColor
+    'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
   });
 
   const openDropdownNav = () => {
     setDropdownNavHeight({
       'height': "".concat(dropdownNavHeight, "px"),
-      'background-color': mobileBgColor ? mobileBgColor : bgColor
+      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
     });
   };
 
   const closeDropdownNav = () => {
     setDropdownNavHeight({
       'height': '0px',
-      'background-color': mobileBgColor ? mobileBgColor : bgColor
+      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
     });
   };
 
@@ -139,7 +139,7 @@ const Nav = _ref => {
     id: "sm-nav",
     className: mobileClassList,
     style: {
-      'background-color': bgColor,
+      'backgroundColor': bgColor,
       'border-color': borderBottomColor
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -183,7 +183,7 @@ const Nav = _ref => {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: desktopClassList,
     style: {
-      'background-color': bgColor,
+      'backgroundColor': bgColor,
       'border-color': borderBottomColor
     }
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Testimonial/index.js

@@ -37,7 +37,7 @@ const Testimonial = _ref => {
   const imageClassList = imageClasses + ' mx-auto rounded-full w-32 h-32'; //---------- Styling ---------------
 
   const styles = {
-    'background-color': bgColor,
+    'backgroundColor': bgColor,
     'color': textColor
   }; //-----------------------------------
 

package/dist/components/TextAndTitle/index.js

@@ -37,11 +37,11 @@ const TextAndTitle = _ref => {
   classList += classes ? classes : ''; //---------- Styling ---------------
 
   const textStyles = {
-    'background-color': bgColor,
+    'backgroundColor': bgColor,
     'color': textColor
   };
   const titleStyles = {
-    'background-color': bgColor,
+    'backgroundColor': bgColor,
     'color': titleColor
   }; //-----------------------------------
 

package/package.json

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