decentraland-ui
Version:
Decentraland's UI components and styles
113 lines (112 loc) • 8.91 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Navigation = exports.Closable = exports.Form = exports.CustomHeader = exports.Tiny = exports.Small = exports.Simple = void 0;
var react_1 = __importDefault(require("react"));
var Button_1 = require("../Button/Button");
var Center_1 = require("../Center/Center");
var Close_1 = require("../Close/Close");
var Field_1 = require("../Field/Field");
var Header_1 = require("../Header/Header");
var Mana_1 = require("../Mana/Mana");
var ModalNavigation_1 = require("../ModalNavigation/ModalNavigation");
var Radio_1 = require("../Radio/Radio");
var Modal_1 = require("./Modal");
require("./Modal.stories.css");
var lipsum = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Header_1.Header, null, "Lorem Ipsum"),
react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tincidunt lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare rutrum lorem vehicula finibus. Donec vitae lorem consequat, suscipit nibh sit amet, euismod nunc. Sed gravida faucibus nulla vitae luctus. Aliquam libero lacus, faucibus ac neque ut, hendrerit pulvinar quam. Nunc porta porttitor nulla et dignissim. Aenean lobortis libero aliquet dolor pulvinar dapibus. Sed tristique scelerisque nulla, in feugiat neque lacinia in. Cras vulputate turpis in orci interdum accumsan."),
react_1.default.createElement("p", null, "Phasellus sit amet eleifend sapien, vel commodo nibh. Morbi mi lectus, vulputate eget turpis nec, aliquam efficitur lacus. Morbi gravida nisi et purus facilisis, at molestie neque vulputate. Sed in nulla mollis justo aliquam egestas. Aliquam gravida porta augue, et lobortis ante tincidunt ut. Nam varius lorem suscipit dolor malesuada finibus. Quisque ullamcorper purus ut tincidunt vehicula. Sed hendrerit porttitor lacinia. Fusce eget arcu augue. Quisque ullamcorper imperdiet libero, sed interdum augue congue eu. Fusce finibus scelerisque odio, id facilisis ante sagittis sit amet. Nulla vulputate lobortis tellus in dapibus. Suspendisse non tempus nulla. Nulla egestas malesuada interdum. Aliquam malesuada placerat nisl nec ultrices."),
react_1.default.createElement("p", null, "Duis a viverra ipsum, in pellentesque est. Nullam interdum vehicula massa sed porttitor. Ut condimentum lacinia iaculis. Pellentesque porta euismod nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae mattis ipsum, a bibendum nisi. Sed nec ante ultricies, pretium nulla sit amet, congue sem. Nulla at sodales enim. Nam a dignissim tortor. Quisque feugiat est nec tortor eleifend ornare nec vel velit. Praesent rhoncus nisl ut convallis posuere. Nam sollicitudin eros sem, a consectetur sem interdum non. Phasellus ac dolor eget lacus feugiat ullamcorper.")));
var meta = {
title: 'Modal',
component: Modal_1.Modal
};
exports.default = meta;
exports.Simple = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { open: true },
react_1.default.createElement(Modal_1.Modal.Header, null, "Are you sure?"),
react_1.default.createElement(Modal_1.Modal.Content, null,
"You are about to sell your soul for",
' ',
react_1.default.createElement(Mana_1.Mana, { inline: true }, (2500).toLocaleString()),
". Do you want to proceed?"),
react_1.default.createElement(Modal_1.Modal.Actions, null,
react_1.default.createElement(Button_1.Button, { primary: true }, "Proceed"),
react_1.default.createElement(Button_1.Button, null, "Cancel"))))); }
};
exports.Small = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { size: "small", open: true },
react_1.default.createElement(Modal_1.Modal.Header, null, "Are you sure?"),
react_1.default.createElement(Modal_1.Modal.Content, null,
"You are about to sell your soul for",
' ',
react_1.default.createElement(Mana_1.Mana, { inline: true }, (2500).toLocaleString()),
". Do you want to proceed?"),
react_1.default.createElement(Modal_1.Modal.Actions, null,
react_1.default.createElement(Button_1.Button, { primary: true }, "Proceed"),
react_1.default.createElement(Button_1.Button, null, "Cancel"))))); }
};
exports.Tiny = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { size: "tiny", open: true },
react_1.default.createElement(Modal_1.Modal.Header, null, "Are you sure?"),
react_1.default.createElement(Modal_1.Modal.Content, null,
"You are about to sell your soul for",
' ',
react_1.default.createElement(Mana_1.Mana, { inline: true }, (2500).toLocaleString()),
". Do you want to proceed?"),
react_1.default.createElement(Modal_1.Modal.Actions, null,
react_1.default.createElement(Button_1.Button, { primary: true }, "Proceed"),
react_1.default.createElement(Button_1.Button, null, "Cancel"))))); }
};
exports.CustomHeader = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { size: "small", open: true },
react_1.default.createElement("div", { className: "Modal-custom-header" },
react_1.default.createElement(Center_1.Center, null,
react_1.default.createElement(Header_1.Header, { size: "large" }, "Give us your email!"),
react_1.default.createElement("p", null, "We need to feed our marketing gnomes"))),
react_1.default.createElement(Modal_1.Modal.Content, null, "Keep up to date with news and important announcements."),
react_1.default.createElement(Modal_1.Modal.Content, null,
react_1.default.createElement(Radio_1.Radio, { label: "Suscribe to newsletter" })),
react_1.default.createElement(Modal_1.Modal.Actions, null,
react_1.default.createElement(Button_1.Button, { primary: true }, "Continue"))))); }
};
exports.Form = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { size: "small", open: true },
react_1.default.createElement(Modal_1.Modal.Header, null, "Join us!"),
react_1.default.createElement(Modal_1.Modal.Content, null,
react_1.default.createElement(Field_1.Field, { label: "Name", placeholder: "Luis XVII" }),
react_1.default.createElement(Field_1.Field, { label: "Email", placeholder: "luigi@mail.com" }),
react_1.default.createElement(Radio_1.Radio, { label: "Check me" })),
react_1.default.createElement(Modal_1.Modal.Actions, null,
react_1.default.createElement(Button_1.Button, { primary: true }, "Submit"),
react_1.default.createElement(Button_1.Button, null, "Cancel"))))); }
};
exports.Closable = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { size: "small", open: true, closeIcon: react_1.default.createElement(Close_1.Close, null) },
react_1.default.createElement(Modal_1.Modal.Header, null, "I'm annoying!"),
react_1.default.createElement(Modal_1.Modal.Content, null,
react_1.default.createElement("p", null, "This is an alert or something like that."),
react_1.default.createElement("p", null, "It doesn't have any actions but you can dismiss it."))))); }
};
exports.Navigation = {
render: function () { return (react_1.default.createElement("div", { className: "Modal-story" },
lipsum,
react_1.default.createElement(Modal_1.Modal, { open: true },
react_1.default.createElement(ModalNavigation_1.ModalNavigation, { title: "Edit BMX Pack", subtitle: "Edit your Asset Pack details and manage your objects", onBack: function () { return alert('Back!'); }, onClose: function () { return alert('Close!'); } }),
react_1.default.createElement(Modal_1.Modal.Content, null, "Bla bla bla")))); }
};