import { __extends } from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet, } from '@fluentui/react-docsite-components';
import { MicroFeedbackExample } from './MicroFeedback.Example';
import { MicroFeedbackCalloutExample } from './MicroFeedbackCallout.Example';
import { MicroFeedbackStackExample } from './MicroFeedbackStack.Example';
var MicroFeedbackExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/MicroFeedback/MicroFeedback.Example.tsx');
var MicroFeedbackCalloutExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/MicroFeedback/MicroFeedbackCallout.Example.tsx');
var MicroFeedbackStackExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/MicroFeedback/MicroFeedbackStack.Example.tsx');
var MicroFeedbackPage = /** @class */ (function (_super) {
    __extends(MicroFeedbackPage, _super);
    function MicroFeedbackPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MicroFeedbackPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: "MicroFeedback", componentName: "MicroFeedback", exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: "Default", isOptIn: true, code: MicroFeedbackExampleCode },
                    React.createElement(MicroFeedbackExample, null)),
                React.createElement(ExampleCard, { title: "With Callout followup", isOptIn: true, code: MicroFeedbackCalloutExampleCode },
                    React.createElement(MicroFeedbackCalloutExample, null)),
                React.createElement(ExampleCard, { title: "With Stack followup", isOptIn: true, code: MicroFeedbackStackExampleCode },
                    React.createElement(MicroFeedbackStackExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader?esModule=false!@fluentui/react-experiments/src/components/MicroFeedback/MicroFeedback.types.ts'),
                ] }), overview: React.createElement("div", null, "MicroFeedback is a type of in-app item level feedback that is quick, easy to use, lightweight and most importantly contextual. MicroFeedback is about collecting small bits of information at specific points in your customer interaction within your product or service. It allows you to collect frequent and relevant feedback at various interaction point with customers. This control can be used where you want initial feedback and then a follow up question to narrow down reasons for the feedback. The data you gather can help you improve your product. The feedback data can be sent to a backend of your choice where you can process and report it."), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use MicroFeedback for gathering item level feedback."),
                    React.createElement("li", null, "Use MicroFeedback followup where a question may provide information to narrow down user's preferences."),
                    React.createElement("li", null, "Use MicroFeedback callbacks to send user feedback to a backend of your choice."),
                    React.createElement("li", null, "MicroFeedback can be used in multiple places within an app to gather contextual feedback."),
                    React.createElement("li", null, "Use the follow up to further narrow down why a user made a certain choice to improve your app or service."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don't use MicroFeedback for overall application feedback."),
                    React.createElement("li", null, "Don't use MicroFeedback where a user will have ambiguous choices."),
                    React.createElement("li", null, "Don't use the MicroFeedback stack variant for items that span the entire page, use it in the taskpane instead."),
                    React.createElement("li", null, "Don't give users more than three choices to pick from in the followup."))), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return MicroFeedbackPage;
}(React.Component));
export { MicroFeedbackPage };
//# sourceMappingURL=MicroFeedbackPage.js.map