feat(Badge): handle links

TheSharpieOne · TheSharpieOne · commit 9b32cee71bb9 · 2017-09-16T09:07:59.000-04:00
Updated tests
Updated docs
diff --git a/docs/lib/Components/BadgePage.js b/docs/lib/Components/BadgePage.js
@@ -15,6 +15,9 @@ const BadgePillsExampleSource = require('!!raw!../examples/BadgePills');
 import BadgeVariationsExample from '../examples/BadgeVariations';
 const BadgeVariationsExampleSource = require('!!raw!../examples/BadgeVariations');
 
+import BadgeLinksExample from '../examples/BadgeLinks';
+const BadgeLinksExampleSource = require('!!raw!../examples/BadgeLinks');
+
 export default class BadgesPage extends React.Component {
   render() {
     return (
@@ -58,6 +61,16 @@ export default class BadgesPage extends React.Component {
             {BadgePillsExampleSource}
           </PrismCode>
         </pre>
+        <h3>Links</h3>
+        <p>Adding the <code>href</code> prop (without specifying a <code>tag</code> prop) will default the badge to a link.</p>
+        <div className="docs-example">
+          <BadgeLinksExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {BadgeLinksExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/examples/BadgeLinks.js b/docs/lib/examples/BadgeLinks.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Badge } from 'reactstrap';
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <div>
+        <Badge href="#" color="primary">Primary</Badge>
+        <Badge href="#" color="secondary">Secondary</Badge>
+        <Badge href="#" color="success">Success</Badge>
+        <Badge href="#" color="danger">Danger</Badge>
+        <Badge href="#" color="warning">Warning</Badge>
+        <Badge href="#" color="info">Info</Badge>
+        <Badge href="#" color="light">Light</Badge>
+        <Badge href="#" color="dark">Dark</Badge>
+      </div>
+    );
+  }
+}
diff --git a/src/Badge.js b/src/Badge.js
@@ -13,13 +13,13 @@ const propTypes = {
 };
 
 const defaultProps = {
-  color: 'default',
+  color: 'secondary',
   pill: false,
   tag: 'span'
 };
 
 const Badge = (props) => {
-  const {
+  let {
     className,
     cssModule,
     color,
@@ -35,6 +35,10 @@ const Badge = (props) => {
     pill ? 'badge-pill' : false
   ), cssModule);
 
+  if (attributes.href && Tag === 'span') {
+    Tag = 'a';
+  }
+
   return (
     <Tag {...attributes} className={classes} />
   );
diff --git a/src/__tests__/Badge.spec.js b/src/__tests__/Badge.spec.js
@@ -3,16 +3,34 @@ import { shallow } from 'enzyme';
 import { Badge } from '../';
 
 describe('Badge', () => {
+  it('should render a span by default', () => {
+    const wrapper = shallow(<Badge>Yo!</Badge>);
+
+    expect(wrapper.type()).toBe('span');
+  });
+
+  it('should render an anchor when when href is provided', () => {
+    const wrapper = shallow(<Badge href="#">Yo!</Badge>);
+
+    expect(wrapper.type()).toBe('a');
+  });
+
+  it('should render a custom tag when provided', () => {
+    const wrapper = shallow(<Badge tag="main">Yo!</Badge>);
+
+    expect(wrapper.type()).toBe('main');
+  });
+
   it('should render children', () => {
     const wrapper = shallow(<Badge>Yo!</Badge>);
 
     expect(wrapper.text()).toBe('Yo!');
   });
 
-  it('should render badges with default color', () => {
+  it('should render badges with secondary color', () => {
     const wrapper = shallow(<Badge>Default Badge</Badge>);
 
-    expect(wrapper.hasClass('badge-default')).toBe(true);
+    expect(wrapper.hasClass('badge-secondary')).toBe(true);
   });
 
   it('should render Badges with other colors', () => {
