Component: Vertical Stepper

[gfellerph]

Figma: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=13414%3A61408&mode=design&t=Q7MUVh3G2mYSJ7OV-1

Story Book:

Comments: Check with Philipp if this Task can be deleted or if this is something to work on.

---

I need to integrate a vertical version of the stepper (like this one: https://design-system.post.ch/#/post-samples/stepper)

Is it already possible to have it by using the current one of the design system? Or do you think a whole new component needs to be developed for that?

Today we have some kind of vertical stepper which doesn’t really look nice at all 😊

[oliverschuerch]

Can we get a code example?

[Mattiamato]

Custom css:

.innerStep {
    width: 24px;
    height: 24px;
    background-color: #fc0;
    border-radius: 50%;
}

.barStep {
    width: .2rem;
    height: 3rem;
    margin-left: 0.6rem;
    background-color: #fc0;
    border: 2px solid #fc0;
    margin-bottom: 8px;
}

.disabled {
    background-color: gray !important;
    border-color: gray !important;
}

Example:

<div class="container">
    <div class="row">
        <div class="col-12">

            <div class="row mt-5">
                <div class="col-2 d-flex align-items-center">
                    <div class="innerStep">
                        <em class="pi pi-2105"></em>
                    </div>
                </div>
                <div class="col-8">
                    <h5>Login</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="barStep"></div>
                </div>
                <div class="col-8">
                    <h5>&nbsp;</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="innerStep">
                        <em class="pi pi-2105"></em>
                    </div>
                </div>
                <div class="col-8">
                    <h5>Subscribe and create an Application</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="barStep"></div>
                </div>
                <div class="col-8">
                    <h5>&nbsp;</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="innerStep" style="text-align: center">
                        <p style="padding-top: 3px;"><strong>3</strong></p>
                    </div>
                </div>
                <div class="col-8">
                    <ng-template #descriptionApproval>
                        <div [innerHTML]="'popover.subscription.approval' | translate"></div>
                    </ng-template>
                    <h5>
                        <strong>
                            Wait for subscription approval
                            <em class="pi pi-1.5x pi-info" placement="bottom"
                                [ngbPopover]="descriptionApproval"
                                container="body"
                                triggers="mouseenter:mouseleave"></em>
                        </strong>
                    </h5>
                </div>
            </div>
            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="barStep disabled"></div>
                </div>
                <div class="col-8">
                    <h5>&nbsp;</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="innerStep disabled" style="text-align: center">
                        <p style="padding-top: 3px; color: white;"><strong>4</strong></p>
                    </div>
                </div>
                <div class="col-8">
                    <h5>Go productive</h5>
                </div>
            </div>

        </div>
    </div>

</div>

[oliverschuerch]

We have implemented something similar in the track and trace business project. I can provide some code snippets, if needed.

[alizedebray]

Waiting for the stepper pattern to be finalized #1962.

[gfellerph]

Closing in favor of #3363