@yandex/ui
Version:
Yandex UI components
37 lines (36 loc) • 2.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Showcase = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var bundle_1 = require("@yandex-lego/components/ButtonGroup/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Button/desktop/bundle");
var dividerHorizontal = (react_1.default.createElement("span", { style: { borderLeft: '1px solid #CCCCCC', boxSizing: 'border-box', height: '20px', margin: 'auto 0' } }));
var dividerVertical = (react_1.default.createElement("span", { style: { borderBottom: '1px solid #CCCCCC', boxSizing: 'border-box', width: '40px', margin: '0 auto' } }));
var Showcase = function () {
var views = ['default', 'action', 'raised', 'link', 'pseudo', 'clear'];
var pins = ['round', 'circle'];
var sizes = ['s', 'm', 'l'];
return views.map(function (view) { return (react_1.default.createElement(react_1.default.Fragment, null,
pins.map(function (pin) {
return sizes.map(function (size) { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(bundle_1.ButtonGroup, { pin: pin, gap: view !== 'link' && view !== 'pseudo' && view !== 'clear' ? 's' : undefined, divider: view === 'clear' ? dividerHorizontal : undefined, key: view + "_" + pin + "_" + size + "_horizontal" },
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 1"),
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 2"),
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 3"),
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 4")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null))); });
}),
sizes.map(function (size) { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(bundle_1.ButtonGroup, { pin: "round", gap: view !== 'link' && view !== 'pseudo' && view !== 'clear' ? 's' : undefined, divider: view === 'clear' ? dividerVertical : undefined, vertical: true, key: view + "_round_" + size + "_vertical" },
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 1"),
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 2"),
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 3"),
react_1.default.createElement(bundle_2.Button, { view: view, size: size }, "Button 4")),
react_1.default.createElement("br", null),
" ",
react_1.default.createElement("br", null))); }))); });
};
exports.Showcase = Showcase;