import React from 'react';
import styled from 'styled-components';
import { Display } from '../../../../common/Display';
import { Flexbox, Typography } from '../../../..';
import Badge from '../..';
export default {
  title: 'Molecules / Badge / Account',
  parameters: {
    component: Badge.Account
  }
};
export var Showcase = {
  render: function render() {
    return React.createElement(Flexbox, {
      container: true
    }, React.createElement(Flexbox, {
      container: true,
      direction: "column"
    }, React.createElement(Badge.Account, {
      badgeSize: "l"
    }, "ISK"), React.createElement(Badge.Account, {
      badgeSize: "m"
    }, "ISK"), React.createElement(Badge.Account, {
      badgeSize: "s"
    }, "ISK")), React.createElement(Flexbox, {
      container: true,
      direction: "column"
    }, React.createElement(Badge.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackgroundPositive;
      },
      badgeSize: "l"
    }, "SEB"), React.createElement(Badge.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackgroundPositive;
      },
      badgeSize: "m"
    }, "SEB"), React.createElement(Badge.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackgroundPositive;
      },
      badgeSize: "s"
    }, "SEB")), React.createElement(Flexbox, {
      container: true,
      direction: "column"
    }, React.createElement(Badge.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "l"
    }, "Handels"), React.createElement(Badge.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "m"
    }, "HB"), React.createElement(Badge.Account, {
      badgeColor: function badgeColor(t) {
        return t.color.badgeBackground;
      },
      badgeSize: "s"
    }, "HB")));
  }
};
var StyledTypography = styled(Typography).withConfig({
  displayName: "AccountBadgestories__StyledTypography",
  componentId: "sc-ma62f4-0"
})(["font-size:8px;color:", ";"], function (p) {
  return p.theme.color.badgeTextColor;
});
export var CustomChildren = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Typography as child',
        component: React.createElement(Badge.Account, null, React.createElement(Typography, {
          color: function color(t) {
            return t.color.badgeTextColor;
          },
          type: "caption"
        }, "KF"))
      }, {
        title: 'Styled typography as child',
        component: React.createElement(Badge.Account, null, React.createElement(StyledTypography, null, "ASK"))
      }]
    });
  },
  name: 'Custom children'
};