trepur_components 0.1.27 → 0.1.31

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({