Finished top section

Author: hazzo

.idea/workspace.xml

@@ -19,5 +19,8 @@
     "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "bootstrap": "^4.0.0-beta.2"
   }
 }

package-lock.json

@@ -1,25 +1,40 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import logo from './logo.svg';
 import './App.css';
+import 'bootstrap/dist/css/bootstrap.css';
 
 import '../publish_component/Stepper'
-import Stepper from "../publish_component/Stepper";
+import Stepper from '../publish_component/Stepper';
+import DummyData from '../publish_component/DummyData'
 
 class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-          <Stepper/>
-      </div>
-    );
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            steps: DummyData
+        };
+    }
+
+
+    render() {
+        return (
+            <div className="container-fluid App no-gutters">
+                <div className="row" style={{marginBottom: '2rem'}}>
+                    <div className="col no-gutters">
+                        <header className="App-header">
+                            <img src={logo} className="App-logo" alt="logo"/>
+                            <h1 className="App-title">Welcome to React</h1>
+                        </header>
+                    </div>
+                </div>
+                <div className="row justify-content-center align-items-center">
+                    <div className="col-8">
+                        <Stepper steps={this.state.steps}/>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default App;

package.json

@@ -0,0 +1,18 @@
+
+
+
+export default [
+    {
+        icon: 'mail',
+        name: 'first',
+        title: 'Sample title 1',
+        subtitle: 'Subtitle sample'
+
+    },
+    {
+        icon: 'report_problem',
+        name: 'second',
+        title: 'Sample title 2',
+        subtitle: 'Subtitle sample'
+    }
+]

src/demo/App.js

@@ -2,24 +2,46 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
 class StepIndicator extends Component {
+    constructor(props) {
+        super(props);
+
+        // Methods binding this
+        this.isStepActive = this.isStepActive.bind(this);
+    }
+
+    isStepActive(index) {
+        if (this.props.currentStep.index === index) {
+            return 'activated'
+        } else {
+            return 'deactivated'
+        }
+    }
+
     render() {
         return (
-            <div className="step">
+            <div className={['step', this.isStepActive(this.props.index)].join(' ')}
+                 style={{width: `${100 / this.props.stepsLength}%`}}
+            >
                 <div className="circle">
                     <i className="material-icons md-18">
-                        done
+                        {(this.props.step.completed) ? 'done' : this.props.step.icon}
                     </i>
                 </div>
                 <div className="step-title">
-                    <h4>Test</h4>
-                    <h5 className="step-subtitle">Subtest</h5>
+                    <h4>{this.props.step.title}</h4>
+                    <h5 className="step-subtitle">{this.props.step.subtitle}</h5>
                 </div>
             </div>
         )
     }
 }
 
 StepIndicator.propTypes = {
+    index: PropTypes.number,
+    step: PropTypes.object,
+    currentStep: PropTypes.object,
+    stepsLength: PropTypes.number
+
 };
 
 export default StepIndicator;

src/publish_component/DummyData.js

@@ -33,12 +33,20 @@ class Stepper extends Component {
                         <TopButtons show={this.props.topButtons} previous={true}
                                     currentIndex={this.state.currentStep.index}/>
 
-                        <StepIndicator/>
+                        {/*Loops through indicator to show based on step amount*/}
+                        {this.props.steps.map( (step, index, array) =>
+                            <StepIndicator step={step} index={index} stepsLength={array.length}
+                                           currentStep={this.state.currentStep}/>
+                        )}
 
                         <TopButtons show={this.props.topButtons} previous={false}
                                     currentIndex={this.state.currentStep.index}/>
                     </div>
                 </div>
+
+                <div className="content">
+
+                </div>
             </div>
         )
     }