react-elegant-ui/components/Button/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WithIcon = exports.View = exports.Types = exports.Size = exports.Disabled = void 0;
var _react = _interopRequireDefault(require("react"));
var _desktop = require("../Button.bundle/desktop");
var _ButtonContent = require("../Content/Button-Content");
var _desktop2 = require("../../Icon/Icon.bundle/desktop");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var buttonViews = ['action', 'default', 'pseudo', 'clear', 'link'];
var View = function () {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonViews.map(function (view, index) {
    return /*#__PURE__*/_react.default.createElement("span", {
      key: index
    }, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button"
    }, view), ' ');
  }));
};
exports.View = View;
var Disabled = function () {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonViews.map(function (view, index) {
    return /*#__PURE__*/_react.default.createElement("span", {
      key: index
    }, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button",
      disabled: true
    }, view), ' ');
  }));
};
exports.Disabled = Disabled;
var Size = function () {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['l', 'm', 's'].map(function (size, index) {
    return /*#__PURE__*/_react.default.createElement("span", {
      key: index
    }, buttonViews.map(function (view, index2) {
      return /*#__PURE__*/_react.default.createElement("span", {
        key: index2
      }, /*#__PURE__*/_react.default.createElement(_desktop.Button, __assign({}, {
        size: size,
        view: view
      }, {
        as: "button"
      }), view), ' ');
    }), index < 2 ? ( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null))) : undefined);
  }));
};
exports.Size = Size;
var Types = function () {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "pseudo",
    as: "button"
  }, "button"), ' ', /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "pseudo",
    as: "a",
    type: "link",
    url: "#"
  }, "link"), ' ', /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "pseudo",
    as: "span"
  }, "span"));
};
exports.Types = Types;
var WithIcon = function () {
  return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "default",
    as: "button",
    size: "l",
    iconLeft: function (className) {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        className: className,
        glyph: "close",
        size: "l"
      });
    },
    iconRight: function (className) {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        className: className,
        glyph: "expand-more",
        size: "l"
      });
    }
  }, "both sides")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "default",
    as: "button",
    size: "m",
    iconLeft: function (className) {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        className: className,
        glyph: "check"
      });
    }
  }, "select item")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "default",
    as: "button",
    size: "s",
    iconRight: function (className) {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        className: className,
        glyph: "unfold-more",
        size: "s"
      });
    }
  }, "unfold")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "default",
    as: "button",
    size: "l",
    iconLeft: function () {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        glyph: "close"
      });
    }
  }), ' ', /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "default",
    as: "button",
    size: "m",
    iconLeft: function () {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        glyph: "close"
      });
    }
  }), ' ', /*#__PURE__*/_react.default.createElement(_desktop.Button, {
    view: "default",
    as: "button",
    size: "s",
    iconLeft: function () {
      return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
        glyph: "close",
        size: "s"
      });
    }
  }))), buttonViews.map(function (view, index) {
    return /*#__PURE__*/_react.default.createElement("tr", {
      key: index
    }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button",
      size: "m",
      iconLeft: function (className) {
        return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
          className: className,
          glyph: "close"
        });
      },
      iconRight: function (className) {
        return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
          className: className,
          glyph: "expand-more"
        });
      }
    }, "both sides")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button",
      size: "m",
      iconLeft: function (className) {
        return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
          className: className,
          glyph: "check"
        });
      }
    }, "select item")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button",
      size: "m",
      iconRight: function (className) {
        return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
          className: className,
          glyph: "unfold-more"
        });
      }
    }, "unfold")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button",
      size: "m",
      iconRight: function (className) {
        return /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
          className: className,
          glyph: "unfold-more"
        });
      }
    }, "unfold")), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_desktop.Button, {
      view: view,
      as: "button",
      size: "m",
      raw: true
    }, /*#__PURE__*/_react.default.createElement(_ButtonContent.ButtonContent, null, /*#__PURE__*/_react.default.createElement(_desktop2.Icon, {
      glyph: "close"
    })))));
  })));
};
exports.WithIcon = WithIcon;