feat(calendar): use nb-icon in navigation buttons (#1388)

akveo · May 27, 2019 · ab52c0c · ab52c0c
1 parent 3f6ca4f
commit ab52c0c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/framework/theme/components/calendar-kit/calendar-kit.module.ts b/src/framework/theme/components/calendar-kit/calendar-kit.module.ts
@@ -9,6 +9,7 @@ import { DatePipe } from '@angular/common';
 
 import { NbSharedModule } from '../shared/shared.module';
 import { NbButtonModule } from '../button/button.module';
+import { NbIconModule } from '../icon/icon.module';
 
 import { NbCalendarMonthModelService, NbDateService  } from './services';
 
@@ -69,7 +70,7 @@ const COMPONENTS = [
  * @stacked-example(Full calendar, calendar-kit/calendar-kit-full-calendar.component)
  * */
 @NgModule({
-  imports: [NbSharedModule, NbButtonModule],
+  imports: [ NbSharedModule, NbButtonModule, NbIconModule ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS],
   providers: [...SERVICES],

diff --git a/...s/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss b/...s/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss
@@ -8,9 +8,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+}
 
-  i {
-    font-size: 1.5rem;
-    cursor: pointer;
-  }
+nb-calendar-navigation {
+  margin: 0 0.5rem;
 }
diff --git a/...alendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.spec.ts b/...alendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.spec.ts
@@ -5,22 +5,22 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NbIconModule } from '@nebular/theme';
 
 import { NbCalendarNavigationComponent } from './calendar-navigation.component';
 import { NbCalendarPageableNavigationComponent } from './calendar-pageable-navigation.component';
 import { NbDateService, NbNativeDateService } from '../../services';
 import { NbThemeModule } from '../../../../theme.module';
 import { DatePipe } from '@angular/common';
 
-
 describe('Component: NbCalendarPageableNavigation', () => {
   let fixture: ComponentFixture<NbCalendarPageableNavigationComponent<Date>>;
   let component: NbCalendarPageableNavigationComponent<Date>;
   let componentEl: HTMLElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NbThemeModule.forRoot()],
+      imports: [NbThemeModule.forRoot(), NbIconModule],
       declarations: [NbCalendarNavigationComponent, NbCalendarPageableNavigationComponent],
       providers: [{ provide: NbDateService, useClass: NbNativeDateService }, DatePipe],
     });
@@ -33,28 +33,28 @@ describe('Component: NbCalendarPageableNavigation', () => {
   it('should render date', () => {
     component.date = new Date(2018, 6, 23);
     fixture.detectChanges();
-    expect(componentEl.querySelector('button').textContent).toContain('Jul 2018');
+    expect(componentEl.querySelector('nb-calendar-navigation button').textContent).toContain('Jul 2018');
   });
 
-  it('should render empty button with when null date', () => {
+  it('should render empty button when null date', () => {
     fixture.detectChanges();
-    expect(componentEl.querySelector('button').textContent).toContain('');
+    expect(componentEl.querySelector('nb-calendar-navigation button').textContent).toContain('');
   });
 
   it('should fire click when interior button clicked', () => {
     component.changeMode.subscribe(e => expect(e).toBeUndefined());
-    componentEl.querySelector('button').dispatchEvent(new Event('click'));
+    componentEl.querySelector('nb-calendar-navigation button').dispatchEvent(new Event('click'));
   });
 
   it('should fire next when next button clicked', () => {
     fixture.detectChanges();
     component.next.subscribe(e => expect(e).toBeUndefined());
-    componentEl.querySelector('.nb-arrow-left').dispatchEvent(new Event('click'));
+    componentEl.querySelector('button:first-child').dispatchEvent(new Event('click'));
   });
 
   it('should fire prev when prev button clicked', () => {
     fixture.detectChanges();
     component.prev.subscribe(e => expect(e).toBeUndefined());
-    componentEl.querySelector('.nb-arrow-right').dispatchEvent(new Event('click'));
+    componentEl.querySelector('button:last-child').dispatchEvent(new Event('click'));
   });
 });
diff --git a/...nts/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts b/...nts/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.ts
@@ -13,9 +13,13 @@ import { NbLayoutDirectionService } from '../../../../services/direction.service
   selector: 'nb-calendar-pageable-navigation',
   styleUrls: ['./calendar-pageable-navigation.component.scss'],
   template: `
-    <i [ngClass]="{'nb-arrow-left': isLtr, 'nb-arrow-right': isRtl }" (click)="prev.emit()"></i>
+    <button nbButton (click)="prev.emit()" ghost>
+      <nb-icon [icon]="isLtr ? 'chevron-left-outline' : 'chevron-right-outline'" pack="nebular-essentials"></nb-icon>
+    </button>
     <nb-calendar-navigation [date]="date" (changeMode)="changeMode.emit()"></nb-calendar-navigation>
-    <i [ngClass]="{'nb-arrow-right': isLtr, 'nb-arrow-left': isRtl }" (click)="next.emit()"></i>
+    <button nbButton (click)="next.emit()" ghost>
+      <nb-icon [icon]="isLtr ? 'chevron-right-outline' : 'chevron-left-outline'" pack="nebular-essentials"></nb-icon>
+    </button>
   `,
 })
 export class NbCalendarPageableNavigationComponent<D> {