Skip to content

Commit 52b1a6d

Browse files
author
Emily
authored
Merge pull request #487 from primer/task/pagination-component
Import Pagination Component
2 parents fddaeed + 2ab470e commit 52b1a6d

File tree

9 files changed

+232
-0
lines changed

9 files changed

+232
-0
lines changed

‎modules/primer-core/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@import "primer-forms/index.scss";
2323
@import "primer-layout/index.scss";
2424
@import "primer-navigation/index.scss";
25+
@import "primer-pagination/index.scss";
2526
@import "primer-tooltips/index.scss";
2627
@import "primer-truncate/index.scss";
2728

‎modules/primer-core/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"primer-forms": "2.1.0",
3535
"primer-layout": "1.4.5",
3636
"primer-navigation": "1.5.3",
37+
"primer-pagination": "0.0.1",
3738
"primer-support": "4.5.2",
3839
"primer-table-object": "1.4.5",
3940
"primer-tooltips": "1.5.3",

‎modules/primer-pagination/LICENSE‎

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

‎modules/primer-pagination/README.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# Primer Pagination
2+
3+
[![npm version](https://img.shields.io/npm/v/primer-pagination.svg)](https://www.npmjs.org/package/primer-pagination)
4+
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
5+
6+
> Pagination component for applying button styles to a connected set of links that go to related pages
7+
8+
This repository is a module of the full [primer][primer] repository.
9+
10+
## Install
11+
12+
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-pagination` with this command.
13+
14+
```
15+
$ npm install --save primer-pagination
16+
```
17+
18+
## Usage
19+
20+
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.
21+
22+
```scss
23+
@import "primer-pagination/index.scss";
24+
```
25+
26+
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._
27+
28+
## Build
29+
30+
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:
31+
32+
```
33+
$ npm run build
34+
```
35+
36+
## Documentation
37+
38+
<!-- %docs
39+
title: Pagination
40+
status: New Release
41+
-->
42+
43+
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).
44+
45+
{:toc}
46+
47+
## Previous/next pagination
48+
49+
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.
50+
51+
```html
52+
<nav class="paginate-container" aria-label="Pagination">
53+
<div class="pagination">
54+
<span class="previous_page disabled">Previous</span>
55+
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
56+
</div>
57+
</nav>
58+
```
59+
60+
## Numbered pagination
61+
62+
For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
63+
64+
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.
65+
66+
As always, make sure to include the appropriate `aria` attributes to make the element accessible.
67+
68+
- Add `aria-label="Pagination"` to the the `paginate-container` element.
69+
- Add `aria-current="true"` to the current page marker.
70+
- Add `aria-label="Page X"` to each anchor link.
71+
72+
```html
73+
<nav class="paginate-container" aria-label="Pagination">
74+
<div class="pagination">
75+
<span class="previous_page disabled">Previous</span>
76+
<em class="current selected" aria-current="true">1</em>
77+
<a href="#url" aria-label="Page 2">2</a>
78+
<a href="#url" aria-label="Page 3">3</a>
79+
<span class="gap">…</span>
80+
<a href="#url" aria-label="Page 8">8</a>
81+
<a href="#url" aria-label="Page 9">9</a>
82+
<a href="#url" aria-label="Page 10">10</a>
83+
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
84+
</div>
85+
</nav>
86+
```
87+
88+
<!-- %enddocs -->

‎modules/primer-pagination/index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// support files
2+
@import "primer-support/index.scss";
3+
@import "./lib/pagination.scss";

‎modules/primer-pagination/lib/pagination.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Needs refactoring
2+
// stylelint-disable selector-max-type
3+
.pagination {
4+
@include clearfix;
5+
6+
a,
7+
span,
8+
em {
9+
position: relative;
10+
float: left;
11+
padding: 7px 12px;
12+
margin-left: -1px;
13+
font-size: 13px;
14+
font-style: normal;
15+
font-weight: $font-weight-bold;
16+
color: $text-blue;
17+
white-space: nowrap;
18+
vertical-align: middle;
19+
cursor: pointer;
20+
user-select: none;
21+
background: $bg-white; // Reset default gradient backgrounds and colors
22+
border: $border-width $border-style $border-gray;
23+
24+
&:first-child {
25+
margin-left: 0;
26+
border-top-left-radius: $border-radius;
27+
border-bottom-left-radius: $border-radius;
28+
}
29+
30+
&:last-child {
31+
border-top-right-radius: $border-radius;
32+
border-bottom-right-radius: $border-radius;
33+
}
34+
35+
// Bring any button into forefront for proper borders given negative margin below
36+
&:hover,
37+
&:focus {
38+
z-index: 2;
39+
text-decoration: none;
40+
background-color: darken($gray-100, 2%);
41+
border-color: $border-gray;
42+
}
43+
}
44+
45+
.selected { z-index: 3; }
46+
47+
.current,
48+
.current:hover {
49+
z-index: 3;
50+
color: $text-white;
51+
background-color: $bg-blue;
52+
border-color: $border-blue;
53+
}
54+
55+
.gap,
56+
.disabled,
57+
.gap:hover,
58+
.disabled:hover {
59+
color: $gray-300;
60+
cursor: default;
61+
background-color: $bg-gray-light;
62+
}
63+
}
64+
65+
// Unified centered pagination across the site
66+
.paginate-container {
67+
margin-top: 20px;
68+
margin-bottom: 15px;
69+
text-align: center;
70+
71+
.pagination {
72+
display: inline-block;
73+
}
74+
}

‎modules/primer-pagination/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"version": "0.0.1",
3+
"name": "primer-pagination",
4+
"description": "Pagination component for applying button styles to a connected set of links that go to related pages",
5+
"homepage": "http://primer.github.io/",
6+
"primer": {
7+
"category": "product",
8+
"module_type": "components"
9+
},
10+
"author": "GitHub, Inc.",
11+
"license": "MIT",
12+
"style": "index.scss",
13+
"sass": "index.scss",
14+
"main": "build/index.js",
15+
"repository": "https://github.com/primer/primer/tree/master/modules/primer-pagination",
16+
"bugs": {
17+
"url": "https://github.com/primer/primer/issues"
18+
},
19+
"scripts": {
20+
"test-docs": "../../script/test-docs",
21+
"build": "../../script/npm-run primer-module-build index.scss",
22+
"prepare": "npm run build",
23+
"lint": "../../script/lint-scss",
24+
"test": "../../script/npm-run-all build lint test-docs"
25+
},
26+
"dependencies": {
27+
"primer-support": "4.5.2"
28+
},
29+
"keywords": [
30+
"github",
31+
"primer"
32+
]
33+
}

‎modules/primer-pagination/stories.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import { storiesOf } from '@storybook/react'
3+
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
4+
5+
const stories = storiesOf('Pagination', module)
6+
7+
storiesFromMarkdown(require.context('.', true, /\.md$/))
8+
.forEach(({title, story}) => {
9+
stories.add(title, story)
10+
})

‎modules/primer/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"primer-navigation": "1.5.3",
5050
"primer-page-headers": "1.4.5",
5151
"primer-page-sections": "1.4.5",
52+
"primer-pagination": "0.0.1",
5253
"primer-popover": "0.0.6",
5354
"primer-product": "5.6.2",
5455
"primer-subhead": "1.0.3",

0 commit comments

Comments
 (0)