feat(components): Add condensed styles to Table (#458)

* Add condensed styles

* Replace [PRIVATE] with  @Private attribute in Table

* Add tests

Author: marielakas

src/components/Table/Table.js

@@ -154,9 +154,10 @@ class Table extends Component {
     const {
       rowHeaders,
       headers,
-      onRowClick,
       noShadow,
-      borderCollapsed
+      borderCollapsed,
+      condensed,
+      onRowClick
     } = this.props;
     const { sortDirection, sortHover, sortedRow } = this.state;
 
@@ -177,6 +178,7 @@ class Table extends Component {
               borderCollapsed={borderCollapsed}
             >
               <TableHead
+                condensed={condensed}
                 sortDirection={sortDirection}
                 sortedRow={sortedRow}
                 onSortBy={this.onSortBy}
@@ -186,6 +188,7 @@ class Table extends Component {
                 rowHeaders={rowHeaders}
               />
               <TableBody
+                condensed={condensed}
                 rows={this.getSortedRows()}
                 rowHeaders={rowHeaders}
                 sortHover={sortHover}
@@ -223,6 +226,10 @@ Table.propTypes = {
    * Removes the default box-shadow from the table.
    */
   noShadow: PropTypes.bool,
+  /**
+   * Toggles condensed styles on the Table.
+   */
+  condensed: PropTypes.bool,
   /**
    * Custom onSortBy function for the onSort handler.
    * The signature is (index, nextDirection, currentRows) and it should return

src/components/Table/Table.spec.js

@@ -49,6 +49,11 @@ describe('Table', () => {
       );
       expect(actual).toMatchSnapshot();
     });
+
+    it('should render a condensed table', () => {
+      const actual = create(<Table headers={headers} rows={items} condensed />);
+      expect(actual).toMatchSnapshot();
+    });
   });
 
   describe('Accessibility tests', () => {

src/components/Table/Table.story.js

@@ -70,6 +70,7 @@ storiesOf(`${GROUPS.COMPONENTS}|Table`, module)
           headers={headers}
           rows={rows}
           rowHeaders={boolean('Mobile rows', false)}
+          condensed={boolean('Condensed', false)}
           noShadow={boolean('Without Shadow', false)}
           onRowClick={action('onRowClick')}
           borderCollapsed={boolean('Border collapsed', false)}