"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 _Banner = _interopRequireDefault(require("./Banner"));

var _typography = require("../typography");

var _default = {
  component: _Banner.default,
  title: 'Banner'
};
exports.default = _default;

var Wrapper = function Wrapper(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: '6px'
    }
  }, children);
};

var Main = function Main() {
  return /*#__PURE__*/_react.default.createElement("div", null, ['white', 'neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua'].map(function (color) {
    return ['small', 'medium', 'large'].map(function (size) {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
        key: color + size
      }, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Banner.default, {
        color: color,
        size: size
      }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, color, " - ", size))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Banner.default, {
        color: color,
        size: size,
        fullWidth: true
      }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, color, " - ", size, " - full width"))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Banner.default, {
        color: color,
        size: size,
        onClose: function onClose() {}
      }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, color, " - ", size, " - with onClose"))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Banner.default, {
        color: color,
        size: size,
        onClose: function onClose() {},
        fullWidth: true
      }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, color, " - ", size, " - full width - with onClose"))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Banner.default, {
        color: color,
        size: size,
        icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconBellMediumOutline, null)
      }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, color, " - ", size, " - with onClose"))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_Banner.default, {
        color: color,
        size: size,
        icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconBellMediumOutline, null),
        fullWidth: true
      }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, color, " - ", size, " - full width - with onClose"))));
    });
  }));
};

exports.Main = Main;