Merge branch 'tooltip-icon' of https://github.com/youda97/carbon-components-angular into tooltip-icon

Author: youda97

.storybook/config.js

@@ -27,8 +27,8 @@ addDecorator(
 );
 
 // load global styles
-require("!style-loader!css-loader!sass-loader!./preview.scss");
-require("!style-loader!css-loader!sass-loader!./preview-experimental.scss");
+require("!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss");
+require("!style-loader!css-loader!postcss-loader!sass-loader!./preview-experimental.scss");
 
 require("../src/index.stories");
 // automatically import all files ending in *.stories.ts

src/content-switcher/content-switcher-option.directive.ts

@@ -11,6 +11,9 @@ import {
 	selector: "[ibmContentOption]"
 })
 export class ContentSwitcherOption {
+	/**
+	 * Used to activate the option. Only one option may be `active` at a time
+	 */
 	@Input() set active (value: boolean) {
 		this._active = value;
 		this.selectedClass = value;
@@ -22,8 +25,16 @@ export class ContentSwitcherOption {
 		return this._active;
 	}
 
+	/**
+	 * Internal name for the option.
+	 * Should be something that identifies the option to the application.
+	 * Accessible from the `ContentSwitcher` `selected` emitter
+	 */
 	@Input() name = "option";
 
+	/**
+	 * Emits when the option is selected.
+	 */
 	@Output() selected = new EventEmitter();
 
 	@HostBinding("class") switcherClass = "bx--content-switcher-btn";

src/content-switcher/content-switcher.component.ts

@@ -13,8 +13,16 @@ import { ContentSwitcherOption } from "./content-switcher-option.directive";
 import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 
 /**
+ * The content switcher can be used for toggling between distinct options.
+ * Similar to tabs, but without an associated content panel
  *
- *
+ * ```html
+ * <ibm-content-switcher (selected)="selected($event)">
+ *		<button ibmContentOption>First section</button>
+ *		<button ibmContentOption>Second section</button>
+ *		<button ibmContentOption>Third section</button>
+ *	</ibm-content-switcher>
+ *	```
  */
 @Component({
 	selector: "ibm-content-switcher",
@@ -28,16 +36,27 @@ import { isFocusInLastItem, isFocusInFirstItem } from "./../common/tab.service";
 	`
 })
 export class ContentSwitcher implements AfterViewInit {
+	/**
+	 * aria-label for the content switcher. Should be set to something descriptive
+	 */
 	@Input() label = "content switcher";
 
+	/**
+	 * Emits the activated `ContentSwitcherOption`
+	 */
 	@Output() selected = new EventEmitter();
 
 	@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;
 
 	constructor(protected elementRef: ElementRef) {}
 
 	ngAfterViewInit() {
-		this.options.first.active = true;
+		const firstActive = this.options.find(option => option.active);
+		// delay setting active until the DOM has settled
+		if (!firstActive) {
+			setTimeout(() => this.options.first.active = true);
+		}
+		// subscribe to each item, emit when one is selected, and reset the active states
 		this.options.forEach(option => {
 			option.selected.subscribe(_ => {
 				const active = option;
@@ -53,7 +72,7 @@ export class ContentSwitcher implements AfterViewInit {
 
 	@HostListener("keydown", ["$event"])
 	hostkeys(event: KeyboardEvent) {
-		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(".bx--content-switcher-btn"));
+		const buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll("[ibmContentOption]"));
 
 		switch (event.key) {
 			case "Right": // IE specific value

src/datepicker-input/datepicker-input.component.ts

@@ -5,12 +5,18 @@ import { Component, Input } from "@angular/core";
 	template: `
 	<div class="bx--form-item">
 		<div class="bx--date-picker"
-		[ngClass]= "'bx--date-picker--' + type">
+			[ngClass]="{
+				'bx--date-picker--single' : type === 'single',
+				'bx--date-picker--range' : type === 'range',
+				'bx--date-picker--light' : theme === 'light',
+				'bx--skeleton' : skeleton
+			}">
 			<div class="bx--date-picker-container">
 				<label [for]="id" class="bx--label">
 					{{label}}
 				</label>
-				<svg *ngIf="type == 'single'"
+				<div *ngIf="skeleton" class="bx--date-picker__input bx--skeleton"></div>
+				<svg *ngIf="type == 'single' && !skeleton"
 				data-date-picker-icon
 				class="bx--date-picker__icon"
 				width="14" height="16"
@@ -22,17 +28,23 @@ import { Component, Input } from "@angular/core";
 						fill-rule="nonzero"/>
 				</svg>
 				<input
+					*ngIf="!skeleton"
 					autocomplete="off"
 					type="text"
 					class="bx--date-picker__input"
 					[pattern]="pattern"
 					[placeholder]="placeholder"
 					data-date-picker-input
 					[attr.data-input] = "type == 'single' || type == 'range' ?  '' : null"
-					[id]= "id"/>
+					[id]= "id"
+					[attr.disabled]="(disabled ? '' : null)"
+					[attr.data-invalid]="(invalid ? '' : null)"/>
+					<div *ngIf="invalid" class="bx--form-requirement">
+						{{invalidText}}
+					</div>
 			</div>
 
-			<svg *ngIf= "type == 'range' && hasIcon"
+			<svg *ngIf= "type == 'range' && hasIcon && !skeleton"
 			data-date-picker-icon
 			class="bx--date-picker__icon"
 			width="14" height="16"
@@ -67,4 +79,14 @@ export class DatePickerInput {
 	@Input() placeholder = "mm/dd/yyyy";
 
 	@Input() pattern = "\d{1,2}/\d{1,2}/\d{4}";
+
+	@Input() theme: "light" | "dark" = "dark";
+
+	@Input() disabled = false;
+
+	@Input() invalid = false;
+
+	@Input() invalidText: string;
+
+	@Input() skeleton = false;
 }

src/datepicker-input/datepicker-input.stories.ts

@@ -23,7 +23,12 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 					data-date-picker
 					[attr.data-date-picker-type]= "range ? 'range' : 'single'"
 					class="bx--date-picker"
-					[ngClass]= "range ? 'bx--date-picker--range' : 'bx--date-picker--single'">
+					[ngClass]="{
+						'bx--date-picker--range' : range,
+						'bx--date-picker--single' : !range,
+						'bx--date-picker--light' : theme === 'light',
+						'bx--skeleton' : skeleton
+					}">
 					<div class="bx--date-picker-container">
 						<ibm-date-picker-input
 							[label]= "label"
@@ -32,6 +37,10 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 							[id]= "id"
 							[type]= "range ? 'range' : 'single'"
 							[hasIcon]= "range ? false : true"
+							[disabled]="disabled"
+							[invalid]="invalid"
+							[invalidText]="invalidText"
+							[skeleton]="skeleton"
 							(valueChange)="valueChange.emit($event)">
 						</ibm-date-picker-input>
 					</div>
@@ -44,6 +53,10 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 							[id]= "id + '-rangeInput'"
 							[type]= "range ? 'range' : 'single'"
 							[hasIcon]= "range ? true : null"
+							[disabled]="disabled"
+							[invalid]="invalid"
+							[invalidText]="invalidText"
+							[skeleton]="skeleton"
 							(valueChange)="valueChange.emit($event)">
 						</ibm-date-picker-input>
 					</div>
@@ -80,6 +93,16 @@ export class DatePicker implements OnDestroy {
 
 	@Input() value: Array<any>;
 
+	@Input() theme: "light" | "dark" = "dark";
+
+	@Input() disabled = false;
+
+	@Input() invalid = false;
+
+	@Input() invalidText: string;
+
+	@Input() skeleton = false;
+
 	@Output() valueChange: EventEmitter<any> = new EventEmitter();
 
 	flatpickrOptions: FlatpickrOptions = {
@@ -141,6 +164,9 @@ export class DatePicker implements OnDestroy {
 		// add day classes and special case the "today" element based on `this.value`
 		Array.from(dayContainer).forEach(element => {
 			element.classList.add("bx--date-picker__day");
+			if (!this.value) {
+				return;
+			}
 			if (element.classList.contains("today") && this.value.length > 0) {
 				element.classList.add("no-border");
 			} else if (element.classList.contains("today") && this.value.length === 0) {

src/datepicker/datepicker.component.ts

@@ -1,7 +1,8 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, array } from "@storybook/addon-knobs/angular";
+import { withKnobs, array, select, text, boolean } from "@storybook/addon-knobs/angular";
 import { DatePickerModule, ExperimentalModule } from "../";
+import { DatePickerInputModule } from "./../datepicker-input/datepicker-input.module";
 import { ExperimentalComponenent } from "../../.storybook/experimental.component";
 
 storiesOf("Date Picker", module)
@@ -10,41 +11,92 @@ storiesOf("Date Picker", module)
 			declarations: [ExperimentalComponenent],
 			imports: [
 				DatePickerModule,
+				DatePickerInputModule,
 				ExperimentalModule
 			]
 		})
 	)
 	.addDecorator(withKnobs)
+	.add("Simple", () => ({
+		template: `
+		<app-experimental-component></app-experimental-component>
+		<ibm-date-picker-input
+			[theme]="theme"
+			[label]="label"
+			[placeholder]="placeholder"
+			[disabled]="disabled"
+			[invalid]="invalid"
+			[invalidText]="invalidText">
+		</ibm-date-picker-input>
+		`,
+		props: {
+			theme: select("Theme", ["dark", "light"], "dark"),
+			label: text("Label text", "Date Picker Label"),
+			placeholder: text("Placeholder text", "mm/dd/yyyy"),
+			invalidText: text("Form validation content", "Invalid date format"),
+			invalid: boolean("Show form validation", false),
+			disabled: boolean("Disabled", false)
+		}
+	}))
 	.add("Single", () => ({
 		template: `
 		<app-experimental-component></app-experimental-component>
 		<ibm-date-picker
-			label="Date Picker Label"
-			[value]="value"
+			[label]="label"
+			[placeholder]="placeholder"
+			[theme]="theme"
+			[disabled]="disabled"
+			[invalid]="invalid"
+			[invalidText]="invalidText"
 			(valueChange)="valueChange($event)">
 		</ibm-date-picker>
 		`,
 		props: {
-			value: array("value", ["01/01/2011"]),
-			valueChange: action("Date change fired!")
+			value: array("value", [(new Date().getMonth() + 1) + "/" + new Date().getDate() + "/" + new Date().getFullYear()]),
+			valueChange: action("Date change fired!"),
+			theme: select("Theme", ["dark", "light"], "dark"),
+			label: text("Label text", "Date Picker Label"),
+			placeholder: text("Placeholder text", "mm/dd/yyyy"),
+			invalidText: text("Form validation content", "Invalid date format"),
+			invalid: boolean("Show form validation", false),
+			disabled: boolean("Disabled", false)
 		}
 	}))
 	.add("Range", () => ({
 		template: `
 		<app-experimental-component></app-experimental-component>
 		<ibm-date-picker
-			label="Date Picker Label"
-			rangeLabel="Date Picker Label2"
+			[label]="label"
+			[rangeLabel]="label"
 			range="true"
-			[value]="value"
+			[placeholder]="placeholder"
+			[theme]="theme"
+			[disabled]="disabled"
+			[invalid]="invalid"
+			[invalidText]="invalidText"
 			(valueChange)="valueChange($event)">
 		</ibm-date-picker>
 		`,
 		props: {
 			value: array("value", [
-				"01/01/2011",
-				"01/01/2012"
+				(new Date().getMonth() + 1) + "/" + new Date().getDate() + "/" + new Date().getFullYear(),
+				(new Date().getMonth() + 2) + "/" + new Date().getDate() + "/" + new Date().getFullYear()
 			]),
-			valueChange: action("Date change fired!")
+			valueChange: action("Date change fired!"),
+			theme: select("Theme", ["dark", "light"], "dark"),
+			label: text("Label text", "Date Picker Label"),
+			placeholder: text("Placeholder text", "mm/dd/yyyy"),
+			invalidText: text("Form validation content", "Invalid date format"),
+			invalid: boolean("Show form validation", false),
+			disabled: boolean("Disabled", false)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<app-experimental-component></app-experimental-component>
+		<ibm-date-picker
+			range="true"
+			skeleton="true">
+		</ibm-date-picker>
+		`
 	}));

src/datepicker/datepicker.stories.ts

@@ -212,6 +212,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		this.index = this._items.findIndex(item => item.selected);
 		this.setupFocusObservable();
 		setTimeout(() => {
+			if (!this.getSelected()) { return; }
 			if (this.type === "single") {
 				this.select.emit({ item: this._items.find(item => item.selected) });
 			} else {

src/dropdown/list/dropdown-list.component.ts

@@ -144,6 +144,9 @@ export class FileUploader implements OnInit {
 
 	onFilesAdded() {
 		const files = this.fileInput.nativeElement.files;
+		if (!this.multiple) {
+			this.files.clear();
+		}
 		for (let file of files) {
 			const fileItem: FileItem = {
 				uploaded: false,

src/file-uploader/file-uploader.component.ts

@@ -35,7 +35,7 @@ class FileUploaderStory {
 	static notificationCount = 0;
 
 	@Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;
-	@Input() files: any;
+	@Input() files = new Set();
 	@Input() title;
 	@Input() description;
 	@Input() buttonText;