import React from 'react';
import { Flexbox, Icon, Illustration } from '../../../..';
import Badge from '../..';
import { Display } from '../../../../common/Display';
export default {
  title: 'Molecules / Badge / Icon',
  parameters: {
    component: Badge.Icon
  }
};
export var DefaultAndCommonUseCases = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Default use',
        component: React.createElement(Badge.Icon, null, React.createElement(Icon.Add8, null))
      }, {
        title: 'Different sizes',
        component: React.createElement(Flexbox, {
          container: true,
          direction: "column"
        }, React.createElement(Badge.Icon, {
          badgeSize: "xl"
        }, React.createElement(Icon.Book32, {
          color: function color(t) {
            return t.color.badgeIconColor;
          }
        })), React.createElement(Badge.Icon, {
          badgeSize: "l"
        }, React.createElement(Icon.Gold24, {
          color: function color(t) {
            return t.color.badgeIconColor;
          }
        })), React.createElement(Badge.Icon, {
          badgeSize: "m"
        }, React.createElement(Icon.Help16, {
          color: function color(t) {
            return t.color.badgeIconColor;
          }
        })), React.createElement(Badge.Icon, {
          badgeSize: "s"
        }, React.createElement(Icon.Bolt8, {
          color: function color(t) {
            return t.color.badgeIconColor;
          }
        })))
      }, {
        title: 'Custom icon badge with custom props',
        component: React.createElement(Badge.Icon, {
          badgeColor: function badgeColor(t) {
            return t.color.bulbBackground;
          },
          badgeSize: "l"
        }, React.createElement(Icon.Lightbulb24, {
          color: function color(t) {
            return t.color.bulbForeground;
          }
        }))
      }, {
        title: 'Custom icon badge size',
        component: React.createElement(Badge.Icon, {
          badgeColor: function badgeColor(t) {
            return t.color.bulbBackground;
          },
          badgeSize: 30
        }, React.createElement(Icon.Lightbulb24, {
          color: function color(t) {
            return t.color.bulbForeground;
          }
        }))
      }, {
        title: 'Badge with illustration default use',
        component: React.createElement(Badge.Icon, {
          badgeSize: "xl"
        }, React.createElement(Illustration.UrgentMailFill64, null))
      }, {
        title: 'Badge with illustration with custom props',
        component: React.createElement(Badge.Icon, {
          badgeSize: "xl"
        }, React.createElement("span", null, React.createElement(Illustration.UrgentMailFill64, {
          color: function color(t) {
            return t.color.badgeIconColor;
          },
          secondaryColor: function secondaryColor(t) {
            return t.color.warning;
          }
        })))
      }]
    });
  },
  name: 'Default and common use cases'
};