From eeb2e724bc650362e20b2f35b22b24b4808f0df8 Mon Sep 17 00:00:00 2001
From: Chris Hayes <chrisroberthayes@gmail.com>
Date: Mon, 1 Jul 2019 15:53:47 -0400
Subject: [PATCH] =?UTF-8?q?[storybook=5F=5Faddon-knobs]=20Add=20missing=20?=
 =?UTF-8?q?type=20overload=20for=20options=E2=80=A6=20(#36328)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It's possible to pass an array of default values to optionsKnob and subsequently have an array of selected options returned. This PR adds an overload type to allow that behaviour.
---
 types/storybook__addon-knobs/index.d.ts         |  9 +++++++++
 .../storybook__addon-knobs-tests.tsx            | 17 +++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/types/storybook__addon-knobs/index.d.ts b/types/storybook__addon-knobs/index.d.ts
index b4402c0196..6d8adee45e 100644
--- a/types/storybook__addon-knobs/index.d.ts
+++ b/types/storybook__addon-knobs/index.d.ts
@@ -85,6 +85,15 @@ export function optionsKnob<T>(
     options?: OptionsKnobOptions
 ): T;
 
+export function optionsKnob<T>(
+    label: string,
+    values: {
+        [key: string]: T;
+    },
+    defaultValue?: T[],
+    options?: OptionsKnobOptions
+): T[];
+
 export interface WrapStoryProps {
     context?: object;
     storyFn?: RenderFunction;
diff --git a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx
index 821d4677fc..b33efcc113 100644
--- a/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx
+++ b/types/storybook__addon-knobs/storybook__addon-knobs-tests.tsx
@@ -15,6 +15,7 @@ import {
   button,
   knob,
   radios,
+  optionsKnob as options,
 } from '@storybook/addon-knobs';
 
 enum SomeEnum {
@@ -132,3 +133,19 @@ select<any>('label', { option: 'Option' }, null, groupId);
 files('label', 'image/*', []);
 date('label', new Date(), groupId);
 button('label', () => undefined, groupId);
+
+// optionsKnob
+type Tool = 'hammer' | 'saw' | 'drill';
+const visibleToolOptions: { [key: string]: Tool } = { hammer: 'hammer', saw: 'saw', drill: 'drill' };
+
+// test selecting one option
+const defaultVisibleTool = 'hammer';
+const singleSelection: Tool = options<Tool>('visibleTools', visibleToolOptions, defaultVisibleTool, {
+  display: 'check',
+});
+
+// test selecting multiple options
+const defaultVisibleTools: Tool[] = ['hammer'];
+const multiSelection: Tool[] = options<Tool>('visibleTools', visibleToolOptions, defaultVisibleTools, {
+  display: 'check',
+});