diff --git a/packages/Pagination/Pagination.jsx b/packages/Pagination/Pagination.jsx
new file mode 100644
index 000000000..f3693e9db
--- /dev/null
+++ b/packages/Pagination/Pagination.jsx
@@ -0,0 +1,150 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import safeRest from '@tds/shared-safe-rest'
+import DecorativeIcon from '@tds/core-decorative-icon'
+import Panels from './Panels'
+import Panel from './Panel/Panel'
+import styles from './Pagination.scss'
+
+/**
+ * @version ./package.json
+ */
+class Pagination extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ current: 1,
+ panels: this.props.children.length,
+ showPrevious: false,
+ showNext: true,
+ }
+ this.mapNumeric = this.mapNumeric.bind(this)
+ this.handleButtonState = this.handleButtonState.bind(this)
+ this.handleClick = this.handleClick.bind(this)
+ }
+
+ componentDidMount() {
+ this.handleButtonState()
+ }
+
+ generateKey = pre => {
+ return `${pre}_${new Date().getTime()}`
+ }
+
+ mapNumeric = () => {
+ return this.props.children.map((item, i) => {
+ const index = i + 1
+ let { current } = this.state
+ const { panels } = this.state
+ current = parseInt(current, 10) || 0
+ if (current === index) {
+ return (
+
+ {index}
+
+ )
+ }
+
+ if (panels < 7 || index === 1 || index === panels) {
+ return (
+
+
+
+ )
+ }
+ if (
+ index === current ||
+ index === current + 1 ||
+ index === current - 1 ||
+ (current < 3 && index < 5) ||
+ (current > panels - 2 && index > panels - 4)
+ ) {
+ return (
+
+
+
+ )
+ }
+ if (
+ index === current - 2 ||
+ index === current + 2 ||
+ (current < 3 && index === 5) ||
+ (current > panels - 2 && index === panels - 5)
+ ) {
+ return (
+
+ ...
+
+ )
+ }
+
+ return null
+ })
+ }
+
+ handleClick = e => {
+ e.preventDefault()
+ const value = parseInt(e.target.value, 10) || 0
+ if (value > this.state.panels || value < 1) {
+ return null
+ }
+ return this.setState({ current: value }, this.handleButtonState)
+ }
+
+ handleButtonState = () => {
+ if (this.state.current !== 1) {
+ this.setState({ showPrevious: true })
+ } else {
+ this.setState({ showPrevious: false })
+ }
+ if (this.state.current !== this.state.panels) {
+ this.setState({ showNext: true })
+ } else {
+ this.setState({ showNext: false })
+ }
+ }
+
+ render() {
+ const { children, ...rest } = this.props
+ const { current } = this.state
+ const increaseNumber = parseInt(current + 1, 10)
+ const decreaseNumber = parseInt(current - 1, 10)
+ return (
+
+
+ {children[current - 1] && children[current - 1]}
+
+
+ {this.state.showPrevious && (
+
+
+
+ )}
+
+ {this.state.showNext && (
+
+
+
+ )}
+
+
+ )
+ }
+}
+
+Pagination.propTypes = {
+ children: PropTypes.node.isRequired,
+}
+
+Pagination.Panel = Panel
+
+export default Pagination
diff --git a/packages/Pagination/Pagination.md b/packages/Pagination/Pagination.md
new file mode 100644
index 000000000..06ff8eed3
--- /dev/null
+++ b/packages/Pagination/Pagination.md
@@ -0,0 +1,17 @@
+```jsx
+
+ Content 1
+ Content 2
+ Content 3
+ Content 4
+ Content 5
+ Content 6
+ Content 7
+ Content 8
+
+
+
This is a paragraph on the 9th panel
+
+
+
+```
diff --git a/packages/Pagination/Pagination.scss b/packages/Pagination/Pagination.scss
new file mode 100644
index 000000000..027c2cefa
--- /dev/null
+++ b/packages/Pagination/Pagination.scss
@@ -0,0 +1,3 @@
+.container {
+ opacity: 1;
+}
diff --git a/packages/Pagination/README.md b/packages/Pagination/README.md
new file mode 100644
index 000000000..5590b8c08
--- /dev/null
+++ b/packages/Pagination/README.md
@@ -0,0 +1 @@
+# TDS Community: Pagination
diff --git a/packages/Pagination/__tests__/Pagination.spec.jsx b/packages/Pagination/__tests__/Pagination.spec.jsx
new file mode 100644
index 000000000..e47393760
--- /dev/null
+++ b/packages/Pagination/__tests__/Pagination.spec.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { mount } from 'enzyme'
+
+import Pagination from '../Pagination'
+
+describe('Pagination', () => {
+ const children = (
+
+ Content 1
+ Content 2
+ Content 3
+ Content 4
+ Content 5
+ Content 6
+ Content 7
+ Content 8
+
+
+
This is a paragraph on the 9th panel
+
+
+
+ )
+ const doMount = () => mount(children)
+
+ it('renders', () => {
+ const pagination = doMount()
+
+ expect(pagination).toMatchSnapshot()
+ })
+
+ it('does other things', () => {
+ const pagination = doMount()
+
+ expect(pagination).toExist()
+ })
+
+ it('does not allow custom CSS', () => {
+ const pagination = doMount({
+ className: 'my-custom-class',
+ style: { color: 'hotpink' },
+ })
+
+ expect(pagination).not.toHaveProp('className', 'my-custom-class')
+ expect(pagination).not.toHaveProp('style')
+ })
+})
diff --git a/packages/Pagination/index.cjs.js b/packages/Pagination/index.cjs.js
new file mode 100644
index 000000000..e92532bf5
--- /dev/null
+++ b/packages/Pagination/index.cjs.js
@@ -0,0 +1,4 @@
+require('./dist/index.css')
+const Pagination = require('./dist/index.cjs')
+
+module.exports = Pagination
diff --git a/packages/Pagination/index.es.js b/packages/Pagination/index.es.js
new file mode 100644
index 000000000..f4b9efd0c
--- /dev/null
+++ b/packages/Pagination/index.es.js
@@ -0,0 +1,4 @@
+import './dist/index.css'
+import Pagination from './dist/index.es'
+
+export default Pagination
diff --git a/packages/Pagination/package.json b/packages/Pagination/package.json
new file mode 100644
index 000000000..f611b8c41
--- /dev/null
+++ b/packages/Pagination/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "@tds/community-pagination",
+ "version": "1.0.0-preview",
+ "description": "",
+ "main": "index.cjs.js",
+ "module": "index.es.js",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/telus/tds-community.git"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "author": "TELUS digital",
+ "engines": {
+ "node": ">=8"
+ },
+ "bugs": {
+ "url": "https://github.com/telus/tds-community/issues"
+ },
+ "homepage": "http://tds.telus.com",
+ "peerDependencies": {
+ "react": ">=15",
+ "react-dom": ">=15"
+ },
+ "dependencies": {
+ "@tds/shared-safe-rest": "^1.0.0",
+ "pagination": "^0.4.6",
+ "prop-types": "^15.6.2"
+ }
+}
diff --git a/packages/Pagination/rollup.config.js b/packages/Pagination/rollup.config.js
new file mode 100644
index 000000000..bc16e6b8b
--- /dev/null
+++ b/packages/Pagination/rollup.config.js
@@ -0,0 +1,7 @@
+import configure from '../../config/rollup.config'
+import { dependencies } from './package.json'
+
+export default configure({
+ input: './Pagination.jsx',
+ dependencies,
+})