fonteva-design-guide/force-app/main/default/lwc/pfmSubheader/pfmSubheader.html

## Dev, Build and Test

<template>
    <template if:true={isDefault}>
        <div class="pfm-subheader_container">
            <div class="pfm-subheader__left">1</div>
            <div class="pfm-subheader__center">
                <div>
                    <c-pfm-text type="body" align="center">breadcrumb</c-pfm-text>
                    <c-pfm-text type="heading" align="center" size="large">title</c-pfm-text>
                </div>
            </div>
            <div class="pfm-subheader__right">1</div>
        </div>
    </template>

    <template if:true={isProgress}>
        <div class="pfm-subheader_container">
            <div class="pfm-subheader__left slds-show_large"></div>
            <nav class="pfm-subheader__center">
                <ul class="pfm-subheader_progress-tiles">
                    <template for:each={privateSteps} for:item="step">
                        <li key={step.id} >
                            <a href="javascript:void(0)"
                               class={step.class}
                               title={step.name} aria-current={step.current}
                               onclick={switchHandler}
                               data-name={step.name}
                               data-id={step.id}
                            >
                                <div class="pfm-subheader_progress-badge">
                                    <template if:true={step.complete}>
                                        <lightning-icon
                                                icon-name="utility:check"
                                                size="xx-small"
                                                variant="inverse"
                                        ></lightning-icon>
                                    </template>
                                    <template if:false={step.complete}>
                                        {step.id}
                                    </template>
                                </div>
                                <div>{step.label}</div>
                            </a>
                        </li>
                    </template>
                </ul>
                <div class="pfm-subheader_progress-picklist">
                    <template for:each={privateSteps} for:item="step">
                        <div key={step.id} if:true={step.active} class="slds-grid slds-grid_vertical-align-center">
                            <div class="slds-m-right_x-small">
                                <lightning-badge label={step.id} class="slds-badge_lightest"></lightning-badge>
                            </div>
                            <div>
                                <c-pfm-text size="small" type="heading">{step.label}</c-pfm-text>
                            </div>
                        </div>
                    </template>
                </div>
            </nav>
            <div class="pfm-subheader__right">
                <template if:true={showTimer}>
                    <c-pfm-row pull="xx-small">
                        <c-pfm-column padding="horizontal:xx-small, bottom:xx-small" v-align="middle">
                            <lightning-icon icon-name="utility:clock" size="x-small"></lightning-icon>
                        </c-pfm-column>
                        <c-pfm-column padding="horizontal:xx-small" v-align="middle">
                            <c-pfm-text if:true={timer.min} type="heading" size="medium" tabindex="0" aria-label={currentTimerValue}>
                                {timer.min}:{timer.sec}
                            </c-pfm-text>
                        </c-pfm-column>
                        <c-pfm-column
                                padding="horizontal:xx-small, bottom:xx-small"
                                v-align="middle"
                                hide-at="large"
                                onclick={showSummaryHandler}
                        >
                            <c-pfm-row>
                                <c-pfm-column padding="left:xx-small">
                                    <lightning-icon icon-name="utility:cart" size="x-small"></lightning-icon>
                                </c-pfm-column>
                                <c-pfm-column padding="left:xx-small">
                                    <c-pfm-text size="small">
                                        {cartValue}
                                    </c-pfm-text>
                                </c-pfm-column>
                            </c-pfm-row>
                        </c-pfm-column>
                    </c-pfm-row>
                    <div class="pfm-subheader_countdown-alert" role="alert" aria-live="assertive">
                        {labels.remaining} : {timer.min}
                    </div>
                </template>
            </div>
        </div>
    </template>
</template>