Skip to content

Commit e4b8b24

Browse files
youda97youda97
committed
Merge
2 parents 1e3419b + 7f22a48 commit e4b8b24

File tree

12 files changed

+268
-33
lines changed

12 files changed

+268
-33
lines changed

‎src/checkbox/checkbox.component.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ export enum CheckboxState {
3333
export class CheckboxChange {
3434
/**
3535
* Contains the `CheckboxComponent` that has been changed.
36-
* @type {CheckboxComponent}
36+
* @type {Checkbox}
3737
* @memberof CheckboxChange
3838
*/
39-
source: CheckboxComponent;
39+
source: Checkbox;
4040
/**
4141
* The state of the `CheckboxComponent` encompassed in the `CheckboxChange` class.
4242
* @type {boolean}
@@ -77,13 +77,13 @@ export class CheckboxChange {
7777
providers: [
7878
{
7979
provide: NG_VALUE_ACCESSOR,
80-
useExisting: CheckboxComponent,
80+
useExisting: Checkbox,
8181
multi: true
8282
}
8383
],
8484
changeDetection: ChangeDetectionStrategy.OnPush
8585
})
86-
export class CheckboxComponent implements ControlValueAccessor, AfterViewInit {
86+
export class Checkbox implements ControlValueAccessor, AfterViewInit {
8787
/**
8888
* Variable used for creating unique ids for checkbox components.
8989
* @type {number}
@@ -130,7 +130,7 @@ export class CheckboxComponent implements ControlValueAccessor, AfterViewInit {
130130
* @type {string}
131131
* @memberof CheckboxComponent
132132
*/
133-
@Input() id = `checkbox-${CheckboxComponent.checkboxCount}`;
133+
@Input() id = `checkbox-${Checkbox.checkboxCount}`;
134134
/**
135135
* Reflects the required attribute of the `input` element.
136136
* @type {boolean}
@@ -249,7 +249,7 @@ export class CheckboxComponent implements ControlValueAccessor, AfterViewInit {
249249
* @memberof CheckboxComponent
250250
*/
251251
constructor(protected changeDetectorRef: ChangeDetectorRef) {
252-
CheckboxComponent.checkboxCount++;
252+
Checkbox.checkboxCount++;
253253
}
254254

255255
/**

‎src/forms/forms.module.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import { CommonModule } from "@angular/common";
55

66
// imports
77
import { CheckboxModule } from "../checkbox/checkbox.module";
8-
import { SwitchModule } from "../switch/switch.module";
8+
import { ToggleModule } from "../toggle/toggle.module";
99
import { RadioModule } from "../radio/radio.module";
1010
import { InputModule } from "../input/input.module";
1111
import { ButtonModule } from "../button/button.module";
1212

1313
// exports
1414
export { CheckboxModule } from "../checkbox/checkbox.module";
15-
export { SwitchModule } from "../switch/switch.module";
15+
export { ToggleModule } from "../toggle/toggle.module";
1616
export { RadioModule } from "../radio/radio.module";
1717
export { InputModule } from "../input/input.module";
1818
export { ButtonModule } from "../button/button.module";
1919

2020
@NgModule({
2121
exports: [
2222
CheckboxModule,
23-
SwitchModule,
23+
ToggleModule,
2424
RadioModule,
2525
InputModule,
2626
ButtonModule
@@ -29,7 +29,7 @@ export { ButtonModule } from "../button/button.module";
2929
CommonModule,
3030
FormsModule,
3131
CheckboxModule,
32-
SwitchModule,
32+
ToggleModule,
3333
RadioModule,
3434
InputModule,
3535
ButtonModule

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ export * from "./i18n/i18n.module";
2626
export * from "./pagination/pagination.module";
2727
export * from "./loading/loading.module";
2828
export * from "./notification/notification.module";
29+
export * from "./toggle/toggle.module";

‎src/radio/radio.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
AfterContentInit
1111
} from "@angular/core";
1212
import { NG_VALUE_ACCESSOR } from "@angular/forms";
13-
import { CheckboxComponent } from "../checkbox/checkbox.component";
13+
import { Checkbox } from "../checkbox/checkbox.component";
1414
import { RadioGroup } from "./radio-group.component";
1515

1616
/**
@@ -28,7 +28,7 @@ import { RadioGroup } from "./radio-group.component";
2828
*
2929
* @export
3030
* @class RadioComponent
31-
* @extends {CheckboxComponent}
31+
* @extends {Checkbox}
3232
* @implements {OnInit}
3333
*/
3434
@Component({
@@ -64,7 +64,7 @@ import { RadioGroup } from "./radio-group.component";
6464
}
6565
]
6666
})
67-
export class RadioComponent extends CheckboxComponent implements OnInit {
67+
export class RadioComponent extends Checkbox implements OnInit {
6868
/**
6969
* Used to dynamically create unique ids for the `RadioComponent`.
7070
* @static

‎src/switch/switch.component.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ import { StaticIconModule } from "../icon/static-icon.module";
77
import { SwitchComponent } from "./switch.component";
88
import { CheckboxComponent } from "../checkbox/checkbox.module";
99

10+
/**
11+
* Deprecated in favour of `Toggle` (to be removed in v3.0).
12+
*
13+
* @deprecated
14+
*/
1015
describe("SwitchComponent", () => {
1116
let component: SwitchComponent;
1217
let fixture: ComponentFixture<SwitchComponent>;

‎src/switch/switch.component.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
88

99

1010
/**
11+
* Deprecated in favour of `ToggleState` (to be removed in v3.0).
1112
* Defines the set of states for a switch component.
1213
* @export
1314
* @enum {number}
15+
* @deprecated
1416
*/
1517
export enum SwitchState {
1618
Init,
@@ -20,9 +22,11 @@ export enum SwitchState {
2022
}
2123

2224
/**
25+
* Deprecated in favour of `ToggleChange` (to be removed in v3.0).
2326
* Used to emit changes performed on switch components.
2427
* @export
2528
* @class SwitchChange
29+
* @deprecated
2630
*/
2731
export class SwitchChange {
2832
/**
@@ -40,13 +44,15 @@ export class SwitchChange {
4044
}
4145

4246
/**
47+
* Deprecated in favour of `Toggle` (to be removed in v3.0).
4348
* ```html
4449
* <ibm-switch [(ngModel)]="switchState">Switch</ibm-switch>
4550
* ```
4651
* @export
4752
* @class SwitchComponent
4853
* @extends {CheckboxComponent}
4954
* @implements {OnInit}
55+
* @deprecated
5056
*/
5157
@Component({
5258
selector: "ibm-switch",
@@ -114,5 +120,7 @@ export class SwitchComponent extends CheckboxComponent {
114120
constructor(protected changeDetectorRef: ChangeDetectorRef) {
115121
super(changeDetectorRef);
116122
SwitchComponent.switchCount++;
123+
124+
console.warn("`ibm-switch` has been deprecated in favour of `ibm-toggle`");
117125
}
118126
}

‎src/switch/switch.module.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import { SwitchComponent } from "../switch/switch.component";
99
// exports
1010
export { SwitchComponent } from "../switch/switch.component";
1111

12+
/**
13+
* Deprecated in favour of `ToggleModule` (to be removed in v3.0).
14+
*
15+
* @deprecated
16+
*/
1217
@NgModule({
1318
declarations: [
1419
SwitchComponent

‎src/switch/switch.stories.ts‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/toggle/toggle.component.spec.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
2+
import { ComponentFixture, TestBed, fakeAsync, tick, async } from "@angular/core/testing";
3+
import { By } from "@angular/platform-browser";
4+
import { DebugElement } from "@angular/core";
5+
import { StaticIconModule } from "../icon/static-icon.module";
6+
7+
import { Toggle } from "./toggle.component";
8+
import { Checkbox } from "../checkbox/checkbox.module";
9+
10+
describe("Toggle", () => {
11+
let component: Toggle;
12+
let fixture: ComponentFixture<Toggle>;
13+
let labelElement: HTMLElement;
14+
let buttonElement: HTMLElement;
15+
let svgElement: HTMLElement;
16+
17+
beforeEach(() => {
18+
TestBed.configureTestingModule({
19+
declarations: [Toggle],
20+
imports: [BrowserAnimationsModule, StaticIconModule],
21+
providers: []
22+
});
23+
24+
fixture = TestBed.createComponent(Toggle);
25+
component = fixture.componentInstance;
26+
fixture.detectChanges();
27+
labelElement = fixture.debugElement.query(By.css("label")).nativeElement;
28+
buttonElement = fixture.debugElement.query(By.css("input")).nativeElement;
29+
});
30+
31+
it("should work", () => {
32+
expect(component instanceof Toggle).toBe(true);
33+
});
34+
35+
it("should have input with class 'bx--toggle'", () => {
36+
expect(buttonElement.className.includes("bx--toggle")).toEqual(true);
37+
component.size = "sm";
38+
fixture.detectChanges();
39+
expect(buttonElement.className.includes("bx--toggle")).toEqual(true);
40+
});
41+
42+
it("should change state", () => {
43+
buttonElement.click();
44+
fixture.detectChanges();
45+
expect(component.checked).toBe(true, "setting to on");
46+
47+
buttonElement.click();
48+
fixture.detectChanges();
49+
expect(component.checked).toBe(false, "setting to off");
50+
});
51+
52+
it("should display small version of toggle when size equals sm", () => {
53+
expect(buttonElement.className.includes("bx--toggle--small")).toEqual(false);
54+
component.size = "sm";
55+
fixture.detectChanges();
56+
expect(buttonElement.className.includes("bx--toggle--small")).toEqual(true);
57+
});
58+
59+
it("should display SVG in small version of toggle", () => {
60+
component.size = "sm";
61+
fixture.detectChanges();
62+
labelElement = fixture.debugElement.query(By.css("label")).nativeElement;
63+
expect(fixture.debugElement.query(By.css("svg")).nativeElement).not.toBeNull();
64+
expect(labelElement.innerHTML).toContain("bx--toggle__check");
65+
});
66+
67+
});

‎src/toggle/toggle.component.ts‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { Checkbox } from "../checkbox/checkbox.component";
2+
import {
3+
ChangeDetectorRef,
4+
Component,
5+
Input
6+
} from "@angular/core";
7+
import { NG_VALUE_ACCESSOR } from "@angular/forms";
8+
9+
10+
/**
11+
* Defines the set of states for a toggle component.
12+
* @export
13+
* @enum {number}
14+
*/
15+
export enum ToggleState {
16+
Init,
17+
Indeterminate,
18+
Checked,
19+
Unchecked
20+
}
21+
22+
/**
23+
* Used to emit changes performed on toggle components.
24+
* @export
25+
* @class ToggleChange
26+
*/
27+
export class ToggleChange {
28+
/**
29+
* Contains the `Toggle` that has been changed.
30+
* @type {Toggle}
31+
* @memberof ToggleChange
32+
*/
33+
source: Toggle;
34+
/**
35+
* The state of the `Toggle` encompassed in the `ToggleChange` class.
36+
* @type {boolean}
37+
* @memberof ToggleChange
38+
*/
39+
checked: boolean;
40+
}
41+
42+
/**
43+
* ```html
44+
* <ibm-toggle [(ngModel)]="toggleState">Toggle</ibm-toggle>
45+
* ```
46+
* @export
47+
* @class Toggle
48+
* @extends {Checkbox}
49+
* @implements {OnInit}
50+
*/
51+
@Component({
52+
selector: "ibm-toggle",
53+
template: `
54+
<input
55+
class="bx--toggle"
56+
[ngClass]="{
57+
'bx--toggle--small': size === 'sm'
58+
}"
59+
[id]="id"
60+
type="checkbox"
61+
(click)="onClick($event)"
62+
[disabled]="disabled"
63+
[attr.aria-checked]="checked">
64+
<label *ngIf="size === 'md'" class="bx--toggle__label" [for]="id">
65+
<span class="bx--toggle__text--left">Off</span>
66+
<span class="bx--toggle__appearance"></span>
67+
<span class="bx--toggle__text--right">On</span>
68+
</label>
69+
<label *ngIf="size === 'sm'" class="bx--toggle__label" [for]="id">
70+
<span class="bx--toggle__appearance">
71+
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
72+
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"/>
73+
</svg>
74+
</span>
75+
</label>
76+
`,
77+
providers: [
78+
{
79+
provide: NG_VALUE_ACCESSOR,
80+
useExisting: Toggle,
81+
multi: true
82+
}
83+
]
84+
})
85+
export class Toggle extends Checkbox {
86+
/**
87+
* Variable used for creating unique ids for toggle components.
88+
* @type {number}
89+
* @static
90+
* @memberof Toggle
91+
*/
92+
static toggleCount = 0;
93+
94+
/**
95+
* Size of the toggle component.
96+
* @type {("sm" | "md" | "default")}
97+
* @memberof Toggle
98+
*/
99+
@Input() size: "sm" | "md" = "md";
100+
101+
/**
102+
* The unique id allocated to the `Toggle`.
103+
* @type {string}
104+
* @memberof Toggle
105+
*/
106+
id = "toggle-" + Toggle.toggleCount;
107+
108+
/**
109+
* Creates an instance of Toggle.
110+
* @param {ChangeDetectorRef} changeDetectorRef
111+
* @memberof Toggle
112+
*/
113+
constructor(protected changeDetectorRef: ChangeDetectorRef) {
114+
super(changeDetectorRef);
115+
Toggle.toggleCount++;
116+
}
117+
}

0 commit comments

Comments
 (0)