From f4873bc742c5f73c3ffe4d7cff5221b486ff7fb6 Mon Sep 17 00:00:00 2001
From: Iris Ibekwe <iris.ibekwe@civicactions.com>
Date: Mon, 16 Oct 2017 17:21:19 -0400
Subject: [PATCH 1/2] New function for adding links to the highlight component

---
 src/components/Highlight.js | 45 ++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/Highlight.js b/src/components/Highlight.js
index 5cc5f595..c0e87549 100644
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -7,6 +7,10 @@ export default class Highlight extends BaseComponent {
   render() {
     let cols = this.props.data[0].cols || [];
 
+    const existy = (obj) => {
+      return obj != null;
+    };
+
     return (
       <Card {...this.state.cardVariables}>
         <div className="highlight">
@@ -14,13 +18,44 @@ export default class Highlight extends BaseComponent {
               return <div className={"highlight-col highlight-cols-" + cols.length} key={i}>
                 { col.rows.map( (row, j) => {
                   let output = [];
+                  // Create label & val keys by stripping spaces from their values and appending the map index.
+                  let labelKey = (row.label.replace(/\s/g,'-')).toLowerCase() + j;
+                  let valKey = (row.val.slice(0,8)).replace(/\s/g,'-').toLowerCase() + j;
+
                   if (row.isLink) {
-                    output.push(<span className="highlight-val">
-                               <a href={row.val}>{ row.label ? row.label : row.val}</a>
-                             </span>)
+                    let label = existy(row.label);
+                    let value = existy(row.val);
+                    let url = existy(row.url);
+
+                    switch (true) {
+                      case (label && value && url) :
+                        output.push(<span className="highlight-label" key={labelKey}>{ row.label }</span>);
+                        output.push(<span className="highlight-val" key={valKey}>
+                          <a href={ row.url }>{ row.val }</a>
+                        </span>);
+                        break;
+                      case (!label && value && url):
+                        output.push(<span className="highlight-val" key={valKey}>
+                          <a href={ row.url }>{ row.val }</a>
+                        </span>);
+                        break;
+                      case (label && !value && url):
+                        output.push(<span className="highlight-val" key={labelKey}>
+                          <a href={ row.url }>{ row.label }</a>
+                        </span>);
+                        break;
+                      case ((label || value) && !url):
+                        output.push(<span className="highlight-val" key={row.val ? valKey : labelKey}>
+                               <a href={row.val ? row.val : row.label}>{ row.label ? row.label : row.val}</a>
+                             </span>);
+                        break;
+                      default:
+                        console.log('invalid or empty row values.')
+                    }
+
                   } else {
-                    output.push(<span className="highlight-label">{ row.label }</span>)
-                    output.push(<span className="highlight-val">{ row.val }</span>)
+                    output.push(<span className="highlight-label" key={labelKey}>{ row.label }</span>);
+                    output.push(<span className="highlight-val" key={valKey}>{ row.val }</span>)
                   }
                   return (
                     <div className="highlight-row" key={j}>

From c9a21b9a8e3483aada27608cacd60fd96f515833 Mon Sep 17 00:00:00 2001
From: Iris Ibekwe <iris.ibekwe@civicactions.com>
Date: Mon, 16 Oct 2017 17:33:02 -0400
Subject: [PATCH 2/2] Add Highlight Links example to sample settings file.

---
 examples/settings.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/examples/settings.js b/examples/settings.js
index b63dccc0..812d8415 100644
--- a/examples/settings.js
+++ b/examples/settings.js
@@ -227,9 +227,32 @@ export var settings = {
           }
         }
       ]
+    },
+    {
+      id: 'highlight-row',
+      className: 'row',
+      children: [
+        {
+          type: 'Highlight',
+          key: 'highlight1',
+          data: [
+            {
+              cols: [
+                {rows:[
+                  {label: 'label 1', val: 'Value 1'},
+                  {label: 'Full Link', val: 'This is a full link', url:'http://google.com', isLink:true}
+                ]},
+                {rows:[
+                  {label: 'label 2', val: 'Value 2'}
+                ]}
+              ]
+            }
+          ]
+        }
+      ]
     }
   ]
-}
+};
 
 
 let climateVars = {