Textual Summary fixes and improvements

src/textual_summary/generic_table_row.jsx

@@ -11,7 +11,7 @@ const renderMultivalue = function renderMultivalue(values, onClick) {
             <tr onClick={e => onClick(item, e)} key={i} className={item.link ? '' : 'no-hover'} title={item.title}>
               <td style={{ border: 0, margin: 0, padding: 0 }}>
                 <IconOrImage icon={item.icon} image={item.image} title={item.title} />
-                {item.value}
+                {`${item.value}`}
               </td>
             </tr>
           ))
@@ -22,7 +22,7 @@ const renderMultivalue = function renderMultivalue(values, onClick) {
 };
 
 const renderValue = function renderValue(value, onClick) {
-  return Array.isArray(value) ? renderMultivalue(value, onClick) : <span> {value}</span>;
+  return Array.isArray(value) ? renderMultivalue(value, onClick) : <span> {`${value}`}</span>;
 };
 
 export default function GenericTableRow(props) {
@@ -48,7 +48,7 @@ GenericTableRow.propTypes = {
     image: PropTypes.string,
     icon: PropTypes.string,
     label: PropTypes.any,
-    value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number, PropTypes.bool]),
   }).isRequired,
   onClick: PropTypes.func.isRequired,
 };

src/textual_summary/index.jsx

@@ -8,13 +8,13 @@ import TextualRow from './textual_row';
  * Outer array elements are rows, inner array elements are groups.
  */
 export const TextualSummary = props => (
-  <React.Fragment>
+  <div className="row">
     {
       props.summary.map((bigGroup, i) => (
         <TextualRow onClick={props.onClick} key={i} groups={bigGroup} />
       ))
     }
-  </React.Fragment>
+  </div>
 );
 
 TextualSummary.propTypes = {

src/textual_summary/stories/GenericGroup.stories.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import GenericGroup from '../generic_group';
 import { genericGroupData } from '../data/generic_group';
 
 storiesOf('TextualSummary', module)
   .add('GenericGroup', () => {
     return (
-      <GenericGroup items={genericGroupData.items} title={genericGroupData.title} onClick={e => null} />
+      <GenericGroup items={genericGroupData.items} title={genericGroupData.title} onClick={action('onClick')} />
     );
   })
 ;

src/textual_summary/stories/MultilinkTable.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import MultilinkTable from '../multilink_table';
 import { multilinkTableData } from '../data/multilink_table';
 
@@ -9,7 +10,7 @@ storiesOf('TextualSummary', module)
       <MultilinkTable
         title={multilinkTableData.title}
         items={multilinkTableData.items}
-        onClick={e => null}
+        onClick={action('onClick')}
       />
     );
   })

src/textual_summary/stories/TableListView.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import TableListView from '../table_list_view';
 import { tableListViewData } from '../data/table_list_view';
 
@@ -12,7 +13,7 @@ storiesOf('TextualSummary', module)
         values={tableListViewData.values}
         colOrder={tableListViewData.colOrder}
         rowLabel='View the table'
-        onClick={(e) => null}
+        onClick={action('onClick')}
       />
     );
   })

src/textual_summary/table_list_view.jsx

@@ -9,7 +9,7 @@ const simpleRow = (row, i, colOrder) => (
 
 const clickableRow = (row, i, colOrder, rowLabel, onClick) => (
   <tr key={i} onClick={e => onClick(row, e)}>
-    {colOrder.map((col, j) => <td key={j} title={rowLabel}>{row[col]}</td>)}
+    {colOrder.map((col, j) => <td key={j} title={rowLabel}>{`${row[col]}`}</td>)}
   </tr>
 );
 

src/textual_summary/textual_group.jsx

@@ -53,11 +53,7 @@ const renderComponent = (props) => {
 };
 
 export default function TextualGroup(props) {
-  return (
-    <div className="col-md-11 col-lg-6">
-      {renderComponent(props)}
-    </div>
-  );
+  return renderComponent(props);
 }
 
 renderComponent.propTypes = {

src/textual_summary/textual_row.jsx

@@ -4,7 +4,7 @@ import TextualGroup from './textual_group';
 
 export default function TextualRow(props) {
   return (
-    <div className="row">
+    <div className="col-md-12 col-lg-6">
       {
         props.groups.map(group => (
           <TextualGroup onClick={props.onClick} key={group.title} group={group} />