Merge remote-tracking branch 'origin/master' into release-11.0.0

primer · broccolini · Dec 5, 2017 · Jan 18, 2018 · Jan 18, 2018 · Oct 15, 2018
commit 4192084a71ab7dae8c55e7d20f219c43f7c324ca
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -1,9 +1,5 @@
 ## Contributing
 
-[fork]: https://github.com/primer/primer/fork
-[pr]: https://github.com/primer/primer/compare
-[style]: https://styleguide.github.com/primer/principles/
-
 Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
 
 ## Using the issue tracker
@@ -185,3 +181,7 @@ This section is targeted at maintainers of primer, to instruct them on the proce
 - [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
 - [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
 - [GitHub Help](https://help.github.com)
+
+[fork]: https://github.com/primer/primer/fork
+[pr]: https://github.com/primer/primer/compare
+[style]: https://styleguide.github.com/primer/principles/
diff --git a/.storybook/lib/storiesFromMarkdown.js b/.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)
+  }, [])
 }
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 7
+  - 8
 
 env:
   global:
@@ -23,7 +23,7 @@ after_success:
 deploy:
   # publish release candidates on release branches
   - provider: script
-    script: script/release-candidate
+    script: script/release-candidate --dry-run
     skip_cleanup: true
     on:
       branch: release*

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,24 @@
+# 10.9.0
+#### :rocket: Enhancement
+* [#586](https://github.com/primer/primer/pull/586) Hiding .Counter component when it's empty.. ([@jonrohan](https://github.com/jonrohan))
+* [#545](https://github.com/primer/primer/pull/545) Simplify responsive utilities with $responsive-variants. ([@shawnbot](https://github.com/shawnbot))
+* [#557](https://github.com/primer/primer/pull/557) Add !important to [hidden]. ([@muan](https://github.com/muan))
+
+#### :memo: Documentation
+* [#580](https://github.com/primer/primer/pull/580) Remove invalid button classes. ([@shawnbot](https://github.com/shawnbot))
+
+#### :house: Internal
+* [#581](https://github.com/primer/primer/pull/581) Use code-blocks. ([@shawnbot](https://github.com/shawnbot))
+* [#530](https://github.com/primer/primer/pull/530) Adding user details to storybook publish script. ([@jonrohan](https://github.com/jonrohan))
+* [#579](https://github.com/primer/primer/pull/579) Upgrade to lerna@2.11, rebuild package-lock. ([@shawnbot](https://github.com/shawnbot))
+
+#### Committers: 5
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- Mickaël Derriey ([mderriey](https://github.com/mderriey))
+- Mu-An Chiou ([muan](https://github.com/muan))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+- Sophie Shepherd ([sophshep](https://github.com/sophshep))
+
 # 10.8.1
 #### :bug: Bug Fix
 * [#554](https://github.com/primer/primer/pull/554) Fixes peer dependency issues ([@emplums](https://github.com/emplums))

diff --git a/modules/primer-alerts/package.json b/modules/primer-alerts/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.5.9",
+  "version": "1.5.10",
   "name": "primer-alerts",
   "description": "Flash messages, or alerts, inform users of successful or pending actions.",
   "homepage": "http://primer.github.io/",
@@ -33,7 +33,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "alerts",

diff --git a/modules/primer-avatars/package.json b/modules/primer-avatars/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.5.6",
+  "version": "1.5.7",
   "name": "primer-avatars",
   "description": "Basic styles for user profile avatars.",
   "homepage": "http://primer.github.io/",
@@ -30,7 +30,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "avatars",

diff --git a/modules/primer-base/lib/normalize.scss b/modules/primer-base/lib/normalize.scss
@@ -82,7 +82,7 @@ progress {
 
 template, /* 1 */
 [hidden] {
-  display: none;
+  display: none !important;
 }
 
 /* Links

diff --git a/modules/primer-base/package.json b/modules/primer-base/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.7.4",
+  "version": "1.8.0",
   "name": "primer-base",
   "description": "CSS to reset the browsers default styles",
   "homepage": "http://primer.github.io/",
@@ -34,7 +34,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "primer",

diff --git a/modules/primer-blankslate/package.json b/modules/primer-blankslate/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.4.9",
+  "version": "1.4.10",
   "name": "primer-blankslate",
   "description": "Blankslates are for when there is a lack of content within a page or section.",
   "homepage": "http://primer.github.io/",
@@ -30,7 +30,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "primer",

diff --git a/modules/primer-box/package.json b/modules/primer-box/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.5.9",
+  "version": "2.5.10",
   "name": "primer-box",
   "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
   "homepage": "http://primer.github.io/",
@@ -30,7 +30,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "primer",

diff --git a/modules/primer-branch-name/package.json b/modules/primer-branch-name/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.7",
+  "version": "1.0.8",
   "name": "primer-branch-name",
   "description": "A nice, consistent way to display branch names.",
   "homepage": "http://primer.github.io/",
@@ -31,7 +31,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "github",

diff --git a/modules/primer-breadcrumb/package.json b/modules/primer-breadcrumb/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.5.5",
+  "version": "1.5.6",
   "name": "primer-breadcrumb",
   "description": "Breadcrumb navigation for pages with parents / grandparents.",
   "homepage": "http://primer.github.io/",
@@ -31,7 +31,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "breadcrumb",

diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md
@@ -95,23 +95,20 @@ Use `.btn-large` to increase the padding and border radius of a button. This is
 [Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
 
 ```html
-
 <p>
   <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
-  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
+  <button class="btn btn-large" type="button">Large button button</button>
 </p>
 
 ```
 
 Use `.btn-large` with a type scale utility to transform the text to a bigger size.
 
 ```html
-
 <p class="f3">
   <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
   <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
 </p>
-
 ```
 
 ## Disabled state

diff --git a/modules/primer-buttons/package.json b/modules/primer-buttons/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.6.0",
+  "version": "2.6.1",
   "name": "primer-buttons",
   "description": "A collection of buttons used for primary and secondary actions.",
   "homepage": "http://primer.github.io/",
@@ -30,7 +30,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "primer",

diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js
@@ -14,15 +14,6 @@ storiesOf('Button', module)
       <button className='btn btn-primary disabled'>disabled</button>
     </div>
   ))
-  .add('btn-secondary', () => (
-    <div className='p-4 d-flex flex-justify-between'>
-      <button className='btn btn-secondary'>Button</button>
-      <button className='btn btn-secondary hover'>hover</button>
-      <button className='btn btn-secondary focus'>focus</button>
-      <button className='btn btn-secondary selected'>selected</button>
-      <button className='btn btn-secondary disabled'>disabled</button>
-    </div>
-  ))
   .add('btn-danger', () => (
     <div className='p-4 d-flex flex-justify-between'>
       <button className='btn btn-danger'>Button</button>
@@ -62,7 +53,7 @@ storiesOf('Button', module)
   .add('btn-large', () => (
     <div className='f3 p-4'>
       <a className="btn btn-large btn-purple mr-6" href="#url" role="button">Large link button</a>
-      <button className="btn btn-large btn-outline-blue" type="button">Large button button</button>
+      <button className="btn btn-large" type="button">Large button button</button>
     </div>
   ))
   .add('btn-link', () => (

diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "6.10.3",
+  "version": "6.10.4",
   "name": "primer-core",
   "description": "Primer's core modules",
   "homepage": "http://primer.github.io/",
@@ -29,18 +29,18 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-base": "1.7.4",
-    "primer-box": "2.5.9",
-    "primer-breadcrumb": "1.5.5",
-    "primer-buttons": "2.6.0",
-    "primer-forms": "2.1.4",
-    "primer-layout": "1.4.9",
-    "primer-navigation": "1.5.7",
-    "primer-pagination": "1.0.3",
-    "primer-support": "4.6.0",
-    "primer-table-object": "1.4.9",
-    "primer-tooltips": "1.5.7",
-    "primer-truncate": "1.4.9",
-    "primer-utilities": "4.12.0"
+    "primer-base": "1.8.0",
+    "primer-box": "2.5.10",
+    "primer-breadcrumb": "1.5.6",
+    "primer-buttons": "2.6.1",
+    "primer-forms": "2.1.5",
+    "primer-layout": "1.5.0",
+    "primer-navigation": "1.5.8",
+    "primer-pagination": "1.0.4",
+    "primer-support": "4.6.1",
+    "primer-table-object": "1.4.10",
+    "primer-tooltips": "1.5.8",
+    "primer-truncate": "1.4.10",
+    "primer-utilities": "4.13.0"
   }
 }
diff --git a/modules/primer-forms/package.json b/modules/primer-forms/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.1.4",
+  "version": "2.1.5",
   "name": "primer-forms",
   "description": "Style individual form controls and utilize common layouts.",
   "homepage": "http://primer.github.io/",
@@ -30,7 +30,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0"
+    "primer-support": "4.6.1"
   },
   "keywords": [
     "primer",

diff --git a/modules/primer-labels/README.md b/modules/primer-labels/README.md
@@ -129,7 +129,7 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
 
 ## Counters
 
-Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text.
+Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, it's visibility will be hidden.
 
 ```html title="Counter"
 <span class="Counter">16</span>