@1024pix/pix-ui 26.1.0 → 27.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
<div class="pix-collapsible
|
|
1
|
+
<div class="pix-collapsible">
|
|
2
2
|
|
|
3
3
|
<button
|
|
4
|
+
class="pix-collapsible__title"
|
|
4
5
|
type="button"
|
|
5
6
|
{{on "click" this.toggleCollapsible}}
|
|
6
|
-
class="pix-collapsible__title {{if this.isUnCollapsed 'pix-collapsible__title--uncollapsed'}}"
|
|
7
7
|
aria-controls={{this.contentId}}
|
|
8
8
|
aria-expanded={{if this.isUnCollapsed "true" "false"}}
|
|
9
9
|
...attributes
|
|
10
10
|
>
|
|
11
|
-
<span class="pix-collapsible-
|
|
11
|
+
<span class="pix-collapsible-title__label">
|
|
12
12
|
{{#if @titleIcon}}
|
|
13
|
-
<FaIcon @icon={{@titleIcon}}
|
|
13
|
+
<FaIcon class="pix-collapsible-title__icon" @icon={{@titleIcon}} />
|
|
14
14
|
{{/if}}
|
|
15
15
|
|
|
16
16
|
{{#if (has-block "title")}}
|
|
@@ -21,19 +21,16 @@
|
|
|
21
21
|
</span>
|
|
22
22
|
|
|
23
23
|
<FaIcon
|
|
24
|
-
@icon="{{if this.isCollapsed 'plus' 'minus'}}"
|
|
25
24
|
class="pix-collapsible-title__toggle-icon"
|
|
25
|
+
@icon="{{if this.isCollapsed 'chevron-down' 'chevron-up'}}"
|
|
26
26
|
/>
|
|
27
27
|
</button>
|
|
28
28
|
|
|
29
29
|
<div
|
|
30
30
|
id={{this.contentId}}
|
|
31
|
+
class="pix-collapsible__content"
|
|
31
32
|
aria-hidden={{if this.isCollapsed "true" "false"}}
|
|
32
|
-
class="pix-collapsible__content
|
|
33
|
-
{{if this.isUnCollapsed ' pix-collapsible__content--uncollapse'}}"
|
|
34
33
|
>
|
|
35
|
-
{{
|
|
36
|
-
{{yield}}
|
|
37
|
-
{{/if}}
|
|
34
|
+
{{yield}}
|
|
38
35
|
</div>
|
|
39
36
|
</div>
|
|
@@ -14,10 +14,6 @@ export default class PixCollapsible extends Component {
|
|
|
14
14
|
return !this.isCollapsed;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
get isContentRendered() {
|
|
18
|
-
return this.hasUnCollapsedOnce;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
17
|
get title() {
|
|
22
18
|
if (!this.args.title || !this.args.title.trim()) {
|
|
23
19
|
throw new Error('ERROR in PixCollapsible component, @title param is not provided');
|
|
@@ -1,95 +1,78 @@
|
|
|
1
1
|
.pix-collapsible {
|
|
2
|
-
width: 100%;
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
font-family: $font-roboto;
|
|
6
|
-
font-size: 1rem;
|
|
7
2
|
border: 1px solid $pix-neutral-20;
|
|
8
|
-
padding: 0;
|
|
9
|
-
cursor: pointer;
|
|
10
3
|
background-color: $pix-neutral-0;
|
|
11
4
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
display: flex;
|
|
17
|
-
justify-content: space-between;
|
|
18
|
-
background: transparent;
|
|
19
|
-
border: none;
|
|
20
|
-
color: $pix-neutral-60;
|
|
21
|
-
font-size: 1rem;
|
|
22
|
-
align-items: center;
|
|
23
|
-
|
|
24
|
-
&:hover {
|
|
25
|
-
background-color: $pix-neutral-10;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&:focus {
|
|
29
|
-
background-color: $pix-neutral-10;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&--uncollapsed {
|
|
33
|
-
background-color: $pix-neutral-10;
|
|
34
|
-
}
|
|
5
|
+
&:first-child,
|
|
6
|
+
&:first-child .pix-collapsible__title {
|
|
7
|
+
border-top-left-radius: 0.5rem;
|
|
8
|
+
border-top-right-radius: 0.5rem;
|
|
35
9
|
}
|
|
36
10
|
|
|
37
|
-
|
|
11
|
+
&:last-child,
|
|
12
|
+
&:last-child .pix-collapsible__title:not([aria-expanded='true']) {
|
|
13
|
+
border-bottom-left-radius: 0.5rem;
|
|
14
|
+
border-bottom-right-radius: 0.5rem;
|
|
15
|
+
}
|
|
38
16
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
17
|
+
&:not(:first-child) {
|
|
18
|
+
border-top: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
44
21
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
22
|
+
.pix-collapsible__title {
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
align-items: center;
|
|
26
|
+
width: 100%;
|
|
27
|
+
padding: $spacing-s;
|
|
28
|
+
border: none;
|
|
29
|
+
color: $pix-neutral-90;
|
|
30
|
+
font-size: 1rem;
|
|
31
|
+
line-height: 1.25;
|
|
49
32
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
33
|
+
&:hover,
|
|
34
|
+
&:focus,
|
|
35
|
+
&[aria-expanded='true'] {
|
|
36
|
+
background-color: $pix-neutral-10;
|
|
54
37
|
}
|
|
55
38
|
|
|
56
|
-
&
|
|
57
|
-
|
|
58
|
-
display: none;
|
|
59
|
-
|
|
60
|
-
&--uncollapse {
|
|
61
|
-
display: initial;
|
|
62
|
-
}
|
|
39
|
+
&[aria-expanded='true'] {
|
|
40
|
+
border-bottom: 1px solid $pix-neutral-20;
|
|
63
41
|
}
|
|
64
42
|
}
|
|
65
43
|
|
|
66
|
-
.pix-collapsible
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
44
|
+
.pix-collapsible-title {
|
|
45
|
+
&__container {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
flex-grow: 1;
|
|
49
|
+
}
|
|
70
50
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
51
|
+
&__icon {
|
|
52
|
+
margin-right: $spacing-xs;
|
|
53
|
+
color: $pix-neutral-50;
|
|
54
|
+
}
|
|
75
55
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
56
|
+
&__toggle-icon {
|
|
57
|
+
width: 1rem;
|
|
58
|
+
height: 1rem;
|
|
59
|
+
padding: 0.5rem;
|
|
60
|
+
margin-left: $spacing-xs;
|
|
61
|
+
border-radius: 50%;
|
|
62
|
+
}
|
|
81
63
|
}
|
|
82
64
|
|
|
83
|
-
.pix-
|
|
84
|
-
|
|
65
|
+
.pix-collapsible__title:hover .pix-collapsible-title__toggle-icon {
|
|
66
|
+
background-color: $pix-neutral-20;
|
|
85
67
|
}
|
|
86
68
|
|
|
87
|
-
.pix-
|
|
88
|
-
|
|
89
|
-
|
|
69
|
+
.pix-collapsible__content {
|
|
70
|
+
padding: $spacing-s;
|
|
71
|
+
font-size: 0.875rem;
|
|
72
|
+
line-height: 1.25rem;
|
|
73
|
+
color: $pix-neutral-60;
|
|
90
74
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
border-top: none;
|
|
75
|
+
&[aria-hidden='true'] {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
95
78
|
}
|