"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalStackBasicExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
// Styles definition
var stackStyles = {
    root: {
        background: react_1.DefaultPalette.themeTertiary,
    },
};
var stackItemStyles = {
    root: {
        background: react_1.DefaultPalette.themePrimary,
        color: react_1.DefaultPalette.white,
        padding: 5,
    },
};
var itemAlignmentsStackStyles = {
    root: {
        background: react_1.DefaultPalette.themeTertiary,
        height: 100,
    },
};
// Tokens definition
var containerStackTokens = { childrenGap: 5 };
var horizontalGapStackTokens = {
    childrenGap: 10,
    padding: 10,
};
var itemAlignmentsStackTokens = {
    childrenGap: 5,
    padding: 10,
};
var clickableStackTokens = {
    padding: 10,
};
var HorizontalStackBasicExample = function () {
    return (React.createElement(react_1.Stack, { tokens: containerStackTokens },
        React.createElement("span", null, "Default horizontal stack"),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, styles: stackStyles },
            React.createElement("span", null, "Item One"),
            React.createElement("span", null, "Item Two"),
            React.createElement("span", null, "Item Three")),
        React.createElement("span", null, "Ordered stack"),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, styles: stackStyles },
            React.createElement(react_1.Stack.Item, { order: 2 },
                React.createElement("span", null, "Item One")),
            React.createElement(react_1.Stack.Item, { order: 3 },
                React.createElement("span", null, "Item Two")),
            React.createElement(react_1.Stack.Item, { order: 1 },
                React.createElement("span", null, "Item Three"))),
        React.createElement("span", null, "Horizontal gap between items"),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, styles: stackStyles, tokens: horizontalGapStackTokens },
            React.createElement("span", null, "Item One"),
            React.createElement("span", null, "Item Two"),
            React.createElement("span", null, "Item Three")),
        React.createElement("span", null, "Item alignments"),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, styles: itemAlignmentsStackStyles, tokens: itemAlignmentsStackTokens },
            React.createElement(react_1.Stack.Item, { align: "auto", styles: stackItemStyles },
                React.createElement("span", null, "Auto-aligned item")),
            React.createElement(react_1.Stack.Item, { align: "stretch", styles: stackItemStyles },
                React.createElement("span", null, "Stretch-aligned item")),
            React.createElement(react_1.Stack.Item, { align: "baseline", styles: stackItemStyles },
                React.createElement("span", null, "Baseline-aligned item")),
            React.createElement(react_1.Stack.Item, { align: "start", styles: stackItemStyles },
                React.createElement("span", null, "Start-aligned item")),
            React.createElement(react_1.Stack.Item, { align: "center", styles: stackItemStyles },
                React.createElement("span", null, "Center-aligned item")),
            React.createElement(react_1.Stack.Item, { align: "end", styles: stackItemStyles },
                React.createElement("span", null, "End-aligned item"))),
        React.createElement("span", null, "Clickable stack"),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, onClick: _onClick, styles: stackStyles, tokens: clickableStackTokens },
            React.createElement("span", null, "Click inside this box"))));
};
exports.HorizontalStackBasicExample = HorizontalStackBasicExample;
function _onClick() {
    alert('Clicked Stack');
}
//# sourceMappingURL=Stack.Horizontal.Basic.Example.js.map