Merge branch 'master' into checkbox

Author: youda97

src/button/button.stories.ts

@@ -14,19 +14,19 @@ storiesOf("Button", module)
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-			<button ibmButton [size]="size">A button</button>
-			<br><br>
-			<button ibmButton="secondary" [size]="size">A secondary button</button>
-			<br><br>
-			<button ibmButton="tertiary" [size]="size">A tertiary button</button>
-			<br><br>
-			<button ibmButton="ghost" [size]="size">A ghost button</button>
-			<br><br>
-			<button ibmButton="danger" [size]="size">A danger button</button>
-			<br><br>
-			<button ibmButton="danger--primary" [size]="size">A primary danger button</button>
+			<button [ibmButton]="ibmButton" [size]="size">Button</button>
+			&nbsp;
+			<button [ibmButton]="ibmButton" [size]="size" disabled="true">Button</button>
+			&nbsp;
+			<button [ibmButton]="ibmButton" [size]="size">
+				With icon
+				<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+					<path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
+				</svg>
+			</button>
 		`,
 		props: {
+			ibmButton: select("Button kind", ["primary", "secondary", "tertiary", "ghost", "danger", "danger--primary"], "primary"),
 			size: select("Size of the buttons", ["normal", "sm"], "normal")
 		}
 	}))

src/i18n/en.json

@@ -117,7 +117,13 @@
 		"NEXT_3": "Scroll to next 3 pages",
 		"FILTER": "Filter",
 		"END_OF_DATA": "You've reached the end of your content",
-		"SCROLL_TOP": "Scroll to top"
+		"SCROLL_TOP": "Scroll to top",
+		"CHECKBOX_HEADER": "Select all rows",
+		"CHECKBOX_ROW": "Select row",
+		"EXPAND_BUTTON": "Expand row",
+		"SORT_DESCENDING": "Sort rows by this header in descending order",
+		"SORT_ASCENDING": "Sort rows by this header in ascending order"
+
 	},
 	"TABS": {
 		"BUTTON_ARIA_LEFT": "Go to the previous tab",

src/table/table.component.ts

@@ -179,7 +179,7 @@ import { I18n } from "./../i18n/i18n.module";
 						[size]="size !== ('lg' ? 'sm' : 'md')"
 						[(ngModel)]="selectAllCheckbox"
 						[indeterminate]="selectAllCheckboxSomeSelected"
-						aria-label="Select all rows"
+						[attr.aria-label]="checkboxHeaderLabel | async"
 						(change)="onSelectAllCheckboxChange()">
 					</ibm-checkbox>
 				</th>
@@ -200,7 +200,7 @@ import { I18n } from "./../i18n/i18n.module";
 						<button
 							class="bx--table-sort-v2"
 							*ngIf="this.sort.observers.length > 0 && column.sortable"
-							[attr.aria-label]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)"
+							[attr.aria-label]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel) | async"
 							aria-live="polite"
 							[ngClass]="{
 								'bx--table-sort-v2--active': column.sorted,
@@ -233,7 +233,7 @@ import { I18n } from "./../i18n/i18n.module";
 							aria-haspopup="true"
 							[ibmTooltip]="column.filterTemplate"
 							trigger="click"
-							[title]="translations.FILTER"
+							[title]="filterTitle | async"
 							placement="bottom,top"
 							[data]="column.filterData">
 							<svg
@@ -308,7 +308,7 @@ import { I18n } from "./../i18n/i18n.module";
 						<button
 						*ngIf="model.isRowExpandable(i)"
 						(click)="model.expandRow(i, !model.rowsExpanded[i])"
-						[attr.aria-label]="expandButtonAriaLabel"
+						[attr.aria-label]="expandButtonAriaLabel | async"
 						class="bx--table-expand-v2__button">
 							<svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
 								<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
@@ -318,11 +318,11 @@ import { I18n } from "./../i18n/i18n.module";
 					<td *ngIf="!skeleton && showSelectionColumn">
 						<ibm-checkbox
 							inline="true"
-							aria-label="Select row"
+							[attr.aria-label]="checkboxRowLabel | async"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
 							[(ngModel)]="model.rowsSelected[i]"
 							(change)="onRowCheckboxChange(i)">
-						</ibm-checkbox>
+						>/ibm-checkbox>
 					</td>
 					<ng-container *ngFor="let item of row; let i = index">
 						<td *ngIf="model.header[i].visible"
@@ -358,9 +358,9 @@ import { I18n } from "./../i18n/i18n.module";
 			</tr>
 			<tr *ngIf="this.model.isEnd">
 				<td class="table_end-indicator">
-					<h5>{{translations.END_OF_DATA}}</h5>
+					<h5>{{endOfDataText | async}}</h5>
 					<button (click)="scrollToTop($event)" class="btn--secondary-sm">
-						{{translations.SCROLL_TOP}}
+						{{scrollTopText | async}}
 					</button>
 				</td>
 			</tr>
@@ -411,11 +411,6 @@ export class Table {
 	 * Set to `true` for a loading table.
 	 */
 	@Input() skeleton = false;
-	/**
-	 * Object of all the strings table needs.
-	 * Defaults to the `TABLE` value from the i18n service.
-	 */
-	@Input() translations = this.i18n.get().TABLE;
 
 	/**
 	 * `TableModel` with data the table is to display.
@@ -499,9 +494,64 @@ export class Table {
 	 */
 	@Input() columnsDraggable = false;
 
-	@Input() expandButtonAriaLabel = "Expand row";
-	@Input() sortDescendingLabel = "Sort rows by this header in descending order";
-	@Input() sortAscendingLabel = "Sort rows by this header in ascending order";
+	@Input()
+	set expandButtonAriaLabel(value) {
+		this._expandButtonAriaLabel.next(value);
+	}
+	get expandButtonAriaLabel() {
+		return this._expandButtonAriaLabel;
+	}
+	@Input()
+	set sortDescendingLabel(value) {
+		this._sortDescendingLabel.next(value);
+	}
+	get sortDescendingLabel() {
+		return this._sortDescendingLabel;
+	}
+	@Input()
+	set sortAscendingLabel(value) {
+		this._sortAscendingLabel.next(value);
+	}
+	get sortAscendingLabel() {
+		return this._sortAscendingLabel;
+	}
+
+	/**
+	 * Expects an object that contains some or all of:
+	 * ```
+	 * {
+	 *		"FILTER": "Filter",
+	 *		"END_OF_DATA": "You've reached the end of your content",
+	 *		"SCROLL_TOP": "Scroll to top",
+	 *		"CHECKBOX_HEADER": "Select all rows",
+	 *		"CHECKBOX_ROW": "Select row"
+	 * }
+	 * ```
+	 */
+	@Input()
+	set translations (value) {
+		if (value.FILTER) {
+			this.filterTitle.next(value.FILTER);
+		}
+		if (value.END_OF_DATA) {
+			this.endOfDataText.next(value.END_OF_DATA);
+		}
+		if (value.SCROLL_TOP) {
+			this.scrollTopText.next(value.SCROLL_TOP);
+		}
+		if (value.CHECKBOX_HEADER) {
+			this.checkboxHeaderLabel.next(value.CHECKBOX_HEADER);
+		}
+		if (value.CHECKBOX_ROW) {
+			this.checkboxRowLabel.next(value.CHECKBOX_ROW);
+		}
+	}
+
+	checkboxHeaderLabel = this.i18n.get("TABLE.CHECKBOX_HEADER");
+	checkboxRowLabel = this.i18n.get("TABLE.CHECKBOX_ROW");
+	endOfDataText = this.i18n.get("TABLE.END_OF_DATA");
+	scrollTopText = this.i18n.get("TABLE.SCROLL_TOP");
+	filterTitle = this.i18n.get("TABLE.FILTER");
 
 	/**
 	 * Controls if all checkboxes are viewed as selected.
@@ -582,6 +632,10 @@ export class Table {
 
 	protected _model: TableModel;
 
+	protected _expandButtonAriaLabel  = this.i18n.get("TABLE.EXPAND_BUTTON");
+	protected _sortDescendingLabel = this.i18n.get("TABLE.SORT_DESCENDING");
+	protected _sortAscendingLabel = this.i18n.get("TABLE.SORT_ASCENDING");
+
 	protected columnResizeWidth: number;
 	protected columnResizeMouseX: number;
 	protected mouseMoveSubscription: Subscription;