Add pill options to c-tile

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>

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>

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.',

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"

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
 \*------------------------------------*/

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}"

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 => {

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;