Link story fix

package.json

@@ -88,7 +88,6 @@
   "author": "",
   "license": "",
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
     "autoprefixer": "^6.5.3",
     "babel-eslint": "^7.1.1",
     "babel-plugin-lodash": "^3.2.10",
@@ -133,6 +132,7 @@
     "webpack-node-externals": "^1.5.4"
   },
   "dependencies": {
+    "@kadira/storybook": "^2.21.0",
     "asynch": "^0.5.2",
     "babel": "^6.5.2",
     "babel-cli": "^6.18.0",

src/client/components/NotificationList/NotificationList.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { List, ListItem } from 'material-ui/List'
 import Divider from 'material-ui/Divider'
-import { Link } from 'react-router'
+import Link from 'components/Link'
 import { darkBlack, grey400 } from 'material-ui/styles/colors'
 import ActionInfo from 'material-ui/svg-icons/action/info'
 import Update from 'material-ui/svg-icons/action/system-update-alt'
@@ -51,9 +51,8 @@ function NotificationList() {
                   paddingLeft: '10px',
                 }}
                 to="project/undefined/pullrequest/UHVsbFJlcXVlc3Q6Mw=="
-              >
-                Fixes for builds count controller, added new charts, fixed minor issues
-              </Link>
+                label="Fixes for builds count controller, added new charts, fixed minor issues"
+              />
               <span
                 style={{
                   color: '#bcbbbb',
@@ -100,9 +99,8 @@ function NotificationList() {
                   paddingLeft: '10px',
                 }}
                 to="project/undefined/pullrequest/UHVsbFJlcXVlc3Q6Mw=="
-              >
-                [5.4] Fix particle random number regression
-              </Link>
+                label="[5.4] Fix particle random number regression"
+              />
               <span
                 style={{
                   color: '#bcbbbb',
@@ -142,9 +140,8 @@ function NotificationList() {
                 paddingLeft: '10px',
               }}
               to="/project/UmVwb3NpdG9yeTox"
-            >
-              Option to use low resolution for Game View aspect ratios V4
-            </Link>
+              label="Option to use low resolution for Game View aspect ratios V4"
+            />
             <span
               style={{
                 color: '#bcbbbb',
@@ -177,9 +174,8 @@ function NotificationList() {
                   paddingLeft: '10px',
                 }}
                 to="project/undefined/pullrequest/UHVsbFJlcXVlc3Q6Mw=="
-              >
-                Trunk merge of the scriptable renderloop branch
-              </Link>
+                label="Trunk merge of the scriptable renderloop branch"
+              />
               <span
                 style={{
                   color: '#bcbbbb',
@@ -223,9 +219,8 @@ function NotificationList() {
                 paddingLeft: '10px',
               }}
               to="project/undefined/pullrequest/UHVsbFJlcXVlc3Q6Mw=="
-            >
-            Option to use low resolution for Game View aspect ratios
-            </Link>
+              link="Option to use low resolution for Game View aspect ratios"
+            />
             <span
               style={{
                 color: '#bcbbbb',
@@ -258,9 +253,8 @@ function NotificationList() {
                   paddingLeft: '10px',
                 }}
                 to="project/undefined/pullrequest/UHVsbFJlcXVlc3Q6Mw=="
-              >
-                Move render target switching out from jobs
-              </Link>
+                label="Move render target switching out from jobs"
+              />
               <span
                 style={{
                   color: '#bcbbbb',

storybook/react-router.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { action } from '@kadira/storybook'
+
+// Set the custom link component
+module.exports.Link = class Link extends React.Component {
+  handleClick(e) {
+    e.preventDefault()
+    const { to } = this.props
+    action('Link')(to)
+  }
+
+  render() {
+    const { children, style } = this.props
+
+    return (
+      <a
+        style={style}
+        href="#"
+        onClick={(e) => this.handleClick(e)}
+      >
+        {children}
+      </a>
+    )
+  }
+}

storybook/webpack.config.js

@@ -23,4 +23,12 @@ module.exports = {
       },
     ],
   },
+  resolve: {
+    alias: {
+      // this is used by the custom `react-router.js` module
+      'react-router-original': require.resolve('react-router'),
+      // this `react-router.js` will replace the Link with a our own mock component
+      'react-router': require.resolve('./react-router.js'),
+    },
+  },
 }