decentraland-ui
Version:
Decentraland's UI components and styles
63 lines (62 loc) • 4.6 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.WithButtons = exports.WithRadios = exports.WithFieldDisabled = exports.WithField = exports.SingleSegment = void 0;
var react_1 = __importDefault(require("react"));
var Field_1 = require("../Field/Field");
var Header_1 = require("../Header/Header");
var HeaderMenu_1 = require("../HeaderMenu/HeaderMenu");
var Button_1 = require("../Button/Button");
var Radio_1 = require("../Radio/Radio");
var Segment_1 = require("./Segment");
require("./Segment.stories.css");
var meta = {
title: 'Segment',
component: Segment_1.Segment
};
exports.default = meta;
exports.SingleSegment = {
render: function () { return (react_1.default.createElement(Segment_1.Segment, { style: { width: 400 } },
react_1.default.createElement(Header_1.Header, null, "Decentraland"),
react_1.default.createElement("p", { className: "secondary-text" }, "A virtual world built on open standards"),
react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))); }
};
exports.WithField = {
render: function () { return (react_1.default.createElement(Segment_1.Segment, { style: { width: 800 } },
react_1.default.createElement(HeaderMenu_1.HeaderMenu, null,
react_1.default.createElement(HeaderMenu_1.HeaderMenu.Left, null,
react_1.default.createElement(Header_1.Header, null, "Invite new user")),
react_1.default.createElement(HeaderMenu_1.HeaderMenu.Right, null,
react_1.default.createElement(Header_1.Header, { sub: true }, "1 Invite Left "))),
react_1.default.createElement(Field_1.Field, { label: "Address", placeholder: "0x...", type: "address", value: "0x68FFc53C43C65C8Dd778969320e21B85b10363cE" }),
react_1.default.createElement(Button_1.Button, { primary: true }, "Invite"))); }
};
exports.WithFieldDisabled = {
render: function () { return (react_1.default.createElement(Segment_1.Segment, { style: { width: 800 } },
react_1.default.createElement(HeaderMenu_1.HeaderMenu, null,
react_1.default.createElement(HeaderMenu_1.HeaderMenu.Left, null,
react_1.default.createElement(Header_1.Header, null, "Invite new user")),
react_1.default.createElement(HeaderMenu_1.HeaderMenu.Right, null,
react_1.default.createElement(Header_1.Header, { sub: true }, "0 Invite Left "))),
react_1.default.createElement(Field_1.Field, { label: "Address", placeholder: "0x...", type: "address", disabled: true }),
react_1.default.createElement(Button_1.Button, { primary: true, disabled: true }, "Invite"),
react_1.default.createElement("span", { style: { marginLeft: 20, color: 'var(--secondary-text)' } }, "You don't have any invites left."))); }
};
exports.WithRadios = {
render: function () { return (react_1.default.createElement(Segment_1.Segment, { style: { width: 800 } },
react_1.default.createElement(Header_1.Header, null, "Authorizations"),
react_1.default.createElement("div", { className: "Segment-radio-row" },
react_1.default.createElement(Radio_1.Radio, { checked: true, label: "Authorize marketplace to operate MANA on my behalf" })),
react_1.default.createElement("div", { className: "Segment-radio-row" },
react_1.default.createElement(Radio_1.Radio, { label: "Authorize marketplace to operate LAND on my behalf" })),
react_1.default.createElement("div", { className: "Segment-radio-row" },
react_1.default.createElement(Radio_1.Radio, { label: "Authorize marketplace to operate Estates on my behalf" })))); }
};
exports.WithButtons = {
render: function () { return (react_1.default.createElement(Segment_1.Segment, { style: { width: 800 } },
react_1.default.createElement(Header_1.Header, null, "Some buttons"),
react_1.default.createElement(Button_1.Button, null, "Hello"),
react_1.default.createElement(Button_1.Button, { disabled: true }, "Disabled"))); }
};