Dynamic overflow menu example

Author: markewallace

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;
+
+cost 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,18 @@ storiesOf("Overflow Menu", module)
 			click: () => console.log("click"),
 			selected: () => console.log("selected")
 		}
+	}))
+	.add("Dynamic", () => ({
+		template: `
+			<span>Dynamic OverflowMenu, using the optionCount knob 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
+		}
 	}));