diff --git a/.gitignore b/.gitignore
index fa521c8340c0eb82e104836a6cccc468454aecdc..7150380558a29773048fe2d5a71f8a05de4474cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,6 +62,5 @@ package-lock.json
/projects
# Storybook
-documentation.json
/storybook-static
documentation.json
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d752ff031bad2249c816d185a7b5f1b488b044eb..b966268f9bc416cb2ffbb7ab060489cf309d0192 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -36,7 +36,6 @@
"covid",
"demarch",
"facebook",
- "friday",
"grandlyon",
"instagram",
"linkedin",
@@ -44,24 +43,23 @@
"metropole",
"Metropole",
"monday",
+ "tuesday",
+ "wednesday",
+ "thursday",
+ "friday",
+ "saturday",
+ "sunday",
"NOSONAR",
"onespace",
"orientator",
"Orientator",
"personaloffer",
"Rés'in",
- "saturday",
- "smedium",
- "sunday",
- "thursday",
"toastr",
- "tuesday",
"ultrawide",
"unclickable",
- "unclickable",
- "wednesday",
+ "smedium",
"xsmall",
- "xxsmall",
- "xsmall"
+ "xxsmall"
]
}
diff --git a/src/app/carto/carto.component.scss b/src/app/carto/carto.component.scss
index 2f9f9fc3e9539a89674eb74b7f62d0b251b3f693..dc0f37e3a5faec7fa2a44fc9618beb76f1188603 100644
--- a/src/app/carto/carto.component.scss
+++ b/src/app/carto/carto.component.scss
@@ -17,7 +17,7 @@
}
.height-100 {
- height: 100%;
+ height: calc(100vh - #{$header-height} - #{$orientation-progressBarAndButtons});
}
.panes-container {
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
index 900f88917b378b3bf8e2af041b6219fc241bd389..15cfca06aa3c372cbb1c0828e9b21511b10abca1 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
+++ b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.html
@@ -49,7 +49,7 @@
</div>
</div>
<div class="form-group" fxLayout="column">
- <label for="structureMail">Email de votre structure<sup class="footnote-nb">1</sup></label>
+ <label for="structureMail">Email de votre structure</label>
<p class="notRequired">Facultatif</p>
<div fxLayout="row" fxLayoutGap="13px">
<input
@@ -74,7 +74,7 @@
</div>
</div>
<div class="form-group" fxLayout="column">
- <label for="structurePhone">Téléphone de votre structure<sup class="footnote-nb">1</sup></label>
+ <label for="structurePhone">Téléphone de votre structure</label>
<p class="notRequired">Facultatif</p>
<div fxLayout="row" fxLayoutGap="13px">
<input
@@ -99,8 +99,4 @@
</div>
</div>
</form>
- <p class="footnote">
- <sup class="footnote-nb">1</sup> Un moyen de communication (email et/ou téléphone) est obligatoire pour valider
- cette étape
- </p>
</div>
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
index 197f472eabc10823c2f3be9e6c524647084f7409..088c84851ae0da02312b9a873b229fef528d9c7c 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
+++ b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
@@ -56,12 +56,3 @@
.notRequired {
margin-bottom: 0;
}
-
-sup {
- color: red;
- font-size: $font-size-xxsmall;
-}
-.footnote {
- margin-top: 2em;
- font-size: $font-size-xmsmall;
-}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 93cd11c4f64e0291270c7de00a7adb17bd138347..41a6f8b7b144eb82110022b95db4bb429e1f1138 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -17,6 +17,12 @@
</svg>
</div>
<div *ngIf="authFailed" class="incorrectId">Identifiant ou mot de passe invalide</div>
+ <div *ngIf="isUnverifiedEmail" class="incorrectId">
+ Votre email n'a jamais été validé.
+ <a tabindex="0" (click)="resendConfirmationEmail()" (keyup.enter)="resendConfirmationEmail()"
+ >Renvoyer l'email de confirmation</a
+ >
+ </div>
</div>
<div class="form-group password" fxLayout="column">
<label for="password">Mot de passe</label>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index db47a53afbf8b67a547cd0233509f1976e80cb5d..7dddb5660d0be2ea913a21f9a7ac3e7bde8b7fdd 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,12 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router, UrlSegment } from '@angular/router';
-import { combineLatest } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import { combineLatest, lastValueFrom } from 'rxjs';
+import { map } from 'rxjs/operators';
import { Structure } from '../models/structure.model';
-import { User } from '../models/user.model';
import { AuthService } from '../services/auth.service';
-import { StructureService } from '../services/structure.service';
+import { NotificationService } from '../services/notification.service';
import { ButtonType } from '../shared/components/button/buttonType.enum';
import { CustomRegExp } from '../utils/CustomRegExp';
@@ -20,6 +19,7 @@ export class LoginComponent implements OnInit {
public loading = false;
public submitted = false;
public authFailed = false;
+ public isUnverifiedEmail = false;
public isShowPassword = false;
public buttonTypeEnum = ButtonType;
public isWelcome = false;
@@ -35,7 +35,7 @@ export class LoginComponent implements OnInit {
private router: Router,
private authService: AuthService,
private activatedRoute: ActivatedRoute,
- private structureService: StructureService
+ private notificationService: NotificationService
) {}
ngOnInit(): void {
@@ -77,7 +77,7 @@ export class LoginComponent implements OnInit {
this.router.navigate(['/reset-password']);
}
- public onSubmit(): void {
+ public async onSubmit(): Promise<void> {
this.submitted = true;
// stop here if form is invalid
@@ -85,26 +85,28 @@ export class LoginComponent implements OnInit {
return;
}
this.loading = true;
- this.authService
- .login(this.f.email.value, this.f.password.value)
- .pipe(first())
- .subscribe(
- () => {
- if (this.isWelcome) {
- this.router.navigateByUrl('form/profile');
- } else {
- if (this.returnUrl) {
- this.router.navigateByUrl(this.returnUrl);
- } else {
- this.router.navigateByUrl('news');
- }
- }
- },
- () => {
- this.loading = false;
- this.authFailed = true;
+ this.authFailed = false;
+ this.isUnverifiedEmail = false;
+ try {
+ await lastValueFrom(this.authService.login(this.f.email.value, this.f.password.value));
+
+ if (this.isWelcome) {
+ this.router.navigateByUrl('form/profile');
+ } else {
+ if (this.returnUrl) {
+ this.router.navigateByUrl(this.returnUrl);
+ } else {
+ this.router.navigateByUrl('news');
}
- );
+ }
+ } catch (e) {
+ this.loading = false;
+ if (e.status == 418) {
+ this.isUnverifiedEmail = true;
+ } else {
+ this.authFailed = true;
+ }
+ }
}
public toggleShowPassword(): void {
@@ -114,34 +116,35 @@ export class LoginComponent implements OnInit {
this.router.navigateByUrl('form/account');
}
- private sendVerification(): void {
- this.authService.verifyUser(this.userId, this.token).subscribe(
- (user: User) => {
- if (user.structuresLink[0]) {
- this.structureService.getStructure(user.structuresLink[0]).subscribe(
- (structure) => {
- structure.accountVerified = true;
- this.structure = structure;
- this.structureService.updateStructureAfterOwnerVerify(structure._id, user).subscribe(
- () => {
- this.verificationSuccess = true;
- },
- () => {
- this.verificationIssue = true;
- }
- );
- },
- () => {
- this.verificationIssue = true;
- }
+ public resendConfirmationEmail(): void {
+ this.isUnverifiedEmail = false;
+ this.loading = true;
+ this.authService.resendEmail(this.f.email.value, this.f.password.value).subscribe({
+ next: () => {
+ this.loading = false;
+ this.notificationService.showSuccess(`L'email de confirmation a été renvoyé à ${this.f.email.value}`);
+ },
+ error: (error) => {
+ this.loading = false;
+ if (error.status === 401) {
+ this.authFailed = true;
+ this.notificationService.showError(
+ `Identifiant ou mot de passe invalide`,
+ `L'email de confirmation n'a pas pu être renvoyé`
);
} else {
- this.verificationSuccess = true;
+ console.log(`L'email de confirmation n'a pas pu être renvoyé: ${error.message}`);
+ this.notificationService.showErrorPleaseRetry(`L'email de confirmation n'a pas pu être renvoyé`);
}
},
- () => {
+ });
+ }
+
+ private sendVerification(): void {
+ this.authService.verifyUser(this.userId, this.token).subscribe({
+ error: () => {
this.verificationIssue = true;
- }
- );
+ },
+ });
}
}
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index ccde5794d142cbcc5454374ed24c93a63da04f35..093bfe6da41196b6d4748356a9e84975cde5f099 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -78,8 +78,12 @@ export class AuthService {
);
}
- public verifyUser(userId: string, token: string): Observable<any> {
- return this.http.post(`api/users/verify/${userId}`, null, {
+ public resendEmail(email: string, password: string): Observable<User> {
+ return this.http.post<User>(`api/auth/resendEmail`, { email, password });
+ }
+
+ public verifyUser(userId: string, token: string): Observable<User> {
+ return this.http.post<User>(`api/users/verify/${userId}`, null, {
params: { token },
});
}
diff --git a/src/app/services/structure.service.ts b/src/app/services/structure.service.ts
index 5985adb4467de2b7cc0033d36d72505f4a62fdc6..a61619bced479fae33ada321bae56a930072b155 100644
--- a/src/app/services/structure.service.ts
+++ b/src/app/services/structure.service.ts
@@ -16,12 +16,6 @@ export class StructureService {
private readonly baseUrl = 'api/structures';
constructor(private http: HttpClient) {}
- public updateStructureAfterOwnerVerify(idStructure: string, user: User): Observable<any> {
- const emailUser = user.email;
- return this.http
- .put(`${this.baseUrl}/updateAfterOwnerVerify/${idStructure}`, { emailUser })
- .pipe(map((item: Structure) => new Structure(item)));
- }
public createStructure(structure: Structure, profile: User): Observable<Structure> {
const userEmail = profile.email;
return this.http
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index b667d33672dc1d109d78e331afc7f0544b35a140..be60de5977958cd6076f4e843331bc8908d9d695 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -21,6 +21,8 @@ import { SvgIconComponent } from './svg-icon/svg-icon.component';
import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
import { ButtonV3Component } from './v3/button/button.component';
+import { CheckboxV3Component } from './v3/checkbox/checkbox.component';
+import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
import { TagItemV3Component } from './v3/tag/tag-item/tag-item.component';
// tslint:disable-next-line: max-line-length
@@ -31,9 +33,11 @@ export {
ButtonComponent,
ButtonV3Component,
CheckboxFormComponent,
+ CheckboxV3Component,
CustomModalComponent,
HourPickerComponent,
InformationStepComponent,
+ LabelCheckboxV3Component,
LogoCardComponent,
ModalConfirmationComponent,
PasswordFormComponent,
@@ -47,7 +51,7 @@ export {
SvgIconComponent,
TagItemV3Component,
TextInputModalComponent,
- TrainingTypePickerComponent
+ TrainingTypePickerComponent,
};
// tslint:disable-next-line:variable-name
@@ -76,4 +80,6 @@ export const SharedComponents = [
ProgressBarComponent,
StructurePublicTargetComponent,
TagItemV3Component,
+ CheckboxV3Component,
+ LabelCheckboxV3Component,
];
diff --git a/src/app/shared/components/v3/checkbox/check-grey.svg b/src/app/shared/components/v3/checkbox/check-grey.svg
new file mode 100644
index 0000000000000000000000000000000000000000..abf9e0b21985ed7ebe495e6e27eee69008f4be09
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/check-grey.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66668 10.1147L12.7947 3.98599L13.738 4.92866L6.66668 12L2.42401 7.75733L3.36668 6.81466L6.66668 10.1147Z" fill="#696969"/>
+</svg>
diff --git a/src/app/shared/components/v3/checkbox/check.svg b/src/app/shared/components/v3/checkbox/check.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f83484aa5ea134b2c8ded5aa266f9e91a5cc1239
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/check.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66668 10.1147L12.7947 3.98599L13.738 4.92866L6.66668 12L2.42401 7.75733L3.36668 6.81466L6.66668 10.1147Z" fill="white"/>
+</svg>
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.html b/src/app/shared/components/v3/checkbox/checkbox.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..22a577d95a99e09a9ccfab4726b09ea106d01252
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.html
@@ -0,0 +1,8 @@
+<input
+ type="checkbox"
+ [id]="id"
+ [ngClass]="classes"
+ [checked]="checked"
+ [disabled]="disabled"
+ (click)="action.emit($event)"
+/>
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.scss b/src/app/shared/components/v3/checkbox/checkbox.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ae11ca617cd85dc94dea94fecaa30bd9850b978d
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.scss
@@ -0,0 +1,45 @@
+@import 'color';
+
+input {
+ appearance: none;
+ border-radius: 4px;
+ transition: all 0.2s ease-in-out;
+ background-color: $white;
+ border: 1px solid $grey-1;
+ cursor: pointer;
+
+ &.medium {
+ width: 24px;
+ height: 24px;
+ }
+ &.small {
+ width: 16px;
+ height: 16px;
+ }
+
+ &:checked {
+ background-color: $grey-1;
+ background-image: url('./check.svg');
+ stroke: $white;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 16px 16px;
+ &:disabled {
+ background-color: $grey-6;
+ background-image: url('./check-grey.svg');
+ }
+ // transition: background-image 2s ease;
+ }
+
+ &:focus-visible {
+ outline-offset: 2px;
+ outline: 2px solid $blue-focus;
+ }
+
+ &:not(.checked) {
+ &:disabled {
+ cursor: not-allowed;
+ border: 1px solid $grey-6;
+ }
+ }
+}
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.ts b/src/app/shared/components/v3/checkbox/checkbox.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..970c81eeaa3576dea17e22ad0769cd01a5fe9a4f
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-v3-checkbox',
+ templateUrl: './checkbox.component.html',
+ styleUrls: ['./checkbox.component.scss'],
+})
+export class CheckboxV3Component {
+ /** HTML id associated with for */
+ @Input() id: string;
+
+ /** Checked ? */
+ @Input() checked: boolean;
+
+ /** What size should the checkbox be ? */
+ @Input() size?: 'small' | 'medium' = 'medium';
+
+ @Input() disabled?: boolean;
+
+ @Output() action = new EventEmitter<Event>();
+
+ public get classes(): string[] {
+ return [this.size];
+ }
+}
diff --git a/src/app/shared/components/v3/checkbox/checkbox.stories.ts b/src/app/shared/components/v3/checkbox/checkbox.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0bcd19b7fe33f8b9375cbacdc9bc09dab5b487a
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/checkbox.stories.ts
@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { CheckboxV3Component } from './checkbox.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<CheckboxV3Component> = {
+ title: 'Components/Checkbox',
+ component: CheckboxV3Component,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<CheckboxV3Component>;
+
+export const CheckBoxSmall: Story = {
+ args: {
+ checked: true,
+ size: 'small',
+ },
+};
+
+export const CheckboxMedium: Story = {
+ args: {
+ checked: false,
+ size: 'medium',
+ },
+};
+
+export const CheckboxMediumChecked: Story = {
+ args: {
+ ...CheckboxMedium.args,
+ checked: true,
+ },
+};
+
+export const DisabledNotChecked: Story = {
+ args: {
+ disabled: true,
+ checked: false,
+ },
+};
+
+export const DisabledChecked: Story = {
+ args: {
+ disabled: true,
+ checked: true,
+ },
+};
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..e1527edb99758efd723f07186f8ae7028bbf99af
--- /dev/null
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html
@@ -0,0 +1,17 @@
+<div>
+ <div class="row">
+ <app-v3-checkbox [id]="for" [size]="'small'" [checked]="checked" (action)="action.emit($event)" />
+ <label [for]="for">{{ label }}</label>
+ </div>
+
+ <div class="row">
+ <div class="empty"></div>
+ <span class="description">{{ description }}</span>
+ </div>
+
+ <div *ngIf="status && statusText" class="row">
+ <img *ngIf="status === 'error'" src="assets/ico/error.svg" alt="" />
+ <img *ngIf="status === 'success'" src="assets/ico/success.svg" alt="" />
+ <span class="stateText" [ngClass]="status"> {{ statusText }}</span>
+ </div>
+</div>
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d2a00a44cbf5348981c7e12e0861ec491667d015
--- /dev/null
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss
@@ -0,0 +1,39 @@
+@import 'color';
+@import 'typography';
+
+.row {
+ display: flex;
+ gap: 8px;
+ &:nth-child(3) {
+ margin-top: 12px;
+ }
+
+ .empty {
+ width: 23px;
+ }
+}
+
+label {
+ line-height: 24px;
+ font-size: $font-size-xsmall;
+ color: $grey-1;
+ cursor: pointer;
+ user-select: none;
+ grid-column-start: 2;
+}
+
+.description {
+ color: $grey-3;
+ font-size: $font-size-xxsmall;
+ grid-column-start: 2;
+}
+
+.stateText {
+ font-size: $font-size-xxsmall;
+ &.success {
+ color: $green-success;
+ }
+ &.error {
+ color: $red-error;
+ }
+}
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..026c5063aa5ac4158d9eb62cdb3133f98e0eccb5
--- /dev/null
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-v3-label-checkbox',
+ templateUrl: './label-checkbox.component.html',
+ styleUrls: ['./label-checkbox.component.scss'],
+})
+export class LabelCheckboxV3Component {
+ /** Label text to display */
+ @Input() label: string;
+
+ /** HTML for that will control checkbox */
+ @Input() for: string;
+
+ @Input() checked: boolean;
+
+ /** Additional label description */
+ @Input() description?: string;
+
+ /** What additional data should be displayed ? error or success */
+ @Input() status?: 'error' | 'success';
+
+ /** Additional text to display on error or success */
+ @Input() statusText?: string;
+
+ @Output() action = new EventEmitter<Event>();
+}
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.stories.ts b/src/app/shared/components/v3/label-checkbox/label-checkbox.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d816b80c6ddbd1145fcc86844974f0ecce9d414
--- /dev/null
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.stories.ts
@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { CheckboxV3Component } from '../checkbox/checkbox.component';
+import { LabelCheckboxV3Component } from './label-checkbox.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<LabelCheckboxV3Component> = {
+ title: 'Components/Label checkbox',
+ component: LabelCheckboxV3Component,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent, CheckboxV3Component],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<LabelCheckboxV3Component>;
+
+export const Label: Story = {
+ args: {
+ label: 'Label case à cocher',
+ for: 'check1',
+ checked: false,
+ },
+};
+
+export const LabelChecked: Story = {
+ args: {
+ label: 'Label case à cocher',
+ for: 'check2',
+ checked: true,
+ },
+};
+
+export const LabelDescribed: Story = {
+ args: {
+ ...Label.args,
+ for: 'check3',
+ description: 'Texte de description additionnel',
+ },
+};
+
+export const LabelSuccess: Story = {
+ args: {
+ ...LabelDescribed.args,
+ for: 'check4',
+ status: 'success',
+ statusText: 'Texte de succès',
+ },
+};
+
+export const LabelError: Story = {
+ args: {
+ ...LabelDescribed.args,
+ for: 'check5',
+ status: 'error',
+ statusText: "Texte d'erreur",
+ },
+};
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 774ec09d69fc57d7a9729d46ad0d9bfcea5a89f0..4326cb27def3f43fdc347a28bdc521e60e211a85 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -8,16 +8,13 @@ $grey-3: #696969;
$grey-3-15: #33333326;
$grey-3-20: #33333333;
// 4 should be something else
-// 4 should be something else
$grey-4: #bdbdbd;
$grey-5: #bdbdbd;
$grey-6: #dedede;
$grey-7: #f4f4f4;
// 8 should be something else
-// 8 should be something else
$grey-8: #f8f8f8;
$grey-9: #f8f8f8;
-$grey-9: #f8f8f8;
/* REDS */
$red: #da3635;
$red-20: #da363533; // main red with 20% opacity
diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss
index 072843f02f9e1489f3cd5c0848f3600063212140..bfb9c6aeab3b387144e92a0dea8beb4bfe947afe 100644
--- a/src/assets/scss/_ghost.scss
+++ b/src/assets/scss/_ghost.scss
@@ -28,6 +28,9 @@ $margin-post: 20px;
> div > * + * {
margin-top: 1em;
}
+ figure {
+ margin: 1em 0 0 0;
+ }
}
.gh-canvas {
display: grid;
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 4eb047c441ccd15cd9048a4195ac63c35cb1336a..d311193145fd8827881507f3932858f9b9ae149e 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -4,3 +4,4 @@ $header-height-phone: 70px;
$footer-height-phone: 75px;
$header-post-height: 180px;
$content-desktop-width: 980px;
+$orientation-progressBarAndButtons: 119px;
diff --git a/src/stories/button.component.ts b/src/stories/button.component.ts
index e7a804aa53129f3feb13442823957ef6183d81f2..cea6dd4cd42d91a21dcc653c3f3423363d8f69f9 100644
--- a/src/stories/button.component.ts
+++ b/src/stories/button.component.ts
@@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'storybook-button',
diff --git a/src/stories/header.component.ts b/src/stories/header.component.ts
index 1e63bf2165679b4cca8a0c48b220eabc16714c36..690529c784a150648b793a3f82e426e7a80a52e8 100644
--- a/src/stories/header.component.ts
+++ b/src/stories/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import type { User } from './User';
@Component({