Salesforce lightning vertical progress indicator in aura component

Steps.cmp

<aura:component controller="StepsController" implements="flexipage:availableForRecordHome,force:hasRecordId">

    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="currentStep" type="string" default="1"/>

    <lightning:card>
        <aura:set attribute="title" >
            <lightning:icon iconName="utility:connected_apps" size="small"/>
            Sendoso Assistant
        </aura:set>

        <aura:set attribute="actions">
            Max Budget: $3000
        </aura:set>


        <div class="slds-card__body slds-card__body_inner">
            <div class="slds-progress slds-progress_vertical">
                <ol class="slds-progress__list">
                    
                    <li class="{! 'slds-progress__item' + ' ' + (v.currentStep != '1' ? 'slds-is-completed' : 'slds-is-active')}">
                        <div class="slds-progress__marker">
                            <!-- <span class="slds-assistive-text">Active</span> -->
                        </div>

                        <div class="slds-progress__item_content slds-grid slds-grid_align-spread slds-wrap">
                            
                            <div class="slds-size_2-of-2">
                                Step 1: Who's getting this box?
                            </div>
                            <div class="slds-size_2-of-2">
                                <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Contact">
                                    <div class="slds-box">
                                        <lightning:outputField fieldName="Name" />
                                        <lightning:outputField fieldName="Email" />
                                    </div>
                                </lightning:recordViewForm>
                            </div>

                       </div>
                    </li>

                    <li class="{! 'slds-progress__item' + ' ' + (v.currentStep == '2' ? 'slds-is-active' : '') + (v.currentStep == '3' ? 'slds-is-completed' : '')}">
                        <div class="slds-progress__marker">
                            <!-- <span class="slds-assistive-text">Active</span> -->
                        </div>
                        <div class="slds-progress__item_content slds-grid slds-grid_align-spread slds-wrap">
                            
                            <div class="slds-size_2-of-2">
                                Step 2: What do you want to send them?
                            </div>
                            <div class="slds-size_2-of-2">
                                <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Contact">
                                    <div class="slds-box">
                                        <lightning:outputField fieldName="Name" />
                                        <lightning:outputField fieldName="Email" />
                                    </div>
                                </lightning:recordViewForm>
                            </div>
                            
                        </div>
                    </li>

                    <li class="{! 'slds-progress__item' + ' ' + (v.currentStep == '3' ? 'slds-is-completed' : '')}">
                        <div class="slds-progress__marker"></div>
                        <div class="slds-progress__item_content slds-grid slds-grid_align-spread slds-wrap">
                            
                            <div class="slds-size_2-of-2">
                                Step 3: What do you want to say to them?
                            </div>
                            
                            <div class="slds-size_2-of-2">
                                <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Contact">
                                    <div class="slds-box">
                                        <lightning:outputField fieldName="Name" />
                                        <lightning:outputField fieldName="Email" />
                                    </div>
                                </lightning:recordViewForm>
                            </div>
                                
                        </div>
                    </li>
                </ol>
            </div>
            <lightning:button variant="brand" label="Next" onclick="{!c.nextStep}"/>
        </div>
    </lightning:card>
</aura:component>

StepsController.js

({
    nextStep: function(component, event, helper) {
        var step = component.get("v.currentStep");
        if(step === '1') {
            component.set("v.currentStep", "2");
            getTouches();
        }

        if(step === '2') {
            component.set("v.currentStep", "3");
        }

        if(step === '3') {
            component.set("v.currentStep", "1");
        }
        console.log('value of step');
        console.log(component.get("v.currentStep"));
    }
    
})

Thank You For The Share!