Your IP : 216.73.216.171
/**
* External dependencies
*/
import React from 'react';
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
/**
* Internal dependencies
*/
import Icon from '../sui-icon';
import './style.scss';
/**
* StepsBar component.
*
* @since 3.2.0
*
* @param {number} currentStep Current step.
* @return {JSX.Element} Component.
*/
export default function StepsBar( { currentStep } ) {
const steps = [
{ number: 1, title: __( 'Server Type', 'wphb' ) },
{ number: 2, title: __( 'Set Expiry', 'wphb' ) },
{ number: 3, title: __( 'Add Rules', 'wphb' ) },
];
const completeTooltip = __( 'This stage is already completed.', 'wphb' );
const getStepClass = ( step ) => {
if ( step > currentStep ) {
return 'wizard-bar-step';
}
return step === currentStep ? 'wizard-bar-step current' : 'wizard-bar-step sui-tooltip done';
};
const getStepNumber = ( step ) => {
return currentStep > step ? <Icon classes="sui-icon-check" /> : step;
};
return (
<div className="sui-sidenav">
<span className="wizard-bar-subtitle">
{ __( 'Setup', 'wphb' ) }
</span>
<div className="wizard-bar-title">
<h4>{ __( 'Browser Caching', 'wphb' ) }</h4>
</div>
<div className="wizard-steps-container">
<svg className="svg-mobile" focusable="false" aria-hidden="true">
<line x1="0" x2="50%"
stroke={ 1 !== currentStep ? '#1ABC9C' : '#E6E6E6' }
/>
<line x1="50%" x2="100%"
stroke={ 3 === currentStep ? '#1ABC9C' : '#E6E6E6' }
/>
</svg>
<ul>
{ steps.map( ( step ) => (
<React.Fragment key={ step.number }>
<li
className={ getStepClass( step.number ) }
data-tooltip={ completeTooltip }
>
<div className="wizard-bar-step-number">
{ getStepNumber( step.number ) }
</div>
{ step.title }
</li>
{ 3 !== step.number && (
<svg className="svg-desktop" focusable="false" aria-hidden="true">
<line y1="0" y2="40px"
stroke={ step.number < currentStep ? '#1ABC9C' : '#E6E6E6' }
/>
</svg>
) }
</React.Fragment>
) ) }
</ul>
</div>
</div>
);
}