@cap3/capitano-components/lib/atoms/Button/Button.js

# <div style="color: crimson;">ALPHA DISCLAIMER</div>

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const capitano_theme_1 = require("@cap3/capitano-theme");
const mouseEffects_1 = require("./mouseEffects");
const assertNever_1 = require("../../utils/assertNever");
const formElementHelpers_1 = require("../basics/formElementHelpers");
var ButtonType;
(function (ButtonType) {
    ButtonType["primary"] = "primary";
    ButtonType["secondary"] = "secondary";
    ButtonType["success"] = "success";
    ButtonType["danger"] = "danger";
})(ButtonType = exports.ButtonType || (exports.ButtonType = {}));
const getColor = (type = ButtonType.primary, theme) => {
    switch (type) {
        case ButtonType.primary:
            return theme.colors.primary["500"];
        case ButtonType.secondary:
            return theme.colors.secondary["500"];
        case ButtonType.success:
            return theme.colors.success["500"];
        case ButtonType.danger:
            return theme.colors.danger["500"];
        default:
            return assertNever_1.default(type);
    }
};
const getTextColor = (type = ButtonType.primary, theme) => {
    switch (type) {
        case ButtonType.primary:
            return theme.colors.textOnPrimary;
        case ButtonType.secondary:
            return theme.colors.textOnSecondary;
        case ButtonType.success:
            return theme.colors.textOnSuccess;
        case ButtonType.danger:
            return theme.colors.textOnDanger;
        default:
            return assertNever_1.default(type);
    }
};
exports.Button = capitano_theme_1.styled("button")({
    display: "flex",
    position: "relative",
    justifyContent: "center",
    alignItems: "center",
    border: "none",
    outline: "none",
    overflow: "hidden",
    padding: `0 ${capitano_theme_1.spacingAbsolute.spx8}px`,
}, 
// colors for different types and states
({ theme, type, disabled = false, outline = false }) => {
    const backgroundColor = disabled
        ? theme.colors.disabled.base
        : getColor(type, theme);
    const color = disabled
        ? theme.colors.textOnDisabled
        : getTextColor(type, theme);
    const effectArgs = {
        disabled,
        swapped: outline,
        outline,
        baseColor: backgroundColor,
        theme,
    };
    const focus = mouseEffects_1.focusEffect(effectArgs);
    const hover = mouseEffects_1.hoverEffect(effectArgs);
    const active = mouseEffects_1.activeEffect(effectArgs);
    if (outline) {
        return Object.assign({ borderWidth: "2px", borderColor: backgroundColor, borderStyle: "solid", backgroundColor: "transparent", color: backgroundColor }, focus, hover, active);
    }
    else {
        return Object.assign({ backgroundColor,
            color }, focus, hover, active);
    }
}, 
// text styles
({ theme }) => ({
    fontSize: theme.typography.fontSize.large,
    fontFamily: theme.typography.fontFamily.base,
}), 
// cursor style
({ disabled }) => ({
    cursor: disabled ? "default" : "pointer",
}), 
// button dimensions
({ radius, size, fixed, theme, square }) => {
    const height = theme.spacing.formElementFactor[size || "medium"] *
        theme.spacing.baseUnit;
    const borderRadius = formElementHelpers_1.getFormElementBorderRadius(radius, height, theme);
    const width = square ? height : fixed ? 120 : "auto";
    return { borderRadius, height, width };
});
//# sourceMappingURL=Button.js.map