@yandex/ui/esm/Button/__examples__/playground.example.js

Yandex UI components

import React from 'react';
import { select, boolean, text } from '@storybook/addon-knobs';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Icon } from '@yandex-lego/components/Icon/desktop/bundle';
export var Playground = function () {
    var children = text('children', 'Button');
    var view = select('view', ['default', 'action', 'pseudo', 'link', 'clear', 'raised', ''], 'default');
    var size = select('size', ['s', 'm', 'l'], 'm');
    var theme = view === ''
        ? select('theme', ['action', 'clear', 'normal', 'pseudo', 'raised', 'link'], 'normal')
        : null;
    var checked = boolean('checked', false);
    var disabled = boolean('disabled', false);
    var progress = boolean('progress', false);
    var icon = boolean('icon', false);
    var iconLeft = icon ? null : boolean('iconLeft', false);
    var iconRight = icon ? null : boolean('iconRight', false);
    var iconType = icon || iconLeft || iconRight
        ? select('icon type', ['arrow', 'close', 'cross', 'cross-websearch', 'filter'], 'arrow')
        : null;
    var direction = iconType === 'arrow' ? select('direction', ['left', 'right', 'top', 'bottom'], 'bottom') : null;
    return (React.createElement(Button, { theme: theme, size: size, view: view, progress: progress, disabled: disabled, checked: checked, children: icon ? null : children, 
        // @ts-ignore TODO: Исправить тип
        icon: icon &&
            (function (className) { return (React.createElement(Icon, { size: size, type: iconType, direction: direction, className: className })); }), 
        // @ts-ignore TODO: Исправить тип
        iconLeft: iconLeft &&
            (function (className) { return (React.createElement(Icon, { size: size, type: iconType, direction: direction, className: className })); }), 
        // @ts-ignore TODO: Исправить тип
        iconRight: iconRight &&
            (function (className) { return (React.createElement(Icon, { size: size, type: iconType, direction: direction, className: className })); }) }));
};
Playground.story = {
    name: 'playground',
};