diff --git a/modules/primer-core/index.scss b/modules/primer-core/index.scss index 339fa21e1e..96252e00ff 100644 --- a/modules/primer-core/index.scss +++ b/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"; diff --git a/modules/primer-core/package.json b/modules/primer-core/package.json index 1730e2d2f5..e435a2386e 100644 --- a/modules/primer-core/package.json +++ b/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", diff --git a/modules/primer-pagination/LICENSE b/modules/primer-pagination/LICENSE new file mode 100644 index 0000000000..71fbac5e24 --- /dev/null +++ b/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. diff --git a/modules/primer-pagination/README.md b/modules/primer-pagination/README.md new file mode 100644 index 0000000000..7eae56481e --- /dev/null +++ b/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 + + + +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 + +``` + +## 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 + +``` + + diff --git a/modules/primer-pagination/index.scss b/modules/primer-pagination/index.scss new file mode 100644 index 0000000000..32c9cd819d --- /dev/null +++ b/modules/primer-pagination/index.scss @@ -0,0 +1,3 @@ +// support files +@import "primer-support/index.scss"; +@import "./lib/pagination.scss"; diff --git a/modules/primer-pagination/lib/pagination.scss b/modules/primer-pagination/lib/pagination.scss new file mode 100644 index 0000000000..841cc0fb45 --- /dev/null +++ b/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; + } +} diff --git a/modules/primer-pagination/package.json b/modules/primer-pagination/package.json new file mode 100644 index 0000000000..75a0dbf38c --- /dev/null +++ b/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" + ] +} diff --git a/modules/primer-pagination/stories.js b/modules/primer-pagination/stories.js new file mode 100644 index 0000000000..381896e16f --- /dev/null +++ b/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) + }) diff --git a/modules/primer/package.json b/modules/primer/package.json index 3e6d90aaa8..fb03f01b51 100644 --- a/modules/primer/package.json +++ b/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",