"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Nested = exports.MixedRTL = exports.RTL = void 0;
var react_make_styles_1 = require("@fluentui/react-make-styles");
var react_provider_1 = require("@fluentui/react-provider");
var react_theme_1 = require("@fluentui/react-theme");
var React = require("react");
var useStyles = react_make_styles_1.makeStyles({
    box: function (theme) { return ({
        border: "5px solid " + theme.alias.color.neutral.neutralStroke1,
        borderLeft: "20px solid " + theme.alias.color.blue.border2,
        backgroundColor: theme.alias.color.neutral.neutralBackground1,
        color: theme.alias.color.neutral.neutralForeground1,
        margin: '5px',
        padding: '5px',
        paddingLeft: '50px',
    }); },
    container: function (theme) { return ({
        border: "5px solid " + theme.alias.color.neutral.neutralStroke1,
        borderLeft: "20px solid " + theme.alias.color.blue.border2,
        margin: '5px',
        padding: '5px',
    }); },
    containerPrimary: function (theme) { return ({
        borderLeftColor: theme.alias.color.darkOrange.border2,
    }); },
});
var Box = function (props) {
    var classes = useStyles();
    return React.createElement("div", { className: classes.box }, props.children);
};
var Container = function (props) {
    var classes = useStyles();
    return (React.createElement("div", { className: react_make_styles_1.mergeClasses(classes.container, props.primary && classes.containerPrimary, props.className) }, props.children));
};
var RTL = function () { return (React.createElement(React.Fragment, null,
    React.createElement("p", null, "This scenario renders \"Box\" (raw output from \"makeStyles()\") and \"Container\" (\"mergeClasses()\" usage) components in RTL."),
    React.createElement(react_provider_1.FluentProvider, { dir: "rtl", theme: react_theme_1.webLightTheme },
        React.createElement(Box, null, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!"),
        React.createElement(Container, null, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!")))); };
exports.RTL = RTL;
var MixedRTL = function () { return (React.createElement(React.Fragment, null,
    React.createElement("p", null, "This scenario shows that it's possible to combine LTR and RTL layout on a page without collisions."),
    React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
        React.createElement(Box, null, "Hello world!"),
        React.createElement(Container, { primary: true }, "Hello world!")),
    React.createElement(react_provider_1.FluentProvider, { dir: "rtl", theme: react_theme_1.webLightTheme },
        React.createElement(Box, null, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!"),
        React.createElement(Container, { primary: true }, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!")))); };
exports.MixedRTL = MixedRTL;
var Nested = function () { return (React.createElement(React.Fragment, null,
    React.createElement("p", null, "This scenario shows that it's possible to have nested components (LTR inside RTL)."),
    React.createElement(react_provider_1.FluentProvider, { dir: "rtl", theme: react_theme_1.webLightTheme },
        React.createElement(Container, { primary: true }, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!"),
        React.createElement(react_provider_1.FluentProvider, { dir: "ltr" },
            React.createElement(Container, { primary: true }, "Hello world!"))))); };
exports.Nested = Nested;
//# sourceMappingURL=RTL.stories.js.map