Skip to content

Commit d86edce

Browse files
zankevichyggg
zankevich
authored and
yggg
committed
feat(toggle): add toggle component (#1304)
1 parent e6c4966 commit d86edce

23 files changed

+1070
-2
lines changed

‎DEV_DOCS.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,7 +429,7 @@ _your-component.component.theme.scss (optional, styles that depends on theme var
429429
430430
- register your component in framework
431431
````
432-
src/framework/theme/index.ts (add exports of your component and module)
432+
src/framework/theme/public_api.ts (add exports of your component and module)
433433
src/framework/theme/styles/global/_components.scss (if you create _your-component.component.theme.scss you have to register mixin)
434434

435435
````

‎docs/assets/images/components/toggle.svg

Lines changed: 1 addition & 0 deletions
Loading

‎docs/structure.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,14 @@ export const structure = [
475475
'NbCheckboxComponent',
476476
],
477477
},
478+
{
479+
type: 'tabs',
480+
name: 'Toggle',
481+
icon: 'toggle.svg',
482+
source: [
483+
'NbToggleComponent',
484+
],
485+
},
478486
{
479487
type: 'tabs',
480488
name: 'Radio',

‎e2e/toggle.e2e-spec.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* @license
3+
* Copyright Akveo. All Rights Reserved.
4+
* Licensed under the MIT License. See License.txt in the project root for license information.
5+
*/
6+
7+
import { browser, by, element } from 'protractor';
8+
9+
describe('nb-toggle', () => {
10+
beforeEach((done) => {
11+
browser.get('#/toggle/toggle-test.component').then(() => done());
12+
});
13+
14+
it('should turn on on click', () => {
15+
const input = element(by.css('#first input'));
16+
const indicator = element(by.css('#first .toggle'));
17+
18+
expect(input.getAttribute('checked')).toBeFalsy();
19+
indicator.click();
20+
expect(input.getAttribute('checked')).toBeTruthy();
21+
indicator.click();
22+
expect(input.getAttribute('checked')).toBeFalsy();
23+
});
24+
});

‎src/app/playground-components.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1323,6 +1323,47 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
13231323
},
13241324
],
13251325
},
1326+
{
1327+
path: 'toggle',
1328+
children: [
1329+
{
1330+
path: 'toggle-disabled.component',
1331+
link: '/toggle/toggle-disabled.component',
1332+
component: 'ToggleDisabledComponent',
1333+
name: 'Toggle Disabled',
1334+
},
1335+
{
1336+
path: 'toggle-showcase.component',
1337+
link: '/toggle/toggle-showcase.component',
1338+
component: 'ToggleShowcaseComponent',
1339+
name: 'Toggle Showcase',
1340+
},
1341+
{
1342+
path: 'toggle-status.component',
1343+
link: '/toggle/toggle-status.component',
1344+
component: 'ToggleStatusComponent',
1345+
name: 'Toggle Status',
1346+
},
1347+
{
1348+
path: 'toggle-test.component',
1349+
link: '/toggle/toggle-test.component',
1350+
component: 'ToggleTestComponent',
1351+
name: 'Toggle Test',
1352+
},
1353+
{
1354+
path: 'toggle-label-position.component',
1355+
link: '/toggle/toggle-label-position.component',
1356+
component: 'ToggleLabelPositionComponent',
1357+
name: 'Toggle Label Position',
1358+
},
1359+
{
1360+
path: 'toggle-form.component',
1361+
link: '/toggle/toggle-form.component',
1362+
component: 'ToggleFormComponent',
1363+
name: 'Toggle Form',
1364+
},
1365+
],
1366+
},
13261367
{
13271368
path: 'context-menu',
13281369
children: [

‎src/framework/theme/components/checkbox/checkbox.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ export class NbCheckboxComponent implements ControlValueAccessor {
198198

199199
/**
200200
* Checkbox status.
201-
* Possible values are: `primary` (default), `success`, `warning`, `danger`, `info`
201+
* Possible values are: `primary`, `success`, `warning`, `danger`, `info`
202202
*/
203203
@Input()
204204
status: '' | NbComponentStatus = '';

‎src/framework/theme/components/toggle/_toggle.component.theme.scss

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/**
2+
* @license
3+
* Copyright Akveo. All Rights Reserved.
4+
* Licensed under the MIT License. See License.txt in the project root for license information.
5+
*/
6+
7+
@mixin nb-toggle-theme() {
8+
nb-toggle {
9+
.toggle {
10+
height: nb-theme(toggle-height);
11+
width: nb-theme(toggle-width);
12+
background-color: nb-theme(toggle-background-color);
13+
border: nb-theme(toggle-border-width) solid nb-theme(toggle-border-color);
14+
border-radius: nb-theme(toggle-border-radius);
15+
cursor: nb-theme(toggle-cursor);
16+
}
17+
18+
.toggle.checked {
19+
background-color: nb-theme(toggle-primary-checked-background-color);
20+
border-color: nb-theme(toggle-primary-checked-border-color);
21+
}
22+
23+
.native-input {
24+
&:focus + .toggle {
25+
border-color: nb-theme(toggle-primary-focus-border-color);
26+
box-shadow: 0 0 0 nb-theme(toggle-outline-width) nb-theme(toggle-outline-color);
27+
}
28+
29+
&:active + .toggle {
30+
background-color: nb-theme(toggle-primary-active-background-color);
31+
border-color: nb-theme(toggle-primary-active-border-color);
32+
}
33+
}
34+
35+
.toggle:hover {
36+
background-color: nb-theme(toggle-primary-hover-background-color);
37+
border-color: nb-theme(toggle-primary-hover-border-color);
38+
}
39+
40+
.native-input:disabled {
41+
& + .toggle {
42+
background-color: nb-theme(toggle-disabled-background-color);
43+
border-color: nb-theme(toggle-disabled-border-color);
44+
cursor: nb-theme(toggle-disabled-cursor);
45+
46+
nb-icon {
47+
color: nb-theme(toggle-disabled-switcher-checkmark-color);
48+
}
49+
}
50+
51+
& ~ .text {
52+
color: nb-theme(toggle-disabled-text-color);
53+
}
54+
}
55+
56+
.toggle-switcher {
57+
width: nb-theme(toggle-switcher-size);
58+
height: nb-theme(toggle-switcher-size);
59+
background-color: nb-theme(toggle-switcher-background-color);
60+
61+
nb-icon {
62+
color: nb-theme(toggle-switcher-checkmark-color);
63+
}
64+
}
65+
66+
.text {
67+
color: nb-theme(toggle-text-color);
68+
font-family: nb-theme(toggle-text-font-family);
69+
font-size: nb-theme(toggle-text-font-size);
70+
font-weight: nb-theme(toggle-text-font-weight);
71+
line-height: nb-theme(toggle-text-line-height);
72+
}
73+
}
74+
75+
@each $status in nb-get-statuses() {
76+
@include nb-toggle-status($status);
77+
}
78+
}
79+
80+
@mixin nb-toggle-status($status: '') {
81+
nb-toggle.status-#{$status} {
82+
83+
.toggle {
84+
background-color: nb-theme(toggle-#{$status}-background-color);
85+
border-color: nb-theme(toggle-#{$status}-border-color);
86+
}
87+
88+
.toggle.checked {
89+
background-color: nb-theme(toggle-#{$status}-checked-background-color);
90+
border-color: nb-theme(toggle-#{$status}-checked-border-color);
91+
}
92+
93+
.native-input {
94+
&:focus + .toggle {
95+
border-color: nb-theme(toggle-#{$status}-focus-border-color);
96+
}
97+
98+
&:active + .toggle {
99+
background-color: nb-theme(toggle-#{$status}-active-background-color);
100+
border-color: nb-theme(toggle-#{$status}-active-border-color);
101+
}
102+
}
103+
104+
.toggle:hover {
105+
background-color: nb-theme(toggle-#{$status}-hover-background-color);
106+
border-color: nb-theme(toggle-#{$status}-hover-border-color);
107+
}
108+
109+
.toggle-switcher {
110+
nb-icon {
111+
color: nb-theme(toggle-#{$status}-checked-switcher-checkmark-color);
112+
}
113+
}
114+
115+
.native-input:disabled {
116+
& + .toggle {
117+
background-color: nb-theme(toggle-disabled-background-color);
118+
border-color: nb-theme(toggle-disabled-border-color);
119+
120+
nb-icon {
121+
color: nb-theme(toggle-disabled-switcher-checkmark-color);
122+
}
123+
}
124+
125+
& ~ .text {
126+
color: nb-theme(toggle-disabled-text-color);
127+
}
128+
}
129+
}
130+
}

‎src/framework/theme/components/toggle/toggle.component.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import '../../styles/core/mixins';
2+
3+
:host {
4+
display: inline-flex;
5+
outline: none;
6+
}
7+
8+
:host(.toggle-label-left) .text {
9+
padding-right: 0.6875rem;
10+
@include nb-ltr(order, -1);
11+
@include nb-rtl(order, 1);
12+
}
13+
14+
:host(.toggle-label-right) .text {
15+
padding-left: 0.6875rem;
16+
@include nb-ltr(order, 1);
17+
@include nb-rtl(order, -1);
18+
}
19+
20+
:host(.toggle-label-start) .toggle-label {
21+
flex-direction: row-reverse;
22+
23+
.text {
24+
@include nb-ltr(padding-right, 0.6875rem);
25+
@include nb-rtl(padding-left, 0.6875rem);
26+
}
27+
}
28+
29+
:host(.toggle-label-end) .text {
30+
@include nb-ltr(padding-left, 0.6875rem);
31+
@include nb-rtl(padding-right, 0.6875rem);
32+
}
33+
34+
.toggle-label {
35+
position: relative;
36+
display: inline-flex;
37+
align-items: center;
38+
}
39+
40+
.toggle {
41+
position: relative;
42+
display: inline-flex;
43+
box-sizing: content-box;
44+
@include nb-component-animation(background-color, border, box-shadow);
45+
}
46+
47+
.toggle-switcher {
48+
position: absolute;
49+
border-radius: 50%;
50+
margin: 1px;
51+
52+
nb-icon {
53+
position: absolute;
54+
top: 50%;
55+
left: 50%;
56+
transform: translate(-50%, -50%);
57+
width: 40%;
58+
}
59+
}

0 commit comments

Comments
 (0)