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
|
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 { TagCloudModule } from '../../src/angular/tag-cloud/tag-cloud.module';
let stories = storiesOf('Tag Cloud', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [
],
imports: [
TagCloudModule,
]
})
)
let containsViewOnlyList = true;
let containsViewOnly = true;
let containsUniqueList = true;
createStory(stories, "All options", !containsViewOnlyList, containsViewOnly, containsUniqueList, "Tag cloud", "Full example of simple tag cloud.");
createStory(stories, "View only", !containsViewOnlyList, containsViewOnly, !containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View only.");
createStory(stories, "View only list", containsViewOnlyList, !containsViewOnly, !containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View only list.");
createStory(stories, "Unique list", !containsViewOnlyList, !containsViewOnly, containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View unique list.");
function createStory(stories, title, containsViewOnlyList, containsViewOnly, containsUniqueList, notesTitle, notesText){
stories.add(title, () => {
let _label = text('label', 'Please Enter value');
let _list = array('List', ['aaa', 'bbb', 'ccc'], ',');
let _isViewOnly = containsViewOnly ? boolean('View only', false) : null;
let _listViewOnly = containsViewOnlyList ? array('List of view only params', [0,3], ',') : null;
let _isUniqueList = containsUniqueList ? boolean('Unique list', false) : null;
let _uniqueErrorMessage = containsUniqueList ? text('Unique error message', 'Unique error') : null;
let _placeholder = text('place holder', 'Type a value and then click enter or');
let _listChanged = text('*(listChanged)', 'Event throws when tag cloud list changed, see in Action logger tab.');
return {
props: {
listChanged: action('tag cloud list changed'),
_label, _list, _isViewOnly, _listViewOnly, _isUniqueList, _uniqueErrorMessage, _placeholder,
containsViewOnly
},
template: `
<sdc-tag-cloud
#tagCloud
[label] = "_label"
[(list)] = "_list"
[isViewOnly] = "this.containsViewOnly ? _isViewOnly : _listViewOnly"
[isUniqueList] = "_isUniqueList"
[uniqueErrorMessage] = "_uniqueErrorMessage"
[placeholder] = "_placeholder"
(listChanged)= "listChanged($event)"
>
</sdc-tag-cloud>
`
}
},
{ notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
}
)
}
|
