Merge branch 'master' of github.com:WeConnect/plasma

src/components/Table/Table.jsx

@@ -248,6 +248,7 @@ class Table extends React.Component {
     _.forEach(items, (itemValue, itemIndex) => {
       const spanCount = _.get(itemValue[spanKey], 'length');
       const columnComponents = [];
+      const isDisabledRow = itemValue.disabled;
 
       _.forEach(headerKeys, (headerKey) => {
         const isInnerKey = _.includes(spannedHeaderKeys, headerKey);
@@ -281,6 +282,7 @@ class Table extends React.Component {
           key={itemIndex}
           className={cx({
             [style.row]: true,
+            [style.rowDisabled]: isDisabledRow,
             [style.clickable]: clickable,
             [style.highlightable]: highlightable,
           })}
@@ -308,6 +310,7 @@ class Table extends React.Component {
               key={`${itemIndex}.${i}`}
               className={cx({
                 [style.row]: true,
+                [style.rowDisabled]: isDisabledRow,
                 [style.clickable]: clickable,
                 [style.highlightable]: highlightable,
               })}

src/components/Table/style.scss

@@ -66,6 +66,10 @@
   }
 }
 
+.rowDisabled {
+  background: $cGray700;
+}
+
 .clickable {
   cursor: pointer;
 }

stories/Table.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import Table from '../src/components/Table/Table';
+
+const headerData = [
+  { label: 'Header 1', key: 'header1' },
+  { label: 'Header 2', key: 'header2' },
+  { label: 'Header 3', key: 'header3' },
+  { label: 'Header 4', key: 'header4' },
+  { label: 'Header 5', key: 'header5' },
+];
+
+storiesOf('Table', module).add('default', () => {
+  const items = [
+    {
+      header1: 'Text text text',
+      header2: 'Text text text',
+      header3: 'Text text text',
+      header4: 'Text text text',
+      header5: 'Text text text',
+    },
+    {
+      header1: 'Text text text',
+      header2: 'Text text text',
+      header3: 'Text text text',
+      header4: 'Text text text',
+      header5: 'Text text text',
+    },
+  ];
+
+  return (
+    <Table
+      empty={false}
+      emptyText="The table is empty."
+      headerData={headerData}
+      items={items}
+      loading={false}
+    />
+  );
+});
+
+storiesOf('Table', module).add('with a disabled row', () => {
+  const items = [
+    {
+      header1: 'Text text text',
+      header2: 'Text text text',
+      header3: 'Text text text',
+      header4: 'Text text text',
+      header5: 'Text text text',
+      disabled: true,
+    },
+    {
+      header1: 'Text text text',
+      header2: 'Text text text',
+      header3: 'Text text text',
+      header4: 'Text text text',
+      header5: 'Text text text',
+    },
+  ];
+
+  return (
+    <Table
+      empty={false}
+      emptyText="The table is empty."
+      headerData={headerData}
+      items={items}
+      loading={false}
+    />
+  );
+});

stories/index.js

@@ -5,3 +5,4 @@ import Button from './Button';
 import FormField from './FormField';
 import Label from './Label';
 import TextInput from './TextInput';
+import Table from './Table';