[Storybook] Direct example description links to https://polaris.shopi…

…fy.com (#933)

.storybook/md-parser.js

@@ -0,0 +1,45 @@
+const marked = require('marked');
+
+function addNavigationHashToURL(href) {
+  const isExternalLink =
+    !href.startsWith('/') && !href.startsWith('https://polaris.shopify.com');
+  if (isExternalLink) {
+    return href;
+  }
+
+  const location = new URL(href, 'https://polaris.shopify.com');
+
+  return location.toString();
+}
+
+class MdParser {
+  constructor() {
+    marked.setOptions({
+      headerIds: false,
+      gfm: true,
+      renderer: this.getCustomRenderer(),
+      xhtml: true,
+    });
+  }
+
+  parse(markdown) {
+    return marked(markdown);
+  }
+
+  getCustomRenderer() {
+    const customRenderer = new marked.Renderer();
+    customRenderer.link = function(href, title, text) {
+      // Add #navigation to them unless they already point to an anchor.
+      // It's a trick: adding #navigation at the end of a URL forces a scroll back to the top of the page
+      const outHref = addNavigationHashToURL(href);
+
+      return `<a href="${outHref}"${
+        title ? ` title="${title}"` : ''
+      }>${text}</a>`;
+    };
+
+    return customRenderer;
+  }
+}
+
+module.exports = MdParser;

.storybook/polaris-readme-loader.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 const chalk = require('chalk');
 const grayMatter = require('gray-matter');
+const MdParser = require('./md-parser');
 
 /**
  * A Webpack loader, that expects a Polaris README file, and returns metadata,
@@ -161,13 +162,15 @@ function generateExamples(matter) {
       const code =
         codeBlock !== null ? wrapExample(stripCodeBlock(codeBlock[0])) : '';
 
-      const description = filterMarkdownForPlatform(
-        example
-          .replace(nameRegex, '')
-          .replace(codeRegex, '')
-          .replace(exampleForRegExp, ''),
-        'web',
-      ).trim();
+      const description = new MdParser().parse(
+        filterMarkdownForPlatform(
+          example
+            .replace(nameRegex, '')
+            .replace(codeRegex, '')
+            .replace(exampleForRegExp, ''),
+          'web',
+        ).trim(),
+      );
 
       return {name, code, description};
     });

.storybook/stories-from-readme.js

@@ -43,7 +43,7 @@ export function generateStories(readme, readmeModule) {
       .addParameters({
         // TODO links use styleguide-style URLs. It'd be neat to mutate them
         // to deeplink to examples in storybook.
-        notes: {markdown: example.description},
+        notes: example.description,
       })
       .addWithPercyOptions(
         example.name,

UNRELEASED.md

@@ -22,6 +22,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Development workflow
 
+- Fixed links to Polaris component pages in story descriptions ([#933](https://github.com/Shopify/polaris-react/pull/933))
+
 ### Dependency upgrades
 
 ### Code quality

package.json

@@ -127,6 +127,7 @@
     "in-publish": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.12.1",
+    "marked": "^0.6.0",
     "node-sass": "^4.10.0",
     "npm-run-all": "^4.0.2",
     "object-hash": "^1.3.0",

yarn.lock

@@ -10878,6 +10878,11 @@ marked@^0.5.2:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.2.tgz#3efdb27b1fd0ecec4f5aba362bddcd18120e5ba9"
   integrity sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA==
 
+marked@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.0.tgz#a18d01cfdcf8d15c3c455b71c8329e5e0f01faa1"
+  integrity sha512-HduzIW2xApSXKXJSpCipSxKyvMbwRRa/TwMbepmlZziKdH8548WSoDP4SxzulEKjlo8BE39l+2fwJZuRKOln6g==
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"