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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
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 } from '../../src/angular/components';
import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
const positions = ['right', 'left'];
storiesOf('Accordion', module)
.addDecorator(withKnobs)
.addDecorator(withNotes)
.addDecorator(
moduleMetadata({
declarations: [AccordionComponent],
imports: [
SvgIconModule
]
})
)
.add('Simple accordion', () => {
const _title = text('title', 'Accordion header');
return {
props: {
_title
},
template: `
<sdc-accordion [title]="_title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor.
Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus.
Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu.
Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim.
Nam orci diam, mattis eget leo vel, tincidunt interdum dui.
Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
</p>
</sdc-accordion>
`
}})
.add('Accordion arrow position', () => {
const _title = text('title', 'Accordion header');
const _arrow_direction = select('arrow-direction', positions, 'left', '');
return {
props: {
_title, _arrow_direction
},
template: `
<sdc-accordion
[title]="_title"
[arrow-direction]="_arrow_direction"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor.
Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus.
Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu.
Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim.
Nam orci diam, mattis eget leo vel, tincidunt interdum dui.
Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
</p>
</sdc-accordion>
`
}})
.add('Accordion custom class', () => {
const _title = text('title', 'Accordion header');
const _arrow_direction = select('arrow-direction', positions, 'left', '');
const _css_class = text('css_class', 'sdc-accordion-custom-class');
return {
props: {
_title, _arrow_direction, _css_class
},
template: `
<sdc-accordion
[title]="_title"
[arrow-direction]="_arrow_direction"
[css-class]="_css_class"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor.
Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus.
Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu.
Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim.
Nam orci diam, mattis eget leo vel, tincidunt interdum dui.
Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
</p>
</sdc-accordion>
`
}})
.add('Accordion open', () => {
const _title = text('title', 'Accordion header');
const _arrow_direction = select('arrow-direction', positions, 'left', '');
const _css_class = text('css_class', 'custom-class');
const _open = boolean('open', true, '');
return {
props: {
_title, _arrow_direction, _css_class, _open
},
template: `
<sdc-accordion
[title]="_title"
[arrow-direction]="_arrow_direction"
[css-class]="_css_class"
[open]="_open"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor.
Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus.
Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu.
Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim.
Nam orci diam, mattis eget leo vel, tincidunt interdum dui.
Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
</p>
</sdc-accordion>
`
}})
.add('Accordion full', () => {
const _title = text('title', 'Accordion header');
const _arrow_direction = select('arrow-direction', positions, 'left', '');
const _css_class = text('css_class', 'custom-class');
const _open = boolean('open', true, '');
const _accordionChanged = text('(accordionChanged)', 'Accoridon changed event (see in action tab), ');
return {
props: {
accordionChanged: action('Accordion changed event '),
_title, _arrow_direction, _css_class, _open
},
template: `
<sdc-accordion
[title]="_title"
[arrow-direction]="_arrow_direction"
[css-class]="_css_class"
[open]="_open"
(accordionChanged)="accordionChanged($event)"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor.
Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus.
Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu.
Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim.
Nam orci diam, mattis eget leo vel, tincidunt interdum dui.
Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
</p>
</sdc-accordion>
`
}});
|
