@lyra/components
Version:
Basic UX components
864 lines (812 loc) • 26.5 kB
JavaScript
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _storybook = require('part:@lyra/storybook');
var _default = require('part:@lyra/components/previews/default');
var _default2 = _interopRequireDefault(_default);
var _detail = require('part:@lyra/components/previews/detail');
var _detail2 = _interopRequireDefault(_detail);
var _inline = require('part:@lyra/components/previews/inline');
var _inline2 = _interopRequireDefault(_inline);
var _media = require('part:@lyra/components/previews/media');
var _media2 = _interopRequireDefault(_media);
var _card = require('part:@lyra/components/previews/card');
var _card2 = _interopRequireDefault(_card);
var _block = require('part:@lyra/components/previews/block');
var _block2 = _interopRequireDefault(_block);
var _blockImage = require('part:@lyra/components/previews/block-image');
var _blockImage2 = _interopRequireDefault(_blockImage);
var _knobs = require('part:@lyra/storybook/addons/knobs');
var _lyra = require('part:@lyra/storybook/addons/lyra');
var _lyra2 = _interopRequireDefault(_lyra);
var _warningIcon = require('part:@lyra/base/warning-icon');
var _warningIcon2 = _interopRequireDefault(_warningIcon);
var _linkIcon = require('part:@lyra/base/link-icon');
var _linkIcon2 = _interopRequireDefault(_linkIcon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const renderMedia = dimensions => {
return _react2.default.createElement('img', { src: 'http://www.fillmurray.com/300/300', alt: 'test' });
}; /* eslint-disable react/no-multi-comp */
const renderStatus = options => {
return _react2.default.createElement(
'span',
null,
'Status ',
_react2.default.createElement(_linkIcon2.default, null),
' ',
_react2.default.createElement(_warningIcon2.default, null)
);
};
const renderTitle = options => {
return _react2.default.createElement(
'span',
null,
'This ',
_react2.default.createElement(
'span',
{ style: { color: 'green' } },
'is'
),
' a ',
_react2.default.createElement(
'strong',
null,
'title'
),
'\xA0in the layout ',
options.layout
);
};
const renderSubtitle = options => {
return _react2.default.createElement(
'span',
null,
'This is a',
' ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
_react2.default.createElement(_warningIcon2.default, null),
'subtitle'
)
);
};
const renderDescription = options => {
return _react2.default.createElement(
'span',
null,
'This is the',
' ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
_react2.default.createElement(_warningIcon2.default, null),
'description'
)
);
};
const renderCustomChildren = () => {
return _react2.default.createElement(
'div',
{
style: {
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%',
overflow: 'hidden',
pointerEvents: 'none'
}
},
_react2.default.createElement(
'div',
{
style: {
position: 'absolute',
top: '0',
right: '0'
}
},
_react2.default.createElement(
'div',
{
style: {
position: 'absolute',
fontSize: '10px',
textTransform: 'uppercase',
top: '0',
right: '0',
fontWeight: '700',
boxShadow: '0 0 5px rgba(0,0,0,0.2)',
backgroundColor: 'yellow',
padding: '0.2em 3em',
transform: 'translate(28%, 43%) rotate(45deg)'
}
},
'New'
)
)
);
};
const style = {
height: '100vh',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#eee',
padding: '1em'
};
const innerStyle = {
border: '1px dotted #ccc',
width: '500px'
};
const centered = function centered(storyFn) {
return _react2.default.createElement(
'div',
{ style: style },
_react2.default.createElement(
'div',
{ style: innerStyle },
storyFn()
)
);
};
const options = {
functions: 'Functions',
strings: 'Strings',
elements: 'Element'
};
(0, _storybook.storiesOf)('Previews').addDecorator(centered).addDecorator(_knobs.withKnobs).add('Default', () => {
const propType = (0, _knobs.select)('Type of props', options, 'strings');
if (propType === 'functions') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/default',
propTables: [_default2.default]
},
_react2.default.createElement(
_default2.default,
{
title: renderTitle,
subtitle: renderSubtitle,
description: renderDescription,
status: renderStatus,
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
date: new Date(),
progress: (0, _knobs.number)('progress (prop)', undefined)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
if (propType === 'elements') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/default',
propTables: [_default2.default]
},
_react2.default.createElement(
_default2.default,
{
title: _react2.default.createElement(
'span',
null,
'This ',
_react2.default.createElement(
'span',
{ style: { color: 'green' } },
'is'
),
' a',
' ',
_react2.default.createElement(
'strong',
null,
'test'
)
),
subtitle: _react2.default.createElement(
'span',
null,
'This is a ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
'subtitle'
)
),
description: _react2.default.createElement(
'span',
null,
'This is the long the descriptions that should no be to long, beacuse we will cap it'
),
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
media: (0, _knobs.boolean)('Show image', true) ? renderMedia : undefined,
status: _react2.default.createElement(
'div',
null,
_react2.default.createElement(_linkIcon2.default, null),
_react2.default.createElement(_warningIcon2.default, null)
),
date: new Date(),
progress: (0, _knobs.number)('progress (prop)')
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/default',
propTables: [_default2.default]
},
_react2.default.createElement(
_default2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title an it is very long, so long that it should be ellipsed'),
subtitle: (0, _knobs.text)('subtitle', `This is the title an it is very long, so long that it should be ellipsed.
This is the title an it is very long, so long that it should be ellipsed`),
description: (0, _knobs.text)('description (prop)', 'This is the long the descriptions that should no be to long, beacuse we will cap it'),
status: (0, _knobs.text)('status', 'status'),
media: (0, _knobs.boolean)('Show image', true) ? renderMedia : undefined,
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
date: new Date(),
progress: (0, _knobs.number)('progress (prop)', undefined)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}).add('Card', () => {
const propType = (0, _knobs.select)('Type of props', options, 'strings');
if (propType === 'functions') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/card',
propTables: [_card2.default]
},
_react2.default.createElement(
_card2.default,
{
title: renderTitle,
subtitle: renderSubtitle,
description: renderDescription,
date: (0, _knobs.boolean)('date', true) ? new Date() : false,
status: renderStatus,
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', true),
mediaAspect: (0, _knobs.number)('mediaAspect (prop)', 4 / 3)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
if (propType === 'elements') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/card',
propTables: [_card2.default]
},
_react2.default.createElement(
_card2.default,
{
title: _react2.default.createElement(
'span',
null,
'This ',
_react2.default.createElement(
'span',
{ style: { color: 'green' } },
'is'
),
' a',
' ',
_react2.default.createElement(
'strong',
null,
'test'
)
),
subtitle: _react2.default.createElement(
'span',
null,
'This is a ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
'subtitle'
)
),
description: _react2.default.createElement(
'span',
null,
'This is the long the descriptions that should no be to long, beacuse we will cap it'
),
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
media: (0, _knobs.boolean)('Show image', false) ? renderMedia : undefined,
status: _react2.default.createElement(
'div',
null,
_react2.default.createElement(_linkIcon2.default, null),
_react2.default.createElement(_warningIcon2.default, null)
),
date: (0, _knobs.boolean)('date', true) ? new Date() : false,
mediaAspect: (0, _knobs.number)('mediaAspect (prop)', 4 / 3)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/card',
propTables: [_card2.default]
},
_react2.default.createElement(
_card2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title'),
subtitle: (0, _knobs.text)('subtitle (prop)', 'This is the subtitle'),
description: (0, _knobs.text)('description (prop)', 'This is the long the descriptions that should no be to long, beacuse we will cap it'),
date: (0, _knobs.boolean)('date', true) ? new Date() : false,
status: (0, _knobs.text)('status', 'status'),
media: (0, _knobs.boolean)('Show image', true) ? renderMedia : undefined,
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', true),
mediaAspect: (0, _knobs.number)('mediaAspect (prop)', 4 / 3)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}).add('Detail', () => {
const propType = (0, _knobs.select)('Type of props', options, 'strings');
if (propType === 'functions') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_detail2.default,
{
title: renderTitle,
subtitle: renderSubtitle,
description: renderDescription,
status: renderStatus,
date: new Date(),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
if (propType === 'elements') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_detail2.default,
{
title: _react2.default.createElement(
'span',
null,
'This ',
_react2.default.createElement(
'span',
{ style: { color: 'green' } },
'is'
),
' a',
' ',
_react2.default.createElement(
'strong',
null,
'test'
)
),
subtitle: _react2.default.createElement(
'span',
null,
'This is a ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
'subtitle'
)
),
description: _react2.default.createElement(
'span',
null,
'This is the long the descriptions that should no be to long, beacuse we will cap it'
),
status: _react2.default.createElement(
'div',
null,
_react2.default.createElement(_linkIcon2.default, null),
_react2.default.createElement(_warningIcon2.default, null)
),
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
media: (0, _knobs.boolean)('Show image', false) ? renderMedia : undefined,
date: (0, _knobs.boolean)('date', true) ? new Date() : false
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_detail2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title'),
subtitle: (0, _knobs.text)('subtitle (prop)', 'This is the subtitle'),
description: _react2.default.createElement(
'span',
null,
'This is the long the',
' ',
_react2.default.createElement(
'strong',
{ style: { color: 'magenta' } },
'description'
),
'\xA0 that should no be to long, beacuse we will cap it. But this is an element, and that is why it is har to cap. This is the long the ',
_react2.default.createElement(
'strong',
{ style: { color: 'magenta' } },
'description'
),
'\xA0 that should no be to long, beacuse we will cap it. But this is an element, and that is why it is har to cap.'
),
status: (0, _knobs.text)('status', 'status'),
date: new Date(),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}).add('Media', () => {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/media',
propTables: [_media2.default]
},
_react2.default.createElement(
_media2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title'),
subtitle: (0, _knobs.text)('subtitle (prop)', 'This is the subtitle'),
description: (0, _knobs.text)('description (prop)', 'This is the long the descriptions that should no be to long, beacuse we will cap it'),
date: (0, _knobs.boolean)('date', true) ? new Date() : false,
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}).add('Inline', () => {
const propType = (0, _knobs.select)('Type of props', options, 'strings');
if (propType === 'functions') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/inline',
propTables: [_inline2.default]
},
_react2.default.createElement(
'p',
null,
'This is a text, and suddenly a inline preview appearst before',
_react2.default.createElement(
_inline2.default,
{
title: renderTitle,
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isPlaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && _react2.default.createElement(
'span',
null,
'This is custom children'
)
),
'this word.'
)
);
}
if (propType === 'elements') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/inline',
propTables: [_inline2.default]
},
_react2.default.createElement(
'p',
null,
'This is a text, and suddenly a inline preview appearst before',
_react2.default.createElement(
_inline2.default,
{
title: _react2.default.createElement(
'span',
null,
'title'
),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isPlaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && _react2.default.createElement(
'span',
null,
'This is custom children'
)
),
'this word.'
)
);
}
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/inline',
propTables: [_inline2.default]
},
_react2.default.createElement(
'p',
null,
'This is a text, and suddenly a inline preview appearst before',
_react2.default.createElement(
_inline2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title'),
media: renderMedia,
date: (0, _knobs.boolean)('date', true) ? new Date() : false,
isPlaceholder: (0, _knobs.boolean)('isPlaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && _react2.default.createElement(
'span',
null,
'This is custom children'
)
),
'this word.'
)
);
}).add('Block', () => {
const propType = (0, _knobs.select)('Type of props', options, 'strings');
if (propType === 'functions') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_block2.default,
{
title: renderTitle,
subtitle: renderSubtitle,
description: renderDescription,
status: renderStatus,
date: new Date(),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
if (propType === 'elements') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_block2.default,
{
title: _react2.default.createElement(
'span',
null,
'This ',
_react2.default.createElement(
'span',
{ style: { color: 'green' } },
'is'
),
' a',
' ',
_react2.default.createElement(
'strong',
null,
'test'
)
),
subtitle: _react2.default.createElement(
'span',
null,
'This is a ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
'subtitle'
)
),
description: _react2.default.createElement(
'span',
null,
'This is the long the descriptions that should no be to long, beacuse we will cap it'
),
status: _react2.default.createElement(
'div',
null,
_react2.default.createElement(_linkIcon2.default, null),
_react2.default.createElement(_warningIcon2.default, null)
),
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
media: (0, _knobs.boolean)('Show image', false) ? renderMedia : undefined,
date: (0, _knobs.boolean)('date', true) ? new Date() : false
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_block2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title'),
subtitle: (0, _knobs.text)('subtitle (prop)', 'This is the subtitle'),
description: (0, _knobs.text)('description (prop)', 'This is the description'),
status: (0, _knobs.text)('status', 'status'),
date: new Date(),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}).add('Block image', () => {
const propType = (0, _knobs.select)('Type of props', options, 'strings');
if (propType === 'functions') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_blockImage2.default,
{
title: renderTitle,
subtitle: renderSubtitle,
description: (0, _knobs.boolean)('description (prop)', false) ? renderDescription : '',
status: renderStatus,
date: new Date(),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
if (propType === 'elements') {
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_blockImage2.default,
{
title: _react2.default.createElement(
'span',
null,
'This ',
_react2.default.createElement(
'span',
{ style: { color: 'green' } },
'is'
),
' a',
' ',
_react2.default.createElement(
'strong',
null,
'test'
)
),
subtitle: _react2.default.createElement(
'span',
null,
'This is a ',
_react2.default.createElement(
'strong',
{ style: { color: 'red' } },
'subtitle'
)
),
description: _react2.default.createElement(
'span',
null,
'This is the long the',
' ',
_react2.default.createElement(
'strong',
{ style: { color: 'magenta' } },
'description'
),
'\xA0 that should no be to long, beacuse we will cap it. But this is an element, and that is why it is har to cap. This is the long the',
' ',
_react2.default.createElement(
'strong',
{ style: { color: 'magenta' } },
'description'
),
'\xA0 that should no be to long, beacuse we will cap it. But this is an element, and that is why it is har to cap.'
),
status: _react2.default.createElement(
'div',
null,
_react2.default.createElement(_linkIcon2.default, null),
_react2.default.createElement(_warningIcon2.default, null)
),
isPlaceholder: (0, _knobs.boolean)('placeholder (prop)', false),
media: (0, _knobs.boolean)('Show image', false) ? renderMedia : undefined,
date: (0, _knobs.boolean)('date', true) ? new Date() : false
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
}
return _react2.default.createElement(
_lyra2.default,
{
part: 'part:@lyra/components/previews/detail',
propTables: [_detail2.default]
},
_react2.default.createElement(
_blockImage2.default,
{
title: (0, _knobs.text)('title (prop)', 'This is the title'),
subtitle: (0, _knobs.text)('subtitle (prop)', 'This is the subtitle'),
description: (0, _knobs.text)('description (prop)', 'This is the description'),
status: (0, _knobs.text)('status', 'status'),
date: new Date(),
media: renderMedia,
isPlaceholder: (0, _knobs.boolean)('isplaceholder (prop)', false)
},
(0, _knobs.boolean)('Custom children', false) && renderCustomChildren()
)
);
});