alchemy-tech-ui/dist/components/Button.js

react component library for alchemy apps

'use strict';

var tslib = require('tslib');
var styled = require('styled-components');
var React = require('react');
var colors = require('../colors.js');

var StyledButton = styled.button(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  color: black;\n  padding: 8px;\n  border: 1px solid black;\n  transition: all 0.2s ease-in-out;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  color: black;\n  padding: 8px;\n  border: 1px solid black;\n  transition: all 0.2s ease-in-out;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), colors.gray["100"], function(_a) {
  var primary = _a.primary;
  return primary ? "\n    background-color: black;\n    color: white;\n    :hover {\n      background-color: ".concat(colors.gray["800"], ";\n    }\n      ") : "";
}, function(_a) {
  var admin = _a.admin;
  return admin ? "\n    background-color: ".concat(colors.system["800"], ";\n    color: white;\n    padding: 4px;\n    border: none;\n    font-size: 12px;\n    :hover {\n      background-color: ").concat(colors.system["600"], ";\n    }\n      ") : "";
});
function Button(_a) {
  var text = _a.text, _b = _a.primary, primary = _b === void 0 ? false : _b, onClick = _a.onClick, className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.admin, admin = _d === void 0 ? false : _d, children = _a.children;
  return React.createElement(
    StyledButton,
    { primary: primary, onClick: onClick, className: className, disabled: disabled, admin: admin },
    text,
    children
  );
}
var templateObject_1;

module.exports = Button;