From 1d65e5d5a2c8d06f97d8f4de355fcc6737e296b5 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Mon, 13 Apr 2020 15:17:22 -0600
Subject: [PATCH] Add pill options to c-tile

---
 dev-app/app.html                              |  2 +-
 .../components/tile/properties/index.html     |  1 +
 .../components/tile/properties/index.ts       | 11 +++++++++
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/components/tile/c-tile/c-tile.css         | 15 ++++++++++++
 src/components/tile/c-tile/c-tile.html        |  9 +++++++
 src/components/tile/c-tile/c-tile.test.ts     | 24 +++++++++++++++++++
 src/components/tile/c-tile/c-tile.ts          |  4 ++++
 9 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/dev-app/app.html b/dev-app/app.html
index d7558d78..70ab3dfa 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.24"></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>
             </l-box>
         </l-sidebar>
diff --git a/dev-app/routes/components/tile/properties/index.html b/dev-app/routes/components/tile/properties/index.html
index 28e61d77..061f0226 100644
--- a/dev-app/routes/components/tile/properties/index.html
+++ b/dev-app/routes/components/tile/properties/index.html
@@ -32,6 +32,7 @@
                         <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" title="Disabled State" state="disabled"></c-tile>
                         <c-tile image-url="" title="No Image URL" image-container-height.bind="100" no-image-message="No Image"></c-tile>
                         <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" title="a test string" search-match="a test"></c-tile>
+                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" title="Pill Item" pill-text="Pill Text"></c-tile>
                     </l-grid>
                 </c-code-sample>
             </l-stack>
diff --git a/dev-app/routes/components/tile/properties/index.ts b/dev-app/routes/components/tile/properties/index.ts
index e11219c4..91f0d410 100644
--- a/dev-app/routes/components/tile/properties/index.ts
+++ b/dev-app/routes/components/tile/properties/index.ts
@@ -63,6 +63,17 @@ export class TileProperties {
             name: 'no-image-message',
             value: 'string',
         },
+        {
+            default: 'info',
+            description: 'Will set the color of the pill.',
+            name: 'pill-color',
+            value: 'string',
+        },
+        {
+            description: 'Will set the text of the pill.',
+            name: 'pill-text',
+            value: 'string',
+        },
         {
             default: 'true',
             description: 'Set if you do not need the checkbox in the tile.',
diff --git a/package-lock.json b/package-lock.json
index 71bf8b61..e02d722c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bindable-ui/bindable",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index eea377d2..8df64657 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"
diff --git a/src/components/tile/c-tile/c-tile.css b/src/components/tile/c-tile/c-tile.css
index ef633d15..7185bc03 100644
--- a/src/components/tile/c-tile/c-tile.css
+++ b/src/components/tile/c-tile/c-tile.css
@@ -15,6 +15,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
  *      - Checked
  *  CHECKBOX
  *  DRAG
+ *  PILL
  *  TIP
  *  STATE
  *      - Base
@@ -178,6 +179,20 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 
 
+/*------------------------------------*\
+    !PILL
+\*------------------------------------*/
+
+.pill{
+    position: absolute;
+    top: var(--s-2);
+    left: var(--s-3);
+}
+
+
+
+
+
 /*------------------------------------*\
     !TIP
 \*------------------------------------*/
diff --git a/src/components/tile/c-tile/c-tile.html b/src/components/tile/c-tile/c-tile.html
index 4cb25521..ca624238 100644
--- a/src/components/tile/c-tile/c-tile.html
+++ b/src/components/tile/c-tile/c-tile.html
@@ -50,6 +50,15 @@
                     class="${styles.status}  ${styles[status]}"
                     if.bind="status"
                 ></div>
+                <c-pill
+                    class="${styles.pill}"
+                    color="${pillColor}"
+                    if.bind="pillText"
+                >
+                    <span slot="pill-content">
+                        ${pillText}
+                    </span>
+                </c-pill>
                 <img
                     if.bind="imageUrl"
                     src="${imageUrl}"
diff --git a/src/components/tile/c-tile/c-tile.test.ts b/src/components/tile/c-tile/c-tile.test.ts
index 6f4e6ab7..24142851 100644
--- a/src/components/tile/c-tile/c-tile.test.ts
+++ b/src/components/tile/c-tile/c-tile.test.ts
@@ -227,6 +227,30 @@ describe('c-tile component', () => {
                 }
             });
 
+            it('css class: pill', async done => {
+                component = StageComponent.withResources().inView('<c-tile></c-tile>');
+
+                try {
+                    await bootStrapEnvironment(component);
+                    expect(component.viewModel.styles.pill).not.toBe(undefined);
+                    done();
+                } catch (e) {
+                    done.fail(e);
+                }
+            });
+
+            it('css class: tip', async done => {
+                component = StageComponent.withResources().inView('<c-tile></c-tile>');
+
+                try {
+                    await bootStrapEnvironment(component);
+                    expect(component.viewModel.styles.tip).not.toBe(undefined);
+                    done();
+                } catch (e) {
+                    done.fail(e);
+                }
+            });
+
             const existingStateClasses = ['processing', 'healthy', 'warning', 'error', 'info'];
             existingStateClasses.forEach(state => {
                 it(`css class: "${state}"`, async done => {
diff --git a/src/components/tile/c-tile/c-tile.ts b/src/components/tile/c-tile/c-tile.ts
index e16edff8..78399936 100644
--- a/src/components/tile/c-tile/c-tile.ts
+++ b/src/components/tile/c-tile/c-tile.ts
@@ -33,6 +33,10 @@ export class CTile {
     @bindable
     public noImageMessage = 'No Image';
     @bindable
+    public pillColor = 'info';
+    @bindable
+    public pillText;
+    @bindable
     public searchMatch = null;
     @bindable
     public showCheckbox = true;