1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import React from 'react';
import {storiesOf, action} from '@kadira/storybook';
import {select, text, withKnobs} from '@kadira/storybook-addon-knobs';
import SVGIcon from './SVGIcon.jsx';
const stories = storiesOf('SVGIcon', module);
const iconNames = ['locked',
'pencil',
'plus-circle',
'plus',
'search',
'sliders',
'trash-o',
'unlocked',
'vendor',
'version-controller-lock-closed',
'version-controller-lock-open',
'version-controller-revert',
'version-controller-save',
'version-controller-submit',
'vlm',
'vsp' ];
function colorChanger() {
return {fill: text('Color', '')};
}
function iconName() {
return select('Icon name' , iconNames, iconNames[0]);
}
stories.addDecorator(withKnobs);
stories
.add('icon', () => {
return (
<SVGIcon name={iconName()} style={colorChanger()}/>
);
})
.add('icon with label', () => {
return (
<SVGIcon name={iconName()} label={iconName()} style={colorChanger()}/>
);
})
.add('locked clickable', () => {
return (
<SVGIcon name={iconName()} onClick={action('clicked')} style={colorChanger()}/>
);
});
|
