@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
70 lines (69 loc) • 3.6 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("@storybook/react");
var Icon_1 = require("../Icon");
var PopupAction_1 = __importDefault(require("./PopupAction"));
var PopupConfirm_1 = __importDefault(require("./PopupConfirm"));
var stories = (0, react_1.storiesOf)("Popup", module);
exports.default = {
title: 'Popup',
component: PopupAction_1.default,
};
var actions = [
{
text: "Log to console",
callback: function () {
console.log("Logging to console");
},
requiresConfirmation: true,
confirmationText: "Do you really want to write to the console?"
},
{
text: "JavaScript Alert",
callback: function () {
alert("whoa!");
}
}
];
stories.add("PopupActions", function () {
return (React.createElement(PopupAction_1.default, { text: "...", actions: actions, direction: ["down", "left"], popupStyle: { width: "150px", left: "-16px" } }));
});
stories.add("PopupConfirm", function () {
var popupText = (React.createElement("h4", null, "Do you really want to hurt me? Do you really want to make me cry?"));
var negativePopUpText = (React.createElement("div", { className: "u-textCenter" },
React.createElement("h3", null, "Delete this Row?"),
React.createElement("p", null, "This action cannot be undone.")));
var onAccept = function () {
alert("You said yes!");
};
var onCancel = function () {
alert("Good. I dont want to hurt or cry.");
};
return (React.createElement(React.Fragment, null,
React.createElement(PopupConfirm_1.default, { direction: ["down", "left"], popupStyle: { left: "-16px", width: "270px" }, onAccept: onAccept, onCancel: onCancel, buttonText: React.createElement(Icon_1.Icon, { name: "trash", style: { color: '#e26362' } }), cancelButtonText: "Cancel", cancelButtonMods: "", confirmButtonText: "Delete", confirmButtonMods: "Button--no", popUpText: negativePopUpText, popUpMods: "Popup--hover" }),
React.createElement(PopupConfirm_1.default, { popUpMods: "u-spaceSidesMd", direction: ["down"], onAccept: onAccept, onCancel: onCancel, buttonText: "Negative Button, Down", buttonMods: "Button--negative", cancelButtonText: "Cancel", cancelButtonMods: "", confirmButtonText: "Confirm", confirmButtonMods: "Button--no", popUpText: negativePopUpText }),
React.createElement(PopupConfirm_1.default, { onAccept: onAccept, onCancel: onCancel, buttonText: "Default", popUpText: popupText })));
});