Skip to content

Commit 7f22a48

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #221 from youda97/switchToToggle
Add toggle component and deprecate switch
2 parents 51d2ed3 + 62805cf commit 7f22a48

File tree

10 files changed

+259
-24
lines changed

10 files changed

+259
-24
lines changed

‎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
@@ -25,3 +25,4 @@ export * from "./progress-indicator/progress-indicator.module";
2525
export * from "./i18n/i18n.module";
2626
export * from "./pagination/pagination.module";
2727
export * from "./loading/loading.module";
28+
export * from "./toggle/toggle.module";

‎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 { ToggleComponent } from "./toggle.component";
8+
import { CheckboxComponent } from "../checkbox/checkbox.module";
9+
10+
describe("ToggleComponent", () => {
11+
let component: ToggleComponent;
12+
let fixture: ComponentFixture<ToggleComponent>;
13+
let labelElement: HTMLElement;
14+
let buttonElement: HTMLElement;
15+
let svgElement: HTMLElement;
16+
17+
beforeEach(() => {
18+
TestBed.configureTestingModule({
19+
declarations: [ToggleComponent],
20+
imports: [BrowserAnimationsModule, StaticIconModule],
21+
providers: []
22+
});
23+
24+
fixture = TestBed.createComponent(ToggleComponent);
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 ToggleComponent).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 { CheckboxComponent } 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 `ToggleComponent` that has been changed.
30+
* @type {ToggleComponent}
31+
* @memberof ToggleChange
32+
*/
33+
source: ToggleComponent;
34+
/**
35+
* The state of the `ToggleComponent` 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 ToggleComponent
48+
* @extends {CheckboxComponent}
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: ToggleComponent,
81+
multi: true
82+
}
83+
]
84+
})
85+
export class ToggleComponent extends CheckboxComponent {
86+
/**
87+
* Variable used for creating unique ids for toggle components.
88+
* @type {number}
89+
* @static
90+
* @memberof ToggleComponent
91+
*/
92+
static toggleCount = 0;
93+
94+
/**
95+
* Size of the toggle component.
96+
* @type {("sm" | "md" | "default")}
97+
* @memberof ToggleComponent
98+
*/
99+
@Input() size: "sm" | "md" = "md";
100+
101+
/**
102+
* The unique id allocated to the `ToggleComponent`.
103+
* @type {string}
104+
* @memberof ToggleComponent
105+
*/
106+
id = "toggle-" + ToggleComponent.toggleCount;
107+
108+
/**
109+
* Creates an instance of ToggleComponent.
110+
* @param {ChangeDetectorRef} changeDetectorRef
111+
* @memberof ToggleComponent
112+
*/
113+
constructor(protected changeDetectorRef: ChangeDetectorRef) {
114+
super(changeDetectorRef);
115+
ToggleComponent.toggleCount++;
116+
}
117+
}

‎src/toggle/toggle.module.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// modules
2+
import { NgModule } from "@angular/core";
3+
import { FormsModule } from "@angular/forms";
4+
import { CommonModule } from "@angular/common";
5+
6+
// imports
7+
import { ToggleComponent } from "../toggle/toggle.component";
8+
9+
// exports
10+
export { ToggleComponent } from "../toggle/toggle.component";
11+
12+
@NgModule({
13+
declarations: [
14+
ToggleComponent
15+
],
16+
exports: [
17+
ToggleComponent
18+
],
19+
imports: [
20+
CommonModule,
21+
FormsModule
22+
]
23+
})
24+
export class ToggleModule { }

‎src/toggle/toggle.stories.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { storiesOf, moduleMetadata } from "@storybook/angular";
2+
import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
3+
4+
import { ToggleModule } from "../";
5+
6+
storiesOf("Toggle", module).addDecorator(
7+
moduleMetadata({
8+
imports: [ToggleModule]
9+
})
10+
)
11+
.addDecorator(withKnobs)
12+
.add("Basic", () => ({
13+
template: `
14+
<ibm-toggle [disabled]="disabled"></ibm-toggle>
15+
`,
16+
props: {
17+
disabled: boolean("disabled", false)
18+
}
19+
20+
}))
21+
.add("Small", () => ({
22+
template: `
23+
<ibm-toggle [disabled]="disabled" size="sm"></ibm-toggle>
24+
`,
25+
props: {
26+
disabled: boolean("disabled", false)
27+
}
28+
}));

0 commit comments

Comments
 (0)