Wizard Pattern

The styling is in "ux-prototype/custom-bootstrap/css/scss/custom-bootstrap/pattern-wizard.scss"

The javascript is in "ux-prototype/custom-bootstrap/js/custom-bootstrap/pattern-wizard.js"

This wizard bar should is styled with "class=wizard_bar". And uses bootstrap columns to divide between the progress bar and the buttons. See Code example below:

Example 1

How To Use

1. Copy both parts below "Part 1: Wizard Bar & Part 2: Content" into your html page

2. Add or remove steps by modifying the unordered lists in Part 1 AND add or remove children divs inside id=contentOfWizard.

(note: ,id of first step and first content must be kept, back button must start as is, the javascript will modify accordingly )

3. Insert your content for each step in their respective divs.

Part1: Wizard Bar (include steps and all buttons)

<div class= "wizard_bar">
  	<div class= "row">
	    	<div class = "col-md-8">

			<ul id="steps_bar">
				<li id="wizard-step-1" class="active visited">Get Component</li>
				<li >Readiness Check</li>
				<li >Add Component</li>
				<li >Last Step</li>
			</ul>
		</div>	

	  	<div class = "col-md-4">

			<div class="alignment-for-buttons">

			   	<a href= "#" class="btn btn-link"> Cancel </a>
		       		<button disabled id="back_button" class="back_button disabled">Back</button>
		      		<button id="next_button" class="next_button">Next</button> 
		                     
         		</div>
    		</div>
	 </div>
</div> 
	        

Part2: Content Div

<div id ="contentOfWizard" class="wizard-content">
	<div id="contentOfStep-1" >

		<h1>FPO content 1</h1>

	</div>
	<div id="contentOfStep-2" class="hide-non-first-steps" >

		<h1>FPO content 2</h1>

	</div>

	<div id="contentOfStep-3" class="hide-non-first-steps" >

		<h1>FPO content 3</h1>

	</div>
	<div id="contentOfStep-4" class="hide-non-first-steps" >

		<h1>FPO content 4</h1>

	</div>
</div>

Example 2

Wizard bar

	<div class= "wizard_bar">

        <div class= "row">
        	<!--steps section-->
	         <div class = "col-md-8">
	          
	            <!-- progressbar, Add to this list for more steps. First step must have the id and class as sepcified -->
				<ul id="steps_bar_2">
					<li id="wizard-step-2" class="active visited">Label</li>
					<li >SecondLabel</li>
					<li >ThirdLabel</li>
					<li >FourthLabel</li>
				</ul>

			 </div>	
			 <!--buttons section-->
		  	<div class = "col-md-4">

				<div class="alignment-for-buttons">
					<a href= "#" class="btn btn-link"> Cancel </a>

					<!--Back button must initially be disabled -->
		            <button disabled id="back_button2" class="back_button disabled">Back</button>

		            <button id="next_button2" class="next_button">Next</button> 


		           	<button class="btn btn-primary button-bar_margin second-wizard-save-button">Save</button>

		                     
	         	</div>

        	 </div>

		 </div>
	</div> 

Content

	<div id ="contentOfWizard_2" class="wizard-content">
		<div id="contentOfStep_2" >

			<h1>FPO content 1</h1>

		</div>
		<div class="hide-non-first-steps" >

			<h1>FPO content 2</h1>

		</div>
		
		<div class="hide-non-first-steps" >

			<h1>FPO content 3</h1>

		</div>
		<div class="hide-non-first-steps" >

			<h1>FPO content 4</h1>

		</div>
	</div>