trepur_components 0.1.26 → 0.1.30

package/dist/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._BreadcrumbsBordered = exports.WithOnlyOneLink = void 0;
+exports.default = exports._BreadcrumbsBordered = exports.WithOnlyOneLink = exports.WithColors = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,8 +11,6 @@ var _README = _interopRequireDefault(require("./README.md"));
 
 var _index = _interopRequireDefault(require("./index"));
 
-require("./index.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const links = [{
@@ -45,12 +43,27 @@ exports.default = _default;
 
 const _BreadcrumbsBordered = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
-    links: links
+    links: links,
+    textColor: "white"
   });
 };
 
 exports._BreadcrumbsBordered = _BreadcrumbsBordered;
 
+const WithColors = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    bgColor: "#38B6FF",
+    borderColor: "white",
+    textColor: "white",
+    hoverTextColor: "#38B6FF",
+    hoverBgColor: "white",
+    hoverBorderColor: "#38B6FF"
+  });
+};
+
+exports.WithColors = WithColors;
+
 const WithOnlyOneLink = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: link

package/dist/components/BreadcrumbsBordered/index.js

@@ -7,54 +7,47 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./index.css");
+var _index = _interopRequireDefault(require("../BreadcrumbsBorderedItem/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Breadcrumbs = _ref => {
   let {
     className,
-    links
+    links,
+    textColor,
+    bgColor,
+    borderColor,
+    hoverTextColor,
+    hoverBgColor,
+    hoverBorderColor
   } = _ref;
   const linksLength = Object.keys(links).length;
   let classes = 'flex py-2 px-8 ' + className;
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: classes
   }, links && links.map((link, i) => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: link.name,
-      className: "item"
-    }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: " bc-item px-4 mx-3 hover:bg-brand-secondary bg-brand-border border-brand-secondary h-8"
-    }, linksLength !== 1 ? i + 1 < linksLength ? i === 0 ? /*#__PURE__*/_react.default.createElement("a", {
-      href: link.link
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: i !== 0 ? 'pl-2 pt-1 text-social-facebook hover:underline' : 'pt-1 hover:underline'
-    }, link.name, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-arrow"
-    }))) : /*#__PURE__*/_react.default.createElement("a", {
-      href: link.link
-    }, /*#__PURE__*/_react.default.createElement("p", {
-      className: i !== 0 ? 'pl-2 pt-1 hover:underline' : 'pt-1 text-social-facebook hover:underline'
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "test-arrow-bottom"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "test-arrow-top"
-    }), link.name, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-arrow"
-    }))) : /*#__PURE__*/_react.default.createElement("p", {
-      className: "pt-1"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "test-arrow-bottom"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "test-arrow-top"
-    }), link.name, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-arrow"
-    })) : /*#__PURE__*/_react.default.createElement("p", {
-      className: "pt-1"
-    }, link.name, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-arrow"
-    })))));
+    let margin = i === 0 ? ' mr-3' : ' mx-3';
+    let first = i === 0 ? true : false;
+    let bType = 'standard';
+
+    if (linksLength >= 1 && i + 1 < linksLength) {
+      bType = 'link';
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_index.default, {
+      classNames: margin,
+      name: link.name,
+      link: link.link,
+      type: bType,
+      firstItem: first,
+      textColor: textColor,
+      bgColor: bgColor,
+      borderColor: borderColor,
+      hoverTextColor: hoverTextColor,
+      hoverBgColor: hoverBgColor,
+      hoverBorderColor: hoverBorderColor
+    });
   }));
 };
 

package/dist/components/BreadcrumbsBorderedItem/BreadcrumbsBorderedItem.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._BreadcrumbsItem = exports.WithColors = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const link = '/';
+const name = 'link 1';
+var _default = {
+  title: 'Components/BreadcrumbsItem',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _BreadcrumbsItem = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    link: link,
+    name: name,
+    textColor: "white"
+  });
+};
+
+exports._BreadcrumbsItem = _BreadcrumbsItem;
+
+const WithColors = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    link: link,
+    name: name,
+    bgColor: "#38B6FF",
+    borderColor: "white",
+    textColor: "white",
+    hoverTextColor: "#38B6FF",
+    hoverBgColor: "white",
+    hoverBorderColor: "#38B6FF"
+  });
+};
+
+exports.WithColors = WithColors;

package/dist/components/BreadcrumbsBorderedItem/README.md

@@ -0,0 +1,28 @@
+# Breadcrumbs
+
+Breadcrumbs with a bit of styling
+
+## Example
+
+```
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+ <BreadCrumbs links={links} />
+```
+
+## Parameters
+`links={array} (default=null)`
+`classNames={string} (default=null)`

package/dist/components/{BreadcrumbsBordered → BreadcrumbsBorderedItem}/index.css

@@ -8,7 +8,7 @@
     @apply h-0;
     border-top: 17px solid transparent;
     border-bottom: 15px solid transparent;
-    border-left: 16px solid theme('colors.brand-border');
+    border-left: 16px solid ;
     @apply absolute;
     right: -16px;
     @apply top-0;
@@ -17,7 +17,7 @@
 .test-arrow-bottom {
     @apply w-0;
     @apply h-0;
-    border-top: 17px solid theme('colors.brand-border');
+    border-top: 17px solid ;
     border-bottom: 18px solid transparent;
     border-left: 17px solid transparent;
     @apply absolute;
@@ -30,7 +30,7 @@
 .test-arrow-top {
     @apply w-0;
     @apply h-0;
-    border-top: 18px solid theme('colors.brand-border');
+    border-top: 18px solid ;
     border-bottom: 17px solid transparent;
     border-left: 17px solid transparent;
     @apply absolute;
@@ -42,15 +42,15 @@
     @apply relative;
 }
 
-.item:hover .right-arrow {
-    border-left-color: theme('colors.brand-secondary');
+/* .item:hover .right-arrow {
+    border-left-color: theme('colors.white');
 }
 .item:hover .test-arrow-bottom {
-    border-top-color: theme('colors.brand-secondary');
+    border-top-color: theme('colors.white');
 }
 .item:hover .test-arrow-top {
-    border-top-color: theme('colors.brand-secondary');
-}
+    border-top-color: theme('colors.white');
+} */
 
 .bc-item:focus {
     @apply border-0;

package/dist/components/BreadcrumbsBorderedItem/index.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./index.css");
+
+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; }
+
+const BreadcrumbsItem = _ref => {
+  let {
+    classNames,
+    name,
+    link,
+    type,
+    firstItem,
+    textColor,
+    bgColor,
+    borderColor,
+    hoverTextColor,
+    hoverBgColor,
+    hoverBorderColor
+  } = _ref;
+  //---------- Styling ---------------
+  const [styles, setStyles] = (0, _react.useState)({
+    'background-color': bgColor ? bgColor : 'gray',
+    color: textColor ? textColor : 'black',
+    'borderColor': borderColor ? borderColor : 'white'
+  });
+  const [hoverStyles, setHoverStyles] = (0, _react.useState)({
+    'background-color': 'transparent',
+    'border-left-color': bgColor ? bgColor : 'gray'
+  });
+  const [hoverStylesBackArrows, setHoverStylesBackArrows] = (0, _react.useState)({
+    'background-color': 'transparent',
+    'color': bgColor ? bgColor : 'gray',
+    'border-left-color': 'transparent'
+  });
+
+  const setHoverState = isHovering => {
+    if (isHovering) {
+      setStyles({
+        'background-color': hoverBgColor ? hoverBgColor : 'black',
+        color: hoverTextColor ? hoverTextColor : 'white',
+        'borderColor': hoverBorderColor ? hoverBorderColor : 'white'
+      });
+      setHoverStyles({
+        'background-color': 'transparent',
+        'border-left-color': hoverBgColor ? hoverBgColor : 'black'
+      });
+      setHoverStylesBackArrows({
+        'background-color': 'transparent',
+        'color': hoverBgColor ? hoverBgColor : 'black',
+        'border-left-color': 'transparent'
+      });
+    } else {
+      setStyles({
+        'background-color': bgColor ? bgColor : 'grey',
+        color: textColor ? textColor : 'black',
+        'border-color': borderColor ? borderColor : 'white'
+      });
+      setHoverStyles({
+        'background-color': 'transparent',
+        'border-left-color': bgColor ? bgColor : 'gray'
+      });
+      setHoverStylesBackArrows({
+        'background-color': 'transparent',
+        'color': bgColor ? bgColor : 'gray',
+        'border-left-color': 'transparent'
+      });
+    }
+  }; //-----------------------------------
+
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: name,
+    className: "item"
+  }, type === 'link' ? firstItem ? /*#__PURE__*/_react.default.createElement("a", {
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    style: styles,
+    href: link,
+    className: "hover:underline"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    className: 'bc-item px-4 h-8 ' + classNames
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: !firstItem ? 'text-center  pt-1' : 'text-center pt-1'
+  }, name, /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStyles,
+    className: "right-arrow"
+  }))))) : /*#__PURE__*/_react.default.createElement("a", {
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    style: styles,
+    href: link,
+    className: "hover:underline"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    className: 'bc-item px-4 h-8 ' + classNames
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: !firstItem ? 'text-center  pt-1' : 'text-center pt-1'
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStylesBackArrows,
+    className: "test-arrow-bottom"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStylesBackArrows,
+    className: "test-arrow-top"
+  }), name, /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStyles,
+    className: "right-arrow"
+  }))))) : firstItem ? /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    className: 'bc-item px-4 h-8 ' + classNames
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-center pt-1"
+  }, name, /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStyles,
+    className: "right-arrow"
+  })))) : /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-none"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    className: 'bc-item px-4 h-8 ' + classNames
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-center pt-1"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStylesBackArrows,
+    className: "test-arrow-bottom"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStylesBackArrows,
+    className: "test-arrow-top"
+  }), name, /*#__PURE__*/_react.default.createElement("span", {
+    style: hoverStyles,
+    className: "right-arrow"
+  })))));
+};
+
+var _default = BreadcrumbsItem;
+exports.default = _default;

package/dist/components/Button/Button.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withStyles = exports.default = exports._Button = exports.WithIconRight = exports.WithIconLeft = exports.WithBothIcons = exports.ButtonAsInternalLink = exports.ButtonAsExternalLink = exports.AsSocialButton = void 0;
+exports.withStyles = exports.default = exports._Button = exports.WithSlideDesign = exports.WithIconRight = exports.WithIconLeft = exports.WithBothIcons = exports.SlideButton = exports.AsSocialButton = exports.AsSlideWithStyles = exports.AsSlideWithSocialButton = exports.AsSlideWithInternalLink = exports.AsSlideWithExternalLink = exports.AsInternalLink = exports.AsExternalLink = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -87,6 +87,7 @@ var _default = {
       control: {
         type: 'color'
       },
+      default: 'blue',
       table: {
         category: 'Hover',
         subcategory: 'Colors'
@@ -177,6 +178,23 @@ const _Button = args => {
 
 exports._Button = _Button;
 
+const SlideButton = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    ctaText: args.text,
+    bgColor: args.bgColor,
+    textColor: args.textColor,
+    borderColor: args.borderColor,
+    hoverCtaText: args.hoverText,
+    hoverTextColor: args.hoverTextColor,
+    hoverBgColor: args.hoverBgColor,
+    hoverBorderColor: args.hoverBorderColor,
+    onClick: (0, _addonActions.action)('button-click'),
+    buttonDesign: "slide"
+  });
+};
+
+exports.SlideButton = SlideButton;
+
 const withStyles = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     ctaText: args.text,
@@ -194,6 +212,24 @@ const withStyles = args => {
 
 exports.withStyles = withStyles;
 
+const AsSlideWithStyles = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    ctaText: args.text,
+    bgColor: "red",
+    textColor: "white",
+    borderColor: "red",
+    hoverCtaText: args.text,
+    hoverTextColor: "red",
+    hoverBgColor: "red",
+    hoverBorderColor: "red",
+    onClick: (0, _addonActions.action)('button-click'),
+    buttonType: "button",
+    buttonDesign: "slide"
+  });
+};
+
+exports.AsSlideWithStyles = AsSlideWithStyles;
+
 const WithIconRight = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     rightIcon: args.rightIcon,
@@ -227,7 +263,19 @@ const WithBothIcons = args => {
 
 exports.WithBothIcons = WithBothIcons;
 
-const ButtonAsExternalLink = args => {
+const WithSlideDesign = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    leftIcon: args.leftIcon,
+    rightIcon: args.rightIcon,
+    ctaText: args.text,
+    buttonType: "button",
+    buttonDesign: "slide"
+  });
+};
+
+exports.WithSlideDesign = WithSlideDesign;
+
+const AsExternalLink = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     url: "/",
     ctaText: args.text,
@@ -235,9 +283,20 @@ const ButtonAsExternalLink = args => {
   });
 };
 
-exports.ButtonAsExternalLink = ButtonAsExternalLink;
+exports.AsExternalLink = AsExternalLink;
+
+const AsSlideWithExternalLink = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    url: "/",
+    ctaText: args.text,
+    buttonType: "external",
+    buttonDesign: "slide"
+  });
+};
+
+exports.AsSlideWithExternalLink = AsSlideWithExternalLink;
 
-const ButtonAsInternalLink = args => {
+const AsInternalLink = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     ctaText: args.text,
     url: "/",
@@ -246,7 +305,19 @@ const ButtonAsInternalLink = args => {
   });
 };
 
-exports.ButtonAsInternalLink = ButtonAsInternalLink;
+exports.AsInternalLink = AsInternalLink;
+
+const AsSlideWithInternalLink = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    ctaText: args.text,
+    url: "/",
+    onClick: (0, _addonActions.action)('button-click'),
+    buttonType: "internal",
+    buttonDesign: "slide"
+  });
+};
+
+exports.AsSlideWithInternalLink = AsSlideWithInternalLink;
 
 const AsSocialButton = args => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -279,4 +350,40 @@ const AsSocialButton = args => {
   }));
 };
 
-exports.AsSocialButton = AsSocialButton;
+exports.AsSocialButton = AsSocialButton;
+
+const AsSlideWithSocialButton = args => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    onClick: (0, _addonActions.action)('button-click'),
+    centerIcon: "facebook-f",
+    hoverBgColor: "#3b5999",
+    bgColor: "#3b5999",
+    textColor: "white",
+    hoverTextColor: "black",
+    buttonType: "social",
+    url: "/",
+    buttonDesign: "slide"
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_index.default, {
+    onClick: (0, _addonActions.action)('button-click'),
+    centerIcon: "whatsapp",
+    hoverBgColor: "#25d366",
+    bgColor: "#25d366",
+    textColor: "white",
+    hoverTextColor: "black",
+    buttonType: "social",
+    url: "/",
+    buttonDesign: "slide"
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_index.default, {
+    onClick: (0, _addonActions.action)('button-click'),
+    centerIcon: "twitter",
+    hoverBgColor: "#55acee",
+    bgColor: "#55acee",
+    textColor: "white",
+    hoverTextColor: "black",
+    buttonType: "social",
+    url: "/",
+    buttonDesign: "slide"
+  }));
+};
+
+exports.AsSlideWithSocialButton = AsSlideWithSocialButton;

package/dist/components/{ButtonSlide → Button}/Styles.css

@@ -1,5 +1,4 @@
 .btn {
-    border: 1px solid black;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
@@ -12,8 +11,6 @@
     left: 0;
     height: 100%;
     width: 0;
-    background: #FFF;
-    border: 1px white;
     content: '';
     z-index: -1;
     -webkit-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);

package/dist/components/Button/index.js

@@ -37,12 +37,22 @@ const Button = _ref => {
     hoverBorderColor,
     hoverCtaText,
     url,
-    buttonType
+    buttonType,
+    buttonDesign
   } = _ref;
   let classNames = className ? className : '';
   let padding = buttonType === 'social' ? ' px-4 py-3 ' : ' px-8 ';
   let externalPadding = buttonType === 'external' ? ' py-3 ' : ' py-2 ';
-  let classes = 'rounded-lg text-black border-2 border-black border-gray-300 transition-background-color duration-500 transform ' + padding + externalPadding + classNames;
+  let standardClasses = 'rounded-lg text-black border-2 border-black border-gray-300 transition-background-color duration-500 transform ' + padding + externalPadding + classNames;
+  let slideClasses = 'btn px-8 text-white border-2 bg-gray hover:bg-brand-primary hover:text-black ' + padding + externalPadding + classNames;
+  let classes;
+  const design = buttonDesign ? buttonDesign : 'standard';
+
+  if (design === 'standard') {
+    classes = standardClasses;
+  } else if (design === 'slide') {
+    classes = slideClasses;
+  }
 
   let iconLeft = leftIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
     className: "pr-2",
@@ -87,14 +97,15 @@ const Button = _ref => {
 
   if (buttonType === 'external') {
     return /*#__PURE__*/_react.default.createElement("a", {
-      style: styles,
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false),
       href: url,
       target: "_blank",
-      className: classes,
       rel: "noreferrer"
-    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight);
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: styles,
+      onMouseOver: () => setHoverState(true),
+      onMouseOut: () => setHoverState(false),
+      className: classes
+    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight));
   } else if (buttonType === 'internal') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: url,
@@ -104,17 +115,18 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText));
+    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight));
   } else if (buttonType === 'social') {
     return /*#__PURE__*/_react.default.createElement("a", {
-      style: styles,
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false),
-      className: classes,
       href: url,
       target: "_blank",
       rel: "noreferrer"
-    }, centerIcon && iconCenter);
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: styles,
+      onMouseOver: () => setHoverState(true),
+      onMouseOut: () => setHoverState(false),
+      className: classes
+    }, centerIcon && iconCenter));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({

package/dist/components/Card/Card.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.lotsOfCards = exports.default = exports._Card = exports.ImageCard = exports.CardWithText = exports.CardWithSlideButton = exports.CardWithImageBelowTitle = exports.CardWithImage = exports.CardWithButton = exports.CardTitleRight = exports.CardTitleLeft = exports.CardTitleBold = exports.CardRounded = void 0;
+exports.lotsOfCards = exports.default = exports._Card = exports.ImageCard = exports.CardWithText = exports.CardWithSlideButton = exports.CardWithImageBelowTitle = exports.CardWithImage = exports.CardWithButtonStyles = exports.CardWithButton = exports.CardTitleRight = exports.CardTitleLeft = exports.CardTitleBold = exports.CardRounded = void 0;
 
 require("core-js/modules/es.symbol.description.js");
 
@@ -211,6 +211,32 @@ const CardWithButton = args => {
 
 exports.CardWithButton = CardWithButton;
 
+const CardWithButtonStyles = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    id: "card",
+    title: args.title,
+    titleClass: "text-center font-bold",
+    subTitle: args.subTitle,
+    extraText: args.extraText,
+    description: args.description,
+    image: "https://picsum.photos/500/300",
+    hasCta: args.hasCta,
+    ctaText: args.ctaText,
+    url: "/",
+    buttonType: "internal",
+    buttonStyle: args.buttonStyle,
+    bordered: true,
+    buttonBgColor: "blue",
+    buttonTextColor: "white",
+    buttonBorderColor: "blue",
+    hoverButtonBgColor: "white",
+    hoverButtonTextColor: "blue",
+    hoverButtonBorderColor: "blue"
+  });
+};
+
+exports.CardWithButtonStyles = CardWithButtonStyles;
+
 const CardWithSlideButton = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     id: "card",
@@ -221,7 +247,13 @@ const CardWithSlideButton = args => {
     description: args.description,
     image: "https://picsum.photos/500/300",
     hasCta: args.hasCta,
-    buttonStyle: "slide",
+    buttonDesign: "slide",
+    buttonBgColor: "red",
+    buttonTextColor: "white",
+    buttonBorderColor: "red",
+    hoverButtonTextColor: "red",
+    hoverButtonBgColor: "red",
+    hoverButtonBorderColor: "red",
     ctaText: args.ctaText,
     url: "/",
     buttonType: "button",

package/dist/components/Card/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +17,8 @@ var _index2 = _interopRequireDefault(require("../ButtonSlide/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 Card = _ref => {
   let {
     id,
@@ -39,7 +43,13 @@ const Card = _ref => {
     rounded,
     bordered,
     url,
-    buttonStyle
+    buttonDesign,
+    buttonBgColor,
+    buttonTextColor,
+    buttonBorderColor,
+    hoverButtonBgColor,
+    hoverButtonTextColor,
+    hoverButtonBorderColor
   } = _ref;
   let titleWrapperClass = imageBelowTitle ? ' order-1 p-3 ' : ' p-3 ';
   let contentWrapperClass = imageBelowTitle ? ' order-3 px-3 ' : ' px-3 ';
@@ -85,17 +95,20 @@ const Card = _ref => {
     className: extraTextClass && extraTextClass
   }, extraText))), hasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
-  }, buttonStyle === 'slide' ? /*#__PURE__*/_react.default.createElement(_index2.default, {
-    className: "w-full",
-    ctaText: ctaText,
-    buttonType: buttonType,
-    url: url
-  }) : /*#__PURE__*/_react.default.createElement(_index.default, {
+  }, /*#__PURE__*/_react.default.createElement(_index.default, _extends({
     className: "w-full",
     ctaText: ctaText,
     buttonType: buttonType,
-    url: url
-  })));
+    url: url,
+    bgColor: buttonBgColor,
+    textColor: buttonTextColor,
+    borderColor: buttonBorderColor,
+    hoverBgColor: hoverButtonBgColor,
+    hoverTextColor: hoverButtonTextColor,
+    hoverBorderColor: hoverButtonBorderColor
+  }, buttonDesign && {
+    buttonDesign: buttonDesign
+  }))));
 };
 
 var _default = Card;

package/dist/components/CardImageLink/index.js

@@ -31,7 +31,7 @@ const CardImageLink = _ref => {
     alt: altText,
     className: "object-cover w-full h-full"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "absolute top-10 lg:top-20 w-full"
+    className: "absolute top-10 lg:top-20 "
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: "text-white text-2xl"
   }, title), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Jumbotron/index.js

@@ -27,7 +27,7 @@ const Jumbotron = _ref => {
     src: image,
     alt: altText
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "absolute top-10 lg:top-20 w-full"
+    className: "absolute top-10 lg:top-20"
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: "text-white text-4xl"
   }, text), /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Nav/Nav.stories.js

@@ -74,7 +74,7 @@ const _NavWithColors = args => {
     navItemRounded: true,
     showProfile: false,
     showSearch: false,
-    alignNavAndLogo: true,
+    alignNavAndLogo: false,
     navItemLinkClassNames: "py-1",
     mobileNavItemBordered: false,
     mobileNavItemRounded: true,

package/dist/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.default;
+  }
+});
 Object.defineProperty(exports, "AlertBar", {
   enumerable: true,
   get: function get() {
@@ -21,16 +27,16 @@ Object.defineProperty(exports, "BreadcrumbsBordered", {
     return _BreadcrumbsBordered.default;
   }
 });
-Object.defineProperty(exports, "Button", {
+Object.defineProperty(exports, "BreadcrumbsBorderedItem", {
   enumerable: true,
   get: function get() {
-    return _Button.default;
+    return _BreadcrumbsBorderedItem.default;
   }
 });
-Object.defineProperty(exports, "ButtonSlide", {
+Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function get() {
-    return _ButtonSlide.default;
+    return _Button.default;
   }
 });
 Object.defineProperty(exports, "Card", {
@@ -51,24 +57,60 @@ Object.defineProperty(exports, "CardImageLinkList", {
     return _CardImageLinkList.default;
   }
 });
+Object.defineProperty(exports, "Collapsible", {
+  enumerable: true,
+  get: function get() {
+    return _Collapsible.default;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _Form.default;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
     return _Icon.default;
   }
 });
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.default;
+  }
+});
 Object.defineProperty(exports, "Jumbotron", {
   enumerable: true,
   get: function get() {
     return _Jumbotron.default;
   }
 });
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem.default;
+  }
+});
+Object.defineProperty(exports, "ListItemDropdown", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemDropdown.default;
+  }
+});
 Object.defineProperty(exports, "Nav", {
   enumerable: true,
   get: function get() {
     return _Nav.default;
   }
 });
+Object.defineProperty(exports, "NavItem", {
+  enumerable: true,
+  get: function get() {
+    return _NavItem.default;
+  }
+});
 Object.defineProperty(exports, "Profile", {
   enumerable: true,
   get: function get() {
@@ -81,6 +123,14 @@ Object.defineProperty(exports, "Search", {
     return _Search.default;
   }
 });
+Object.defineProperty(exports, "UserIcon", {
+  enumerable: true,
+  get: function get() {
+    return _UserIcon.default;
+  }
+});
+
+var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 
 var _index = _interopRequireDefault(require("./components/AlertBar/index"));
 
@@ -88,9 +138,9 @@ var _index2 = _interopRequireDefault(require("./components/Breadcrumbs/index"));
 
 var _BreadcrumbsBordered = _interopRequireDefault(require("./components/BreadcrumbsBordered"));
 
-var _Button = _interopRequireDefault(require("./components/Button"));
+var _BreadcrumbsBorderedItem = _interopRequireDefault(require("./components/BreadcrumbsBorderedItem"));
 
-var _ButtonSlide = _interopRequireDefault(require("./components/ButtonSlide"));
+var _Button = _interopRequireDefault(require("./components/Button"));
 
 var _Card = _interopRequireDefault(require("./components/Card"));
 
@@ -98,14 +148,28 @@ var _CardImageLink = _interopRequireDefault(require("./components/CardImageLink"
 
 var _CardImageLinkList = _interopRequireDefault(require("./components/CardImageLinkList"));
 
+var _Collapsible = _interopRequireDefault(require("./components/Collapsible"));
+
+var _Form = _interopRequireDefault(require("./components/Form"));
+
 var _Icon = _interopRequireDefault(require("./components/Icon"));
 
+var _Input = _interopRequireDefault(require("./components/Input"));
+
 var _Jumbotron = _interopRequireDefault(require("./components/Jumbotron"));
 
+var _ListItem = _interopRequireDefault(require("./components/ListItem"));
+
+var _ListItemDropdown = _interopRequireDefault(require("./components/ListItemDropdown"));
+
 var _Nav = _interopRequireDefault(require("./components/Nav"));
 
+var _NavItem = _interopRequireDefault(require("./components/NavItem"));
+
 var _Profile = _interopRequireDefault(require("./components/Profile"));
 
 var _Search = _interopRequireDefault(require("./components/Search"));
 
+var _UserIcon = _interopRequireDefault(require("./components/UserIcon"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

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

package/dist/components/ButtonSlide/ButtonSlide.stories.js

@@ -1,149 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._Button = exports.WithOnClickMethod = exports.WithIconRight = exports.WithIconLeft = exports.WithBothIcons = exports.ButtonAsInternalLink = exports.ButtonAsExternalLink = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _README = _interopRequireDefault(require("./README.md"));
-
-var _index = _interopRequireDefault(require("./index"));
-
-require("../../../index.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  title: 'Components/ButtonSlide',
-  argTypes: {
-    text: {
-      name: 'Button Text',
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Button 1'
-    },
-    type: {
-      name: 'Type',
-      defaultValue: 'primary',
-      control: {
-        type: 'select'
-      },
-      options: ['primary', 'secondary', 'ghost']
-    },
-    iconPlacement: {
-      name: 'Icon',
-      defaultValue: 'none',
-      control: {
-        type: 'select'
-      },
-      options: ['left', 'right', 'both', 'none']
-    },
-    leftIcon: {
-      name: 'Left Icon',
-      defaultValue: 'thumbs-down',
-      control: {
-        type: 'select'
-      },
-      options: ['thumbs-up', 'thumbs-down', 'search', 'th']
-    },
-    rightIcon: {
-      name: 'Right Icon',
-      defaultValue: 'thumbs-up',
-      control: {
-        type: 'select'
-      },
-      options: ['thumbs-up', 'thumbs-down', 'search', 'th']
-    },
-    padded: {
-      name: 'Padded',
-      control: {
-        type: 'boolean'
-      },
-      defaultValue: false
-    },
-    social: {
-      name: 'Social',
-      defaultValue: 'None',
-      control: {
-        type: 'select'
-      },
-      options: ['Facebook', 'Twitter', 'Whatsapp', 'None']
-    }
-  },
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-4"
-  }, story())],
-  parameters: {
-    readme: {
-      sidebar: _README.default
-    }
-  }
-};
-exports.default = _default;
-
-const _Button = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    ctaText: args.text
-  });
-};
-
-exports._Button = _Button;
-
-const WithIconRight = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    rightIcon: args.rightIcon,
-    ctaText: args.text
-  });
-};
-
-exports.WithIconRight = WithIconRight;
-
-const WithIconLeft = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    leftIcon: args.leftIcon,
-    ctaText: args.text
-  });
-};
-
-exports.WithIconLeft = WithIconLeft;
-
-const WithBothIcons = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    leftIcon: args.leftIcon,
-    rightIcon: args.rightIcon,
-    ctaText: args.text
-  });
-};
-
-exports.WithBothIcons = WithBothIcons;
-
-const ButtonAsExternalLink = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    ctaText: args.text
-  });
-};
-
-exports.ButtonAsExternalLink = ButtonAsExternalLink;
-
-const ButtonAsInternalLink = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    ctaText: args.text,
-    url: "/"
-  });
-};
-
-exports.ButtonAsInternalLink = ButtonAsInternalLink;
-
-const WithOnClickMethod = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    ctaText: args.text,
-    onClick: (0, _addonActions.action)('button-click')
-  });
-};
-
-exports.WithOnClickMethod = WithOnClickMethod;

package/dist/components/ButtonSlide/README.md

@@ -1,18 +0,0 @@
-# Button Slide
-
-A button with a bit of styling
-
-## Example
-
-```
-
-<Button ctaText={args.text}/>
-
-```
-
-## Parameters
-`ctaText={string} (default=null)`
-`className={string} (default=null)`
-`onClick={function} (default=null)`
-`leftIcon={string} (default=null)`
-`rightIcon={string} (default=null)`

package/dist/components/ButtonSlide/index.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = _interopRequireDefault(require("../Icon/index"));
-
-require("./Styles.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ButtonSlide = _ref => {
-  let {
-    ctaText,
-    className,
-    onClick,
-    leftIcon,
-    rightIcon
-  } = _ref;
-  let classes = className + ' btn py-2 px-8 text-white border-2 bg-black hover:bg-white hover:text-black';
-
-  let iconLeft = /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: leftIcon
-  });
-
-  let iconRight = /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: rightIcon
-  });
-
-  return /*#__PURE__*/_react.default.createElement("button", {
-    className: classes,
-    onClick: onClick
-  }, leftIcon && iconLeft, ctaText, rightIcon && iconRight);
-};
-
-var _default = ButtonSlide;
-exports.default = _default;

package/dist/components/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.components = void 0;
-
-var _components = _interopRequireWildcard(require("./"));
-
-exports.components = _components;
-
-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; }