Merge pull request #264 from markewallace/dynamic_overflow

Dynamic overflow menu example

Author: zvonimirfras

src/dialog/overflow-menu/overflow-menu.stories.ts

@@ -1,7 +1,18 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withKnobs, boolean, number } from "@storybook/addon-knobs/angular";
 
 import { DialogModule } from "../../";
 
+let options;
+
+function createOptions(count: number): Array<string> {
+	if (options && count === options.length) {
+		return options;
+	}
+	options = Array(count).fill(0).map((x, i) => "Option " + (i + 1));
+	return options;
+}
+
 storiesOf("Overflow Menu", module)
 	.addDecorator(
 		moduleMetadata({
@@ -10,6 +21,7 @@ storiesOf("Overflow Menu", module)
 			]
 		})
 	)
+	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
 			<ibm-overflow-menu>
@@ -44,4 +56,21 @@ storiesOf("Overflow Menu", module)
 			click: () => console.log("click"),
 			selected: () => console.log("selected")
 		}
+	}))
+	.add("Dynamic", () => ({
+		template: `
+			<span>
+				Dynamic <code style="font-family: monospace;">OverflowMenu</code>, using the <code style="font-family: monospace;">optionCount</code> knob <br/>
+				to change the number of menu options
+			</span>
+			<ibm-overflow-menu>
+				<ibm-overflow-menu-option *ngFor="let option of options(optionCount)">
+					{{option}}
+				</ibm-overflow-menu-option>
+			</ibm-overflow-menu>
+		`,
+		props: {
+			optionCount: number("optionCount", 10),
+			options: createOptions
+		}
 	}));