Unlocking an additional layer of safety to your iPhone is less difficult than you might suppose. With Two-Factor Time-Based One-Time Password (TOTP) authentication, you may bolster your device's protection and other website safety without relying on 1/3-party apps. Here's how you could set it up:
SLDS path is a graphical representation of the process. Here is a component for this. Just pass the status of the process in this component.
 |
| SLDS Path |
Component:
<apex:component >
<apex:attribute name="Status" type="string" required="false" description="Status" default="Submit"/>
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<div class="slds-path">
<div class="slds-grid slds-path__track">
<div class="slds-grid slds-path__scroller-container">
<div class="slds-path__scroller" role="application">
<div class="slds-path__scroller_inner">
<ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
<apex:outputPanel >
<li class="slds-path__item slds-is-won" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-6" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span style="color:white;">Record No</span>
</a>
</li>
</apex:outputPanel>
<li class="slds-path__item {!CASE(Status,'Draft','slds-is-current slds-is-active','Cancelled','slds-is-incomplete','Submit','slds-is-complete','Approved','slds-is-complete','slds-is-incomplete')}" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-6" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span>Draft</span>
</a>
</li>
<li class="slds-path__item {!CASE(Status,'Submit','slds-is-current slds-is-active','Draft','slds-is-complete','Approved','slds-is-incomplete','slds-is-incomplete')}" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-7" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span >Submit</span>
</a>
</li>
<li class="slds-path__item {!CASE(Status,'Approved','slds-is-current slds-is-active','Draft','slds-is-incomplete','slds-is-incomplete')}" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-7" role="option" tabindex="-1">
<span class="slds-path__stage">
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span >Approved</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</apex:component>