Skip to content

Commit 91001bb

Browse files
AndreiaPenaAndreiaPena
authored
💄 mon-pix: apply design modification on certifiable page
1 parent ab070f9 commit 91001bb

File tree

13 files changed

+82
-112
lines changed

13 files changed

+82
-112
lines changed

‎mon-pix/app/components/certification-banners/congratulations-certification-banner.hbs

-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
11
<div class="congratulations-banner">
2-
<PixIconButton
3-
@iconName="close"
4-
@ariaLabel={{t "common.actions.close"}}
5-
@triggerAction={{@closeBanner}}
6-
@withBackground={{true}}
7-
class="icon-button congratulations-banner__icon"
8-
/>
92
<p class="congratulations-banner__message">
103
{{t "pages.certification-joiner.congratulation-banner.message" fullName=@fullName htmlSafe=true}}
114
</p>

‎mon-pix/app/components/certification-banners/index.hbs

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
{{#if this.showCongratulationsBanner}}
2-
<CertificationBanners::CongratulationsCertificationBanner @fullName={{@fullName}} @closeBanner={{this.closeBanner}}>
3-
<:eligibleComplementaryCertifications>
4-
{{#if (gt this.eligibleComplementaryCertifications.length 0)}}
5-
<CertificationBanners::EligibleComplementaryCertificationBanner
6-
@complementaryCertifications={{this.eligibleComplementaryCertifications}}
7-
/>
8-
{{/if}}
9-
</:eligibleComplementaryCertifications>
10-
</CertificationBanners::CongratulationsCertificationBanner>
11-
{{/if}}
1+
<CertificationBanners::CongratulationsCertificationBanner @fullName={{@fullName}}>
2+
<:eligibleComplementaryCertifications>
3+
{{#if (gt this.eligibleComplementaryCertifications.length 0)}}
4+
<CertificationBanners::EligibleComplementaryCertificationBanner
5+
@complementaryCertifications={{this.eligibleComplementaryCertifications}}
6+
/>
7+
{{/if}}
8+
</:eligibleComplementaryCertifications>
9+
</CertificationBanners::CongratulationsCertificationBanner>
1210

1311
{{#if (gt this.outdatedLowerLevelComplementaryCertifications.length 0)}}
1412
<CertificationBanners::OutdatedComplementaryCertificationBanner

‎mon-pix/app/components/certification-banners/index.js

-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
import { action } from '@ember/object';
21
import Component from '@glimmer/component';
3-
import { tracked } from '@glimmer/tracking';
42

53
export default class Index extends Component {
6-
@tracked displayCongratulationsBanner = true;
7-
8-
get showCongratulationsBanner() {
9-
return this.displayCongratulationsBanner;
10-
}
11-
124
get eligibleComplementaryCertifications() {
135
return (
146
this.args.certificationEligibility.complementaryCertifications?.filter(
@@ -25,9 +17,4 @@ export default class Index extends Component {
2517
) ?? []
2618
);
2719
}
28-
29-
@action
30-
closeBanner() {
31-
this.displayCongratulationsBanner = false;
32-
}
3320
}

‎mon-pix/app/components/certification-joiner.hbs

+16-6
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,29 @@
1010
@validationStatus={{this.sessionIdStatus}}
1111
pattern={{this.SESSION_ID_VALIDATION_PATTERN}}
1212
title={{t "pages.certification-joiner.form.fields-validation.session-number-error"}}
13-
size="6"
1413
{{on "input" this.checkSessionIdIsValid}}
1514
{{on "change" this.setSessionId}}
1615
inputmode="decimal"
1716
required="true"
1817
@subLabel={{t "pages.certification-joiner.form.fields.session-number-information"}}
18+
placeholder={{t "pages.certification-joiner.form.placeholders.session-number"}}
1919
>
2020
<:label>{{t "pages.certification-joiner.form.fields.session-number"}}</:label>
2121
</PixInput>
22-
<PixInput @id="certificationJoinerFirstName" required="true" {{on "change" this.setFirstName}}>
22+
<PixInput
23+
@id="certificationJoinerFirstName"
24+
required="true"
25+
{{on "change" this.setFirstName}}
26+
placeholder={{t "pages.certification-joiner.form.placeholders.first-name"}}
27+
>
2328
<:label>{{t "pages.certification-joiner.form.fields.first-name"}}</:label>
2429
</PixInput>
25-
<PixInput @id="certificationJoinerLastName" required="true" {{on "change" this.setLastName}}>
30+
<PixInput
31+
@id="certificationJoinerLastName"
32+
required="true"
33+
{{on "change" this.setLastName}}
34+
placeholder={{t "pages.certification-joiner.form.placeholders.birth-name"}}
35+
>
2636
<:label>{{t "pages.certification-joiner.form.fields.birth-name"}}</:label>
2737
</PixInput>
2838
<div>
@@ -35,7 +45,7 @@
3545
min="1"
3646
max="31"
3747
type="number"
38-
placeholder="JJ"
48+
placeholder={{t "pages.certification-joiner.form.placeholders.birth-day"}}
3949
{{on "change" this.setDayOfBirth}}
4050
{{on "input" this.handleDayInputChange}}
4151
{{on "focus-in" this.handleInputFocus}}
@@ -49,7 +59,7 @@
4959
min="1"
5060
max="12"
5161
type="number"
52-
placeholder="MM"
62+
placeholder={{t "pages.certification-joiner.form.placeholders.birth-month"}}
5363
{{on "change" this.setMonthOfBirth}}
5464
{{on "input" this.handleMonthInputChange}}
5565
{{on "focus-in" this.handleInputFocus}}
@@ -63,7 +73,7 @@
6373
min="1900"
6474
max="2100"
6575
type="number"
66-
placeholder="AAAA"
76+
placeholder={{t "pages.certification-joiner.form.placeholders.birth-year"}}
6777
{{on "change" this.setYearOfBirth}}
6878
{{on "focus-in" this.handleInputFocus}}
6979
@screenReaderOnly="true"

‎mon-pix/app/styles/components/_certification-joiner.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
text-rendering: optimizelegibility;
66

77
&__title {
8-
@extend %pix-title-m;
8+
@extend %pix-title-s;
99

1010
margin-bottom: var(--pix-spacing-4x);
1111
text-align: center;
@@ -22,7 +22,7 @@
2222
display: flex;
2323
flex-direction: column;
2424
gap: var(--pix-spacing-6x);
25-
width: 300px;
25+
width: 410px;
2626
margin: 0 auto;
2727
}
2828

‎mon-pix/app/styles/components/_certification-starter.scss

+4-5
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,11 @@
1313

1414
.certification-start-page {
1515
&__block {
16-
max-width: 980px;
17-
margin-bottom: var(--pix-spacing-8x);
18-
padding: var(--pix-spacing-3x);
16+
margin: var(--pix-spacing-3x) 0;
17+
padding: var(--pix-spacing-4x) var(--pix-spacing-4x) var(--pix-spacing-12x) var(--pix-spacing-4x);
1918

20-
@include breakpoints.device-is('mobile') {
21-
padding: var(--pix-spacing-4x);
19+
@include breakpoints.device-is('tablet') {
20+
margin: var(--pix-spacing-6x) 0;
2221
}
2322
}
2423

‎mon-pix/app/styles/components/_congratulations-certification-banner.scss

+6-23
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,11 @@
2020
}
2121
}
2222

23-
.congratulations-banner__icon {
24-
position: absolute;
25-
top: var(--pix-spacing-2x);
26-
right: var(--pix-spacing-2x);
27-
color: var(--pix-neutral-0);
28-
29-
&:hover,
30-
&:active {
31-
color: var(--pix-certif-500);
32-
}
33-
}
34-
3523
.congratulations-banner__message {
3624
margin: var(--pix-spacing-6x) 0;
3725
text-align: center;
3826

39-
@extend %pix-title-s;
27+
@extend %pix-title-m;
4028

4129
@include breakpoints.device-is('tablet') {
4230
margin: var(--pix-spacing-1x) 0 var(--pix-spacing-6x) 0;
@@ -97,10 +85,8 @@
9785
.congratulations-banner__links {
9886
display: flex;
9987
flex-direction: column;
88+
gap: var(--pix-spacing-2x);
10089
align-items: center;
101-
justify-content: space-around;
102-
width: 80%;
103-
margin-top: 24px;
10490

10591
@include breakpoints.device-is('tablet') {
10692
flex-direction: row;
@@ -113,15 +99,12 @@
11399
gap: var(--pix-spacing-2x);
114100
align-items: center;
115101
justify-content: center;
116-
width: 100%;
117-
margin-bottom: 12px;
118102
padding: var(--pix-spacing-1x) var(--pix-spacing-4x);
119-
font-weight: var(--pix-font-medium);
120-
line-height: 2rem;
121-
border: 1px solid var(--pix-neutral-20);
122-
border-radius: 4px;
103+
font-weight: var(--pix-font-bold);
104+
border: 2px solid var(--pix-neutral-0);
105+
border-radius: 50px;
123106

124-
@extend %pix-body-s;
107+
@extend %pix-body-m;
125108

126109
@include breakpoints.device-is('tablet') {
127110
width: 45%;

‎mon-pix/app/templates/authenticated/certifications/join.hbs

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
{{page-title (t "pages.certification-start.title")}}
22

33
<Global::AppLayout>
4-
<main class="main" role="main">
5-
<PixBackgroundHeader id="main">
6-
7-
{{#if this.model.isCertifiable}}
8-
<PixBlock @shadow="heavy" class="certification-start-page__block">
9-
<CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
10-
<CertificationJoiner @onStepChange={{this.changeStep}} />
11-
</PixBlock>
12-
{{else}}
13-
<CertificationNotCertifiable />
14-
{{/if}}
15-
16-
</PixBackgroundHeader>
4+
<main id="main" class="global-page-container" role="main">
5+
{{#if this.model.isCertifiable}}
6+
<PixBlock class="certification-start-page__block">
7+
<CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
8+
<CertificationJoiner @onStepChange={{this.changeStep}} />
9+
</PixBlock>
10+
{{else}}
11+
<CertificationNotCertifiable />
12+
{{/if}}
1713
</main>
1814
</Global::AppLayout>

‎mon-pix/tests/integration/components/certification-banners/congratulations-certification-banner-test.js

-28
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { render } from '@1024pix/ember-testing-library';
2-
import { click } from '@ember/test-helpers';
32
import { hbs } from 'ember-cli-htmlbars';
43
import { module, test } from 'qunit';
5-
import sinon from 'sinon';
64

75
import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
86

@@ -13,43 +11,17 @@ module('Integration | Component | Certification Banners | Congratulations Certif
1311
// given
1412
const store = this.owner.lookup('service:store');
1513
this.set('fullName', 'Fifi Brindacier');
16-
this.set('closeBanner', () => {});
1714
this.set('certificationEligibility', store.createRecord('is-certifiable', {}));
1815

1916
// when
2017
const screen = await render(
2118
hbs`<CertificationBanners::CongratulationsCertificationBanner
2219
@fullName={{this.fullName}}
23-
@closeBanner={{this.closeBanner}}
2420
@certificationEligibility={{this.certificationEligibility}}
2521
/>`,
2622
);
2723

2824
// then
2925
assert.ok(screen.getByText('Bravo Fifi Brindacier, votre profil Pix est certifiable.'));
3026
});
31-
32-
test('calls the closeBanner method when closing the banner', async function (assert) {
33-
// given
34-
const store = this.owner.lookup('service:store');
35-
const closeBannerStub = sinon.stub();
36-
this.set('closeBanner', closeBannerStub);
37-
this.set('fullName', 'Fifi Brindacier');
38-
this.set('certificationEligibility', store.createRecord('is-certifiable', {}));
39-
40-
const screen = await render(
41-
hbs`<CertificationBanners::CongratulationsCertificationBanner
42-
@fullName={{this.fullName}}
43-
@closeBanner={{this.closeBanner}}
44-
@certificationEligibility={{this.certificationEligibility}}
45-
/>`,
46-
);
47-
48-
// when
49-
await click(screen.getByRole('button', { name: 'Fermer' }));
50-
51-
// then
52-
sinon.assert.calledOnce(closeBannerStub);
53-
assert.ok(true);
54-
});
5527
});

‎mon-pix/translations/en.json

+8
Original file line numberDiff line numberDiff line change
@@ -757,6 +757,14 @@
757757
},
758758
"fields-validation": {
759759
"session-number-error": "The session ID must only contain numbers."
760+
},
761+
"placeholders": {
762+
"birth-day": "DD",
763+
"birth-month": "MM",
764+
"birth-name": "ex: Dupont",
765+
"birth-year": "YYYY",
766+
"first-name": "ex: Jean",
767+
"session-number": "ex: 123456"
760768
}
761769
},
762770
"title": "Join a certification session"

‎mon-pix/translations/es.json

+10-2
Original file line numberDiff line numberDiff line change
@@ -763,8 +763,16 @@
763763
"first-name": "Nombre",
764764
"session-number": "Número de sesión",
765765
"session-number-information": "Comunicado únicamente por el supervisor al inicio de la sesión"
766-
}
767-
},
766+
},
767+
"placeholders": {
768+
"birth-day": "DD",
769+
"birth-month": "MM",
770+
"birth-name": "ex: Dupont",
771+
"birth-year": "YYYY",
772+
"first-name": "ex: Jean",
773+
"session-number": "ex: 123456"
774+
}
775+
},
768776
"title": "Unirse a una sesión de certificación"
769777
},
770778
"certification-not-certifiable": {

‎mon-pix/translations/fr.json

+8
Original file line numberDiff line numberDiff line change
@@ -757,6 +757,14 @@
757757
},
758758
"fields-validation": {
759759
"session-number-error": "Le numéro de session est composé uniquement de chiffres."
760+
},
761+
"placeholders": {
762+
"birth-day": "JJ",
763+
"birth-month": "MM",
764+
"birth-name": "ex: Dupont",
765+
"birth-year": "AAAA",
766+
"first-name": "ex: Jean",
767+
"session-number": "ex: 123456"
760768
}
761769
},
762770
"title": "Rejoindre une session de certification"

‎mon-pix/translations/nl.json

+10-2
Original file line numberDiff line numberDiff line change
@@ -763,8 +763,16 @@
763763
"first-name": "Voornaam",
764764
"session-number": "Sessienummer",
765765
"session-number-information": "Alleen meegedeeld door de surveillant aan het begin van de sessie"
766-
}
767-
},
766+
},
767+
"placeholders": {
768+
"birth-day": "DD",
769+
"birth-month": "MM",
770+
"birth-name": "ex: Dupont",
771+
"birth-year": "JJJJ",
772+
"first-name": "ex: Jean",
773+
"session-number": "ex: 123456"
774+
}
775+
},
768776
"title": "Doe mee aan een certificeringssessie"
769777
},
770778
"certification-not-certifiable": {

0 commit comments

Comments
 (0)