@lyra/components
Version:
Basic UX components
437 lines (411 loc) • 12.6 kB
JavaScript
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _default = require('part:@lyra/components/buttons/default');
var _default2 = _interopRequireDefault(_default);
var _anchor = require('part:@lyra/components/buttons/anchor');
var _anchor2 = _interopRequireDefault(_anchor);
var _dropdown = require('part:@lyra/components/buttons/dropdown');
var _dropdown2 = _interopRequireDefault(_dropdown);
var _default3 = require('part:@lyra/components/formfields/default');
var _default4 = _interopRequireDefault(_default3);
var _inInput = require('part:@lyra/components/buttons/in-input');
var _inInput2 = _interopRequireDefault(_inInput);
var _inInputStyle = require('part:@lyra/components/buttons/in-input-style');
var _inInputStyle2 = _interopRequireDefault(_inInputStyle);
var _storybook = require('part:@lyra/storybook');
var _knobs = require('part:@lyra/storybook/addons/knobs');
var _lyraLogoIcon = require('part:@lyra/base/lyra-logo-icon');
var _lyraLogoIcon2 = _interopRequireDefault(_lyraLogoIcon);
var _default5 = require('part:@lyra/components/textinputs/default');
var _default6 = _interopRequireDefault(_default5);
var _lyra = require('part:@lyra/storybook/addons/lyra');
var _lyra2 = _interopRequireDefault(_lyra);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getButtonKinds = () => (0, _knobs.select)('kind (prop)', ['default', 'simple', 'secondary'], 'default');
const getColorKinds = () => (0, _knobs.select)('color (prop)', [false, 'primary', 'success', 'danger', 'white'], false);
const items = [{ index: '1', title: 'Test' }, { index: '2', title: 'Test 2' }, { index: '3', title: 'Test 3' }, { index: '4', title: 'Test 4' }, { index: '5', title: 'Test 5' }, { index: '6', title: 'Test 6' }, { index: '7', title: 'Test 7' }];
(0, _storybook.storiesOf)('Buttons', module).addDecorator(_knobs.withKnobs).add('Default', () => {
return _react2.default.createElement(
_lyra2.default,
{ part: 'part:@lyra/components/buttons/default', propTables: [_default2.default] },
_react2.default.createElement(
_default2.default,
{
kind: getButtonKinds(),
onClick: (0, _storybook.action)('clicked'),
disabled: (0, _knobs.boolean)('disabled (prop)', false),
inverted: (0, _knobs.boolean)('inverted (prop)', false),
type: (0, _knobs.text)('type (prop)', undefined),
color: getColorKinds(),
loading: (0, _knobs.boolean)('Loading (prop)', false),
icon: (0, _knobs.boolean)('Show test icon', false) ? _lyraLogoIcon2.default : false
},
(0, _knobs.text)('prop: children', 'Touch Me!')
)
);
}).add('Anchor <a>', () => {
return _react2.default.createElement(
_lyra2.default,
{ part: 'part:@lyra/components/buttons/anchor', propTables: [_default2.default] },
_react2.default.createElement(
_anchor2.default,
{
kind: getButtonKinds(),
onClick: (0, _storybook.action)('clicked'),
disabled: (0, _knobs.boolean)('prop: disabled', false),
inverted: (0, _knobs.boolean)('prop: inverted', false),
color: getColorKinds(),
loading: (0, _knobs.boolean)('prop: loading', false),
icon: (0, _knobs.boolean)('show test icon', false) ? _lyraLogoIcon2.default : false,
href: (0, _knobs.text)('prop: href', 'http://example.org')
},
(0, _knobs.text)('prop: children', 'Touch Me!')
)
);
}).add('Examples', () => {
const disabled = (0, _knobs.boolean)('Disabled', false);
return _react2.default.createElement(
'form',
{ style: { padding: '2rem' } },
_react2.default.createElement(
'h2',
null,
'Default'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
disabled: disabled
},
'Default'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
inverted: true,
disabled: disabled
},
'Inverted'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
kind: 'simple',
disabled: disabled
},
'Simple'
),
_react2.default.createElement(
'h2',
null,
'Colors'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), disabled: disabled },
'Undefined'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), color: 'primary', disabled: disabled },
'Primary'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), color: 'danger', disabled: disabled },
'Danger'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), color: 'success', disabled: disabled },
'Success'
),
_react2.default.createElement(
'h2',
null,
'Colors (inverted)'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), inverted: true, disabled: disabled },
'Undefined'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
color: 'primary',
inverted: true,
disabled: disabled
},
'Primary'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
color: 'danger',
inverted: true,
disabled: disabled
},
'Danger'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
color: 'success',
inverted: true,
disabled: disabled
},
'Success'
),
_react2.default.createElement(
_dropdown2.default,
{
items: items,
onAction: (0, _storybook.action)('Clicked item'),
disabled: disabled
},
'Dropdown'
),
_react2.default.createElement(
'h2',
null,
'Colors (simple)'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), kind: 'simple', disabled: disabled },
'Undefined'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
kind: 'simple',
color: 'primary',
disabled: disabled
},
'Primary'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
kind: 'simple',
color: 'danger',
disabled: disabled
},
'Danger'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
kind: 'simple',
color: 'success',
disabled: disabled
},
'Success'
),
_react2.default.createElement(
'h2',
null,
'With icons'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
disabled: disabled
},
'With icon'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
color: 'danger',
icon: _lyraLogoIcon2.default,
disabled: disabled
},
'Colored with icon'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
color: 'danger',
icon: _lyraLogoIcon2.default,
inverted: true,
disabled: disabled
},
'Danger, inverted & icon'
),
_react2.default.createElement(
_dropdown2.default,
{
icon: _lyraLogoIcon2.default,
inverted: true,
color: 'danger',
items: items,
onAction: (0, _storybook.action)('Clicked item'),
disabled: disabled
},
'Dropdown'
),
_react2.default.createElement(
'h2',
null,
'Only icons'
),
_react2.default.createElement(_default2.default, {
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
title: 'Default',
disabled: disabled
}),
_react2.default.createElement(_default2.default, {
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
color: 'danger',
title: 'Danger',
disabled: disabled
}),
_react2.default.createElement(_default2.default, {
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
inverted: true,
title: 'Inverted',
disabled: disabled
}),
_react2.default.createElement(_default2.default, {
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
inverted: true,
color: 'danger',
title: 'Inverted danger',
disabled: disabled
}),
_react2.default.createElement(_default2.default, {
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
kind: 'simple',
title: 'Simple',
disabled: disabled
}),
_react2.default.createElement(_default2.default, {
onClick: (0, _storybook.action)('clicked'),
icon: _lyraLogoIcon2.default,
kind: 'simple',
color: 'danger',
title: 'Simple danger',
disabled: disabled
}),
_react2.default.createElement(
'h2',
null,
'On color areas'
),
_react2.default.createElement(
'div',
{ style: { backgroundColor: 'red', padding: '1rem' } },
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), color: 'white', disabled: disabled },
'White'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
kind: 'simple',
color: 'white',
disabled: disabled
},
'White simple'
),
_react2.default.createElement(
_default2.default,
{ onClick: (0, _storybook.action)('clicked'), inverted: true, disabled: disabled },
'Inverted'
),
_react2.default.createElement(
_default2.default,
{
onClick: (0, _storybook.action)('clicked'),
inverted: true,
color: 'white',
disabled: disabled
},
'White inverted'
)
)
);
}).add('DropDownButton', () => {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/buttons/dropdown',
propTables: [_dropdown2.default]
},
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
_dropdown2.default,
{
items: (0, _knobs.object)('prop: items', items),
onAction: (0, _storybook.action)('Clicked item'),
color: getColorKinds(),
kind: getButtonKinds()
},
(0, _knobs.text)('prop: children', 'This is a dropdown')
),
_react2.default.createElement(
'div',
null,
'This text should be under the menu'
)
)
);
}).add('InInput', () => {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/buttons/in-input',
propTables: [_inInput2.default]
},
_react2.default.createElement(
_default4.default,
{ label: 'Default' },
_react2.default.createElement(
'div',
{ className: _inInputStyle2.default.wrapper },
_react2.default.createElement(_default6.default, null),
_react2.default.createElement(
'div',
{ className: _inInputStyle2.default.container },
_react2.default.createElement(
_inInput2.default,
{
onAction: (0, _storybook.action)('Clicked item'),
color: getColorKinds(),
kind: getButtonKinds()
},
'browse'
)
)
)
)
);
});