feat(table): add number cell component

This adds a NumberCell component that is right aligned.

closes DCOS-39830

Author: GeorgiSTodorov

packages/index.ts

@@ -1,7 +1,5 @@
 import { injectGlobalCss } from "./shared/styles/global";
-
-export { Badge } from "./badge";
-export { BadgeButton } from "./badge";
-export { Column, Table, Cell, TextCell, HeaderCell } from "./table";
+export { Badge, BadgeButton } from "./badge";
+export { Column, Table, Cell, TextCell, HeaderCell, NumberCell } from "./table";
 
 injectGlobalCss();

packages/table/components/NumberCell.tsx

@@ -0,0 +1,9 @@
+import { default as Cell } from "./Cell";
+import styled from "react-emotion";
+
+export default styled(Cell)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+`;

packages/table/index.ts

@@ -3,3 +3,4 @@ export { default as Column } from "./components/Column";
 export { default as Cell } from "./components/Cell";
 export { default as HeaderCell } from "./components/HeaderCell";
 export { default as TextCell } from "./components/TextCell";
+export { default as NumberCell } from "./components/NumberCell";

packages/table/stories/Table.stories.tsx

@@ -1,7 +1,14 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { withReadme } from "storybook-readme";
-import { Table, Column, Cell, HeaderCell, TextCell } from "../index";
+import {
+  Table,
+  Column,
+  Cell,
+  HeaderCell,
+  TextCell,
+  NumberCell
+} from "../index";
 
 const readme = require("../README.md");
 
@@ -50,9 +57,9 @@ const stateCellRenderer = ({ state }: { state?: string }) => (
   </Cell>
 );
 const zipcodeCellRenderer = ({ zipcode }: { zipcode?: string }) => (
-  <Cell>
+  <NumberCell>
     <span>{zipcode}</span>
-  </Cell>
+  </NumberCell>
 );
 const veryLongRenderer = () => (
   <TextCell>