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
|
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 { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
import { ModalModule } from '../../src/angular/modals/modal.module';
import { ModalConsumerComponent } from './helpers/modal-consumer.component';
import { ModalService } from '../../src/angular/services';
import { ButtonsModule } from '../../src/angular/buttons/buttons.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
let stories = storiesOf('Modal', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [
ModalConsumerComponent
],
imports: [
ModalModule,
FormElementsModule,
ButtonsModule,
BrowserAnimationsModule
],
providers: [
ModalService
]
})
)
const modalTypes = ['Info', 'Warning', 'Error', 'Success'];
modalTypes.forEach((buttonType) => {
stories.add('Modal' + buttonType, () => {
return {
props: {
openModal: action('Modal opened (see in action logger tab)'),
buttonType
},
template:
`<b> ${buttonType} Modal</b><br><br>
<modal-consumer [action]="'open' + this.buttonType +'Modal'"></modal-consumer>`
};
},
{ notes: `<h2>` + buttonType + ` modal</h2>
When click on view model ` + buttonType + ` model will open`+
`<br>Source Code:` +
`<br><b>this.modalService.open`+ buttonType + `Modal('`+ buttonType + ` modal title', '`+ buttonType +
` modal content', '`+ buttonType + `ModalTestId');</b>`+
`<br>Use the KNOBS tab to change values.`
}
);
});
|
