convert pagination

ui/src/components/pagination/index.js

@@ -1,36 +1,97 @@
-const classNames = require('classnames');
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
 const React = require('react');
-const styles = require('./style.css');
+const Styled = require('styled-components');
+
+const {
+  baseBox
+} = composers;
+
+const {
+  boxes
+} = constants;
+
+const {
+  rndId
+} = fns;
+
+const {
+  default: styled,
+} = Styled;
+
+const classNames = {
+  active: rndId()
+};
+
+const StyledUl = styled.ul`
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const StyledLi = styled.li`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  float: left;
+  height: 50px;
+  justify-content: center;
+  margin-right: 10px;
+  min-width: 50px;
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+
+  ${baseBox()}
+
+  &:last-child {
+    margin-right: inherit;
+  }
+
+  &:not( .${classNames.active} ):hover {
+    border: ${boxes.border.checked};
+  }
+
+  & a:hover {
+    text-decoration: none;
+  }
+
+  &.${classNames.active} {
+    cursor: default;
+  }
+`;
+
 
 const Pagination = ({
   children,
   className,
-  label
+  label,
+  style
 }) => {
-  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.pagination_item
-    );
+    const cn = `
+      ${child.props.className}
+      ${child.props.active ? classNames.active : ''}
+    `.trim();
 
     return (
-      <li className={cn}>
+      <StyledLi className={cn}>
         {child}
-      </li>
+      </StyledLi>
     );
   });
 
   return (
-    <nav aria-label={label} className={cn}>
-      <ul className={styles.paginatation_list}>
+    <nav
+      aria-label={label}
+      className={className}
+      style={style}
+    >
+      <StyledUl>
         {pages}
-      </ul>
+      </StyledUl>
     </nav>
   );
 };
@@ -38,7 +99,8 @@ const Pagination = ({
 Pagination.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
-  label: React.PropTypes.string
+  label: React.PropTypes.string,
+  style: React.PropTypes.object
 };
 
 module.exports = Pagination;

ui/src/index.js

@@ -18,6 +18,6 @@ module.exports = {
   // RadioGroup: require('./components/radio-group'),
   Select: require('./components/select'),
   Widget: require('./components/widget'),
-  // Pagination: require('./components/pagination'),
+  Pagination: require('./components/pagination'),
   // Modal: require('./components/modal')
 };

ui/stories/index.js

@@ -13,6 +13,7 @@ const {
   Row,
   Column,
   Avatar,
+  Pagination,
   RangeSlider,
   Select,
   Tabs,
@@ -144,6 +145,20 @@ storiesOf('Radio', module)
     <Radio disabled />
   ));
 
+
+storiesOf('Pagination', module)
+  .add('Default', () => (
+    <Pagination>
+      <a>
+        <span>&laquo;</span>
+        <span>Previous</span>
+      </a>
+      <a>1</a>
+      <a active>2</a>
+      <a>3</a>
+    </Pagination>
+  ));
+
 storiesOf('RangeSlider', module)
   .add('Default', () => (
     <RangeSlider />