Progress steps

A widget for showing progress of the user on a funnel with multiple steps
The input should be between 0 and 100. It will be bound as such if you go over or under.
Post a contest
2
Award an entry
Rate the entries you receive and leave comments for improvement on your favorites. When you find an entry you love, award it to own it legally.
3
Handover
4
Provide feedback
Current Step:
import type { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ButtonColor } from '@freelancer/ui/button';
import { InputType } from '@freelancer/ui/input';
import { ProgressOrientation, ProgressSize } from '@freelancer/ui/progress-bar';
import { required } from '@freelancer/ui/validators';
import type { Observable } from 'rxjs';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'fl-progress-steps-vertical-orientation-story',
  template: `
    <fl-card class="Card">
      <fl-progress-steps
        [currentStep]="control.value"
        [orientation]="ProgressOrientation.VERTICAL"
        [flMarginBottom]="'xsmall'"
      >
        <fl-progress-step-item
          stepTitle="Post a contest"
        ></fl-progress-step-item>
        <fl-progress-step-item stepTitle="Award an entry">
          <fl-progress-step-content>
            <ng-container *ngIf="showContent$ | flAsync; else loading">
              Rate the entries you receive and leave comments for improvement on
              your favorites. When you find an entry you love, award it to own
              it legally.
            </ng-container>
          </fl-progress-step-content>
        </fl-progress-step-item>
        <fl-progress-step-item stepTitle="Handover">
          <fl-progress-step-content>
            Complete the Contest Handover to own Jane D.'s entry legally.
          </fl-progress-step-content>
        </fl-progress-step-item>
        <fl-progress-step-item stepTitle="Provide feedback">
          <fl-progress-step-content>
            Share your work experience with Jane D. by providing feedback.
          </fl-progress-step-content>
        </fl-progress-step-item>
      </fl-progress-steps>
      <div>
        <fl-text>Current Step:</fl-text>
        <fl-input
          placeholder="Change current step"
          [control]="control"
          [type]="InputType.NUMBER"
        ></fl-input>
      </div>
    </fl-card>

    <ng-template #loading>
      <fl-loading-text
        [padded]="false"
        [rows]="2"
      ></fl-loading-text>
    </ng-template>
  `,
  styleUrls: ['./vertical-orientation.story.scss'],
})
export class ProgressStepsVerticalOrientationStoryComponent implements OnInit {
  ButtonColor = ButtonColor;
  InputType = InputType;
  ProgressSize = ProgressSize;
  ProgressOrientation = ProgressOrientation;

  control = new FormControl(2, {
    nonNullable: true,
    validators: required('This is required'),
  });

  showContent$: Observable<boolean>;

  ngOnInit(): void {
    // Delays content display to demonstrate dynamic or partial data
    this.showContent$ = of(false).pipe(
      // FIXME: T267853 - find a way to re-enable that as it breaks the screenshot tests
      // delay(2000),
      map(() => true),
    );
  }
}
@use "settings/settings" as *;

.Card {
  max-width: 300px;
}
Inputs
label : string
alwaysShowItemsContent ?: boolean = false
backgroundColor ?: ProgressStepsBackgroundColor = ProgressStepsBackgroundColor.DEFAULT
currentStep ?: number = 1
mobileLargeIndicator ?: boolean = false
orientation ?: ProgressOrientation = ProgressOrientation.HORIZONTAL
skippedSteps ?: readonly number[]
List of steps that are skipped
startStep ?: number = 1
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.