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
|
import { experimentOn } from '@islavi/ng2-component-lab';
import {Placement} from "../../src/angular/common/enums";
/**************************************************
* Adding custom styles for example
*************************************************/
const style = document.createElement('style');
style.innerHTML = `
.sdc-accordion-custom-class .sdc-accordion-header,
.sdc-accordion-custom-class .sdc-accordion-body.open {
padding: 10px;
border-radius: 3px;
}
.sdc-accordion-custom-class .sdc-accordion-header {
background-color: #d2d2d2;
}
.sdc-accordion-custom-class .sdc-accordion-body.open {
border: 1px solid #d2d2d2;
margin-top: 1px;
}
`;
const head = document.getElementsByTagName('head');
head[0].appendChild(style);
export default experimentOn('Accordion').group('Accordion',
[
{
id: 'simpleAccodion',
title: 'Simple accordion',
description: 'Example of accordion with default left arrow',
showSource: true,
template: `
<sdc-accordion title="Accordion header">
<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>
`
},
{
id: 'accordionRightArrow',
title: 'Accordion with right arrow',
description: 'Example of accordion with right arrow',
showSource: true,
context: {
arrowDirection: Placement.right,
},
template: `
<sdc-accordion
title="Accordion header"
[arrow-direction]="arrowDirection">
<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>
`
},
{
id: 'accordionRightArrowStyle',
title: 'Accordion with right arrow and custom style',
description: 'Example of accordion with right arrow and custom style',
showSource: true,
context: {
arrowDirection: Placement.right,
},
template: `
<sdc-accordion
title="Accordion header"
css-class="sdc-accordion-custom-class"
[arrow-direction]="arrowDirection">
<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>
`
}
,
{
id: 'accordionLeftArrowStyle',
title: 'Accordion with left arrow and custom style',
description: 'Example of accordion with left arrow and custom style',
showSource: true,
context: {
arrowDirection: Placement.left,
},
template: `
<sdc-accordion
title="Accordion header"
css-class="sdc-accordion-custom-class"
[arrow-direction]="arrowDirection">
<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>
`
},
{
id: 'accordionLeftArrowStyleOpen',
title: 'Open accordion with left arrow and custom style',
description: 'Example of open accordion with left arrow and custom style',
showSource: true,
context: {
arrowDirection: Placement.left,
},
template: `
<sdc-accordion
title="Accordion header"
css-class="sdc-accordion-custom-class"
[open]="true"
[arrow-direction]="arrowDirection">
<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>
`
}
]);
|
