chore(ui): add storybook variant of progress-bar

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>

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} {
@@ -19,6 +18,14 @@
   @media print {
     display: none;
   }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    align-items: center;
+  }
+
   progress {
     width: 100%;
     height: 6px;
@@ -34,18 +41,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;
   }
 }

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) {

src/app/form/form-view/global-components/progress-bar/progress-bar.stories.ts

+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: 'Form/Progress bar',
+  component: ProgressBarComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      declarations: [],
+      imports: [CommonModule],
+    }),
+  ],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ProgressBarComponent>;
+
+export const ProgressBar: Story = {
+  args: {
+    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,
+      },
+    },
+  },
+};