decentraland-ui/dist/components/Popup/Popup.stories.js

Decentraland's UI components and styles

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Closable = exports.Positions = exports.OnClick = exports.OnHover = void 0;
var react_1 = __importDefault(require("react"));
var Close_1 = require("../Close/Close");
var Row_1 = require("../Row/Row");
var Popup_1 = require("./Popup");
require("./Popup.stories.css");
var meta = {
    title: 'Popup',
    component: Popup_1.Popup
};
exports.default = meta;
exports.OnHover = {
    render: function () { return (react_1.default.createElement("span", null,
        "If you want to see it\u00A0",
        react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "top center", trigger: react_1.default.createElement("b", null, "hover me"), on: "hover" }),
        ".")); }
};
exports.OnClick = {
    render: function () { return (react_1.default.createElement("span", null,
        "If you want to see it\u00A0",
        react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "top center", trigger: react_1.default.createElement("b", null, "click me"), on: "click" }),
        ".")); }
};
exports.Positions = {
    render: function () { return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: "Popup-story-row" },
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "top left", trigger: react_1.default.createElement("b", null, "Top Left"), on: "hover" }),
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "top center", trigger: react_1.default.createElement("b", null, "Top Center"), on: "hover" }),
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "top right", trigger: react_1.default.createElement("b", null, "Top Right"), on: "hover" })),
        react_1.default.createElement("div", { className: "Popup-story-row" },
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "bottom left", trigger: react_1.default.createElement("b", null, "Bottom Left"), on: "hover" }),
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "bottom center", trigger: react_1.default.createElement("b", null, "Bottom Center"), on: "hover" }),
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "bottom right", trigger: react_1.default.createElement("b", null, "Bottom Right"), on: "hover" })),
        react_1.default.createElement("div", { className: "Popup-story-row" },
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "left center", trigger: react_1.default.createElement("b", null, "Left Center"), on: "hover" }),
            react_1.default.createElement(Popup_1.Popup, { content: "Hello", position: "right center", trigger: react_1.default.createElement("b", null, "Right Center"), on: "hover" })))); }
};
exports.Closable = {
    render: function () { return (react_1.default.createElement(Popup_1.Popup, { open: true, content: react_1.default.createElement(Row_1.Row, null,
            "Dismiss me",
            react_1.default.createElement(Close_1.Close, { small: true })), position: "top left", trigger: react_1.default.createElement("b", null, "Hello there"), on: "hover" })); }
};