Skip to content

Commit 3a94f9c

Browse files
nnixaannixaa
authored
feat(theme): add Accordion component
1 parent e7bb266 commit 3a94f9c

32 files changed

+1029
-7
lines changed

‎DEV_DOCS.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,6 @@ For example, if you wanna add getting started article you have to do the followi
245245
246246
### Component block
247247
248-
249248
If you have to render all the information about componend parsed with typedoc
250249
you have to use component blocks:
251250

‎docs/app/app.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
* Licensed under the MIT License. See License.txt in the project root for license information.
55
*/
66
import { BrowserModule, Title } from '@angular/platform-browser';
7+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
78
import { NgModule } from '@angular/core';
89
import { FormsModule } from '@angular/forms';
910
import { HttpClientModule } from '@angular/common/http';
1011
import { RouterModule } from '@angular/router';
11-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
1212
import {
1313
NbThemeModule,
1414
NbSidebarModule,

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

Lines changed: 64 additions & 0 deletions
Loading

‎docs/structure.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,17 @@ export const structure = [
298298
'NbContextMenuDirective',
299299
],
300300
},
301+
{
302+
type: 'tabs',
303+
name: 'Accordion',
304+
icon: 'accordion.svg',
305+
source: [
306+
'NbAccordionComponent',
307+
'NbAccordionItemComponent',
308+
'NbAccordionItemHeaderComponent',
309+
'NbAccordionItemBodyComponent',
310+
],
311+
},
301312
// {
302313
// type: 'tabs',
303314
// name: 'Chips',

‎e2e/accordion.e2e-spec.ts

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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, element, by } from 'protractor';
8+
9+
import { hasClass } from './e2e-helper';
10+
11+
describe('accordion', () => {
12+
beforeEach(done => {
13+
browser.get('#/accordion/accordion-test.component').then(() => done());
14+
});
15+
16+
it('should display the 4 accordion items', () => {
17+
expect(element.all(by.css('nb-accordion > nb-accordion-item')).count()).toEqual(4);
18+
19+
expect(
20+
element(
21+
by.css('nb-accordion > nb-accordion-item:nth-child(1) > nb-accordion-item-header'),
22+
).getText(),
23+
).toEqual('Accordion #1', 'fist item title');
24+
25+
expect(
26+
element(
27+
by.css('nb-accordion > nb-accordion-item:nth-child(2) > nb-accordion-item-header'),
28+
).getText(),
29+
).toEqual('Accordion #2', 'second item title');
30+
31+
expect(
32+
hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(2)')), 'collapsed'),
33+
).toBeTruthy('second is collapsed');
34+
35+
expect(
36+
element(
37+
by.css('nb-accordion > nb-accordion-item:nth-child(3) > nb-accordion-item-header'),
38+
).getText(),
39+
).toEqual('Accordion #3', 'third item title');
40+
41+
expect(
42+
hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')), 'expanded'),
43+
).toBeTruthy('second is expanded');
44+
});
45+
46+
it('should expand a first accordion-item', () => {
47+
element(by.css('nb-accordion > nb-accordion-item:nth-child(1)')).click();
48+
49+
expect(
50+
hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(1)')), 'expanded'),
51+
).toBeTruthy();
52+
53+
expect(
54+
hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')), 'collapsed'),
55+
).toBeTruthy();
56+
57+
expect(
58+
element(by.css('nb-accordion > nb-accordion-item:nth-child(1) > nb-accordion-item-header')).getAttribute(
59+
'aria-expanded',
60+
),
61+
).toEqual('true');
62+
});
63+
64+
it('should display the tabbable accordion items', () => {
65+
expect(
66+
element(by.css('nb-accordion > nb-accordion-item:nth-child(1) > nb-accordion-item-header')).getAttribute(
67+
'tabindex',
68+
),
69+
).toEqual('0');
70+
71+
expect(
72+
element(by.css('nb-accordion > nb-accordion-item:nth-child(2) > nb-accordion-item-header')).getAttribute(
73+
'tabindex',
74+
),
75+
).toEqual('0');
76+
77+
expect(
78+
element(by.css('nb-accordion > nb-accordion-item:nth-child(4) > nb-accordion-item-header')).getAttribute(
79+
'tabindex',
80+
),
81+
).toEqual('-1');
82+
});
83+
84+
it('should display a disabled accordion item', () => {
85+
expect(
86+
element(by.css('nb-accordion > nb-accordion-item:nth-child(4) > nb-accordion-item-header')).getAttribute(
87+
'aria-disabled',
88+
),
89+
).toEqual('true');
90+
91+
expect(
92+
hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(4)')), 'disabled'),
93+
).toBeTruthy();
94+
});
95+
96+
it('should display a disabled accordion with collapsed state after click', () => {
97+
element(by.css('nb-accordion > nb-accordion-item:nth-child(4)')).click();
98+
99+
expect(
100+
hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(4)')), 'collapsed'),
101+
).toBeTruthy();
102+
});
103+
});

‎src/app/app.component.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.framework-options-bar {
2+
display: flex;
3+
}

‎src/app/app.component.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ import { Component } from '@angular/core';
88

99
@Component({
1010
selector: 'nb-app-root',
11+
styleUrls: ['./app.component.scss'],
1112
template: `
12-
<nb-layout-direction-toggle></nb-layout-direction-toggle>
13+
<div class="framework-options-bar" dir="ltr">
14+
<nb-layout-direction-toggle></nb-layout-direction-toggle>
15+
<nb-layout-theme-toggle></nb-layout-theme-toggle>
16+
</div>
1317
<router-outlet></router-outlet>
1418
`,
1519
})
16-
export class NbAppComponent {
17-
}
20+
export class NbAppComponent {}

‎src/app/app.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { NbAppComponent } from './app.component';
1616
import { NbLayoutDirectionToggleComponent } from './layout-direction-toggle/layout-direction-toggle.component';
1717
import { NbDynamicToAddComponent } from '../playground/shared/dynamic.component';
1818
import { NbPlaygroundSharedModule } from '../playground/shared/shared.module';
19-
19+
import { NbLayoutThemeToggleComponent } from './layout-theme-toggle/layout-theme-toggle.component';
2020

2121
@NgModule({
2222
imports: [
@@ -36,6 +36,7 @@ import { NbPlaygroundSharedModule } from '../playground/shared/shared.module';
3636
declarations: [
3737
NbAppComponent,
3838
NbLayoutDirectionToggleComponent,
39+
NbLayoutThemeToggleComponent,
3940
],
4041
entryComponents: [
4142
NbDynamicToAddComponent,

‎src/app/layout-direction-toggle/layout-direction-toggle.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
display: block;
33
padding: 0.5em;
44

5+
input {
6+
margin-right: 0.25rem;
7+
}
8+
59
label {
610
margin: 0;
711
}

‎src/app/layout-theme-toggle/layout-theme-toggle.component.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
:host {
2+
display: block;
3+
padding: 0.5em;
4+
5+
button {
6+
margin-right: 0.25rem;
7+
}
8+
9+
label {
10+
margin: 0;
11+
}
12+
13+
}

‎src/app/layout-theme-toggle/layout-theme-toggle.component.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component } from '@angular/core';
2+
import { NbThemeService } from '@nebular/theme';
3+
4+
@Component({
5+
selector: 'nb-layout-theme-toggle',
6+
styleUrls: ['./layout-theme-toggle.component.scss'],
7+
template: `
8+
<label dir="ltr">
9+
<button (click)="enable('cosmic')">Cosmic</button>
10+
<button (click)="enable('default')">Default</button>
11+
<button (click)="enable('corporate')">Corporate</button>
12+
</label>
13+
`,
14+
})
15+
export class NbLayoutThemeToggleComponent {
16+
constructor(private themeService: NbThemeService) {}
17+
18+
enable(theme: string) {
19+
this.themeService.changeTheme(theme);
20+
}
21+
}

‎src/framework/theme/components/accordion/_accordion.component.theme.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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-accordion-item-header() {
8+
padding: nb-theme(accordion-padding);
9+
border-bottom-width: nb-theme(accordion-header-border-width);
10+
border-bottom-style: nb-theme(accordion-header-border-type);
11+
border-bottom-color: nb-theme(accordion-header-border-color);
12+
border-top-left-radius: nb-theme(accordion-border-radius);
13+
border-top-right-radius: nb-theme(accordion-border-radius);
14+
color: nb-theme(accordion-header-fg-heading);
15+
16+
font-family: nb-theme(accordion-header-font-family);
17+
font-size: nb-theme(accordion-header-font-size);
18+
font-weight: nb-theme(accordion-header-font-weight);
19+
20+
@include nb-headings();
21+
}
22+
23+
@mixin nb-accordion-theme() {
24+
25+
nb-accordion {
26+
nb-accordion-item-header {
27+
position: relative;
28+
@include nb-accordion-item-header();
29+
30+
i {
31+
position: absolute;
32+
@include nb-ltr(right, 1rem);
33+
@include nb-rtl(left, 1rem);
34+
}
35+
}
36+
37+
nb-accordion-item {
38+
font-family: nb-theme(accordion-item-font-family);
39+
font-weight: nb-theme(accordion-item-font-weight);
40+
background: nb-theme(accordion-item-bg);
41+
color: nb-theme(accordion-item-fg-text);
42+
box-shadow: nb-theme(accordion-item-shadow);
43+
44+
&.disabled nb-accordion-item-header {
45+
color: nb-theme(accordion-header-disabled-fg);
46+
cursor: default;
47+
}
48+
}
49+
50+
nb-accordion-item-body .item-body {
51+
flex: 1;
52+
-ms-flex: 1 1 auto;
53+
overflow: auto;
54+
padding: nb-theme(card-padding);
55+
position: relative;
56+
}
57+
}
58+
}

0 commit comments

Comments
 (0)