feat(ui-toolkit): implement pagination components

packages/ui-toolkit/src/index.js

@@ -54,6 +54,11 @@ export {
   Description as MessageDescription
 } from './message';
 
+export {
+  TableFoot as PaginationTableFoot,
+  Item as PaginationItem
+} from './pagination';
+
 export {
   default as SectionList,
   Item as SectionListItem,

packages/ui-toolkit/src/pagination/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+import remcalc from 'remcalc';
+import is from 'styled-is';
+
+import BaseAnchor from '../anchor';
+import { Tfoot, Tr, Th } from '../table';
+import { Arrow as BaseArrow } from '../icons';
+
+const Arrow = BaseArrow.extend`
+  margin: ${remcalc(2)} ${remcalc(6)};
+`;
+
+const Anchor = BaseAnchor.extend`
+  margin-left: ${remcalc(6)};
+  margin-right: ${remcalc(6)};
+  text-decoration: underline;
+
+  ${is('disabled')`
+    text-decoration: none;
+  `};
+
+  ${is('active')`
+    text-decoration: none;
+  `};
+
+  ${is('active')`
+    padding: ${remcalc(6)};
+    background-color: ${props => props.theme.primary};
+    border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
+    border-radius: ${remcalc(4)};
+    color: ${props => props.theme.white};
+  `};
+`;
+
+export const TableFoot = ({ children, colSpan, ...rest }) => (
+  <Tfoot>
+    <Tr {...rest}>
+      <Th colSpan={colSpan} hasBorder="bottom" middle center>
+        {children}
+      </Th>
+    </Tr>
+  </Tfoot>
+);
+
+export const Item = withTheme(
+  ({
+    children,
+    next,
+    prev,
+    disabled,
+    to,
+    component,
+    active,
+    theme,
+    ...rest
+  }) => (
+    <Anchor
+      disabled={disabled}
+      active={active}
+      component={active ? null : component}
+      to={active ? null : to}
+      {...rest}
+    >
+      {prev ? (
+        <Arrow direction="right" fill={disabled ? theme.grey : theme.primary} />
+      ) : null}
+      {children}
+      {next ? (
+        <Arrow direction="left" fill={disabled ? theme.grey : theme.primary} />
+      ) : null}
+    </Anchor>
+  )
+);

packages/ui-toolkit/src/table/index.js

@@ -349,13 +349,3 @@ export const Td = Baseline(({ children, ...rest }) => (
     )}
   </Propagate>
 ));
-
-export const Pagination = ({ children, colSpan, ...rest }) => (
-  <Tfoot>
-    <Tr {...rest}>
-      <Th colSpan={colSpan} hasBorder="bottom" middle center>
-        {children}
-      </Th>
-    </Tr>
-  </Tfoot>
-);