Skip to content

Commit 0470716

Browse files
cal-smithcal-smith
committed
merge
2 parents a9d4ef9 + 0145ae1 commit 0470716

File tree

10 files changed

+2126
-1863
lines changed

10 files changed

+2126
-1863
lines changed

‎package-lock.json‎

Lines changed: 1909 additions & 1858 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/grid/grid.directive.spec.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Component } from "@angular/core";
2+
import { async, TestBed } from "@angular/core/testing";
3+
import { By } from "@angular/platform-browser";
4+
import { ColumnDirective, GridDirective, RowDirective } from "./grid.directive";
5+
6+
@Component({
7+
selector: "ibm-test-grid",
8+
template: ""
9+
})
10+
class TestGridComponent {}
11+
12+
describe("GridDirective", () => {
13+
beforeEach(() => {
14+
TestBed.configureTestingModule({
15+
declarations: [
16+
TestGridComponent,
17+
GridDirective,
18+
RowDirective,
19+
ColumnDirective
20+
]
21+
});
22+
});
23+
24+
it("should render a grid", async(() => {
25+
TestBed.overrideComponent(TestGridComponent, {
26+
set: {
27+
template: `<div ibmGrid></div>`
28+
}
29+
});
30+
31+
TestBed.compileComponents().then(() => {
32+
const fixture = TestBed.createComponent(TestGridComponent);
33+
const directiveEl = fixture.debugElement.query(
34+
By.directive(GridDirective)
35+
);
36+
fixture.detectChanges();
37+
38+
expect(directiveEl).not.toBeNull();
39+
});
40+
}));
41+
42+
it("should render a row", async(() => {
43+
TestBed.overrideComponent(TestGridComponent, {
44+
set: {
45+
template: `<div ibmRow></div>`
46+
}
47+
});
48+
49+
TestBed.compileComponents().then(() => {
50+
const fixture = TestBed.createComponent(TestGridComponent);
51+
const directiveEl = fixture.debugElement.query(
52+
By.directive(RowDirective)
53+
);
54+
fixture.detectChanges();
55+
56+
expect(directiveEl).not.toBeNull();
57+
});
58+
}));
59+
60+
it("should render a column", async(() => {
61+
TestBed.overrideComponent(TestGridComponent, {
62+
set: {
63+
template:
64+
`<div ibmCol [offsets]="{'md': 2}" [columnNumbers]="{'lg': 3, 'md': 'nobreak'}" class='custom-class-example'></div>`
65+
}
66+
});
67+
68+
TestBed.compileComponents().then(() => {
69+
const fixture = TestBed.createComponent(TestGridComponent);
70+
const directiveEl = fixture.debugElement.query(
71+
By.directive(ColumnDirective)
72+
);
73+
fixture.detectChanges();
74+
75+
expect(directiveEl).not.toBeNull();
76+
77+
const directiveInstance = directiveEl.injector.get(ColumnDirective);
78+
expect(directiveInstance.columnClasses).toBe(
79+
"bx--col-lg-3 bx--col-md bx--offset-md-2 custom-class-example"
80+
);
81+
});
82+
}));
83+
});

‎src/grid/grid.directive.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Directive, HostBinding, Input, OnInit } from "@angular/core";
2+
3+
@Directive({
4+
selector: "[ibmGrid]"
5+
})
6+
export class GridDirective {
7+
@HostBinding("class.bx--grid") baseClass = true;
8+
}
9+
10+
@Directive({
11+
selector: "[ibmRow]"
12+
})
13+
export class RowDirective {
14+
@HostBinding("class.bx--row") baseClass = true;
15+
}
16+
17+
@Directive({
18+
selector: "[ibmCol]"
19+
})
20+
export class ColumnDirective implements OnInit {
21+
@Input() class = "";
22+
23+
@Input() columnNumbers = {};
24+
25+
@Input() offsets = {};
26+
27+
protected _columnClasses: string[] = [];
28+
29+
@HostBinding("class")
30+
get columnClasses(): string {
31+
return this._columnClasses.join(" ");
32+
}
33+
34+
set(classes: string) {
35+
this._columnClasses = classes.split(" ");
36+
}
37+
38+
ngOnInit() {
39+
try {
40+
Object.keys(this.columnNumbers).forEach(key => {
41+
if (this.columnNumbers[key] === "nobreak") {
42+
this._columnClasses.push(`bx--col-${key}`);
43+
} else {
44+
this._columnClasses.push(`bx--col-${key}-${this.columnNumbers[key]}`);
45+
}
46+
});
47+
48+
Object.keys(this.offsets).forEach(key => {
49+
this._columnClasses.push(`bx--offset-${key}-${this.offsets[key]}`);
50+
});
51+
} catch (err) {
52+
console.error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`);
53+
}
54+
55+
if (this.class !== "") {
56+
this._columnClasses.push(this.class);
57+
}
58+
}
59+
}

‎src/grid/grid.module.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from "@angular/core";
2+
import { CommonModule } from "@angular/common";
3+
4+
import { ColumnDirective, GridDirective, RowDirective } from "./grid.directive";
5+
6+
@NgModule({
7+
declarations: [
8+
ColumnDirective,
9+
GridDirective,
10+
RowDirective
11+
],
12+
exports: [
13+
ColumnDirective,
14+
GridDirective,
15+
RowDirective
16+
],
17+
imports: [CommonModule]
18+
})
19+
export class GridModule { }

‎src/grid/grid.stories.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { storiesOf, moduleMetadata } from "@storybook/angular";
2+
import { withNotes } from "@storybook/addon-notes";
3+
import { action } from "@storybook/addon-actions";
4+
import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
5+
6+
import { GridModule } from "../";
7+
8+
storiesOf("Grid", module)
9+
.addDecorator(
10+
moduleMetadata({
11+
imports: [GridModule]
12+
})
13+
)
14+
.addDecorator(withKnobs)
15+
.add("Basic", () => ({
16+
template: `
17+
<div ibmGrid>
18+
<div ibmRow>
19+
<div ibmCol class="custom-class-example" [columnNumbers]="{'md':3, 'sm': 12}">First Column</div>
20+
<div ibmCol class="custom-class-example" [columnNumbers]="{'md':3, 'sm': 12}">Second column</div>
21+
</div>
22+
</div>
23+
`
24+
}));

‎src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export * from "./dropdown/dropdown.module";
1313
export * from "./experimental.module";
1414
export * from "./file-uploader/file-uploader.module";
1515
export * from "./forms/forms.module";
16+
export * from "./grid/grid.module";
1617
export * from "./i18n/i18n.module";
1718
export * from "./icon/icon.module";
1819
export * from "./inline-loading/inline-loading.module";
@@ -35,6 +36,6 @@ export * from "./structured-list/structured-list.module";
3536
export * from "./switch/switch.module";
3637
export * from "./table/table.module";
3738
export * from "./tabs/tabs.module";
39+
export * from "./tag/tag.module";
3840
export * from "./tiles/tiles.module";
3941
export * from "./ui-shell/ui-shell.module";
40-
export * from "./tag/tag.module";

‎src/table/expanded-row-hover.directive.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {
2+
Directive,
3+
HostListener
4+
} from "@angular/core";
5+
6+
@Directive({
7+
selector: "[ibmExpandedRowHover]"
8+
})
9+
export class ExpandedRowHover {
10+
@HostListener("mouseenter", ["$event"])
11+
addHoverClass(event) {
12+
event.target.previousElementSibling.classList.add("bx--expandable-row--hover-v2");
13+
}
14+
15+
@HostListener("mouseleave", ["$event"])
16+
removeHoverClass(event) {
17+
event.target.previousElementSibling.classList.remove("bx--expandable-row--hover-v2");
18+
}
19+
}

‎src/table/table.component.spec.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
TableModel,
88
TableHeaderItem,
99
TableItem,
10-
DataGridFocus
10+
DataGridFocus,
11+
ExpandedRowHover
1112
} from "./table.module";
1213
import { Table } from "./table.component";
1314
import { StaticIconModule } from "./../icon/static-icon.module";
@@ -49,7 +50,8 @@ describe("Table", () => {
4950
declarations: [
5051
Table,
5152
TableTest,
52-
DataGridFocus
53+
DataGridFocus,
54+
ExpandedRowHover
5355
]
5456
});
5557

‎src/table/table.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,7 @@ import { I18n } from "./../i18n/i18n.module";
370370
<tr
371371
*ngIf="model.rowsExpanded[i] && !model.isRowFiltered(i)"
372372
class="bx--expandable-row-v2"
373+
ibmExpandedRowHover
373374
[attr.data-child-row]="(model.rowsExpanded[i] ? 'true' : null)">
374375
<td
375376
[ibmDataGridFocus]="isDataGrid"

‎src/table/table.module.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
1111
import { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
1212
import { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
1313
import { DataGridFocus } from "./data-grid-focus.directive";
14+
import { ExpandedRowHover } from "./expanded-row-hover.directive";
1415

1516
import { IconModule } from "./../icon/icon.module";
1617
import { StaticIconModule } from "..";
@@ -26,6 +27,7 @@ export { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
2627
export { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
2728
export { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
2829
export { DataGridFocus } from "./data-grid-focus.directive";
30+
export { ExpandedRowHover } from "./expanded-row-hover.directive";
2931

3032
@NgModule({
3133
declarations: [
@@ -34,15 +36,17 @@ export { DataGridFocus } from "./data-grid-focus.directive";
3436
TableToolbarActions,
3537
TableToolbarSearch,
3638
TableToolbarContent,
37-
DataGridFocus
39+
DataGridFocus,
40+
ExpandedRowHover
3841
],
3942
exports: [
4043
Table,
4144
TableToolbar,
4245
TableToolbarActions,
4346
TableToolbarSearch,
4447
TableToolbarContent,
45-
DataGridFocus
48+
DataGridFocus,
49+
ExpandedRowHover
4650
],
4751
imports: [
4852
CommonModule,

0 commit comments

Comments
 (0)