From 17d4c4785746ce1c648cd29b62ee87ac6f621a53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Mon, 31 Oct 2016 18:59:12 +0000
Subject: [PATCH] implement <Pagination> component (fixes #54)

---
 ui/src/components/pagination/index.js  | 44 +++++++++++++++++++++
 ui/src/components/pagination/readme.md | 53 +++++++++++++++++++++++++
 ui/src/components/pagination/style.css | 55 ++++++++++++++++++++++++++
 ui/src/docs.js                         |  3 +-
 ui/src/index.js                        |  3 +-
 ui/test/index.js                       |  6 +++
 6 files changed, 162 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/pagination/index.js
 create mode 100644 ui/src/components/pagination/readme.md
 create mode 100644 ui/src/components/pagination/style.css

diff --git a/ui/src/components/pagination/index.js b/ui/src/components/pagination/index.js
new file mode 100644
index 00000000..3f172622
--- /dev/null
+++ b/ui/src/components/pagination/index.js
@@ -0,0 +1,44 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const Pagination = ({
+  children,
+  className,
+  label
+}) => {
+  const cn = classNames(
+    className,
+    styles.pagination
+  );
+
+  const pages = React.Children.map(children, (child) => {
+    const cn = classNames(
+      child.props.className,
+      child.props.active ? styles.active : '',
+      styles.li
+    );
+
+    return (
+      <li className={cn}>
+        {child}
+      </li>
+    );
+  });
+
+  return (
+    <nav aria-label={label} className={cn}>
+      <ul className={styles.ul}>
+        {pages}
+      </ul>
+    </nav>
+  );
+};
+
+Pagination.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  label: React.PropTypes.string
+};
+
+module.exports = Pagination;
diff --git a/ui/src/components/pagination/readme.md b/ui/src/components/pagination/readme.md
new file mode 100644
index 00000000..9969f97d
--- /dev/null
+++ b/ui/src/components/pagination/readme.md
@@ -0,0 +1,53 @@
+# `<P >`
+
+## demo
+
+```embed
+const  React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Pagination = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Pagination>
+          <a>
+            <span>&laquo;</span>
+            <span>Previous</span>
+          </a>
+          <a>1</a>
+          <a active>2</a>
+          <a>3</a>
+        </Pagination>
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Radio = require('ui/radio');
+
+module.exports = () => {
+  return (
+    <Pagination>
+      <a>
+        <span>&laquo;</span>
+        <span>Previous</span>
+      </a>
+      <a>1</a>
+      <a active>2</a>
+      <a>3</a>
+    </Pagination>
+  );
+}
+```
diff --git a/ui/src/components/pagination/style.css b/ui/src/components/pagination/style.css
new file mode 100644
index 00000000..30f94715
--- /dev/null
+++ b/ui/src/components/pagination/style.css
@@ -0,0 +1,55 @@
+~boxes: "../../shared/constants.js";
+~colors: "../../shared/constants.js";
+
+:root {
+   --border-checked: ~boxes.border.checked;
+   --border-unchecked: ~boxes.border.unchecked;
+   --border-radius: remCalc(~boxes.borderRadius);
+   --bottom-shaddow: ~boxes.bottomShaddow;
+}
+
+.pagination {
+  display: inline-block;
+
+  & .ul {
+    display: inline;
+    list-style: none;
+
+    & .li {
+      cursor: pointer;
+
+      height: 50px;
+      min-width: 50px;
+      padding-left: 15px;
+      padding-right: 15px;
+      margin-right: 10px;
+
+      border: var(--border-unchecked);
+      box-shadow: var(--bottom-shaddow);
+      border-radius: var(--border-radius);
+
+      position: relative;
+      float: left;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:last-child {
+        margin-right: inherit;
+      }
+
+      &:not(.active):hover {
+        border: var(--border-checked);
+      }
+
+      & a:hover {
+        text-decoration: none
+      }
+
+      &.active {
+        cursor: default;
+      }
+    }
+  }
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index 0a8d004a..3b828e9a 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -20,7 +20,8 @@ module.exports = {
     Checkbox: require('./components/checkbox/readme.md'),
     Tab: require('./components/tab/readme.md'),
     Tabs: require('./components/tabs/readme.md'),
-    Widget: require('./components/widget/readme.md')
+    Widget: require('./components/widget/readme.md'),
+    Pagination: require('./components/pagination/readme.md')
   },
   FAQ: require('./faq.md')
 };
diff --git a/ui/src/index.js b/ui/src/index.js
index d363abea..9e265238 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -14,5 +14,6 @@ module.exports = {
   Radio: require('./components/radio'),
   RadioGroup: require('./components/radio-group'),
   Select: require('./components/select'),
-  Widget: require('./components/widget')
+  Widget: require('./components/widget'),
+  Pagination: require('./components/pagination')
 };
diff --git a/ui/test/index.js b/ui/test/index.js
index 5919baf8..4d99225b 100644
--- a/ui/test/index.js
+++ b/ui/test/index.js
@@ -107,3 +107,9 @@ test('renders <Select> without exploding', (t) => {
   const wrapper = shallow(<Select />);
   t.deepEqual(wrapper.length, 1);
 });
+
+test('renders <Pagination> without exploding', (t) => {
+  const Pagination = require('../src/components/pagination');
+  const wrapper = shallow(<Pagination />);
+  t.deepEqual(wrapper.length, 1);
+});