issue #163: light style for dropdown

Author: panpan-lin

src/dropdown/dropdown.component.ts

@@ -28,7 +28,10 @@ import { I18n } from "./../i18n/i18n.module";
 @Component({
 	selector: "ibm-dropdown",
 	template: `
-	<div class="bx--list-box">
+	<div
+		class="bx--list-box"
+		[ngClass]="{'bx--dropdown--light': light}"
+	>
 		<button
 			type="button"
 			#dropdownButton
@@ -82,7 +85,11 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * item selection.
 	 */
 	@Input() type: "single" | "multi" = "single";
-
+	/**
+	 * Set to `true` to apply the light style to the dropdown.
+	 * @memberof Dropdown
+	 */
+	@Input() light = false;
 	/**
 	 * Set to `true` to disable the dropdown.
 	 */

src/dropdown/dropdown.stories.ts

@@ -41,6 +41,29 @@ storiesOf("Dropdown", module)
 			onClose: action("Dropdown closed")
 		}
 	}))
+	.add("Light", () => ({
+		template: `
+		<ibm-dropdown
+			[light]="true"
+			placeholder="Select"
+			[disabled]="disabled"
+			(selected)="selected($event)"
+			(onClose)="onClose($event)">
+			<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+		</ibm-dropdown>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed")
+		}
+	}))
 	.add("Multi-select", withNotes({ text: "Notes on multi select" })(() => ({
 		template: `
 		<ibm-dropdown