import * as React from 'react';
import { Badge } from '@fluentui/react-avatar';
import { SkypeCheckIcon, SkypeArrowIcon, SkypeMinusIcon, SkypeClockIcon } from '@fluentui/react-icons';
import { StoryExample } from '../utils/StoryExample';
export var BadgeExamples = function () { return (React.createElement("div", { style: { background: 'rgb(232, 232, 232)' } },
    React.createElement(StoryExample, { title: "Badge" },
        React.createElement(Badge, { size: "smallest", state: "error" }),
        React.createElement(Badge, { size: "smaller", state: "warning" }),
        React.createElement(Badge, { size: "small", state: "success" }),
        React.createElement(Badge, { size: "medium" }),
        React.createElement(Badge, { size: "large", state: "error" }),
        React.createElement(Badge, { size: "larger", state: "warning" }),
        React.createElement(Badge, { size: "largest", state: "success" })),
    React.createElement(StoryExample, { title: "Badge with icon" },
        React.createElement(Badge, { size: "smallest", state: "error", icon: { as: SkypeMinusIcon } }),
        React.createElement(Badge, { size: "smaller", state: "warning", icon: { as: SkypeClockIcon } }),
        React.createElement(Badge, { size: "small", state: "success", icon: { as: SkypeCheckIcon } }),
        React.createElement(Badge, { size: "medium", state: "info", icon: { as: SkypeArrowIcon } }),
        React.createElement(Badge, { size: "large", state: "error", icon: { as: SkypeMinusIcon } }),
        React.createElement(Badge, { size: "larger", state: "warning", icon: { as: SkypeClockIcon } }),
        React.createElement(Badge, { size: "largest", state: "success", icon: { as: SkypeCheckIcon } })),
    React.createElement(StoryExample, { title: "Badge styled with tokens" },
        React.createElement(Badge, { tokens: {
                size: '13px',
            } }),
        React.createElement(Badge, { size: "medium", icon: { as: SkypeArrowIcon }, tokens: {
                color: 'mistyrose',
                iconColor: 'hotpink',
                borderColor: 'hotpink',
                borderWidth: '2px',
                borderStyle: 'solid',
            } }),
        React.createElement(Badge, { size: "large", state: "success", tokens: {
                borderRadius: '2px',
            } })))); };
//# sourceMappingURL=Badge.stories.js.map