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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import React from 'react';
import Examples from './utils/Examples.js';
import DropdownMenu from './utils/components/DropdownMenu.js';
import SVGIcon from '../../src/react/SVGIcon.js';
const iconLabelPositions = [
'', 'bottom', 'top', 'left', 'right'
];
const iconColors = [
'',
'primary',
'secondary',
'positive',
'negative',
'warning'
];
const disabledStates = ['false', 'true'];
function buildExamples({iconName, iconLabel, labelPosition, color, disabled}) {
return {
Example: {
jsx: <SVGIcon
label={iconLabel}
labelPosition={labelPosition}
color={color}
name={iconName}
disabled={disabled === 'true'} />
}
};
}
const IconTable = ({onClick}) => (
<div className='icons-table'>
{ICON_NAMES.map(icon => (
<div key={icon} className='icon-section'>
<SVGIcon
onClick={() => onClick(icon)}
label={icon}
iconClassName='storybook-small'
name={icon} />
</div>
))}
</div>
);
class Icons extends React.Component {
constructor(props) {
super(props);
this.state = {
iconName: ICON_NAMES[0],
iconLabel: '',
labelPosition: iconLabelPositions[0],
color : iconColors[0]
};
}
render() {
let {iconName, iconLabel, labelPosition, color, disabled} = this.state;
return (
<div className='icons-screen'>
<h1>Icons</h1>
<div className='icons-option-selector'>
<DropdownMenu
title='Icon name'
value={iconName}
onChange={e => this.setState({iconName: e.target.value})}
options={ICON_NAMES} />
<div className='option-container'>
<label>Icon label</label>
<input value={iconLabel} onChange={e => this.setState({iconLabel: e.target.value})}/>
</div>
<DropdownMenu
title='Label position'
value={labelPosition}
onChange={e => this.setState({labelPosition: e.target.value})}
options={iconLabelPositions} />
<DropdownMenu
title='Color'
value={color}
onChange={e => this.setState({color: e.target.value})}
options={iconColors} />
<DropdownMenu
title='Disabled'
value={disabled}
onChange={e => this.setState({disabled: e.target.value})}
options={disabledStates} />
</div>
<Examples examples={buildExamples({iconName, iconLabel, labelPosition, color, disabled})} />
<IconTable onClick={icon => this.setState({iconName: icon})} />
<div className='missing-icon-section'>
<div >You will see the following if the icon name you used is not found:</div>
<SVGIcon
onClick={() => {}}
name='MissingIcon' />
</div>
</div>
);
};
}
export default Icons;
|
