Merge branch 'dev' into muan/details-open

.storybook/config.js

@@ -1,4 +1,5 @@
-import { configure } from '@storybook/react'
+import React from 'react'
+import { configure, addDecorator } from '@storybook/react'
 import { setOptions } from '@storybook/addon-options'
 import '../modules/primer-css/index.scss'
 
@@ -8,6 +9,12 @@ setOptions({
   showDownPanel: false,
 })
 
+addDecorator(story => (
+  <div className='p-4'>
+    {story()}
+  </div>
+))
+
 const contexts = [
   require.context('.', true, /\.js$/),
   require.context('../modules', true, /stories.*\.js$/),

.storybook/lib/storiesFromMarkdown.js

@@ -0,0 +1,45 @@
+import remark from 'remark'
+import parents from 'unist-util-parents'
+import select from 'unist-util-select'
+import findBefore from 'unist-util-find-before'
+import htmlToReact from 'html-to-react'
+import parsePairs from 'parse-pairs'
+
+const htmlParser = new htmlToReact.Parser()
+
+const nodeToStory = (node, file) => {
+  const html = node.value
+  const element = htmlParser.parse(html)
+  const pairs = node.lang.replace(/^html\s*/, '')
+  const attrs = pairs.length ? parsePairs(pairs) : {}
+  const title = attrs.title || getPreviousHeading(node) ||
+    `story @ ${file}:${node.position.start.line}`
+  return {
+    title,
+    story: () => element,
+    attrs,
+    html,
+    file,
+    node,
+  }
+}
+
+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().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(node => nodeToStory(node, path))
+        .filter(({attrs}) => attrs.story !== "false")
+    )
+  }, [])
+}

.storybook/webpack.config.js

@@ -5,6 +5,10 @@ const modulesPath = path.resolve(__dirname, "../modules")
 module.exports = {
   module: {
     rules: [
+      {
+        test: /\.md$/,
+        use: "raw-loader",
+      },
       {
         test: /\.scss$/,
         loaders: [
@@ -28,7 +32,7 @@ module.exports = {
           },
         ],
         include: modulesPath,
-      }
-    ]
+      },
+    ],
   },
 }

modules/primer-breadcrumb/README.md

@@ -1,9 +1,9 @@
-# Primer Marketing CSS Breadcrumb Navigation
+# Primer CSS Breadcrumb Navigation
 
 [![npm version](http://img.shields.io/npm/v/primer-breadcrumb.svg)](https://www.npmjs.org/package/primer-breadcrumb)
 [![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
 
-> Breadcrumb navigation for GitHub's marketing pages with parents / grandparents.
+> Breadcrumb navigation for GitHub's pages with parents / grandparents.
 
 This repository is a module of the full [primer-css][primer] repository.
 
@@ -22,7 +22,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d
 
 #### Usage
 
-```html
+```html title="Breadcrumb"
 <nav aria-label="Breadcrumb">
   <ol>
     <li class="breadcrumb-item text-small"><a href="/business">Business</a></li>

modules/primer-breadcrumb/index.scss

@@ -1,4 +1,3 @@
 // support files
 @import "primer-support/index.scss";
-@import "primer-marketing-support/index.scss";
 @import "./lib/breadcrumb.scss";

modules/primer-breadcrumb/package.json

@@ -8,7 +8,7 @@
   "style": "build/build.css",
   "main": "build/index.js",
   "primer": {
-    "category": "marketing",
+    "category": "core",
     "module_type": "components"
   },
   "files": [
@@ -28,7 +28,6 @@
     "test": "../../script/npm-run-all build lint test-docs"
   },
   "dependencies": {
-    "primer-marketing-support": "1.3.0",
     "primer-support": "4.3.0"
   },
   "keywords": [

modules/primer-breadcrumb/stories.js

@@ -1,15 +1,10 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
 
-storiesOf('Breadcrumb', module)
-.add('breadcrumb', () => (
-  <div className='p-4'>
-    <nav aria-label='Breadcrumb'>
-      <ol>
-        <li className='breadcrumb-item text-small'><a href='/business'>Business</a></li>
-        <li className='breadcrumb-item text-small'><a href='/business/customers'>Customers</a></li>
-        <li className='breadcrumb-item breadcrumb-item-selected text-small text-gray' aria-current='page'>MailChimp</li>
-      </ol>
-    </nav>
-  </div>
-))
+const stories = storiesOf('Breadcrumb', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })

modules/primer-core/index.scss

@@ -16,6 +16,7 @@
 // Core modules
 @import "primer-base/index.scss";
 @import "primer-box/index.scss";
+@import "primer-breadcrumb/index.scss";
 @import "primer-buttons/index.scss";
 @import "primer-table-object/index.scss";
 @import "primer-forms/index.scss";

modules/primer-core/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "primer-base": "1.4.0",
     "primer-box": "2.4.0",
+    "primer-breadcrumb": "1.3.0",
     "primer-buttons": "2.3.0",
     "primer-forms": "1.3.0",
     "primer-layout": "1.3.0",

modules/primer-marketing/index.scss

@@ -16,7 +16,6 @@
 
 // marketing specific css modules
 @import "primer-marketing-type/index.scss";
-@import "primer-breadcrumb/index.scss";
 @import "primer-cards/index.scss";
 @import "primer-page-headers/index.scss";
 @import "primer-page-sections/index.scss";

modules/primer-marketing/package.json

@@ -26,7 +26,6 @@
     "lint": "../../script/lint-scss"
   },
   "dependencies": {
-    "primer-breadcrumb": "1.3.0",
     "primer-cards": "0.4.0",
     "primer-marketing-support": "1.3.0",
     "primer-marketing-type": "1.3.0",

package.json

@@ -24,20 +24,27 @@
     "commit-status": "^4.1.0",
     "css-loader": "^0.28.4",
     "glob": "^7.1.2",
+    "html-to-react": "^1.2.11",
     "lerna": "^2.0.0",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.0.2",
     "octicons": "^6.0.1",
+    "parse-pairs": "^0.2.2",
     "postcss-loader": "^2.0.6",
     "primer-module-build": "^1.0.2",
+    "raw-loader": "^0.5.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-svg-inline": "^2.0.0",
+    "remark": "^8.0.0",
     "sass-loader": "^6.0.6",
     "semver": "^5.3.0",
     "style-loader": "^0.18.2",
     "stylelint": "^7.13.0",
     "stylelint-config-primer": "^2.0.0",
+    "unist-util-find-before": "^2.0.1",
+    "unist-util-parents": "^1.0.0",
+    "unist-util-select": "^1.5.0",
     "yo": "^2.0.0"
   }
 }