Merge remote-tracking branch 'origin/release-10.9.0' into responsive-variants

.storybook/lib/storiesFromMarkdown.js

@@ -1,65 +1,27 @@
-import remark from 'remark'
-import parents from 'unist-util-parents'
-import select from 'unist-util-select'
-import findBefore from 'unist-util-find-before'
+import parseCodeBlocks from 'code-blocks/lib/fromString'
 import htmlToReact from 'html-to-react'
-import parsePairs from 'parse-pairs'
-import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import {Octicon} from '../Octicon'
 
 const htmlParser = new htmlToReact.Parser()
 
-const railsOcticonToReact = (html) => {
-  // <%= octicon "tools" %> to <Octicon name="tools" />
-  const octre = /<%= octicon[\(\s]["']([a-z\-]+)["'][^%]*%>/gi
-  html = html.replace(octre, (match, name) => {
-    return ReactDOMServer.renderToStaticMarkup(<Octicon name={name} />)
-  })
-  return html
-}
-
-const parseBlockAttrs = (node, file) => {
-  const pairs = node.lang.replace(/^html\s*/, '')
-  const attrs = pairs.length ? parsePairs(pairs) : {}
-  attrs.title = attrs.title
-    || getPreviousHeading(node)
-    || `story @ ${file}:${node.position.start.line}`
-  node.block = attrs
-  return node
-}
-
-const nodeToStory = (node, file) => {
-  const html = railsOcticonToReact(node.value)
-  const {title} = node.block
+const blockToStory = block => {
   return {
-    title,
-    story: () => htmlParser.parse(html),
-    html,
-    file,
-    node,
+    title: block.title,
+    story: () => htmlParser.parse(block.value),
+    block,
   }
 }
 
-const getPreviousHeading = node => {
-  const heading = findBefore(node.parent, node, 'heading')
-  return (heading && !heading.used)
-    ? (heading.used = true, heading.children.map(c => c.value).join(''))
-    : undefined
-}
-
-export default req => {
-  return req.keys()
-    .filter(file => !file.match(/node_modules/))
-    .reduce((stories, file) => {
-      const content = req(file)
-      const ast = parents(remark.parse(content))
-      const path = file.replace(/^\.\//, '')
-      return stories.concat(
-        select(ast, 'code[lang^=html]')
-          .map(parseBlockAttrs)
-          .filter(({block}) => block.story !== "false")
-          .map(node => nodeToStory(node, path))
-      )
-    }, [])
+export default function storiesFromMarkdown(req) {
+  return req.keys().reduce((stories, file) => {
+    const markdown = req(file)
+    const path = file.replace(/^\.\//, '')
+    const blocks = parseCodeBlocks(markdown, path)
+      .filter(block => {
+        // read: ```html *
+        // skip: ```html * story="false"
+        return block.lang === 'html' && block.info.story !== 'false'
+      })
+      .map(blockToStory)
+    return stories.concat(blocks)
+  }, [])
 }

package.json

@@ -31,6 +31,7 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-minify": "^0.2.0",
     "babel-preset-react": "^6.24.1",
+    "code-blocks": "^1.1.0",
     "commit-status": "^4.1.0",
     "css-loader": "^0.28.4",
     "execa": "^0.10.0",
@@ -47,7 +48,6 @@
     "npm-run-all": "^4.0.2",
     "npx": "^10.2.0",
     "octicons": "^6.0.1",
-    "parse-pairs": "^0.2.2",
     "postcss-loader": "^2.0.6",
     "raw-loader": "^0.5.1",
     "react": "^15.6.1",
@@ -58,9 +58,6 @@
     "semver": "^5.3.0",
     "style-loader": "^0.18.2",
     "stylelint": "^7.13.0",
-    "unist-util-find-before": "^2.0.1",
-    "unist-util-parents": "^1.0.0",
-    "unist-util-select": "^1.5.0",
     "yo": "^2.0.0"
   }
 }