@automattic/simple-components/cjs/button/docs/example.js

React components, as used on WordPress.com

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _gridicons = _interopRequireDefault(require("gridicons"));

var _button = _interopRequireDefault(require("components/button"));

var _card = _interopRequireDefault(require("components/card"));

var _config = _interopRequireDefault(require("config"));

var _docsExample = _interopRequireDefault(require("devdocs/docs-example"));

/** @format */

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
_button.default.displayName = 'Button';

var Buttons =
/*#__PURE__*/
function (_React$PureComponent) {
  (0, _inherits2.default)(Buttons, _React$PureComponent);

  function Buttons() {
    var _ref;

    var _temp, _this;

    (0, _classCallCheck2.default)(this, Buttons);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = Buttons.__proto__ || Object.getPrototypeOf(Buttons)).call.apply(_ref, [this].concat(args))), _this.renderDocsExample = function () {
      return _react.default.createElement(_docsExample.default, null, _this.renderButtons());
    }, _this.renderDocsExampleWithUsageStats = function () {
      return _react.default.createElement(_docsExample.default, {
        componentUsageStats: _this.props.componentUsageStats
      }, _this.renderButtons());
    }, _this.renderButtons = function () {
      return _this.props.exampleCode;
    }, _temp));
  }

  (0, _createClass2.default)(Buttons, [{
    key: "render",
    value: function render() {
      return _config.default.isEnabled('devdocs/components-usage-stats') ? this.renderDocsExampleWithUsageStats() : this.renderDocsExample();
    }
  }]);
  return Buttons;
}(_react.default.PureComponent);

Buttons.displayName = 'Button';
Buttons.defaultProps = {
  exampleCode: _react.default.createElement(_card.default, null, _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, null, "Button"), _react.default.createElement(_button.default, null, _react.default.createElement(_gridicons.default, {
    icon: "heart"
  }), _react.default.createElement("span", null, "Icon button")), _react.default.createElement(_button.default, null, _react.default.createElement(_gridicons.default, {
    icon: "plugins"
  })), _react.default.createElement(_button.default, {
    disabled: true
  }, "Disabled button")), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    scary: true
  }, "Scary button"), _react.default.createElement(_button.default, {
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "globe"
  }), _react.default.createElement("span", null, "Scary icon button")), _react.default.createElement(_button.default, {
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "pencil"
  })), _react.default.createElement(_button.default, {
    scary: true,
    disabled: true
  }, "Scary disabled button")), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    primary: true
  }, "Primary button"), _react.default.createElement(_button.default, {
    primary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "camera"
  }), _react.default.createElement("span", null, "Primary icon button")), _react.default.createElement(_button.default, {
    primary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "time"
  })), _react.default.createElement(_button.default, {
    primary: true,
    disabled: true
  }, "Primary disabled button")), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    primary: true,
    scary: true
  }, "Primary scary button"), _react.default.createElement(_button.default, {
    primary: true,
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "user-circle"
  }), _react.default.createElement("span", null, "Primary scary icon button")), _react.default.createElement(_button.default, {
    primary: true,
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cart"
  })), _react.default.createElement(_button.default, {
    primary: true,
    scary: true,
    disabled: true
  }, "Primary scary disabled button")), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    borderless: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove")), _react.default.createElement(_button.default, {
    borderless: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  }), _react.default.createElement("span", null, "Trash")), _react.default.createElement(_button.default, {
    borderless: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "link-break"
  }), _react.default.createElement("span", null, "Disconnect")), _react.default.createElement(_button.default, {
    borderless: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  })), _react.default.createElement(_button.default, {
    borderless: true,
    disabled: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove"))), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    borderless: true,
    primary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove")), _react.default.createElement(_button.default, {
    borderless: true,
    primary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  }), _react.default.createElement("span", null, "Trash")), _react.default.createElement(_button.default, {
    borderless: true,
    primary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "link-break"
  }), _react.default.createElement("span", null, "Disconnect")), _react.default.createElement(_button.default, {
    borderless: true,
    primary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  })), _react.default.createElement(_button.default, {
    borderless: true,
    primary: true,
    disabled: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove"))), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    borderless: true,
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove")), _react.default.createElement(_button.default, {
    borderless: true,
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  }), _react.default.createElement("span", null, "Trash")), _react.default.createElement(_button.default, {
    borderless: true,
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "link-break"
  }), _react.default.createElement("span", null, "Disconnect")), _react.default.createElement(_button.default, {
    borderless: true,
    scary: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  })), _react.default.createElement(_button.default, {
    borderless: true,
    scary: true,
    disabled: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove"))), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    compact: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove")), _react.default.createElement(_button.default, {
    compact: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  }), _react.default.createElement("span", null, "Trash")), _react.default.createElement(_button.default, {
    compact: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "link-break"
  }), _react.default.createElement("span", null, "Disconnect")), _react.default.createElement(_button.default, {
    compact: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  })), _react.default.createElement(_button.default, {
    compact: true,
    disabled: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "cross"
  }), _react.default.createElement("span", null, "Remove"))), _react.default.createElement("div", {
    className: "docs__design-button-row"
  }, _react.default.createElement(_button.default, {
    busy: true
  }, "Busy button"), _react.default.createElement(_button.default, {
    primary: true,
    busy: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "time"
  })), _react.default.createElement(_button.default, {
    primary: true,
    busy: true
  }, "Primary busy button"), _react.default.createElement(_button.default, {
    primary: true,
    scary: true,
    busy: true
  }, _react.default.createElement(_gridicons.default, {
    icon: "trash"
  }), _react.default.createElement("span", null, "Primary scary busy button"))))
};
var _default = Buttons;
exports.default = _default;
module.exports = exports["default"];