@uifabric/experiments/lib-commonjs/components/signals/SignalsPage.js

Experimental React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
/* tslint:disable:max-line-length */
var SignalField_Basic_Example_1 = require("./examples/SignalField.Basic.Example");
var SignalFieldBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/signals/examples/SignalField.Basic.Example.tsx');
var Signals_Basic_Example_1 = require("./examples/Signals.Basic.Example");
var SignalsBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/signals/examples/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(example_app_base_1.ComponentPage, { title: "Signals", componentName: "SignalField", exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: "Controlling Signal alignment", isOptIn: true, code: SignalFieldBasicExampleCode },
                    React.createElement(SignalField_Basic_Example_1.SignalFieldBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: "All Signal types", isOptIn: true, code: SignalsBasicExampleCode },
                    React.createElement(Signals_Basic_Example_1.SignalsBasicExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [require('!raw-loader!@uifabric/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.")), bestPractices: React.createElement("div", null), 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