office-ui-fabric-react/lib/components/MessageBar/MessageBarPage.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 MessageBar_Basic_Example_1 = require("./examples/MessageBar.Basic.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var MessageBar_checklist_1 = require("./MessageBar.checklist");
var MessageBarBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx');
var MessageBarPage = /** @class */ (function (_super) {
    tslib_1.__extends(MessageBarPage, _super);
    function MessageBarPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MessageBarPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'MessageBar', componentName: 'MessageBarExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Various MessageBar types', code: MessageBarBasicExampleCode },
                React.createElement(MessageBar_Basic_Example_1.MessageBarBasicExample, null)), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/MessageBar/MessageBar.types.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Place the message bar near the top of the relevant view, in a highly visible but unobtrusive location."),
                    React.createElement("li", null, "Keep the text very brief. Be succinct and your users are more likely to read everything you say."),
                    React.createElement("li", null, "Consider how localization may affect the message. Translation to other languages may add up to 33% more characters to the string length."),
                    React.createElement("li", null, "Use the right variant for the type and urgency of the particular message (see variants)"))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don\u2019t use paragraphs, long sentences, or special formatting in a MessageBar. The control tries to grow to accommodate all the text and will just result in pushing the user\u2019s main content too low on the view."),
                    React.createElement("li", null, "Don\u2019t use buttons when a subtler link will suffice. Reserve the usage of button for when the MessageBar has a single \u201Dhero\u201D action that has vital usefulness to the user at that particular moment. Using more than one button is discouraged."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, MessageBar_checklist_1.MessageBarStatus)) }));
    };
    return MessageBarPage;
}(React.Component));
exports.MessageBarPage = MessageBarPage;
//# sourceMappingURL=MessageBarPage.js.map