Merge pull request #487 from primer/task/pagination-component

Import Pagination Component

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

@@ -34,6 +34,7 @@
     "primer-forms": "2.1.0",
     "primer-layout": "1.4.5",
     "primer-navigation": "1.5.3",
+    "primer-pagination": "0.0.1",
     "primer-support": "4.5.2",
     "primer-table-object": "1.4.5",
     "primer-tooltips": "1.5.3",

modules/primer-pagination/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

modules/primer-pagination/README.md

@@ -0,0 +1,88 @@
+# 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: New Release
+-->
+
+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 selected" 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>
+```
+
+<!-- %enddocs -->

modules/primer-pagination/index.scss

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

modules/primer-pagination/lib/pagination.scss

@@ -0,0 +1,74 @@
+// Needs refactoring
+// stylelint-disable selector-max-type
+.pagination {
+  @include clearfix;
+
+  a,
+  span,
+  em {
+    position: relative;
+    float: left;
+    padding: 7px 12px;
+    margin-left: -1px;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: $font-weight-bold;
+    color: $text-blue;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    background: $bg-white; // Reset default gradient backgrounds and colors
+    border: $border-width $border-style $border-gray;
+
+    &:first-child {
+      margin-left: 0;
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:last-child {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+
+    // Bring any button into forefront for proper borders given negative margin below
+    &:hover,
+    &:focus {
+      z-index: 2;
+      text-decoration: none;
+      background-color: darken($gray-100, 2%);
+      border-color: $border-gray;
+    }
+  }
+
+  .selected { z-index: 3; }
+
+  .current,
+  .current:hover {
+    z-index: 3;
+    color: $text-white;
+    background-color: $bg-blue;
+    border-color: $border-blue;
+  }
+
+  .gap,
+  .disabled,
+  .gap:hover,
+  .disabled:hover {
+    color: $gray-300;
+    cursor: default;
+    background-color: $bg-gray-light;
+  }
+}
+
+// Unified centered pagination across the site
+.paginate-container {
+  margin-top: 20px;
+  margin-bottom: 15px;
+  text-align: center;
+
+  .pagination {
+    display: inline-block;
+  }
+}

modules/primer-pagination/package.json

@@ -0,0 +1,33 @@
+{
+  "version": "0.0.1",
+  "name": "primer-pagination",
+  "description": "Pagination component for applying button styles to a connected set of links that go to related pages",
+  "homepage": "http://primer.github.io/",
+  "primer": {
+    "category": "product",
+    "module_type": "components"
+  },
+  "author": "GitHub, Inc.",
+  "license": "MIT",
+  "style": "index.scss",
+  "sass": "index.scss",
+  "main": "build/index.js",
+  "repository": "https://github.com/primer/primer/tree/master/modules/primer-pagination",
+  "bugs": {
+    "url": "https://github.com/primer/primer/issues"
+  },
+  "scripts": {
+    "test-docs": "../../script/test-docs",
+    "build": "../../script/npm-run primer-module-build index.scss",
+    "prepare": "npm run build",
+    "lint": "../../script/lint-scss",
+    "test": "../../script/npm-run-all build lint test-docs"
+  },
+  "dependencies": {
+    "primer-support": "4.5.2"
+  },
+  "keywords": [
+    "github",
+    "primer"
+  ]
+}

modules/primer-pagination/stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Pagination', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })

modules/primer/package.json

@@ -49,6 +49,7 @@
     "primer-navigation": "1.5.3",
     "primer-page-headers": "1.4.5",
     "primer-page-sections": "1.4.5",
+    "primer-pagination": "0.0.1",
     "primer-popover": "0.0.6",
     "primer-product": "5.6.2",
     "primer-subhead": "1.0.3",