@yandex/ui
Version:
Yandex UI components
53 lines (52 loc) • 3.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Playground = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var addon_knobs_1 = require("@storybook/addon-knobs");
var bundle_1 = require("@yandex-lego/components/Button/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Spin/bundle");
var Progress_1 = require("@yandex-lego/components/Progress");
var bundle_3 = require("@yandex-lego/components/MessageBox/desktop/bundle");
var addonOptions = {
empty: '',
text: 'text',
icon: 'icon',
};
var backgroundOptions = {
empty: '',
image: 'image',
progress: 'progress',
};
var backgroundOptionToJsx = {
empty: '',
image: (react_1.default.createElement("picture", null,
react_1.default.createElement("img", { style: { filter: 'opacity(.5)', width: '100%' }, src: "//jing.yandex-team.ru/files/axaxaman/catalogue-banner-x3.jpeg" }))),
progress: react_1.default.createElement(Progress_1.Progress, { style: { height: '100%', backgroundColor: '#2196f3' }, value: 0.65 }),
};
var Playground = function () {
var children = addon_knobs_1.text('children', 'MessageBox-Content');
var size = addon_knobs_1.select('size', ['s', 'm', 'l'], 's');
var opaque = addon_knobs_1.boolean('opaque', false);
var actionClear = addon_knobs_1.boolean('with clear button', false);
var action = addon_knobs_1.boolean('with action button', false);
var hasClose = addon_knobs_1.boolean('has close', false);
var leadingRadio = addon_knobs_1.radios('leading', addonOptions, null);
var leading = leadingRadio === 'icon' ? react_1.default.createElement(bundle_2.Spin, { view: "default", size: "s", progress: true }) : leadingRadio;
var trailingRadio = addon_knobs_1.radios('trailing', addonOptions, null);
var trailing = trailingRadio === 'icon' ? react_1.default.createElement(bundle_2.Spin, { view: "default", size: "s", progress: true }) : trailingRadio;
var backgroundRadio = addon_knobs_1.radios('background', backgroundOptions, 'empty');
var background = backgroundOptionToJsx[backgroundRadio];
var view = addon_knobs_1.select('view', ['default', 'promo', 'inverse'], 'default');
var align = addon_knobs_1.select('align', ['left', 'right', 'center'], 'left');
var layout = addon_knobs_1.select('layout', ['tooltip', 'plain', 'functional'], 'tooltip');
if (hasClose && layout === 'tooltip') {
layout = 'plain';
}
return (react_1.default.createElement("div", { style: { padding: '50px', backgroundColor: 'var(--color-bg-default)' } },
react_1.default.createElement(bundle_3.MessageBox, { view: view, size: size, opaque: opaque, layout: layout, onClose: hasClose && (function () { return null; }), background: background, actions: react_1.default.createElement(react_1.default.Fragment, null,
actionClear && (react_1.default.createElement(bundle_1.Button, { size: size, view: "clear" }, "Cancel")),
action && (react_1.default.createElement(bundle_1.Button, { size: size, view: "action" }, "Done"))) },
react_1.default.createElement(bundle_3.Wrapper, { leading: leading, trailing: trailing, align: align }, children))));
};
exports.Playground = Playground;