Skip to content

Commit 48184e4

Browse files
jhosefmarksjhosefmarks
committed
feat(accordion): cria o componente
Cria o novo componente `po-accordion`, para o usuário poder agrupar visualmente uma lista de conteúdos, mostrando-os individualmente ao clicar no título de cada item. Fixes DTHFUI-798
1 parent 902ec35 commit 48184e4

File tree

8 files changed

+264
-0
lines changed

8 files changed

+264
-0
lines changed

‎src/app/components.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
[
22
{"path": "#", "title": "Components", "subItems":
33
[
4+
{ "path": "./css/components/po-accordion/po-accordion.html", "title": "Po Accordion" },
45
{ "path": "./css/components/po-avatar/po-avatar.html", "title": "Po Avatar" },
56
{ "path": "./css/components/po-breadcrumb/po-breadcrumb.html", "title": "Po Breadcrumb" },
67
{ "path": "./css/components/po-button/po-button.html", "title": "Po Button" },

‎src/css/components/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
@import './../commons';
33

4+
@import './po-accordion';
45
@import './po-avatar';
56
@import './po-badge';
67
@import './po-breadcrumb';

‎src/css/components/po-accordion/index.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import './po-accordion-item-body.css';
2+
@import './po-accordion-item-header.css';
3+
@import './po-accordion.css';

‎src/css/components/po-accordion/po-accordion-item-body.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root {
2+
--font-accordion-item-body-font: {
3+
@apply --font-text-large;
4+
}
5+
}
6+
7+
.po-accordion-item-body {
8+
@apply --font-accordion-item-body-font;
9+
color: var(--color-accordion-item-body-color);
10+
/* necessario para animacao funcionar corretamente no IE/safari */
11+
overflow-y: hidden;
12+
}
13+
14+
.po-accordion-item-body-content {
15+
padding: 8px 16px;
16+
}

‎src/css/components/po-accordion/po-accordion-item-header.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
:root {
2+
3+
--font-accordion-header-font-button: {
4+
@apply --font-text-large-bold;
5+
}
6+
7+
--font-accordion-header-font-size-icon: 24px;
8+
}
9+
10+
.po-accordion-item-header {
11+
margin: 0;
12+
padding: 8px 0;
13+
position: relative;
14+
}
15+
16+
.po-accordion-item-header-title {
17+
margin-right: 24px;
18+
}
19+
20+
.po-accordion-item:not(:first-child) .po-accordion-item-header {
21+
border-top: 1px solid var(--color-accordion-item-border-color);
22+
}
23+
24+
.po-accordion-item-header-button,
25+
.po-accordion-item-header-icon {
26+
color: var(--color-accordion-header-color-primary);
27+
}
28+
29+
.po-accordion-item-header:hover .po-accordion-item-header-button,
30+
.po-accordion-item-header:hover .po-accordion-item-header-icon {
31+
color: var(--color-accordion-header-color-hover);
32+
}
33+
34+
.po-accordion-item-header-button {
35+
@apply --font-accordion-header-font-button;
36+
background-color: var(--color-accordion-item-header-button-background-color);
37+
border: none;
38+
max-width: 100vw;
39+
outline: 0;
40+
padding: 8px 8px 8px 16px;
41+
text-align: left;
42+
width: 100%;
43+
}
44+
45+
/* outline para compatibilidade com os demais navegadores */
46+
.po-accordion-item-header-button:focus:before {
47+
border-radius: 1px;
48+
border: 2px dashed var(--color-accordion-item-header-button-focus);
49+
box-sizing: border-box;
50+
content: "";
51+
height: calc(100% + 11px);
52+
left: -6px;
53+
position: absolute;
54+
top: -6px;
55+
width: calc(100% + 11px);
56+
}
57+
58+
/* remove a borda interna nativa do botão no firefox */
59+
.po-accordion-item-header-button::-moz-focus-inner {
60+
border: 0;
61+
}
62+
63+
.po-accordion-item-header-icon {
64+
font-size: var(--font-accordion-header-font-size-icon);
65+
position: absolute;
66+
right: 8px;
67+
top: 18px;
68+
}
69+
70+
.po-accordion-item-header-icon {
71+
transform: rotate(0deg);
72+
transition: all .3s cubic-bezier(.07,.88,.58,.92);
73+
}
74+
75+
.po-accordion-item-active .po-accordion-item-header-icon {
76+
transform: rotate(180deg);
77+
}

‎src/css/components/po-accordion/po-accordion.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.po-accordion {
2+
overflow-y: visible !important;
3+
}

‎src/css/components/po-accordion/po-accordion.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<style>
2+
.container {
3+
padding: 16px 64px 16px 16px;
4+
}
5+
</style>
6+
7+
<article>
8+
<section>
9+
<div class="container">
10+
<h4>Accordion</h4>
11+
<br>
12+
13+
<div class="po-accordion po-container po-container-no-padding">
14+
<!-- INICIO DO ITEM -->
15+
<section class="po-accordion-item">
16+
<header class="po-accordion-item-header">
17+
<button class="po-accordion-item-header-button po-clickable" autofocus>
18+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 1</div>
19+
<span class="po-icon po-icon-arrow-down po-accordion-item-header-icon"></span>
20+
</button>
21+
</header>
22+
</section>
23+
<!-- FIM ITEM -->
24+
25+
<!-- INICIO DO ITEM -->
26+
<section class="po-accordion-item">
27+
<header class="po-accordion-item-header">
28+
<button class="po-accordion-item-header-button po-clickable">
29+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 2</div>
30+
<span class="po-icon po-icon-arrow-up po-accordion-item-header-icon"></span>
31+
</button>
32+
</header>
33+
<div class="po-accordion-item-body">
34+
<div class="po-accordion-item-body-content">
35+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
36+
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
37+
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
38+
squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
39+
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
40+
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
41+
nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
42+
</div>
43+
</div>
44+
</section>
45+
<!-- FIM ITEM -->
46+
47+
<!-- INICIO DO ITEM -->
48+
<section class="po-accordion-item">
49+
<header class="po-accordion-item-header">
50+
<button class="po-accordion-item-header-button po-clickable">
51+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 3</div>
52+
<span class="po-icon po-icon-arrow-down po-accordion-item-header-icon"></span>
53+
</button>
54+
</header>
55+
</section>
56+
<!-- FIM ITEM -->
57+
58+
<!-- INICIO DO ITEM -->
59+
<section class="po-accordion-item">
60+
<header class="po-accordion-item-header">
61+
<button class="po-accordion-item-header-button po-clickable">
62+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 4</div>
63+
<span class="po-icon po-icon-arrow-down po-accordion-item-header-icon"></span>
64+
</button>
65+
</header>
66+
</section>
67+
<!-- FIM ITEM -->
68+
</div>
69+
</div>
70+
</section>
71+
72+
<section>
73+
<div class="container">
74+
<h4>Accordion com item ativo</h4>
75+
<br>
76+
77+
<div class="po-accordion po-container po-container-no-padding">
78+
<!-- INICIO DO ITEM -->
79+
<section class="po-accordion-item">
80+
<header class="po-accordion-item-header">
81+
<button class="po-accordion-item-header-button po-clickable">
82+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 1</div>
83+
<span class="po-icon po-icon-arrow-down po-accordion-item-header-icon"></span>
84+
</button>
85+
</header>
86+
</section>
87+
<!-- FIM ITEM -->
88+
89+
<!-- INICIO DO ITEM -->
90+
<section class="po-accordion-item">
91+
<header class="po-accordion-item-header">
92+
<button class="po-accordion-item-header-button po-clickable">
93+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 2</div>
94+
<span class="po-icon po-icon-arrow-up po-accordion-item-header-icon"></span>
95+
</button>
96+
</header>
97+
<div class="po-accordion-item-body">
98+
<div class="po-accordion-item-body-content">
99+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
100+
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
101+
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
102+
squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
103+
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
104+
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
105+
nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
106+
</div>
107+
</div>
108+
</section>
109+
<!-- FIM ITEM -->
110+
111+
<!-- INICIO DO ITEM -->
112+
<section class="po-accordion-item">
113+
<header class="po-accordion-item-header">
114+
<button class="po-accordion-item-header-button po-clickable">
115+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 3</div>
116+
<span class="po-icon po-icon-arrow-down po-accordion-item-header-icon"></span>
117+
</button>
118+
</header>
119+
</section>
120+
<!-- FIM ITEM -->
121+
122+
<!-- INICIO DO ITEM -->
123+
<section class="po-accordion-item">
124+
<header class="po-accordion-item-header">
125+
<button class="po-accordion-item-header-button po-clickable">
126+
<div class="po-text-ellipsis po-accordion-item-header-title">Item 4</div>
127+
<span class="po-icon po-icon-arrow-down po-accordion-item-header-icon"></span>
128+
</button>
129+
</header>
130+
</section>
131+
<!-- FIM ITEM -->
132+
</div>
133+
</div>
134+
</section>
135+
</article>

‎src/css/themes/po-theme-default.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
* Commons.....................variáveis do Commons / Genéricas.
1111
*
1212
* COMPONENTS
13+
* Accordion......................variáveis do Accordion.
1314
* Avatar......................variáveis do Avatar.
1415
* Button......................variáveis do Button.
1516
* Badge.......................variáveis do Badge.
@@ -227,6 +228,33 @@
227228
COMPONENTS
228229
\*------------------------------------*/
229230
:root {
231+
/*------------------------------------*\
232+
ACCORDION
233+
\*------------------------------------*/
234+
235+
/**
236+
* Accordion Item
237+
*/
238+
--color-accordion-item-border-color: var(--color-neutral-light-90);
239+
240+
/**
241+
* Accordion Item Header
242+
*/
243+
--color-accordion-header-button-background-color: var(--color-white);
244+
--color-accordion-header-color-primary: var(--color-primary);
245+
--color-accordion-header-color-hover: var(--color-secondary);
246+
247+
/**
248+
* Accordion Item Header Button
249+
*/
250+
--color-accordion-item-header-button-background-color: var(--color-transparent);
251+
--color-accordion-item-header-button-focus: var(--color-secondary);
252+
253+
/**
254+
* Accordion Item Body
255+
*/
256+
--color-accordion-item-body-color: var(--color-neutral);
257+
230258
/*------------------------------------*\
231259
AVATAR
232260
\*------------------------------------*/

0 commit comments

Comments
 (0)