feat(Radio): Adding ability to have icon only button radio groups (#493)

bullhorn · Jun 28, 2017 · 9c058ee · 9c058ee
1 parent d711a1d
commit 9c058ee
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 1 deletion.
diff --git a/demo/pages/elements/radio/RadioDemo.ts b/demo/pages/elements/radio/RadioDemo.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
 let BasicRadioTpl = require('./templates/BasicRadio.html');
 let VerticalRadioTpl = require('./templates/VerticalRadio.html');
 let ButtonRadioTpl = require('./templates/ButtonRadio.html');
+let IconRadioTpl = require('./templates/IconRadio.html');
 
 const template = `
 <div class="container">
@@ -21,6 +22,11 @@ const template = `
     <h5>Button Radio</h5>
     <div class="example radio-demo">${ButtonRadioTpl}</div>
     <code-snippet [code]="ButtonRadioTpl"></code-snippet>
+
+
+    <h5>Icon Radio</h5>
+    <div class="example radio-demo">${IconRadioTpl}</div>
+    <code-snippet [code]="IconRadioTpl"></code-snippet>
 </div>
 `;
 
@@ -32,6 +38,7 @@ export class RadioDemoComponent {
     BasicRadioTpl: string = BasicRadioTpl;
     VerticalRadioTpl: string = VerticalRadioTpl;
     ButtonRadioTpl: string = ButtonRadioTpl;
+    IconRadioTpl: string = IconRadioTpl;
 
     onChangeVertical(change) {
         console.log('Vertical Radio Change:', change); // tslint:disable-line
@@ -44,4 +51,8 @@ export class RadioDemoComponent {
     onChangeButton(change) {
         console.log('Button Radio Change:', change); // tslint:disable-line
     }
+
+    onChangeIcon(change) {
+        console.log('Button Icon Radio Change:', change); // tslint:disable-line
+    }
 }
diff --git a/demo/pages/elements/radio/templates/IconRadio.html b/demo/pages/elements/radio/templates/IconRadio.html
@@ -0,0 +1,5 @@
+<novo-radio-group>
+    <novo-radio button="true" theme="icon" icon="checkbox-filled" name="icon" value="one" (change)="onChangeIcon($event)"></novo-radio>
+    <novo-radio button="true" theme="icon" icon="checkbox-indeterminate" name="icon" value="two" (change)="onChangeIcon($event)"></novo-radio>
+    <novo-radio button="true" theme="icon" icon="checkbox-add" name="icon" value="three" (change)="onChangeIcon($event)"></novo-radio>
+</novo-radio-group>
diff --git a/src/elements/radio/Radio.scss b/src/elements/radio/Radio.scss
@@ -7,6 +7,9 @@ novo-radio-group {
             &.unchecked {
                 opacity: .5;
             }
+            &[theme="icon"] i {
+                margin-right: 0;
+            }
         }
         &:first-child {
             button {
@@ -20,6 +23,9 @@ novo-radio-group {
                 border-bottom-right-radius: 3px;
                 border-right-width: 1px !important;
                 border-right-style: solid !important;
+                &[theme="icon"] {
+                    border-right-width: 0px !important;
+                }   
             }
         }
     }

diff --git a/src/elements/radio/Radio.spec.ts b/src/elements/radio/Radio.spec.ts
@@ -2,6 +2,7 @@
 import { TestBed, async } from '@angular/core/testing';
 // App
 import { NovoRadioElement } from './Radio';
+import { NovoButtonModule } from '../button/Button.module';
 
 describe('Elements: NovoRadioElement', () => {
     let fixture;
@@ -11,6 +12,9 @@ describe('Elements: NovoRadioElement', () => {
         TestBed.configureTestingModule({
             declarations: [
                 NovoRadioElement
+            ],
+            imports: [
+                NovoButtonModule
             ]
         }).compileComponents();
         fixture = TestBed.createComponent(NovoRadioElement);

diff --git a/src/elements/radio/Radio.ts b/src/elements/radio/Radio.ts
@@ -23,7 +23,7 @@ export class NovoRadioGroup { }
     template: `
         <input [name]="name" type="radio" [checked]="checked" [attr.id]="name" #radio>
         <label [attr.for]="name" (click)="select($event, radio)">
-            <button *ngIf="button" [ngClass]="{'unchecked': !radio.checked, 'checked': radio.checked}" theme="secondary">{{ label }}</button>
+            <button *ngIf="button" [ngClass]="{'unchecked': !radio.checked, 'checked': radio.checked}" [theme]="theme" [icon]="icon">{{ label }}</button>
             <div *ngIf="!button">
                 <i [ngClass]="{'bhi-radio-empty': !radio.checked, 'bhi-radio-filled': radio.checked}"></i>
                 {{ label }}
@@ -42,6 +42,8 @@ export class NovoRadioElement implements ControlValueAccessor {
     @Input() vertical: boolean;
     @Input() label: string;
     @Input() button: boolean = false;
+    @Input() theme: string = 'secondary';
+    @Input() icon: string;
 
     @Output() change: EventEmitter<any> = new EventEmitter();