trepur_components 0.2.74 → 0.3.2

package/dist/components/Button/index.js

@@ -1,21 +1,23 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.buttonProps = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
 
-require("../index.css");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-require("./index.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,203 +25,176 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 buttonProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  text: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  bgColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  borderColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  hoverBorderColor: _propTypes.default.string,
+  hoverText: _propTypes.default.string,
+  type: _propTypes.default.string,
+  url: _propTypes.default.string,
+  design: _propTypes.default.string,
+  bordered: _propTypes.default.bool,
+  rounded: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  isLoading: _propTypes.default.bool,
+  leftIcon: _propTypes.default.shape(_Icon.iconProps),
+  rightIcon: _propTypes.default.shape(_Icon.iconProps),
+  centerIcon: _propTypes.default.shape(_Icon.iconProps)
+};
+exports.buttonProps = buttonProps;
+
 const Button = _ref => {
   let {
-    buttonId,
-    buttonClasses,
-    buttonText,
-    buttonOnClick,
-    buttonLeftIcon,
-    buttonRightIcon,
-    buttonCenterIcon,
-    iconHollow,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    buttonHoverBgColor,
-    buttonHoverTextColor,
-    buttonHoverBorderColor,
-    buttonHoverText,
-    buttonType,
-    buttonUrl,
-    buttonDesign,
-    buttonBordered,
-    buttonRounded,
-    buttonIconBrand,
-    buttonDisabled,
-    iconSize
+    buttonProps
   } = _ref;
-  let padding = buttonType === 'social' ? 'px-1 py-1 ' : buttonType === 'icon' ? 'px-3 ' : 'px-8 ';
-  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-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;
-  classList += buttonClasses ? buttonClasses : '';
-  const design = buttonDesign ? buttonDesign : 'standard';
-
-  if (design === 'standard') {
-    classList += standardClasses;
-  } else if (design === 'slide') {
-    classList += slideClasses;
-  }
-
-  const iconClassList = buttonIconBrand ? 'fa-brands' : '';
-
-  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    classes: "pr-2",
-    type: buttonLeftIcon
-  }, iconHollow && {
-    hollow: iconHollow
-  }));
-
-  let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    classes: "pl-2",
-    type: buttonRightIcon
-  }, iconHollow && {
-    hollow: iconHollow
-  }));
-
-  let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-    size: iconSize,
-    classes: iconClassList,
-    type: buttonCenterIcon
-  }, iconHollow && {
-    hollow: iconHollow
-  })); //---------- Styling ---------------
-
-
-  const [styles, setStyles] = (0, _react.useState)(!buttonDisabled ? {
-    'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
-    color: buttonTextColor ? buttonTextColor : 'black',
-    'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
-  } : {
-    'backgroundColor': 'white',
-    color: 'grey',
-    'borderColor': 'grey'
-  });
   const [hovering, setHovering] = (0, _react.useState)(false);
+  if (buttonProps == undefined) return;
+  const design = (0, _classnames.default)({
+    [buttonProps.design]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.design,
+    'standard': !(buttonProps !== null && buttonProps !== void 0 && buttonProps.design)
+  });
+  const padding = (0, _classnames.default)({
+    'px-1 py-1': (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) === 'social',
+    'px-3': (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) === 'icon',
+    'px-8': (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) !== 'social' && (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) !== 'icon'
+  }, 'py-2');
+  const borderClassList = (0, _classnames.default)({
+    'border-2': buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.bordered
+  });
+  const roundedClassList = (0, _classnames.default)({
+    'rounded-full': buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rounded,
+    'rounded-none': !(buttonProps !== null && buttonProps !== void 0 && buttonProps.rounded)
+  });
+  const loadingClasses = (0, _classnames.default)({
+    'invisible': !(buttonProps !== null && buttonProps !== void 0 && buttonProps.isLoading)
+  }, 'absolute left-2/4 top-1/4 -ml-2');
+  const colours = (0, _classnames.default)({
+    [buttonProps.hoverBgColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverBgColor,
+    [buttonProps.hoverTextColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverTextColor,
+    [buttonProps.hoverBorderColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverBorderColor,
+    [buttonProps.bgColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.bgColor,
+    [buttonProps.textColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.textColor,
+    [buttonProps.borderColor]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.borderColor
+  });
+  const classList = (0, _classnames.default)({
+    [padding]: true,
+    [colours]: true,
+    [buttonProps.classes]: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.classes,
+    [borderClassList]: borderClassList && design === 'standard',
+    [roundedClassList]: roundedClassList && design === 'standard',
+    'rounded-lg transition-backgroundColor duration-500 transform': design === 'standard',
+    'btn px-8 border-2': design === 'slide'
+  });
+  const buttonContentClasses = (0, _classnames.default)({
+    'invisible': buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading
+  }, 'flex');
+
+  const iconLeft = (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: {
+      classes: (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.brand) && 'fa-brands',
+      size: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.size,
+      type: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.type,
+      hollow: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon.hollow
+    }
+  });
 
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setHovering(true);
-      setStyles({
-        'backgroundColor': buttonHoverBgColor ? buttonHoverBgColor : 'black',
-        color: buttonHoverTextColor ? buttonHoverTextColor : 'white',
-        'borderColor': buttonHoverBorderColor ? buttonHoverBorderColor : 'black'
-      });
-    } else {
-      setHovering(false);
-      setStyles({
-        'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
-        color: buttonTextColor ? buttonTextColor : 'black',
-        'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
-      });
+  const iconRight = (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: {
+      classes: buttonProps !== null && buttonProps !== void 0 && buttonProps.rightIcon.brand ? 'fa-brands' : '',
+      size: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon.size,
+      type: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon.type,
+      hollow: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon.hollow
     }
-  }; //-----------------------------------
+  });
 
+  const iconCenter = (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.centerIcon) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: buttonProps.centerIcon
+  });
 
-  if (buttonType === 'external') {
-    return /*#__PURE__*/_react.default.createElement("a", {
-      target: "_blank",
-      href: buttonUrl
-    }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
-    }, {
-      className: classList,
-      style: styles,
-      type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
-  } else if (buttonType === 'internal') {
-    return /*#__PURE__*/_react.default.createElement("a", {
-      href: buttonUrl
-    }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
+  const loadingIcon = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: {
+      size: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.size,
+      type: 'spinner',
+      animation: 'pulse'
+    }
+  });
+
+  if (['internal', 'external'].includes(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type)) {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) === 'external' && {
+      target: '_blank'
     }, {
-      className: classList,
-      style: styles,
-      type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
-  } else if (buttonType === 'social') {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
+      href: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.url
+    }), /*#__PURE__*/_react.default.createElement("button", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) && {
+      id: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id
     }, {
       className: classList,
-      style: styles,
       type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonCenterIcon && iconCenter);
-  } else if (buttonType === 'icon') {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
+      "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading,
+      onMouseOver: () => setHovering(true),
+      onMouseOut: () => setHovering(false)
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
+      onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {
+      disabled: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: buttonContentClasses
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon) && iconLeft, /*#__PURE__*/_react.default.createElement("p", null, hovering ? buttonProps !== null && buttonProps !== void 0 && buttonProps.hoverText ? buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverText : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text), (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon) && iconRight), /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingClasses
+    }, loadingIcon))));
+  } else if (['social', 'icon'].includes(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type)) {
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) && {
+      id: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id
     }, {
       className: classList,
-      style: styles,
-      type: "button",
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), buttonCenterIcon && iconCenter);
-  } else if (buttonType === 'loading') {
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-      id: buttonId
-    }, {
-      className: 'flex ' + classList,
       type: "button",
-      style: styles,
-      type: buttonType,
-      onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false)
-    }, buttonOnClick && {
-      onClick: buttonOnClick
-    }, buttonDisabled && {
-      disabled: buttonDisabled
-    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "spinner",
-      animation: "pulse"
-    })), /*#__PURE__*/_react.default.createElement("p", {
-      className: "pl-3"
-    }, "Loading"));
-  }
-
-  return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
-    id: buttonId
+      "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading,
+      onMouseOver: () => setHovering(true),
+      onMouseOut: () => setHovering(false)
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
+      onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {
+      disabled: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: buttonProps !== null && buttonProps !== void 0 && buttonProps.isLoading ? 'invisible' : ''
+    }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.centerIcon) && iconCenter), /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingClasses
+    }, loadingIcon)));
+  } else return /*#__PURE__*/_react.default.createElement("button", _extends({}, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) && {
+    id: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id
   }, {
     className: classList,
-    style: styles,
     type: "button",
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false)
-  }, buttonOnClick && {
-    onClick: buttonOnClick
-  }, buttonDisabled && {
-    disabled: buttonDisabled
-  }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight);
+    "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading,
+    onMouseOver: () => setHovering(true),
+    onMouseOut: () => setHovering(false)
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
+    onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {
+    disabled: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: buttonProps !== null && buttonProps !== void 0 && buttonProps.isLoading ? 'invisible' : ''
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.leftIcon) && iconLeft, /*#__PURE__*/_react.default.createElement("p", null, hovering ? buttonProps !== null && buttonProps !== void 0 && buttonProps.hoverText ? buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.hoverText : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.text), (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.rightIcon) && iconRight), /*#__PURE__*/_react.default.createElement("div", {
+    className: loadingClasses
+  }, loadingIcon)));
 };
 
+Button.propTypes = {
+  buttonProps: _propTypes.default.shape(_objectSpread({}, buttonProps))
+};
 var _default = Button;
 exports.default = _default;