"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DividerExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_make_styles_1 = require("@fluentui/react-make-styles");
var react_icons_mdl2_1 = require("@fluentui/react-icons-mdl2");
var react_divider_1 = require("@fluentui/react-divider");
var useStyles = react_make_styles_1.makeStyles({
    root: function (theme) { return ({
        margin: "10px 10px 60px 10px",
        padding: 0,
        backgroundColor: theme.alias.color.neutral.neutralBackground1,
        '&>.story': {
            margin: 0,
            padding: 0,
            maxWidth: "100%",
            fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
        },
        label: {
            fontWeight: 600,
            lineHeight: "28px",
            margin: "10px 0",
        },
        '& .item': {
            flex: 1,
            display: "flex",
            alignItems: "flex-start",
            flexDirection: "column",
            justifyContent: "center",
            margin: "10px 0",
            width: "100%",
            maxWidth: "100%",
        },
        '& .vertical label': {
            flexShrink: 1,
            flexGrow: 0,
            flexBasis: "100%",
        },
        '& .verticalContent': {
            display: "flex",
            flexDirection: "row",
            alignSelf: "stretch",
            border: "dashed 1px #d0d0d0",
        },
    }); },
    red: {
        '--divider-color': 'red',
    },
    green: {
        '--divider-color': 'green',
    },
    blue: {
        '--divider-color': 'blue',
    },
    yellow: {
        '--divider-color': 'yellow',
    },
    customColor: {
        '--divider-color': '#FF00FF',
    },
    dashed: {
        margin: '10px 0',
        borderWidth: '2px',
        '--divider-borderStyle': 'dashed',
        '--divider-borderSize': '2px',
    },
});
var DividerStory = function (props) {
    return (React.createElement("div", { className: react_make_styles_1.mergeClasses('item', props === null || props === void 0 ? void 0 : props.className) },
        React.createElement("label", null, props === null || props === void 0 ? void 0 : props.label), props === null || props === void 0 ? void 0 :
        props.children));
};
var DividerExamples = function (props) {
    var styles = useStyles();
    return (React.createElement("div", { className: styles.root },
        React.createElement("div", { className: "story" },
            React.createElement("h2", null, "Horizontal Divider"),
            React.createElement(DividerStory, { label: "Default" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props)),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props), "With content")),
            React.createElement(DividerStory, { label: "With Icon" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props),
                    React.createElement(react_icons_mdl2_1.ClockIcon, null))),
            React.createElement(DividerStory, { label: "Inset" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { inset: true })),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { inset: true }), "Inset with content")),
            React.createElement(DividerStory, { label: "Important" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { important: true }), "This is important!")),
            React.createElement(DividerStory, { label: "Alignments" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { alignContent: "start" }), "start"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { alignContent: "center" }), "center(default)"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { alignContent: "end" }), "end")),
            React.createElement(DividerStory, { label: "Appearance" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "default" }), "default"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "subtle" }), "subtle"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "brand" }), "brand"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "strong" }), "strong")),
            React.createElement(DividerStory, { label: "Colors" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.red }), "Red"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.green }), "Green"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.blue }), "Blue"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.yellow }), "Yellow"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.customColor }), "Custom (#FF00FF)")),
            React.createElement("h2", null, "Vertical"),
            React.createElement(DividerStory, { label: "Default without container height and content", className: "vertical" },
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true }))),
            React.createElement(DividerStory, { label: "With and without content", className: "vertical" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true }), "With Content"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true })))),
            React.createElement(DividerStory, { label: "With Icon" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true }),
                        React.createElement(react_icons_mdl2_1.ClockIcon, null)))),
            React.createElement(DividerStory, { label: "Inset" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { inset: true, vertical: true })),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { inset: true, vertical: true }), "Inset with content"))),
            React.createElement(DividerStory, { label: "Important" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { important: true, vertical: true }), "Important!"))),
            React.createElement(DividerStory, { label: "Alignments", className: "vertical" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { alignContent: "start", vertical: true }), "start"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { alignContent: "center", vertical: true }), "center(default)"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { alignContent: "end", vertical: true }), "end"))),
            React.createElement(DividerStory, { label: "Appearance", className: "vertical" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "default", vertical: true }), "default"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "subtle", vertical: true }), "subtle"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "brand", vertical: true }), "brand"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { appearance: "strong", vertical: true }), "strong"))),
            React.createElement(DividerStory, { label: "Colors", className: "vertical" },
                React.createElement("div", { className: "verticalContent" },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.red, vertical: true }), "Red"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.green, vertical: true }), "Green"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.blue, vertical: true }), "Blue"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.yellow, vertical: true }), "Yellow"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.customColor, vertical: true }), "Custom (#FF00FF)"))),
            React.createElement(DividerStory, { label: "Specified Height", className: "vertical" },
                React.createElement("div", { className: "verticalContent", style: { height: '200px', alignItems: 'center' } },
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true, style: { height: 50 } }), "50px"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true, style: { height: 100 } }), "100px"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true, style: { height: 150 } }), "150px"),
                    React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { vertical: true, style: { height: '100%' } }), "100%*")),
                React.createElement("span", null, "*100% requires parent container to have a set height")),
            React.createElement("h2", null, "Other Appearance Modifications"),
            React.createElement(DividerStory, null,
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { style: { margin: 30, width: 8000 } }), "30px margin, 800px width"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { style: { fontWeight: 800, margin: '10px 0' } }), "800 font weight"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { style: { color: 'green', fontSize: 16, margin: '10px 0' } }), "Green font color @ 16px font size"),
                React.createElement(react_divider_1.Divider, tslib_1.__assign({}, props, { className: styles.dashed }), "Dashed border with a size of 2")))));
};
var DividerExample = function () { return React.createElement(DividerExamples, null); };
exports.DividerExample = DividerExample;
//# sourceMappingURL=Divider.stories.js.map