design-system-simplefi/build/src/components/Button/StyledButton.js

Design System for SimpleFi Applications

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var _a, _b;
import styled, { css } from 'styled-components';
import { always, flip, includes, pipe, prop, when } from 'ramda';
import { isTrue } from 'ramda-adjunct';
import { createMarginSpacing, getButtonColor, getFontFamily, getFontSize, getFontWeight, getLineHeight, pxToRem, } from '../../utils';
import { ButtonSizes, ButtonVariants } from './Button.enums';
var ButtonBase = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-family: ", ";\n  font-weight: ", ";\n  margin: 0;\n  cursor: pointer;\n  text-align: center;\n  ", ";\n\n  &:focus {\n    outline: 0;\n  }\n\n  ", "\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-family: ", ";\n  font-weight: ", ";\n  margin: 0;\n  cursor: pointer;\n  text-align: center;\n  ", ";\n\n  &:focus {\n    outline: 0;\n  }\n\n  ", "\n\n  ", ";\n\n  ", ";\n"])), getFontFamily('base'), getFontWeight('medium'), function (_a) {
    var margin = _a.margin;
    return createMarginSpacing(margin);
}, function (_a) {
    var isExpanded = _a.isExpanded;
    return isExpanded && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
}, function (_a) {
    var disabled = _a.disabled;
    return disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: not-allowed;\n    "], ["\n      cursor: not-allowed;\n    "])));
}, function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      cursor: progress;\n    "], ["\n      cursor: progress;\n    "])));
});
/*
 * BUTTON SIZES
 */
var setMinWidth = function (width) {
    return pipe(prop('variant'), flip(includes)([ButtonVariants.solid, ButtonVariants.outline]), flip(when)(always(pxToRem(width)), isTrue));
};
var ButtonXlarge = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"], ["\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"])), pxToRem(50), pxToRem(15, 22), getLineHeight('lg'), getFontSize('lg'));
var ButtonLarge = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"], ["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"])), setMinWidth(95), pxToRem(50), pxToRem(15, 22), getLineHeight('lg'), getFontSize('lg'));
var ButtonMedium = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"], ["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), setMinWidth(80), pxToRem(40), pxToRem(12, 18), getLineHeight('md'), getFontSize('md'), function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), pxToRem(12), pxToRem(12));
});
var ButtonSmall = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"], ["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), setMinWidth(60), pxToRem(30), pxToRem(7, 12), getLineHeight('md'), getFontSize('md'), function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), pxToRem(7), pxToRem(7));
});
var buttonSizes = (_a = {},
    _a[ButtonSizes.xl] = ButtonXlarge,
    _a[ButtonSizes.lg] = ButtonLarge,
    _a[ButtonSizes.md] = ButtonMedium,
    _a[ButtonSizes.sm] = ButtonSmall,
    _a);
/*
 * BUTTON VARIANTS
 */
var ButtonSolid = css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]) {\n    color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]) {\n    color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"])), getButtonColor('bgColor'), getButtonColor('bgColor'), getButtonColor('color'), getButtonColor('disabledBgColor'), getButtonColor('disabledBgColor'), getButtonColor('hoverBgColor'), getButtonColor('hoverBgColor'), getButtonColor('color'), getButtonColor('activeBgColor'), getButtonColor('activeBgColor'), getButtonColor('color'));
var ButtonOutline = css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"])), getButtonColor('bgColor'), getButtonColor('borderColor'), getButtonColor('color'), getButtonColor('disabledColor'), getButtonColor('disabledBgColor'), getButtonColor('hoverBgColor'), getButtonColor('color'), getButtonColor('activeBgColor'), getButtonColor('color'));
var ButtonText = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: transparent;\n  padding-left: 0;\n  padding-right: 0;\n  text-decoration: none;\n  height: 100%;\n  font-weight: bold;\n  display: flex;\n  vertical-align: middle;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  background-color: transparent;\n  padding-left: 0;\n  padding-right: 0;\n  text-decoration: none;\n  height: 100%;\n  font-weight: bold;\n  display: flex;\n  vertical-align: middle;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    color: ", ";\n    text-decoration: none;\n  }\n"])), getButtonColor('color'), getButtonColor('disabledColor'), getButtonColor('hoverColor'), getButtonColor('activeColor'));
var buttonVariants = (_b = {},
    _b[ButtonVariants.solid] = ButtonSolid,
    _b[ButtonVariants.outline] = ButtonOutline,
    _b[ButtonVariants.text] = ButtonText,
    _b);
var StyledButton = styled.button.withConfig({
    shouldForwardProp: function (property) {
        return !includes(property, [
            'size',
            'variant',
            'color',
            'icon',
            'margin',
            'isLoading',
            'isDisabled',
            'isExpanded',
        ]);
    },
})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n  ", ";\n"])), ButtonBase, function (_a) {
    var size = _a.size;
    return buttonSizes[size];
}, function (_a) {
    var variant = _a.variant;
    return buttonVariants[variant];
});
export default StyledButton;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
//# sourceMappingURL=StyledButton.js.map