feat(breadcrumb): Add Breadcrumb and BreadcrumbItem

Author: TheSharpieOne

docs/lib/Components/BreadcrumbsPage.jsx

@@ -0,0 +1,40 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import Helmet from 'react-helmet';
+
+import BreadcrumbExample from '../examples/Breadcrumb';
+const BreadcrumbExampleSource = require('!!raw!../examples/Breadcrumb.jsx');
+
+import BreadcrumbNoListExample from '../examples/BreadcrumbNoList';
+const BreadcrumbNoListExampleSource = require('!!raw!../examples/BreadcrumbNoList.jsx');
+
+export default class BreadcrumbsPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <Helmet title="Breadcrumbs" />
+        <h3>Breadcrumbs</h3>
+        <div className="docs-example">
+          <BreadcrumbExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {BreadcrumbExampleSource}
+          </PrismCode>
+        </pre>
+        <h3>No list</h3>
+        <hr />
+        <p>Breadcrumbs can work without the usage of list markup.</p>
+        <div className="docs-example">
+          <BreadcrumbNoListExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {BreadcrumbNoListExampleSource}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}

docs/lib/Components/index.jsx

@@ -39,6 +39,10 @@ class Components extends React.Component {
           name: 'Form',
           to: '/components/form/'
         },
+        {
+          name: 'Breadscrumbs',
+          to: '/components/breadcrumbs/'
+        },
         {
           name: 'Tags',
           to: '/components/tags/'

docs/lib/examples/Breadcrumb.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Breadcrumb>
+        <BreadcrumbItem active>Home</BreadcrumbItem>
+      </Breadcrumb>
+      <Breadcrumb>
+        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+        <BreadcrumbItem active>Library</BreadcrumbItem>
+      </Breadcrumb>
+      <Breadcrumb>
+        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+        <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
+        <BreadcrumbItem active>Data</BreadcrumbItem>
+      </Breadcrumb>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/examples/BreadcrumbNoList.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <Breadcrumb tag="nav">
+        <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
+        <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
+        <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
+        <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
+      </Breadcrumb>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/routes.jsx

@@ -4,6 +4,7 @@ import Home from './Home';
 import LayoutPage from './Components/LayoutPage';
 import NavsPage from './Components/NavsPage';
 import NavbarPage from './Components/NavbarPage';
+import BreadcrumbsPage from './Components/BreadcrumbsPage';
 import ButtonsPage from './Components/ButtonsPage';
 import ButtonGroupPage from './Components/ButtonGroupPage';
 import ButtonDropdownPage from './Components/ButtonDropdownPage';
@@ -24,6 +25,7 @@ const routes = (
     <IndexRoute component={ Home } />
     <Route path="/components/" component={Components}>
       <IndexRedirect to="buttons/" />
+      <Route path="breadcrumbs/" component={ BreadcrumbsPage } />
       <Route path="buttons/" component={ ButtonsPage } />
       <Route path="button-group/" component={ ButtonGroupPage } />
       <Route path="button-dropdown/" component={ ButtonDropdownPage } />

src/Breadcrumb.jsx

@@ -0,0 +1,33 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  tag: PropTypes.string,
+
+  className: PropTypes.any
+};
+
+const defaultProps = {
+  tag: 'ol'
+};
+
+const Breadcrumb = (props) => {
+  const {
+    className,
+    tag: Tag,
+    ...attributes
+  } = props;
+  const classes = classNames(
+    className,
+    'breadcrumb'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} />
+  );
+};
+
+Breadcrumb.propTypes = propTypes;
+Breadcrumb.defaultProps = defaultProps;
+
+export default Breadcrumb;

src/BreadcrumbItem.jsx

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  active: PropTypes.string,
+  className: PropTypes.any
+};
+
+const defaultProps = {
+  tag: 'li'
+};
+
+const BreadcrumbItem = (props) => {
+  const {
+    className,
+    active,
+    tag: Tag,
+    ...attributes
+  } = props;
+  const classes = classNames(
+    className,
+    active ? 'active' : false,
+    'breadcrumb-item'
+  );
+
+  return (
+    <Tag {...attributes} className={classes} />
+  );
+};
+
+BreadcrumbItem.propTypes = propTypes;
+BreadcrumbItem.defaultProps = defaultProps;
+
+export default BreadcrumbItem;

src/index.js

@@ -8,6 +8,8 @@ import Nav from './Nav';
 import NavItem from './NavItem';
 import NavDropdown from './NavDropdown';
 import NavLink from './NavLink';
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbItem from './BreadcrumbItem';
 import Button from './Button';
 import ButtonDropdown from './ButtonDropdown';
 import ButtonGroup from './ButtonGroup';
@@ -60,6 +62,8 @@ export {
   NavItem,
   NavDropdown,
   NavLink,
+  Breadcrumb,
+  BreadcrumbItem,
   Button,
   ButtonDropdown,
   ButtonGroup,

test/Breadcrumb.spec.js

@@ -0,0 +1,30 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Breadcrumb } from 'reactstrap';
+
+describe('Breadcrumb', () => {
+  it('should render children', () => {
+    const wrapper = shallow(<Breadcrumb>Yo!</Breadcrumb>);
+
+    expect(wrapper.text()).toBe('Yo!');
+  });
+
+  it('should render "ol" by default', () => {
+    const wrapper = shallow(<Breadcrumb>Yo!</Breadcrumb>);
+
+    expect(wrapper.type()).toBe('ol');
+  });
+
+  it('should render with the "breadcrumb" class', () => {
+    const wrapper = shallow(<Breadcrumb>Default Breadcrumb</Breadcrumb>);
+
+    expect(wrapper.hasClass('breadcrumb')).toBe(true);
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<Breadcrumb tag="main">Yo!</Breadcrumb>);
+
+    expect(wrapper.type()).toBe('main');
+  });
+});

test/BreadcrumbList.spec.js

@@ -0,0 +1,42 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { BreadcrumbItem } from 'reactstrap';
+
+describe('BreadcrumbItem', () => {
+  it('should render children', () => {
+    const wrapper = shallow(<BreadcrumbItem>Yo!</BreadcrumbItem>);
+
+    expect(wrapper.text()).toBe('Yo!');
+  });
+
+  it('should render "li" by default', () => {
+    const wrapper = shallow(<BreadcrumbItem>Yo!</BreadcrumbItem>);
+
+    expect(wrapper.type()).toBe('li');
+  });
+
+  it('should render with the "breadcrumb-item" class', () => {
+    const wrapper = shallow(<BreadcrumbItem>Default BreadcrumbItem</BreadcrumbItem>);
+
+    expect(wrapper.hasClass('breadcrumb-item')).toBe(true);
+  });
+
+  it('should not render with the "active" class by default', () => {
+    const wrapper = shallow(<BreadcrumbItem>Default BreadcrumbItem</BreadcrumbItem>);
+
+    expect(wrapper.hasClass('active')).toBe(false);
+  });
+
+  it('should render with the "active" class when the avtive prop is truthy', () => {
+    const wrapper = shallow(<BreadcrumbItem active>Default BreadcrumbItem</BreadcrumbItem>);
+
+    expect(wrapper.hasClass('active')).toBe(true);
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<BreadcrumbItem tag="main">Yo!</BreadcrumbItem>);
+
+    expect(wrapper.type()).toBe('main');
+  });
+});