feat(badge): add new badge component (#111)

akveo · Jan 12, 2018 · a9324b4 · a9324b4
1 parent b31d8b6
commit a9324b4
Show file tree

Hide file tree

Showing 28 changed files with 892 additions and 4 deletions.
diff --git a/docs/output.json b/docs/output.json
diff --git a/docs/structure.ts b/docs/structure.ts
@@ -312,6 +312,11 @@ export const STRUCTURE = [
             block: 'component',
             blockData: 'NbActionsComponent',
           },
+          {
+            type: 'block',
+            block: 'component',
+            blockData: 'NbActionComponent',
+          },
         ],
       },
       {
@@ -336,6 +341,17 @@ export const STRUCTURE = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'Badge',
+        children: [
+          {
+            type: 'block',
+            block: 'component',
+            blockData: 'NbBadgeComponent',
+          },
+        ],
+      },
     ],
   },
   {

diff --git a/e2e/actions.e2e-spec.ts b/e2e/actions.e2e-spec.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { browser, element, by } from 'protractor';
+import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
+import badgeTests from './badge.e2e-spec';
+
+describe('nb-action', () => {
+
+  beforeEach(() => {
+    browser.get('#/actions');
+  });
+
+  describe('badge', () => {
+    const badgeText = '29';
+    const badgesConf = {
+      selector: (i) => `nb-card:nth-child(4) nb-actions nb-action:nth-child(${i + 1}) nb-badge > span`,
+      badges: [
+        { position: NbBadgeComponent.BOTTOM_LEFT, status: NbBadgeComponent.STATUS_SUCCESS, text: badgeText },
+        { position: NbBadgeComponent.TOP_LEFT, status: NbBadgeComponent.STATUS_DANGER, text: badgeText },
+        { position: NbBadgeComponent.BOTTOM_RIGHT, status: NbBadgeComponent.STATUS_WARNING, text: badgeText },
+        { position: NbBadgeComponent.BOTTOM_LEFT, status: NbBadgeComponent.STATUS_SUCCESS, text: badgeText },
+        { position: NbBadgeComponent.TOP_RIGHT, status: NbBadgeComponent.STATUS_INFO, text: badgeText },
+        { position: NbBadgeComponent.TOP_RIGHT, status: NbBadgeComponent.STATUS_INFO, text: badgeText },
+        { position: NbBadgeComponent.TOP_RIGHT, status: NbBadgeComponent.STATUS_PRIMARY, text: badgeText },
+      ],
+    };
+    badgeTests(badgesConf);
+  });
+
+});
diff --git a/e2e/badge.e2e-spec.ts b/e2e/badge.e2e-spec.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { element, by } from 'protractor';
+
+export default function badgeTests (badgesConfig) {
+  const { selector, badges } = badgesConfig;
+
+  it('should display badge with correct text', () => {
+    for (let i = 0; i < badges.length; i++) {
+      const badgeEl = element(by.css(selector(i)));
+      expect(badgeEl.getText()).toEqual(badges[i].text);
+    }
+  });
+
+  it('should display badge with correct status', () => {
+    for (let i = 0; i < badges.length; i++) {
+      const badgeEl = element(by.css(selector(i)));
+      expect(badgeEl.getAttribute('class')).toContain(badges[i].status);
+    }
+  });
+
+  it('should display badge in correct position', () => {
+    for (let i = 0; i < badges.length; i++) {
+      const badgeEl = element(by.css(selector(i)));
+      expect(badgeEl.getAttribute('class')).toContain(badges[i].position);
+    }
+  });
+}
diff --git a/e2e/tabset.e2e-spec.ts b/e2e/tabset.e2e-spec.ts
@@ -6,6 +6,8 @@
 
 import { browser, element, by } from 'protractor';
 import { hasClass } from './e2e-helper';
+import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
+import badgeTests from './badge.e2e-spec';
 
 describe('nb-tabset', () => {
   beforeEach((done) => {
@@ -79,4 +81,19 @@ describe('nb-tabset', () => {
         expect(browser.getCurrentUrl()).toContain('/#/tabset/tab1');
       });
   });
+
+  describe('badge', () => {
+    const badgeText = '29';
+    const badgesConf = {
+      selector: (i) => `nb-tabset:nth-child(6) > ul > li:nth-child(${i + 1}) > nb-badge > span`,
+      badges: [
+        { text: badgeText, status: NbBadgeComponent.STATUS_PRIMARY, position: NbBadgeComponent.TOP_RIGHT },
+        { text: badgeText, status: NbBadgeComponent.STATUS_INFO, position: NbBadgeComponent.TOP_LEFT },
+        { text: badgeText, status: NbBadgeComponent.STATUS_SUCCESS, position: NbBadgeComponent.BOTTOM_RIGHT },
+        { text: badgeText, status: NbBadgeComponent.STATUS_DANGER, position: NbBadgeComponent.BOTTOM_LEFT },
+        { text: badgeText, status: NbBadgeComponent.STATUS_WARNING, position: NbBadgeComponent.BOTTOM_RIGHT },
+      ],
+    };
+    badgeTests(badgesConf);
+  })
 });
diff --git a/e2e/user.e2e-spec.ts b/e2e/user.e2e-spec.ts
@@ -5,6 +5,8 @@
  */
 
 import { browser, element, by } from 'protractor';
+import { NbBadgeComponent } from '../src/framework/theme/components/badge/badge.component';
+import badgeTests from './badge.e2e-spec';
 
 describe('nb-user', () => {
 
@@ -18,4 +20,20 @@ describe('nb-user', () => {
   //   });
   // });
 
+  describe('badge', () => {
+    const elementsOffset = 10;
+    const badgeText = '29';
+    const badgesConf = {
+      selector: (i) => `.test-row:nth-child(${elementsOffset + i + 1}) nb-badge > span`,
+      badges: [
+        { position: NbBadgeComponent.TOP_RIGHT, status: NbBadgeComponent.STATUS_PRIMARY, text: badgeText },
+        { position: NbBadgeComponent.TOP_LEFT, status: NbBadgeComponent.STATUS_INFO, text: badgeText },
+        { position: NbBadgeComponent.BOTTOM_RIGHT, status: NbBadgeComponent.STATUS_SUCCESS, text: badgeText },
+        { position: NbBadgeComponent.BOTTOM_LEFT, status: NbBadgeComponent.STATUS_WARNING, text: badgeText },
+        { position: NbBadgeComponent.TOP_LEFT, status: NbBadgeComponent.STATUS_DANGER, text: badgeText },
+      ],
+    };
+    badgeTests(badgesConf);
+  });
+
 });
diff --git a/src/app/actions-test/actions-test.component.ts b/src/app/actions-test/actions-test.component.ts
@@ -5,6 +5,7 @@
  */
 
 import { Component } from '@angular/core';
+import { NbBadgeComponent } from 'framework/theme/components/badge/badge.component';
 
 @Component({
   selector: 'nb-actions-test',
@@ -80,12 +81,59 @@ import { Component } from '@angular/core';
             </nb-actions>
           </nb-card-body>
         </nb-card>
+
+        <nb-card>
+          <nb-card-body>
+            <nb-actions size="large">
+              <nb-action
+                badgeText="29"
+                [badgeStatus]="badge.STATUS_SUCCESS"
+                [badgePosition]="badge.BOTTOM_LEFT">
+                <nb-user></nb-user>
+              </nb-action>
+              <nb-action
+                badgeText="29"
+                [badgeStatus]="badge.STATUS_DANGER"
+                [badgePosition]="badge.TOP_LEFT"
+                icon="ion-ios-flower-outline">
+              </nb-action>
+              <nb-action
+                badgeText="29"
+                [badgeStatus]="badge.STATUS_WARNING"
+                [badgePosition]="badge.BOTTOM_RIGHT"
+                icon="ion-ios-medical-outline">
+              </nb-action>
+              <nb-action
+                badgeText="29"
+                [badgeStatus]="badge.STATUS_SUCCESS"
+                [badgePosition]="badge.BOTTOM_LEFT"
+                icon="ion-ios-download-outline">
+              </nb-action>
+              <nb-action
+                badgeText="29"
+                [badgeStatus]="badge.STATUS_INFO"
+                [badgePosition]="badge.TOP_RIGHT"
+                icon="ion-ios-download-outline">
+              </nb-action>
+              <nb-action
+                badgeText="29"
+                [badgeStatus]="badge.STATUS_INFO"
+                [badgePosition]="badge.TOP_RIGHT"
+                icon="ion-ios-download-outline"
+                disabled>
+              </nb-action>
+              <nb-action badgeText="29">Badge</nb-action>
+            </nb-actions>
+          </nb-card-body>
+        </nb-card>
       </nb-layout-column>
     </nb-layout>
   `,
 })
 export class NbActionsTestComponent {
 
+  badge = NbBadgeComponent;
+
   actionOnClick(event: any) {
     console.info(event);
   }

diff --git a/src/app/tabset-test/tabset-test.component.ts b/src/app/tabset-test/tabset-test.component.ts
@@ -6,6 +6,7 @@
 
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { NbBadgeComponent } from 'framework/theme/components/badge/badge.component';
 
 @Component({
   selector: 'nb-tabset-test',
@@ -67,11 +68,73 @@ import { Router } from '@angular/router';
             <span>Content #3</span>
           </nb-tab>
         </nb-tabset>
+
+        <nb-tabset fullWidth>
+          <nb-tab tabTitle="Tab #1" badgeText="29">
+            <span>Content #1</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #2"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_INFO"
+            [badgePosition]="badge.TOP_LEFT">
+            <span>Content #2</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #3"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_SUCCESS"
+            [badgePosition]="badge.BOTTOM_RIGHT">
+            <span>Content #3</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #4"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_DANGER"
+            [badgePosition]="badge.BOTTOM_LEFT">
+            <span>Content #4</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #5"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_WARNING"
+            [badgePosition]="badge.BOTTOM_RIGHT">
+            <span>Content #5</span>
+          </nb-tab>
+        </nb-tabset>
+        <nb-tabset>
+          <nb-tab tabTitle="Tab #1" badgeText="29">
+            <span>Content #1</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #2"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_INFO"
+            [badgePosition]="badge.BOTTOM_RIGHT">
+            <span>Content #2</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #3"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_SUCCESS"
+            [badgePosition]="badge.TOP_LEFT">
+            <span>Content #3</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #4"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_DANGER"
+            [badgePosition]="badge.BOTTOM_LEFT">
+            <span>Content #4</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #5"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_WARNING"
+            [badgePosition]="badge.BOTTOM_RIGHT">
+            <span>Content #5</span>
+          </nb-tab>
+        </nb-tabset>
       </nb-layout-column>
     </nb-layout>
   `,
 })
 export class NbTabsetTestComponent {
+
+  badge = NbBadgeComponent;
+
   constructor(private router: Router) {
   }
 

diff --git a/src/app/user-test/user-test.component.ts b/src/app/user-test/user-test.component.ts
@@ -5,6 +5,7 @@
  */
 
 import { Component } from '@angular/core';
+import { NbBadgeComponent } from 'framework/theme/components/badge/badge.component';
 
 @Component({
   selector: 'nb-user-test',
@@ -59,12 +60,62 @@ import { Component } from '@angular/core';
           <nb-user inverse showInitials size="medium" name="Dmitry Nehaychik" title="Worker"
                     [menu]="contextMenu" (menuClick)="onMenuItemClick($event)"></nb-user>
         </div>
+
+        <div class="test-row">
+          <nb-user inverse size="large" name="Dmitry Nehaychik" badgeText="29"></nb-user>
+        </div>
+        <div class="test-row">
+          <nb-user inverse
+            name="Dmitry Nehaychik"
+            title="Worker"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_INFO"
+            [badgePosition]="badge.TOP_LEFT">
+          </nb-user>
+        </div>
+        <div class="test-row">
+          <nb-user inverse
+            size="small"
+            name="Dmitry Nehaychik"
+            title="Worker"
+            showTitle="false"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_SUCCESS"
+            [badgePosition]="badge.BOTTOM_RIGHT">
+          </nb-user>
+        </div>
+        <div class="test-row">
+          <nb-user inverse
+            onlyPicture
+            size="medium"
+            name="Dmitry Nehaychik"
+            title="Worker"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_WARNING"
+            [badgePosition]="badge.BOTTOM_LEFT">
+          </nb-user>
+        </div>
+        <div class="test-row">
+          <nb-user inverse
+            size="large"
+            picture="http://lorempixel.com/400/200/animals/"
+            name="Dmitry Nehaychik"
+            title="Worker"
+            [menu]="contextMenu"
+            (menuClick)="onMenuItemClick($event)"
+            badgeText="29"
+            [badgeStatus]="badge.STATUS_DANGER"
+            [badgePosition]="badge.TOP_LEFT">
+          </nb-user>
+        </div>
       </nb-layout-column>
     </nb-layout>
   `,
 })
 export class NbUserTestComponent {
 
+  badge = NbBadgeComponent;
+
   contextMenu = [
     { title: 'Profile', link: 'some/link', icon: 'nb-person' },
     { title: 'Billing', target: '_blank', url: 'http://akveo.com' },

diff --git a/src/framework/theme/components/actions/actions.component.scss b/src/framework/theme/components/actions/actions.component.scss
@@ -13,6 +13,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    position: relative;
 
     &:first-child {
       border-left: none!important;