@arche-mc2/arche-controls/dist/Components/Inputs/Button/index.stories.js

We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var addon_actions_1 = require("@storybook/addon-actions");
var theming_1 = require("../../../Common/theming");
var ThemeProvider_1 = require("../../../Common/theming/ThemeProvider");
var addon_knobs_1 = require("@storybook/addon-knobs");
var UpButton_1 = require("./UpButton");
var Box_1 = require("../../Containers/Box");
var Notification_1 = require("../../Display/Notification");
var Paragraph_1 = require("../../Display/Paragraph");
var Heading_1 = require("../../Display/Heading");
var ButtonGroup_1 = require("../../Containers/ButtonGroup");
var typestyle_1 = require("typestyle");
var codeStoryADroite = "const actions = [{libelle: \"Option 1\", onClick: action(\"Option 1\")}, {libelle: \"Option 2\", onClick: action(\"Option 2\")},{size: 2,},{libelle: \"Option 3\",onClick: action(\"Option 3\")}];\n        <UpButton \n        intent=\"primary\" \n        onClick={e => action(\"Main\")} \n        dropDown={'down'}\n        extraActions={actions}>\n    </UpButton>";
exports.default = {
    title: 'Components/Inputs/UpButton',
    decorators: [addon_knobs_1.withKnobs],
    component: UpButton_1.UpButton
};
exports.General = function () {
    var actionType = addon_knobs_1.text('actionType', 'plus-circle');
    var intent = addon_knobs_1.text('intent', 'primary');
    return React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
        React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
            React.createElement(Heading_1.default, { tag: 'h1' },
                React.createElement("code", null, "UpButton")),
            React.createElement(Notification_1.default, { intent: "info" },
                React.createElement(Box_1.default, { flexDirection: 'column' },
                    React.createElement(Paragraph_1.default, null,
                        "Le composant ",
                        React.createElement("code", null, "UpButton"),
                        " permet de d\u00E9finir un bouton avec trois propri\u00E9t\u00E9s principales :"),
                    React.createElement("ul", { style: { margin: "8px" } },
                        React.createElement("li", null, "actionType : Le type de l'action g\u00E9rer par le bouton. Exemple 'add' ajoutera un ic\u00F4ne appropri\u00E9."),
                        React.createElement("li", null, "intent : le type du bouton : 'primary', 'secondary', 'info', 'success', 'warning' ou 'error'"),
                        React.createElement("li", null, "onClick : l'action a ex\u00E9cut\u00E9.")))),
            React.createElement(Paragraph_1.default, null,
                React.createElement(ButtonGroup_1.default, { gutter: 17 },
                    React.createElement(UpButton_1.default, { actionType: actionType, intent: intent, onClick: function (event) {
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () { return resolve(true); }, 5000);
                            });
                        }, width: "normal" }, "Primary"),
                    React.createElement(UpButton_1.default, { rounded: true, intent: 'secondary', tooltip: "Cliquez sur moi !!", onClick: function (event) {
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () { return resolve(true); }, 5000);
                            });
                        }, width: "normal" }, "Secondary rounded"),
                    React.createElement(UpButton_1.default, { intent: 'secondary2', actionType: 'save', onClick: function (event) {
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () { return resolve(true); }, 5000);
                            });
                        } }, "Secondary2"),
                    React.createElement(UpButton_1.default, { intent: 'secondary2', actionType: 'save', disabled: true, onClick: function (event) {
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () { return resolve(true); }, 5000);
                            });
                        } }, "Secondary2 Disabled"),
                    React.createElement(UpButton_1.default, { intent: 'primary', actionType: 'save', disabled: true, onClick: function (event) {
                            return new Promise(function (resolve, reject) {
                                setTimeout(function () { return resolve(true); }, 5000);
                            });
                        } }, "Disabled")))));
};
exports.ButtonsWithIcons = function () { return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
    React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
        React.createElement(Heading_1.default, { tag: 'h1' },
            React.createElement("code", null, "UpButton")),
        React.createElement(Notification_1.default, { intent: "info" },
            React.createElement(Paragraph_1.default, null,
                "Le composant ",
                React.createElement("code", null, "UpButton"),
                " afficher en mode ic\u00F4ne")),
        React.createElement(Paragraph_1.default, null,
            React.createElement(UpButton_1.default, { actionType: "arrow-right", width: "icon", intent: "primary", borderless: true, onClick: function (event) {
                    return new Promise(function (resolve, reject) {
                        setTimeout(function () { return resolve(true); }, 5000);
                    });
                } }, "Add"),
            React.createElement(UpButton_1.default, { actionType: "delete", disabled: true, width: "icon", intent: "danger", onClick: function (event) {
                    return new Promise(function (resolve, reject) {
                        setTimeout(function () { return resolve(true); }, 5000);
                    });
                } }, "Delete"))))); };
exports.IconToRight = function () { return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
    React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
        React.createElement(Heading_1.default, { tag: 'h1' },
            React.createElement("code", null, "UpButton")),
        React.createElement(Notification_1.default, { intent: "info" },
            React.createElement(Paragraph_1.default, null,
                "Le composant ",
                React.createElement("code", null, "UpButton"),
                " en positionnant l'ic\u00F4ne \u00E0 droite")),
        React.createElement(Paragraph_1.default, null,
            React.createElement(UpButton_1.default, { actionType: "plus", iconPosition: "right", width: "normal", intent: "primary", onClick: function (event) { console.log(event); } }, "Add"))))); };
exports.DropDown = function () { return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
    React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
        React.createElement(Heading_1.default, { tag: 'h1' },
            React.createElement("code", null, "UpButton")),
        React.createElement(Notification_1.default, { intent: "info" },
            React.createElement(Paragraph_1.default, null,
                "Le composant ",
                React.createElement("code", null, "UpButton"),
                " en d\u00E9finissant un menu d'actions associ\u00E9es")),
        React.createElement(Paragraph_1.default, null,
            React.createElement(UpButton_1.default, { intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
                    {
                        libelle: "Option 1",
                        onClick: addon_actions_1.action("Option 1")
                    },
                    {
                        libelle: "Option 2",
                        onClick: addon_actions_1.action("Option 2")
                    },
                    {
                        size: 2,
                    },
                    {
                        libelle: "Option 3",
                        onClick: addon_actions_1.action("Option 3")
                    }
                ] }))))); };
exports.DropDownToRight = function () { return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
    React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
        React.createElement(Heading_1.default, { tag: 'h1' },
            React.createElement("code", null, "UpButton")),
        React.createElement(Notification_1.default, { intent: "info" },
            React.createElement(Paragraph_1.default, null,
                "Le composant ",
                React.createElement("code", null, "UpButton"),
                " en d\u00E9finissant un menu d'actions associ\u00E9es")),
        React.createElement(Paragraph_1.default, { className: typestyle_1.style({
                position: "absolute",
                right: '20px',
            }) },
            React.createElement(UpButton_1.default, { intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
                    {
                        libelle: "Option 1",
                        onClick: addon_actions_1.action("Option 1")
                    },
                    {
                        libelle: "Option 2",
                        onClick: addon_actions_1.action("Option 2")
                    },
                    {
                        size: 2,
                    },
                    {
                        libelle: "Option 3",
                        onClick: addon_actions_1.action("Option 3")
                    }
                ] }))))); };
exports.DropDownWithText = function () { return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
    React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
        React.createElement(Heading_1.default, { tag: 'h1' },
            React.createElement("code", null, "UpButton")),
        React.createElement(Notification_1.default, { intent: "info" },
            React.createElement(Paragraph_1.default, null,
                "Le composant ",
                React.createElement("code", null, "UpButton"),
                " en d\u00E9finissant un menu d'actions associ\u00E9es et un label principal et l'ic\u00F4ne \u00E0 gauche.")),
        React.createElement(Paragraph_1.default, null,
            React.createElement(UpButton_1.default, { iconPosition: "left", intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
                    {
                        libelle: "Option 1",
                        onClick: addon_actions_1.action("Option 1")
                    },
                    {
                        libelle: "Option 2",
                        onClick: addon_actions_1.action("Option 2")
                    },
                    {
                        size: 2,
                    },
                    {
                        libelle: "Option 3",
                        onClick: addon_actions_1.action("Option 3")
                    }
                ] }, "Options"))))); };
exports.DropDownWithTextAndIconToLeft = function () { return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
    React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
        React.createElement(Heading_1.default, { tag: 'h1' },
            React.createElement("code", null, "UpButton")),
        React.createElement(Notification_1.default, { intent: "info" },
            React.createElement(Paragraph_1.default, null,
                "Le composant ",
                React.createElement("code", null, "UpButton"),
                " en d\u00E9finissant un menu d'actions associ\u00E9es et un label principal")),
        React.createElement(Paragraph_1.default, null,
            React.createElement(UpButton_1.default, { intent: "primary", onClick: function (event) { addon_actions_1.action("Main"); }, dropDown: 'down', extraActions: [
                    {
                        libelle: "Option 1",
                        onClick: addon_actions_1.action("Option 1")
                    },
                    {
                        libelle: "Option 2",
                        onClick: addon_actions_1.action("Option 2")
                    },
                    {
                        size: 2,
                    },
                    {
                        libelle: "Option 3",
                        onClick: addon_actions_1.action("Option 3")
                    }
                ] }, "Options"))))); };
exports.WithLoadingStatus = function () {
    var isProcessing = addon_knobs_1.boolean('isProcessing', true);
    return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
        React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
            React.createElement(Heading_1.default, { tag: 'h1' },
                React.createElement("code", null, "UpButton")),
            React.createElement(Notification_1.default, { intent: "info" },
                React.createElement(Paragraph_1.default, null,
                    "Le composant ",
                    React.createElement("code", null, "UpButton"),
                    " avec indication du traitement en cours")),
            React.createElement(Paragraph_1.default, null,
                React.createElement(UpButton_1.default, { intent: 'primary', iconName: 'edit', iconPosition: 'left', onClick: null, width: "normal", isProcessing: isProcessing }, "Save")))));
};
exports.Rounded = function () {
    var isProcessing = addon_knobs_1.boolean('isProcessing', false);
    return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
        React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
            React.createElement(Heading_1.default, { tag: 'h1' },
                React.createElement("code", null, "UpButton")),
            React.createElement(Notification_1.default, { intent: "info" },
                React.createElement(Paragraph_1.default, null,
                    "Le composant ",
                    React.createElement("code", null, "UpButton"),
                    " en mode ic\u00F4ne et avec indication du traitement en cours")),
            React.createElement(Paragraph_1.default, null,
                React.createElement(UpButton_1.default, { rotate: isProcessing, intent: "primary", rounded: true, width: "icon", onClick: null, actionType: "refresh-cw" })))));
};
exports.Secondary2 = function () {
    var isProcessing = addon_knobs_1.boolean('isProcessing', false);
    return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: theming_1.default },
        React.createElement(Box_1.default, { flexDirection: 'column', alignItems: 'flex-start', style: { margin: "40px 30px" } },
            React.createElement(Heading_1.default, { tag: 'h1' },
                React.createElement("code", null, "UpButton")),
            React.createElement(Notification_1.default, { intent: "info" },
                React.createElement(Paragraph_1.default, null,
                    "Le composant ",
                    React.createElement("code", null, "UpButton"),
                    " avec intent = secondary2")),
            React.createElement(Paragraph_1.default, null,
                React.createElement(UpButton_1.default, { intent: "secondary2", onClick: null }, "Bouton")))));
};
//# sourceMappingURL=index.stories.js.map