@1024pix/pix-ui 60.11.0 → 60.12.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.
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { MODAL_VARIANTS } from '@1024pix/pix-ui/helpers/variants';
|
|
2
|
+
import Component from '@glimmer/component';
|
|
3
|
+
|
|
4
|
+
import PixIcon from './pix-icon';
|
|
5
|
+
import PixIconButton from './pix-icon-button';
|
|
6
|
+
|
|
7
|
+
export default class PixModalHeader extends Component {
|
|
8
|
+
get variant() {
|
|
9
|
+
if (this.args.variant && !MODAL_VARIANTS.includes(this.args.variant)) {
|
|
10
|
+
throw new Error(
|
|
11
|
+
`ERROR in PixModal component: @variant should be one of ${MODAL_VARIANTS.join(', ')}`,
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const value = this.args.variant ?? 'default';
|
|
16
|
+
|
|
17
|
+
return value;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
<template>
|
|
21
|
+
<div class="pix-modal-header pix-modal-header--{{this.variant}}">
|
|
22
|
+
<section class="pix-modal-header__title-section">
|
|
23
|
+
{{#if @iconName}}
|
|
24
|
+
<div
|
|
25
|
+
class="pix-modal-header__icon-container pix-modal-header__icon-container--{{this.variant}}"
|
|
26
|
+
>
|
|
27
|
+
<PixIcon @name={{@iconName}} @plainIcon={{@plainIcon}} @ariaHidden={{true}} />
|
|
28
|
+
</div>
|
|
29
|
+
{{/if}}
|
|
30
|
+
<div>
|
|
31
|
+
<h1 id={{@id}} class="pix-modal-header__title">{{@title}}</h1>
|
|
32
|
+
{{#if @subtitle}}
|
|
33
|
+
<p title={{@subtitle}} class="pix-modal-header__subtitle">{{@subtitle}}</p>
|
|
34
|
+
{{/if}}
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<PixIconButton
|
|
40
|
+
@iconName="close"
|
|
41
|
+
@triggerAction={{@onCloseButtonClick}}
|
|
42
|
+
@ariaLabel="Fermer"
|
|
43
|
+
@size="small"
|
|
44
|
+
@withBackground={{true}}
|
|
45
|
+
class="pix-modal-header__close-button"
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
</template>
|
|
49
|
+
}
|
|
@@ -2,7 +2,7 @@ import { MODAL_VARIANTS } from '@1024pix/pix-ui/helpers/variants';
|
|
|
2
2
|
import { guidFor } from '@ember/object/internals';
|
|
3
3
|
import Component from '@glimmer/component';
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import PixModalHeader from './pix-modal-header';
|
|
6
6
|
import PixOverlay from './pix-overlay';
|
|
7
7
|
|
|
8
8
|
export default class PixModal extends Component {
|
|
@@ -45,17 +45,16 @@ export default class PixModal extends Component {
|
|
|
45
45
|
aria-modal="true"
|
|
46
46
|
...attributes
|
|
47
47
|
>
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</div>
|
|
48
|
+
<PixModalHeader
|
|
49
|
+
@id="modal-title--{{this.id}}"
|
|
50
|
+
@title={{@title}}
|
|
51
|
+
@subtitle={{@subtitle}}
|
|
52
|
+
@variant={{this.variant}}
|
|
53
|
+
@iconName={{@iconName}}
|
|
54
|
+
@plainIcon={{@plainIcon}}
|
|
55
|
+
@onCloseButtonClick={{@onCloseButtonClick}}
|
|
56
|
+
/>
|
|
57
|
+
|
|
59
58
|
<div id="modal-content--{{this.id}}" class="pix-modal__content">
|
|
60
59
|
{{yield to="content"}}
|
|
61
60
|
</div>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
@use 'pix-design-tokens/breakpoints';
|
|
2
|
+
@use 'pix-design-tokens/typography';
|
|
3
|
+
@use 'pix-design-tokens/shadows';
|
|
4
|
+
|
|
5
|
+
.pix-modal-header {
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: flex-start;
|
|
8
|
+
justify-content: space-between;
|
|
9
|
+
padding: var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-6x);
|
|
10
|
+
color: var(--pix-neutral-900);
|
|
11
|
+
border-top-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
|
|
12
|
+
border-top-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
|
|
13
|
+
|
|
14
|
+
&--default {
|
|
15
|
+
background: var(--pix-gradient-default-light);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&--orga {
|
|
19
|
+
background: var(--pix-gradient-orga-light);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&--certif {
|
|
23
|
+
background: var(--pix-gradient-certif-light);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&__title-section {
|
|
27
|
+
display: flex;
|
|
28
|
+
gap: var(--pix-spacing-4x);
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&__icon-container {
|
|
33
|
+
display: none;
|
|
34
|
+
|
|
35
|
+
@include breakpoints.device-is('tablet') {
|
|
36
|
+
display: flex;
|
|
37
|
+
gap: var(--pix-spacing-2x);
|
|
38
|
+
align-items: center;
|
|
39
|
+
padding: var(--pix-spacing-3x);
|
|
40
|
+
color: var(--pix-neutral-800);
|
|
41
|
+
border-radius: var(--radius-full, 100px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&--default {
|
|
45
|
+
background-color: rgba(var(--pix-primary-100-inline), 0.7);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&--orga {
|
|
49
|
+
background-color: rgba(var(--pix-orga-500-inline), 0.25);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&--certif {
|
|
53
|
+
background-color: rgba(var(--pix-certif-500-inline), 0.25);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&__close-button {
|
|
58
|
+
flex-shrink: 0;
|
|
59
|
+
margin-top: calc(var(--pix-spacing-1x) * -1);
|
|
60
|
+
|
|
61
|
+
@include breakpoints.device-is('tablet') {
|
|
62
|
+
width: var(--pix-spacing-10x);
|
|
63
|
+
height: var(--pix-spacing-10x);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&__title {
|
|
68
|
+
@extend %pix-title-xs;
|
|
69
|
+
|
|
70
|
+
margin-bottom: 0;
|
|
71
|
+
padding-right: var(--pix-spacing-8x) + var(--pix-spacing-2x);
|
|
72
|
+
color: var(--pix-neutral-900);
|
|
73
|
+
|
|
74
|
+
@include breakpoints.device-is('tablet') {
|
|
75
|
+
padding-right: var(--pix-spacing-10x) + var(--pix-spacing-2x);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&__subtitle {
|
|
80
|
+
@extend %pix-body-s;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
1
|
+
@use 'pix-design-tokens/breakpoints';
|
|
2
|
+
@use 'pix-design-tokens/typography';
|
|
3
|
+
@use 'pix-design-tokens/shadows';
|
|
4
4
|
|
|
5
5
|
.pix-modal {
|
|
6
6
|
position: relative;
|
|
@@ -23,56 +23,12 @@
|
|
|
23
23
|
@extend %pix-shadow-certif;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
&__header {
|
|
27
|
-
display: flex;
|
|
28
|
-
align-items: flex-start;
|
|
29
|
-
justify-content: space-between;
|
|
30
|
-
padding: var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-6x);
|
|
31
|
-
color: var(--pix-neutral-900);
|
|
32
|
-
border-top-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
|
|
33
|
-
border-top-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
|
|
34
|
-
|
|
35
|
-
&--default {
|
|
36
|
-
background: var(--pix-gradient-default-light);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&--orga {
|
|
40
|
-
background: var(--pix-gradient-orga-light);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&--certif {
|
|
44
|
-
background: var(--pix-gradient-certif-light);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
&__close-button {
|
|
49
|
-
flex-shrink: 0;
|
|
50
|
-
margin-top: -4px;
|
|
51
|
-
|
|
52
|
-
@include breakpoints.device-is('tablet') {
|
|
53
|
-
width: var(--pix-spacing-10x);
|
|
54
|
-
height: var(--pix-spacing-10x);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&__title {
|
|
59
|
-
@extend %pix-title-xs;
|
|
60
|
-
|
|
61
|
-
margin-bottom: 0;
|
|
62
|
-
padding-right: var(--pix-spacing-8x) + var(--pix-spacing-2x);
|
|
63
|
-
color: var(--pix-neutral-900);
|
|
64
|
-
|
|
65
|
-
@include breakpoints.device-is('tablet') {
|
|
66
|
-
padding-right: var(--pix-spacing-10x) + var(--pix-spacing-2x);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
26
|
&__content {
|
|
71
27
|
@extend %pix-body-s;
|
|
72
28
|
|
|
73
29
|
padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
|
|
74
30
|
color: var(--pix-neutral-900);
|
|
75
|
-
background-color:var(--pix-neutral-0);
|
|
31
|
+
background-color: var(--pix-neutral-0);
|
|
76
32
|
|
|
77
33
|
p:last-child {
|
|
78
34
|
margin-bottom: 0;
|
|
@@ -80,9 +36,18 @@
|
|
|
80
36
|
}
|
|
81
37
|
|
|
82
38
|
&__footer {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
gap: var(--pix-spacing-2x);
|
|
83
42
|
padding: var(--pix-spacing-6x) var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-6x);
|
|
84
|
-
background-color:var(--pix-neutral-0);
|
|
43
|
+
background-color: var(--pix-neutral-0);
|
|
85
44
|
border-bottom-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
|
|
86
45
|
border-bottom-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
|
|
46
|
+
|
|
47
|
+
@include breakpoints.device-is('tablet') {
|
|
48
|
+
flex-flow: row wrap;
|
|
49
|
+
gap: var(--pix-spacing-4x);
|
|
50
|
+
justify-content: flex-end;
|
|
51
|
+
}
|
|
87
52
|
}
|
|
88
53
|
}
|
package/addon/styles/addon.scss
CHANGED