4 files changed, 67 insertions, 0 deletions
diff --git a/ui/app/components/breadcrumbs/breadcrumbs.component.js b/ui/app/components/breadcrumbs/breadcrumbs.component.js
new file mode 100644
index 000000000..6644836db
--- /dev/null
+++ b/ui/app/components/breadcrumbs/breadcrumbs.component.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class Breadcrumbs extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    currentIndex: PropTypes.number,
+    total: PropTypes.number,
+  }
+
+  render () {
+    const { className, currentIndex, total } = this.props
+
+    return (
+      <div className={classnames('breadcrumbs', className)}>
+        {
+          Array(total).fill().map((_, i) => (
+            <div
+              key={i}
+              className="breadcrumb"
+              style={{backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF'}}
+            />
+          ))
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/breadcrumbs/index.js b/ui/app/components/breadcrumbs/index.js
new file mode 100644
index 000000000..07a11574f
--- /dev/null
+++ b/ui/app/components/breadcrumbs/index.js
@@ -0,0 +1 @@
+export { default } from './breadcrumbs.component'
diff --git a/ui/app/components/breadcrumbs/index.scss b/ui/app/components/breadcrumbs/index.scss
new file mode 100644
index 000000000..e23aa7970
--- /dev/null
+++ b/ui/app/components/breadcrumbs/index.scss
@@ -0,0 +1,15 @@
+.breadcrumbs {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.breadcrumb {
+  height: 10px;
+  width: 10px;
+  border: 1px solid #979797;
+  border-radius: 50%;
+}
+
+.breadcrumb + .breadcrumb {
+  margin-left: 10px;
+}
diff --git a/ui/app/components/breadcrumbs/tests/breadcrumbs.component.test.js b/ui/app/components/breadcrumbs/tests/breadcrumbs.component.test.js
new file mode 100644
index 000000000..5013c5b60
--- /dev/null
+++ b/ui/app/components/breadcrumbs/tests/breadcrumbs.component.test.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import Breadcrumbs from '../breadcrumbs.component'
+
+describe('Breadcrumbs Component', () => {
+  it('should render with the correct colors', () => {
+    const wrapper = shallow(
+      <Breadcrumbs
+        currentIndex={1}
+        total={3}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find('.breadcrumbs').length, 1)
+    assert.equal(wrapper.find('.breadcrumb').length, 3)
+    assert.equal(wrapper.find('.breadcrumb').at(0).props().style['backgroundColor'], '#FFFFFF')
+    assert.equal(wrapper.find('.breadcrumb').at(1).props().style['backgroundColor'], '#D8D8D8')
+    assert.equal(wrapper.find('.breadcrumb').at(2).props().style['backgroundColor'], '#FFFFFF')
+  })
+})