import { __assign } from "tslib";
import * as React from 'react';
import { SplitButton } from '@fluentui/react-button';
import { ContextualMenu, DirectionalHint, Stack, Text } from 'office-ui-fabric-react';
import * as classes from '../Button.stories.scss';
var menuProps = {
    directionalHint: DirectionalHint.bottomRightEdge,
    items: [
        {
            key: 'a',
            name: 'Item a',
        },
        {
            key: 'b',
            name: 'Item b',
        },
    ],
};
var SplitButtonExamples = function (props) { return (React.createElement("div", { className: classes.hStack },
    React.createElement(SplitButton, __assign({}, props, { menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { disabled: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { primary: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { primary: true, disabled: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { ghost: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { ghost: true, disabled: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { transparent: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"),
    React.createElement(SplitButton, __assign({}, props, { transparent: true, disabled: true, menu: React.createElement(ContextualMenu, __assign({}, menuProps)) }), "Hello, world"))); };
export var SplitButtons = function () { return (React.createElement(Stack, { gap: 20 },
    React.createElement(Text, { variant: "xLarge" }, "A split button comes in default and `primary` variant."),
    React.createElement(SplitButtonExamples, null),
    React.createElement(Text, { variant: "xLarge" }, "A split button can appear round using the `circular` prop."),
    React.createElement(SplitButtonExamples, { circular: true }),
    React.createElement(Text, { variant: "xLarge" }, "A split button can fill the width of its container using the `block` prop."),
    React.createElement(SplitButtonExamples, { block: true }),
    React.createElement(Text, { variant: "xLarge" }, "A split button can contain only an icon using the `iconOnly` prop."),
    React.createElement(SplitButtonExamples, { iconOnly: true, icon: "X" }),
    React.createElement(Text, { variant: "xLarge" }, "A split button can be both `circular` and `iconOnly`."),
    React.createElement(SplitButtonExamples, { circular: true, iconOnly: true, icon: "X" }),
    React.createElement(Text, { variant: "xLarge" }, "A split button can show a loading indicator using the `loading` prop."),
    React.createElement(SplitButtonExamples, { loading: true }),
    React.createElement(Text, { variant: "xLarge" }, "A split button can be sized."),
    React.createElement("div", { className: classes.vStack },
        React.createElement(SplitButtonExamples, { size: "smallest" }),
        React.createElement(SplitButtonExamples, { size: "smaller" }),
        React.createElement(SplitButtonExamples, { size: "small" }),
        React.createElement(SplitButtonExamples, { size: "large" }),
        React.createElement(SplitButtonExamples, { size: "larger" }),
        React.createElement(SplitButtonExamples, { size: "largest" })))); };
//# sourceMappingURL=SplitButton.stories.js.map