import { __assign } from "tslib";
import * as React from 'react';
import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '@fluentui/react-accordion';
import { RocketIcon } from '@fluentui/react-icons-mdl2';
export var AccordionExample = function (props) {
    return (React.createElement(Accordion, __assign({}, props, { icon: props.icon ? React.createElement(RocketIcon, null) : undefined }),
        React.createElement(AccordionItem, null,
            React.createElement(AccordionHeader, null, "Accordion Header 1"),
            React.createElement(AccordionPanel, null,
                React.createElement("div", null,
                    React.createElement("button", null, "Button 1")),
                React.createElement("div", null, "Accordion Panel 1"))),
        React.createElement(AccordionItem, null,
            React.createElement(AccordionHeader, null, "Accordion Header 2"),
            React.createElement(AccordionPanel, null,
                React.createElement("div", null,
                    React.createElement("button", null, "Button 2")),
                React.createElement("div", null, "Accordion Panel 2"))),
        React.createElement(AccordionItem, null,
            React.createElement(AccordionHeader, null, "Accordion Header 3"),
            React.createElement(AccordionPanel, null,
                React.createElement("div", null,
                    React.createElement("button", null, "Button 3")),
                React.createElement("div", null, "Accordion Panel 3")))));
};
AccordionExample.argTypes = {
    inline: {
        defaultValue: false,
        control: 'boolean',
    },
    navigable: {
        defaultValue: false,
        control: 'boolean',
    },
    circular: {
        defaultValue: false,
        control: 'boolean',
    },
    multiple: {
        defaultValue: false,
        control: 'boolean',
    },
    collapsible: {
        defaultValue: false,
        control: 'boolean',
    },
    icon: {
        defaultValue: false,
        control: 'boolean',
    },
    size: {
        defaultValue: 'medium',
        control: {
            type: 'select',
            options: ['small', 'medium', 'large', 'extra-large'],
        },
    },
    expandIconPosition: {
        defaultValue: 'start',
        control: {
            type: 'inline-radio',
            options: ['start', 'end'],
        },
    },
};
//# sourceMappingURL=Accordion.stories.js.map