{WIP} Add pagination component

.storybook/lib/storiesFromMarkdown.js

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

@@ -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,34 +9,26 @@ module.exports = (config, env) => {
       .filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
   }
 
-  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(
+  config.module.rules.push(
+    {
+      test: /\.md$/,
+      use: "raw-loader",
+    },
     {
       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,

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` [`modules` directory](./modules) like so:
+Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`packages` directory](./packages) like so:
 
 ```scss
 @import "primer/modules/primer-navigation/index.css";

lerna.json

@@ -1,7 +1,6 @@
 {
   "lerna": "2.4.0",
   "packages": [
-    "meta/*",
     "modules/*",
     "tools/*"
   ],

modules/primer-alerts/lib/flash.scss

@@ -72,7 +72,6 @@
   border-radius: 0;
 }
 
-// FIXME deprecate this
 .warning {
   padding: $em-spacer-5;
   margin-bottom: 0.8em;

modules/primer-alerts/package.json

@@ -10,10 +10,7 @@
   "main": "build/index.js",
   "primer": {
     "category": "product",
-    "module_type": "components",
-    "class_whitelist": [
-      "warning"
-    ]
+    "module_type": "components"
   },
   "files": [
     "index.scss",

modules/primer-base/package.json

@@ -10,11 +10,7 @@
   "main": "build/index.js",
   "primer": {
     "category": "core",
-    "module_type": "support",
-    "class_whitelist": [
-      "octicon",
-      "rule"
-    ]
+    "module_type": "support"
   },
   "files": [
     "index.scss",

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-marketing-utilities/package.json

@@ -10,11 +10,7 @@
   "main": "build/index.js",
   "primer": {
     "category": "marketing",
-    "module_type": "utilities",
-    "class_whitelist": [
-      "border-??-*",
-      "position-??-*"
-    ]
+    "module_type": "utilities"
   },
   "files": [
     "index.scss",

modules/primer-pagination/README.md

@@ -0,0 +1,86 @@
+# Primer Pagination
+
+[![npm version](https://img.shields.io/npm/v/primer-pagination.svg)](https://www.npmjs.org/package/primer-pagination)
+[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
+
+> Pagination component for applying button styles to a connected set of links that go to related pages
+
+This repository is a module of the full [primer][primer] repository.
+
+## Install
+
+This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-pagination` with this command.
+
+```
+$ npm install --save primer-pagination
+```
+
+## Usage
+
+The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+
+```scss
+@import "primer-pagination/index.scss";
+```
+
+You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
+
+## Build
+
+For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
+
+```
+$ npm run build
+```
+
+## Documentation
+
+<!-- %docs
+title: Pagination
+status: Experimental
+-->
+
+Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
+
+{:toc}
+
+## Previous/next pagination
+
+You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
+
+```html
+<nav class="paginate-container" aria-label="Pagination">
+  <div class="pagination">
+    <span class="previous_page disabled">Previous</span>
+    <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
+  </div>
+</nav>
+```
+
+## Numbered pagination
+
+For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
+
+To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the class `disabled` to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.
+
+As always, make sure to include the appropriate `aria` attributes to make the element accessible.
+
+- Add `aria-label="Pagination"` to the the `paginate-container` element.
+- Add `aria-current="true"` to the current page marker.
+- Add `aria-label="Page X"` to each anchor link.
+
+```html
+<nav class="paginate-container" aria-label="Pagination">
+  <div class="pagination">
+    <span class="previous_page disabled">Previous</span>
+    <em class="current" aria-current="true">1</em>
+    <a href="#url" aria-label="Page 2">2</a>
+    <a href="#url" aria-label="Page 3">3</a>
+    <span class="gap">…</span>
+    <a href="#url" aria-label="Page 8">8</a>
+    <a href="#url" aria-label="Page 9">9</a>
+    <a href="#url" aria-label="Page 10">10</a>
+    <a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
+  </div>
+</nav>
+```

modules/primer-pagination/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import "primer-support/index.scss";
+@import "./lib/pagination.scss";