Merge pull request #346 from youda97/skeleton-radio

feat(radio): Add skeleton state

Author: zvonimirfras

src/radio/radio-group.component.ts

@@ -163,6 +163,22 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 		this.markRadiosForCheck();
 	}
 
+	/**
+	 * Returns the skeleton value in the `RadioGroup` if there is one.
+	 */
+	@Input()
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
+	/**
+	 * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.
+	 */
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
 	/**
 	 * Binds 'radiogroup' value to the role attribute for `RadioGroup`.
 	 */
@@ -181,6 +197,10 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 	 * Reflects whether or not the input is disabled and cannot be selected.
 	 */
 	protected _disabled = false;
+	/**
+	 * Reflects wheather or not the dropdown is loading.
+	 */
+	protected _skeleton = false;
 	/**
 	 * The value of the selected option within the `RadioGroup`.
 	 */
@@ -301,6 +321,8 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 			this.radios = updatedRadios;
 			this.updateFocusableRadio();
 		});
+
+		this.updateChildren();
 	}
 
 	updateFocusableRadio() {
@@ -338,4 +360,10 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 	 * Method set in registerOnChange to propagate changes back to the form.
 	 */
 	propagateChange = (_: any) => {};
+
+	protected updateChildren() {
+		if (this.radios) {
+			this.radios.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
+	}
 }

src/radio/radio.component.spec.ts

@@ -65,7 +65,6 @@ describe("RadioComponent", () => {
 	let fixture: ComponentFixture<Radio>;
 	let de: DebugElement;
 	let el: HTMLElement;
-	let inputElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -78,7 +77,6 @@ describe("RadioComponent", () => {
 		component = fixture.componentInstance;
 		de = fixture.debugElement.query(By.css("label"));
 		el = de.nativeElement;
-		inputElement = fixture.debugElement.query(By.css("input")).nativeElement;
 	});
 
 	it("should work", () => {

src/radio/radio.component.ts

@@ -34,6 +34,7 @@ import { RadioGroup } from "./radio-group.component";
 	selector: "ibm-radio",
 	template: `
 		<input
+			*ngIf="!skeleton"
 			class="bx--radio-button"
 			type="radio"
 			#inputCheckbox
@@ -48,8 +49,12 @@ import { RadioGroup } from "./radio-group.component";
 			(change)="onChange($event)"
 			(click)="onClick($event)"
 			[tabindex]="(checked || needsToBeFocusable ? 0 : -1)">
+		<div *ngIf="skeleton" class="bx--radio-button bx--skeleton"></div>
 		<label
 			class="bx--radio-button__label"
+			[ngClass]="{
+				'bx--skeleton': skeleton
+			}"
 			[for]="id">
 			<span class="bx--radio-button__appearance"></span>
 			<ng-content></ng-content>
@@ -71,6 +76,10 @@ export class Radio extends Checkbox implements OnInit {
 	 */
 	static radioCount = 0;
 
+	/**
+	 * Set to `true` for a loading table.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Returns the value/state of the `Radio`.
 	 * @readonly

src/radio/radio.stories.ts

@@ -28,4 +28,11 @@ storiesOf("Radio", module).addDecorator(
 				{ num: "four" }
 			]
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<ibm-radio-group skeleton="true">
+			<ibm-radio></ibm-radio>
+		</ibm-radio-group>
+		`
 	}));