@sergiodxa/ui/lib/button.js

UI components for my projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

exports.Button = Button;
exports.LinkButton = LinkButton;
exports.ActionButton = ActionButton;

var _style = require("styled-jsx/style");

var _style2 = _interopRequireDefault(_style);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _palette = require("@sergiodxa/palette");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Check if the button has an href and render it as a `<LinkButton />`
 * If it doesn't has it render it as `<ActionButton />`
 * @param {Object} props
 * @param {String} [props.href]
 */
/** @module ui/button */
function Button() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var href = _ref.href,
      props = (0, _objectWithoutProperties3.default)(_ref, ["href"]);

  if (href) {
    return _react2.default.createElement(LinkButton, (0, _extends3.default)({ href: href }, props));
  }
  return _react2.default.createElement(ActionButton, props);
}

/**
 * Render an `<a />` stylized as a `<button />`
 * @param {Object} props
 * @param {Object} props.children
 * @param {Boolean} [props.inverted=false]
 */
function LinkButton() {
  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var children = _ref2.children,
      _ref2$inverted = _ref2.inverted,
      inverted = _ref2$inverted === undefined ? false : _ref2$inverted,
      props = (0, _objectWithoutProperties3.default)(_ref2, ["children", "inverted"]);

  return _react2.default.createElement(
    "a",
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([["1958095180", [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white, inverted ? _palette.black : _palette.white]]]) + " " + (props.className != null && props.className || "")
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: "1958095180",
      css: "a.__jsx-style-dynamic-selector{background-color:" + (inverted ? _palette.white : _palette.black) + ";border:1px solid " + (inverted ? _palette.black : _palette.white) + ";border-radius:5px;color:" + (inverted ? _palette.black : _palette.white) + ";cursor:pointer;display:inline-block;font-size:0.9em;outline:none;padding:0.75em;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;margin:0.25em 0;}",
      dynamic: [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white, inverted ? _palette.black : _palette.white]
    })
  );
}

/**
 * Render a stylized `<button />`
 * @param {Object} props Component props
 * @param {Object} props.children Content of the coomponoent
 * @param {String} [props.type="button"] The type of button (button, submit or reset)
 * @param {Boolean} [props.inverted=false] If the colors are inverted
 * @param {Object} props.props The rest of the component props
 */
function ActionButton() {
  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var children = _ref3.children,
      _ref3$type = _ref3.type,
      type = _ref3$type === undefined ? "button" : _ref3$type,
      _ref3$inverted = _ref3.inverted,
      inverted = _ref3$inverted === undefined ? false : _ref3$inverted,
      props = (0, _objectWithoutProperties3.default)(_ref3, ["children", "type", "inverted"]);

  return _react2.default.createElement(
    "button",
    (0, _extends3.default)({ type: type }, props, {
      className: _style2.default.dynamic([["45811884", [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white]]]) + " " + (props.className != null && props.className || "")
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: "45811884",
      css: "button.__jsx-style-dynamic-selector{background:" + (inverted ? _palette.white : _palette.black) + ";border:none;border-radius:5px;color:" + (inverted ? _palette.black : _palette.white) + ";cursor:pointer;font-size:0.9em;outline:none;padding:0.75em;text-transform:uppercase;margin:0.75em 0;}",
      dynamic: [inverted ? _palette.white : _palette.black, inverted ? _palette.black : _palette.white]
    })
  );
}