@1024pix/pix-ui 60.2.0 → 60.4.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-step.gjs +39 -0
- package/addon/components/pix-stepper.gjs +41 -0
- package/addon/styles/_pix-stepper.scss +159 -0
- package/addon/styles/addon.scss +1 -0
- package/addon/styles/pix-design-tokens/_colors.scss +2 -0
- package/addon/translations/en.js +3 -0
- package/addon/translations/es-419.js +3 -0
- package/addon/translations/es.js +3 -0
- package/addon/translations/fr.js +3 -0
- package/addon/translations/nl.js +3 -0
- package/app/components/pix-step.js +1 -0
- package/app/components/pix-stepper.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
|
|
3
|
+
export default class PixStepComponent extends Component {
|
|
4
|
+
get cssClass() {
|
|
5
|
+
const classes = ['pix-step'];
|
|
6
|
+
|
|
7
|
+
if (this.args.isCurrent) {
|
|
8
|
+
classes.push('pix-step--current');
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return classes.join(' ');
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
get displayIndex() {
|
|
15
|
+
return this.args.index + 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
get ariaCurrent() {
|
|
19
|
+
return this.args.isCurrent ? 'step' : null;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<li class={{this.cssClass}} aria-current={{this.ariaCurrent}} ...attributes>
|
|
24
|
+
<div class="pix-step__index" aria-hidden="true">
|
|
25
|
+
{{this.displayIndex}}
|
|
26
|
+
</div>
|
|
27
|
+
{{#if @title}}
|
|
28
|
+
<div class="pix-step__title">
|
|
29
|
+
{{@title}}
|
|
30
|
+
</div>
|
|
31
|
+
{{/if}}
|
|
32
|
+
{{#if @subtitle}}
|
|
33
|
+
<div class="pix-step__subtitle">
|
|
34
|
+
{{@subtitle}}
|
|
35
|
+
</div>
|
|
36
|
+
{{/if}}
|
|
37
|
+
</li>
|
|
38
|
+
</template>
|
|
39
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import { eq } from 'ember-truth-helpers';
|
|
3
|
+
|
|
4
|
+
import { formatMessage } from '../translations';
|
|
5
|
+
import PixStep from './pix-step';
|
|
6
|
+
|
|
7
|
+
export default class PixStepperComponent extends Component {
|
|
8
|
+
get cssClass() {
|
|
9
|
+
const classes = ['pix-stepper'];
|
|
10
|
+
|
|
11
|
+
if (this.args.steps.length > 3) {
|
|
12
|
+
classes.push('pix-stepper--long');
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return classes.join(' ');
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
get currentStepIndex() {
|
|
19
|
+
return this.args.currentStep - 1;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
get ariaLabel() {
|
|
23
|
+
return formatMessage(this.args.locale ?? 'fr', 'stepper.ariaLabel', {
|
|
24
|
+
current: this.args.currentStep,
|
|
25
|
+
total: this.args.steps.length,
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<ol class={{this.cssClass}} role="list" aria-label={{this.ariaLabel}} ...attributes>
|
|
31
|
+
{{#each @steps as |step index|}}
|
|
32
|
+
<PixStep
|
|
33
|
+
@index={{index}}
|
|
34
|
+
@title={{step.title}}
|
|
35
|
+
@subtitle={{step.subtitle}}
|
|
36
|
+
@isCurrent={{eq index this.currentStepIndex}}
|
|
37
|
+
/>
|
|
38
|
+
{{/each}}
|
|
39
|
+
</ol>
|
|
40
|
+
</template>
|
|
41
|
+
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
@use 'pix-design-tokens/breakpoints';
|
|
2
|
+
@use 'pix-design-tokens/shadows';
|
|
3
|
+
@use 'pix-design-tokens/typography';
|
|
4
|
+
|
|
5
|
+
.pix-stepper {
|
|
6
|
+
display: flex;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.pix-step {
|
|
10
|
+
position: relative;
|
|
11
|
+
flex: 1;
|
|
12
|
+
text-align: center;
|
|
13
|
+
|
|
14
|
+
&__index {
|
|
15
|
+
@extend %pix-shadow-default;
|
|
16
|
+
|
|
17
|
+
position: relative;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
width: 2rem;
|
|
22
|
+
height: 2rem;
|
|
23
|
+
color: transparent;
|
|
24
|
+
font-weight: 600;
|
|
25
|
+
line-height: 1;
|
|
26
|
+
background: var(--pix-primary-700);
|
|
27
|
+
border-radius: var(--radius-6x, 24px);
|
|
28
|
+
margin-inline: auto;
|
|
29
|
+
|
|
30
|
+
&::before,
|
|
31
|
+
&::after {
|
|
32
|
+
position: absolute;
|
|
33
|
+
display: block;
|
|
34
|
+
height: 3px;
|
|
35
|
+
background-color: var(--pix-neutral-0);
|
|
36
|
+
border-radius: 2px;
|
|
37
|
+
content: '';
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&::before {
|
|
41
|
+
bottom: 30%;
|
|
42
|
+
left: calc(50% - 10px);
|
|
43
|
+
width: 9px;
|
|
44
|
+
transform-origin: bottom right;
|
|
45
|
+
rotate: 45deg;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&::after {
|
|
49
|
+
bottom: 30%;
|
|
50
|
+
left: calc(50% - 1px);
|
|
51
|
+
width: 14px;
|
|
52
|
+
transform-origin: bottom left;
|
|
53
|
+
rotate: -45deg;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&__title {
|
|
58
|
+
@extend %pix-body-s;
|
|
59
|
+
|
|
60
|
+
margin-top: var(--pix-spacing-1x);
|
|
61
|
+
color: var(--pix-primary-500);
|
|
62
|
+
font-weight: 700;
|
|
63
|
+
padding-inline: var(--pix-spacing-1x);
|
|
64
|
+
text-wrap: pretty;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&__subtitle {
|
|
68
|
+
color: var(--pix-primary-500);
|
|
69
|
+
font-size: 0.75rem;
|
|
70
|
+
padding-inline: var(--pix-spacing-1x);
|
|
71
|
+
text-wrap: pretty;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&:not(:last-child)::after {
|
|
75
|
+
position: absolute;
|
|
76
|
+
top: 0.875rem;
|
|
77
|
+
left: calc(50% + 1.25rem);
|
|
78
|
+
display: block;
|
|
79
|
+
width: calc(100% - 2.5rem);
|
|
80
|
+
height: 4px;
|
|
81
|
+
background:
|
|
82
|
+
linear-gradient(90deg, rgba(69, 45, 157, 0.8) 0%, rgba(69, 45, 157, 0) 60%), var(--pix-primary-300);
|
|
83
|
+
border-radius: 2px;
|
|
84
|
+
content: '';
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&.pix-step--current {
|
|
88
|
+
&:not(:last-child)::after {
|
|
89
|
+
background:
|
|
90
|
+
linear-gradient(90deg, rgba(69, 45, 157, 0.8) 0%, rgba(69, 45, 157, 0) 60%),
|
|
91
|
+
var(--pix-neutral-100);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.pix-step__index {
|
|
95
|
+
color: var(--pix-neutral-0);
|
|
96
|
+
background: linear-gradient(90deg, rgba(69, 45, 157, 0.8) 0%, rgba(69, 45, 157, 0) 60%), var(--pix-primary-300);
|
|
97
|
+
|
|
98
|
+
&::before,
|
|
99
|
+
&::after {
|
|
100
|
+
content: none;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&--current ~ .pix-step {
|
|
106
|
+
&:not(:last-child)::after {
|
|
107
|
+
background: var(--pix-neutral-100);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.pix-step__index {
|
|
111
|
+
color: var(--pix-neutral-500);
|
|
112
|
+
background: var(--pix-neutral-100);
|
|
113
|
+
box-shadow: none;
|
|
114
|
+
|
|
115
|
+
&::before,
|
|
116
|
+
&::after {
|
|
117
|
+
content: none;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.pix-step__title,
|
|
122
|
+
.pix-step__subtitle {
|
|
123
|
+
color: var(--pix-neutral-500);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@include breakpoints.device-is('mobile') {
|
|
129
|
+
.pix-stepper--long {
|
|
130
|
+
.pix-step {
|
|
131
|
+
flex: 1;
|
|
132
|
+
|
|
133
|
+
&:not(:last-child)::after {
|
|
134
|
+
left: calc(50% + 1rem + 4px);
|
|
135
|
+
width: calc(100% - 2rem - 8px);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.pix-step:has(+ .pix-step--current):not(:last-child)::after {
|
|
140
|
+
width: calc(200% - 2rem - 8px);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.pix-step--current {
|
|
144
|
+
flex: 3;
|
|
145
|
+
|
|
146
|
+
&:not(:last-child)::after {
|
|
147
|
+
left: calc(50% + 1rem + 4px);
|
|
148
|
+
width: calc(66.667% - 2rem - 8px);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.pix-step:not(.pix-step--current) {
|
|
153
|
+
.pix-step__title,
|
|
154
|
+
.pix-step__subtitle {
|
|
155
|
+
display: none;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
package/addon/styles/addon.scss
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
// Primary
|
|
5
5
|
--pix-primary-10-inline:247, 245, 255;
|
|
6
6
|
--pix-primary-10: rgb(var(--pix-primary-10-inline));
|
|
7
|
+
--pix-primary-50-inline:239, 236, 252;
|
|
8
|
+
--pix-primary-50: rgb(var(--pix-primary-50-inline));
|
|
7
9
|
--pix-primary-100-inline:206, 195, 244;
|
|
8
10
|
--pix-primary-100: rgb(var(--pix-primary-100-inline));
|
|
9
11
|
--pix-primary-300-inline:149, 126, 232;
|
package/addon/translations/en.js
CHANGED
|
@@ -21,6 +21,9 @@ export default {
|
|
|
21
21
|
tag: {
|
|
22
22
|
removeButton: 'Remove',
|
|
23
23
|
},
|
|
24
|
+
stepper: {
|
|
25
|
+
ariaLabel: 'Step {current, number} of {total, number}',
|
|
26
|
+
},
|
|
24
27
|
pixNavigation: {
|
|
25
28
|
shrinkNavigationAriaLabel: 'Reduce the width of the navigation menu',
|
|
26
29
|
expandNavigationAriaLabel: 'Return to the initial width of the navigation menu',
|
package/addon/translations/es.js
CHANGED
|
@@ -19,6 +19,9 @@ export default {
|
|
|
19
19
|
pageNumber: 'Página {current, number} / {total, number}',
|
|
20
20
|
nextPageLabel: 'Ir a la página siguiente',
|
|
21
21
|
},
|
|
22
|
+
stepper: {
|
|
23
|
+
ariaLabel: 'Paso {current, number} de {total, number}',
|
|
24
|
+
},
|
|
22
25
|
pixNavigation: {
|
|
23
26
|
shrinkNavigationAriaLabel: 'Reducir el ancho del menú de navegación',
|
|
24
27
|
expandNavigationAriaLabel: 'Volver al ancho inicial del menú de navegación',
|
package/addon/translations/fr.js
CHANGED
|
@@ -25,4 +25,7 @@ export default {
|
|
|
25
25
|
shrinkNavigationAriaLabel: 'Réduire la largeur du menu de navigation',
|
|
26
26
|
expandNavigationAriaLabel: 'Revenir à la largeur initiale du menu de navigation',
|
|
27
27
|
},
|
|
28
|
+
stepper: {
|
|
29
|
+
ariaLabel: 'Étape {current, number} sur {total, number}',
|
|
30
|
+
},
|
|
28
31
|
};
|
package/addon/translations/nl.js
CHANGED
|
@@ -21,6 +21,9 @@ export default {
|
|
|
21
21
|
tag: {
|
|
22
22
|
removeButton: 'Verwijderen',
|
|
23
23
|
},
|
|
24
|
+
stepper: {
|
|
25
|
+
ariaLabel: 'Stap {current, number} van {total, number}',
|
|
26
|
+
},
|
|
24
27
|
pixNavigation: {
|
|
25
28
|
shrinkNavigationAriaLabel: 'De breedte van het navigatiemenu verkleinen',
|
|
26
29
|
expandNavigationAriaLabel: 'Terug naar de oorspronkelijke breedte van het navigatiemenu',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@1024pix/pix-ui/components/pix-step';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@1024pix/pix-ui/components/pix-stepper';
|