feat(checkbox): expand checkbox variables for easier customization

Closes #143 BREAKING CHANGE: Checkbox check mark color variable (radio-fg) is expanded. There are three variables instead to set a color depending a the checkbox state: - checkbox-checkmark - base color - checkbox-checked-checkmark - color when checkbox checked - checkbox-disabled-checkmark - color when checkbox is disabled
akveo · Feb 12, 2018 · 6b93924 · 6b93924
1 parent 18ccdf6
commit 6b93924
Show file tree

Hide file tree

Showing 10 changed files with 732 additions and 83 deletions.
diff --git a/docs/output.json b/docs/output.json
diff --git a/e2e/checkbox.e2e-spec.ts b/e2e/checkbox.e2e-spec.ts
@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { browser, by, element } from 'protractor';
+
+describe('nb-search', () => {
+  const transparent = 'rgba(0, 0, 0, 0)';
+
+  const border_color = 'rgb(218, 223, 230)';
+  const checked_color = 'rgb(64, 220, 126)';
+  const hover_color = 'rgb(107, 228, 155)';
+
+  const warning_color = 'rgb(255, 161, 0)';
+  const warning_hover = 'rgb(255, 180, 51)';
+
+  const danger_color = 'rgb(255, 76, 106)';
+  const danger_hover = 'rgb(255, 127, 148)';
+
+
+  beforeEach((done) => {
+    browser.get('#/checkbox').then(() => done());
+  });
+
+  it('should apply check on click', () => {
+    const input = element(by.css('#first input'));
+    const indicator = element(by.css('#first .customised-control-indicator'));
+
+    expect(input.getAttribute('checked')).toBeFalsy();
+    indicator.click();
+    expect(input.getAttribute('checked')).toBeTruthy();
+    indicator.click();
+    expect(input.getAttribute('checked')).toBeFalsy();
+  });
+
+  it('should ignore click if disable', () => {
+    const input = element(by.css('#disabled input'));
+    const indicator = element(by.css('#disabled .customised-control-indicator'));
+
+    expect(input.getAttribute('disabled')).toBeTruthy();
+    expect(input.getAttribute('checked')).toBeFalsy();
+    indicator.click();
+    expect(input.getAttribute('checked')).toBeFalsy();
+    expect(input.getAttribute('disabled')).toBeTruthy();
+  });
+
+  it('should apply style if checked/unchecked', () => {
+    const input = element(by.css('#first input'));
+    const indicator = element(by.css('#first .customised-control-indicator'));
+    const otherElement = element(by.css('#danger'));
+
+    // unchecked
+    expect(input.getAttribute('checked')).toBeFalsy();
+    expect(indicator.getCssValue('background-color')).toEqual(transparent);
+    expect(indicator.getCssValue('border')).toEqual('2px solid ' + border_color);
+
+    // check ::before styles
+    browser.executeScript(
+      'return ' +
+      'window.getComputedStyle(document.querySelector(' +
+      '"#first .customised-control-indicator"' +
+      '), ":before").content')
+      .then(data => expect(data).toBe('""'));
+
+    browser.executeScript(
+      'return ' +
+      'window.getComputedStyle(document.querySelector(' +
+      '"#first .customised-control-indicator"' +
+      '), ":before").borderTopColor')
+      .then(data => expect(data).toBe(transparent));
+
+    indicator.click();
+    browser.actions().mouseMove(otherElement).perform();
+
+    // checked
+    expect(input.getAttribute('checked')).toBeTruthy();
+    expect(indicator.getCssValue('background-color')).toEqual(transparent);
+    expect(indicator.getCssValue('border')).toEqual('2px solid ' + checked_color);
+
+    // check ::before styles
+    browser.executeScript(
+      'return ' +
+      'window.getComputedStyle(document.querySelector(' +
+      '"#first .customised-control-indicator"' +
+      '), ":before").content')
+      .then(data => expect(data).toBe('""'));
+
+    browser.executeScript(
+      'return ' +
+      'window.getComputedStyle(document.querySelector(' +
+      '"#first .customised-control-indicator"' +
+      '), ":before").borderTopColor')
+      .then(data => {
+        expect(data).toBe('rgb(42, 42, 42)');
+      });
+  });
+
+  it('should apply style if hover', () => {
+    const indicator = element(by.css('#first .customised-control-indicator'));
+
+    // without hover
+    expect(indicator.getCssValue('border')).toEqual('2px solid ' + border_color);
+
+    browser.actions().mouseMove(indicator).perform();
+
+    // hover
+    expect(indicator.getCssValue('border')).toEqual('2px solid ' + hover_color);
+  });
+
+  it('should apply style if status success', () => {
+    const success = element(by.css('#success .customised-control-indicator'));
+    const other = element(by.css('#first .customised-control-indicator'));
+
+    // without hover
+    expect(success.getCssValue('border-color')).toEqual(border_color);
+
+    success.click();
+
+    // hover
+    expect(success.getCssValue('border-color')).toEqual(hover_color);
+
+    // checked
+    browser.actions().mouseMove(other).perform();
+    expect(success.getCssValue('border-color')).toEqual(checked_color);
+
+  });
+
+  it('should apply style if status warning', () => {
+    const warning = element(by.css('#warning .customised-control-indicator'));
+    const other = element(by.css('#first .customised-control-indicator'));
+
+    // without hover
+    expect(warning.getCssValue('border-color')).toEqual(border_color);
+
+    warning.click();
+
+    // hover
+    expect(warning.getCssValue('border-color')).toEqual(warning_hover);
+
+    // checked
+    browser.actions().mouseMove(other).perform();
+    expect(warning.getCssValue('border-color')).toEqual(warning_color);
+  });
+
+  it('should apply style if status danger', () => {
+    const danger = element(by.css('#danger .customised-control-indicator'));
+    const other = element(by.css('#first .customised-control-indicator'));
+
+    // without hover
+    expect(danger.getCssValue('border-color')).toEqual(border_color);
+
+    danger.click();
+
+    // hover
+    expect(danger.getCssValue('border-color')).toEqual(danger_hover);
+
+    // checked
+    browser.actions().mouseMove(other).perform();
+
+    expect(danger.getCssValue('border-color')).toEqual(danger_color);
+
+  });
+});
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { RouterModule } from '@angular/router';
 import {
   NbActionsModule,
   NbCardModule,
+  NbCheckboxModule,
   NbLayoutModule,
   NbMenuModule,
   NbRouteTabsetModule,
@@ -63,13 +64,13 @@ import { NbUserTestComponent } from './user-test/user-test.component';
 import { NbDynamicToAddComponent, NbThemeDynamicTestComponent } from './layout-test/theme-dynamic-test.component';
 import { NbActionsTestComponent } from './actions-test/actions-test.component';
 import { NbBootstrapTestComponent } from './bootstrap-test/bootstrap-test.component';
-
-import { routes } from './app.routes';
-
+import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
 import { NbSearchTestComponent } from './search-test/search-test.component';
 import { NbSearchTestCustomizedComponent } from './search-test/search-test-customized.component';
 import { NbFormsTestComponent } from './forms-test/forms-test.component';
 
+import { routes } from './app.routes';
+
 import { NbCardTestComponent } from './card-test/card-test.component';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AuthGuard } from './auth-guard.service';
@@ -108,6 +109,7 @@ const NB_TEST_COMPONENTS = [
   NbThemeBreakpointTestComponent,
   NbActionsTestComponent,
   NbFormsTestComponent,
+  NbCheckboxTestComponent,
 ];
 
 @NgModule({
@@ -126,6 +128,7 @@ const NB_TEST_COMPONENTS = [
     NbUserModule,
     NbSearchModule,
     NbActionsModule,
+    NbCheckboxModule,
     NbAuthModule.forRoot({
       forms: {
         login: {

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -50,6 +50,7 @@ import {
   NbResetPasswordComponent,
 } from '@nebular/auth';
 import { AuthGuard } from './auth-guard.service';
+import { NbCheckboxTestComponent } from './checkbox-test/checkbox-test.component';
 
 export const routes: Routes = [
   {
@@ -231,6 +232,10 @@ export const routes: Routes = [
     path: 'search-2',
     component: NbSearchTestCustomizedComponent,
   },
+  {
+    path: 'checkbox',
+    component: NbCheckboxTestComponent,
+  },
   {
     path: 'bootstrap',
     component: NbBootstrapTestComponent,

diff --git a/src/app/checkbox-test/checkbox-test.component.ts b/src/app/checkbox-test/checkbox-test.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-app-checkbox-test',
+  template: `
+    <nb-layout>
+      <nb-layout-column>
+        <div>
+          <nb-checkbox id="first"></nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox id="second" [value]="true">Checked</nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox id="disabled" [disabled]="true">Disabled</nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox [value]="true" [disabled]="true">Disabled, checked</nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox id="success" status="success">Success</nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox id="warning" status="warning">Warning</nb-checkbox>
+        </div>
+        <div>
+          <nb-checkbox id="danger" status="danger">Danger</nb-checkbox>
+        </div>
+      </nb-layout-column>
+    </nb-layout>
+  `,
+})
+export class NbCheckboxTestComponent {
+}