import React, {Fragment} from 'react';
import {render} from 'react-dom';
import Button from '@jetbrains/ring-ui/components/button/button';
import {PencilIcon} from '@jetbrains/ring-ui/components/icon';
function renderButtonModifications(theme) {
return [
'active', 'primary', 'danger', 'delayed', 'disabled', 'dropdown'
].map(modifier => (
));
}
function renderTextModifications(theme) {
return [
'primary', 'danger', 'disabled', 'loader'
].map(modifier => (
));
}
function renderIconWithTextModifications(theme) {
return [
{label: 'primary', primary: true},
{label: 'danger', danger: true},
{label: 'disabled', disabled: true},
{label: 'primary-disabled', primary: true, disabled: true},
{label: 'danger-disabled', danger: true, disabled: true}
].map((modifiers, index) => (
));
}
function renderIconActionModifications(theme) {
return [
{label: 'primary', primary: true},
{label: 'danger', danger: true},
{label: 'disabled', disabled: true},
{label: 'primary-disabled', primary: true, disabled: true},
{label: 'danger-disabled', danger: true, disabled: true}
].map((modifiers, index) => (
));
}
const buttons = (
{renderButtonModifications()}
{renderTextModifications()}
{renderIconWithTextModifications()}
{renderIconActionModifications()}
);
render(buttons, document.getElementById('buttons'));
const dark = (
{renderButtonModifications(Button.Theme.DARK)}
{renderTextModifications(Button.Theme.DARK)}
{renderIconWithTextModifications(Button.Theme.DARK)}
{renderIconActionModifications(Button.Theme.DARK)}
);
render(dark, document.getElementById('dark'));