From 143a598cba5a6ed98ac66e3411b386d2e96b0621 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 14 Feb 2024 08:51:26 +0100
Subject: [PATCH 1/3] chore(ui): add storybook variant of progress-bar
---
.../progress-bar/progress-bar.component.html | 2 +-
.../progress-bar/progress-bar.component.scss | 14 +++++++--
.../progress-bar/progress-bar.component.ts | 12 ++++----
.../progress-bar/progress-bar.stories.ts | 30 +++++++++++++++++++
4 files changed, 49 insertions(+), 9 deletions(-)
create mode 100644 src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.html b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.html
index e3557df5a..150f13708 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.html
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.html
@@ -3,7 +3,7 @@
<p *ngIf="formType === formTypeEnum.profile">Création du profil</p>
<p *ngIf="formType === formTypeEnum.structure">Création de la structure</p>
<p *ngIf="formType === formTypeEnum.personaloffer">Création d'offre d’accompagnements</p>
- <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
+ <div class="container">
<label for="progressForm" [ngClass]="{ validate: currentPage === nbSteps }"
>{{ progressStatus > 100 ? 100 : (progressStatus | number: '1.0-0') }}%
</label>
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
index 3d2c2b9dc..e440e9124 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -19,6 +19,14 @@
@media print {
display: none;
}
+
+ .container {
+ display: flex;
+ flex-direction: row;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
progress {
width: 100%;
height: 6px;
@@ -34,18 +42,18 @@
border-radius: 7px;
}
&::-webkit-progress-value {
- background-color: $primary-color;
+ background-color: $red;
border-radius: 12px;
transition: width 0.5s;
}
&::-moz-progress-bar {
- background-color: $primary-color;
+ background-color: $red;
border-radius: 12px;
}
}
label {
@include font-bold-14;
- color: $primary-color;
+ color: $red;
min-width: 26px;
}
}
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.ts b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.ts
index 7b2862691..088e78892 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.ts
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.ts
@@ -10,13 +10,15 @@ import { structureFormStep } from '../../structure-form/structureFormStep.enum';
})
export class ProgressBarComponent implements OnChanges {
@Input() formType: formType;
- @Input() isEditMode: boolean;
- @Input() currentPage: number;
- @Input() nbSteps: number;
+ /** Number of current step */
+ @Input({ required: true }) currentPage: number;
+ /** Total number of steps */
+ @Input({ required: true }) nbSteps: number;
public progressStatus: number;
public formTypeEnum = formType;
- public profileFormSteps: number = Object.keys(profileFormStep).length / 2;
- public structureFormSteps: number = Object.keys(structureFormStep).length / 2;
+ // When working with numeric enums, divide the result by 2, because a reverse mapping is generated.
+ public profileFormSteps = Object.keys(profileFormStep).length / 2;
+ public structureFormSteps = Object.keys(structureFormStep).length / 2;
ngOnChanges(changes: SimpleChanges): void {
if (changes.currentPage) {
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts b/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts
new file mode 100644
index 000000000..8973d427e
--- /dev/null
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { formType } from '../../formType.enum';
+import { ProgressBarComponent } from './progress-bar.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ProgressBarComponent> = {
+ title: 'Components/Form',
+ component: ProgressBarComponent,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ProgressBarComponent>;
+
+export const ProgressBar: Story = {
+ args: {
+ formType: formType.account,
+ currentPage: 5,
+ nbSteps: 15,
+ },
+};
--
GitLab
From 0783ed9b2927e9de82443b792b3ce47ab6fc23ec Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 14 Feb 2024 09:02:20 +0100
Subject: [PATCH 2/3] fix folder and add range
---
.../progress-bar/progress-bar.stories.ts | 15 +++++++++++++--
1 file changed, 13 insertions(+), 2 deletions(-)
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts b/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts
index 8973d427e..25d0b7786 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts
@@ -6,7 +6,7 @@ import { ProgressBarComponent } from './progress-bar.component';
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
const meta: Meta<ProgressBarComponent> = {
- title: 'Components/Form',
+ title: 'Form/Progress bar',
component: ProgressBarComponent,
tags: ['autodocs'],
decorators: [
@@ -23,8 +23,19 @@ type Story = StoryObj<ProgressBarComponent>;
export const ProgressBar: Story = {
args: {
- formType: formType.account,
currentPage: 5,
+ formType: formType.account,
nbSteps: 15,
},
+ argTypes: {
+ currentPage: {
+ type: 'number',
+ description: 'Play with this value to see the animation of the progress',
+ control: {
+ type: 'range',
+ min: 0,
+ max: 15,
+ },
+ },
+ },
};
--
GitLab
From b77abb8a58a478d4c761379812fd95b011db4cd9 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Fri, 16 Feb 2024 09:58:03 +0100
Subject: [PATCH 3/3] remove grey background
---
.../global-components/progress-bar/progress-bar.component.scss | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
index e440e9124..72b5f2c74 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -4,7 +4,6 @@
@import 'breakpoint';
.progressBar {
- background-color: $grey-9;
padding: 1rem 6rem;
@media #{$tablet} {
--
GitLab