Use "RoutedLink" instead of the "div" on a selectable story.

storybookjs · Mar 6, 2018 · e3e23bd · e3e23bd
1 parent 43057b7
commit e3e23bd
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
@@ -20,6 +20,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/components": "^3.4.0-alpha.9",
     "acorn": "^5.5.0",
     "acorn-es7": "^0.1.0",
     "acorn-jsx": "^4.1.1",

diff --git a/addons/storysource/src/StoryPanel.js b/addons/storysource/src/StoryPanel.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { RoutedLink } from '@storybook/components';
 import jsx from 'react-syntax-highlighter/languages/prism/jsx';
 import { darcula } from 'react-syntax-highlighter/styles/prism';
 import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
@@ -8,11 +9,11 @@ import { EVENT_ID } from './';
 
 registerLanguage('jsx', jsx);
 
-const keyCodeEnter = 13;
-
 const styles = {
   story: {
-    cursor: 'pointer',
+    display: 'block',
+    textDecoration: 'none',
+    color: darcula['code[class*="language-"]'].color,
   },
   selectedStory: {
     backgroundColor: 'rgba(255, 242, 60, 0.2)',
@@ -61,7 +62,6 @@ export default class StoryPanel extends Component {
     this.setSelectedStoryRef = this.setSelectedStoryRef.bind(this);
     this.lineRenderer = this.lineRenderer.bind(this);
     this.clickOnStory = this.clickOnStory.bind(this);
-    this.keyDownOnStory = this.keyDownOnStory.bind(this);
   }
 
   componentDidUpdate() {
@@ -74,23 +74,14 @@ export default class StoryPanel extends Component {
     this.selectedStoryRef = ref;
   }
 
-  clickOnStory(key) {
+  clickOnStory(kind, story) {
     const { api } = this.props;
-    const [kind, story] = key.split('@');
 
     if (kind && story) {
       api.selectStory(kind, story);
     }
   }
 
-  keyDownOnStory(e, key) {
-    if (e.keyCode !== keyCodeEnter) {
-      return;
-    }
-
-    this.clickOnStory(key);
-  }
-
   createPart(rows, stylesheet, useInlineStyles) {
     return rows.map((node, i) =>
       createElement({
@@ -119,17 +110,18 @@ export default class StoryPanel extends Component {
       );
     }
 
+    const [selectedKind, selectedStory] = kindStory.split('@');
+    const url = `/?selectedKind=${selectedKind}&selectedStory=${selectedStory}`;
+
     return (
-      <div
+      <RoutedLink
+        href={url}
         key={storyKey}
-        onClick={() => this.clickOnStory(kindStory)}
-        onKeyDown={e => this.keyDownOnStory(e, kindStory)}
-        tabIndex="0"
+        onClick={() => this.clickOnStory(selectedKind, selectedStory)}
         style={styles.story}
-        role="link"
       >
         {story}
-      </div>
+      </RoutedLink>
     );
   }