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:https://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:https://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;