From 6d92193bdd905827d2565022281d9cc5bd8c460e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20G=C3=BCndel?= <f.guendel@gmail.com>
Date: Wed, 3 Apr 2019 11:41:01 +0200
Subject: [PATCH 1/2] feat(addon-notes): use @storybook/router <Link> to render
 links with relative urls in markdown notes

---
 addons/notes/src/Panel.test.js                | 26 +++++++++++++++++--
 addons/notes/src/Panel.tsx                    | 24 +++++++++++++++++
 .../src/stories/addon-notes.stories.js        |  2 +-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/addons/notes/src/Panel.test.js b/addons/notes/src/Panel.test.js
index 19bcf0da4977..8d04fd04882d 100644
--- a/addons/notes/src/Panel.test.js
+++ b/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.tsx';
+import { SyntaxHighlighter, NotesLink } from './Panel.tsx';
 
 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');
+    });
+  });
 });
diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx
index 80d572734c91..3107af0c33e2 100644
--- a/addons/notes/src/Panel.tsx
+++ b/addons/notes/src/Panel.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement, Component, 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 { STORY_RENDERED } from '@storybook/core-events';
 
@@ -62,11 +63,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,
     },
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
index 43228243f0d8..ec8dcb3da0f8 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/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',

From eeb126491006ae619885c7ad6bdfaf9d9037818a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20G=C3=BCndel?= <f.guendel@gmail.com>
Date: Wed, 3 Apr 2019 13:10:33 +0200
Subject: [PATCH 2/2] chore: add @storybook/router dependency

---
 addons/notes/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/notes/package.json b/addons/notes/package.json
index 21456eaf0f36..cd8988ff1e25 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -28,6 +28,7 @@
     "@storybook/client-logger": "5.1.0-alpha.20",
     "@storybook/components": "5.1.0-alpha.20",
     "@storybook/core-events": "5.1.0-alpha.20",
+    "@storybook/router": "5.1.0-alpha.20",
     "@storybook/theming": "5.1.0-alpha.20",
     "core-js": "^2.6.5",
     "markdown-to-jsx": "^6.9.3",