summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js
blob: 6675670cea62447543f617652002c241578bc793 (plain)
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()}/>
        );
    });