woi-react-components/dist/components/WOIParallelogramButton/index.js

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import styled, { keyframes } from "styled-components";
var WOIParallelogramButton = function (props) {
    var _a = useState(false), onHover = _a[0], setHoverState = _a[1];
    var _b = useState(-1), hoverIndex = _b[0], setHoverIndex = _b[1];
    var _c = props.text, text = _c === void 0 ? '' : _c, _d = props.textColor, textColor = _d === void 0 ? 'black' : _d, hoverTextColor = props.hoverTextColor, fontSize = props.fontSize, fontWeight = props.fontWeight, width = props.width, height = props.height, _e = props.backgroundColor, backgroundColor = _e === void 0 ? 'transparent' : _e, hoverBackgroundColor = props.hoverBackgroundColor, _f = props.borderColor, borderColor = _f === void 0 ? 'transparent' : _f, _g = props.borderThickness, borderThickness = _g === void 0 ? '0px' : _g, _h = props.loading, loading = _h === void 0 ? false : _h, _j = props.loaderColor, loaderColor = _j === void 0 ? 'black' : _j, gradientDirection = props.gradientDirection, gradientColors = props.gradientColors, hoverGradientDirection = props.hoverGradientDirection, hoverGradientColors = props.hoverGradientColors, textTransform = props.textTransform, openLink = props.openLink, openLinkInNewTab = props.openLinkInNewTab, clickFunction = props.clickFunction, prefixIcon = props.prefixIcon, suffixIcon = props.suffixIcon, _k = props.isDisabled, isDisabled = _k === void 0 ? false : _k, _l = props.skewType, skewType = _l === void 0 ? 'left' : _l, _m = props.skew, skew = _m === void 0 ? '20' : _m;
    // Created styled button widget
    var ParallelogramButtonWidget = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        z-index: 1;\n        text-align: center;\n        transform: skew(", "", "deg);\n        cursor: pointer;\n        text-decoration: none;\n        outline: none !important;\n        box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.12);\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", ";\n        text-transform: ", ";\n    "], ["\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        z-index: 1;\n        text-align: center;\n        transform: skew(", "", "deg);\n        cursor: pointer;\n        text-decoration: none;\n        outline: none !important;\n        box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.12);\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", ";\n        text-transform: ", ";\n    "])), skewType === 'left' ? null : '-', skew, borderColor, borderThickness, textTransform || 'capitalize');
    // Button properties
    var buttonProperties = {
        backgroundColor: onHover ? (hoverBackgroundColor || backgroundColor) : backgroundColor,
        width: width,
        height: height,
        backgroundImage: onHover ?
            "linear-gradient(to ".concat(hoverGradientDirection || gradientDirection, ", ").concat((hoverGradientColors === null || hoverGradientColors === void 0 ? void 0 : hoverGradientColors.join(', ')) || (gradientColors === null || gradientColors === void 0 ? void 0 : gradientColors.join(', ')), ")")
            : "linear-gradient(to ".concat(gradientDirection, ", ").concat(gradientColors === null || gradientColors === void 0 ? void 0 : gradientColors.join(', '), ")")
    };
    var disabledButtonProperties = { backgroundColor: '#D9D9D9', cursor: 'not-allowed', width: width, height: height, backgroundImage: 'none' }; // Disabled Button Properties
    var textProperties = { fontSize: fontSize, fontWeight: fontWeight, marginLeft: text ? 10 : 0, marginRight: text ? 10 : 0, }; // Label properties
    var spinner = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["0% { transform: rotate(0deg)} 100% {transform: rotate(360deg)}"], ["0% { transform: rotate(0deg)} 100% {transform: rotate(360deg)}"])));
    var SpinnerWidget = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border: 3px solid #f3f3f3;\n        border-top: 3px solid ", ";\n        border-radius: 50%;\n        width: 24px;\n        height: 24px;\n        animation: ", " 0.5s linear infinite;\n    "], ["\n        border: 3px solid #f3f3f3;\n        border-top: 3px solid ", ";\n        border-radius: 50%;\n        width: 24px;\n        height: 24px;\n        animation: ", " 0.5s linear infinite;\n    "])), loaderColor || '#000000', spinner);
    return (_jsxs(ParallelogramButtonWidget, __assign({ style: isDisabled ? __assign({}, disabledButtonProperties) : __assign(__assign({}, buttonProperties), { backgroundColor: (onHover && hoverIndex === 0) ? (hoverBackgroundColor || backgroundColor) : backgroundColor }), onClick: function () { return isDisabled ? null : openLink ? window.open(openLink, openLinkInNewTab ? '_blank' : '_self') : clickFunction === null || clickFunction === void 0 ? void 0 : clickFunction(); }, onMouseEnter: function () { setHoverIndex(0); setHoverState(true); }, onMouseLeave: function () { setHoverIndex(-1); setHoverState(false); }, disabled: isDisabled }, { children: [prefixIcon && _jsx("img", { src: prefixIcon, alt: "prefixIcon", height: 16, width: 16, style: { opacity: isDisabled ? 0.1 : 1, transform: "skew(".concat(skewType === 'left' ? '-' : null).concat(skew, "deg)") } }), loading ? _jsx(SpinnerWidget, { style: { transform: "skew(".concat(skewType === 'left' ? '-' : null).concat(skew, "deg)") } }) :
                _jsx("p", __assign({ style: __assign(__assign({}, textProperties), { transform: "skew(".concat(skewType === 'left' ? '-' : null).concat(skew, "deg)"), color: (onHover && hoverIndex === 0) ? (hoverTextColor || textColor) : textColor }) }, { children: text })), suffixIcon && _jsx("img", { src: suffixIcon, alt: "suffixIcon", height: 16, width: 16, style: { opacity: isDisabled ? 0.1 : 1, transform: "skew(".concat(skewType === 'left' ? '-' : null).concat(skew, "deg)") } })] })));
};
export default WOIParallelogramButton;
var templateObject_1, templateObject_2, templateObject_3;