"use strict";

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

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

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

var _uiIcons = require("@teamleader/ui-icons");

var _ = require("../..");

var _default = {
  component: _.IconButton,
  title: 'IconButton'
};
exports.default = _default;

var Wrapper = function Wrapper(_ref) {
  var children = _ref.children,
      _ref$inverse = _ref.inverse,
      inverse = _ref$inverse === void 0 ? false : _ref$inverse;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      minHeight: '50px',
      display: 'flex',
      backgroundColor: inverse ? 'grey' : 'transparent'
    }
  }, children);
};

var sizes = ['small', 'medium', 'large'];
var colors = ['neutral', 'white', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'teal'];
var tints = ['lightest', 'light', 'normal', 'dark', 'darkest'];

var Main = function Main() {
  return /*#__PURE__*/_react.default.createElement("div", null, sizes.map(function (size) {
    return colors.map(function (color) {
      return /*#__PURE__*/_react.default.createElement(Wrapper, {
        key: color,
        inverse: color === 'white'
      }, tints.map(function (tint) {
        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
          key: tint
        }, /*#__PURE__*/_react.default.createElement(_.IconButton, {
          size: size,
          color: color,
          tint: tint,
          icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconGiftMediumOutline, null),
          marginRight: 2
        }), /*#__PURE__*/_react.default.createElement(_.IconButton, {
          size: size,
          color: color,
          tint: tint,
          icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconGiftMediumOutline, null),
          marginRight: 2,
          disabled: true
        }), /*#__PURE__*/_react.default.createElement(_.IconButton, {
          size: size,
          color: color,
          tint: tint,
          icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconGiftMediumOutline, null),
          marginRight: 2,
          selected: true
        }));
      }));
    });
  }));
};

exports.Main = Main;