Primer release 10.5.0

.storybook/lib/storiesFromMarkdown.js

@@ -19,17 +19,22 @@ const railsOcticonToReact = (html) => {
   return html
 }
 
-const nodeToStory = (node, file) => {
-  const html = railsOcticonToReact(node.value)
-  const element = htmlParser.parse(html)
+const parseBlockAttrs = (node, file) => {
   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}`
+  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
   return {
     title,
-    story: () => element,
-    attrs,
+    story: () => htmlParser.parse(html),
     html,
     file,
     node,
@@ -44,14 +49,17 @@ const getPreviousHeading = node => {
 }
 
 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")
-    )
-  }, [])
+  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))
+      )
+    }, [])
 }

.storybook/webpack.config.js

@@ -1,6 +1,6 @@
-const path = require("path");
+const path = require('path');
 
-const modulesPath = path.resolve(__dirname, "../modules")
+const modulesPath = path.resolve(__dirname, '../modules')
 
 module.exports = (config, env) => {
 
@@ -9,26 +9,34 @@ module.exports = (config, env) => {
       .filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
   }
 
-  config.module.rules.push(
-    {
-      test: /\.md$/,
-      use: "raw-loader",
-    },
+  const rules = config.module.rules
+
+  rules.forEach((rule, index) => {
+    if ('README.md'.match(rule.test)) {
+      // console.warn('replacing MD rule:', rule)
+      rules.splice(index, 1, {
+        test: /\.md$/,
+        loader: 'raw-loader',
+      })
+    }
+  })
+
+  rules.push(
     {
       test: /\.scss$/,
       loaders: [
-        "style-loader",
-        "css-loader",
+        'style-loader',
+        'css-loader',
         {
-          loader: "postcss-loader",
+          loader: 'postcss-loader',
           options: {
             config: {
-              path: require.resolve("./postcss.config.js"),
+              path: require.resolve('./postcss.config.js'),
             },
           },
         },
         {
-          loader: "sass-loader",
+          loader: 'sass-loader',
           options: {
             includePaths: [
               modulesPath,

CHANGELOG.md

@@ -1,3 +1,30 @@
+# 10.5.0
+
+#### :rocket: Enhancement
+* [#487](https://github.com/primer/primer/pull/487) Import Pagination Component. ([@emplums](https://github.com/emplums))
+* [#474](https://github.com/primer/primer/pull/474) Add text-mono utility class. ([@emplums](https://github.com/emplums))
+* [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan))
+
+#### :bug: Bug Fix
+* [#465](https://github.com/primer/primer/pull/465) Fix Popover--right-bottom caret positioning. ([@shawnbot](https://github.com/shawnbot))
+* [#458](https://github.com/primer/primer/pull/458) Fix broken pointer from packages to modules. ([@tysongach](https://github.com/tysongach))
+
+#### :memo: Documentation
+* [#486](https://github.com/primer/primer/pull/486) Documenting the text-inheritance color utility. ([@jonrohan](https://github.com/jonrohan))
+* [#481](https://github.com/primer/primer/pull/481) Styleguide Polish. ([@emplums](https://github.com/emplums))
+* [#464](https://github.com/primer/primer/pull/464) Fix markdown stories. ([@shawnbot](https://github.com/shawnbot))
+* [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan))
+* [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos))
+
+#### Committers: 7
+- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
+- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
+- Emily ([emplums](https://github.com/emplums))
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+- Tyson Gach ([tysongach](https://github.com/tysongach))
+- [muan](https://github.com/muan)
+
 # 10.4.0 (2018-03-14)
 
 #### :rocket: Enhancement

README.md

@@ -46,7 +46,7 @@ Then, you would import the module with:
 @import "primer-navigation/index.scss";
 ```
 
-Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`packages` directory](./packages) like so:
+Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`modules` directory](./modules) like so:
 
 ```scss
 @import "primer/modules/primer-navigation/index.css";

modules/primer-alerts/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.5",
+  "version": "1.5.6",
   "name": "primer-alerts",
   "description": "Flash messages, or alerts, inform users of successful or pending actions.",
   "homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "alerts",

modules/primer-avatars/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.2",
+  "version": "1.5.3",
   "name": "primer-avatars",
   "description": "Basic styles for user profile avatars.",
   "homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "avatars",

modules/primer-base/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.0",
+  "version": "1.7.1",
   "name": "primer-base",
   "description": "CSS to reset the browsers default styles",
   "homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "primer",

modules/primer-blankslate/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.5",
+  "version": "1.4.6",
   "name": "primer-blankslate",
   "description": "Blankslates are for when there is a lack of content within a page or section.",
   "homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "primer",

modules/primer-box/README.md

@@ -259,7 +259,7 @@ Use `Box--danger` to apply a red border to the outside of the box. This theme is
 </div>
 ```
 
-`Box-danger` is often paired with a red heading. See the [subhead](/styleguide/css/styles/product/components/subhead) docs for more information.
+`Box-danger` is often paired with a red heading. See the [subhead](../subhead) docs for more information.
 
 ```html
 <div class="Subhead border-bottom-0">
@@ -356,7 +356,7 @@ Use the `border-dashed` utility to apply a dashed border to a box.
 ## Boxes with flash alerts
 Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
 
-Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](/alerts) for more information.
+Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](../alerts) for more information.
 
 ```html
 <div class="Box">
@@ -455,7 +455,7 @@ Use `Counter--gray-dark` for a counter with a dark gray background and white tex
 ## Form elements and buttons in boxes
 To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
 
-Use [flexbox utilities](../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
+Use [flexbox utilities](../../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
 
 ```html
 <div class="Box Box--condensed">
@@ -561,7 +561,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
   </div>
 ```
 
-When a box is all by itself centered on a page you can use [column widths](/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../utilities/typography) instead of the built in box title styles.
+When a box is all by itself centered on a page you can use [column widths](../../objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../../utilities/typography) instead of the built in box title styles.
 
 ```html
 <div class="Box Box--spacious col-6 mx-auto text-center">
@@ -582,7 +582,7 @@ When a box is all by itself centered on a page you can use [column widths](/grid
 </div>
 ```
 
-Box patterns can also be made with, and modified with [border utilities](../utilities/borders).
+Box patterns can also be made with, and modified with [border utilities](../../utilities/borders).
 
 <!-- %enddocs -->
 

modules/primer-box/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.5",
+  "version": "2.5.6",
   "name": "primer-box",
   "description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
   "homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "primer",

modules/primer-branch-name/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.3",
+  "version": "1.0.4",
   "name": "primer-branch-name",
   "description": "A nice, consistent way to display branch names.",
   "homepage": "http://primer.github.io/",
@@ -29,7 +29,7 @@
     "test": "../../script/npm-run-all build lint test-docs"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "github",

modules/primer-breadcrumb/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.1",
+  "version": "1.5.2",
   "name": "primer-breadcrumb",
   "description": "Breadcrumb navigation for pages with parents / grandparents.",
   "homepage": "http://primer.github.io/",
@@ -29,7 +29,7 @@
     "test": "../../script/npm-run-all build lint test-docs"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "breadcrumb",

modules/primer-buttons/README.md

@@ -175,7 +175,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
 </div>
 ```
 
-You can also use the [counter](../../product/components/labels) component within buttons:
+You can also use the [counter](../labels#counters) component within buttons:
 
 ```html
 <button class="btn" type="button">

modules/primer-buttons/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.3",
+  "version": "2.5.4",
   "name": "primer-buttons",
   "description": "A collection of buttons used for primary and secondary actions.",
   "homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
     "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.5.2"
+    "primer-support": "4.5.3"
   },
   "keywords": [
     "primer",

modules/primer-core/index.scss

@@ -22,6 +22,7 @@
 @import "primer-forms/index.scss";
 @import "primer-layout/index.scss";
 @import "primer-navigation/index.scss";
+@import "primer-pagination/index.scss";
 @import "primer-tooltips/index.scss";
 @import "primer-truncate/index.scss";
 

modules/primer-core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.8.0",
+  "version": "6.9.0",
   "name": "primer-core",
   "description": "Primer's core modules",
   "homepage": "http://primer.github.io/",
@@ -27,17 +27,18 @@
     "lint": "../../script/lint-scss"
   },
   "dependencies": {
-    "primer-base": "1.7.0",
-    "primer-box": "2.5.5",
-    "primer-breadcrumb": "1.5.1",
-    "primer-buttons": "2.5.3",
-    "primer-forms": "2.1.0",
-    "primer-layout": "1.4.5",
-    "primer-navigation": "1.5.3",
-    "primer-support": "4.5.2",
-    "primer-table-object": "1.4.5",
-    "primer-tooltips": "1.5.3",
-    "primer-truncate": "1.4.5",
-    "primer-utilities": "4.9.0"
+    "primer-base": "1.7.1",
+    "primer-box": "2.5.6",
+    "primer-breadcrumb": "1.5.2",
+    "primer-buttons": "2.5.4",
+    "primer-forms": "2.1.1",
+    "primer-layout": "1.4.6",
+    "primer-navigation": "1.5.4",
+    "primer-pagination": "1.0.0",
+    "primer-support": "4.5.3",
+    "primer-table-object": "1.4.6",
+    "primer-tooltips": "1.5.4",
+    "primer-truncate": "1.4.6",
+    "primer-utilities": "4.10.0"
   }
 }

modules/primer-forms/README.md

@@ -176,7 +176,7 @@ Primer adds light `height` and `vertical-align` styles to `<select>`s for all br
 
 ##### Small
 
-Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).
+Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).
 
 ```html
 <select class="form-select select-sm" aria-label="Preference">