feat(addon-notes): use @storybook/router <Link> to render links in no…

…tes (#6398)

feat(addon-notes): use @storybook/router <Link> to render links in notes

addons/notes/package.json

@@ -28,6 +28,7 @@
     "@storybook/client-logger": "5.1.0-alpha.34",
     "@storybook/components": "5.1.0-alpha.34",
     "@storybook/core-events": "5.1.0-alpha.34",
+    "@storybook/router": "5.1.0-alpha.34",
     "@storybook/theming": "5.1.0-alpha.34",
     "core-js": "^2.6.5",
     "global": "^4.3.2",

addons/notes/src/Panel.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import { Link } from '@reach/router';
 import { SyntaxHighlighter as SyntaxHighlighterBase } from '@storybook/components';
-import { SyntaxHighlighter } from './Panel';
+import { SyntaxHighlighter, NotesLink } from './Panel';
 
 describe('NotesPanel', () => {
   describe('SyntaxHighlighter component', () => {
@@ -20,4 +21,25 @@ describe('NotesPanel', () => {
       expect(syntaxHighlighterBase.prop('language')).toBe('jsx');
     });
   });
+
+  describe('NotesLink component', () => {
+    it('should render storybook links with @storybook/router Link', () => {
+      const component = mount(
+        <NotesLink href="/story/addon-notes" title="title">
+          Storybook Link
+        </NotesLink>
+      );
+      expect(component.find(Link).prop('to')).toBe('/?path=/story/addon-notes');
+      expect(component.find(Link).prop('title')).toBe('title');
+    });
+    it('should render absolute links as <a>', () => {
+      const component = mount(
+        <NotesLink href="https://example.com" title="title">
+          Storybook Link
+        </NotesLink>
+      );
+      expect(component.find('a').prop('href')).toBe('https://example.com');
+      expect(component.find('a').prop('title')).toBe('title');
+    });
+  });
 });

addons/notes/src/Panel.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, Fragment, ReactNode } from 'react';
 import { types } from '@storybook/addons';
 import { API, Consumer, Combo } from '@storybook/api';
+import { Link as RouterLink } from '@storybook/router';
 import { styled } from '@storybook/theming';
 
 import {
@@ -66,11 +67,34 @@ export const SyntaxHighlighter = ({ className, children, ...props }: SyntaxHighl
   );
 };
 
+interface NotesLinkProps {
+  href: string;
+  children: ReactElement;
+}
+export const NotesLink = ({ href, children, ...props }: NotesLinkProps) => {
+  /* https://github.com/sindresorhus/is-absolute-url/blob/master/index.js */
+  const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/.test(href);
+  if (isAbsoluteUrl) {
+    return (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <RouterLink to={href} {...props}>
+      {children}
+    </RouterLink>
+  );
+};
+
 // use our SyntaxHighlighter component in place of a <code> element when
 // converting markdown to react elements
 const defaultOptions = {
   overrides: {
     code: SyntaxHighlighter,
+    a: NotesLink,
     Giphy: {
       component: Giphy,
     },

examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js

@@ -8,7 +8,7 @@ storiesOf('Addon|Notes', module)
     () => ({
       Component: ButtonView,
     }),
-    { notes: 'My notes on the ButtonView component' }
+    { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' }
   )
   .add(
     'Note with HTML',