"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SignalsPage = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_docsite_components_1 = require("@fluentui/react-docsite-components");
var SignalField_Basic_Example_1 = require("./SignalField.Basic.Example");
var SignalFieldBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/Signals/SignalField.Basic.Example.tsx');
var Signals_Basic_Example_1 = require("./Signals.Basic.Example");
var SignalsBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/Signals/Signals.Basic.Example.tsx');
var SignalsPage = /** @class */ (function (_super) {
    tslib_1.__extends(SignalsPage, _super);
    function SignalsPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SignalsPage.prototype.render = function () {
        return (React.createElement(react_docsite_components_1.ComponentPage, { title: "Signals", componentName: "SignalField", exampleCards: React.createElement("div", null,
                React.createElement(react_docsite_components_1.ExampleCard, { title: "Controlling Signal alignment", isOptIn: true, code: SignalFieldBasicExampleCode },
                    React.createElement(SignalField_Basic_Example_1.SignalFieldBasicExample, null)),
                React.createElement(react_docsite_components_1.ExampleCard, { title: "All Signal types", isOptIn: true, code: SignalsBasicExampleCode },
                    React.createElement(Signals_Basic_Example_1.SignalsBasicExample, null))), propertiesTables: React.createElement(react_docsite_components_1.PropertiesTableSet, { sources: [
                    require('!raw-loader?esModule=false!@fluentui/react-experiments/src/components/signals/Signals.Props.ts'),
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null,
                    "A ",
                    React.createElement("code", null, "Signal"),
                    " is a combination of an ",
                    React.createElement("code", null, "Icon"),
                    " with a color and optional metadata which carries a standardized, semantic meaning."),
                React.createElement("p", null,
                    "A ",
                    React.createElement("code", null, "SignalField"),
                    " is a layout component which nicely arranges ",
                    React.createElement("code", null, "Signal"),
                    " and text elements for presentation.")), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use them to associate a document with a specific state."),
                    React.createElement("li", null,
                        "Assign localized ",
                        React.createElement("code", null, "aria-label"),
                        " attributes to the ",
                        React.createElement("code", null, "Signal"),
                        " elements which align with their meaning."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use them just for their icon, or re-assign their colors."))), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return SignalsPage;
}(React.Component));
exports.SignalsPage = SignalsPage;
//# sourceMappingURL=SignalsPage.js.map