@helpscout/artboard/dist/UI/Button/Button.js

A tool kit for React UI development and design

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var fancy_1 = require("@helpscout/fancy");
var polished_1 = require("polished");
var Icon_1 = require("../Icon");
var utils_1 = require("../../utils");
var Button = /** @class */ (function (_super) {
    __extends(Button, _super);
    function Button() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.renderContent = function () {
            var _a = _this.props, children = _a.children, icon = _a.icon;
            if (icon && Icon_1.default[icon]) {
                var IconComponent = Icon_1.default[icon];
                return React.createElement(IconComponent, { size: "18px" });
            }
            return children;
        };
        return _this;
    }
    Button.prototype.render = function () {
        return React.createElement(ButtonUI, __assign({}, this.props), this.renderContent());
    };
    Button.defaultProps = {
        isActive: false,
        icon: undefined,
        onClick: utils_1.noop,
    };
    return Button;
}(React.PureComponent));
exports.Button = Button;
var ButtonUI = fancy_1.default('button')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,\n    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-size: 11px;\n\n  appearance: none;\n  display: inline-block;\n  padding: 3px 8px;\n  margin-bottom: 0;\n  line-height: 1.4;\n  white-space: nowrap;\n  background-image: none;\n  border: 1px solid #0000;\n  border-radius: 4px;\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);\n  box-sizing: border-box;\n  color: #333;\n  background-color: #fcfcfc;\n  background-image: linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);\n  border-color: #c2c0c2 #c2c0c2 #a19fa1;\n  outline: none;\n\n  &:active {\n    background-color: #ddd;\n    background-image: none;\n  }\n\n  ", ";\n\n  ", ";\n"], ["\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,\n    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-size: 11px;\n\n  appearance: none;\n  display: inline-block;\n  padding: 3px 8px;\n  margin-bottom: 0;\n  line-height: 1.4;\n  white-space: nowrap;\n  background-image: none;\n  border: 1px solid #0000;\n  border-radius: 4px;\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);\n  box-sizing: border-box;\n  color: #333;\n  background-color: #fcfcfc;\n  background-image: linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);\n  border-color: #c2c0c2 #c2c0c2 #a19fa1;\n  outline: none;\n\n  &:active {\n    background-color: #ddd;\n    background-image: none;\n  }\n\n  ",
    ";\n\n  ",
    ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.darkMode &&
        "\n    background-color: #232223;\n    background-image: none;\n    border-color: #000;\n    color: white;\n\n    &:active {\n      background-color: #2b2a2b;\n    }\n  ";
}, function (_a) {
    var isActive = _a.isActive;
    return isActive &&
        "\n    background-color: #3c93f7;\n    background-image: linear-gradient(to bottom, " + polished_1.lighten(0.05, '#3c93f7') + " 0, #3c93f7 100%);\n    background-image: none;\n    border-color: #0b78f5 #0b78f5 " + polished_1.darken(0.05, '#0b78f5') + ";\n    color: white;\n\n    &:active {\n      background-color: " + polished_1.darken(0.05, '#3c93f7') + ";\n      color: white;\n    }\n  ";
});
exports.default = Button;
var templateObject_1;
//# sourceMappingURL=Button.js.map