@1024pix/pix-ui 60.10.1 → 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.
- package/addon/components/pix-modal-header.gjs +49 -0
- package/addon/components/pix-modal.gjs +11 -12
- package/addon/styles/_pix-modal-header.scss +82 -0
- package/addon/styles/_pix-modal.scss +14 -49
- package/addon/styles/_pix-tag.scss +9 -1
- package/addon/styles/addon.scss +1 -0
- package/addon/styles/pix-design-tokens/_spacing.scss +3 -0
- package/package.json +1 -1
|
@@ -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
|
}
|
|
@@ -42,7 +42,6 @@
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
&--purple-light,
|
|
46
45
|
&--tertiary,
|
|
47
46
|
&--blue {
|
|
48
47
|
color: var(--pix-tertiary-900);
|
|
@@ -74,6 +73,15 @@
|
|
|
74
73
|
}
|
|
75
74
|
|
|
76
75
|
&--purple {
|
|
76
|
+
color: var(--pix-neutral-0);
|
|
77
|
+
background-color: var(--pix-primary-500);
|
|
78
|
+
|
|
79
|
+
.pix-icon-button {
|
|
80
|
+
color: var(--pix-primary-900);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&--purple-light {
|
|
77
85
|
color: var(--pix-primary-900);
|
|
78
86
|
background-color: var(--pix-primary-100);
|
|
79
87
|
|
package/addon/styles/addon.scss
CHANGED
|
@@ -14,9 +14,12 @@ $pix-spacing-xxl: 48px;
|
|
|
14
14
|
--pix-spacing-2x: 8px;
|
|
15
15
|
--pix-spacing-3x: 12px;
|
|
16
16
|
--pix-spacing-4x: 16px;
|
|
17
|
+
--pix-spacing-5x: 20px;
|
|
17
18
|
--pix-spacing-6x: 24px;
|
|
19
|
+
--pix-spacing-7x: 28px;
|
|
18
20
|
--pix-spacing-8x: 32px;
|
|
19
21
|
--pix-spacing-9x: 36px;
|
|
20
22
|
--pix-spacing-10x: 40px;
|
|
23
|
+
--pix-spacing-11x: 44px;
|
|
21
24
|
--pix-spacing-12x: 48px;
|
|
22
25
|
}
|