make the stories nicer

Author: cal-smith

src/dropdown/dropdown.component.spec.ts

@@ -14,7 +14,7 @@ import { ScrollableList } from "./scrollable-list.directive";
 	<ibm-dropdown
 		placeholder="test"
 		class="custom-class"
-		(select)="onSelect($event)">
+		(selected)="onSelect($event)">
 		<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
 	</ibm-dropdown>`
 })

src/dropdown/dropdown.component.ts

@@ -120,13 +120,6 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * @memberof Dropdown
 	 */
 	@Input() scrollableContainer: string;
-	/**
-	 * Emits selection events to other class.
-	 * (Deprecated)
-	 * @type {EventEmitter<Object>}
-	 * @memberof Dropdown
-	 */
-	@Output() select: EventEmitter<Object> = new EventEmitter<Object>();
 	/**
 	 * Emits selection events.
 	 * @type {EventEmitter<Object>}
@@ -236,7 +229,6 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 					this.propagateChange(null);
 				}
 			}
-			this.select.emit(event);
 			this.selected.emit(event);
 		});
 	}

src/dropdown/dropdown.stories.ts

@@ -1,6 +1,7 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withNotes } from "@storybook/addon-notes";
-import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
 
 import { TranslateModule } from "@ngx-translate/core";
 
@@ -18,31 +19,46 @@ storiesOf("Dropdown", module)
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<ibm-dropdown placeholder="Select" [disabled]="disabled">
-			<ibm-dropdown-list [items]="[
-				{content: 'one'},
-				{content: 'two'},
-				{content: 'three'},
-				{content: 'four'}
-			]"></ibm-dropdown-list>
+		<ibm-dropdown
+			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  type="multi" placeholder="Multi-select" [disabled]="disabled">
-			<ibm-dropdown-list [items]="[
-				{content: 'one'},
-				{content: 'two'},
-				{content: 'three'},
-				{content: 'four'}
-			]"></ibm-dropdown-list>
+		<ibm-dropdown
+			type="multi"
+			placeholder="Multi-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 multi-select dropdown"),
+			onClose: action("Multi-select dropdown closed")
 		}
 	})));

src/forms/forms.stories.ts

@@ -31,11 +31,17 @@ storiesOf("Forms", module).addDecorator(
 	}))
 	.add("Radio", () => ({
 		template: `
-		<ibm-radio-group>
-			<ibm-radio>one</ibm-radio>
+		<ibm-radio-group (change)="onChange($event)">
+			<ibm-radio [disabled]="disableOne">one</ibm-radio>
 			<ibm-radio>two</ibm-radio>
+			<ibm-radio>three</ibm-radio>
+			<ibm-radio>four</ibm-radio>
 		</ibm-radio-group>
-	`
+		`,
+		props: {
+			disableOne: boolean("disableOne", false),
+			onChange: action("Radio changed!")
+		}
 	}))
 	.add("Label", () => ({
 		template: `
@@ -46,5 +52,8 @@ storiesOf("Forms", module).addDecorator(
 	`
 	}))
 	.add("Switch", () => ({
-		template: `<ibm-switch></ibm-switch>`
+		template: `<ibm-switch [disabled]="disabled"></ibm-switch>`,
+		props: {
+			disabled: boolean("disabled", false),
+		}
 	}));

src/forms/radio.component.ts

@@ -441,8 +441,7 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 			useExisting: RadioComponent,
 			multi: true
 		}
-	],
-	styleUrls: ["./../../node_modules/carbon-components/scss/components/radio-button/_radio-button.scss"]
+	]
 })
 export class RadioComponent extends CheckboxComponent implements OnInit {
 	/**

src/modal/modal.stories.ts

@@ -1,10 +1,10 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withKnobs } from "@storybook/addon-knobs/angular";
+import { withKnobs, text } from "@storybook/addon-knobs/angular";
 
 import { TranslateModule } from "@ngx-translate/core";
 
 import { ModalModule } from "../";
-import { Component, Injector } from "@angular/core";
+import { Component, Injector, Input } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { Modal, ModalService } from "../";
 
@@ -40,13 +40,15 @@ class SampleModalComponent {
 })
 class ModalStory {
 
+	@Input() modalText = "Hello, World";
+
 	constructor(private modalService: ModalService) { }
 
 	openModal() {
 		this.modalService.create({
 			component: SampleModalComponent,
 			inputs: {
-				modalText: "Hello, World!"
+				modalText: this.modalText
 			}
 		});
 	}
@@ -72,8 +74,11 @@ storiesOf("Modal", module)
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-	<app-modal-story></app-modal-story>
-	<ibm-modal-placeholder></ibm-modal-placeholder>
-	`
+		<app-modal-story [modalText]="modalText"></app-modal-story>
+		<ibm-modal-placeholder></ibm-modal-placeholder>
+		`,
+		props: {
+			modalText: text("modalText", "Hello, World!")
+		}
 	}
 ));