feat(Breadcrumbs): Add breadcrumb support

src/components/Breadcrumbs/Breadcrumbs.md

@@ -0,0 +1,25 @@
+A navigation component that indicates the user's current location in the nav hierarchy.
+
+View the [Rivet documentation for Breadcrumbs](https://rivet.uits.iu.edu/components/navigation/breadcrumb/).
+
+### Default breadcrumb
+
+```jsx
+<Breadcrumbs>
+    <a href="#">Home</a>
+    <a href="#">Files</a>
+    my-file.txt
+</Breadcrumbs>
+```
+
+### Callout example
+
+There is also a call-out modifier class that adds a small amount of padding and a light gray background. This is useful for when you need to draw more attention to the breadcrumb.
+
+```jsx
+<Breadcrumbs variant="call-out">
+    <a href="#">Home</a>
+    <a href="#">Files</a>
+    my-file.txt
+</Breadcrumbs>
+```

src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,46 @@
+
+import { mount } from 'enzyme';
+import * as React from 'react';
+import Breadcrumbs from './Breadcrumbs';
+
+describe('<Breadcrumbs />', () => {
+
+    describe('Rendering and text', ()=>{
+        it('should render without throwing an error', () => {
+            const cut = mount(<Breadcrumbs />);
+            expect(cut.find('nav > ol.rvt-breadcrumbs')).toHaveLength(1);
+        });
+        it('should take an id', () => {
+            const cut = mount(<Breadcrumbs id="the_id"/>);
+            expect(cut.find('nav#the_id')).toHaveLength(1);
+        });
+        it('should show text children', () => {
+            const cut = mount(<Breadcrumbs>The text</Breadcrumbs>);
+            expect(cut.find('nav > ol.rvt-breadcrumbs > li').text()).toEqual("The text");
+        });
+        it('should wrap multiple children in list items', () => {
+            const cut = mount(
+              <Breadcrumbs>
+                <a href="#">Link One</a>
+                Link Two
+              </Breadcrumbs>);
+            expect(cut.find('nav > ol.rvt-breadcrumbs > li').length).toEqual(2);
+        });
+        it('should mark the last child as the current page', () => {
+            const cut = mount(
+              <Breadcrumbs>
+                <a href="#">Link One</a>
+                Link Two
+              </Breadcrumbs>);
+            expect(cut.find('nav > ol.rvt-breadcrumbs > li').last().prop('aria-current')).toEqual('page');
+        });
+    })
+
+    describe('Styling', ()=>{
+        it('should have call-out style', () => {
+            const cut = mount(<Breadcrumbs variant="call-out" />);
+            expect(cut.find('nav > ol.rvt-breadcrumbs').hasClass("rvt-breadcrumbs--call-out")).toEqual(true);
+        });
+    });
+
+});

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,30 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+import * as Rivet from '../util/Rivet';
+
+export interface BreadcrumbsProps {
+  /**
+   * Optional Rivet style: A call-out styled set of breadcrumbs.
+   */
+  variant?: 'call-out'
+}
+
+const Breadcrumbs: React.SFC<BreadcrumbsProps & React.HTMLAttributes<HTMLDivElement>> =
+  ({ children, variant, ...attrs }) => {
+    const childCount = React.Children.count(children);
+    const breadcrumbLinks = React.Children.map(children, (child, index) => (index === (childCount - 1)) ? <li aria-current="page">{child}</li> : <li>{child}</li>);
+    const classes = classNames({
+      ['rvt-breadcrumbs']: true,
+      [`rvt-breadcrumbs--${variant}`]: variant
+    });
+    return (
+      <nav {...attrs}>
+        <ol className={classes}>
+          {breadcrumbLinks}
+        </ol>
+      </nav>
+    );
+  };
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export default Rivet.rivetize(Breadcrumbs);

src/components/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export { default as Breadcrumbs } from './Breadcrumbs';

src/components/index.tsx

@@ -1,5 +1,6 @@
 export * from './Alert';
 export * from './Badge';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Checkbox';
 export * from './Dropdown';

styleguide.config.js

@@ -76,7 +76,8 @@ module.exports = {
         {   
             name: 'Navigation',
             components: () => [
-              'src/components/Dropdown/*.tsx', 
+              'src/components/Breadcrumbs/*.tsx',
+              'src/components/Dropdown/*.tsx',
               'src/components/Footer/*.tsx', 
               'src/components/Header/Header.tsx',
               'src/components/Header/HeaderIdentity.tsx',