@yandex/ui
Version:
Yandex UI components
48 lines (47 loc) • 2.77 kB
JavaScript
import React from 'react';
import { select, boolean, radios, text } from '@storybook/addon-knobs';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Spin } from '@yandex-lego/components/Spin/bundle';
import { Progress } from '@yandex-lego/components/Progress';
import { MessageBox, Wrapper } from '@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.createElement("picture", null,
React.createElement("img", { style: { filter: 'opacity(.5)', width: '100%' }, src: "//jing.yandex-team.ru/files/axaxaman/catalogue-banner-x3.jpeg" }))),
progress: React.createElement(Progress, { style: { height: '100%', backgroundColor: '#2196f3' }, value: 0.65 }),
};
export var Playground = function () {
var children = text('children', 'MessageBox-Content');
var size = select('size', ['s', 'm', 'l'], 's');
var opaque = boolean('opaque', false);
var actionClear = boolean('with clear button', false);
var action = boolean('with action button', false);
var hasClose = boolean('has close', false);
var leadingRadio = radios('leading', addonOptions, null);
var leading = leadingRadio === 'icon' ? React.createElement(Spin, { view: "default", size: "s", progress: true }) : leadingRadio;
var trailingRadio = radios('trailing', addonOptions, null);
var trailing = trailingRadio === 'icon' ? React.createElement(Spin, { view: "default", size: "s", progress: true }) : trailingRadio;
var backgroundRadio = radios('background', backgroundOptions, 'empty');
var background = backgroundOptionToJsx[backgroundRadio];
var view = select('view', ['default', 'promo', 'inverse'], 'default');
var align = select('align', ['left', 'right', 'center'], 'left');
var layout = select('layout', ['tooltip', 'plain', 'functional'], 'tooltip');
if (hasClose && layout === 'tooltip') {
layout = 'plain';
}
return (React.createElement("div", { style: { padding: '50px', backgroundColor: 'var(--color-bg-default)' } },
React.createElement(MessageBox, { view: view, size: size, opaque: opaque, layout: layout, onClose: hasClose && (function () { return null; }), background: background, actions: React.createElement(React.Fragment, null,
actionClear && (React.createElement(Button, { size: size, view: "clear" }, "Cancel")),
action && (React.createElement(Button, { size: size, view: "action" }, "Done"))) },
React.createElement(Wrapper, { leading: leading, trailing: trailing, align: align }, children))));
};