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

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
/* tslint:disable:max-line-length */
import { SignalFieldBasicExample } from './examples/SignalField.Basic.Example';
var SignalFieldBasicExampleCode = require('!raw-loader!@uifabric/experiments/src/components/signals/examples/SignalField.Basic.Example.tsx');
import { SignalsBasicExample } from './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(ComponentPage, { title: "Signals", componentName: "SignalField", exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: "Controlling Signal alignment", isOptIn: true, code: SignalFieldBasicExampleCode },
                    React.createElement(SignalFieldBasicExample, null)),
                React.createElement(ExampleCard, { title: "All Signal types", isOptIn: true, code: SignalsBasicExampleCode },
                    React.createElement(SignalsBasicExample, null))), propertiesTables: React.createElement(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));
export { SignalsPage };
//# sourceMappingURL=SignalsPage.js.map