@lyra/components
Version:
Basic UX components
55 lines (43 loc) • 1.69 kB
JavaScript
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _bar = require('part:@lyra/components/progress/bar');
var _bar2 = _interopRequireDefault(_bar);
var _circle = require('part:@lyra/components/progress/circle');
var _circle2 = _interopRequireDefault(_circle);
var _knobs = require('part:@lyra/storybook/addons/knobs');
var _storybook = require('part:@lyra/storybook');
var _lyra = require('part:@lyra/storybook/addons/lyra');
var _lyra2 = _interopRequireDefault(_lyra);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* eslint-disable react/no-multi-comp */
(0, _storybook.storiesOf)('Progress').addDecorator(_knobs.withKnobs).add('Progress bar', () => _react2.default.createElement(
_lyra2.default,
{ part: 'part:@lyra/components/progress/bar', propTables: [_bar2.default] },
_react2.default.createElement(_bar2.default, {
percent: (0, _knobs.number)('percentage (prop)', 10, {
range: true,
min: 0,
max: 100,
step: 1
}),
showPercent: (0, _knobs.boolean)('showPercent (prop)', false),
text: (0, _knobs.text)('text (prop)', 'Downloaded 5.1 of 8.2Mb')
})
)).add('Progress circle', () => _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/progress/circle',
propTables: [_circle2.default]
},
_react2.default.createElement(_circle2.default, {
percent: (0, _knobs.number)('percent (prop)', 10, {
range: true,
min: 0,
max: 100,
step: 1
}),
showPercent: (0, _knobs.boolean)('showPercent (prop)', true),
text: (0, _knobs.text)('text (prop)', 'Uploaded')
})
));