Add support for data-transition attributes used by Push.js

README.md

@@ -44,6 +44,7 @@ class MyNavBar extends React.Component {
 ```
 @prop [right] {Boolean} The side of the nav the button will be displayed
 @prop [href] {String} If defined creates an anchor, else defaults to a button
+@prop [transition] {String} A Push.js transition name to include on the child <a> link
 @prop [className] {String} Merges with the Ratchet predefined CSS classes
 ```
 Example:
@@ -88,6 +89,7 @@ class MyTableView extends React.Component {
 @prop [navigateRight] {Boolean} Right-wards chevron 
 @prop [navigateLeft] {Boolean} Left-wards chevron
 @prop [href] {String} Assigns the given href to the child anchor
+@prop [transition] {String} A Push.js transition name to include on the child <a> link
 @prop [className] {String} Merges with the Ratchet predefined CSS classes
 ```
 Example:

package.json

@@ -51,9 +51,11 @@
     "unmockedModulePathPatterns": [
       "<rootDir>/support",
       "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/fbjs",
       "<rootDir>/node_modules/react-dom",
       "<rootDir>/node_modules/react-addons-test-utils",
       "<rootDir>/node_modules/amp-has-class",
+      "<rootDir>/node_modules/amp-is-string",
       "<rootDir>/node_modules/classnames"
     ]
   }

src/NavButton.js

@@ -9,18 +9,25 @@ class NavButton extends React.Component {
     var iconClass = this.props.icon ? this.props.icon : side + "-nav"
     var icon = <Icon type={iconClass} />
 
+    var props;
+    if (this.props.hasOwnProperty('transition')) {
+      props = {"data-transition": this.props.transition, ...this.props }
+    } else {
+      props = this.props
+    }
+
     var Component = this.props.href ? 'a' : 'button'
 
     if (side == 'left') {
       return (
-        <Component {...this.props} className={classes}>
+        <Component {...props} className={classes}>
           {icon}
           {this.props.children}
         </Component>
       )
     } else { // right
       return (
-        <Component {...this.props} className={classes}>
+        <Component {...props} className={classes}>
           {this.props.children}
           {icon}
         </Component>

src/TableViewCell.js

@@ -16,13 +16,16 @@ class TableViewCell extends React.Component {
     var chevronDirection = this.getChevronDirection()
     if (this.props.href || chevronDirection) {
       var classes = chevronDirection ? `navigate-${chevronDirection}` : null
-      return (
-        <a
-          href={this.props.href}
-          className={classes}
-          children={this.props.children}
-        />
-      )
+      var attrs = {
+        href: this.props.href,
+        className: classes,
+        children: this.props.children
+      }
+      if (this.props.transition) {
+        attrs['data-transition'] = this.props.transition
+      }
+
+      return <a {...attrs} />
     } else {
       return this.props.children
     }

src/__tests__/NavButton.js

@@ -6,7 +6,7 @@ describe('NavButton', () => {
   it('adds ratchet classes', () => {
     expect(hasClass(shallowRender(<NavButton />).props.className, 'btn-nav btn-link btn')).toBe(true)
   })
-  
+
   it('adds user classes', () => {
     expect(hasClass(shallowRender(<NavButton className="asdf" />).props.className, 'asdf')).toBe(true)
   })
@@ -21,12 +21,19 @@ describe('NavButton', () => {
     expect(subject.props.href).toEqual('b')
   })
 
+  it('renders a data-transition property when transition provided', () => {
+    var subject = shallowRender(<NavButton href="c" transition="slide-out" />)
+    expect(subject.type).toEqual('a')
+    expect(subject.props.href).toEqual('c')
+    expect(subject.props['data-transition']).toEqual('slide-out')
+  })
+
   it('pulls left by default', () => {
     var subject = shallowRender(<NavButton />)
     expect(hasClass(subject.props.className, 'pull-left')).toBe(true)
     expect(hasClass(subject.props.className, 'pull-right')).toBe(false)
   })
-  
+
   it('pulls right when "right" prop set', () => {
     var subject = shallowRender(<NavButton right />)
     expect(hasClass(subject.props.className, 'pull-right')).toBe(true)

src/__tests__/TableViewCell.js

@@ -7,12 +7,24 @@ describe('TableViewCell', () => {
   it('adds ratchet classes', () => {
     expect(hasClass(shallowRender(<TableViewCell />).props.className, 'table-view-cell')).toBe(true)
   })
-  
+
   it('adds user classes', () => {
     expect(hasClass(shallowRender(<TableViewCell className="asdf" />).props.className, 'asdf')).toBe(true)
   })
 
   it('renders an li element', () => {
     expect(shallowRender(<TableViewCell />).type).toBe('li')
   })
+
+  it('renders a link if we add an href', () => {
+    var rendered = shallowRender(<TableViewCell href="lkjh" />)
+    expect(rendered.props.children.type).toBe('a')
+    expect(rendered.props.children.props.href).toBe('lkjh')
+  })
+
+  it('adds a transition tag on a link, if we specify one', () => {
+    var rendered = shallowRender(<TableViewCell href="/home" transition="slide-in" />)
+    expect(rendered.props.children.type).toBe('a')
+    expect(rendered.props.children.props['data-transition']).toBe('slide-in')
+  })
 })