add icon to data-table cell

salesforce-ux · Oct 6, 2017 · 59c44b2 · 59c44b2
1 parent b7ce522
commit 59c44b2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/ui/components/data-tables/advanced/example.jsx b/ui/components/data-tables/advanced/example.jsx
@@ -34,7 +34,9 @@ const rows = [
     stage: 'Value Proposition',
     confidence: '30%',
     amount: '$25,000,000',
-    contact: 'jrogers@acme.com'
+    contact: 'jrogers@acme.com',
+    amountScore: 'positive',
+    amountScoreLabel: 'High'
   },
   {
     recordName: 'Acme - 200 Widgets',
@@ -52,7 +54,9 @@ const rows = [
     stage: 'Id. Decision Makers',
     confidence: '70%',
     amount: '$25,000',
-    contact: 'nathan@salesforce.com'
+    contact: 'nathan@salesforce.com',
+    amountScore: 'negative',
+    amountScoreLabel: 'Low'
   }
 ];
 
@@ -297,8 +301,8 @@ export let examples = [
 
 export let examples = [
   {
-    id: 'header-icon',
-    label: 'Column Header Icon',
+    id: 'header-and-cell-icon',
+    label: 'Header and Cell Icon',
     element: (
       <Table>
         <Thead
@@ -318,6 +322,9 @@ export let examples = [
               confidence={rows[i].confidence}
               amount={rows[i].amount}
               contact={rows[i].contact}
+              amountScore={rows[i].amountScore}
+              amountScoreLabel={rows[i].amountScoreLabel}
+              hasScores
             />
           ))}
         </tbody>

diff --git a/ui/components/data-tables/index.jsx b/ui/components/data-tables/index.jsx
@@ -13,6 +13,7 @@ import {
 } from '../input/base/example';
 import MediaObject from '../../utilities/media-objects/index.react';
 import { Ellie } from '../dynamic-icons/ellie/example';
+import { Score } from '../dynamic-icons/score/example';
 import SvgIcon from '../../shared/svg-icon';
 
 export const InlineEditTableContainer = props => (
@@ -257,10 +258,13 @@ export const ErrorsTh = props => (
  * @param {*} props
  * @prop {boolean} actionableMode - Specifies whether the grid is in actionable or navigation mode
  * @prop {boolean} hasFocus - Specifies whether a specific cell is in focus
+ * @prop {boolean} hasScore - Specifies whether a row has a score cell
  * @prop {boolean} rowSelected
  * @prop {integer} index - Row index in the Grid
  * @prop {string} accountName
  * @prop {string} amount
+ * @prop {string} amountScore
+ * @prop {string} amountScoreLabel
  * @prop {string} className - CSS classes for the tr element
  * @prop {string} closeDate
  * @prop {string} confidence
@@ -291,7 +295,19 @@ export const AdvancedDataTableTr = props => (
     <ReadOnlyTd cellText={props.closeDate} />
     <ReadOnlyTd cellText={props.stage} />
     <ReadOnlyTd cellText={props.confidence} />
-    <ReadOnlyTd cellText={props.amount} />
+    {props.hasScores && props.amountScore && props.amountScoreLabel ? (
+      <AdvancedDataTableTd>
+        <div className="slds-grid slds-grid_vertical-align-center">
+          <div className="slds-truncate">{props.amount}</div>
+          <div className="slds-icon_container slds-m-left_x-small slds-m-right_xx-small">
+            <Score data-slds-state={props.amountScore} />
+          </div>
+          <div className="slds-truncate">{props.amountScoreLabel}</div>
+        </div>
+      </AdvancedDataTableTd>
+    ) : (
+      <ReadOnlyTd cellText={props.amount} />
+    )}
     <ReadOnlyTd
       actionableMode={props.actionableMode}
       cellLink="javascript:void(0);"