Skip to content

Commit aade9df

Browse files
brandyscarneybrandyscarney
committed
test(accordion-group): add expand and states tests
1 parent 62231be commit aade9df

File tree

2 files changed

+224
-0
lines changed

2 files changed

+224
-0
lines changed

‎core/src/components/accordion-group/test/expand/index.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Accordion Group - Expand</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
7+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
8+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
9+
<script src="../../../../../scripts/testing/scripts.js"></script>
10+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
11+
<style>
12+
.grid {
13+
display: grid;
14+
grid-template-columns: repeat(2, 1fr);
15+
grid-row-gap: 20px;
16+
grid-column-gap: 20px;
17+
}
18+
h2 {
19+
font-size: 12px;
20+
font-weight: normal;
21+
22+
color: #6f7378;
23+
24+
margin-top: 10px;
25+
margin-left: 5px;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<ion-app>
32+
<ion-header translucent="true">
33+
<ion-toolbar>
34+
<ion-title>Accordion Group - Expand</ion-title>
35+
</ion-toolbar>
36+
</ion-header>
37+
<ion-content fullscreen="true" color="light">
38+
<div class="grid ion-padding">
39+
<div class="grid-item">
40+
<h2>Default</h2>
41+
<ion-accordion-group>
42+
<ion-accordion value="first">
43+
<ion-item slot="header">
44+
<ion-label>Accordion title</ion-label>
45+
</ion-item>
46+
<div slot="content">This is the body of the accordion.</div>
47+
</ion-accordion>
48+
<ion-accordion value="second">
49+
<ion-item slot="header">
50+
<ion-label>Accordion title</ion-label>
51+
</ion-item>
52+
<div slot="content">This is the body of the accordion.</div>
53+
</ion-accordion>
54+
<ion-accordion value="third">
55+
<ion-item slot="header">
56+
<ion-label>Accordion title</ion-label>
57+
</ion-item>
58+
<div slot="content">This is the body of the accordion.</div>
59+
</ion-accordion>
60+
</ion-accordion-group>
61+
</div>
62+
<div class="grid-item">
63+
<h2>Default: Expanded</h2>
64+
<ion-accordion-group value="first">
65+
<ion-accordion value="first">
66+
<ion-item slot="header">
67+
<ion-label>Accordion title</ion-label>
68+
</ion-item>
69+
<div slot="content">This is the body of the accordion.</div>
70+
</ion-accordion>
71+
<ion-accordion value="second">
72+
<ion-item slot="header">
73+
<ion-label>Accordion title</ion-label>
74+
</ion-item>
75+
<div slot="content">This is the body of the accordion.</div>
76+
</ion-accordion>
77+
<ion-accordion value="third">
78+
<ion-item slot="header">
79+
<ion-label>Accordion title</ion-label>
80+
</ion-item>
81+
<div slot="content">This is the body of the accordion.</div>
82+
</ion-accordion>
83+
</ion-accordion-group>
84+
</div>
85+
<div class="grid-item">
86+
<h2>Inset</h2>
87+
<ion-accordion-group expand="inset">
88+
<ion-accordion value="first">
89+
<ion-item slot="header">
90+
<ion-label>Accordion title</ion-label>
91+
</ion-item>
92+
<div slot="content">This is the body of the accordion.</div>
93+
</ion-accordion>
94+
<ion-accordion value="second">
95+
<ion-item slot="header">
96+
<ion-label>Accordion title</ion-label>
97+
</ion-item>
98+
<div slot="content">This is the body of the accordion.</div>
99+
</ion-accordion>
100+
<ion-accordion value="third">
101+
<ion-item slot="header">
102+
<ion-label>Accordion title</ion-label>
103+
</ion-item>
104+
<div slot="content">This is the body of the accordion.</div>
105+
</ion-accordion>
106+
</ion-accordion-group>
107+
</div>
108+
<div class="grid-item">
109+
<h2>Inset: Expanded</h2>
110+
<ion-accordion-group value="first" expand="inset">
111+
<ion-accordion value="first">
112+
<ion-item slot="header">
113+
<ion-label>Accordion title</ion-label>
114+
</ion-item>
115+
<div slot="content">This is the body of the accordion.</div>
116+
</ion-accordion>
117+
<ion-accordion value="second">
118+
<ion-item slot="header">
119+
<ion-label>Accordion title</ion-label>
120+
</ion-item>
121+
<div slot="content">This is the body of the accordion.</div>
122+
</ion-accordion>
123+
<ion-accordion value="third">
124+
<ion-item slot="header">
125+
<ion-label>Accordion title</ion-label>
126+
</ion-item>
127+
<div slot="content">This is the body of the accordion.</div>
128+
</ion-accordion>
129+
</ion-accordion-group>
130+
</div>
131+
</div>
132+
</ion-content>
133+
</ion-app>
134+
</body>
135+
</html>

‎core/src/components/accordion-group/test/states/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Accordion Group - States</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
7+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
8+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
9+
<script src="../../../../../scripts/testing/scripts.js"></script>
10+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
11+
<style>
12+
.grid {
13+
display: grid;
14+
grid-template-columns: repeat(3, 1fr);
15+
grid-row-gap: 20px;
16+
grid-column-gap: 20px;
17+
}
18+
h2 {
19+
font-size: 12px;
20+
font-weight: normal;
21+
22+
color: #6f7378;
23+
24+
margin-top: 10px;
25+
margin-left: 5px;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<ion-app>
32+
<ion-header translucent="true">
33+
<ion-toolbar>
34+
<ion-title>Accordion Group - States</ion-title>
35+
</ion-toolbar>
36+
</ion-header>
37+
<ion-content fullscreen="true" color="light">
38+
<div class="grid ion-padding">
39+
<div class="grid-item">
40+
<h2>Default</h2>
41+
<ion-accordion-group value="first">
42+
<ion-accordion value="first">
43+
<ion-item slot="header">
44+
<ion-label>Accordion title</ion-label>
45+
</ion-item>
46+
<div slot="content">This is the body of the accordion.</div>
47+
</ion-accordion>
48+
<ion-accordion value="second">
49+
<ion-item slot="header">
50+
<ion-label>Accordion title</ion-label>
51+
</ion-item>
52+
<div slot="content">This is the body of the accordion.</div>
53+
</ion-accordion>
54+
<ion-accordion value="third">
55+
<ion-item slot="header">
56+
<ion-label>Accordion title</ion-label>
57+
</ion-item>
58+
<div slot="content">This is the body of the accordion.</div>
59+
</ion-accordion>
60+
</ion-accordion-group>
61+
</div>
62+
<div class="grid-item">
63+
<h2>Disabled</h2>
64+
<ion-accordion-group value="first" disabled="true">
65+
<ion-accordion value="first">
66+
<ion-item slot="header">
67+
<ion-label>Accordion title</ion-label>
68+
</ion-item>
69+
<div slot="content">This is the body of the accordion.</div>
70+
</ion-accordion>
71+
<ion-accordion value="second">
72+
<ion-item slot="header">
73+
<ion-label>Accordion title</ion-label>
74+
</ion-item>
75+
<div slot="content">This is the body of the accordion.</div>
76+
</ion-accordion>
77+
<ion-accordion value="third">
78+
<ion-item slot="header">
79+
<ion-label>Accordion title</ion-label>
80+
</ion-item>
81+
<div slot="content">This is the body of the accordion.</div>
82+
</ion-accordion>
83+
</ion-accordion-group>
84+
</div>
85+
</div>
86+
</ion-content>
87+
</ion-app>
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)