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
|
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 { TileModule } from '../../src/angular/tiles/tile.module';
import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
import { Mode, Size, BackgroundShape, BackgroundColor } from "../../src/angular/common/enums";
const mode = Object.keys(Mode);
const size = Object.keys(Size);
const background_shape: Array<string> = Object.keys(BackgroundShape);
const background_color: Array<string> = Object.keys(BackgroundColor);
let stories = storiesOf('Tiles', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [
],
imports: [
TileModule,
SvgIconModule
]
})
)
createStory(stories, "Tiles", "Tiles", "Full example of tiles.");
function createStory(stories, title, notesTitle, notesText){
stories.add(title, () => {
const _category = text('Category', 'resources_60')
const _name = text('Icon name', 'Border Element_60px')
const _mode = select('Mode', mode, 'primary', '');
const _size = select('Size', size, 'x_large', '');
const _backgroundShape = select('BackgroundShape', background_shape, '', '');
const _backgroundColor = select('BackgroundColor', background_color, '', '');
const _disabled = boolean('Disabled', false);
return {
props: {
_category, _name, _mode, _size, _backgroundShape, _backgroundColor, _disabled
},
template: `
<sdc-tile>
<sdc-tile-header >
<div class="blue">P</div>
</sdc-tile-header>
<sdc-tile-content>
<div class='storybook-component-wrapper blue'>
<svg-icon
[ngClass] = "{'storybook-debug-icon': _debug_icon===true}"
[category] = "_category"
[name] = "_name"
[mode] = "_mode"
[size] = "_size"
[backgroundShape] = "_backgroundShape"
[backgroundColor] = "_backgroundColor"
[disabled] = "_disabled"
>
</svg-icon>
</div>
<div class="sdc-tile-content-info">
<span class="sdc-tile-info-line title">Router</span>
<div class="sdc-tile-info-line subtitle">test</div>
</div>
</sdc-tile-content>
<sdc-tile-footer>
<span class="sdc-tile-footer-cell">Footer</span>
</sdc-tile-footer>
</sdc-tile>
`
}
},
{ notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
}
)
}
|
