From db04f5c27ae284a52f28d31d646de7933c45dce2 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Mon, 13 Apr 2020 17:17:44 -0600
Subject: [PATCH] add pill option to c-td-truncate

---
 dev-app/app.html                              |  2 +-
 .../table/views-and-view-models/index.html    |  3 ++-
 .../table/views-and-view-models/index.ts      |  2 +-
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 .../td-contents/c-td-pill/c-td-pill.css       | 25 +++++++++++++++++++
 .../td-contents/c-td-pill/c-td-pill.html      | 14 +++++++++--
 .../tables/td-contents/c-td-pill/c-td-pill.ts |  3 +++
 .../c-td-truncate/c-td-truncate.css           |  8 +++++-
 .../c-td-truncate/c-td-truncate.html          |  3 +++
 10 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/components/tables/td-contents/c-td-pill/c-td-pill.css

diff --git a/dev-app/app.html b/dev-app/app.html
index 70ab3dfa..e2a7c4e9 100644
--- a/dev-app/app.html
+++ b/dev-app/app.html
@@ -24,7 +24,7 @@
                         state="${link.isActive ? 'active' : ''}"
                     >
                     </c-nav-horizontal-item>
-                    <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.25"></c-nav-horizontal-item>
+                    <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.26"></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>
         </l-sidebar>
diff --git a/dev-app/routes/components/tables/table/views-and-view-models/index.html b/dev-app/routes/components/tables/table/views-and-view-models/index.html
index 12f7aa39..e1b767f3 100644
--- a/dev-app/routes/components/tables/table/views-and-view-models/index.html
+++ b/dev-app/routes/components/tables/table/views-and-view-models/index.html
@@ -95,7 +95,7 @@
             </l-stack>
         </div>
 
-        <divider></divider>
+        <c-divider></c-divider>
 
         <div>
             <l-stack spacing="var(--s-3)">
@@ -184,6 +184,7 @@
     },
     {
         name: 'Han Solo is super cool and all that',
+        namePill: 'Pill',
         ship: 'M. Falcon',
         gender: 'Male',
     },
diff --git a/dev-app/routes/components/tables/table/views-and-view-models/index.ts b/dev-app/routes/components/tables/table/views-and-view-models/index.ts
index edd2a5ac..28d5514c 100644
--- a/dev-app/routes/components/tables/table/views-and-view-models/index.ts
+++ b/dev-app/routes/components/tables/table/views-and-view-models/index.ts
@@ -349,6 +349,7 @@ export class TableViews {
             {
                 gender: 'Male',
                 name: 'Han Solo is super cool and all that',
+                namePill: 'Pill',
                 ship: 'M. Falcon',
             },
             {
@@ -612,7 +613,6 @@ export class TableViews {
         this.pillTableData = [
             {
                 description: 'more text here',
-                descriptionPill: 'Desc Pill',
                 name: 'stuff here',
                 namePill: 'Name Pill',
             },
diff --git a/package-lock.json b/package-lock.json
index e02d722c..6f0a4a22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bindable-ui/bindable",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8df64657..c942ee6f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"
diff --git a/src/components/tables/td-contents/c-td-pill/c-td-pill.css b/src/components/tables/td-contents/c-td-pill/c-td-pill.css
new file mode 100644
index 00000000..f99ef2d9
--- /dev/null
+++ b/src/components/tables/td-contents/c-td-pill/c-td-pill.css
@@ -0,0 +1,25 @@
+
+/*
+Copyright 2020, Verizon Media
+Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
+*/
+
+/*------------------------------------*\
+    CONTENTS
+\*------------------------------------*/
+
+/**
+ *  BASE
+ */
+
+
+
+
+
+/*------------------------------------*\
+    !BASE
+\*------------------------------------*/
+
+.text{
+    margin-left: var(--s-2);
+}
diff --git a/src/components/tables/td-contents/c-td-pill/c-td-pill.html b/src/components/tables/td-contents/c-td-pill/c-td-pill.html
index f8393ce7..9933df61 100644
--- a/src/components/tables/td-contents/c-td-pill/c-td-pill.html
+++ b/src/components/tables/td-contents/c-td-pill/c-td-pill.html
@@ -4,8 +4,18 @@
 -->
 
 <template>
-    ${value}
-    <c-pill>
+	<require from="./c-td-pill.css"></require>
+
+    <c-pill if.bind="row[col.colHeadName + 'Pill']">
         <span slot="pill-content">${row[col.colHeadName + 'Pill']}</span>
     </c-pill>
+    <span
+        if.bind="row[col.colHeadName + 'Pill']"
+        class="${styles.text}"
+    >
+        ${value}
+    </span>
+    <span if.bind="!row[col.colHeadName + 'Pill']">
+        ${value}
+    </span>
 </template>
diff --git a/src/components/tables/td-contents/c-td-pill/c-td-pill.ts b/src/components/tables/td-contents/c-td-pill/c-td-pill.ts
index f31934dc..bb046055 100644
--- a/src/components/tables/td-contents/c-td-pill/c-td-pill.ts
+++ b/src/components/tables/td-contents/c-td-pill/c-td-pill.ts
@@ -3,7 +3,10 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
+import * as styles from './c-td-pill.css.json';
+
 export class CTdPill {
+    public styles = styles;
     public value;
 
     public activate(model) {
diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css
index 8beaa925..50c1307e 100644
--- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css
+++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.css
@@ -28,7 +28,13 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 .container > svg{
     float: left;
     margin-right: var(--s-2);
-    margin-top: 1px;
+    margin-top: 2px;
+}
+
+.container > c-pill{
+    float: left;
+    margin-right: var(--s-2);
+    margin-top: -1px;
 }
 
 .truncate{
diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
index 1d44a9bd..c7ca093e 100644
--- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
+++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
@@ -37,6 +37,9 @@
             icon="${row[col.colHeadName + 'Icon']}"
             if.bind="row[col.colHeadName + 'Icon']"
         ></c-icon>
+        <c-pill if.bind="row[col.colHeadName + 'Pill']">
+            <span slot="pill-content">${row[col.colHeadName + 'Pill']}</span>
+        </c-pill>
         <div class="${styles.truncate}">
             <span title="${value}">
                 <span if.bind="!searchHighlight">${value}</span>