design-system-jss/lib/components/Button/Button.js

Boilerplate Design System using JSS and ReactJS

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactJss = require("react-jss");

var _reactJss2 = _interopRequireDefault(_reactJss);

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

var styles = function styles(theme) {
  return {
    myButton: {
      color: theme.text.color,
      margin: {
        // jss-expand gives more readable syntax
        top: 5, // jss-default-unit makes this 5px
        right: 0,
        bottom: 0,
        left: "1rem"
      },
      "& span": {
        // jss-nested applies this to a child span
        fontWeight: "bold" // jss-camel-case turns this into 'font-weight'
      }
    },
    myLabel: {
      fontStyle: "italic"
    }
  };
};

/**
 * Button
 *
 */
var Button = function Button(_ref) {
  var classes = _ref.classes,
      children = _ref.children;
  return _react2.default.createElement(
    "button",
    { type: "button", className: classes.myButton },
    _react2.default.createElement(
      "span",
      { className: classes.myLabel },
      children
    )
  );
};

Button.propTypes = {
  /**
   * CSS Class names provided by JSS
   */
  classes: _propTypes2.default.shape({
    myButton: _propTypes2.default.string.isRequired,
    myLabel: _propTypes2.default.string.isRequired
  }).isRequired,

  /**
   * Child components (array or single element)
   */
  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]).isRequired
};

exports.default = (0, _reactJss2.default)(styles)(Button);