office-ui-fabric-react/lib/components/Spinner/SpinnerPage.js

Reusable 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");
var Spinner_Basic_Example_1 = require("./examples/Spinner.Basic.Example");
var SpinnerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx');
var SpinnerPage = (function (_super) {
    tslib_1.__extends(SpinnerPage, _super);
    function SpinnerPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SpinnerPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Spinner', componentName: 'SpinnerExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Various Spinner Types', code: SpinnerBasicExampleCode },
                React.createElement(Spinner_Basic_Example_1.SpinnerBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Spinner/Spinner.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. A Spinner is shown when it's unsure how long a task will take making it the indeterminate version of a ProgressIndicator. They can be various sizes, located inline with content or centered. They generally appear after an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use a Spinner when a task is not immediate."),
                    React.createElement("li", null, "Use one Spinner at a time."),
                    React.createElement("li", null, "Descriptive verbs are appropriate under a Spinner to help the user understand what's happening. Ie: Saving, processing, updating."),
                    React.createElement("li", null, "Use a Spinner when confirming a change has been made or a task is being processed."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don\u2019t use a Spinner when performing immediate tasks."),
                    React.createElement("li", null, "Don't show multiple Spinners at the same time."),
                    React.createElement("li", null, "Don't include more than a few words when paired with a Spinner."))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Spinner/Spinner.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return SpinnerPage;
}(React.Component));
exports.SpinnerPage = SpinnerPage;
//# sourceMappingURL=SpinnerPage.js.map