initial commit

Author: pfrazee

index.jsx

@@ -0,0 +1,29 @@
+'use babel'
+import React from 'react'
+import cls from 'classnames'
+
+function mkarray(n) {
+  var arr = []
+  arr.length = n
+  for (var i=0; i < n; i++)
+    arr[i] = false
+  return arr
+}
+
+export default class SteppedProgressBar extends React.Component {
+  render() {
+    const n = this.props.num || this.props.labels.length
+    const hasLabels = !!this.props.labels
+    const labels = this.props.labels || mkarray(n)
+    return <ul className={'stepped-progress-bar n'+n+(this.props.canGoBack?' can-go-back':'')+(hasLabels?'':' no-labels')}>
+      { labels.map((label, i) => {
+        const onClick = (this.props.canGoBack) ? (()=>this.props.onClick(i)) : undefined
+        const className = cls({
+          active: (i <= this.props.current),
+          current: (i == this.props.current)
+        })
+        return <li key={i} className={className} onClick={onClick}>{label}</li>
+      }) }
+    </ul>
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "patchkit-stepped-progress-bar",
+  "version": "1.0.0",
+  "description": "React UI component for a progress bar with multiple steps",
+  "main": "index.jsx",
+  "dependencies": {
+    "classnames": "^2.2.3",
+    "react": "^0.14.6"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ssbc/patchkit-stepped-progress-bar.git"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "component",
+    "progress",
+    "bar"
+  ],
+  "author": "Paul Frazee <[email protected]>",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/ssbc/patchkit-stepped-progress-bar/issues"
+  },
+  "homepage": "https://github.com/ssbc/patchkit-stepped-progress-bar#readme"
+}

styles.less

@@ -0,0 +1,70 @@
+// http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
+
+.stepped-progress-bar {
+  padding: 0;
+  overflow: hidden;
+  counter-reset: step;
+
+  li {
+    list-style-type: none;
+    color: gray;
+    font-size: 16px;
+    width: 100%;
+    float: left;
+    position: relative;
+    text-align: center;
+
+    &:before {
+      content: counter(step);
+      counter-increment: step;
+      position: relative;
+      z-index: 2;
+      text-align: center;
+      width: 20px;
+      line-height: 20px;
+      display: block;
+      font-size: 10px;
+      color: #333;
+      background: #ddd;
+      border-radius: 10px;
+      margin: 0 auto 5px auto;
+    }
+    &:after {
+      content: '';
+      width: 100%;
+      height: 2px;
+      background: #ddd;
+      position: absolute;
+      left: -50%;
+      top: 9px;
+      z-index: 1;
+
+      background: linear-gradient(to right, #ddd 50%, #4DA1FF 50%);
+      background-size: 200% 100%;
+      background-position: 0 0;
+      transition: background-position 1s;
+    }
+    &:first-child:after {
+      content: none; 
+    }
+    &.current {
+      color:#4DA1FF;
+    }
+    &.active:before {
+      background: #4DA1FF;
+      color: #ddd;
+    }
+    &.active:after{
+      background-position: -100% 0;
+    }
+  }
+
+  &.n2 li { width: 50%; }
+  &.n3 li { width: 33.33%; }
+  &.n4 li { width: 25%; }
+  &.n5 li { width: 20%; }
+
+  &.can-go-back li.active:before {
+    cursor: pointer;
+  }
+}