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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import { storiesOf } from '@storybook/angular';
import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
import { withNotes } from '@storybook/addon-notes';
import { action, configureActions } from '@storybook/addon-actions';
import { moduleMetadata } from '@storybook/angular';
import { AccordionComponent, SvgIconComponent } from '../../src/angular/components';
import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
import { Mode, Placement, Size, BackgroundShape, ButtonType, BackgroundColor } from "../../src/angular/common/enums";
const mode = Object.keys(Mode);
const size = Object.keys(Size);
const icons_categories: Array<string> = Object.keys(SvgIconComponent.Icons());
const background_shape: Array<string> = Object.keys(BackgroundShape);
const background_color: Array<string> = Object.keys(BackgroundColor);
const caption_full_options = 'Icon full options';
let stories = storiesOf('Icons|Show case', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [SvgIconComponent],
imports: [
]
})
);
background_shape.push(undefined);
background_color.push(undefined);
// resource: #9063CD
// services: #71C5E8
// red:
console.log(icons_categories);
icons_categories.map((category) =>
stories.add(category, () => {
let _mode = select('mode', mode, 'primary', '');
let _size = select('size', size, 'medium', '');
let _backgroundShape = select('backgroundShape', background_shape, '', '');
let _backgroundColor = select('backgroundColor', background_color, '', '');
const _debug_icon = boolean('Debug icon', false);
if (category === 'resources_60') {
_mode = select('mode', mode, 'white', '');
_size = select('size', size, 'x_large', '');
_backgroundShape = select('backgroundShape', background_shape, 'circle', '');
_backgroundColor = select('backgroundColor', background_color, 'primary', '');
}
return {
props: {
_debug_icon, _mode, _size, _backgroundShape, _backgroundColor
},
template:
`<div class='storybook-icons-showcase'>` +
Object.keys(SvgIconComponent.Icons()[category]).map((iconName) =>
`
<div class='storybook-component-wrapper'>
<div class='storybook-component-info'>${iconName}</div>
<svg-icon
[ngClass]="{'storybook-debug-icon': _debug_icon===true}"
category="${category}"
name="${iconName}"
[mode]="_mode"
[size]="_size"
[backgroundShape]="_backgroundShape"
[backgroundColor]="_backgroundColor"
>
</svg-icon>
</div>
`
).join('\n') +
`</div>`
}
},
{ notes: `<h2>Showcase of all icons</h2>
To see all the options for specific icon, select 'Icon full options' in left panel.
`
})
);
stories.add(caption_full_options, () => {
const _mode = select('mode', mode, 'primary', '');
const _size = select('size', size, 'x_large', '');
const _category = select('category', icons_categories, 'common', '');
const _name = select('name', Object.keys(SvgIconComponent.Icons().common), 'alert-triangle-o', '');
const _backgroundShape = select('backgroundShape', background_shape, '', '');
const _backgroundColor = select('backgroundColor', background_color, '', '');
const _disabled = boolean('disabled', false);
const _clickable = boolean('clickable', true);
const _className = text('className', '');
return {
props: {
_mode, _size, _name, _backgroundShape, _backgroundColor, _disabled, _clickable, _className, _category
},
template: `
<div class='storybook-component-wrapper'>
<div class='storybook-component-info'>Full options, look in the KNOBS options</div>
<svg-icon
[name]="_name"
[mode]="_mode"
[size]="_size"
[backgroundShape]="_backgroundShape"
[backgroundColor]="_backgroundColor"
[disabled]="_disabled"
[clickable]="_clickable"
[className]="_className"
>
</svg-icon>
</div>
`
}
},
{ notes: `<h2>SVG icon full example</h2>
Full example of SVG icon, use the KNOBS tab to change @Inputs.
`
}
);
|
