"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Showcase = exports.CustomChildren = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Display = require("../../../../common/Display");
var _ = require("../../../..");
var _2 = _interopRequireDefault(require("../.."));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / Badge / Account',
  parameters: {
    component: _2.default.Account
  }
};
var Showcase = exports.Showcase = {
  render: function render() {
    return _react.default.createElement(_.Flexbox, {
      container: true
    }, _react.default.createElement(_.Flexbox, {
      container: true,
      direction: "column"
    }, _react.default.createElement(_2.default.Account, {
      badgeSize: "l"
    }, "ISK"), _react.default.createElement(_2.default.Account, {
      badgeSize: "m"
    }, "ISK"), _react.default.createElement(_2.default.Account, {
      badgeSize: "s"
    }, "ISK")), _react.default.createElement(_.Flexbox, {
      container: true,
      direction: "column"
    }, _react.default.createElement(_2.default.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackgroundPositive;
      },
      badgeSize: "l"
    }, "SEB"), _react.default.createElement(_2.default.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackgroundPositive;
      },
      badgeSize: "m"
    }, "SEB"), _react.default.createElement(_2.default.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackgroundPositive;
      },
      badgeSize: "s"
    }, "SEB")), _react.default.createElement(_.Flexbox, {
      container: true,
      direction: "column"
    }, _react.default.createElement(_2.default.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "l"
    }, "Handels"), _react.default.createElement(_2.default.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "m"
    }, "HB"), _react.default.createElement(_2.default.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "s"
    }, "HB")));
  }
};
var StyledTypography = (0, _styledComponents.default)(_.Typography).withConfig({
  displayName: "AccountBadgestories__StyledTypography",
  componentId: "sc-ma62f4-0"
})(["font-size:8px;color:", ";"], function (p) {
  return p.theme.color.badgeTextColor;
});
var CustomChildren = exports.CustomChildren = {
  render: function render() {
    return _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Typography as child',
        component: _react.default.createElement(_2.default.Account, null, _react.default.createElement(_.Typography, {
          color: function color(t) {
            return t.color.badgeTextColor;
          },
          type: "caption"
        }, "KF"))
      }, {
        title: 'Styled typography as child',
        component: _react.default.createElement(_2.default.Account, null, _react.default.createElement(StyledTypography, null, "ASK"))
      }]
    });
  },
  name: 'Custom children'
};