@automattic/simple-components/cjs/notice/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 _noticeAction = _interopRequireDefault(require("components/notice/notice-action"));

var _notice = _interopRequireDefault(require("components/notice"));

/** @format */

/**
 * External dependencies
 */

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

  function Notices() {
    var _ref;

    var _temp, _this;

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

    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 = Notices.__proto__ || Object.getPrototypeOf(Notices)).call.apply(_ref, [this].concat(args))), _this.state = {
      compactNotices: false
    }, _this.toggleNotices = function () {
      _this.setState({
        compactNotices: !_this.state.compactNotices
      });
    }, _temp));
  }

  (0, _createClass2.default)(Notices, [{
    key: "render",
    value: function render() {
      var toggleNoticesText = this.state.compactNotices ? 'Normal Notices' : 'Compact Notices';
      return _react.default.createElement("div", null, _react.default.createElement("a", {
        className: "docs__design-toggle button",
        onClick: this.toggleNotices
      }, toggleNoticesText), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        showDismiss: false,
        isCompact: this.state.compactNotices ? true : null
      }, "I'm a notice with no status and ", _react.default.createElement("a", null, "a link"), ".")), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        text: "I'm a notice with no status and an action.",
        showDismiss: false,
        isCompact: this.state.compactNotices ? true : null
      }, _react.default.createElement(_noticeAction.default, {
        href: "#"
      }, 'Update'))), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-info",
        text: "I'm an `is-info` notice with custom icon.",
        icon: "heart",
        isCompact: this.state.compactNotices ? true : null
      })), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-info",
        showDismiss: false,
        text: "I'm an `is-info` notice with custom icon and an action.",
        icon: "heart",
        isCompact: this.state.compactNotices ? true : null
      }, _react.default.createElement(_noticeAction.default, {
        href: "#"
      }, 'Update'))), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-success",
        text: "I'm an `is-success` notice.",
        isCompact: this.state.compactNotices ? true : null
      })), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-error",
        showDismiss: false,
        text: "I'm an `is-error` notice.",
        isCompact: this.state.compactNotices ? true : null
      }, _react.default.createElement(_noticeAction.default, {
        href: "#"
      }, 'Update'))), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-warning",
        icon: "mention",
        text: "I'm an `is-warning` notice with custom icon.",
        isCompact: this.state.compactNotices ? true : null
      })), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-warning",
        isCompact: this.state.compactNotices ? true : null,
        showDismiss: false,
        text: "I'm an `is-warning` notice with an action."
      }, _react.default.createElement(_noticeAction.default, {
        href: "#"
      }, 'Update'))), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-success",
        isCompact: this.state.compactNotices ? true : null,
        showDismiss: false,
        text: "I'm an `is-success` notice with an arrow link."
      }, _react.default.createElement(_noticeAction.default, {
        href: "#",
        external: true
      }, 'Preview'))), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-error",
        showDismiss: true,
        text: "I'm an always dismissable error notice.",
        isCompact: this.state.compactNotices ? true : null
      }, _react.default.createElement(_noticeAction.default, {
        href: "#"
      }, "More"))), _react.default.createElement("div", null, _react.default.createElement(_notice.default, {
        status: "is-info",
        icon: "reader",
        isLoading: true,
        text: "I'm a notice that's loading\u2026",
        showDismiss: false,
        isCompact: this.state.compactNotices ? true : null
      })));
    }
  }]);
  return Notices;
}(_react.default.PureComponent);

Notices.displayName = 'Notice';
var _default = Notices;
exports.default = _default;
module.exports = exports["default"];