office-ui-fabric-react/lib-amd/components/Coachmark/CoachmarkPage.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Coachmark.Basic.Example"], function (require, exports, tslib_1, React, example_app_base_1, Coachmark_Basic_Example_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var CoachmarkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx');
    var CoachmarkPage = /** @class */ (function (_super) {
        tslib_1.__extends(CoachmarkPage, _super);
        function CoachmarkPage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        CoachmarkPage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: 'Coachmark', componentName: 'Coachmark', exampleCards: React.createElement("div", null,
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Coachmark Basic', isOptIn: true, code: CoachmarkBasicExampleCode },
                        React.createElement(Coachmark_Basic_Example_1.CoachmarkBasicExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                        require('!raw-loader!office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts')
                    ] }), overview: React.createElement("div", null,
                    React.createElement("p", null, "Coachmarks are used to draw a persons attention to a part of the UI, and increase engagement with that element in the product."),
                    React.createElement("p", null, "They should be contextual whenever possible, or related to something that will make existing user flows more efficient")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Only one coachmark + callout combo will be displayed at a time"),
                        React.createElement("li", null, "Coachmarks can be stand alone or sequential. Sequential coachmarks should be used sparingly, to walk through complex multi-step interactions. It is recommended that a sequence of coachmakrs does not exceed 3 steps."),
                        React.createElement("li", null, "Coachmarks are designed to only hold Callouts."))), donts: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Coachmark size, color, and animation should not be altered."),
                        React.createElement("li", null, "Don't show the coachmark more than once even if the user has not completed the action."))), isHeaderVisible: this.props.isHeaderVisible }));
        };
        return CoachmarkPage;
    }(React.Component));
    exports.CoachmarkPage = CoachmarkPage;
});
//# sourceMappingURL=CoachmarkPage.js.map